. Un est en ligne et
souligne par defaut : on lui rend l'aspect exact de la pastille, sinon
la grille se casse la ou une region est cliquable et pas sa voisine. */
a.chip{display:block;text-decoration:none;color:inherit}
a.chip:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.mapsvg .rg:focus-visible{outline:none;fill:rgba(255,255,255,.28);stroke:var(--yellow);stroke-width:4}
.chip .pin{width:20px;height:20px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;margin-bottom:10px}
.chip .pin::after{content:"";width:6px;height:6px;background:#fff;border-radius:50%}
.chip .n1{font-weight:700;font-size:.9rem;display:block;line-height:1.3}
.chip .n2{font-size:.85rem;color:var(--grey);display:block;margin-top:2px}
/* Une seule langue à la fois dans les cartes de coordination. */
.chip .n1.ar,.chip .n2.ar{display:none}
html[data-lang="ar"] .chip .n1.fr,html[data-lang="ar"] .chip .n2.fr{display:none}
html[data-lang="ar"] .chip .n1.ar,html[data-lang="ar"] .chip .n2.ar{display:block}
.chip .st{margin-top:12px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:5px}
.chip .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow)}
html[data-lang="ar"] .chip .st{letter-spacing:0;text-transform:none;font-size:.8rem}
/* Pastille visee par une adresse du type coordinations.html#settat :
elle se signale quelques secondes, le temps que l'oeil la retrouve
parmi les seize. */
.chip.vise{border-color:var(--violet);box-shadow:0 0 0 3px rgba(134,7,247,.16),var(--sh-s);animation:vise 2.6s var(--ease)}
@keyframes vise{0%,100%{box-shadow:0 0 0 3px rgba(134,7,247,.16),var(--sh-s)}
30%{box-shadow:0 0 0 8px rgba(134,7,247,.22),var(--sh-s)}}
.pane{display:none}
.pane.on{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
/* ---------- LA BANDE DES DOUZE REGIONS ----------
Rendue par region.php seul, en bas de chaque espace regional. Elle ne
reprend pas .chip : une pastille de coordination est une fiche qu'on
lit, celle-ci est un bouton de navigation qu'on parcourt des yeux
douze fois de suite. Douze fiches de 18px de padding feraient un
second ecran ; douze pilules tiennent en trois lignes.
Les couleurs sont celles de .tb, l'onglet — meme forme, meme marquage
de l'element courant par var(--ink). C'est voulu : le visiteur a deja
appris ce vocabulaire sur coordinations.html.
text-decoration:none et color:inherit pour la meme raison que a.chip
plus haut : un arrive souligne, et une pilule soulignee sur deux
casserait la bande la ou la region courante n'est pas un lien. */
.regions-bande{display:flex;flex-wrap:wrap;gap:8px}
.rb{padding:9px 16px;border-radius:100px;border:1.4px solid var(--line);background:#fff;
font-size:.82rem;font-weight:600;color:var(--navy);font-family:var(--f-ui);
text-decoration:none;transition:.3s var(--ease);display:inline-block}
a.rb:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
a.rb:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
/* La region ou l'on se trouve : pas un lien, et elle le montre. Curseur
par defaut plutot que la main, parce que rien ne se passera. */
.rb.ici{background:var(--ink);color:#fff;border-color:var(--ink);cursor:default}
html[data-lang="ar"] .rb{font-family:var(--f-ar)}
/* ---------- TROMBINOSCOPE ---------- */
.kpi-vide{font-size:.88rem;color:var(--grey);font-weight:300;line-height:1.7;padding:26px 0}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pp{display:flex;flex-direction:column}
.pp .bd{flex:1}
.people.cinq{grid-template-columns:repeat(5,1fr);gap:16px}
.people.cinq .pp .bd{padding:15px 15px 18px}
.people.cinq .pp h4{font-size:.94rem}
.people.cinq .pp .ph .mono{font-size:2rem}
@media(max-width:1240px){.people.cinq{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.people.cinq{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.people.cinq{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.people.cinq{grid-template-columns:1fr}}
.pp{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.4s var(--ease)}
.pp:hover{transform:translateY(-8px);box-shadow:var(--sh);border-color:transparent}
.pp .ph{aspect-ratio:1/1.08;background:var(--grad-soft);position:relative;overflow:hidden;display:grid;place-items:center}
.pp .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;min-width:0;min-height:0}
/* Le cadre d'une photo est une grille. Sans min-height:0, la taille minimale
automatique d'un element de grille l'emporte sur height:100% : la photo
depasse alors du cadre par le bas, et l'ajusteur calcule le cadrage sur une
hauteur qui n'est pas celle que l'on voit. Garde-fou pour toute image
cadrable, quel que soit son cadre. */
img[data-wc-cle]{min-width:0;min-height:0}
/* Le cadre ne doit jamais avoir deux lignes. En mode edition, les outils de
photo sont ajoutes a l'interieur du cadre : sans cette regle ils formeraient
une seconde ligne de grille, la photo serait comprimee vers le haut et une
bande violette apparaitrait en dessous. Tout enfant du cadre se pose donc
dans la meme case, par-dessus la photo. */
.pp .ph>*{grid-area:1/1}
.pp .ph .mono{font-size:2.4rem;font-weight:900;color:rgba(255,255,255,.5);letter-spacing:-.04em}
.pp .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,15,38,.55),transparent 55%)}
/* Etiquette de groupe retiree : chaque pole porte deja son titre de section,
et chaque carte affiche le poste reel de la personne. Le repere de groupe sur
la photo faisait donc doublon. La regle est conservee au cas ou on voudrait la
rallumer un jour. */
.pp .rank{display:none;position:absolute;top:12px;inset-inline-start:12px;background:var(--yellow);color:var(--ink);font-size:.64rem;font-weight:900;padding:4px 10px;border-radius:100px;letter-spacing:.06em;text-transform:uppercase;z-index:2}
html[data-lang="ar"] .pp .rank{letter-spacing:0;text-transform:none;font-size:.72rem}
.pp .bd{padding:18px 20px 22px}
.pp .post{font-size:.72rem;font-weight:800;color:var(--violet);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:6px}
html[data-lang="ar"] .pp .post{letter-spacing:0;text-transform:none;font-size:.82rem}
.pp h4{font-size:1.02rem;margin-bottom:4px}
.pp .job{font-size:.8rem;color:var(--grey);font-weight:300;line-height:1.5;display:flex;align-items:flex-start;gap:6px}
.pp .job::before{content:"";width:14px;height:1.5px;background:var(--lilas);margin-top:9px;flex-shrink:0}
.pp.tbd h4{color:var(--grey);font-weight:500}
.pp.tbd .ph{background:#E8E9EF}
.pp.tbd .ph .mono{color:#9AA0B8;opacity:.75}
.tbd-tag{display:inline-block;background:#FFF4D6;color:#8A6100;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:100px;margin-top:8px}
/* ---------- LISTE / TIMELINE ---------- */
.tl{display:flex;flex-direction:column;gap:0;position:relative;padding-inline-start:34px}
.tl::before{content:"";position:absolute;inset-inline-start:9px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,var(--lilas) 0 6px,transparent 6px 12px)}
.tl-i{position:relative;padding-bottom:28px}
.tl-i::before{content:"";position:absolute;inset-inline-start:-34px;top:6px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--violet)}
.tl-i:hover::before{background:var(--yellow);border-color:var(--yellow)}
.tl-i h4{font-size:1rem;margin-bottom:5px}
.tl-i p{font-size:.87rem;color:var(--grey);font-weight:300}
/* ---------- SECRÉTAIRE GÉNÉRAL ----------
Portrait volontairement dominant : tant qu'aucune photo n'a été fournie,
le cadre affiche les initiales sur le dégradé de marque plutôt qu'un
silhouette générique, avec l'étiquette « Photo à fournir » déjà utilisée
pour le trombinoscope. Déposer une image suffit : elle remplit le cadre
en ![]()
et couvre les initiales. */
.sg-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:stretch}
.sg-photo-frame{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--grad-soft);min-height:440px;display:grid;place-items:center;gap:14px;box-shadow:var(--sh)}
.sg-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;position:absolute;inset:0}
.sg-photo-frame .mono{font-size:4.4rem;font-weight:900;color:rgba(255,255,255,.55);letter-spacing:-.04em;position:relative}
.sg-photo-frame .tbd-tag{position:relative}
.sg-photo figcaption{text-align:center;margin-top:16px;font-size:1.05rem;font-weight:700;color:var(--navy)}
.sg-bio p{margin-top:16px;color:var(--grey);font-weight:300;line-height:1.75}
.sg-bio p:first-child{margin-top:0}
.sg-quote{margin-top:26px;padding-inline-start:22px;border-inline-start:3px solid var(--violet);font-size:1.08rem;font-weight:700;color:var(--navy);line-height:1.6;font-style:normal}
.sg-quote cite{display:block;margin-top:10px;font-size:.78rem;font-weight:400;font-style:normal;color:var(--grey)}
html[dir="rtl"] .sg-quote{border-inline-start:0;border-inline-end:3px solid var(--violet);padding-inline-start:0;padding-inline-end:22px}
@media(max-width:1000px){.sg-grid{grid-template-columns:1fr}.sg-photo-frame{min-height:320px}}
/* ---------- ACCORDÉON ---------- */
.lv{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s;margin-bottom:14px}
.sec.dark .lv{background:rgba(255,255,255,.05);border-color:var(--line-d)}
.lv.open{border-color:var(--violet-l)}
.sec.dark .lv.open{background:rgba(255,255,255,.08);border-color:rgba(255,216,77,.35)}
.lv-h{display:flex;align-items:center;gap:18px;padding:22px 26px;cursor:pointer;user-select:none}
.lv-n{width:44px;height:44px;border-radius:13px;background:var(--grad-soft);display:grid;place-items:center;font-weight:900;font-size:1.02rem;flex-shrink:0;color:#fff}
.lv.open .lv-n{background:var(--yellow);color:var(--ink)}
.lv-t{flex:1}
.lv-t b{display:block;font-size:1.02rem;font-weight:800}
.lv-t small{opacity:.62;font-size:.79rem;font-weight:300;color:var(--grey)}
.sec.dark .lv-t small{color:rgba(255,255,255,.6)}
.lv-x{width:30px;height:30px;border-radius:50%;border:1.4px solid var(--line);display:grid;place-items:center;flex-shrink:0;transition:.35s var(--ease);font-size:1rem;line-height:1}
.sec.dark .lv-x{border-color:var(--line-d)}
.lv.open .lv-x{transform:rotate(45deg);background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.lv-b{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.lv-b-in{padding:22px 26px 26px;border-top:1px solid var(--line)}
.sec.dark .lv-b-in{border-color:var(--line-d)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:var(--lilas-x);border:1px solid transparent;border-radius:100px;padding:8px 16px;font-size:.82rem;transition:.3s}
.sec.dark .pill{background:rgba(255,255,255,.08);border-color:var(--line-d)}
.pill:hover{background:var(--yellow);color:var(--ink)}
.pill b{font-weight:800;color:var(--violet)}
.pill:hover b{color:var(--ink)}
.note{margin-top:18px;font-size:.81rem;color:var(--grey);font-weight:300;line-height:1.7}
.sec.dark .note{color:rgba(255,255,255,.6)}
/* ---------- ÉVÉNEMENTS ---------- */
.ev{display:flex;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.4s var(--ease);align-items:flex-start;margin-bottom:14px}
.ev:hover{transform:translateX(6px);box-shadow:var(--sh-s);border-color:var(--violet-l)}
html[data-lang="ar"] .ev:hover{transform:translateX(-6px)}
.ev-d{width:74px;flex-shrink:0;text-align:center;background:var(--grad-soft);color:#fff;border-radius:14px;padding:12px 6px}
.ev-d b{display:block;font-size:1.55rem;font-weight:900;line-height:1}
.ev-d span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
html[data-lang="ar"] .ev-d span{letter-spacing:0;text-transform:none;font-size:.72rem}
.ev-c{flex:1}
.ev-c h4{font-size:1rem;margin-bottom:6px}
.ev-c p{font-size:.85rem;color:var(--grey);font-weight:300}
.ev-m{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.75rem;color:var(--grey)}
.ev-m span{display:inline-flex;align-items:center;gap:5px}
.badge{display:inline-block;padding:5px 12px;border-radius:100px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
html[data-lang="ar"] .badge{letter-spacing:0;text-transform:none;font-size:.76rem}
.b-open{background:#E6F9EF;color:#0B7A45}
.b-soon{background:var(--lilas-a);color:var(--violet)}
.b-int{background:#FFF4D6;color:#8A6100}
/* ---------- PARCOURS ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:20px}
.step{text-align:center;padding:0 12px;position:relative}
.step::after{content:"";position:absolute;top:26px;inset-inline-start:50%;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--lilas) 0 6px,transparent 6px 12px)}
.step:last-child::after{display:none}
.step .b{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--lilas);display:grid;place-items:center;font-weight:900;margin:0 auto 16px;position:relative;z-index:1;font-size:1.02rem;color:var(--violet);transition:.4s var(--ease)}
.step:hover .b{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:scale(1.14)}
.step h4{font-size:.93rem;margin-bottom:6px}
.step p{font-size:.79rem;color:var(--grey);font-weight:300}
/* ---------- FORMULAIRE ---------- */
.form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.form-box{background:#fff;color:var(--ink);border-radius:var(--r-l);padding:34px;box-shadow:var(--sh)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fld{display:flex;flex-direction:column;gap:6px}
/* display:flex l'emporte sur le display:none que le navigateur attache
lui-meme a [hidden]. Sans cette ligne, le champ de la prefecture —
masque tant qu'aucune region n'est choisie — resterait visible et
vide, et un champ vide et obligatoire bloque l'envoi. */
.fld[hidden]{display:none}
.fld.full{grid-column:1/-1}
.fld label{font-size:.78rem;font-weight:700;color:var(--navy)}
.fld .req{color:var(--violet)}
.fld input,.fld select,.fld textarea{border:1.4px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.9rem;background:#fff;color:var(--ink);transition:.25s;font-family:var(--f-ui);width:100%}
/* Sans couleur explicite, les champs héritent du blanc de .sec.dark : illisibles. */
.fld select option{color:var(--ink);background:#fff}
.fld input::placeholder,.fld textarea::placeholder{color:#9AA0AE;opacity:1}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(115,12,213,.09)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.4px solid var(--line);border-radius:11px;cursor:pointer;font-size:.81rem;transition:.25s;background:#fff;color:var(--navy)}
.ck:hover{border-color:var(--violet-l);background:var(--lilas-x)}
.ck input{width:16px;height:16px;accent-color:var(--violet);flex-shrink:0}
.ck.sel{border-color:var(--violet);background:var(--lilas-a)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--grey);line-height:1.55;margin:18px 0;font-weight:300}
.consent input{width:17px;height:17px;accent-color:var(--violet);flex-shrink:0;margin-top:2px}
/* ---------- Confirmation d'envoi ----------
Le moment le plus important du parcours : la personne vient de confier son
nom, son téléphone et son métier. L'écran doit accuser réception, donner la
référence en grand, et annoncer la suite. Sans la suite, l'attente devient
du doute. */
.ok{display:none;margin-top:18px}
.ok.on{display:block;animation:fade .5s var(--ease)}
.ok-in{position:relative;overflow:hidden;padding:30px 26px 24px;border-radius:var(--r);
background:linear-gradient(160deg,#FBF8FF 0%,#F2ECFD 100%);border:1px solid var(--lilas-a)}
.ok-in::before{content:'';position:absolute;inset-inline-end:-70px;top:-70px;width:210px;height:210px;
border-radius:50%;background:radial-gradient(circle,rgba(134,7,247,.15),transparent 70%);pointer-events:none}
.ok-badge{position:relative;width:52px;height:52px;border-radius:50%;background:var(--grad-soft);
display:grid;place-items:center;box-shadow:0 10px 26px rgba(115,12,213,.30);margin-bottom:16px}
.ok-badge svg{width:25px;height:25px;stroke:#fff;stroke-width:2.7;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.ok b{position:relative;display:block;font-family:var(--f-display);font-weight:800;font-size:1.3rem;
line-height:1.22;letter-spacing:-.022em;color:var(--navy);margin-bottom:8px}
html[data-lang="ar"] .ok b{font-family:var(--f-ar);letter-spacing:0}
.ok .ok-sub{position:relative;font-size:.9rem;color:var(--grey);margin-bottom:18px;font-weight:400}
.ok-ref{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;
padding:14px 18px;border-radius:14px;background:var(--ink);margin-bottom:20px}
.ok-ref .l{font-family:var(--f-ui);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.5);line-height:1.5}
.ok .ref{font-family:var(--f-ui);font-weight:800;font-size:1.35rem;letter-spacing:.06em;
color:#fff;margin-inline-start:auto;line-height:1.2}
.ok-steps{position:relative;list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px}
.ok-steps li{display:flex;gap:13px;align-items:flex-start}
.ok-steps .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#fff;
border:1.4px solid var(--lilas-a);display:grid;place-items:center;font-family:var(--f-ui);
font-size:.72rem;font-weight:800;color:var(--violet);margin-top:1px}
.ok-steps strong{display:block;font-family:var(--f-ui);font-size:.86rem;font-weight:700;
color:var(--navy);line-height:1.45}
.ok-steps small{display:block;font-size:.79rem;color:var(--grey);line-height:1.62;margin-top:2px}
html[data-lang="ar"] .ok-steps strong,html[data-lang="ar"] .ok-steps small{font-family:var(--f-ar)}
.ok-note{position:relative;font-family:var(--f-ui);font-size:.74rem;line-height:1.65;
color:var(--grey);padding-top:14px;border-top:1px solid var(--lilas-a)}
html[data-lang="ar"] .ok-note{font-family:var(--f-ar)}
.ok-note a{color:var(--violet);font-weight:700}
@media(max-width:560px){
.ok-in{padding:24px 18px 20px}
.ok b{font-size:1.16rem}
.ok .ref{margin-inline-start:0;font-size:1.2rem}
}
.why{display:flex;flex-direction:column;gap:16px}
.why-i{display:flex;gap:16px;align-items:flex-start}
.why-i .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid var(--line-d);display:grid;place-items:center;flex-shrink:0}
.why-i .ic img{width:19px}
.why-i h4{font-size:.97rem;margin-bottom:4px}
.why-i p{font-size:.84rem;opacity:.7;font-weight:300}
/* ---------- RESSOURCES / FAQ ---------- */
.res{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:.35s var(--ease)}
.res:hover{border-color:var(--violet);transform:translateY(-4px);box-shadow:var(--sh-s)}
.res .ic{width:42px;height:42px;border-radius:12px;background:var(--lilas-a);display:grid;place-items:center;flex-shrink:0;font-size:1.1rem}
.res b{display:block;font-size:.93rem}
.res small{color:var(--grey);font-size:.77rem;font-weight:300}
.res .go{margin-inline-start:auto;color:var(--violet);font-weight:800;transition:.3s;flex-shrink:0}
.res:hover .go{transform:translateX(4px)}
html[data-lang="ar"] .res:hover .go{transform:translateX(-4px)}
.faq{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:10px;overflow:hidden;transition:.3s}
.faq[open]{border-color:var(--violet-l);box-shadow:var(--sh-s)}
.faq summary{padding:20px 24px;cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;font-size:1.4rem;font-weight:400;color:var(--violet);transition:.35s var(--ease);line-height:1}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;font-size:.88rem;color:var(--grey);font-weight:300;line-height:1.7}
/* ---------- CTA ---------- */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden;text-align:center;padding:clamp(64px,8vw,100px) 0}
.cta::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.92}
.cta .wrap{position:relative;z-index:2}
.cta h2{margin-bottom:16px}
.cta .lead{margin:0 auto 30px;color:rgba(255,255,255,.76)}
.cta .btn-row{justify-content:center}
/* ---------- FOOTER ---------- */
footer{background:var(--navy-d);color:rgba(255,255,255,.72);padding:38px 0 0;font-size:.86rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;padding-bottom:26px;align-items:start}
footer h5{color:#fff;font-size:.77rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
html[data-lang="ar"] footer h5{letter-spacing:0;font-size:.9rem;text-transform:none}
footer ul{list-style:none;display:flex;flex-direction:column;gap:7px}
footer a:hover{color:var(--yellow)}
footer .flogo{height:48px;width:auto;margin-bottom:12px;display:block}
.f-desc{font-size:.82rem;line-height:1.6;opacity:.72;font-weight:300;max-width:44ch}
.soc{display:flex;gap:9px;margin-top:14px}
.soc a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--line-d);display:grid;place-items:center;transition:.3s;font-size:.76rem;font-weight:700}
.soc a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translateY(-3px)}
.f-bot{border-top:1px solid var(--line-d);padding:15px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.77rem;opacity:.6}
/* Pot de miel : hors écran, jamais lu par un lecteur d'écran, invisible
pour l'utilisateur. Seuls les robots le remplissent, ce qui les trahit. */
.pdm{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Message d'échec du formulaire d'adhésion. */
.adh-err{display:none;margin:14px 0 0;padding:13px 16px;border-radius:12px;background:#FDECEC;border:1px solid #F3C2C2;color:#8E1F1F;font-size:.84rem;line-height:1.6;font-weight:500}
.adh-err.on{display:block}
form#adh button[data-envoi]{opacity:.55;pointer-events:none}
.disclaimer{background:rgba(255,216,77,.08);border-top:1px solid rgba(255,216,77,.2);padding:6px 0;font-size:.7rem;text-align:center;color:rgba(255,255,255,.7);line-height:1.45;font-weight:300}
.top{position:fixed;bottom:26px;inset-inline-end:26px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.4s var(--ease);z-index:40;box-shadow:var(--sh)}
.top.on{opacity:1;pointer-events:auto}
.top:hover{background:var(--violet);transform:translateY(-4px)}
/* ============================================================
TRILINGUE — FR · AR · EN
Le français reste le contenu écrit dans le HTML. L'anglais est
appliqué au moment de l'affichage par assets/langue.js, qui
remplace le texte des blocs .fr par sa traduction. Le HTML n'est
donc pas dupliqué une troisième fois, et toute phrase non encore
traduite retombe proprement sur le français.
============================================================ */
html[data-lang="en"] .ar{display:none}
html[data-lang="en"] .fr{display:inline}
html[data-lang="en"] p.fr,html[data-lang="en"] div.fr,html[data-lang="en"] li.fr,
html[data-lang="en"] h1.fr,html[data-lang="en"] h2.fr,html[data-lang="en"] h3.fr,
html[data-lang="en"] h4.fr,html[data-lang="en"] .blk.fr{display:block}
/* ============================================================
HÉROS SANS COMPTEURS
Les chiffres du héros ont été retirés : un chiffre en haut de page
engage sur une promesse mesurable qu'un parti en cours de
constitution ne peut pas encore tenir. Le héros redevient une
colonne unique, avec une mesure de ligne courte pour rester lisible.
============================================================ */
.hero-grid.solo{grid-template-columns:1fr;max-width:19cm}
.hero-grid.solo .h-xl{max-width:28ch}
.hero:not(.page) .hero-grid.solo .h-xl{font-size:clamp(2.15rem,4.55vw,3.58rem)}
/* Sur telephone, le titre d'accueil se resserre pour tenir en deux lignes
pleines : aucun mot ne reste seul en dessous. */
@media(max-width:560px){html:not([data-lang="ar"]) .hero:not(.page) .hero-grid.solo .h-xl{font-size:clamp(1.44rem,7vw,2.15rem)}}
html[data-lang="ar"] .hero-grid.solo .h-xl{max-width:19ch}
.hero-grid.solo .lead{max-width:58ch}
.hero-grid.solo .status{max-width:62ch}
/* ============================================================
RÉGLAGES TYPOGRAPHIQUES — pas de mot orphelin
text-wrap:pretty demande au navigateur d'éviter qu'une dernière
ligne ne contienne qu'un seul mot. On l'applique au texte courant ;
les titres, eux, sont en balance (lignes de longueur égale).
============================================================ */
p,.sub,.f-desc,.disclaimer,.map-note,.kpi-src,.note{text-wrap:pretty}
.panel h3,.lv-t b,.pp .name,.res b,.ev b,.card h3,.step b{text-wrap:balance}
/* L'arabe ne se justifie pas de la même manière : on laisse le moteur
de rendu gérer et on évite balance, qui hache les lignes en RTL. */
html[data-lang="ar"] p,html[data-lang="ar"] h1,html[data-lang="ar"] h2,
html[data-lang="ar"] h3,html[data-lang="ar"] h4{text-wrap:initial}
/* Une ligne de titre ne descend jamais en dessous de deux mots. */
.sec-head .h-l{max-width:22ch}
.sec-head.ctr .h-l{margin-inline:auto}
html[data-lang="ar"] .sec-head .h-l{max-width:28ch}
.sec-head .lead{max-width:60ch}
/* Coupure propre des mots très longs plutôt qu'un débordement. */
p,li,.lead,.lb,.st{overflow-wrap:break-word}
/* ---------- NAV À PLAT (une entrée par page) ---------- */
.nav-links{gap:0}
.nav-links>a{padding:9px 11px;font-size:.84rem;white-space:nowrap}
.nl-f{display:none}
@media(max-width:1240px){.nav-links>a{padding:8px 9px;font-size:.8rem}}
@media(max-width:1100px){.nav-links>a{padding:8px 7px;font-size:.77rem}}
@media(max-width:1000px){
.nav-links{gap:4px}
.nl-s{display:none}
.nl-f{display:inline}
.nav-links>a{font-size:.92rem;white-space:normal}
}
/* ---------- ACTUALITÉS : communiqués & activités ---------- */
.actu-list{display:grid;gap:16px}
.actu{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;transition:.3s var(--ease)}
.actu:hover{border-color:var(--violet);box-shadow:var(--sh-s);transform:translateY(-3px)}
.actu .dt{text-align:center;border-inline-end:1px solid var(--line);padding-inline-end:18px}
.actu .dt .d{font-size:1.85rem;font-weight:800;line-height:1;font-family:var(--f-display);color:var(--violet)}
.actu .dt .m{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:5px}
.actu .dt .y{font-size:.72rem;color:var(--grey);opacity:.75}
html[data-lang="ar"] .actu .dt .m{letter-spacing:0;text-transform:none}
.actu h3{font-size:1.08rem;line-height:1.3;margin-bottom:7px}
.actu p{font-size:.92rem;color:var(--grey);font-weight:300;margin-bottom:0}
.actu .tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);background:var(--lilas-x);padding:5px 11px;border-radius:100px;margin-bottom:10px}
html[data-lang="ar"] .actu .tag{letter-spacing:0;text-transform:none;font-size:.78rem}
.actu .tag.act{color:#8a5a00;background:#fff5db}
.actu .meta{margin-top:12px;font-size:.8rem;color:var(--grey);display:flex;gap:16px;flex-wrap:wrap}
.actu .meta b{font-weight:600;color:var(--navy)}
.actu-vide{border:1.4px dashed var(--line);border-radius:18px;padding:52px 26px;text-align:center;background:var(--paper)}
.actu-vide .ico{width:52px;height:52px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;margin:0 auto 16px}
.actu-vide .ico::after{content:"";width:14px;height:14px;border-radius:50%;background:#fff}
.actu-vide h3{font-size:1.12rem;margin-bottom:8px}
.actu-vide p{color:var(--grey);font-weight:300;max-width:48ch;margin:0 auto}
@media(max-width:640px){
.actu{grid-template-columns:1fr;gap:14px}
.actu .dt{display:flex;gap:8px;align-items:baseline;text-align:start;border-inline-end:0;border-bottom:1px solid var(--line);padding:0 0 12px}
.actu .dt .d{font-size:1.25rem}
.actu .dt .m{margin-top:0}
}
/* ---------- Paroles (كلمات) ---------- */
.fil-mix{display:grid;gap:16px}
.paroles{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.parole{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:.3s var(--ease);position:relative}
.parole:hover{border-color:var(--violet);box-shadow:var(--sh-s);transform:translateY(-3px)}
.parole .tete{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.parole .av{width:46px;height:46px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--grad-soft);display:grid;place-items:center}
.parole .av img{width:100%;height:100%;object-fit:cover;display:block}
.parole .av span{font-family:var(--f-display);font-weight:800;font-size:1rem;color:#fff;line-height:1}
.parole .qui{min-width:0}
.parole .nm{display:block;font-weight:700;font-size:.97rem;color:var(--navy);line-height:1.25}
.parole .po{display:block;font-size:.79rem;color:var(--violet);font-weight:600;line-height:1.35;margin-top:2px}
.parole .txt{font-size:1.02rem;line-height:1.6;color:var(--ink);font-weight:300;margin-bottom:0}
.parole .txt::before{content:"«\00a0";color:var(--violet-l);font-weight:700}
.parole .txt::after{content:"\00a0»";color:var(--violet-l);font-weight:700}
html[data-lang="ar"] .parole .txt::before{content:"”"}
html[data-lang="ar"] .parole .txt::after{content:"“"}
.parole .bas{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.79rem;color:var(--grey)}
.parole .bas a{font-weight:600}
.parole .mk{position:absolute;inset-inline-end:20px;top:18px;width:22px;height:22px;opacity:.16}
@media(max-width:760px){.paroles{grid-template-columns:1fr}}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
.hero-grid,.map-wrap,.form-wrap{grid-template-columns:1fr;gap:38px}
.stats,.grid-4,.people{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr}
.chips{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr 1fr;gap:28px 0}
.step::after{display:none}
.f-grid{grid-template-columns:1fr 1fr}
.nav-links{position:fixed;top:76px;inset-inline:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--sh);transform:translateY(-160%);transition:transform .45s var(--ease);margin:0;max-height:calc(100vh - 76px);overflow:auto}
.nav-links.on{transform:none}
.nav-links>a,.dd>button{width:100%;padding:13px 16px;border-radius:12px;justify-content:flex-start}
.dd-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0;display:none}
.dd.open .dd-m{display:block}
.burger{display:flex}
.nav{gap:12px}
.nav-act{margin-inline-start:auto}
}
@media(max-width:640px){
.stats,.grid-4,.grid-3,.grid-2,.chips,.frow,.checks,.steps,.f-grid,.people{grid-template-columns:1fr}
.wrap{padding:0 18px}
.ev{flex-direction:column;gap:14px}
.ev-d{width:auto;display:flex;gap:8px;align-items:baseline;justify-content:center;padding:8px 14px}
.ev-d b{font-size:1.2rem}
.form-box{padding:24px}
.btn{padding:13px 24px;font-size:.9rem}
}
/* ============================================================
BARRE D'ADHÉSION COLLANTE
Le formulaire est l'action principale du site : sur petit écran
il doit rester à un pouce de distance, quelle que soit la page
et quelle que soit la profondeur de lecture.
============================================================ */
.adh-bar{position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
background:rgba(14,15,38,.93);
background:color-mix(in srgb, var(--ink) 92%, transparent);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-top:1px solid rgba(255,255,255,.14);
transform:translateY(115%);transition:transform .34s var(--ease);
will-change:transform}
.adh-bar.on{transform:none}
.adh-bar a{display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;padding:13px 18px;border-radius:999px;background:var(--violet);
color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;
box-shadow:0 8px 22px rgba(134,7,247,.36)}
.adh-bar a:active{transform:scale(.985)}
.adh-bar small{display:block;text-align:center;margin-top:7px;
font-size:.68rem;letter-spacing:.02em;color:rgba(255,255,255,.6)}
@media(max-width:860px){
.adh-bar{display:block}
body.adh-on .top{bottom:104px}
}
/* ---------- Rythme commun des heros de page ----------
Une seule regle pour toutes les pages interieures. Le hero a une hauteur
utile fixe et son contenu est centre verticalement ; le fil d'Ariane, le
sur-titre, le titre et le chapeau disposent chacun d'une reserve constante.
Resultat : d'une page a l'autre, le titre et les boutons tombent toujours
a la meme hauteur, seul le texte change. */
.hero.page{display:flex;align-items:center;
min-height:clamp(430px,44vw,556px);
padding:clamp(46px,5vw,64px) 0 clamp(46px,5vw,64px)}
.hero.page>.wrap{width:100%}
.hero.page .crumb{margin-bottom:22px}
.hero.page .kicker{margin-bottom:16px}
.hero.page .hero-grid h1{margin:0;max-width:21ch;min-height:2.08em} /* 2 lignes */
html[data-lang="ar"] .hero.page .hero-grid h1{max-width:18ch;min-height:2.72em}
.hero.page .hero-grid .lead{margin-top:20px;max-width:58ch;min-height:5.1em} /* 3 lignes */
html[data-lang="ar"] .hero.page .hero-grid .lead{max-width:52ch;min-height:5.55em}
.hero.page .lead em{font-style:normal;color:var(--yellow);font-weight:500}
.hero.page .btn-row{margin-top:28px}
@media(max-width:1000px){
.hero.page{display:block;min-height:0;padding:clamp(40px,7vw,58px) 0 clamp(44px,8vw,62px)}
.hero.page .hero-grid h1,.hero.page .hero-grid .lead{min-height:0}
.hero.page .hero-grid h1{max-width:22ch}
html[data-lang="ar"] .hero.page .hero-grid h1{max-width:20ch}
}
/* Groupe de mots insecable : evite qu'un mot reste seul sur la ligne
suivante. Relache en dessous de 760px, ou la place manque. */
.lie{white-space:nowrap}
/* ============================================================
ACCESSIBILITÉ ET CONFORT — ajouts fins, sans toucher à la charte
============================================================ */
/* ---------- Lien d'évitement ----------
Invisible tant qu'on n'utilise pas le clavier. À la première tabulation,
il descend sous la barre et propose d'aller droit au contenu. */
.saut{position:fixed;top:0;inset-inline-start:16px;z-index:200;
transform:translateY(-140%);transition:transform .25s var(--ease);
background:var(--violet-b);color:#fff;font-family:var(--f-ui);font-weight:700;
font-size:.85rem;padding:12px 22px;border-radius:0 0 14px 14px;
box-shadow:0 10px 30px rgba(20,22,60,.28)}
.saut:focus{transform:translateY(0)}
#contenu:focus{outline:none}
/* ---------- Repère du clavier ----------
Un contour net partout où l'on peut aller au clavier. Invisible à la souris :
:focus-visible ne se déclenche pas au clic. Le jaune de la charte ressort
aussi bien sur les fonds violets que sur le blanc. */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,.ck:focus-within{
outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:4px}
.sec.dark a:focus-visible,.hero a:focus-visible,
.sec.dark button:focus-visible,footer a:focus-visible{outline-color:var(--yellow)}
/* Les navigateurs anciens qui ignorent :focus-visible gardent un contour. */
@supports not selector(:focus-visible){
a:focus,button:focus{outline:3px solid var(--yellow);outline-offset:3px}
}
/* ---------- Zones tactiles ----------
Au doigt, tout ce qui se touche fait au moins 44 px de haut : c'est le seuil
en dessous duquel on rate la cible une fois sur trois. */
@media(max-width:760px){
.lang{min-height:44px;padding-inline:18px}
.top{width:48px;height:48px}
.nav-links.on .nl{min-height:46px;display:flex;align-items:center}
.soc a{min-width:42px;min-height:42px;display:inline-grid;place-items:center}
footer ul a{display:inline-block;padding-block:6px}
}
/* ---------- Écrans très étroits ----------
En dessous de 360 px, les grands titres et les rangées de boutons débordaient. */
@media(max-width:380px){
.btn{padding:13px 20px;font-size:.86rem}
.btn-row{gap:10px}
.btn-row .btn{width:100%}
}
/* ---------- Le lien courant du menu ----------
Doublé par aria-current côté balisage : la page où l'on se trouve est
annoncée aux lecteurs d'écran, pas seulement soulignée. */
.nl[aria-current="page"]{font-weight:800}
/* La libération de la hauteur des images se fait désormais sur la règle img
générale, tout en haut de cette feuille : lister les cas un par un ici
laissait passer les nouveaux blocs (les pictogrammes de .why-i, par
exemple, sortaient étirés sur toute la hauteur de la colonne). */
/* ---------- Impression ----------
Une page imprimée ou passée en PDF ne garde ni menu, ni ruban, ni bouton. */
@media print{
.topbar,#hdr,.saut,.top,footer .soc,.prog,.adh-bar{display:none!important}
body{background:#fff;color:#000}
.hero,.sec.dark{background:#fff!important;color:#000!important}
.hero::after,.blob,.dots{display:none!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}
/* ============================================================
MOUVEMENT ET RYTHME
============================================================
Tout ce qui bouge est ajouté ici, en un seul endroit, pour qu'on
puisse le retirer d'un bloc si un jour on le juge de trop.
Trois règles ont guidé l'écriture :
1. Rien ne bouge tant que le JavaScript n'a pas confirmé sa
présence. Les effets sont tous conditionnés par html.js, posé
par assets/site.js. Si le script échoue, la page reste une
page normale, entièrement lisible : aucun texte ne peut rester
invisible à cause d'une animation qui n'a pas démarré.
2. Rien ne déplace la mise en page. On n'anime que opacity et
transform, qui ne provoquent ni recalcul ni saut de contenu.
Aucune hauteur, aucune marge, aucune largeur n'est animée.
3. Qui a demandé moins d'animation n'en a aucune. Le bloc
prefers-reduced-motion en fin de fichier coupe tout, y compris
la transition entre pages et le suivi du pointeur.
============================================================ */
/* ---------- Entrées : variantes de direction ----------
.rv monte depuis le bas. Les variantes viennent du côté ou
grandissent : elles servent à distinguer deux blocs voisins pour
que la page ne donne pas l'impression de se déplier d'un seul
bloc. Elles se combinent aux retards .d1 à .d7 déjà en place. */
html.js .rv-l{transform:translateX(-34px)}
html.js .rv-r{transform:translateX(34px)}
html.js .rv-s{transform:scale(.94)}
/* En ecriture droite-a-gauche, « venir de la gauche » veut dire venir de
l'autre bord : les deux points de depart s'echangent. */
html.js[dir="rtl"] .rv-l{transform:translateX(34px)}
html.js[dir="rtl"] .rv-r{transform:translateX(-34px)}
/* Le retour en place vient en dernier, et volontairement : il pese autant
que la variante rtl ci-dessus (0,3,1), donc seul l'ordre les departage.
Place avant, il serait annule et les blocs resteraient decales en arabe. */
html.js .rv-l.in,html.js .rv-r.in,html.js .rv-s.in{transform:none}
/* Retard calculé : sur un conteneur marqué data-cadence, le script
donne à chaque enfant son propre --d. Une grille de seize pastilles
se remplit alors en cascade sans qu'on écrive seize classes. */
.rv[style*="--d"]{transition-delay:var(--d)}
/* ---------- Transition entre les pages ----------
Une page qui apparaît d'un coup donne l'impression d'un site en
morceaux. On enchaîne donc : la page sortante s'efface, la page
entrante se révèle. Seule l'opacité change — déplacer
casserait l'ancrage de l'en-tête fixe. */
html.js body{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.js.sortie body{opacity:0;transition:opacity .26s ease;animation:none}
/* ---------- Boutons : un reflet qui passe ----------
Le reflet est un pseudo-élément en dehors du bouton, ramené au
centre au survol. Il ne coûte qu'une transformation. */
html.js .btn{position:relative;overflow:hidden;isolation:isolate}
html.js .btn::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
transform:translateX(-130%);transition:transform .62s var(--ease)}
html.js .btn:hover::before,html.js .btn:focus-visible::before{transform:translateX(130%)}
html.js .btn-o::before{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%)}
/* La flèche des boutons avance d'un cheveu : le geste dit « la suite
est par là » mieux qu'un mot de plus. */
.btn span[aria-hidden="true"]{transition:transform .32s var(--ease)}
.btn:hover span[aria-hidden="true"]{transform:translateX(4px)}
html[dir="rtl"] .btn:hover span[aria-hidden="true"]{transform:translateX(-4px)}
/* ---------- Menu : le trait se déploie ---------- */
.nl{position:relative}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
background:var(--violet-b);border-radius:2px;
transform:scaleX(0);transform-origin:center;transition:transform .34s var(--ease)}
.nl:hover::after,.nl:focus-visible::after,.nl.active::after{transform:scaleX(1)}
/* ---------- Pastilles de territoire ----------
Le point violet se met à respirer au survol, et un liseré traverse
la carte : la coordination devient un lieu qu'on désigne. */
.chip .pin{transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.chip:hover .pin{transform:scale(1.18);box-shadow:0 0 0 6px rgba(134,7,247,.12)}
.chip::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
background:var(--grad-soft);transform:scaleY(0);transform-origin:top;
transition:transform .38s var(--ease)}
.chip:hover::after{transform:scaleY(1)}
/* Une pastille pointée depuis l'extérieur (coordinations.html#settat)
se signale d'elle-même, sinon le visiteur ne sait pas où regarder. */
.chip:target{border-color:var(--violet);box-shadow:0 0 0 4px rgba(134,7,247,.14)}
html.js .chip:target{animation:viser 1.6s var(--ease) 2}
@keyframes viser{0%,100%{box-shadow:0 0 0 4px rgba(134,7,247,.14)}
50%{box-shadow:0 0 0 11px rgba(134,7,247,.05)}}
/* ---------- Étiquettes ---------- */
.pill{transition:transform .3s var(--ease),background .3s,color .3s}
.pill:hover{transform:translateY(-2px)}
/* ---------- Questions fréquentes ---------- */
.faq summary{transition:background .3s,padding-inline-start .3s var(--ease)}
.faq summary:hover{background:rgba(134,7,247,.035)}
.sec.dark .faq summary:hover{background:rgba(255,255,255,.05)}
/* ---------- Cartes : la lueur suit le pointeur ----------
Les coordonnées --mx et --my sont posées par le script au passage
de la souris. Sans script, la lueur reste à zéro et invisible. */
html.js .card::after,html.js .stat::after{content:"";position:absolute;inset:0;
pointer-events:none;opacity:0;transition:opacity .35s;
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
rgba(134,7,247,.10),transparent 62%)}
html.js .sec.dark .card::after,html.js .sec.dark .stat::after,html.js .hero .stat::after{
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
rgba(255,216,77,.13),transparent 62%)}
html.js .card:hover::after,html.js .stat:hover::after{opacity:1}
/* ---------- Hero : la trame respire ----------
Le semis de points dérive très lentement. Le décalage est de
quelques pixels : on ne le remarque pas, on le ressent. */
html.js .hero .dots{animation:trame 34s linear infinite}
@keyframes trame{from{background-position:0 0}to{background-position:44px 44px}}
/* Les taches de couleur suivent le pointeur de très loin. --px et --py
valent zéro tant que le script n'a rien mesuré. */
/* Les trois taches ont deja une animation propre (float1 / float2) qui occupe
la propriete transform : s'en servir aussi pour la derive ferait sauter le
mouvement a chaque tour de boucle. On passe donc par translate, propriete
independante, qui se compose avec transform sans le disputer. Un navigateur
qui ignore translate ignore simplement la derive. */
html.js .hero .blob{transition:translate 1.5s cubic-bezier(.16,1,.3,1)}
html.js .hero .blob.b1{translate:calc(var(--px,0)*26px) calc(var(--py,0)*26px)}
html.js .hero .blob.b2{translate:calc(var(--px,0)*-20px) calc(var(--py,0)*-20px)}
html.js .hero .blob.b3{translate:calc(var(--px,0)*14px) calc(var(--py,0)*-14px)}
/* ---------- Bouton « haut de page » ---------- */
.top{transition:transform .35s var(--ease),opacity .35s,background .3s}
.top:hover{transform:translateY(-4px) scale(1.06)}
/* ---------- Moins d'animation : plus rien ----------
Ce bloc vient après tout le reste : il gagne. Il rétablit aussi
l'opacité du corps de page, au cas où la transition aurait été
figée à mi-course. */
@media(prefers-reduced-motion:reduce){
html.js body,html.js.sortie body{animation:none!important;opacity:1!important}
.rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important}
html.js .hero .blob{translate:none!important}
html.js .btn::before,html.js .card::after,html.js .stat::after{display:none}
}
/* ---- Bloc carte nationale : meme disposition en AR qu en FR ----
En RTL la grille .map-wrap s inverse (carte a droite) et le libelle SVG
du callout part vers la droite. On force le flux LTR sur la grille et on
rend sa direction RTL a la seule colonne de texte. */
[dir="rtl"] .map-wrap:has(.map-box){direction:ltr;}
[dir="rtl"] .map-wrap:has(.map-box)>*:not(:has(.map-box)){direction:rtl;text-align:right;}
/* ============================================================
AFFINAGE UI/UX - respiration generale (reglages fins)
Objectif : moins de densite visuelle, meilleure lecture,
navigation plus legere, decor plus discret.
Aucun contenu supprime, aucune structure modifiee.
============================================================ */
/* --- Air entre les blocs et dans les cartes --- */
.grid-3{gap:30px}
.grid-2{gap:30px}
.kpi-grid{gap:30px;align-items:start}
.card{padding:34px 32px;border-radius:22px}
.card h3{margin-bottom:12px;letter-spacing:-.2px}
.card p{line-height:1.78}
.ico{margin-bottom:22px}
.panel{padding:34px 32px;border-radius:22px}
.bars{gap:20px}
.donut-wrap{gap:26px}
/* --- Respiration du texte --- */
.sec p,.lead,section p{line-height:1.8}
.lead{max-width:640px}
.sec-head{margin-bottom:44px}
.kicker{letter-spacing:2.4px}
h2,.h-l{letter-spacing:-1px;line-height:1.12}
.kpi-src{opacity:.72}
/* --- Navigation plus legere --- */
.nav-links .nl{padding-left:14px;padding-right:14px;font-weight:500;letter-spacing:.1px}
.nav-links .nl.active{font-weight:700}
/* --- Decor plus discret --- */
.blob{opacity:.26}
.b1,.b2{opacity:.26}
/* --- 6. Un pied de page compact sur ordinateur --------------------
La barre violette d adhesion ne s affiche qu en dessous de 860 px.
Sur ordinateur, le bas de l ecran c est le pied de page, qui montait
a 280 px : logo et texte empiles a gauche, contact empile a droite.
On le remet sur une seule ligne - logo, phrase, contact, reseaux -
pour descendre a environ 150 px. Rien n est retire : le logo, la
phrase de presentation, les deux contacts, les trois liens sociaux,
le copyright et la mention obligatoire restent tous affiches.
Deux paliers : la ligne unique demande 1024 px pour tenir sans
retour a la ligne ; entre 861 et 1023 px on se contente de
resserrer les marges. En dessous de 861 px, rien ne change.
------------------------------------------------------------------ */
@media (min-width:861px){
footer{padding-top:24px}
.f-grid{padding-bottom:17px}
.f-bot{padding:9px 0}
.disclaimer{padding:5px 0}
}
@media (min-width:1024px){
.f-grid{grid-template-columns:auto 1fr;align-items:center;gap:30px}
.f-grid>div:first-child{display:flex;align-items:center;gap:16px}
.f-grid .flogo{height:38px;width:auto;margin:0}
.f-grid .f-desc{margin:0;max-width:340px}
.f-grid>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.f-grid>div:last-child h5{margin:0;white-space:nowrap}
.f-grid>div:last-child ul{display:flex;flex-direction:row;align-items:center;gap:20px;margin:0}
.f-grid>div:last-child li{white-space:nowrap}
.f-grid .soc{flex:0 0 auto;margin:0}
}
/* --- amazighe v2 --- */
/* Le tifinaghe est plus large que le latin : sans regle propre, les grands
titres passaient a trois lignes la ou le francais et l'arabe en tiennent deux. */
html[data-lang="zgh"] h1,html[data-lang="zgh"] h2,html[data-lang="zgh"] h3,html[data-lang="zgh"] h4{letter-spacing:0}
html[data-lang="zgh"] h1,html[data-lang="zgh"] h2,html[data-lang="zgh"] h3{line-height:1.26}
html[data-lang="zgh"] .hero.page .hero-grid h1{max-width:24ch;min-height:2.52em}
html[data-lang="zgh"] .hero.page .hero-grid .lead{max-width:54ch;min-height:5.4em}
/* Repli arabe au fil du texte amazighe : on isole la direction. */
.zgh-ar{unicode-bidi:isolate}
/* Logo : icone unique (sans texte), valable pour les trois langues —
plus besoin de verrou de version par langue. */
/* ============================================================
BLOC 7 - Confort de lecture et de clic sur grand ecran
Ajoute le 25 aout 2026. La couche mobile.css traite deja les
largeurs inferieures a 861px : tout ce bloc est borne a
min-width:861px pour ne rien ecraser en version telephone.
============================================================ */
@media (min-width:861px){
/* 7.1 Selecteur de langue : pastilles lisibles et cliquables */
.langsel{gap:6px}
html .langsel a,html .langsel-menu a{min-height:32px;padding:0 11px;font-size:.8rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
/* 7.2 Titres de cartes : interlignage respirable */
.card h3,.card h4,.panel h3{line-height:1.3}
/* 7.3 Corps des cartes : un cran plus lisible */
.card p,.panel p{font-size:.95rem;line-height:1.72}
/* 7.4 Plancher de taille pour les mentions courtes */
.kicker,.badge,.kpi-src,.map-note,.nl-s,.nl-f{font-size:.8rem}
.sub,.nm,.hmap-txt{font-size:.875rem}
.panel .sub{font-size:.85rem}
/* 7.5 Titres : coupures de lignes plus equilibrees */
h1,h2{text-wrap:balance}
/* 7.6 Ancres : ne pas passer sous l entete collante */
section[id],article[id]{scroll-margin-top:96px}
}
/* 7.7 Telephone : les pastilles de langue etaient a 10px et 32px de large,
fixees par une feuille chargee apres mobile.css. On remonte la taille du
texte et la zone tactile sans toucher au reste de la couche mobile. */
@media (max-width:860px){
html .langsel a,html .langsel-menu a{min-width:38px;min-height:40px;padding:0 9px;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
}
/* ============================================================
BLOC 8 - Pied de page entre 1024 et 1199 px
Dans cette bande la phrase de presentation passait sur trois
lignes et le pied remontait a 171 px. On resserre les ecarts
et la taille du texte pour tenir sur une seule ligne. Au dela
de 1200 px rien ne change : le pied reste a 150 px.
============================================================ */
@media (min-width:1024px) and (max-width:1199.98px){
.f-grid{gap:20px}
.f-grid>div:first-child{gap:14px}
.f-grid .f-desc{max-width:none;font-size:.78rem;line-height:1.5}
.f-grid>div:last-child{gap:14px}
.f-grid>div:last-child ul{gap:13px}
}
/* ============================================================
BLOC 9 - Zones cliquables des cartes de coordination
Ajoute le 25 aout 2026. Le lien "voir" ne mesurait que
76x12 px sur les seize cartes de la page coordinations.
Plutot que d agrandir le lien lui meme (ce qui allongeait
la page de 361 px), on etend sa zone sensible a toute la
carte : la carte est deja en position relative et ne
contient qu un seul lien, la hauteur ne bouge pas d un
pixel. Le fil d Ariane est elargi seulement au telephone.
============================================================ */
.cx-card{position:relative}
.cx-card-go::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
@media (max-width:860px){
.crumb a{display:inline-flex;align-items:center;min-height:34px}
}
/* ---------------------------------------------------------------------
ADHESION - ordre de lecture sur petit ecran. Ajoute le 1er septembre 2026.
Sous 1000 px, .form-wrap passe deja sur une seule colonne : le bloc
"Quatre raisons" se retrouvait alors entierement au-dessus du formulaire,
soit plusieurs ecrans de defilement avant le premier champ. On inverse
simplement l ordre : le formulaire d abord, l argumentaire juste en
dessous. Rien n est supprime ni masque. Retirer ce bloc suffit a revenir
exactement a l etat precedent.
--------------------------------------------------------------------- */
@media(max-width:1000px){
body[data-page="adherer"] .form-wrap>div:first-child{order:2}
body[data-page="adherer"] .form-wrap>div:last-child{order:1}
}
/* ============================================================
NAV À PLAT — SEPT ENTRÉES
------------------------------------------------------------
Le menu est passé de six à sept entrées (ajout de « Comités »)
et « Bureau » s'est allongé en « Bureau politique ». La barre
horizontale réclame désormais ~730 px de libellés au lieu de
~577 px. En dessous de ~1120 px de fenêtre il ne restait plus la
place : le logo, qui n'avait pas de flex-shrink, se faisait
écraser à 0 px et la page débordait latéralement de 50 px.
Deux corrections, donc :
1. le logo ne se comprime plus jamais ;
2. on bascule au menu déroulant à 1150 px au lieu de 1000 px.
Le tiroir affiche les libellés longs (« Bureau politique
national », « Comités nationaux »), qui sont plus explicites
que les courts : on n'y perd rien.
Les grilles de contenu gardent leur propre bascule à 1000 px :
seule la navigation change de seuil.
NB : les règles de padding des média-queries ligne 751-752 sont
sans effet, car « .nav-links .nl » (ligne 1145) leur est
supérieur en spécificité. Les règles ci-dessous reprennent donc
ce même sélecteur pour pouvoir l'emporter.
============================================================ */
.brand{flex-shrink:0}
/* Barre horizontale : on resserre les entrées ; le français ne laissait que 8 px de marge à 1121 px, on prend donc le seuil à 1151 px. */
@media(min-width:1151px){
.nav-links .nl{padding-left:9px;padding-right:9px}
}
/* En dessous : tiroir déroulant, comme sur mobile. */
@media(max-width:1150px){
.nav-links{position:fixed;top:76px;inset-inline:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--sh);transform:translateY(-160%);transition:transform .45s var(--ease);margin:0;max-height:calc(100vh - 76px);overflow:auto}
.nav-links.on{transform:none}
.nav-links>a,.dd>button{width:100%;border-radius:12px;justify-content:flex-start}
.nav-links .nl{padding:13px 16px}
.nl-s{display:none}
.nl-f{display:inline}
.nav-links>a{font-size:.92rem;white-space:normal}
.dd-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0;display:none}
.dd.open .dd-m{display:block}
.burger{display:flex}
.nav{gap:12px}
.nav-act{margin-inline-start:auto}
}