/* =====================================================================
   WE CAN Casablanca-Settat — Couche amazighe (tifinagh)
   Fichier additif : chargé APRÈS assets/site.css, qui n'est pas modifié.
   Aucune règle ne s'applique tant que data-lang ne vaut pas "zgh" :
   le site français et le site arabe restent rigoureusement inchangés.
   ===================================================================== */

/* 1. POLICE — Alexandria ne couvre pas le bloc tifinagh U+2D30–2D7F.
   Sous-setter avant mise en ligne :
     pyftsubset NotoSansTifinagh.ttf --unicodes=U+2D30-2D7F \
   Sous-ensemble officiel Google Fonts (SIL OFL), 11 496 octets,
   deja restreint au bloc tifinagh. */
@font-face{
  font-family:'Noto Sans Tifinagh';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:local('Noto Sans Tifinagh'), url('tifinagh.woff2') format('woff2');
  unicode-range:U+2D30-2D7F;
}
:root{ --f-zgh:'Noto Sans Tifinagh','Alexandria',system-ui,sans-serif; }

/* 2. VISIBILITÉ — réplique stricte du bloc « Bilingue » de site.css. */
/* Certains conteneurs de site.css (bandeau defilant, entre autres) posent
   un display:flex plus specifique que le simple .zgh : sans !important,
   la version amazighe resterait visible en francais et en arabe. */
html:not([data-lang="zgh"]) .zgh{display:none !important}
/* Correctif : site.css pose un display:flex sur les items du bandeau
   defilant, plus specifique que .ar{display:none}. Resultat, la version
   arabe du bandeau restait visible sur la page francaise. Symetrie retablie. */
html[data-lang="fr"] .ar{display:none !important}
html[data-lang="ar"] .fr{display:none !important}
html[data-lang="zgh"] .fr,
html[data-lang="zgh"] .ar{display:none !important}
html[data-lang="zgh"] .zgh{display:inline}
html[data-lang="zgh"] p.zgh,
html[data-lang="zgh"] div.zgh,
html[data-lang="zgh"] li.zgh,
html[data-lang="zgh"] h1.zgh,
html[data-lang="zgh"] h2.zgh,
html[data-lang="zgh"] h3.zgh,
html[data-lang="zgh"] h4.zgh,
html[data-lang="zgh"] .blk.zgh{display:block}

/* Bloc encore sans version amazighe : site.js y depose une copie du
   francais marquee data-repli. Decommenter la regle ci-dessous en
   recette pour reperer d'un coup d'oeil ce qui reste a traduire.
html[data-lang="zgh"] .zgh[data-repli]{outline:2px dashed #e11;outline-offset:2px}
*/

/* 3. TYPOGRAPHIE — le tifinagh se lit de gauche à droite ; pas de casse,
   pas d'italique, glyphes géométriques à hauteur d'œil uniforme. */
html[data-lang="zgh"] body{font-family:var(--f-zgh);line-height:1.9}
html[data-lang="zgh"] .kicker,
html[data-lang="zgh"] .btn,
html[data-lang="zgh"] .nav-links>a,
html[data-lang="zgh"] .dd>button,
html[data-lang="zgh"] .dd-m a,
html[data-lang="zgh"] .tb,
html[data-lang="zgh"] .pill,
html[data-lang="zgh"] .chip,
html[data-lang="zgh"] .status,
html[data-lang="zgh"] label,
html[data-lang="zgh"] input,
html[data-lang="zgh"] select,
html[data-lang="zgh"] textarea,
html[data-lang="zgh"] .ck,
html[data-lang="zgh"] .consent,
html[data-lang="zgh"] .note,
html[data-lang="zgh"] .crumb{font-family:var(--f-zgh)}
html[data-lang="zgh"] h1,
html[data-lang="zgh"] h2,
html[data-lang="zgh"] h3,
html[data-lang="zgh"] h4{font-family:var(--f-zgh);font-weight:700;letter-spacing:0;line-height:1.34}
html[data-lang="zgh"] .h-xl{font-size:clamp(1.9rem,4.6vw,3.5rem);letter-spacing:.005em;line-height:1.3;font-weight:700}
html[data-lang="zgh"] .h-l{font-size:clamp(1.5rem,3.2vw,2.4rem);letter-spacing:.005em;line-height:1.34;font-weight:700}
html[data-lang="zgh"] .h-m{letter-spacing:0;line-height:1.4;font-weight:700}
html[data-lang="zgh"] .kicker{text-transform:none;letter-spacing:0;font-size:.82rem}
/* L'italique n'existe pas en tifinagh : les <em> sont marqués par la couleur. */
html[data-lang="zgh"] .h-xl em,
html[data-lang="zgh"] .h-l em,
html[data-lang="zgh"] .h-m em{font-style:normal;color:var(--violet)}
html[data-lang="zgh"] .dark .h-xl em,
html[data-lang="zgh"] .dark .h-l em,
html[data-lang="zgh"] .dark .h-m em{color:var(--yellow)}
html[data-lang="zgh"] .ticker-t{animation-direction:normal}

/* 4. LOGO — tant qu'un verrouillage tifinagh n'est pas validé par le
   Bureau politique, la version amazighe reprend le logo latin. */
html[data-lang="zgh"] .brand .lgfr{display:block}
html[data-lang="zgh"] .brand .lgar{display:none}

/* 5. SÉLECTEUR DE LANGUE — le bouton binaire devient un menu à trois entrées.
   Le balisage est produit par site.js. */
.langsel{position:relative}
.langsel-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border:1px solid rgba(134,7,247,.28);background:transparent;border-radius:100px;
  cursor:pointer;font-family:var(--f-ui);font-weight:700;font-size:.86rem;
  color:var(--violet);transition:background .25s,border-color .25s}
.langsel-btn:hover{background:rgba(134,7,247,.07);border-color:var(--violet)}
.langsel-btn::after{content:"\25BE";font-size:.7em;opacity:.65}
.langsel-menu{position:absolute;top:calc(100% + 9px);inset-inline-end:0;
  min-width:190px;padding:7px;background:#fff;border:1px solid rgba(0,0,0,.09);
  border-radius:15px;box-shadow:0 18px 44px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s,transform .22s,visibility .22s;z-index:60}
.langsel[aria-expanded="true"] .langsel-menu,
.langsel-menu:focus-within{opacity:1;visibility:visible;transform:translateY(0)}
.langsel-menu a{display:block;padding:11px 15px;border-radius:10px;
  text-decoration:none;color:var(--ink);font-size:.92rem;line-height:1.35}
.langsel-menu a:hover,
.langsel-menu a:focus-visible{background:rgba(134,7,247,.08);color:var(--violet)}
.langsel-menu a[aria-current="true"]{background:rgba(134,7,247,.11);color:var(--violet);font-weight:700}
/* Chaque entrée est écrite dans sa propre langue et sa propre police. */
.langsel-menu a[hreflang="ar"]{font-family:var(--f-ar);direction:rtl;text-align:right}
.langsel-menu a[hreflang="zgh"]{font-family:var(--f-zgh)}
.langsel-menu a[hreflang="fr"]{font-family:var(--f-ui)}
.dark .langsel-btn,
#hdr.scr .langsel-btn{color:inherit;border-color:currentColor;opacity:.9}

/* 6. Garde-fou leve le 25/08/2026 : l'arbre /zgh/ est complet (10 pages),
   l'entree amazighe du selecteur est donc ouverte au public. */

@media print{ .langsel{display:none} html[data-lang="zgh"] .zgh{display:inline} }