/* =====================================================================
   Madariss Achbal Al Atlas — « L'Affiche » (affiche sérigraphiée / risographie)
   Une seule feuille de style pour tout le site, français et arabe.
     1. Encres, papier, caractères (jetons)
     2. Base
     3. Composants : feuille et repères, trames et photos, titres, boutons,
        en-tête et menus, sections, blocs, listes, tableaux, formulaires,
        FAQ, fil d'Ariane, pied de page
     4. Sections des pages : accueil (hero, série, hm-*), affiche d'en-tête des pages
        intérieures (poster), inscription (insc-*, st-*), contact et 404 (ct-*, nf-*),
        cycles (cp-*, yr-*), vie scolaire (vs-*)
     5. Arabe (dir="rtl", lang="ar") : règles communes, puis 5b celles des pages
     6. Mouvement
   Tout est fait d'encres posées les unes sur les autres : jaune, rouge, vert, bleu,
   en multiplication (mix-blend-mode: multiply), avec un léger défaut de calage.
   ===================================================================== */

/* ---------- 1. jetons ---------- */
:root{
  /* papier et encres */
  --paper:#f4f3ee;
  --paper-2:#fbfaf6;        /* fond des champs de formulaire */
  --ink:#1a2147;            /* bleu nuit, texte : 14:1 sur le papier */
  --ink-2:#3b4266;          /* texte secondaire : 8,6:1 */
  --rule:rgba(26,33,71,.2); /* filets fins */
  --red:#d0402d; --yellow:#f9ae18; --green:#0f9067; --blue:#3e64a8;
  /* surimpressions (produit des deux encres) */
  --bj:#3d4410;             /* bleu sur jaune */
  --rj:#cb2c04;             /* rouge sur jaune : 5,4:1 avec du blanc */
  /* encres lisibles en petit texte sur le papier */
  --red-text:#b8321f;       /* 5,4:1 */
  --green-text:#0b7352;     /* 5,6:1 */
  --yellow-text:#8a5800;    /* 5,3:1 */
  --blue-text:#3e64a8;      /* 5,1:1 */

  --max:1520px;                     /* largeur maximale de l'affiche */
  --gut:clamp(12px, 3.6vw, 56px);   /* marge de la feuille, où vivent les repères */
  --pad:clamp(16px, 3.1vw, 44px);   /* blanc tournant à l'intérieur de la coupe */
  --side:max(var(--gut), calc((100% - var(--max)) / 2));  /* marge latérale des sections */
  --bleed:6px;                      /* fond perdu qui dépasse de la coupe */
  --cm:clamp(9px, 1.25vw, 18px);    /* longueur des traits de coupe */
  --cg:clamp(3px, .42vw, 6px);      /* écart entre la coupe et le trait */
  --sec:clamp(56px, 7vw, 104px);    /* espace avant une section */

  --display-fr:"Big Shoulders Display", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --text-fr:"Chivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono-fr:"Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --ar-d:"Lalezar", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;    /* titres arabes */
  --ar-t:"IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; /* texte arabe */
  --display:var(--display-fr); --text:var(--text-fr); --mono:var(--mono-fr);

  /* interlignes des lettres d'affiche (plus ouverts en arabe, voir § 5) */
  --lh-big:.8; --lh-h:.88; --lh-s:1.05;

  /* grain du papier (points sombres) et manques d'encre (points clairs) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .25  0 0 0 .62 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --voids:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.9 -1.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
}

/* les quatre cycles : --c l'encre du logo, --ct la même encre lisible en texte,
   --t-ink / --t-reg les deux encres du grand titre (et son défaut de calage) */
.cy-mat{--c:var(--red);--ct:var(--red-text);--t-ink:var(--red);--t-reg:var(--blue);--t-sub:var(--blue)}
.cy-pri{--c:var(--yellow);--ct:var(--yellow-text);--t-ink:var(--blue);--t-reg:var(--red);--t-sub:var(--red)}
.cy-col{--c:var(--green);--ct:var(--green-text);--t-ink:var(--green);--t-reg:var(--blue);--t-sub:var(--blue)}
.cy-lyc{--c:var(--blue);--ct:var(--blue-text);--t-ink:var(--blue);--t-reg:var(--red);--t-sub:var(--red)}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper) var(--grain);color:var(--ink);font:400 1.0625rem/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol,address,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
sup{font-size:.62em;line-height:0;position:relative;top:-.5em;vertical-align:baseline}
strong,b{font-weight:700}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;font:700 15px/1 var(--text)}
.skip:focus{top:12px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
main{padding-bottom:clamp(40px, 5vw, 80px)}

/* ---------- 3a. la feuille : coupe, traits de coupe, repères, aplats ---------- */
/* .trim : une feuille imprimée ; ajouter marks() (les 4 .cm) dans la feuille */
.trim{position:relative;isolation:isolate;background:var(--paper) var(--grain)}
.cm{position:absolute;width:0;height:0;pointer-events:none}
.cm::before,.cm::after{content:"";position:absolute;background:var(--ink)}
.cm::before{width:var(--cm);height:1px}
.cm::after{width:1px;height:var(--cm)}
.cm--tl{left:0;top:0}  .cm--tl::before{right:var(--cg);top:0}    .cm--tl::after{bottom:var(--cg);left:0}
.cm--tr{right:0;top:0} .cm--tr::before{left:var(--cg);top:0}     .cm--tr::after{bottom:var(--cg);left:-1px}
.cm--bl{left:0;bottom:0}.cm--bl::before{right:var(--cg);top:-1px}.cm--bl::after{top:var(--cg);left:0}
.cm--br{right:0;bottom:0}.cm--br::before{left:var(--cg);top:-1px}.cm--br::after{top:var(--cg);left:-1px}

/* croix de repérage, imprimée par les trois tambours (légèrement décalés) */
.reg{position:absolute;width:20px;height:20px;pointer-events:none}
.reg svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.1;mix-blend-mode:multiply}
.reg svg:nth-child(1){stroke:var(--yellow);transform:translate(.8px,.6px)}
.reg svg:nth-child(2){stroke:var(--red);transform:translate(-.6px,.4px)}
.reg svg:nth-child(3){stroke:var(--blue)}
.reg--top{top:calc(-1 * (var(--cm) + var(--cg) + 2px));left:50%;margin-left:-8px;width:16px;height:16px}

/* aplat d'encre : couleur + petits manques (--fc : couleur, jaune par défaut) */
.aplat{background-color:var(--fc, var(--yellow));background-image:var(--voids);background-size:300px 300px}

/* ---------- 3b. la trame : photos tramées d'avance par tools/trame.py (img/trame/*.png) ----------
   Pas de filtre SVG : les iPhone et certains Android ne le dessinent pas. */
.simili{mix-blend-mode:multiply}

/* .duo : photo tramée dans une encre (duo--bleu | duo--rouge | duo--vert) posée sur un aplat jaune
   dont la position dit duo--f-bas | f-haut | f-plein | f-debut | f-fin | f-aucun.
   --ratio (cadre), --pos (cadrage), --fc (couleur de l'aplat) */
.duo{position:relative;isolation:isolate;margin:0;min-width:0;
  --f-top:42%;--f-bottom:0px;--f-start:14px;--f-end:calc(-1 * var(--bleed))}
.duo::before{content:"";position:absolute;z-index:-1;inset-block:var(--f-top) var(--f-bottom);inset-inline:var(--f-start) var(--f-end);
  background-color:var(--fc, var(--yellow));background-image:var(--voids);background-size:300px 300px}
.duo-ph{position:relative;aspect-ratio:var(--ratio, 4/3);overflow:hidden;margin-inline:0 10px}
.duo-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos, 50% 40%)}
.duo figcaption{position:relative;margin:9px 10px 0 0;padding-bottom:12px;font:500 12.5px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink);text-wrap:pretty}
.duo figcaption b{font-weight:600}
.duo--f-plein{--f-top:-8px;--f-start:-8px;--f-end:calc(-1 * var(--bleed) - 2px)}
.duo--f-haut{--f-top:-12px;--f-bottom:46%;--f-start:-10px;--f-end:18px}
.duo--f-debut{--f-top:16%;--f-start:-12px;--f-end:38%}
.duo--f-fin{--f-top:24%;--f-start:34%;--f-end:calc(-1 * var(--bleed) - 4px)}
.duo--f-aucun::before{display:none}
.duo--f-plein .duo-ph,.duo--f-haut .duo-ph{margin-inline:0}

/* ---------- 3c. titres et textes ---------- */
/* .t-print : lettres d'affiche bleues avec le rouge mal calé (ou les encres du cycle) */
.t-print{color:var(--t-ink, var(--blue));text-shadow:.03em .022em 0 var(--t-reg, var(--red));mix-blend-mode:multiply}
.label{display:flex;align-items:center;gap:8px;font:600 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.label::before{content:"";flex:none;width:9px;height:9px;background:var(--c, var(--yellow))}
.lead{max-width:34em;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5;text-wrap:pretty}
.prose{max-width:38em;text-wrap:pretty}
.prose > * + *{margin-top:.9em}
.prose ul > li{position:relative;padding-inline-start:20px}
.prose ul > li + li{margin-top:.35em}
.prose ul > li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:9px;height:9px;background:var(--c, var(--blue))}
.muted{color:var(--ink-2)}
.small{font-size:15px;line-height:1.5}
.h3{font:800 clamp(28px, 1.4rem + 1.2vw, 40px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em}
.h4{font:700 19px/1.3 var(--text)}

/* ---------- 3d. boutons : deux encres, calées au survol ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px 12px;
  border:0;background:none;cursor:pointer;font:750 16px/1.15 var(--text);letter-spacing:.01em;color:#fff;text-decoration:none;text-align:center}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;transition:transform .22s cubic-bezier(.3,.7,.3,1)}
.btn::before{background:var(--yellow);transform:translate(5px,4px)}
.btn::after{background:var(--red);mix-blend-mode:multiply;transform:translate(-1px,-1px)}
.btn:hover::before,.btn:hover::after,.btn:focus-visible::before,.btn:focus-visible::after{transform:none}
.btn--sm{min-height:44px;padding:11px 18px 10px;font-size:15px}
/* bleu + rouge mal calé : pour un fond jaune */
.btn--bleu::before{background:var(--paper)}
.btn--bleu::after{background:var(--blue)}
/* trait d'encre seul : action secondaire */
.btn--line{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line::after{display:none}
.btn--line::before{background:var(--yellow);transform:translate(5px,4px) scale(0);transform-origin:0 0}
.btn--line:hover::before,.btn--line:focus-visible::before{transform:none}
/* sur le bleu du pied de page */
.btn--paper{color:var(--ink)}
.btn--paper::after{background:var(--paper);mix-blend-mode:normal}
.lnk{font:700 16px/1.25 var(--text);color:var(--ink);text-decoration:underline;text-decoration-color:var(--c, var(--blue));text-decoration-thickness:3px;text-underline-offset:6px;padding:8px 0}
.lnk:hover{text-decoration-color:var(--red)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.acts .lnks{display:flex;flex-wrap:wrap;align-items:center;gap:2px 22px}

/* ---------- 3e. en-tête ---------- */
.mast{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px calc(var(--side) + var(--pad))}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink)}
.brand img{width:40px;flex:none}
.brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.brand-fr{font:800 17px/1.05 var(--display-fr);text-transform:uppercase;letter-spacing:.035em;white-space:nowrap}
.brand-ar{font-size:15px;line-height:1.5}
.menu-btn{flex:none;min-height:44px;min-width:86px;padding:0 16px;border:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);
  font:700 15px/1 var(--text);letter-spacing:.03em;cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
html:not(.js) .menu-btn{display:none}
.nav a{text-decoration:none}
.nav-links > li > a,.nav-sub-btn{font:600 15px/1.2 var(--text);padding:6px 0;background:linear-gradient(var(--red),var(--red)) 0 100%/0 3px no-repeat;transition:background-size .2s}
.nav-links > li > a:hover,.nav-links > li > a[aria-current="page"],.nav-sub-btn:hover,.nav-cyc.is-current .nav-sub-btn{background-size:100% 3px}
.nav-links > li > a[lang="ar"]{font:400 19px/1 var(--ar-d)}
.nav-sub-btn{display:none;border:0;color:var(--ink);cursor:pointer;align-items:center;gap:8px;background-color:transparent}
.nav-sub-btn::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-sub-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-sub a{display:flex;align-items:flex-end;gap:10px;padding:10px 0;color:var(--ink)}
.nav-sub a::before{content:"";flex:none;width:10px;height:20px;background:var(--c)}
.ns-name{font:800 22px/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.03em}
.ns-age{font:500 13px/1.3 var(--mono);color:var(--ink-2);margin-inline-start:auto;white-space:nowrap}
.nav-sub a[aria-current="page"] .ns-name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--c)}
.nav .tel{font:500 14.5px/1.2 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-insc[aria-current="page"]::before{transform:none}
.js .nav{display:none}
.js .nav-cyc-link,.js .mast.is-open .nav-cyc-link{display:none}
.mast.is-open .nav-lang a{direction:inherit;unicode-bidi:isolate}
.mast.is-open .nav-links > li.nav-lang > a::before{display:none}

/* menu du téléphone : une feuille qui glisse sous l'en-tête, entre deux filets d'encre */
.js .mast.is-open .nav{display:block;position:absolute;inset-inline:0;top:100%;max-height:calc(100dvh - 72px);overflow-y:auto;
  padding:4px calc(var(--gut) + var(--pad)) 26px;background:var(--paper) var(--grain);border-block:2px solid var(--ink)}
.mast.is-open .nav-links > li > a,.mast.is-open .nav-sub a{display:flex;align-items:center;gap:14px;padding:12px 0;font:800 30px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;background:none;border-bottom:1px solid var(--rule)}
.mast.is-open .nav-links > li > a::before,.mast.is-open .nav-sub a::before{content:"";flex:none;width:12px;height:22px;background:var(--c, var(--ink))}
.mast.is-open .nav-links > li > a[aria-current="page"],.mast.is-open .nav-sub a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.mast.is-open .nav-sub .ns-name{font:inherit;text-decoration:inherit}
.mast.is-open .nav-sub .ns-age{font-size:13px;letter-spacing:0;text-transform:none}
.mast.is-open .nav-sub-btn{display:none}
.mast.is-open .nav-links > li > a[lang="ar"]{font:400 28px/1.3 var(--ar-d);text-transform:none}
.mast.is-open .nav .tel{display:block;margin-top:16px;font-size:17px;padding:8px 0}
.mast.is-open .nav .btn{display:flex;margin-top:14px}

@media (min-width:1100px){
  .menu-btn{display:none}
  .js .nav,.nav{display:flex;align-items:center;gap:24px}
  .nav-links{display:flex;align-items:center;gap:22px}
  .brand img{width:48px}
  .brand-fr{font-size:19px}
  .js .nav-sub-btn{display:inline-flex}
  .nav-cyc{position:relative}
  .nav-sub{display:none;position:absolute;top:calc(100% + 14px);inset-inline-start:-22px;z-index:40;width:290px;padding:8px 22px 12px;
    background:var(--paper) var(--grain);border:2px solid var(--ink);box-shadow:6px 5px 0 var(--yellow)}
  .nav-sub li + li a{border-top:1px solid var(--rule)}
  .nav-sub-btn[aria-expanded="true"] + .nav-sub{display:block}
  html:not(.js) .nav-cyc:hover .nav-sub,html:not(.js) .nav-cyc:focus-within .nav-sub{display:block}
  .nav .tel{display:none}
}
@media (min-width:1280px){
  .nav-links{gap:28px}
  .nav .tel{display:inline}
}

/* ---------- 3f. sections ---------- */
/* .sec : une section de page, marges de la feuille ; .in : contenu en retrait du blanc tournant */
.sec{padding:var(--sec) var(--side) 0}
.in{padding-inline:var(--pad)}
.sec-h{display:grid;gap:14px;padding:0 var(--pad) clamp(26px, 3.2vw, 42px)}
.sec-h h2{font:800 clamp(44px, 2rem + 4.4vw, 104px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.sec-h h2 span{display:block;color:var(--blue)}
.sec-h p{max-width:34em;color:var(--ink-2);text-wrap:pretty}
.sec-h--sm h2{font-size:clamp(36px, 1.6rem + 2.8vw, 72px)}
@media (min-width:1024px){
  .sec-h{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;column-gap:48px}
  .sec-h p{padding-bottom:.35em}
}

/* grilles */
.grid-2,.grid-3,.grid-4{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px, 3vw, 48px)}
@media (min-width:700px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 3g. blocs : feuilles et aplats ---------- */
/* .bloc : une feuille découpée (ajouter marks()), .bloc--jaune | --bleu | --rouge | --vert : aplat plein */
.bloc{position:relative;isolation:isolate;padding:clamp(20px, 2.4vw, 36px) var(--pad) clamp(22px, 2.6vw, 38px);background:var(--paper) var(--grain);min-width:0}
.bloc--jaune{background-color:var(--yellow);background-image:var(--voids);background-size:300px 300px;color:var(--ink)}
.bloc--bleu,.bloc--rouge,.bloc--vert{background-image:var(--voids);background-size:300px 300px;color:#fff}
.bloc--bleu{background-color:var(--blue)}
.bloc--rouge{background-color:var(--rj)}
.bloc--vert{background-color:var(--green-text)}
.bloc--bleu a,.bloc--rouge a,.bloc--vert a{color:#fff}
.bloc--bleu .label,.bloc--rouge .label,.bloc--vert .label{color:#fff}
/* sur un aplat foncé : le bouton papier garde son encre, le lien souligné passe en blanc et jaune */
:is(.bloc--bleu,.bloc--rouge,.bloc--vert) a.btn--paper{color:var(--ink)}
:is(.bloc--bleu,.bloc--rouge,.bloc--vert) .lnk{color:#fff;text-decoration-color:var(--yellow)}
:is(.bloc--bleu,.bloc--rouge,.bloc--vert) .lnk:hover{text-decoration-color:#fff}
.bloc > .h3 + *,.bloc > .label + *{margin-top:12px}
/* carte simple : un filet d'encre en tête, le cycle en barre */
.card{position:relative;padding-top:14px;border-top:2px solid var(--ink);min-width:0}
.card::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:56px;height:6px;background:var(--c, var(--yellow))}
.card > * + *{margin-top:10px}

/* ---------- 3h. listes ---------- */
/* .leaders : intitulé ……… valeur (horaires, faits courts) */
.leaders{border-top:2px solid var(--ink);font:500 14.5px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.leaders div{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule)}
.leaders dt{flex:1 1 auto;display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px}
.leaders dt::after{content:"";flex:1 1 auto;min-width:10px;border-bottom:2px dotted rgba(26,33,71,.4)}
.leaders dd{flex:none;white-space:nowrap}
/* .facts : petites fiches « intitulé / texte » empilées */
.facts{border-top:2px solid var(--ink)}
.facts > div{display:grid;gap:4px;padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.facts dt{display:flex;align-items:center;gap:8px;font:600 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.facts dt::before{content:"";flex:none;width:9px;height:9px;background:var(--c, var(--yellow))}
.facts dd{max-width:36em;text-wrap:pretty}
.facts dd .lnk{display:inline-block;margin-top:2px;font-size:15px;padding:4px 0}
@media (min-width:700px){
  .facts > div{grid-template-columns:minmax(150px, 13em) minmax(0,1fr);column-gap:24px;align-items:baseline}
}
/* .bars : liste aux barres du logo ; .bars--big en lettres d'affiche */
.bars{border-top:2px solid var(--ink)}
.bars > li{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule)}
.bars > li::before{content:"";flex:none;width:11px;height:.95em;background:var(--c, var(--blue));transform:translateY(.12em)}
.bars > li:nth-child(4n+1){--c:var(--red)} .bars > li:nth-child(4n+2){--c:var(--yellow)}
.bars > li:nth-child(4n+3){--c:var(--green)} .bars > li:nth-child(4n+4){--c:var(--blue)}
.bars--big > li{font:800 clamp(26px, 1.2rem + 1.6vw, 44px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em;padding:14px 0 12px}
.bars--big > li small{display:block;margin-top:6px;font:500 14px/1.4 var(--mono);text-transform:none;letter-spacing:.02em;color:var(--ink-2)}
/* .steps : étapes numérotées en chiffres d'affiche */
.steps{counter-reset:st;display:grid;gap:clamp(24px, 3vw, 40px)}
.steps > li{counter-increment:st;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
.steps > li::before{content:counter(st);grid-row:1 / span 9;font:900 clamp(64px, 3rem + 3vw, 112px)/.8 var(--display-fr);color:var(--c, var(--red));mix-blend-mode:multiply;text-shadow:.03em .022em 0 var(--blue)}
.steps > li:nth-child(2){--c:var(--yellow)} .steps > li:nth-child(3){--c:var(--green)} .steps > li:nth-child(4){--c:var(--blue)}
.steps h3{font:800 clamp(26px, 1.2rem + 1.2vw, 38px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em}
.steps h3 + *{margin-top:8px}

/* ---------- 3i. tableaux ---------- */
/* <div class="tab-wrap"><table class="tab">… ; une ligne par cycle : <tr class="cy-mat"> */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;font:500 15px/1.35 var(--mono);font-variant-numeric:tabular-nums}
.tab caption{text-align:start;padding-bottom:10px;font:600 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tab th,.tab td{padding:12px 14px 12px 0;text-align:start;vertical-align:baseline;border-bottom:1px solid var(--rule)}
.tab thead th{font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.tab tbody th{font:800 22px/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tab tbody th::before{content:"";display:inline-block;width:10px;height:18px;margin-inline-end:10px;background:var(--c, var(--ink));vertical-align:-1px}
.tab td{white-space:nowrap}
.tab td.wrap{white-space:normal}

/* ---------- 3j. formulaires ---------- */
.form{display:grid;gap:20px;min-width:0}
.form-row{display:grid;gap:20px}
@media (min-width:640px){ .form-row--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.field{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.field > label,.field > legend{padding:0;font:600 12.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.field > legend{margin-bottom:7px}
.req{color:var(--red-text);text-decoration:none;font-weight:700}
.hint{font-size:14px;line-height:1.45;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--ink);border-radius:0;background:var(--paper-2);color:var(--ink);
  font:400 17px/1.4 var(--text);-webkit-appearance:none;appearance:none}
.field textarea{min-height:128px;resize:vertical}
.field select{padding-inline-end:44px;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-size:7px 7px;background-repeat:no-repeat;background-position:calc(100% - 22px) 52%, calc(100% - 15px) 52%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:5px 4px 0 var(--yellow);border-color:var(--blue)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--red-text);box-shadow:5px 4px 0 rgba(208,64,45,.35)}
.field ::placeholder{color:#6b7090;opacity:1}
/* choix de la filière : une puce par filière */
.chips{display:flex;flex-wrap:wrap;gap:10px 12px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:11px 18px;border:2px solid var(--ink);background:var(--paper-2);font:650 15.5px/1.2 var(--text);color:var(--ink)}
.chip input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:5px 4px 0 var(--yellow)}
.chip input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.chip:hover span{border-color:var(--blue)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:4px}
.form-status{padding:12px 16px;border-inline-start:6px solid var(--green);background:rgba(15,144,103,.09);font-size:15.5px;line-height:1.45}
.form-status.is-error{border-inline-start-color:var(--red);background:rgba(208,64,45,.08)}
.form-status[hidden]{display:none}
/* piège à robots : hors de l'écran, jamais rempli par un parent */
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 3k. questions fréquentes ---------- */
/* <div class="faq"><details><summary>Question</summary><div class="faq-a">…</div></details>… */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 0;list-style:none;cursor:pointer;font:700 clamp(17px, 1rem + .25vw, 19px)/1.35 var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;transform:translateY(2px);
  background:linear-gradient(var(--red),var(--red)) center/3px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat}
.faq summary:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
.faq-a{max-width:40em;padding:0 0 22px;text-wrap:pretty}
.faq-a > * + *{margin-top:.7em}
.faq-a ul > li{position:relative;padding-inline-start:18px}
.faq-a ul > li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;background:var(--blue)}

/* ---------- 3l. fil d'Ariane ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:500 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.crumbs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px;padding:6px 0}
.crumbs a:hover{text-decoration-color:var(--red)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- 3m. pied : barre de contrôle + bande bleue ---------- */
.slug{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:26px calc(var(--side) + var(--pad)) 18px;font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ctrl{display:flex;flex-wrap:wrap;gap:3px}
.ctrl i{display:block;width:22px;height:14px;position:relative;background:var(--a)}
.ctrl i[data-b]::after{content:"";position:absolute;inset:0;background:var(--b);mix-blend-mode:multiply}
.ctrl i.t{background:radial-gradient(circle, var(--a) var(--r), transparent calc(var(--r) + .6px)) 0 0/4px 4px}

.foot{color:#fff;background-color:var(--blue);background-image:var(--voids);background-size:300px 300px}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 32px;padding:30px calc(var(--side) + var(--pad)) 24px}
.foot address,.foot p{font-size:15.5px;line-height:1.55}
.foot .f-k{margin-bottom:8px;font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.foot .f-k::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;background:var(--yellow);vertical-align:1px}
.foot .f-k--gap{margin-top:16px}
.foot a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px}
.foot a:hover{text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.foot .f-more{margin-top:6px}
.f-tel{font-family:var(--mono-fr);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* le logo complet, collé sur la bande comme une étiquette de papier */
.f-id{display:flex;align-items:center;gap:18px}
.f-logo{flex:none;display:block;width:112px;padding:6px;background:#f8f2e7;box-shadow:5px 4px 0 var(--yellow)}
.f-logo img{width:100%}
.foot .f-motto{font:800 26px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.foot .f-motto-o{margin-top:6px;font-size:22px;line-height:1.35}
.f-nav{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.35);padding-top:16px}
.f-nav ul{display:flex;flex-wrap:wrap;gap:6px 22px}
.f-nav a{display:inline-block;padding:6px 0;font-weight:600;text-decoration:none}
.f-nav a:hover,.f-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.f-bottom{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding:12px calc(var(--side) + var(--pad)) 16px;border-top:1px solid rgba(255,255,255,.35)}
.foot .f-bottom p{font:500 12.5px/1.4 var(--mono);letter-spacing:.03em}
.foot .f-bottom [lang="ar"]{font:400 19px/1.4 var(--ar-d);letter-spacing:0}
.foot .f-bottom [lang="fr"]{font:600 14px/1.4 var(--text-fr)}
@media (min-width:600px){ .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))} .f-id{grid-column:1 / -1} }
@media (min-width:1024px){
  .foot-in{grid-template-columns:1.5fr 1.15fr .95fr 1.1fr}
  .f-id{grid-column:auto;flex-direction:column;align-items:flex-start}
  .f-logo{width:132px}
}

/* =====================================================================
   4. sections des pages
   ===================================================================== */

/* ---------- 4a. l'affiche d'accueil (hero) ---------- */
.hero{padding:calc(var(--cm) + var(--cg) + 4px) var(--side) 0}
.hero .trim{container-type:inline-size;padding:clamp(16px, 2.2vw, 28px) var(--pad) clamp(22px, 2.6vw, 34px)}
.h-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;padding-bottom:clamp(10px, 1.2vw, 16px);
  border-bottom:2px solid var(--ink);margin-bottom:clamp(12px, 1.3vw, 18px)}
.h-name{font:800 clamp(20px, 1.2rem + 1vw, 34px)/var(--lh-s) var(--display);text-transform:uppercase;letter-spacing:.03em}
.h-kick{margin-top:6px;font:500 12.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.h-other{font-size:clamp(28px, 1rem + 2.2vw, 46px);line-height:1.25;margin-bottom:-.12em}
.h-other[lang="fr"]{font:800 clamp(20px, 1rem + 1.2vw, 32px)/1.05 var(--display-fr);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.1em}

/* tailles du titre, calculées sur la largeur de l'affiche (unités de conteneur) */
.hero .trim{--W:5.08;--fs-big:calc(100cqw / var(--W));--fs-year:clamp(52px, 15cqw, 120px);--hb-gap:22px}
@supports not (container-type:inline-size){
  .hero .trim{--fs-big:calc((100vw - 2 * var(--gut) - 2 * var(--pad) - 20px) / var(--W));--fs-year:clamp(52px, 13vw, 104px)}
}
.h-title{margin:0;font-weight:900}
.t-big{display:block;width:max-content;max-width:100%;margin-inline-start:-.012em;
  font:900 var(--fs-big)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em;color:var(--blue);
  text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply;white-space:nowrap}
.t-year{display:block;width:max-content;margin-top:.16em;font:800 var(--fs-year)/.86 var(--display-fr);letter-spacing:.005em;color:var(--red);mix-blend-mode:multiply;white-space:nowrap}

.h-body{display:flex;flex-direction:column;gap:var(--hb-gap);margin-top:var(--hb-gap)}
.h-photo{order:-1;position:relative;margin:0 calc(-1 * (var(--pad) + var(--bleed)))}
/* l'aplat jaune remonte derrière l'année et la moitié basse du titre */
.h-photo .field{position:absolute;z-index:-1;inset-inline:0;bottom:0;
  top:calc(-1 * (var(--hb-gap) + var(--fs-year) * (.86 + .16) + var(--fs-big) * var(--lh-big) * .5))}
.h-photo .ph{position:relative;aspect-ratio:1/1;overflow:hidden;margin-inline:calc(var(--pad) + var(--bleed) + 10px) calc(var(--pad) + var(--bleed) - 10px)}
.h-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 30%}
.h-photo figcaption{position:relative;margin:9px calc(var(--pad) + var(--bleed) - 10px) 0 calc(var(--pad) + var(--bleed) + 10px);padding-bottom:12px;font:500 12.5px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink)}
.h-lead{max-width:34em;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5;text-wrap:pretty}
.h-act{display:flex;flex-direction:column;align-items:stretch;gap:12px 24px;margin-top:22px}
.h-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 22px}

.h-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:30px;border-top:2px solid var(--ink)}
.h-strip a{display:flex;flex-direction:column;gap:2px;padding-block:12px;padding-inline:0 10px;text-decoration:none;min-width:0;border-bottom:1px solid var(--rule)}
.h-strip a:hover .s-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* les quatre barres montent comme celles du logo : même pied, hauteurs croissantes */
.s-name{display:flex;align-items:flex-end;gap:9px;min-height:27px;font:800 22px/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.03em}
.s-name::before{content:"";flex:none;width:11px;height:var(--h,16px);background:var(--c);margin-bottom:.02em}
.s-age{margin-top:4px;padding-inline-start:20px;font:500 13px/1.3 var(--mono);color:var(--ink-2)}
.h-motto{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding-top:14px}
.h-motto p:first-child{font:400 16px/1.4 var(--text);color:var(--ink-2)}
.h-motto p + p{font-size:28px;line-height:1.3;color:var(--green-text)}
.h-motto p + p[lang="fr"]{font:600 17px/1.4 var(--text-fr)}

@media (min-width:600px){
  .h-photo .ph{aspect-ratio:4/3}
  .h-act{flex-direction:row;flex-wrap:wrap;align-items:center}
  .h-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-strip a{border-bottom:0}
}
@media (min-width:1024px){
  .hero .trim{--fs-year:clamp(56px, 7.4cqw, 108px);--hb-gap:clamp(16px, 1.8cqw, 26px)}
  /* l'année reste dans la colonne de gauche ; la photo remonte à sa hauteur */
  .h-body{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);column-gap:clamp(28px, 4cqw, 60px);align-items:start;margin-top:var(--hb-gap)}
  .h-photo{order:0;grid-column:2;grid-row:1;margin-block:calc(-1 * (var(--hb-gap) + var(--fs-year) * (.86 + .16))) 0;margin-inline:0 calc(-1 * (var(--pad) + var(--bleed)))}
  .h-photo .field{inset-inline-start:-30px;inset-inline-end:0;bottom:0;top:calc(-1 * var(--fs-big) * var(--lh-big) * .52)}
  .h-photo img{object-position:46% 22%}
  .h-photo .ph{aspect-ratio:auto;height:clamp(290px, 28cqw, 420px);margin-block:clamp(26px, 2.4cqw, 36px) 0;margin-inline:clamp(16px, 1.6cqw, 24px) calc(var(--pad) + var(--bleed) - 12px)}
  .h-photo figcaption{margin-block:10px 0;margin-inline:clamp(16px, 1.6cqw, 24px) calc(var(--pad) + var(--bleed) - 12px);padding-bottom:13px}
  .h-text{grid-column:1;grid-row:1}
  .h-strip{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);margin-top:clamp(18px, 1.8cqw, 26px)}
  .h-motto{grid-column:auto;flex-direction:column;align-items:flex-end;justify-content:center;gap:0;padding-block:8px;padding-inline:12px 0;text-align:end}
}

/* ---------- 4b. la série : quatre affichettes de cycle ---------- */
.serie{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(2 * (var(--cm) + var(--cg)) + 8px) clamp(28px, 2.6vw, 40px);padding:calc(var(--cm) + var(--cg) + 4px) 0}
.aff{--pad:clamp(16px, 1.5vw, 22px);position:relative;container-type:inline-size;display:flex;flex-direction:column;padding:0 var(--pad) 22px;min-width:0;background:var(--paper) var(--grain);isolation:isolate}
.aff-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;padding:12px 0 10px}
.aff-n{font:600 13px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.aff-top [lang="ar"]{font-size:21px;line-height:1.3}
.aff-top [lang="fr"]{font:800 19px/1.1 var(--display-fr);text-transform:uppercase;letter-spacing:.03em}
.aff-ph{position:relative;margin:0 calc(-1 * (var(--pad) + var(--bleed)));aspect-ratio:4/3}
.aff-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%)}
.aff-field{position:absolute;z-index:-1}
.aff{--age:min(132px, 40cqw)}
.aff-age{position:relative;display:flex;align-items:flex-end;gap:10px;margin-top:-.16em;font:900 var(--age)/.8 var(--display-fr);color:var(--c);mix-blend-mode:multiply;white-space:nowrap}
.aff-age small{margin-bottom:.06em;font:600 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.aff h3,.aff h2{margin-top:16px;font:800 clamp(34px, 13cqw, 46px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em}
.aff h3 a,.aff h2 a{text-decoration:none}
.aff h3 a::after,.aff h2 a::after{content:"";position:absolute;inset:0;z-index:2}
.aff-lvl{margin-top:8px;font-size:16px;line-height:1.4;color:var(--ink-2)}
.aff-hours{margin-top:16px}
.aff-note{margin-top:10px;font:500 13.5px/1.4 var(--mono);color:var(--ink)}
.aff-go{margin-top:auto;padding-top:18px;font:700 15.5px/1.2 var(--text)}
.aff-go span{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px;text-underline-offset:5px}
.aff:hover .aff-go span,.aff:focus-within .aff-go span{text-decoration-color:var(--ink)}
.aff:focus-within{outline:3px solid var(--ink);outline-offset:6px}
.aff h3 a:focus-visible,.aff h2 a:focus-visible{outline:none}
.aff-field{bottom:calc(-1 * var(--age) * .5)}
/* chaque affichette : le jaune (commun aux quatre) + l'encre du cycle ; l'aplat est calé un peu différemment sur chacune */
.aff--mat{--c:var(--red)}
.aff--mat .aff-field{inset-inline-start:calc(var(--pad) + var(--bleed) - 10px);inset-inline-end:calc(-1 * var(--bleed));top:58%}
.aff--pri{--c:var(--blue)}
.aff--pri .aff-field{inset-inline:0;top:-8px;bottom:calc(-1 * var(--age) * .62)}
.aff--pri .aff-go span{text-decoration-color:var(--yellow)}
.aff--col{--c:var(--green)}
.aff--col .aff-field{inset-inline-start:0;inset-inline-end:34%;top:64%}
.aff--lyc{--c:var(--blue)}
.aff--lyc .aff-field{inset-inline-start:28%;inset-inline-end:calc(-1 * var(--bleed));top:70%}
@media (max-width:599px){ .aff--mat .aff-ph{aspect-ratio:1/1} }
@media (min-width:600px){ .serie{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .serie{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aff-ph{aspect-ratio:9/10}
  .aff-lvl{min-height:2.8em}   /* deux lignes réservées : les horaires des quatre affichettes restent alignés */
}

/* ---------- 4c. l'affiche d'en-tête des pages intérieures (poster_head) ---------- */
.poster{padding:calc(var(--cm) + var(--cg) + 4px) var(--side) 0}
.poster .trim{container-type:inline-size;padding:clamp(14px, 2vw, 26px) var(--pad) clamp(24px, 2.8vw, 40px);
  --fs:min(var(--fs-max, 176px), calc(100cqw / var(--W, 4.8)));--fs-sub:clamp(34px, 7.2cqw, 88px);--p-gap:clamp(18px, 2cqw, 28px)}
@supports not (container-type:inline-size){
  .poster .trim{--fs:min(var(--fs-max, 176px), calc((100vw - 2 * var(--gut) - 2 * var(--pad)) / var(--W, 4.8)));--fs-sub:clamp(34px, 6.4vw, 80px)}
}
.p-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 24px;padding-bottom:clamp(8px, 1vw, 14px);
  border-bottom:2px solid var(--ink);margin-bottom:clamp(14px, 1.6vw, 22px)}
.p-other{font-size:clamp(26px, 1rem + 1.8vw, 42px);line-height:1.25;margin-bottom:-.1em;color:var(--ct, var(--ink))}
.p-other[lang="fr"]{font:800 clamp(20px, 1rem + 1.2vw, 34px)/1.05 var(--display-fr);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.1em}
.p-title{margin:0}
/* le nom dans l'autre langue part à l'autre bout de la ligne (marge physique : l'élément a son propre dir) */
:root[dir="ltr"] :is(.h-other,.p-other){margin-left:auto}
:root[dir="rtl"] :is(.h-other,.p-other){margin-right:auto}
.p-big{display:block;margin-inline-start:-.012em;font:900 var(--fs)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em;
  color:var(--t-ink, var(--blue));text-shadow:.03em .022em 0 var(--t-reg, var(--red));mix-blend-mode:multiply;text-wrap:balance}
.p-sub{display:block;margin-top:.14em;font:800 var(--fs-sub)/.9 var(--display);letter-spacing:.005em;color:var(--t-sub, var(--red));mix-blend-mode:multiply}
.p-body{display:flex;flex-direction:column;gap:var(--p-gap);margin-top:var(--p-gap)}
.p-text{min-width:0}
.p-text .lead:first-child{margin-top:0}
.p-text .lead + .lead{margin-top:.6em}
/* l'année ou « 404 » (dir="ltr") reste sous le titre, du côté où il commence */
:root[dir="rtl"] .p-sub[dir="ltr"]{text-align:right}
/* la photo : à fond perdu sur le téléphone, son aplat jaune remonte derrière le bas du titre.
   Sans isolation, l'aplat (::before, z-index:-1) rejoint la pile de la feuille .trim : il passe SOUS
   le grand titre, qui s'imprime par-dessus en surimpression, au lieu d'être peint sur lui. */
.poster .duo{isolation:auto;order:-1;margin-inline:calc(-1 * (var(--pad) + var(--bleed)));
  --f-start:0px;--f-end:0px;--f-bottom:0px;--f-top:calc(-1 * (var(--p-gap) + var(--sub-h, 0px) + var(--fs) * var(--lh-big) * .45))}
.poster .p-title:has(.p-sub) ~ .p-body .duo{--sub-h:calc(var(--fs-sub) * 1.04)}
.poster .duo .duo-ph,.poster .duo figcaption{margin-inline:calc(var(--pad) + var(--bleed) + 10px) calc(var(--pad) + var(--bleed) - 10px)}
.poster .duo-ph{aspect-ratio:var(--ratio, 4/3)}
@media (min-width:1024px){
  .p-body{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:clamp(28px, 4cqw, 60px);align-items:start}
  .poster .duo{order:0;margin-inline:0 calc(-1 * (var(--pad) + var(--bleed)));--f-start:-30px}
  .poster .duo .duo-ph,.poster .duo figcaption{margin-inline:clamp(16px, 1.6cqw, 24px) calc(var(--pad) + var(--bleed) - 12px)}
  .poster .duo-ph{aspect-ratio:auto;height:clamp(280px, 30cqw, 440px)}
  .poster--nofig .p-body{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 4d. accueil ---------- */
.hm-cycles .serie{margin-top:0}
/* l'école : le bâtiment et les faits */
.hm-ecole .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px, 4vw, 64px);align-items:start}
.hm-ecole .duo{max-width:640px}
@media (min-width:900px){
  .hm-ecole .grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
/* vie de l'école : trois photos et le programme de l'année */
.hm-vie .wall{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px, 3vw, 44px);padding-inline:var(--pad)}
.hm-vie .prog{display:grid;gap:14px clamp(28px, 3vw, 44px);padding-inline:var(--pad);margin-top:clamp(40px, 4.4vw, 64px)}
.hm-vie .more{margin-top:18px}
@media (min-width:700px){
  .hm-vie .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-vie .wall .duo:first-child{grid-column:1 / -1}
}
@media (min-width:1024px){
  .hm-vie .wall .duo:first-child{--ratio:21/9 !important}
  .hm-vie .prog{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .hm-vie .prog .h3{padding-top:14px}
}
/* l'affiche de fin : pré-inscription, sur un aplat jaune */
.hm-fin .bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px, 3vw, 44px);align-items:center;container-type:inline-size;padding-block:clamp(24px, 3vw, 48px)}
.hm-fin h2{font:900 clamp(56px, 13cqw, 150px)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em;
  color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply}
.hm-fin h2 span{display:block;margin-top:.18em;font-size:.36em;line-height:.95;color:var(--rj);text-shadow:none}
.hm-fin p{max-width:32em;margin-top:18px;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5}
.hm-fin .duo{max-width:440px;justify-self:center;width:100%}
@media (min-width:900px){
  .hm-fin .bloc{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .hm-fin h2{font-size:clamp(56px, 9cqw, 150px)}
}

/* ---------- 4e. inscription ---------- */
/* inscription.html : étapes en chiffres d'affiche, documents à cocher, fiche de pré-inscription
   et feuille bleue des contacts, questions des parents et affichette rouge (classes insc-*, st-*) */
.p-inscription .poster .p-text .lead + .lead{font-size:clamp(1rem, .96rem + .2vw, 1.125rem);color:var(--ink-2)}

/* « À fournir » : l'accent de la capitale ne touche pas la ligne du dessus */
.insc-docs-sec .sec-h h2 span{margin-top:.1em}
:root:lang(ar) .insc-docs-sec .sec-h h2 span{margin-top:0}

/* les trois étapes : chiffre | texte | pièce jointe (message, photo) */
.insc-steps{gap:0}
.insc-steps > li{column-gap:clamp(16px, 2vw, 32px);padding-block:clamp(16px, 1.8vw, 24px) clamp(30px, 3.4vw, 52px);border-top:2px solid var(--ink)}
.insc-steps > li::before{grid-row:1}
.st-text{grid-column:2;min-width:0;padding-top:.3em}
.st-text p{max-width:30em;text-wrap:pretty}
.st-text h3 + p{margin-top:12px}
.st-text .st-more{margin-top:14px}
.st-text .lnk{display:inline-block}
.lnk-in{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.lnk-in:hover{text-decoration-color:var(--red)}
.st-x{grid-column:1 / -1;min-width:0;margin-top:24px}
.insc-steps .duo{max-width:640px}
@media (min-width:900px){
  .insc-steps > li{grid-template-columns:clamp(58px, 6vw, 96px) minmax(0,1fr) minmax(0,1.2fr)}
  .st-x{grid-column:3;grid-row:1;margin-top:.5em}
}
/* l'exemple de message : une fiche tapée à la machine, calée sur un aplat jaune */
.insc-msg{position:relative;margin:0 6px 5px 0;max-width:36em;padding:14px 18px 18px;border:2px solid var(--ink);background:var(--paper-2);box-shadow:6px 5px 0 var(--yellow)}
.insc-msg figcaption{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.insc-msg p{font:500 14.5px/1.65 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.insc-blank{color:var(--ink-2);text-decoration:underline dotted;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(26,33,71,.5)}

/* documents à fournir : deux feuilles, une case vide par pièce */
.insc-docs{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(2 * (var(--cm) + var(--cg)) + 14px) clamp(28px, 3vw, 48px);align-items:start}
.insc-docs .h3,.insc-side .h3{line-height:.98}
.insc-docs .h3{margin-bottom:18px}
.insc-check{border-top:2px solid var(--ink)}
.insc-check li{position:relative;padding-block:13px;padding-inline:36px 0;border-bottom:1px solid var(--rule);text-wrap:pretty}
.insc-check li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:20px;height:20px;border:2px solid var(--ink);background:var(--paper-2)}
.bloc--jaune .insc-check li{border-bottom-color:rgba(26,33,71,.3)}
@media (min-width:900px){ .insc-docs{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* la fiche de pré-inscription et la feuille des contacts */
.insc-form{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(2 * (var(--cm) + var(--cg)) + 14px) clamp(28px, 3vw, 48px);align-items:start}
.insc-sheet-k{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding-bottom:12px;margin-bottom:22px;border-bottom:2px solid var(--ink)}
.insc-honest{padding-block:4px;padding-inline:14px 0;border-inline-start:6px solid var(--yellow);font-size:15.5px;line-height:1.45;font-weight:600}
.insc-side .h3{margin-bottom:18px}
.insc-contacts{border-top:2px solid #fff}
.insc-contacts > div{padding:12px 0 14px;border-bottom:1px solid rgba(255,255,255,.4)}
.insc-contacts dt{display:flex;align-items:center;gap:8px;font:600 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.insc-contacts dt::before{content:"";flex:none;width:9px;height:9px;background:var(--yellow)}
.insc-contacts dd{margin-top:6px;font-size:16.5px;line-height:1.5;overflow-wrap:anywhere}
.insc-side a{text-decoration-color:rgba(255,255,255,.6);text-underline-offset:4px}
.insc-side a:hover{text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.insc-tel{font:500 17px/1.6 var(--mono-fr);font-variant-numeric:tabular-nums;white-space:nowrap}
.insc-plan{display:inline-block;margin-top:6px;padding:4px 0;font-weight:700}
@media (min-width:1024px){
  .insc-form{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  .insc-side{position:sticky;top:24px}
}
#preinscription{scroll-margin-top:24px}

/* questions des parents et l'affichette rouge */
.insc-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(2 * (var(--cm) + var(--cg)) + 18px) clamp(32px, 4vw, 64px);align-items:start}
.insc-ask p{margin-top:12px;max-width:28em}
.insc-ask .acts{margin-top:22px}
@media (min-width:1024px){ .insc-faq{grid-template-columns:minmax(0,7fr) minmax(0,4fr)} }

/* ---------- 4f. contact et page introuvable ---------- */
/* contact.html : nous joindre (#coord), plan d'accès (#plan), suivre l'école (ct-*) ; 404.html (nf-*) */

/* nous joindre : quatre fiches, la barre de chaque fiche dans l'ordre des encres du logo */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px, 4vw, 60px) clamp(28px, 3.4vw, 56px)}
@media (min-width:900px){ .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .ct-card--wide{grid-column:1 / -1} }
.ct-card{padding-top:16px}
.ct-card::before{width:clamp(56px, 7vw, 96px);height:10px;top:-6px}
.ct-k{font:600 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ct-card > .ct-k + *{margin-top:16px}
.ct-card > p + p{margin-top:18px}
/* les numéros en lettres d'affiche : bleu, rouge mal calé */
.ct-big{display:inline-block;max-width:100%;font:900 clamp(46px, 1.4rem + 4.4vw, 100px)/.86 var(--display-fr);letter-spacing:.005em;
  color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-big:hover{text-decoration:underline;text-decoration-color:var(--c, var(--red));text-decoration-thickness:.06em;text-underline-offset:.1em}
.ct-big--m{font-size:clamp(40px, 1.2rem + 3.2vw, 76px)}
.ct-mail{font-size:clamp(30px, .9rem + 2.2vw, 56px);font-weight:800;line-height:1;white-space:normal;overflow-wrap:anywhere}
.ct-note{display:block;margin-top:8px;font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ct-addr{font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5}
.ct-links{display:flex;flex-wrap:wrap;gap:2px 22px;margin-top:10px}
.ct-card .acts{margin-top:20px}

/* plan d'accès : la carte dans une feuille à traits de coupe, un aplat jaune décalé dessous */
.ct-plan-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px, 4vw, 64px);align-items:start}
.ct-map{min-width:0}
.ct-map-f::before{content:"";position:absolute;z-index:-1;top:22%;bottom:calc(-1 * clamp(14px, 1.6vw, 22px));inset-inline:18% calc(-1 * clamp(10px, 1.4vw, 20px));
  background-color:var(--yellow);background-image:var(--voids);background-size:300px 300px}
.ct-map-f{border:2px solid var(--ink)}
.ct-map-f iframe{display:block;width:100%;height:auto;aspect-ratio:4/3;border:0;background:var(--paper-2)}
.ct-open{margin-top:calc(clamp(14px, 1.6vw, 22px) + 8px)}
.ct-hours .muted{margin-top:8px}
.ct-hours .leaders{margin-top:18px}
.ct-hours .leaders dd{text-align:end}
.ct-hours .leaders dd small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.ct-visit{margin-top:16px;max-width:30em;text-wrap:pretty}
@media (min-width:1024px){
  .ct-plan-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .ct-map-f iframe{aspect-ratio:auto;height:clamp(400px, 34vw, 540px)}
  .ct-hours{padding-top:4px}
}

/* suivre l'école : affiche de fin sur l'aplat jaune */
.ct-suivre .bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px, 3vw, 44px);align-items:center;container-type:inline-size;padding-block:clamp(24px, 3vw, 48px)}
.ct-suivre h2{font:900 clamp(52px, 12cqw, 136px)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em;
  color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply;text-wrap:balance}
.ct-suivre h2 span{display:block;margin-top:.2em;font-size:.36em;line-height:.95;color:var(--rj);text-shadow:none}
.ct-suivre p{max-width:32em;margin-top:18px;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5}
.ct-suivre .duo{max-width:500px;justify-self:center;width:100%}
.ct-handle{font:500 .9em/1.2 var(--mono-fr);letter-spacing:0;overflow-wrap:anywhere}
@media (min-width:900px){
  .ct-suivre .bloc{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .ct-suivre h2{font-size:clamp(52px, 8.4cqw, 136px)}
}

/* page introuvable : le grand 404 imprimé sur l'aplat jaune, à la place de la photo */
.nf-code{font:900 clamp(120px, 30vw, 320px)/.8 var(--display-fr);color:var(--yellow);mix-blend-mode:multiply;text-shadow:.03em .022em 0 var(--blue)}
.nf-fig{--ratio:16/10}
.nf-fig .duo-ph{display:grid;place-items:center}
.nf-fig .nf-code{font-size:clamp(120px, 44cqw, 340px);line-height:.8;color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply;transform:translateY(.04em)}
@media (min-width:1024px){ .nf-fig .nf-code{font-size:min(30cqw, 340px)} }
.nf-pages .bars a{color:var(--ink);text-decoration:none}
.nf-pages .bars a:hover,.nf-pages .bars a:focus-visible{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px;text-underline-offset:5px}
@media (min-width:900px){ .nf-pages .bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px, 4vw, 64px)} }

/* ---------- 4g. pages des cycles ---------- */
/* pages des cycles (tools/pages/cycles.py) : maternelle, primaire, collège, lycée.
   Le contenu après l'affiche est dans .cp.cy-mat|pri|col|lyc : --c, --ct, --t-ink, --t-reg viennent du cycle. */

/* un nom court (Lycée, Collège) : le titre peut monter plus haut que sur les autres pages */
:is(.p-maternelle,.p-primaire,.p-college,.p-lycee) .poster .trim{--fs-max:236px}
:root:lang(ar) :is(.p-maternelle,.p-primaire,.p-college,.p-lycee) .poster .trim{--fs-max:200px}

/* deux colonnes : faits + horaires, étapes + documents */
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px, 4vw, 64px);align-items:start}
@media (min-width:900px){ .cp-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)} }
.cp-reg .cp-grid{gap:clamp(40px, 4.4vw, 72px)}
@media (min-width:900px){ .cp-reg .cp-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)} }

/* l'essentiel : la feuille jaune des horaires */
.cp-hours{padding-top:clamp(18px, 2vw, 28px)}
.cp-hours .label::before{background:var(--t-ink)}
.cp-hours .leaders{margin-top:14px}
.cp-hours .leaders dt::after{border-bottom-color:rgba(26,33,71,.55)}
.cp-hours .leaders div{border-bottom-color:rgba(26,33,71,.3)}
:root:lang(fr) .cp-hours .leaders dd{font:800 26px/1 var(--display-fr);letter-spacing:.01em}
.cp-wed{margin-top:12px;font:600 13.5px/1.4 var(--mono)}
.cp-hours-p{margin-top:12px;font-size:15px;line-height:1.5}

/* les années : une affichette par année, l'âge en chiffres d'affiche */
.cp-years{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px, 3.4vw, 52px) clamp(28px, 3vw, 48px);padding-inline:var(--pad)}
@media (min-width:640px){ .cp-years{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .cp-years{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cp-years > li{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding-top:16px;border-top:2px solid var(--ink)}
.cp-years > li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:56px;height:6px;background:var(--c)}
.yr-age{order:-1;position:relative;display:flex;align-items:flex-end;gap:10px;font:900 clamp(96px, 4.4rem + 4vw, 156px)/.8 var(--display-fr);
  color:var(--t-ink);text-shadow:.03em .022em 0 var(--t-reg);mix-blend-mode:multiply;white-space:nowrap}
/* un aplat jaune sous le pied des chiffres, calé un peu différemment sur chaque année */
.yr-age::after{content:"";position:absolute;z-index:-1;inset-inline-start:-8px;bottom:-.05em;width:1.15em;height:.34em;
  background-color:var(--yellow);background-image:var(--voids);background-size:300px 300px}
.cp-years > li:nth-child(3n+2) .yr-age::after{inset-inline-start:.14em;bottom:.08em;height:.3em}
.cp-years > li:nth-child(3n) .yr-age::after{inset-inline-start:-4px;bottom:-.1em;width:1.3em}
.yr-age small{margin-bottom:.06em;font:600 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-shadow:none}
.cp-years h3{margin-top:16px;font:800 clamp(30px, 1.3rem + 1.2vw, 40px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em}
.cp-years p:not(.yr-age){margin-top:10px;max-width:30em;color:var(--ink-2);text-wrap:pretty}

/* maternelle : trois activités */
.cp-gal{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px, 3vw, 44px);padding-inline:var(--pad)}
@media (min-width:640px){ .cp-gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:639px){ .cp-gal .duo{--ratio:4/3 !important} }
.sec-h p .lnk{padding:0}

/* les matières : barres du logo sur deux ou trois colonnes */
.cp-subj .bars{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));column-gap:clamp(28px, 3vw, 48px);border-top:0;margin-inline:var(--pad);padding-inline:0}
.cp-subj .bars > li{font-weight:600}

/* sections de texte : le titre à gauche, le texte à droite */
.cp-body{padding-inline:var(--pad);min-width:0}
.cp-body > * + *{margin-top:1.3em}
@media (min-width:1024px){
  .cp-txt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .cp-txt .sec-h{grid-template-columns:minmax(0,1fr);padding-bottom:0}
  .cp-body{padding-inline:0 var(--pad);padding-top:.5em}
}

/* lycée : les filières ouvertes */
.cp-tracks{display:grid;grid-template-columns:minmax(0,1fr);gap:24px clamp(28px, 3vw, 44px);max-width:46em}
@media (min-width:640px){ .cp-tracks{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cp-tracks .label{margin-bottom:10px}
.cp-tracks .bars > li{font:800 clamp(24px, 1.1rem + .9vw, 32px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.cp-tracks .bars > li:nth-child(2n+1){--c:var(--blue)} .cp-tracks .bars > li:nth-child(2n){--c:var(--green)}

/* lycée : la note du bac, chaque part avec sa barre d'encre */
.cp-bac{max-width:46em}
.cp-bac td.wrap{font:400 16px/1.45 var(--text);padding-inline-end:20px}
.cp-bac td + td{width:40%;min-width:150px}
.cp-pc{display:block;font:800 34px/1 var(--display-fr)}
.cp-bar{display:block;width:var(--w);height:12px;margin-top:8px;background-color:var(--fc);background-image:var(--voids);background-size:300px 300px}
.cp-bac--jaune{--fc:var(--yellow)} .cp-bac--rouge{--fc:var(--red)} .cp-bac--bleu{--fc:var(--blue)}

/* inscrire : la feuille des documents */
.cp-docs .h4 + *{margin-top:14px}
.cp-more{margin-top:18px}

/* la suite : le cycle suivant (son affichette) ou, au lycée, la pré-inscription */
.cp-next .bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px, 3.4vw, 56px);align-items:center;container-type:inline-size;padding-block:clamp(24px, 3vw, 48px)}
@media (min-width:900px){ .cp-next .bloc{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} .cp-next--solo .bloc{grid-template-columns:minmax(0,1fr)} }
.cp-next .label::before{background:currentColor}
.cp-next h2{margin-top:calc(14px + .12em);font:900 clamp(56px, 13cqw, 150px)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em}
@media (min-width:900px){ .cp-next h2{font-size:clamp(56px, 8.4cqw, 150px)} .cp-next--solo h2{font-size:clamp(56px, 9cqw, 150px)} }
.cp-next h2 span{display:block;margin-top:.18em;font-size:.36em;line-height:.95}
.cp-next .bloc--jaune h2{color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply}
.cp-next .bloc--jaune h2 span{color:var(--rj);text-shadow:none}
.cp-next :is(.bloc--vert,.bloc--bleu) h2{color:#fff;text-shadow:.03em .022em 0 var(--yellow)}
.cp-next :is(.bloc--vert,.bloc--bleu) h2 span{text-shadow:none}
.cp-next-txt > p:not(.label){max-width:32em;margin-top:18px;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5}
.cp-next .bloc--jaune .lnk{text-decoration-color:var(--blue)}
/* l'affichette collée sur l'aplat : elle garde ses encres et son papier */
.cp-next .serie{grid-template-columns:minmax(0,1fr);justify-items:center;padding-block:calc(var(--cm) + var(--cg) + 4px)}
.cp-next .aff{width:100%;max-width:420px;color:var(--ink)}
.cp-next .aff a{color:var(--ink)}
.cp-next .aff .cm::before,.cp-next .aff .cm::after{background:var(--ink)}

/* ---------- 4h. vie scolaire ---------- */
/* vie scolaire : chaque fête est une feuille d'affiche (titre calé, photos tramées), les sorties sur un aplat jaune,
   les valeurs aux quatre barres du logo, les horaires en chiffres d'affiche, la bande bleue Facebook / Instagram */
/* actualités ajoutées par l'école dans le tableau de bord : photo tramée sur l'aplat, date, titre, texte
   (vie-scolaire.html#actualites, et les trois dernières sur l'accueil) */
.news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px, 4vw, 56px) clamp(24px, 3vw, 44px);padding-block:calc(var(--cm) + var(--cg) + 4px)}
@media (min-width:700px){ .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .news-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.news-card{display:grid;align-content:start;gap:14px;min-width:0}
.news-body{display:grid;gap:8px;min-width:0;border-top:2px solid var(--ink);padding-top:12px}
.news-date{font:500 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.news-h{font:800 clamp(24px, 1.1rem + .9vw, 32px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.news-txt{display:grid;gap:10px;line-height:1.55;overflow-wrap:anywhere}
.hm-news{margin-block:clamp(8px, 2vw, 20px) clamp(32px, 4vw, 56px)}
.hm-news .more{margin-top:4px}
.vs-fb-h{margin-top:clamp(24px, 3vw, 40px)}
:root:lang(ar) .news-h{font-family:var(--ar-d);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.35}
:root:lang(ar) .news-date{font-family:var(--ar-t);letter-spacing:0;text-transform:none;font-size:14px}
:root:lang(ar) [lang="fr"].news-h{font-family:var(--display);text-transform:uppercase}

/* actualités : le fil de la page Facebook dans une feuille à traits de coupe, le texte à côté */
.vs-news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px, 3vw, 48px);align-items:start;padding-block:calc(var(--cm) + var(--cg) + 4px)}
.vs-fb{justify-self:start;width:100%;max-width:500px;min-width:0;border:2px solid var(--ink);background:#fff}
.vs-fb iframe{display:block;width:100%;max-width:500px;height:min(720px, 80vh);border:0}
.vs-news-txt{display:grid;gap:14px;max-width:34em;order:-1}
@media (min-width:900px){
  .vs-news-grid{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(36px, 4vw, 72px)}
  .vs-news-txt{order:0}
}
.vs-evs{display:grid;gap:calc(2 * (var(--cm) + var(--cg)) + clamp(20px, 3vw, 44px));padding-block:calc(var(--cm) + var(--cg) + 4px)}
.vs-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:inherit;align-items:start}
@media (min-width:900px){ .vs-pair{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* la feuille d'une fête */
.vs-ev{container-type:inline-size;padding:0 var(--pad) clamp(14px, 2vw, 26px)}
.vs-ev-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:12px 0 10px;border-bottom:2px solid var(--ink)}
.vs-ev-n{font:600 13px/1.2 var(--mono-fr);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vs-ev-top > [lang="ar"]{font:400 clamp(21px, 1rem + .7vw, 28px)/1.3 var(--ar-d);color:var(--ct, var(--ink))}
.vs-ev-top > [lang="fr"]{font:800 clamp(17px, .9rem + .5vw, 22px)/1.1 var(--display-fr);text-transform:uppercase;letter-spacing:.03em;color:var(--ct, var(--ink))}
:root[dir="ltr"] .vs-ev-top > [lang]{margin-left:auto}
:root[dir="rtl"] .vs-ev-top > [lang]{margin-right:auto}
.vs-ev-h{margin-top:clamp(14px, 1.6vw, 22px);font:900 clamp(44px, 10.4cqw, 160px)/calc(var(--lh-big) + .07) var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
.vs-ev-line{max-width:34em;margin-top:clamp(12px, 1.4vw, 18px);font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5;text-wrap:pretty}
.vs-ev-ph{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px, 2.4vw, 36px);margin-top:clamp(18px, 2.2vw, 30px)}
.vs-ph{--ratio:4/3}
/* la grande photo de la journée Coupe du monde sort de la coupe, comme sur l'affiche d'accueil */
.vs-ph--big{margin-inline:calc(-1 * (var(--pad) + var(--bleed)));--f-start:0px;--f-end:0px}
.vs-ph--big .duo-ph,.vs-ph--big figcaption{margin-inline:calc(var(--pad) + var(--bleed) + 10px) calc(var(--pad) + var(--bleed) - 10px)}
.vs-ph--two{width:min(100%, 84%);justify-self:end}
.vs-ph--show{--ratio:4/3}
.vs-ph--one{--ratio:16/9}
@media (min-width:700px){
  .vs-ev--coupe .vs-ev-ph{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-ph--big,.vs-ph--c{grid-column:1 / -1;--ratio:16/9}
  .vs-ph--show{--ratio:16/9}
}
@media (min-width:1024px){
  /* trois photos en ligne, de hauteurs et de calages différents, comme collées à la main */
  .vs-ev--coupe .vs-ev-ph{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr);align-items:start}
  .vs-ev--coupe .vs-ev-h{max-width:12em}
  .vs-ph--big{--ratio:21/9}
  .vs-ph--a{--ratio:4/5}
  .vs-ph--b{margin-top:clamp(40px, 6cqw, 96px)}
  .vs-ph--c{grid-column:auto;--ratio:4/3}
  .vs-ph--show{--ratio:21/9}
  .vs-ev--spectacle .vs-ev-ph{margin-top:clamp(18px, 2cqw, 30px)}
}
/* le spectacle : sur un aplat jaune, le titre bleu y devient olive (surimpression) */
.vs-ev--spectacle .vs-ev-top{border-bottom-color:var(--ink)}
.vs-ev--spectacle .duo figcaption{color:var(--ink)}

/* les sorties : une affiche de tournée sur l'aplat jaune */
.vs-sorties .bloc{container-type:inline-size;display:grid;gap:clamp(18px, 2.4vw, 32px);padding-block:clamp(22px, 3vw, 48px)}
.vs-y-h{font:800 clamp(44px, 2rem + 4.4vw, 104px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.vs-y-h span{display:block;color:var(--blue);mix-blend-mode:multiply}
.vs-trips{border-top:2px solid var(--ink)}
.vs-trips li{display:flex;align-items:baseline;gap:clamp(12px, 1.6cqw, 22px);padding:clamp(12px, 1.6cqw, 22px) 0 clamp(10px, 1.4cqw, 18px);border-bottom:1px solid rgba(26,33,71,.35);
  font:900 clamp(40px, 8.4cqw, 140px)/calc(var(--lh-big) + .07) var(--display);text-transform:uppercase;letter-spacing:-.004em}
.vs-trips li::before{content:"";flex:none;width:.16em;height:.62em;background:var(--c)}
.vs-trips .t-print{min-width:0;text-wrap:balance}
@media (min-width:1024px){
  .vs-sorties .bloc{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);column-gap:clamp(28px, 4cqw, 60px);align-items:start}
  .vs-trips li{font-size:clamp(40px, 6.4cqw, 140px)}
}

/* activités et valeurs */
.vs-act-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px, 5vw, 72px);align-items:start}
.vs-cards{display:grid;gap:clamp(28px, 3vw, 40px)}
.vs-card h3{font:800 clamp(28px, 1.3rem + 1.1vw, 40px)/calc(var(--lh-h) + .06) var(--display);text-transform:uppercase;letter-spacing:.02em}
.vs-card p{max-width:34em;text-wrap:pretty}
.vs-val{container-type:inline-size;padding:clamp(16px, 2vw, 26px) var(--pad) clamp(18px, 2.2vw, 28px)}
.vs-vals{margin-top:14px;border-top:2px solid var(--ink)}
.vs-vals li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;padding:clamp(12px, 2.2cqw, 20px) 0 clamp(10px, 1.8cqw, 16px);border-bottom:1px solid var(--rule)}
/* la barre du logo, posée sur la ligne de base, monte d'une valeur à l'autre */
.vs-v{display:flex;align-items:baseline;gap:.2em;min-width:0;font:900 clamp(38px, 10cqw, 96px)/calc(var(--lh-big) + .07) var(--display);text-transform:uppercase;letter-spacing:-.004em;
  color:var(--blue);text-shadow:.03em .022em 0 var(--red);mix-blend-mode:multiply}
.vs-v::before{content:"";flex:none;width:.2em;height:var(--h, .6em);background:var(--c)}
.vs-vo{font:400 clamp(24px, 5cqw, 40px)/1.3 var(--ar-d);color:var(--ink-2)}
.vs-vo[lang="fr"]{font:800 clamp(17px, 3.6cqw, 26px)/1.1 var(--display-fr);text-transform:uppercase;letter-spacing:.03em}
:root[dir="ltr"] .vs-vo{margin-left:auto}
:root[dir="rtl"] .vs-vo{margin-right:auto}
.vs-val-src{margin-top:14px;font:500 13px/1.45 var(--mono);letter-spacing:.02em;color:var(--ink-2)}
@media (min-width:1024px){
  .vs-act-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .vs-cards{padding-top:6px}
}

/* horaires : une ligne par cycle, les heures en chiffres d'affiche */
.vs-tab tbody th{font-size:clamp(26px, 1.2rem + 1.2vw, 40px)}
.vs-tab tbody th::before{width:12px;height:.78em;vertical-align:-.02em}
.vs-tab tbody th small{display:block;margin-top:6px;padding-inline-start:22px;font:500 13px/1.3 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.vs-tab td{font:800 clamp(30px, 1.1rem + 2.2vw, 62px)/1 var(--display-fr);letter-spacing:.01em;vertical-align:middle}
.vs-tab td span{box-shadow:inset 0 -.14em 0 var(--c);padding-inline:.04em}
.vs-tab tbody th{vertical-align:middle;padding-block:16px}
.vs-wed{display:inline-block;margin-top:22px;padding:10px 16px 11px;font:600 16px/1.4 var(--text);color:var(--ink)}
.vs-hor-note{margin-top:12px;font-size:15px}
@media (max-width:699px){
  .vs-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vs-tab,.vs-tab tbody{display:block}
  .vs-tab tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;padding:14px 0 16px;border-bottom:1px solid var(--rule)}
  .vs-tab tbody tr:first-child{border-top:2px solid var(--ink)}
  .vs-tab tbody th,.vs-tab td{padding:0;border:0}
  .vs-tab tbody th{grid-column:1 / -1;margin-bottom:12px}
  .vs-tab td{font-size:clamp(22px, 6.4vw, 36px)}
  .vs-tab td::before{content:attr(data-l);display:block;margin-bottom:6px;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
}

/* suivre l'école : la bande bleue */
.vs-suivre .bloc{display:grid;gap:clamp(28px, 3vw, 48px);padding-block:clamp(24px, 3vw, 48px);container-type:inline-size;--c:var(--yellow)}
.vs-suivre h2{font:900 clamp(46px, 12cqw, 132px)/var(--lh-big) var(--display);text-transform:uppercase;letter-spacing:-.004em;color:#fff;text-shadow:.03em .022em 0 var(--rj)}
.vs-s-main > p{max-width:32em;margin-top:16px;font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.5}
.vs-s-visit{padding-top:16px;border-top:2px solid rgba(255,255,255,.7)}
.vs-s-visit h3{font:800 clamp(28px, 1.3rem + 1.1vw, 40px)/var(--lh-h) var(--display);text-transform:uppercase;letter-spacing:.02em}
.vs-s-visit p{margin-top:10px;max-width:30em}
@media (min-width:900px){
  .vs-suivre .bloc{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:end}
  .vs-suivre h2{font-size:clamp(46px, 8cqw, 132px)}
}

/* =====================================================================
   5. arabe : dir="rtl", lang="ar"
   Titres en Lalezar (une seule graisse : pas de gras simulé), texte en IBM Plex Sans Arabic,
   jamais d'espacement entre les lettres (il casserait la liaison), interlignes plus ouverts.
   ===================================================================== */
:root:lang(ar){--display:var(--ar-d);--text:var(--ar-t);--mono:var(--ar-t)}
:lang(ar){letter-spacing:0!important;font-synthesis-weight:none}
:root:lang(ar),[lang="ar"]{--lh-big:1.18;--lh-h:1.22;--lh-s:1.35}
:root:lang(ar) [lang="fr"]{--lh-big:.8;--lh-h:.88;--lh-s:1.05}
/* un mot arabe dans une page française : lettres d'affiche Lalezar (comme l'aperçu) */
:where(:root:lang(fr) [lang="ar"]){--display:var(--ar-d);--text:var(--ar-d);--mono:var(--ar-t);font-family:var(--ar-d);font-weight:400}
/* un mot français dans une page arabe */
:where(:root:lang(ar) [lang="fr"]){--display:var(--display-fr);--text:var(--text-fr);--mono:var(--mono-fr);font-family:var(--text-fr)}
:root:lang(ar) body{line-height:1.75}
:root:lang(ar) .lead,:root:lang(ar) .h-lead{line-height:1.7}

/* les petites mentions d'imprimeur : un peu plus grandes en arabe */
:root:lang(ar) .h-kick,:root:lang(ar) .crumbs,:root:lang(ar) .label,:root:lang(ar) .facts dt,:root:lang(ar) .field > label,
:root:lang(ar) .field > legend,:root:lang(ar) .tab thead th,:root:lang(ar) .tab caption,:root:lang(ar) .aff-n,:root:lang(ar) .foot .f-k,
:root:lang(ar) .slug{font-size:14.5px;font-weight:600}
:root:lang(ar) .duo figcaption,:root:lang(ar) .h-photo figcaption,:root:lang(ar) .aff-note,:root:lang(ar) .s-age,:root:lang(ar) .ns-age{font-size:14.5px;line-height:1.55}
:root:lang(ar) .leaders{font-size:15.5px}
:root:lang(ar) .leaders dt{font-size:14.5px}
:root:lang(ar) .foot .f-bottom p{font-size:14px}
:root:lang(ar) .nav-links > li > a,:root:lang(ar) .nav-sub-btn{font-size:16.5px;font-weight:600}
:root:lang(ar) .nav-links > li > a[lang="fr"]{font:600 15px/1.2 var(--text-fr)}
:root:lang(ar) .mast.is-open .nav-links > li > a,:root:lang(ar) .mast.is-open .nav-sub a{font:400 28px/1.35 var(--ar-d)}
:root:lang(ar) .mast.is-open .nav-links > li > a[lang="fr"]{font:800 28px/1 var(--display-fr);text-transform:uppercase}
:root:lang(ar) .menu-btn{font-size:16px}
:root:lang(ar) .brand-ar{font:400 21px/1.3 var(--ar-d)}
:root:lang(ar) .brand-fr{font-size:13px;letter-spacing:.06em}
:root:lang(ar) .btn{font-weight:700;font-size:16.5px}
/* grands titres : Lalezar est plus large que les lettres condensées */
:root:lang(ar) .hero .trim{--W:3.6;--lh-big:1.02}
:root:lang(ar) .t-big{margin-top:-.08em}
:root:lang(ar) .h-name{font-size:clamp(26px, 1.3rem + 1.2vw, 40px)}
:root:lang(ar) .poster .trim{--fs:min(var(--fs-max, 150px), calc(100cqw / var(--W, 3.6)))}
:root:lang(ar) .p-big{margin-top:-.06em}
:root:lang(ar) .sec-h h2{font-size:clamp(40px, 1.8rem + 3.6vw, 92px)}
:root:lang(ar) .sec-h--sm h2{font-size:clamp(32px, 1.4rem + 2.4vw, 64px)}
:root:lang(ar) .h3,:root:lang(ar) .steps h3{font-size:clamp(26px, 1.3rem + 1vw, 36px)}
:root:lang(ar) .s-name,:root:lang(ar) .ns-name,:root:lang(ar) .tab tbody th{font-size:24px}
:root:lang(ar) .s-name{min-height:34px}
:root:lang(ar) .aff h3,:root:lang(ar) .aff h2{font-size:clamp(32px, 12cqw, 42px)}
:root:lang(ar) .bars--big > li{font-size:clamp(24px, 1.1rem + 1.4vw, 38px)}
:root:lang(ar) .hm-fin h2{font-size:clamp(52px, 11cqw, 120px)}
:root:lang(ar) .foot .f-motto{font-size:clamp(23px, 6.2vw, 30px);line-height:1.3}
:root:lang(ar) .foot .f-motto-o{font:600 16px/1.4 var(--text-fr)}
/* le chiffre de l'étape, le défaut de calage et la flèche du menu déroulant restent physiques ;
   la flèche des listes déroulantes passe à gauche */
:root:lang(ar) .field select{background-position:15px 52%, 22px 52%}
:root:lang(ar) .btn--line::before{transform-origin:100% 0}
:root:lang(ar) .h-motto{text-align:end}
:root:lang(ar) .h-motto p:first-child{font:400 26px/1.3 var(--ar-d);color:var(--green-text)}
:root:lang(ar) .h-motto p + p[lang="fr"]{font:400 15px/1.4 var(--text-fr);color:var(--ink-2)}

/* ---------- 5b. arabe : sections des pages ---------- */
/* inscription */
:root:lang(ar) .insc-msg p{font-size:15.5px;line-height:1.85}
:root:lang(ar) .insc-contacts dt{font-size:14.5px}
:root:lang(ar) .insc-contacts dd{font-size:17px}
:root:lang(ar) .insc-honest{font-size:16px;line-height:1.6}

/* contact et page introuvable */
:root:lang(ar) .ct-k,:root:lang(ar) .ct-note{font-size:14.5px;font-weight:600}
:root:lang(ar) .ct-hours .leaders dd small{font-size:14px}
:root:lang(ar) .ct-suivre h2{font-size:clamp(46px, 10cqw, 112px)}
@media (min-width:900px){ :root:lang(ar) .ct-suivre h2{font-size:clamp(46px, 7cqw, 112px)} }
:root:lang(ar) .ct-addr{line-height:1.75}

/* pages des cycles */
:root:lang(ar) .yr-age small,:root:lang(ar) .cp-wed{font-size:15px;font-weight:600;text-transform:none}
:root:lang(ar) .cp-years h3{font-size:clamp(28px, 1.3rem + 1vw, 36px)}
:root:lang(ar) .cp-tracks .bars > li{font-size:clamp(22px, 1rem + .8vw, 28px)}
:root:lang(ar) .cp-next h2{font-size:clamp(50px, 11cqw, 120px)}
@media (min-width:900px){ :root:lang(ar) .cp-next h2{font-size:clamp(50px, 7.4cqw, 120px)} }
:root:lang(ar) .cp-next h2 span{font-size:.42em;line-height:1.3}
:root:lang(ar) .cp-bac td.wrap{font-size:16.5px;line-height:1.6}

/* vie scolaire */
:root:lang(ar) .vs-ev-h{font-size:clamp(38px, 9.6cqw, 124px)}
:root:lang(ar) .vs-trips li{font-size:clamp(36px, 7.4cqw, 112px)}
@media (min-width:1024px){ :root:lang(ar) .vs-trips li{font-size:clamp(36px, 5.6cqw, 112px)} }
:root:lang(ar) .vs-v{font-size:clamp(36px, 11cqw, 88px)}
:root:lang(ar) .vs-y-h{font-size:clamp(40px, 1.8rem + 3.6vw, 92px)}
:root:lang(ar) .vs-card h3,:root:lang(ar) .vs-s-visit h3{font-size:clamp(26px, 1.3rem + 1vw, 36px)}
:root:lang(ar) .vs-suivre h2{font-size:clamp(40px, 9cqw, 104px)}
@media (min-width:900px){ :root:lang(ar) .vs-suivre h2{font-size:clamp(40px, 6.4cqw, 104px)} }
:root:lang(ar) .vs-val-src,:root:lang(ar) .vs-tab tbody th small{font-size:14.5px;line-height:1.55}
:root:lang(ar) .vs-tab td::before{font-size:14px}
:root:lang(ar) .vs-tab tbody th{font-size:clamp(26px, 1.2rem + 1vw, 36px)}
:root:lang(ar) .vs-wed{font-size:16.5px;line-height:1.6}

/* =====================================================================
   6. mouvement : une seule entrée, le calage du second passage
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .h-photo .field{animation:calage .7s cubic-bezier(.2,.8,.25,1) .15s both}
  .js .t-big,.js .p-big{animation:calage-t .7s cubic-bezier(.2,.8,.25,1) .15s both}
  .js .poster .duo::before{animation:calage .7s cubic-bezier(.2,.8,.25,1) .15s both}
  @keyframes calage{from{transform:translate(-22px,14px)}to{transform:none}}
  /* en arabe, l'aplat arrive de l'autre côté : il ne déborde jamais du bord où la page défile */
  :root[dir="rtl"].js .h-photo .field,:root[dir="rtl"].js .poster .duo::before{animation-name:calage-rtl}
  @keyframes calage-rtl{from{transform:translate(22px,14px)}to{transform:none}}
  @keyframes calage-t{from{text-shadow:.12em .08em 0 var(--t-reg, var(--red))}to{text-shadow:.03em .022em 0 var(--t-reg, var(--red))}}
}
@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.nav-links > li > a,.nav-sub-btn::after{transition:none}
}