@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-6c1e9610.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-b9209b52.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-ff171312.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ===== CIF Le Transit · base commune aux 4 DA ===== */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-6c1e9610.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-b9209b52.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-ff171312.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --jaune:#faef59; --bleu:#6cb8ca; --noir:#000;
  --jaune-pale:#fdf8c4; --bleu-pale:#e3f2f6; --bleu-50:#b5dbe4;
  --papier:#f3f3ef; --ligne:#e2e2dc; --encre:#0b0b0b; --encre-douce:#3a3a3a; --blanc:#fff;
  --police:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --marge:clamp(1rem,4vw,4.5rem); --max:1680px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--police);font-optical-sizing:auto;color:var(--encre);background:var(--blanc);font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
main,footer{overflow-x:clip}
::selection{background:var(--jaune);color:#000}
:focus-visible{outline:3px solid #000;outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.evitement{position:fixed;left:1rem;top:-4rem;z-index:100;background:#000;color:#fff;padding:.7rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:600;transition:top .3s var(--ease)}
.evitement:focus{top:1rem}
.nb{white-space:nowrap}

/* Sortie rapide : toujours visible, jamais animée au point de gêner */
.sortie{position:fixed;z-index:99;right:clamp(.6rem,1.4vw,1.25rem);top:clamp(.6rem,1.4vw,1.25rem);display:inline-flex;align-items:center;gap:.55rem;
  background:#000;color:#fff;border:0;border-radius:999px;padding:.72rem 1.05rem .72rem .8rem;font-weight:600;font-size:.9rem;letter-spacing:.01em;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45);transition:transform .45s var(--ease),background-color .3s var(--ease)}
.sortie .sortie-ico{width:1.55rem;height:1.55rem;border-radius:50%;background:var(--jaune);color:#000;display:grid;place-items:center;transition:transform .45s var(--ease)}
.sortie .sortie-ico svg{width:.85rem;height:.85rem}
.sortie kbd{font:inherit;font-size:.72rem;opacity:.6;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:.05rem .35rem}
@media (hover:hover){.sortie:hover{transform:translateY(-2px)}.sortie:hover .sortie-ico{transform:translateX(3px)}}
.sortie:active{transform:scale(.97)}
.sortie-bulle{position:fixed;z-index:99;right:clamp(.6rem,1.4vw,1.25rem);top:calc(clamp(.6rem,1.4vw,1.25rem) + 3.4rem);max-width:17rem;background:#fff;color:#000;border-radius:16px;padding:.9rem 1rem;font-size:.85rem;line-height:1.4;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sortie:hover + .sortie-bulle,.sortie:focus-visible + .sortie-bulle{opacity:1;transform:none}
@media (max-width:560px){.sortie kbd,.sortie .txt-long{display:none}}

/* Statut d'ouverture */
.statut{display:inline-flex;align-items:center;gap:.5rem}
.statut i{width:.55rem;height:.55rem;border-radius:50%;background:#9a9a92;flex:none}
.statut[data-ouvert="1"] i{background:#000;box-shadow:0 0 0 3px var(--jaune)}
.statut[data-ouvert="1"] i{animation:pouls 2.4s var(--ease-in-out) infinite}
@keyframes pouls{50%{box-shadow:0 0 0 6px rgba(250,239,89,.55)}}

/* Liens soulignés tracés (micro-interaction commune) */
.lien{--l:currentColor;text-decoration:none;background:linear-gradient(var(--l),var(--l)) 0 100%/100% 1.5px no-repeat;padding-bottom:.08em;transition:background-size .5s var(--ease)}
@media (hover:hover){.lien:hover{background-size:0 1.5px;background-position:100% 100%}}

/* Placeholder à remplacer */
.a-remplacer{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px dashed currentColor;border-radius:999px;padding:.1rem .5rem;opacity:.7;vertical-align:middle}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== Formulaires CIF Le Transit : thème par variables, chaque DA surcharge --f-* ===== */
.formulaire{
  --f-ink:#000; --f-soft:#3a3a3a; --f-bg:#fff; --f-bg-2:#f3f3ef; --f-line:#d8d8d0; --f-focus:#000;
  --f-accent:#faef59; --f-accent-2:#6cb8ca; --f-radius:16px; --f-pill:999px; --f-h:3.4rem;
  --f-err-bg:#fdf8c4; --f-ok:#000;
  display:grid;gap:1.35rem;color:var(--f-ink)
}
.formulaire .rang{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.champ{display:grid;gap:.5rem;position:relative;min-width:0}
.champ[hidden]{display:none}
.champ > label,.champ > .etiquette,.champ legend{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-weight:600;font-size:.95rem;padding:0}
fieldset.champ{border:0;margin:0;padding:0;min-width:0}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--f-pill);padding:.22rem .55rem;line-height:1}
.tag-oblig{background:var(--f-accent);color:#000}
.tag-facult{background:transparent;color:var(--f-soft);box-shadow:inset 0 0 0 1px var(--f-line)}
.aide{font-size:.85rem;color:var(--f-soft);line-height:1.4}

/* Champs texte */
.saisie{width:100%;height:var(--f-h);border:1.5px solid var(--f-line);background:var(--f-bg);border-radius:var(--f-radius);padding:0 1.05rem;font-size:1rem;outline:0;
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease),background-color .3s var(--ease)}
textarea.saisie{height:auto;min-height:8.5rem;padding:.95rem 1.05rem;resize:vertical;line-height:1.5}
.saisie::placeholder{color:#8a8a82}
@media (hover:hover){.saisie:hover{border-color:#a9a9a0}}
.saisie:focus{border-color:var(--f-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--f-accent) 70%,transparent)}
.champ.ok .saisie{border-color:var(--f-ok)}
.champ.ok > label::after{content:"";width:1.1rem;height:1.1rem;margin-left:auto;border-radius:50%;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23faef59' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.champ.erreur .saisie,.champ.erreur .liste-btn,.champ.erreur .options{border-color:#000;background:var(--f-err-bg)}
.msg-err{display:none;align-items:flex-start;gap:.45rem;font-size:.85rem;font-weight:600;line-height:1.35}
.msg-err::before{content:"!";flex:none;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:#000;color:var(--f-accent);font-size:.75rem;font-weight:800;margin-top:.05rem}
.champ.erreur .msg-err{display:flex;animation:glisse .4s var(--ease)}
@keyframes glisse{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.compteur{justify-self:end;font-size:.78rem;color:var(--f-soft);font-variant-numeric:tabular-nums;margin-top:-.2rem}
.compteur.limite{color:#000;font-weight:700}

/* Liste déroulante personnalisée (role=listbox) */
.liste{position:relative}
.liste select{position:absolute;inset:0;opacity:0;pointer-events:none}
.liste-btn{width:100%;height:var(--f-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;border:1.5px solid var(--f-line);background:var(--f-bg);border-radius:var(--f-radius);padding:0 .6rem 0 1.05rem;
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease)}
.liste-btn .vide{color:#8a8a82}
.liste-btn .chev{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--f-bg-2);transition:transform .5s var(--ease),background-color .3s var(--ease)}
.liste-btn .chev svg{width:.8rem}
@media (hover:hover){.liste-btn:hover{border-color:#a9a9a0}.liste-btn:hover .chev{background:var(--f-accent)}}
.liste-btn:focus-visible,.liste.liste-ouverte .liste-btn{outline:0;border-color:var(--f-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--f-accent) 70%,transparent)}
.liste.liste-ouverte .chev{transform:rotate(180deg);background:var(--f-accent)}
.liste-pop{position:absolute;z-index:40;left:0;right:0;top:calc(100% + .5rem);background:#fff;border-radius:calc(var(--f-radius) + 4px);padding:.45rem;max-height:19rem;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 60px -25px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;visibility:hidden;transition:opacity .25s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.liste.vers-haut .liste-pop{top:auto;bottom:calc(100% + .5rem);transform-origin:bottom center}
.liste.liste-ouverte .liste-pop{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.liste-pop [role=option]{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .85rem;border-radius:12px;cursor:pointer;transition:background-color .2s var(--ease)}
.liste-pop [role=option][aria-selected=true]{font-weight:600}
.liste-pop [role=option][aria-selected=true]::after{content:"";width:.95rem;height:.95rem;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.liste-pop [role=option].actif{background:var(--f-bg-2)}
@media (hover:hover){.liste-pop [role=option]:hover{background:var(--f-bg-2)}}
.liste-pop .groupe{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--f-soft);padding:.8rem .85rem .35rem}

/* Segments (radios en ligne) */
.segments{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;background:var(--f-bg-2);border-radius:var(--f-pill);padding:.3rem;isolation:isolate;max-width:100%}
.segments input{position:absolute;opacity:0;pointer-events:none}
.segments label{position:relative;z-index:1;display:grid;place-items:center;text-align:center;padding:.7rem 1.1rem;border-radius:var(--f-pill);font-weight:600;font-size:.92rem;cursor:pointer;transition:color .35s var(--ease);line-height:1.2}
.segments .pouce{position:absolute;z-index:0;top:.3rem;bottom:.3rem;left:0;border-radius:var(--f-pill);background:#000;transition:transform .55s var(--ease),width .55s var(--ease);opacity:0}
.segments.a-choix .pouce{opacity:1}
.segments input:checked + label{color:#fff}
.segments input:focus-visible + label{outline:3px solid #000;outline-offset:2px}
@media (max-width:560px){.segments{grid-auto-flow:row;border-radius:var(--f-radius);width:100%}.segments label{border-radius:12px}.segments .pouce{border-radius:12px;left:.3rem;right:.3rem;top:0;bottom:auto}}

/* Cartes radio (moyen de contact) */
.cartes{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.cartes input{position:absolute;opacity:0;pointer-events:none}
.cartes label{position:relative;display:grid;gap:.35rem;padding:1rem 1rem 1.05rem;border-radius:var(--f-radius);border:1.5px solid var(--f-line);background:var(--f-bg);cursor:pointer;
  transition:border-color .3s var(--ease),transform .45s var(--ease),background-color .3s var(--ease)}
.cartes label b{font-size:.98rem}
.cartes label small{font-size:.8rem;color:var(--f-soft);line-height:1.35}
.cartes label .pastille{position:absolute;top:.85rem;right:.85rem;width:1.25rem;height:1.25rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--f-line);transition:box-shadow .35s var(--ease),background-color .3s}
.cartes label .ico{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--f-bg-2);display:grid;place-items:center;margin-bottom:.35rem;transition:background-color .35s var(--ease)}
.cartes label .ico svg{width:1.15rem;height:1.15rem}
@media (hover:hover){.cartes label:hover{border-color:#a9a9a0;transform:translateY(-2px)}}
.cartes input:checked + label{border-color:#000;background:var(--f-bg)}
.cartes input:checked + label .pastille{box-shadow:inset 0 0 0 6px #000;background:var(--f-accent)}
.cartes input:checked + label .ico{background:var(--f-accent)}
.cartes input:focus-visible + label{outline:3px solid #000;outline-offset:3px}

/* Pastilles à cocher (moments) */
.pilules{display:flex;flex-wrap:wrap;gap:.55rem}
.pilules input{position:absolute;opacity:0;pointer-events:none}
.pilules label{display:inline-flex;align-items:center;gap:.5rem;padding:.62rem 1rem .62rem .72rem;border-radius:var(--f-pill);border:1.5px solid var(--f-line);background:var(--f-bg);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .35s var(--ease)}
.pilules label::before{content:"";width:1.05rem;height:1.05rem;border-radius:6px;box-shadow:inset 0 0 0 1.5px #a9a9a0;transition:all .35s var(--ease);background:center/80% no-repeat}
.pilules input:checked + label{background:#000;color:#fff;border-color:#000}
.pilules input:checked + label::before{box-shadow:none;background-color:var(--f-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pilules input:focus-visible + label{outline:3px solid #000;outline-offset:3px}
@media (hover:hover){.pilules label:hover{border-color:#000}}

/* Case à cocher simple (consentement) */
.case,.champ > label.case{display:flex;flex-wrap:nowrap;gap:.8rem;align-items:center;cursor:pointer;font-size:.92rem;line-height:1.45;font-weight:400}
.case input{position:absolute;opacity:0;pointer-events:none}
.case .case-boite{flex:none;width:1.45rem;height:1.45rem;border-radius:7px;box-shadow:inset 0 0 0 1.5px #8a8a82;background:#fff center/78% no-repeat;transition:all .35s var(--ease)}
.case input:checked + .case-boite{box-shadow:none;background-color:#000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23faef59' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");animation:pop .4s var(--ease)}
.case input:focus-visible + .case-boite{outline:3px solid #000;outline-offset:3px}
.champ.erreur .case .case-boite{box-shadow:inset 0 0 0 2px #000;background-color:var(--f-err-bg)}

/* Interrupteur (laisser un message) */
.interrupteur{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--f-radius);background:var(--f-bg-2);cursor:pointer}
.interrupteur input{position:absolute;opacity:0;pointer-events:none}
.interrupteur .rail{flex:none;width:3.3rem;height:1.9rem;border-radius:99px;background:#c9c9c0;position:relative;transition:background-color .35s var(--ease)}
.interrupteur .rail::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .5s var(--ease)}
.interrupteur input:checked ~ .rail{background:#000}
.interrupteur input:checked ~ .rail::after{transform:translateX(1.4rem);background:var(--f-accent)}
.interrupteur input:focus-visible ~ .rail{outline:3px solid #000;outline-offset:3px}
.interrupteur .etat{font-size:.82rem;color:var(--f-soft)}

/* Calendrier */
.date{position:relative}
.date .saisie{padding-right:3.6rem}
.date-btn{position:absolute;right:.55rem;top:50%;translate:0 -50%;width:2.3rem;height:2.3rem;border-radius:50%;border:0;background:var(--f-bg-2);display:grid;place-items:center;transition:background-color .3s var(--ease),transform .4s var(--ease)}
.date-btn svg{width:1.05rem;height:1.05rem}
@media (hover:hover){.date-btn:hover{background:var(--f-accent)}}
.cal{position:absolute;z-index:40;top:calc(100% + .5rem);left:0;width:min(21rem,calc(100vw - 2rem));background:#fff;border-radius:22px;padding:1rem;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top left;transition:opacity .25s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.date.cal-ouvert .cal{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.date.vers-haut .cal{top:auto;bottom:calc(100% + .5rem);transform-origin:bottom left}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.cal-tete b{font-size:1rem;text-transform:capitalize}
.cal-tete button{width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:var(--f-bg-2);display:grid;place-items:center;transition:background-color .3s}
.cal-tete button svg{width:.8rem}
@media (hover:hover){.cal-tete button:hover{background:var(--f-accent)}}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;text-align:center}
.cal-grille .js{font-size:.7rem;font-weight:700;color:var(--f-soft);padding:.35rem 0;text-transform:uppercase;letter-spacing:.05em}
.cal-grille button{aspect-ratio:1;border:0;background:transparent;border-radius:50%;font-size:.88rem;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s,transform .3s var(--ease)}
.cal-grille button:disabled{color:#c2c2ba;cursor:default}
.cal-grille button.auj{box-shadow:inset 0 0 0 1.5px #000}
.cal-grille button[aria-selected=true]{background:#000;color:var(--f-accent);font-weight:700}
.cal-grille button.ferme{color:#9a9a92;text-decoration:line-through;text-decoration-thickness:1px}
@media (hover:hover){.cal-grille button:not(:disabled):not([aria-selected=true]):hover{background:var(--f-accent)}}
.cal-grille button:focus-visible{outline:3px solid #000;outline-offset:1px}
.cal-pied{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;font-size:.78rem;color:var(--f-soft)}
.cal-pied button{border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:.3rem}

/* Résumé des erreurs */
.resume-err{display:none;border-radius:var(--f-radius);background:var(--f-err-bg);padding:1rem 1.1rem;font-size:.9rem}
.resume-err.vis{display:block;animation:glisse .4s var(--ease)}
.resume-err ul{margin-top:.4rem;display:grid;gap:.2rem;list-style:disc;padding-left:1.2rem}
.resume-err a{font-weight:600}

/* Bouton d'envoi : plat, remplissage de progression pendant l'envoi */
.envoyer{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:3.6rem;padding:.4rem .5rem .4rem 1.5rem;border-radius:var(--f-pill);border:0;background:#000;color:#fff;font-weight:700;font-size:1rem;
  transition:transform .45s var(--ease)}
.envoyer .rond{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--f-accent);color:#000;display:grid;place-items:center;transition:transform .5s var(--ease)}
.envoyer .rond svg{width:1rem}
.envoyer::before{content:"";position:absolute;inset:0;z-index:-1;background:#3a3a3a;transform:scaleX(0);transform-origin:left}
@media (hover:hover){.envoyer:hover .rond{transform:translateX(3px) rotate(-45deg)}}
.envoyer:active{transform:scale(.98)}
.envoyer.envoi{pointer-events:none}
.envoyer.envoi::before{animation:progres 1.9s var(--ease-in-out) forwards}
.envoyer.envoi .rond svg{animation:tourne .9s linear infinite}
@keyframes progres{to{transform:scaleX(1)}}
@keyframes tourne{to{transform:rotate(360deg)}}
.pied-form{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.pied-form .note{font-size:.82rem;color:var(--f-soft);max-width:28rem}

/* Confirmation : l'icône se rassemble */
.merci{display:none;text-align:left;gap:1.2rem;align-content:start}
.formulaire.envoye > *:not(.merci){display:none}
.formulaire.envoye .merci{display:grid;animation:glisse .6s var(--ease)}
.merci .ico-merci{width:clamp(5rem,9vw,7rem);height:auto;overflow:visible}
.merci .ico-merci path{transition:transform 1.1s var(--ease-out),opacity .6s var(--ease)}
.merci h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.merci p{color:var(--f-soft);max-width:34rem}
.merci .recap{display:flex;flex-wrap:wrap;gap:.5rem}
.merci .recap span{font-size:.82rem;font-weight:600;background:var(--f-bg-2);border-radius:999px;padding:.35rem .75rem}
.merci .recommencer{justify-self:start;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:4px;padding:.4rem 0}

/* ===== Site CIF Le Transit : univers de C (en-tête, jaune, héros), composants sobres de A ===== */
:root{
  --entete-h:5.25rem;
  /* logo : grand dans sa pastille blanche en haut de page, taille normale dans l'en-tête blanc au défilement (ratio du logo 0,542) */
  --logo-w:clamp(7.6rem,11vw,10rem); --logo-ws:clamp(6.2rem,8.6vw,7.4rem); --pastille-px:1.2rem; --pastille-py:.9rem 1rem;
  --pastille-bas:calc(var(--logo-w) * .542 + 1.9rem);
  --coupe:clamp(2rem,4.2vw,4.5rem);
  --sec-py:clamp(3rem,4.4vw,4.6rem);
  --rayon:28px;
  --titre:"DM Sans",system-ui,sans-serif;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html{scroll-padding-top:6rem}
body{font-size:clamp(1.0625rem,1rem + .22vw,1.1875rem);background:#fff}
html.menu-ouvert{overflow:hidden}
main:focus{outline:0}

.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}

/* ---------- Typographie : capitales serrées de l'affiche ---------- */
.titre-geant,.titre-sec{font-family:var(--titre);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.97;text-wrap:balance;font-optical-sizing:auto}
.titre-geant{font-size:clamp(2.9rem,9.1vw,10.25rem);line-height:.96}
.titre-sec{font-size:clamp(2.4rem,5.2vw,5.4rem)}
.legende{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.chapeau{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);max-width:34ch;color:var(--encre-douce);margin-top:1.1rem}

/* ---------- Boutons plats (fond uni ou contour, remplissage qui glisse au survol) ---------- */
.btn{--bg:#000;--fg:#fff;--bg-h:#3a3a3a;--fg-h:#fff;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.9rem;min-height:3.5rem;padding:.4rem .45rem .4rem 1.45rem;border-radius:999px;border:0;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:color .45s var(--ease),transform .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-h);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:not(:has(.btn-rond)){padding-right:1.45rem}
.btn-rond{flex:none;width:2.65rem;height:2.65rem;border-radius:50%;background:var(--jaune);color:#000;display:grid;place-items:center;transition:transform .55s var(--ease)}
.btn-rond svg{width:.95rem;height:.95rem}
.btn-noir{--bg:#000;--fg:#fff;--bg-h:#fff;--fg-h:#000}
.btn-contour{--bg:transparent;--fg:#000;--bg-h:#000;--fg-h:#fff;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-petit{min-height:2.9rem;font-size:.92rem;padding-left:1.15rem;gap:.7rem}
.btn-petit:not(:has(.btn-rond)){padding-right:1.15rem}
.btn-petit .btn-rond{width:2.15rem;height:2.15rem}
@media (hover:hover){
  .btn:hover{color:var(--fg-h)}
  .btn:hover::before{transform:none}
  .btn:hover .btn-rond{transform:rotate(-45deg)}
  .btn-contour:hover{box-shadow:inset 0 0 0 1.5px #000}
}
.btn:active{transform:scale(.97)}

.lien-fort{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;font-size:1rem;padding:.35rem 0;position:relative}
.lien-fort::after{content:"";position:absolute;left:0;right:1.9rem;bottom:0;height:1.5px;background:currentColor;transform-origin:left;transition:transform .55s var(--ease)}
.lien-fort::before{content:"";order:2;width:1.3rem;height:1.3rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .55s var(--ease)}
@media (hover:hover){.lien-fort:hover::after{transform:scaleX(0);transform-origin:right}.lien-fort:hover::before{transform:translateX(5px)}}

/* ---------- Coupes franches entre aplats (coins à 45°, comme les bouts de branches) ---------- */
.coupe-haut{position:relative;z-index:1;margin-top:calc(var(--coupe) * -1);padding-top:calc(var(--sec-py) + var(--coupe) * .5);
  clip-path:polygon(0 var(--coupe),var(--coupe) 0,100% 0,100% 100%,0 100%)}
.coupe-haut.coupe-droite{clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),100% 100%,0 100%)}

/* ---------- En-tête ---------- */
.entete{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--entete-h);display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem);
  padding-left:var(--marge);padding-right:calc(clamp(.6rem,1.4vw,1.25rem) + 14.8rem);background:transparent;
  transition:transform .6s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.entete.solide{background:#fff;box-shadow:0 1px 0 var(--ligne)}
.entete.cache{transform:translateY(-102%)}
.entete-logo{flex:none;display:block;position:relative;isolation:isolate;align-self:flex-start;box-sizing:content-box;width:var(--logo-w);
  padding:.9rem var(--pastille-px) 1rem;margin-left:calc(var(--pastille-px) * -1);margin-right:calc(var(--pastille-px) * -1);
  transition:width .5s var(--ease),padding .5s var(--ease)}
.entete-logo::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2rem),calc(100% - 1.2rem) 100%,0 100%);transition:opacity .35s var(--ease)}
.entete.solide .entete-logo{width:var(--logo-ws);padding-block:calc((var(--entete-h) - var(--logo-ws) * .542) / 2)}
.entete.solide .entete-logo::before{opacity:0}
.entete-logo .logo,.menu-logo .logo,.pied-logo .logo{width:100%;height:auto;display:block}
.logo .j,.logo .b,.logo .t{transition:fill .4s var(--ease)}
.entete .logo .j{fill:var(--jaune)}.entete .logo .b{fill:var(--bleu)}.entete .logo .t{fill:#000}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem)}
.nav a,.nav-services{white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:.5rem 0;font-size:.84rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:#000}
.nav-services svg{width:.8rem;height:.8rem;transition:transform .5s var(--ease)}
.nav-services[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav a::after,.nav-services::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:#000;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
@media (hover:hover){.nav a:hover::after,.nav-services:hover::after{transform:scaleX(1);transform-origin:left}}
.entete-tel{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;transition:opacity .3s}
.entete-tel svg{width:1.1rem;height:1.1rem;transition:transform .5s var(--ease)}
@media (hover:hover){.entete-tel:hover svg{transform:rotate(-14deg)}}
.entete-menu{display:none;align-items:center;gap:.6rem;background:#000;color:#fff;border:0;border-radius:999px;padding:.7rem 1.1rem;font-weight:800;font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;transition:transform .4s var(--ease),background-color .3s}
.entete-menu:active{transform:scale(.96)}
.burger{display:grid;gap:5px;width:1.1rem}
.burger i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
@media (hover:hover){.entete-menu:hover .burger i:first-child{transform:translateX(3px)}.entete-menu:hover .burger i:last-child{transform:translateX(-3px)}}

@media (max-width:1380px){.entete-tel{display:none}}
@media (max-width:1180px){
  .nav,.entete-tel{display:none}
  .entete-menu{display:inline-flex;margin-left:auto}
}
@media (max-width:760px){
  :root{--entete-h:4.4rem;--logo-w:6.8rem;--logo-ws:5.6rem;--pastille-px:.8rem;--pastille-bas:calc(var(--logo-w) * .542 + 1.3rem)}
  .entete-logo{padding:.6rem var(--pastille-px) .7rem;margin-left:-.5rem}
  .menu-fermer > span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .entete{padding-right:calc(.6rem + 9.6rem)}
  .entete-don,.entete-menu{display:none}
}

/* ---------- Menu plein écran jaune ---------- */
.menu{position:fixed;inset:0;z-index:80;background:var(--jaune);color:#000;display:grid;grid-template-rows:auto 1fr auto;overflow-y:auto;overscroll-behavior:contain;
  clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .75s var(--ease-in-out),visibility 0s .75s;visibility:hidden}
.menu.ouvert{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);visibility:visible;transition:clip-path .75s var(--ease-in-out),visibility 0s}
.menu[hidden]{display:none}
.menu-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--entete-h);padding-left:var(--marge);padding-right:calc(clamp(.6rem,1.4vw,1.25rem) + 14.8rem)}
.menu-logo{display:block;width:clamp(6.2rem,8.6vw,7.4rem)}
.menu .logo .j,.menu .logo .b,.menu .logo .t{fill:#000}
.menu-fermer{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;font-weight:800;font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;padding:.6rem 0}
.menu-x{position:relative;width:2.6rem;height:2.6rem;border-radius:50%;background:#000;transition:transform .5s var(--ease)}
.menu-x i{position:absolute;left:30%;right:30%;top:50%;height:1.5px;background:#fff}
.menu-x i:first-child{transform:rotate(45deg)}.menu-x i:last-child{transform:rotate(-45deg)}
@media (hover:hover){.menu-fermer:hover .menu-x{transform:rotate(90deg)}}
.menu-corps{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:2rem;padding:clamp(1rem,3vw,3rem) var(--marge)}
.menu-services{display:grid;gap:clamp(.2rem,.8vw,.6rem);margin-top:1rem}
.menu-services a{display:grid;text-decoration:none;padding:.15rem 0}
.ms-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.98;font-size:clamp(2.1rem,4.8vw,5rem);transition:transform .6s var(--ease)}
.ms-desc{font-size:.98rem;color:#3a3a3a;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease)}
.menu-services a:focus-visible .ms-desc,.menu-services a.actif .ms-desc{max-height:3rem;opacity:1}
.menu-services a.actif .ms-titre{transform:translateX(clamp(.6rem,1.4vw,1.4rem))}
.menu-services a:focus-visible{outline-offset:6px}
.menu-icone{justify-self:center;width:min(100%,26rem);aspect-ratio:1}
.menu-icone svg{width:100%;height:100%;overflow:visible;transition:transform 1s var(--ease-out)}
.menu-icone path{transition:transform .9s var(--ease-out)}
.menu-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:1.4rem var(--marge) calc(1.6rem + env(safe-area-inset-bottom));border-top:1.5px solid #000;margin-inline:var(--marge);padding-inline:0}
.menu-autres{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.menu-autres a{font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.88rem;text-decoration:none;background:linear-gradient(#000,#000) 0 100%/0 2px no-repeat;padding-bottom:.2rem;transition:background-size .5s var(--ease)}
@media (hover:hover){.menu-autres a:hover{background-size:100% 2px}}
.menu-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.menu-services li,.menu-pied{opacity:1;transform:none}
.menu:not(.ouvert) .menu-services li{opacity:0;transform:translateY(1.5rem)}
.menu-services li{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.menu.ouvert .menu-services li:nth-child(1){transition-delay:.18s}.menu.ouvert .menu-services li:nth-child(2){transition-delay:.23s}
.menu.ouvert .menu-services li:nth-child(3){transition-delay:.28s}.menu.ouvert .menu-services li:nth-child(4){transition-delay:.33s}
.menu.ouvert .menu-services li:nth-child(5){transition-delay:.38s}
@media (max-width:860px){
  .menu-corps{grid-template-columns:1fr;align-content:start}
  .menu-icone{display:none}
  .menu-tete{padding-right:calc(.6rem + 10.6rem)}
  .menu-services a.actif .ms-titre{transform:none}
  .ms-desc{max-height:none;opacity:1;font-size:.9rem;margin-top:.15rem}
  .menu-services{gap:.9rem}
}

/* ---------- Dock mobile ---------- */
.dock{display:none}
@media (max-width:760px){
  .dock{position:fixed;z-index:70;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:.3rem;padding:.35rem;background:#000;border-radius:999px;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
  .dock-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:3.1rem;border:0;border-radius:999px;background:transparent;color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;transition:background-color .3s var(--ease),transform .3s var(--ease)}
  .dock-btn svg{width:1.1rem;height:1.1rem}
  .dock-btn:active{transform:scale(.96);background:#3a3a3a}
  .dock-principal{background:var(--jaune);color:#000}
  .dock-principal:active{background:#fff}
  body{padding-bottom:5rem}
}

/* ---------- 1. Héros ---------- */
.heros{position:relative;background:var(--jaune);min-height:max(40rem,100svh);max-height:none;display:flex;flex-direction:column;overflow:hidden}
.heros-grille{position:absolute;inset:0;padding:calc(var(--entete-h) + 1rem) var(--marge) clamp(1.2rem,3vw,2.6rem)}
.heros-grille .ico{position:absolute;left:0;top:0;will-change:transform;transform-origin:50% 50%}
.heros-grille .ico svg{width:100%;height:100%;overflow:visible}
.heros-texte{position:relative;z-index:2;padding:calc(var(--pastille-bas) + clamp(2.2rem,6vh,4.5rem)) var(--marge) 0;max-width:calc(var(--max));width:100%;margin-inline:auto}
.heros-texte .titre-geant{max-width:12ch}
.heros-sous{margin-top:clamp(1.1rem,2.4vw,2rem);font-size:clamp(1.15rem,1rem + .75vw,1.65rem);font-weight:500;line-height:1.3;max-width:26ch;letter-spacing:-.01em}
.heros-actions{width:fit-content;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:clamp(1.4rem,3vw,2.4rem)}
.heros-actions .lien-fort{font-size:1.1rem}
@media (max-width:600px){
  .heros{min-height:max(38rem,100svh)}
  .heros-grille{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}


/* Pied de page et dialogue d'inscription (repris de A) */
:root{--gris-regle:#cfcfc7}
.pied{position:relative;overflow:clip;background:#fff;border-top:1px solid var(--gris-regle);padding:clamp(3rem,6vw,5rem) var(--marge) 0}
.pied-haut,.pied-bas{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.pied-haut{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2rem}
.pied-logo{width:11rem;display:block;color:#000}
.pied-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pied-nav li{padding:.3rem 0}
.pied-bas{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;margin-top:3rem;padding:1.4rem 0 clamp(6rem,11vw,10rem);border-top:1px solid var(--gris-regle);font-size:.82rem;color:var(--encre-douce)}
.pied-etoile{position:absolute;right:-4vw;bottom:calc(-1 * clamp(10rem,18vw,20rem));width:clamp(20rem,38vw,40rem);aspect-ratio:1;opacity:1}
.pied-etoile svg{width:100%;height:100%}
@media (max-width:760px){.pied-haut{grid-template-columns:1fr}.pied-nav{grid-template-columns:1fr 1fr}}
.inscription{width:min(40rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);border:0;border-radius:28px;padding:clamp(1.4rem,3vw,2.6rem);box-shadow:0 50px 100px -40px rgba(0,0,0,.45)}
.inscription::backdrop{background:rgba(250,239,89,.55);backdrop-filter:blur(6px)}
.inscription[open]{animation:insc .6s var(--ease)}
@keyframes insc{from{opacity:0;transform:translateY(20px) scale(.98)}}
.insc-fermer-f{position:absolute;top:1rem;right:1rem;margin:0}
.insc-fermer{width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:var(--papier);display:grid;place-items:center;transition:transform .5s var(--ease),background-color .3s}
@media (hover:hover){.insc-fermer:hover{transform:rotate(90deg);background:var(--jaune)}}
.insc-titre{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;margin:.4rem 3rem 1.6rem 0;line-height:1.1}
/* Croix du dialogue d'inscription (son style vivait dans le bloc menu de A) */
.insc-fermer span{width:1.2rem;height:1.2rem;position:relative;display:block}
.insc-fermer span::before,.insc-fermer span::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#000;transform:rotate(45deg)}
.insc-fermer span::after{transform:rotate(-45deg)}
/* Composants validés sur l'accueil (options de la planche ronde 4) */
/* ===== Base des démos : blanc dominant, typographie de G ===== */
body{background:#fff;margin:0}
.d-sec{position:relative;padding:clamp(3.5rem,7vw,7rem) var(--marge)}
.d-in{max-width:var(--max);margin:0 auto}
.d-eti{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.d-geant{font-weight:800;text-transform:uppercase;letter-spacing:-.052em;line-height:.9;font-size:clamp(2.6rem,7.4vw,9rem);text-wrap:balance}
.d-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(2rem,4.6vw,5rem);text-wrap:balance}
.d-lead{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);line-height:1.4;max-width:34rem;font-weight:500}
.d-texte{color:var(--encre-douce);max-width:36rem}
.d-faux-haut,.d-faux-bas{height:9rem;display:grid;place-items:center;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9a9a92;background:repeating-linear-gradient(-45deg,#f6f6f2 0 12px,#fff 12px 24px)}

/* --- H3 --- */
.h3-wrap{position:relative}
.h3-fenetre{position:absolute;z-index:4;right:clamp(1rem,5vw,6rem);top:calc(100svh - min(21vw,30svh));width:min(38vw,60svh);aspect-ratio:1;pointer-events:none}
.h3-fenetre svg{width:100%;height:100%}
.h3-suite{min-height:60svh}
.h3-suite .d-in{max-width:var(--max);padding-right:min(42vw,62svh)}
@media (max-width:900px){.h3-fenetre{top:calc(100svh - 7rem);width:12rem;right:1rem}.h3-suite .d-in{padding-right:0;padding-top:5rem}}

/* --- J3 --- */
/* J3 · Photo et onglets : l'icône posée sur une photo pleine largeur, la carte mord sur la photo */
.j3{position:relative;background:#fff;padding:clamp(3.5rem,7vw,7rem) 0 clamp(4rem,8vw,7.5rem)}
.j3-in{max-width:calc(var(--max) + 2 * var(--marge));margin:0 auto;padding:0 var(--marge)}
.j3-tete{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:1.4rem clamp(2rem,4vw,4rem);align-items:end;margin-bottom:clamp(1.8rem,3.4vw,3rem)}
.j3-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(2.4rem,5vw,5.2rem)}
.j3-onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.j3-o{position:relative;isolation:isolate;min-height:4.6rem;display:flex;align-items:flex-end;text-align:left;text-wrap:balance;border:0;padding:.9rem 1.6rem .9rem 1rem;background:var(--papier);color:#000;font-weight:700;font-size:clamp(.92rem,.85rem + .2vw,1.05rem);line-height:1.2;
  clip-path:polygon(0 0,calc(100% - 1.1rem) 0,100% 1.1rem,100% 100%,0 100%)}
.j3-o::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--jaune);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.j3-o[aria-selected="true"]::before{transform:none}
@media (hover:hover){.j3-o:hover::before{transform:scaleY(.12)}.j3-o[aria-selected="true"]:hover::before{transform:none}}
.j3-o:focus-visible{outline-offset:-4px}

/* la scène : photo pleine largeur + icône en couleur posée dessus */
.j3-scene{position:relative;height:clamp(22rem,44vw,42rem);overflow:hidden;background:var(--papier)}
.j3-photos{position:absolute;inset:-5% 0}
.j3-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 2.2s var(--ease-out)}
.j3-photos img.on{opacity:1;transform:none}
.j3-icone{position:absolute;right:max(var(--marge),calc((100% - var(--max)) / 2));top:50%;width:clamp(8.5rem,24vw,24rem);aspect-ratio:1;margin-top:calc(clamp(8.5rem,24vw,24rem) / -2)}
.j3-icone svg{width:100%;height:100%;overflow:visible;transform:rotate(var(--r,0deg));transition:transform 1.6s var(--ease)}

/* la carte blanche mord sur le bas de la photo */
.j3-carte{position:relative;z-index:1;display:grid;width:min(100% + clamp(1.4rem,3vw,3rem),60rem);margin:calc(clamp(4rem,9vw,9rem) * -1) 0 0 calc(clamp(1.4rem,3vw,3rem) * -1);padding:clamp(1.4rem,3vw,3rem) clamp(1.4rem,3vw,3rem) 0;background:#fff;
  clip-path:polygon(0 0,calc(100% - 2.6rem) 0,100% 2.6rem,100% 100%,0 100%)}
.j3-p{grid-area:1/1}
.j3-p[hidden]{display:none}
.j3-p.entre > *{animation:j3-entre .8s var(--ease-out) both}
.j3-p.entre > ul{animation-delay:.08s}
@keyframes j3-entre{from{opacity:0;transform:translateY(12px)}}
.j3-lead{font-size:clamp(1.2rem,1rem + .8vw,1.9rem);line-height:1.25;letter-spacing:-.02em;font-weight:600;max-width:34rem}
.j3-liens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.2rem,2.4vw,2.4rem);margin-top:clamp(1.2rem,2.4vw,2rem)}
.j3-liens li{border-top:1.5px solid #000}
.j3-liens a{position:relative;display:grid;gap:.12rem;padding:.9rem 2.4rem .9rem 0;text-decoration:none;font-weight:800;font-size:1.02rem;line-height:1.2}
.j3-liens a span{font-weight:400;font-size:.86rem;color:var(--encre-douce)}
.j3-liens a::after{content:"";position:absolute;right:.2rem;top:50%;width:.95rem;height:.95rem;margin-top:-.47rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%);transition:transform .5s var(--ease)}
.j3-liens a::before{content:"";position:absolute;left:0;right:0;top:-1.5px;height:4px;background:var(--jaune);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
@media (hover:hover){.j3-liens a:hover::after{transform:translateX(4px)}.j3-liens a:hover::before{transform:none}}

@media (max-width:980px){
  .j3-tete{grid-template-columns:1fr}
}
@media (max-width:640px){
  .j3-onglets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .j3-o{min-height:4.2rem;font-size:.9rem}
  .j3-scene{height:clamp(19rem,88vw,24rem)}
  .j3-icone{top:auto;bottom:4.6rem;margin-top:0;right:var(--marge)}
  .j3-carte{width:auto;margin:-3rem calc(var(--marge) * -1) 0;padding:1.4rem var(--marge) 0}
  .j3-liens{grid-template-columns:1fr}
}

/* --- S2 --- */
/* S2 · La liste et l'icône recadrée : l'icône géante, entière, coupée par le bord, tourne au survol */
.s2{position:relative;background:#fff;overflow:clip;padding:clamp(3.5rem,7vw,7rem) var(--marge) clamp(4rem,7vw,7rem)}
.s2-icone{position:absolute;z-index:0;top:50%;right:calc(-1 * clamp(8rem,17vw,22rem));width:clamp(20rem,50vw,58rem);aspect-ratio:1;margin-top:calc(clamp(20rem,50vw,58rem) / -2);pointer-events:none}
.s2-icone svg{width:100%;height:100%;overflow:visible;transform:rotate(var(--r,0deg));transition:transform 1.5s var(--ease)}
.s2-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.s2-tete{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.s2-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(2.4rem,5.4vw,5.6rem);text-wrap:balance}
.s2-liste{width:min(100%,58%);border-top:1.5px solid #000}
.s2-liste li{border-bottom:1.5px solid #000}
.s2-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem) 3rem;align-items:center;gap:.6rem clamp(1.2rem,2.4vw,2.4rem);padding:clamp(1.1rem,1.9vw,1.7rem) 0;text-decoration:none;color:#000}
.s2-nom{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.98;font-size:clamp(1.6rem,3vw,3.4rem);text-wrap:balance}
.s2-nom span{background:linear-gradient(var(--jaune),var(--jaune)) 0 90%/0% .5em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s var(--ease)}
.s2-desc{font-size:.98rem;line-height:1.45;color:var(--encre-douce)}
.s2-l i{width:3rem;height:3rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px #000;position:relative;transition:background-color .4s var(--ease),transform .6s var(--ease)}
.s2-l i::after{content:"";position:absolute;inset:0;margin:auto;width:1rem;height:1rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%);transition:background-color .4s}
.s2-l.on .s2-nom span{background-size:100% .5em}
@media (hover:hover){
  .s2-l:hover i{background:#000;transform:rotate(-45deg)}
  .s2-l:hover i::after{background:var(--jaune)}
}
.s2-l:focus-visible{outline-offset:4px}
.s2-plus{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.s2-plus a{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.15rem .62rem .9rem;border-radius:999px;background:var(--papier);text-decoration:none;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.s2-plus a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--jaune);transform:translateY(101%);transition:transform .5s var(--ease)}
.s2-plus a::after{content:"";order:-1;width:.6rem;height:.6rem;background:var(--bleu);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .5s var(--ease),background-color .4s}
@media (hover:hover){.s2-plus a:hover::before{transform:none}.s2-plus a:hover::after{background:#000;transform:rotate(45deg)}}

@media (max-width:1100px){
  .s2-l{grid-template-columns:minmax(0,1fr) 3rem}
  .s2-desc{grid-column:1;grid-row:2}
  .s2-l i{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:800px){
  .s2-icone{top:clamp(1rem,4vw,2rem);margin-top:0;width:clamp(15rem,66vw,30rem);right:calc(-1 * clamp(5rem,24vw,11rem))}
  .s2-tete{min-height:calc(clamp(15rem,66vw,30rem) - clamp(1.5rem,6vw,4rem));display:flex;align-items:flex-end;padding-right:42%}
  .s2-liste{width:100%}
  .s2-l{gap:.45rem 1rem}
  .s2-l i{width:2.6rem;height:2.6rem}
}

/* --- L4 --- */
.l4-sec{padding:clamp(4rem,8vw,7rem) var(--marge)}
.l4-bande{position:relative;margin:0;height:clamp(18rem,46vw,34rem)}
.l4-bande img{width:100%;height:100%;object-fit:cover}
.l4-ico{position:absolute;right:clamp(1.5rem,8vw,9rem);top:calc(-1 * clamp(5rem,10vw,9rem));width:clamp(10rem,22vw,20rem);aspect-ratio:1}
.l4-ico svg{width:100%;height:100%}

/* --- A4 --- */
/* A4 · Ruban de dates : on fait glisser les activités, le ruban d'octobre à janvier suit */
.a4{position:relative;background:#fff;padding:clamp(3.5rem,7vw,7rem) 0 clamp(4rem,7vw,7rem);overflow-x:clip}
.a4-in{max-width:calc(var(--max) + 2 * var(--marge));margin:0 auto;padding:0 var(--marge)}
.a4-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(1.8rem,3.4vw,3rem)}
.a4-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(2.4rem,5.4vw,5.6rem);text-wrap:balance}
.a4-nav{display:flex;align-items:center;gap:1.6rem}
.a4-fleches{display:flex;gap:.5rem}
.a4-fleches button{width:3.1rem;height:3.1rem;border-radius:50%;border:0;background:#000;color:var(--jaune);display:grid;place-items:center;transition:background-color .35s var(--ease),color .35s,opacity .3s}
.a4-fleches button svg{width:1rem}
.a4-fleches button:disabled{opacity:.25;cursor:default}
@media (hover:hover){.a4-fleches button:not(:disabled):hover{background:var(--jaune);color:#000}}

/* le ruban */
.a4-ruban{position:relative;margin-bottom:clamp(1.6rem,3vw,2.6rem);user-select:none}
.a4-etiq{position:relative;height:2.3rem}
.a4-m{position:absolute;left:var(--x);bottom:.2rem;transform:translateX(-50%);border:0;background:none;padding:.25rem .55rem;border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--encre-douce);transition:background-color .45s var(--ease),color .3s}
.a4-m.on{background:var(--jaune);color:#000}
.a4-m-bande.on{background:var(--bleu);color:#000}
@media (hover:hover){.a4-m:not(.on):hover{color:#000;background:var(--papier)}}
.a4-ligne{position:relative;height:1.6rem}
.a4-ligne::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:#000}
.a4-bande{position:absolute;left:0;right:0;top:50%;height:7px;margin-top:-3.5px;background:var(--bleu-50);transform-origin:left;transition:background-color .5s var(--ease)}
.a4-ruban.samedi .a4-bande{background:var(--bleu)}
.a4-ligne i{position:absolute;left:var(--x);top:15%;height:70%;width:1.5px;margin-left:-.75px;background:#000}
.a4-ligne b{position:absolute;left:var(--x);top:50%;width:.95rem;height:.95rem;margin:-.475rem 0 0 -.475rem;background:#000;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .6s var(--ease),background-color .4s}
.a4-ligne b.on{background:var(--jaune);transform:scale(1.7);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.a4-ligne b.on::after{content:""}
.a4-mois{position:relative;height:1.4rem}
.a4-mois li{position:absolute;left:var(--x);top:.2rem;padding-left:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}

/* le rail : aligné sur la colonne à gauche, il file jusqu'au bord à droite */
.a4-rail{--g:max(var(--marge),calc((100% - var(--max)) / 2));display:flex;gap:clamp(1rem,2vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);padding:0 var(--marge) .6rem var(--g);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.a4-rail::-webkit-scrollbar{display:none}
.a4-rail.glisse{cursor:grabbing;scroll-snap-type:none}
.a4-rail.glisse *{pointer-events:none}
.a4-rail{--cw:clamp(17.5rem,40vw,38rem)}
/* espace de fin : la dernière activité peut, elle aussi, s'aligner sur la colonne */
.a4-rail::after{content:"";flex:0 0 max(0px,calc(100% - var(--g) - var(--cw) - var(--marge)))}
.a4-c{flex:0 0 var(--cw);scroll-snap-align:start;display:grid;gap:.7rem;justify-items:start;align-content:start}
.a4-photo{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--papier);margin-bottom:.5rem;clip-path:polygon(0 0,calc(100% - 2.6rem) 0,100% 2.6rem,100% 100%,0 100%)}
.a4-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);pointer-events:none}
@media (hover:hover){.a4-c:hover .a4-photo img{transform:scale(1.04)}}
.a4-date{position:absolute;left:0;bottom:0;display:flex;align-items:flex-start;gap:.35rem;padding:.8rem 1.6rem .7rem 1rem;background:var(--jaune);line-height:.82;clip-path:polygon(0 0,calc(100% - 1.3rem) 0,100% 1.3rem,100% 100%,0 100%)}
.a4-date b{font-weight:800;letter-spacing:-.06em;font-size:clamp(2.8rem,4.4vw,4.4rem)}
.a4-date span{font-weight:800;text-transform:uppercase;font-size:clamp(.85rem,1vw,1.05rem);padding-top:.35em}
.a4-mot{background:var(--bleu)}
.a4-mot b{font-size:clamp(2.2rem,3.4vw,3.4rem)}
.a4-mot span{max-width:5.5rem;line-height:1.05;padding-top:.2em}
.a4-pub{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.a4-h{font-size:clamp(1.25rem,1rem + .8vw,1.9rem);letter-spacing:-.025em;line-height:1.1;font-weight:800;max-width:32rem;text-wrap:balance}
.a4-det{font-size:.96rem;line-height:1.45;color:var(--encre-douce);max-width:32rem}
.a4-insc{display:flex;align-items:center;gap:.8rem;margin-top:.3rem}
.a4-ok{font-size:.84rem;line-height:1.3;max-width:14rem;font-weight:600;opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.a4-ok.vis{opacity:1;transform:none}
.a4-note{margin-top:clamp(1.6rem,3vw,2.4rem);font-size:.98rem}

@media (max-width:640px){
  .a4-nav{width:100%;justify-content:space-between}
  .a4-rail{--cw:84%}
  .a4-m{font-size:.7rem;padding:.25rem .45rem}
}

/* --- C1 --- */
/* C1 · Fenêtre 1992 : la photo d'un cercle de parents vue à travers l'icône géante, recadrée au bord */
.c1{position:relative;overflow-x:clip;padding:clamp(4rem,8vw,8.5rem) var(--marge) clamp(4rem,7vw,7rem);background:#fff}
.c1-in{max-width:var(--max);margin:0 auto}
.c1-in:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,5rem);align-items:center}
.c1-scene{position:relative;aspect-ratio:1;width:calc(100% + var(--marge) + 22%);margin-left:calc(-1 * var(--marge) - 26%)}
.c1-fenetre,.c1-fenetre svg{width:100%;height:100%}
.c1-fenetre svg{overflow:visible}
.c1-texte{position:relative;z-index:1;max-width:40rem}
.c1-eti{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.c1-an{display:flex;overflow:clip;font-weight:800;letter-spacing:-.07em;line-height:.96;font-size:clamp(6.2rem,15vw,15.5rem);margin:.2rem 0 clamp(1.2rem,2vw,2rem) -.05em;padding-bottom:.02em}
.c1-an span{display:inline-block}
.c1-lead{font-size:clamp(1.15rem,.9rem + .9vw,1.7rem);line-height:1.3;letter-spacing:-.015em;font-weight:600;max-width:36rem;text-wrap:pretty}
.c1-jalons{margin:clamp(1.6rem,3vw,2.6rem) 0 1.4rem;display:grid}
.c1-jalons li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid #000}
.c1-jalons li:last-child{border-bottom:1px solid #000}
.c1-jalons b{font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.c1-jalons span{font-size:1rem;line-height:1.35;color:var(--encre-douce)}
.c1-bas{margin-top:clamp(3.5rem,7vw,7rem)}
.c1-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1rem,2.4vw,2.6rem);margin:0}
.c1-chiffre{display:flex;flex-direction:column;gap:.9rem;border-top:1.5px solid #000;padding-top:1.1rem}
.c1-chiffre dd{order:-1;margin:0;align-self:flex-start;font-weight:800;letter-spacing:-.06em;line-height:.96;font-size:clamp(3.4rem,6.6vw,7.4rem);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 .08em 0 .02em;
  background:linear-gradient(var(--jaune),var(--jaune)) 0 88%/100% 34% no-repeat}
.c1-chiffre dt{font-size:.98rem;line-height:1.38;max-width:16rem;color:var(--encre-douce)}
.c1-source{margin-top:2rem;font-size:.84rem;color:var(--encre-douce)}
.c1-anim .c1-chiffre dd{background-size:0% 34%;transition:background-size 1.4s var(--ease-out) .5s}
.c1-anim .c1-chiffre dd.c1-vu{background-size:100% 34%}
@media (max-width:860px){
  .c1-in:first-child{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .c1-scene{width:min(118vw,40rem);margin:0 0 0 -20%}
  .c1-chiffres{grid-template-columns:1fr 1fr;gap:2.2rem 1.2rem}
  .c1-chiffre dd{font-size:clamp(2.7rem,12.5vw,4.6rem)}
}

/* --- E1 --- */
/* E1 · La scène : un grand aplat jaune avec l'icône blanche recadrée (l'affiche du guide), le portrait choisi debout devant */
.e1{position:relative;background:#fff;overflow-x:clip;padding:clamp(4rem,8vw,8rem) var(--marge)}
.e1-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.e1-scene{position:relative;aspect-ratio:5/6;max-height:46rem;width:100%;justify-self:start}
.e1-fond{--cc:clamp(2.4rem,4vw,4.4rem);position:absolute;inset:16% 0 0 0;background:var(--jaune);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cc),100% 100%,0 100%)}
.e1-icone{position:absolute;width:96%;aspect-ratio:1;left:2%;top:-12%;transition:transform 1.4s var(--ease)}
.e1-icone svg{width:100%;height:100%}
.e1-pose{position:absolute;left:50%;bottom:-4px;height:96%;width:auto;max-width:none;transform:translateX(-50%);opacity:0;filter:url(#cep-net);
  transition:opacity .7s var(--ease),transform 1s var(--ease);pointer-events:none;user-select:none}
.e1-pose.e1-on{opacity:1}
img.e1-pose{transform:translateX(-50%) translateY(1.2%)}
img.e1-pose.e1-on{transform:translateX(-50%)}
.e1-lettres{height:auto;bottom:8%;font-weight:800;letter-spacing:-.06em;line-height:.96;font-size:clamp(7rem,15vw,15rem);color:#000;filter:none}
.e1-cote{max-width:36rem}
.e1-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.96;font-size:clamp(3rem,6.6vw,7.4rem)}
.e1-aide{margin-top:1.2rem;font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);line-height:1.45;color:var(--encre-douce);max-width:26rem}
.e1-liste{margin-top:clamp(1.8rem,3vw,2.8rem);border-top:1px solid #000}
.e1-liste li{border-bottom:1px solid #000}
.e1-btn{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;border:0;background:none;text-align:left;padding:.95rem 0;isolation:isolate;cursor:pointer;color:#000}
.e1-btn::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--jaune);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.e1-nom{font-weight:700;font-size:clamp(1.1rem,.95rem + .6vw,1.55rem);letter-spacing:-.02em;line-height:1.2;transition:transform .6s var(--ease)}
.e1-role{font-size:.9rem;color:var(--encre-douce);text-align:right;flex:none;transition:transform .6s var(--ease)}
.e1-btn[aria-pressed="true"]::before{transform:none}
.e1-btn[aria-pressed="true"] .e1-nom{transform:translateX(.8rem)}
.e1-btn[aria-pressed="true"] .e1-role{transform:translateX(-.8rem);color:#000}
@media (hover:hover){.e1-btn:hover .e1-nom{transform:translateX(.8rem)}}
@media (max-width:860px){
  .e1-in{grid-template-columns:minmax(0,1fr)}
  .e1-scene{order:2;max-height:none;width:min(100%,30rem);margin:0 auto}
  .e1-cote{display:contents}
  .e1-titre{order:0}.e1-aide{order:1;margin-top:-1rem}.e1-liste{order:3;margin-top:0}
  .e1-role{font-size:.84rem}
}

/* --- P2 --- */
/* P2 · Photo pleine : une grande photo, l'icône posée dessus (guide), les promesses dans un panneau blanc lisible */
.p2{position:relative;background:#fff;overflow-x:clip;padding-bottom:clamp(4rem,8vw,8rem)}
.p2-scene{position:relative}
.p2-cadre{position:relative}
.p2-photo{position:relative;margin:0;aspect-ratio:16/8;min-height:26rem;overflow:hidden;background:#3a3a3a}
.p2-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.p2-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,0) 62%)}
.p2-icone{position:absolute;z-index:1;top:clamp(1.5rem,7%,4rem);right:clamp(1.5rem,9%,9rem);width:clamp(7rem,21vw,19rem);aspect-ratio:1}
.p2-icone svg{width:100%;height:100%}
.p2-titre{position:absolute;z-index:1;left:var(--marge);bottom:clamp(2rem,4vw,3.5rem);max-width:min(9.5ch,52%);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.96;font-size:clamp(2.6rem,6vw,6.8rem)}
.p2-panneau{--cc:clamp(2rem,3vw,3rem);position:relative;z-index:2;background:#fff;width:min(40rem,calc(100% - 2 * var(--marge)));margin:clamp(-15rem,-14vw,-4rem) var(--marge) 0 auto;padding:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,2.4vw,2.2rem);
  clip-path:polygon(var(--cc) 0,100% 0,100% 100%,0 100%,0 var(--cc))}
.p2-promesse{border-top:1px solid #000;padding:1.05rem 0}
.p2-promesse:first-child{border-top:0;padding-top:.4rem}
.p2-promesse p{font-weight:700;letter-spacing:-.025em;line-height:1.16;font-size:clamp(1.15rem,1rem + .6vw,1.55rem);text-wrap:pretty}
.p2-progres{display:none}
.p2-liens{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid #000;display:grid;gap:.6rem;justify-items:start}
.p2-resp{font-size:.88rem;line-height:1.4;color:var(--encre-douce)}

/* Scène épinglée : la photo occupe l'écran, les promesses défilent une à une dans le panneau */
.p2-on .p2-scene{height:100vh;height:100svh;overflow:hidden}
.p2-on .p2-cadre{position:absolute;inset:0}
.p2-on .p2-photo{position:absolute;inset:0;aspect-ratio:auto;min-height:0}
.p2-on .p2-icone{top:9vh;right:max(var(--marge),8vw);width:min(30vh,19rem)}
.p2-on .p2-titre{bottom:max(var(--marge),6vh)}
.p2-on .p2-panneau{position:absolute;right:var(--marge);bottom:max(var(--marge),6vh);margin:0;width:min(34rem,40vw)}
.p2-on .p2-promesses{display:grid}
.p2-on .p2-promesse{grid-area:1/1;border:0;padding:.2rem 0 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .55s var(--ease),transform .8s var(--ease),visibility 0s .8s}
.p2-on .p2-promesse.p2-actif{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.p2-on .p2-promesse p{font-size:clamp(1.5rem,1rem + 1.2vw,2.3rem);line-height:1.1}
.p2-on .p2-progres{display:flex;gap:.4rem;margin-top:1.6rem}
.p2-progres i{flex:1;height:3px;background:var(--ligne);position:relative;overflow:hidden}
.p2-progres i::after{content:"";position:absolute;inset:0;background:#000;transform:scaleX(var(--p,0));transform-origin:0 50%}

/* Témoignages */
.p2-tem{max-width:var(--max);margin:clamp(4rem,7vw,7rem) auto 0;padding-inline:var(--marge)}
.p2-eti{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.p2-temoins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3.5rem);margin-top:1.6rem}
.p2-temoin{margin:0;padding-top:1.4rem;position:relative;border-top:1px solid #000}
.p2-temoin::before{content:"";position:absolute;left:0;top:-3px;width:3.4rem;height:5px;background:var(--jaune)}
.p2-temoin:nth-child(2){margin-top:clamp(0rem,3vw,3rem)}
.p2-temoin:nth-child(3){margin-top:clamp(0rem,6vw,6rem)}
.p2-temoin p{font-weight:700;letter-spacing:-.025em;line-height:1.18;font-size:clamp(1.2rem,1rem + .7vw,1.75rem);text-wrap:pretty}
.p2-temoin footer{margin-top:1rem;font-size:.95rem;color:var(--encre-douce)}
@media (max-width:860px){
  .p2-photo{aspect-ratio:4/5}
  .p2-titre{bottom:5.6rem;max-width:80%}
  .p2-panneau{margin:-4rem var(--marge) 0}
  .p2-temoins{grid-template-columns:minmax(0,1fr)}
  .p2-temoin:nth-child(n){margin-top:0}
}

/* --- N3 --- */
/* ===== N3 · La une et l'icône géante : photo, icône entière recadrée qui pivote, titres au surligneur ===== */
.n3{position:relative;background:#fff;padding:clamp(4rem,8vw,8rem) 0 clamp(3.5rem,6vw,6rem);overflow-x:clip}
.n3-in{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.n3-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.n3-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.96;font-size:clamp(2.8rem,6vw,6.4rem)}
.n3-corps{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,6rem);align-items:start}

/* Photo et icône posée dessus, recadrée par le bord de la page */
.n3-visuel{position:relative;padding-bottom:clamp(6rem,11vw,11rem)}
.n3-photo{position:relative;margin:0;aspect-ratio:5/4;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2rem),calc(100% - 3.2rem) 100%,0 100%)}
.n3-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 1.4s var(--ease-out)}
.n3-icone{position:absolute;z-index:1;width:clamp(15rem,30vw,30rem);aspect-ratio:1;left:calc(var(--marge) * -1 - clamp(4rem,9vw,9rem));bottom:0;transform:rotate(var(--n3-rot,0deg));transition:transform 1.3s var(--ease-out)}
.n3-icone svg{width:100%;height:100%;overflow:visible}

/* La une et les trois autres : le titre se surligne en jaune, à la largeur exacte du texte */
.n3-textes{display:grid;gap:clamp(2rem,3.4vw,3rem);padding-top:clamp(.5rem,1.5vw,1.5rem)}
.n3-textes a{text-decoration:none;color:#000}
.n3-textes time{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.n3-surligne{background:linear-gradient(var(--jaune),var(--jaune)) 0 86%/0 .5em no-repeat;transition:background-size .8s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.n3-une{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.5rem;align-items:end;padding-bottom:clamp(1.8rem,3vw,2.6rem);border-bottom:1px solid #000}
.n3-une time{grid-column:1/-1}
.n3-une-t{font-weight:800;letter-spacing:-.04em;line-height:1.04;font-size:clamp(2rem,1rem + 2.8vw,4rem);text-wrap:balance}
.n3-liste li{border-bottom:1px solid #000}
.n3-liste a{display:grid;grid-template-columns:7.6rem minmax(0,1fr) auto;gap:.5rem 1.4rem;align-items:center;padding:clamp(1.1rem,1.8vw,1.5rem) 0}
.n3-t{font-weight:700;letter-spacing:-.025em;line-height:1.15;font-size:clamp(1.15rem,1rem + .55vw,1.6rem);text-wrap:pretty}
.n3-fl{width:2.7rem;height:2.7rem;border-radius:50%;box-shadow:inset 0 0 0 1px #000;display:grid;place-items:center;transition:background-color .4s var(--ease),color .4s var(--ease),transform .6s var(--ease)}
.n3-fl svg{width:1rem;height:1rem}
.n3-une .n3-fl{width:3.2rem;height:3.2rem}
.n3-textes a:focus-visible{outline-offset:4px}
.n3-textes a:focus-visible .n3-surligne{background-size:100% .5em}
.n3-textes a:focus-visible .n3-fl{background:#000;color:var(--jaune);transform:rotate(-45deg)}
@media (hover:hover){
  .n3-textes a:hover .n3-surligne{background-size:100% .5em}
  .n3-textes a:hover .n3-fl{background:#000;color:var(--jaune);transform:rotate(-45deg)}
  .n3-corps:has(.n3-une:hover) .n3-photo img{transform:scale(1.04)}
}

/* Bandeau : onglet jaune fixe à gauche, les noms défilent derrière lui */
.n3-mq{position:relative;margin-top:clamp(1rem,3vw,2.5rem);border-top:1px solid #000;border-bottom:1px solid #000;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}
.n3-mq-tab{position:relative;z-index:1;display:flex;align-items:center;max-width:15rem;padding:1rem clamp(2rem,3vw,3rem) 1rem var(--marge);background:var(--jaune);font-size:.8rem;font-weight:800;letter-spacing:.14em;line-height:1.35;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 1.6rem) 100%,0 100%)}
.n3-mq-fen{overflow:hidden;margin-left:-1.6rem;padding:clamp(1rem,1.8vw,1.5rem) 0}
.n3-mq-rail{display:flex;width:max-content;animation:n3-defile 44s linear infinite}
.n3-mq:hover .n3-mq-rail{animation-play-state:paused}
.n3-mq-liste{display:flex;align-items:center;flex:none}
.n3-mq-liste li{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);padding-right:clamp(1rem,2vw,2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.35rem,2.6vw,2.6rem);white-space:nowrap}
.n3-mq-liste li:first-child{padding-left:clamp(1rem,2vw,2rem)}
.n3-mq-ico{width:.62em;height:.62em;flex:none}
.n3-mq-ico svg{width:100%;height:100%}
@keyframes n3-defile{to{transform:translate3d(-50%,0,0)}}

@media (max-width:900px){
  .n3-corps{grid-template-columns:1fr;gap:0}
  .n3-visuel{padding-bottom:0;margin-bottom:clamp(5rem,22vw,9rem)}
  .n3-icone{width:clamp(11rem,46vw,18rem);bottom:calc(clamp(5rem,22vw,9rem) * -1 + 1rem);left:calc(var(--marge) * -1 - 3rem)}
  .n3-mq{grid-template-columns:1fr}
  .n3-mq-tab{max-width:none;width:fit-content;padding:.7rem 2.4rem .7rem var(--marge)}
  .n3-mq-fen{margin-left:0}
}
@media (max-width:560px){
  .n3-liste a{grid-template-columns:minmax(0,1fr) auto}
  .n3-liste time{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .n3-icone{transform:none}
  .n3-mq-rail{animation:none;width:auto}
  .n3-mq-liste{flex:1 1 100%;min-width:0;flex-wrap:wrap;row-gap:.6rem;padding:0 var(--marge)}
  .n3-mq-liste li{white-space:normal;font-size:clamp(1.15rem,2.2vw,1.8rem)}
  .n3-mq-liste li:first-child{padding-left:0}
  .n3-mq-rail > .n3-mq-liste[aria-hidden]{display:none}
}

/* --- F1 --- */
/* ===== F1 · Filets fins : tout sur blanc, champs soulignés, accents jaunes, coins coupés à 45° ===== */
.f1{--f1-u:2rem;--f1-diag:linear-gradient(to top right,transparent calc(50% - 1.1px),#000 calc(50% - 1.1px) 50%,transparent 50%);
  position:relative;background:#fff;padding:clamp(4rem,8vw,8rem) 0 clamp(4rem,7vw,7rem);overflow-x:clip}
.f1-in{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.f1-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem}
.f1-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.96;font-size:clamp(2.6rem,6vw,6.4rem);max-width:12ch}
.f1-lead{font-size:clamp(1.1rem,1rem + .45vw,1.4rem);line-height:1.4;font-weight:500;max-width:22rem}

/* Le numéro géant, souligné en jaune ; le jaune monte derrière au survol */
.f1-tel{display:inline-block;margin:clamp(1.6rem,3vw,2.6rem) 0 clamp(3rem,6vw,5.5rem);text-decoration:none;color:#000;font-weight:800;letter-spacing:-.055em;line-height:.92;font-size:clamp(3.3rem,12.2vw,13.5rem);white-space:nowrap}
.f1-tel span{background:linear-gradient(var(--jaune),var(--jaune)) 0 86%/100% .2em no-repeat;transition:background-size .8s var(--ease)}
@media (hover:hover){.f1-tel:hover span{background-size:100% .92em}}
.f1-tel:focus-visible span{background-size:100% .92em}

/* Grille : coordonnées à gauche, formulaire à droite, soutien sous les coordonnées */
.f1-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;gap:var(--f1-u) clamp(2.5rem,6vw,7rem);align-items:start}
.f1-infos{grid-column:1;grid-row:1;display:grid}
.f1-form{grid-column:2;grid-row:1 / span 2;border-top:1px solid #000;padding-top:var(--f1-u)}
.f1-soutien{grid-column:1;grid-row:2}
.f1-bloc{border-top:1px solid #000;padding:1.1rem 0 1.5rem;display:grid;gap:.45rem;font-size:1.05rem;line-height:1.5}
.f1-eti{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.f1-courriel{justify-self:start;font-weight:600}
.f1-bloc address{font-style:normal}
.f1-heures .statut{font-weight:700;margin-bottom:.35rem}
.f1-heures li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .6rem;border-top:1px solid var(--ligne);font-size:.98rem}
.f1-heures li:last-child{border-bottom:1px solid var(--ligne)}
.f1-heures li.auj{background:var(--jaune-pale);font-weight:800;border-color:#000}
.f1-heures li.auj + li{border-top-color:#000}

.f1-soutien{position:relative;display:grid;gap:.6rem;padding:1.6rem 1.6rem 1.7rem;background:var(--bleu-pale);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 2rem,100% 100%,0 100%)}
.f1-soutien-ico{position:absolute;right:1.5rem;top:1.6rem;width:2.6rem;height:2.6rem}
.f1-soutien-ico svg{width:100%;height:100%}
.f1-soutien-titre{padding-right:3.6rem;font-size:1.35rem;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05}
.f1-soutien-txt{max-width:24rem;padding-right:2.4rem}
.f1-soutien-actions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:.5rem}

.f1-form-t{font-size:clamp(1.4rem,1rem + 1vw,2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin-bottom:var(--f1-u)}

/* ---------- Le kit, habillé : mêmes champs, même comportement ---------- */
.f1 .formulaire{--f-h:3.2rem;--f-line:#000;--f-bg:transparent;--f-bg-2:var(--papier);--f-radius:0;--f-focus:#000;gap:var(--f1-u)}
.f1 .formulaire .rang{gap:var(--f1-u) 2.25rem}
.f1 .formulaire .rang:not(:has(> .champ:not([hidden]))){display:none}
.f1 .champ{gap:.65rem;align-content:start}
.f1 fieldset.champ > legend{float:left;width:100%}
.f1 .champ > label,.f1 .champ > .etiquette,.f1 .champ legend{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;gap:.6rem;min-height:1.35rem;line-height:1.2}
.f1 .champ > label.interrupteur{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;line-height:1.35;min-height:var(--f-h)}
.f1 .interrupteur .etat{font-weight:400}
.f1 .champ > label.case{text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:400;min-height:0;line-height:1.45}
.f1 .tag{font-size:.6rem;letter-spacing:.09em;padding:.32rem .55rem .3rem;border-radius:0;line-height:1;clip-path:polygon(0 0,calc(100% - .45rem) 0,100% .45rem,100% 100%,0 100%)}
.f1 .tag-facult{box-shadow:none;background:var(--papier);color:var(--encre-douce)}
.f1 .aide{font-size:.84rem;margin-top:-.1rem}
.f1 .saisie::placeholder{color:var(--encre-douce);opacity:.7}

/* Champs soulignés : filet noir, trait jaune qui se déroule au focus */
.f1 .saisie,.f1 .liste-btn{border:0;border-bottom:1px solid #000;border-radius:0;padding:0 .15rem;background:transparent linear-gradient(var(--jaune),var(--jaune)) 0 100%/0 4px no-repeat;
  transition:background-size .55s var(--ease),background-color .3s var(--ease)}
.f1 .liste-btn{padding-right:0}
.f1 .liste-btn > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.f1 .saisie:focus,.f1 .liste-btn:focus-visible,.f1 .liste.liste-ouverte .liste-btn{box-shadow:none;background-size:100% 4px;outline:0}
@media (hover:hover){.f1 .saisie:hover,.f1 .liste-btn:hover{border-color:#000;background-color:var(--jaune-pale)}}
.f1 textarea.saisie{min-height:8rem;padding:.95rem 1.1rem;border:1px solid #000;background:#fff var(--f1-diag) 100% 0/1.1rem 1.1rem no-repeat;background-origin:border-box;
  clip-path:polygon(0 0,calc(100% - 1.1rem) 0,100% 1.1rem,100% 100%,0 100%)}
.f1 textarea.saisie:focus{box-shadow:inset 0 -4px 0 var(--jaune)}
.f1 .date .saisie{padding-right:3rem}
.f1 .date-btn{right:0;background:transparent}
.f1 .liste-btn .chev{background:transparent;width:2.2rem;height:2.2rem}
@media (hover:hover){.f1 .liste-btn:hover .chev,.f1 .date-btn:hover{background:var(--jaune)}}
.f1 .liste.liste-ouverte .chev{background:var(--jaune)}
.f1 .liste-pop{border-radius:0;padding:.35rem;box-shadow:0 26px 50px -30px rgba(0,0,0,.4),0 0 0 1px #000}
.f1 .liste-pop [role=option]{border-radius:0}
.f1 .liste-pop [role=option].actif{background:var(--jaune-pale)}
@media (hover:hover){.f1 .liste-pop [role=option]:hover{background:var(--jaune-pale)}}
.f1 .cal{border-radius:0;box-shadow:0 26px 50px -30px rgba(0,0,0,.4),0 0 0 1px #000}
.f1 .champ.erreur .saisie,.f1 .champ.erreur .liste-btn{background-color:var(--jaune-pale);border-color:#000}
.f1 .champ.erreur textarea.saisie{background:var(--jaune-pale) var(--f1-diag) 100% 0/1.1rem 1.1rem no-repeat;background-origin:border-box}

/* Segments : barre à filet, le pouce est jaune */
.f1 .segments{display:grid;width:100%;padding:0;background:#fff;border-radius:0;box-shadow:inset 0 0 0 1px #000}
.f1 .segments label{border-radius:0;padding:.95rem 1rem;font-size:.92rem;color:#000}
.f1 .segments label:not(:first-of-type){box-shadow:inset 1px 0 0 #000}
.f1 .segments .pouce{top:1px;bottom:1px;border-radius:0;background:var(--jaune)}
.f1 .segments input:checked + label{color:#000;font-weight:700}
@media (hover:hover){.f1 .segments input:not(:checked) + label:hover{background:var(--jaune-pale)}}
@media (max-width:560px){
  .f1 .segments{border-radius:0}
  .f1 .segments label:not(:first-of-type){box-shadow:inset 0 1px 0 #000}
  .f1 .segments .pouce{left:1px;right:1px;top:0;border-radius:0}
}

/* Cartes du moyen de contact : filet fin qui suit le coin coupé */
.f1 .cartes{gap:1rem}
.f1 .cartes label{border:1px solid #000;border-radius:0;padding:1.15rem 1.15rem 1.2rem;gap:.3rem;background:#fff var(--f1-diag) 100% 0/1.2rem 1.2rem no-repeat;background-origin:border-box;
  clip-path:polygon(0 0,calc(100% - 1.2rem) 0,100% 1.2rem,100% 100%,0 100%);transition:background-color .35s var(--ease)}
.f1 .cartes label .ico{width:auto;height:auto;background:transparent;border-radius:0;justify-content:start;margin-bottom:.45rem}
.f1 .cartes label .ico svg{width:1.4rem;height:1.4rem}
.f1 .cartes label .pastille{top:auto;bottom:1.15rem;right:1.15rem;width:1.1rem;height:1.1rem;box-shadow:inset 0 0 0 1px #000}
.f1 .cartes label b{padding-right:1.6rem}
.f1 .cartes label small{color:var(--encre-douce);padding-right:1.6rem}
@media (hover:hover){.f1 .cartes label:hover{transform:none;border-color:#000;background-color:var(--jaune-pale)}}
.f1 .cartes input:checked + label{background-color:var(--jaune);border-color:#000}
.f1 .cartes input:checked + label .ico{background:transparent}
.f1 .cartes input:checked + label .pastille{box-shadow:inset 0 0 0 5px #000;background:#fff}
.f1 .champ.erreur .cartes label{background-color:var(--jaune-pale)}

/* Pastilles des moments, interrupteur, case */
.f1 .pilules{gap:.5rem}
.f1 .formulaire{container-type:inline-size}
.f1 .formulaire .rang:has(.pilules){grid-template-columns:minmax(0,1fr)}
.f1 .formulaire .rang:has(.pilules) > .champ:has(.date){max-width:22rem}
@container (min-width:46rem){.f1 .formulaire .rang:has(.pilules){grid-template-columns:minmax(0,auto) minmax(13rem,1fr)}.f1 .formulaire .rang:has(.pilules) > .champ:has(.date){max-width:none}}
.f1 .liste-btn{font-size:1rem}
.f1 .pilules label{border:1px solid #000;border-radius:0;padding:.68rem .95rem .68rem .7rem;font-size:.9rem;background:#fff var(--f1-diag) 100% 0/.7rem .7rem no-repeat;background-origin:border-box;
  clip-path:polygon(0 0,calc(100% - .7rem) 0,100% .7rem,100% 100%,0 100%)}
.f1 .pilules label::before{border-radius:0;box-shadow:inset 0 0 0 1px #000}
@media (hover:hover){.f1 .pilules label:hover{background-color:var(--jaune-pale)}}
.f1 .pilules input:checked + label{background-color:#000;color:#fff}
.f1 .interrupteur{background:transparent;border-radius:0;padding:.35rem 0 .45rem;border-bottom:1px solid #000;font-size:.95rem;line-height:1.35}
.f1 .interrupteur .rail{background:var(--ligne)}
.f1 .case .case-boite{border-radius:0;box-shadow:inset 0 0 0 1px #000}
.f1 .compteur{margin-top:-.25rem}
.f1 .resume-err{border-radius:0;box-shadow:inset 0 0 0 1px #000;background:var(--jaune-pale)}

/* Pied : bouton plat, note alignée sur le bouton */
.f1 .pied-form{gap:1.1rem 2rem;padding-top:.4rem;align-items:center}
.f1 .envoyer{min-height:3.6rem}
@media (hover:hover){.f1 .envoyer:hover{background:#000}}
.f1 .pied-form .note{max-width:26rem;line-height:1.45}
.f1 .pied-form .note .a-remplacer{display:none}
.f1 .merci .recap span{border-radius:0;background:var(--jaune-pale)}
.f1 .merci .ico-merci{width:clamp(4.5rem,8vw,6rem)}

@media (max-width:980px){
  .f1-grille{grid-template-columns:1fr;grid-template-rows:none}
  .f1-infos,.f1-form,.f1-soutien{grid-column:1;grid-row:auto}
  .f1-infos{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));column-gap:2rem}
  .f1-heures{grid-column:1/-1}
}
@media (max-width:560px){
  .f1{--f1-u:1.6rem}
  .f1-tel{margin-bottom:2.4rem}
  .f1-soutien{padding:1.4rem 1.3rem 1.5rem}
  .f1 .cartes{grid-template-columns:1fr;gap:.7rem}
  .f1 .cartes label{grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.15rem;align-items:center;padding:1rem 3.2rem 1rem 1.1rem}
  .f1 .cartes label .ico{grid-row:1 / span 2;margin:0}
  .f1 .cartes label b,.f1 .cartes label small{grid-column:2;padding-right:0}
  .f1 .cartes label .pastille{top:50%;bottom:auto;right:1.1rem;translate:0 -50%}
}
.f1 .merci h3{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1}

/* --- M2 --- */
.m2{background:#fff;min-height:780px;display:grid;grid-template-rows:auto 1fr auto}
.m2-tete{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0;border-bottom:1.5px solid #000;margin:0 var(--marge)}
.m2-logo{width:7rem;display:block}.m2-logo .logo{width:100%;height:auto}
.m2-fermer{border:0;background:var(--jaune);border-radius:999px;padding:.65rem 1.1rem;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.m2-corps{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:center;padding:2rem var(--marge)}
.m2-liste a{display:block;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2rem,4.6vw,4.8rem);color:#c9c9c0;transition:color .4s var(--ease)}
.m2-liste a.actif,.m2-liste a:focus-visible{color:#000}
.m2-fen{position:relative;width:min(100%,27rem);aspect-ratio:1;justify-self:center}
.m2-ph{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.m2-ph.on{opacity:1}
.m2-ph svg{width:100%;height:100%}
.m2-pied{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin:0 var(--marge);padding:1.3rem 0 1.6rem;border-top:1.5px solid #000}
.m2-pied a:not(.btn){font-weight:700;text-decoration:none}
.m2-esp{flex:1}
@media (max-width:760px){.m2-corps{grid-template-columns:1fr}.m2-fen{width:60vw;order:-1}}

/* ===== H : ajustements d'assemblage des options retenues ===== */
/* Menu M2 dans le conteneur plein écran de C */
.menu.m2{background:#fff;min-height:0}
.menu.m2 .m2-tete{padding-right:calc(clamp(.6rem,1.4vw,1.25rem) + 13rem)}
@media (max-width:760px){.menu.m2 .m2-tete{padding-right:9.6rem}}

/* Héros H3 + Je suis J3 : la fenêtre-photo déborde à droite ; la rangée « Je suis… + 4 onglets » (titre à gauche, comme la démo) commence juste sous elle */
.h3-wrap .j3{padding-top:calc(min(38vw,60svh) - min(21vw,30svh) + clamp(1.2rem,2.4vw,2.2rem))}
@media (max-width:900px){.h3-wrap .j3{padding-top:7rem}}

/* demande du 2 oct. : pas d'icône posée sur la photo de « Je suis… » */
.h3-wrap .j3-icone{display:none}

/* demande du 2 oct. : pas de pastilles secondaires sous la liste des services */
#services .s2-plus{display:none}

/* demande du 2 oct. : le coin de la carte doit TOUJOURS être coupé à 45°. Le clip-path posé sur une photo animée ne se redessinait pas toujours dans Chrome ;
   le coin est maintenant peint dans le fond de la carte (dégradé à arrêt net), sans clip-path, sur son propre calque */
.h3-wrap .j3-carte{clip-path:none;background:linear-gradient(225deg,transparent calc(2.6rem * .7071),#fff calc(2.6rem * .7071 + .6px));transform:translateZ(0)}

/* demande du 2 oct. · équipe : l'icône reste fixe en arrière-plan (aucune rotation), les portraits sont plus grands et dépassent davantage le haut du cadre jaune */
.e1 .e1-icone{transform:none!important;transition:none}
.e1 .e1-fond{inset:30% 0 0 0}
.e1 .e1-pose{height:100%}
.e1 .e1-lettres{height:auto;bottom:6%}

/* demandes du 2 oct. : l'icône ne tourne pas sur la photo de « Ce qui reste entre nous » ni dans « Nouvelles » */
.p2 .p2-icone{transform:none!important}
.n3 .n3-icone,.n3 .n3-icone svg{transform:none!important;transition:none}
/* témoignages : plus d'escalier, les trois citations sont alignées en haut (filets sur la même ligne) */
.p2 .p2-temoins{align-items:start}
.p2 .p2-temoin:nth-child(n){margin-top:0}

/* demande du 2 oct. · barre des partenaires : plus d'espace au-dessus (l'icône ne la touche plus), 33 % de moins en dessous */
.n3 .n3-mq{margin-top:clamp(4rem,8vw,8rem)}
.n3{padding-bottom:calc(clamp(3.5rem,6vw,6rem) * .67)}
.n3 + .f1{padding-top:calc(var(--h-f1-haut,clamp(4rem,8vw,8rem)) * .67)}

/* demande du 2 oct. · formulaire : le choix jaune ne cache plus le filet du cadre (le cadre est redessiné par-dessus) */
.f1 .segments{box-shadow:none}
.f1 .segments::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 1px #000;pointer-events:none}
.f1 .segments .pouce{top:0;bottom:0}

/* demande du 2 oct. : pas d'icône dans la carte « Soutenir le Transit » */
.f1 .f1-soutien-ico{display:none}

/* demande du 2 oct. · section d'ambiance entre les chiffres et l'équipe : panneau jaune en biseau (L3), trois photos qui se chevauchent */
.amb{position:relative;padding:clamp(1rem,3vw,3rem) var(--marge) clamp(3rem,6vw,6rem);overflow-x:clip}
.amb-in{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;column-gap:clamp(1rem,2vw,2rem)}
.amb-panneau{grid-column:1 / 9;grid-row:1;background:var(--jaune);margin-left:calc(var(--marge) * -1);padding:clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem) clamp(9rem,17vw,17rem) var(--marge);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coupe) * 1.6),calc(100% - var(--coupe) * 1.6) 100%,0 100%)}
.amb-devise{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.6rem,6.6vw,7.6rem);max-width:9em;text-wrap:balance}
.amb-ph{margin:0;overflow:hidden;position:relative;z-index:1}
.amb-ph img{width:100%;height:100%;object-fit:cover}
.amb-ph1{grid-column:6 / 13;grid-row:1 / 3;align-self:end;aspect-ratio:16/10;margin-top:clamp(12rem,24vw,24rem);clip-path:polygon(0 0,calc(100% - 3.2rem) 0,100% 3.2rem,100% 100%,0 100%)}
.amb-ph2{grid-column:2 / 5;grid-row:2;aspect-ratio:3/4;margin-top:calc(clamp(6rem,12vw,12rem) * -1);clip-path:polygon(0 0,calc(100% - 2.2rem) 0,100% 2.2rem,100% 100%,0 100%)}
.amb-ph3{grid-column:10 / 13;grid-row:1;align-self:start;aspect-ratio:3/4;margin-top:clamp(1rem,3vw,3rem);z-index:0;clip-path:polygon(0 0,100% 0,100% 100%,2.2rem 100%,0 calc(100% - 2.2rem))}
@media (max-width:760px){
  .amb-panneau{grid-column:1 / -1;padding-bottom:clamp(7rem,30vw,10rem)}
  .amb-ph1{grid-column:2 / -1;grid-row:2;margin-top:calc(clamp(5rem,24vw,8rem) * -1)}
  .amb-ph2{grid-column:1 / 8;grid-row:3;margin-top:-2.5rem}
  .amb-ph3{grid-column:8 / -1;grid-row:3;margin-top:1.2rem}
}

/* demande du 2 oct. : pas de petit sous-titre sous les titres de section */
.e1 .e1-aide,.f1 .f1-lead{display:none}

/* Bande photo L4 entre les services et les activités */
.h-bande{position:relative;z-index:2}
.h-bande .l4-bande{height:clamp(16rem,40vw,30rem)}
.h-bande .l4-ico{right:auto;left:clamp(1.5rem,8vw,9rem);top:calc(-1 * clamp(3rem,5vw,5rem));width:clamp(8rem,15vw,14rem)}

/* Activités A4 : sans la ligne de temps */
.a4 .a4-tete{margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}

/* Pied de A : l'icône reste sous les liens */
.pied-etoile{bottom:calc(-1 * clamp(14rem,24vw,26rem))!important;right:-8vw!important;z-index:0}
.pied-haut,.pied-bas{z-index:1}
.insc-fermer span{width:1.2rem;height:1.2rem;position:relative;display:block}
.insc-fermer span::before,.insc-fermer span::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#000;transform:rotate(45deg)}
.insc-fermer span::after{transform:rotate(-45deg)}

/* ===== Pages intérieures et pièces communes : voir DESIGN.md =====
   Blanc dominant, filets fins, coins coupés à 45°, photo qui déborde, icône rare et immobile. */
:root{--sec:clamp(3.5rem,7vw,7rem);--cc:2.6rem;
  --diag:linear-gradient(to top right,transparent calc(50% - 1.1px),#000 calc(50% - 1.1px) 50%,transparent 50%)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.m2 a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}

/* ---------- En-tête de page : bande jaune, titre géant, photo à coin coupé qui déborde sur le blanc ---------- */
.pt{--deb:clamp(5rem,11vw,12rem);position:relative;padding:max(calc(var(--entete-h) + clamp(2.4rem,6vw,6rem)),calc(var(--pastille-bas) + clamp(2.8rem,5vw,4rem))) var(--marge) 0;isolation:isolate}
.pt::before{content:"";position:absolute;z-index:-1;inset:0 0 var(--deb) 0;background:var(--jaune)}
.pt-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:2rem clamp(2rem,5vw,6rem);align-items:end}
.pt-texte{padding-bottom:calc(var(--deb) + clamp(2rem,4vw,4rem))}
.pt-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.7rem,7.6vw,8.4rem);text-wrap:balance}
.pt-titre.long{font-size:clamp(2.4rem,5.8vw,6.4rem)}
.pt-chapeau{margin-top:clamp(1.1rem,2vw,1.8rem);max-width:30ch;font-size:clamp(1.15rem,1rem + .7vw,1.65rem);font-weight:500;line-height:1.28;letter-spacing:-.01em}
.pt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:clamp(1.4rem,2.4vw,2.2rem)}
.pt-fenetre{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--papier);clip-path:polygon(0 0,calc(100% - 3.2rem) 0,100% 3.2rem,100% 100%,0 100%)}
.pt-fenetre{position:relative}.pt-fenetre img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
@media (max-width:900px){
  .pt{--deb:5rem}
  .pt-in{grid-template-columns:minmax(0,1fr);gap:0}
  .pt-texte{padding-bottom:2.2rem}
  .pt-fenetre{aspect-ratio:16/10;width:calc(100% - 1.5rem);margin-left:auto;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 2rem,100% 100%,0 100%)}
}

/* ---------- Sections ---------- */
.sec{position:relative;padding:var(--sec) var(--marge)}
.sec + .sec{padding-top:0}
.sec-in{max-width:var(--max);margin:0 auto}
.sec-etroite .sec-in{max-width:62rem}
.gg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.6rem clamp(1rem,2.5vw,2.5rem);align-items:start}
.gg > .gg-t{grid-column:1 / 5}
.gg > .gg-t .titre{font-size:clamp(2rem,3.3vw,3.6rem);overflow-wrap:break-word}
.gg > .gg-c{grid-column:5 / 13;min-width:0}
@media (max-width:900px){.gg > .gg-t,.gg > .gg-c{grid-column:1 / -1}}
.titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(2.1rem,4.2vw,4.4rem);text-wrap:balance}
.titre-g{font-size:clamp(2.4rem,5.4vw,5.6rem)}
.sec-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(1.8rem,3.4vw,3rem)}
.lead{font-size:clamp(1.15rem,.9rem + .9vw,1.7rem);line-height:1.3;letter-spacing:-.015em;font-weight:600;max-width:36rem;text-wrap:pretty}
.texte{max-width:38rem;color:var(--encre-douce)}
.texte + .texte,.lead + .texte{margin-top:.9rem}
.note{font-size:.88rem;color:var(--encre-douce);margin-top:1.2rem;max-width:40rem}
.eti{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.suite{margin-top:clamp(1.4rem,2.4vw,2rem)}

/* ---------- Offres : ateliers et services en deux colonnes à filets ---------- */
.offres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.4rem,3vw,3.5rem)}
.offre{display:grid;grid-template-rows:auto auto 1fr auto;gap:.5rem;justify-items:start;border-top:1.5px solid #000;padding:1.2rem 0 clamp(1.6rem,3vw,2.6rem)}
.offre h3{font-size:clamp(1.25rem,1rem + .8vw,1.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;max-width:22ch}
.offre p{color:var(--encre-douce);max-width:30rem;line-height:1.45}
.offre .lien-fort{margin-top:.3rem}
.offre-forte h3 span{background:linear-gradient(var(--jaune),var(--jaune)) 0 88%/100% .42em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.offres-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.offres-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.offres,.offres-3{grid-template-columns:minmax(0,1fr)}}

/* ---------- Rangées : grandes lignes cliquables (comme « Nos services »), surligneur à la largeur du texte ---------- */
.rangees{border-top:1.5px solid #000}
.rangees li{border-bottom:1.5px solid #000}
.rangees a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem) 3rem;align-items:center;gap:.5rem clamp(1.2rem,2.4vw,2.4rem);padding:clamp(1rem,1.7vw,1.5rem) 0;text-decoration:none;color:#000}
.r-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(1.4rem,2.4vw,2.6rem);text-wrap:balance}
.r-titre span,.surligne{background:linear-gradient(var(--jaune),var(--jaune)) 0 90%/0% .5em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s var(--ease)}
.r-sous{font-size:.96rem;line-height:1.4;color:var(--encre-douce)}
.r-rond{width:3rem;height:3rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px #000;position:relative;transition:background-color .4s var(--ease),transform .6s var(--ease)}
.r-rond::after{content:"";position:absolute;inset:0;margin:auto;width:1rem;height:1rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%);transition:background-color .4s}
@media (hover:hover){
  .rangees a:hover .r-titre span,a:hover > .surligne{background-size:100% .5em}
  .rangees a:hover .r-rond{background:#000;transform:rotate(-45deg)}
  .rangees a:hover .r-rond::after{background:var(--jaune)}
}
.rangees a:focus-visible .r-titre span{background-size:100% .5em}
.rangees-p .r-titre{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);letter-spacing:-.02em;text-transform:none;font-weight:700;line-height:1.15}
.rangees-p .r-rond{width:2.6rem;height:2.6rem;box-shadow:inset 0 0 0 1px #000}
.rangees-p,.rangees-p li{border-width:1px}
@media (max-width:700px){.rangees a{grid-template-columns:minmax(0,1fr) 2.6rem}.r-sous{grid-column:1;grid-row:2}.r-rond{grid-column:2;grid-row:1 / span 2;width:2.6rem;height:2.6rem}}

/* ---------- Panneau jaune biseauté, une photo le dépasse ---------- */
.pj{position:relative;padding:var(--sec) var(--marge);overflow-x:clip}
.pj-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:start}
.pj-panneau{grid-column:1 / 9;grid-row:1;background:var(--jaune);margin-left:calc(var(--marge) * -1);padding:clamp(2.4rem,5vw,5rem) clamp(2rem,16vw,18rem) clamp(2.4rem,5vw,5rem) var(--marge);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coupe)),calc(100% - var(--coupe)) 100%,0 100%)}
.pj-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.94;font-size:clamp(2.2rem,4.8vw,5.2rem);text-wrap:balance;max-width:11em}
.pj-texte{margin-top:1.1rem;max-width:30rem;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.4;font-weight:500}
.pj-faits{margin-top:1.4rem;display:grid;gap:0;max-width:30rem;border-top:1px solid #000}
.pj-faits li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid #000;font-size:.98rem;line-height:1.35}
.pj-faits b{font-weight:800}
.pj-actions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1.6rem}
.pj-photo{grid-column:7 / 13;grid-row:1;position:relative;z-index:1;margin:clamp(4rem,9vw,9rem) 0 0;aspect-ratio:4/3;overflow:hidden;clip-path:polygon(0 0,calc(100% - 3.2rem) 0,100% 3.2rem,100% 100%,0 100%)}
.pj-photo img{width:100%;height:100%;object-fit:cover}
.pj-inverse .pj-panneau{grid-column:5 / 13;margin-left:0;margin-right:calc(var(--marge) * -1);padding:clamp(2.4rem,5vw,5rem) var(--marge) clamp(2.4rem,5vw,5rem) clamp(2rem,16vw,18rem);
  clip-path:polygon(0 0,100% 0,100% 100%,var(--coupe) 100%,0 calc(100% - var(--coupe)))}
.pj-inverse .pj-photo{grid-column:1 / 7}
.pj-bleu .pj-panneau{background:var(--bleu-pale)}
@media (max-width:900px){
  .pj-panneau,.pj-inverse .pj-panneau{grid-column:1 / -1;margin-inline:calc(var(--marge) * -1);padding:2.4rem var(--marge) clamp(6rem,26vw,9rem)}
  .pj-photo,.pj-inverse .pj-photo{grid-column:2 / -1;grid-row:2;margin-top:calc(clamp(4.5rem,22vw,7.5rem) * -1);aspect-ratio:16/10}
}

/* ---------- Bande photo pleine largeur ---------- */
.bande{position:relative;margin:0;height:clamp(16rem,40vw,32rem);overflow:hidden}
.bande img{width:100%;height:120%;object-fit:cover;margin-top:-10%}
.bande-ico{position:relative;margin-top:clamp(5rem,10vw,9rem)}
.bande-ico .bande{overflow:hidden}
.bande-ico > .ico{position:absolute;z-index:1;right:clamp(1.5rem,8vw,9rem);top:calc(-1 * clamp(5rem,10vw,9rem));width:clamp(10rem,22vw,20rem);aspect-ratio:1}
.bande-ico > .ico svg{width:100%;height:100%}

/* ---------- Photo à coin coupé, seule ---------- */
.photo{margin:0;overflow:hidden;background:var(--papier);clip-path:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cc),100% 100%,0 100%)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-43{aspect-ratio:4/3}.photo-34{aspect-ratio:3/4}.photo-169{aspect-ratio:16/9}

/* ---------- Étapes numérotées ---------- */
.etapes{counter-reset:e;border-top:1.5px solid #000}
.etapes li{counter-increment:e;display:grid;grid-template-columns:clamp(3.6rem,7vw,6.5rem) minmax(0,1fr);column-gap:1rem;align-items:baseline;padding:clamp(1.1rem,2vw,1.7rem) 0;border-bottom:1.5px solid #000}
.etapes li::before{content:counter(e);grid-row:1 / span 2;font-weight:800;font-size:clamp(2.8rem,5vw,5rem);letter-spacing:-.06em;line-height:.85}
.etapes b{font-size:clamp(1.2rem,1rem + .7vw,1.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.etapes p{color:var(--encre-douce);max-width:34rem;margin-top:.3rem}
.etapes-ans li::before{content:attr(data-an);font-size:clamp(2rem,3.4vw,3.4rem);letter-spacing:-.05em}
.etapes-ans li{grid-template-columns:clamp(6rem,10vw,9.5rem) minmax(0,1fr)}
.etapes-ans p{margin-top:0;color:#000;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.35}

/* ---------- Mots : liste courte en ligne, séparée par des filets ---------- */
.mots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.4rem,3vw,3.5rem);margin-top:clamp(1.4rem,2.4vw,2rem)}
.mots li{border-top:1px solid #000;padding:.8rem 0;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.mots li small{display:block;font-weight:400;font-size:.88rem;color:var(--encre-douce);letter-spacing:0}
@media (max-width:560px){.mots{grid-template-columns:minmax(0,1fr)}}

/* ---------- Chiffres surlignés (comme l'accueil) et barres (idée 9) ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1rem,2.4vw,2.6rem);margin:0}
.chiffre{display:flex;flex-direction:column;gap:.8rem;border-top:1.5px solid #000;padding-top:1.1rem}
.chiffre dd{order:-1;margin:0;align-self:flex-start;font-weight:800;letter-spacing:-.06em;line-height:.96;font-size:clamp(3rem,5.6vw,6.2rem);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 .08em 0 .02em;background:linear-gradient(var(--jaune),var(--jaune)) 0 88%/100% 34% no-repeat}
.chiffre dt{font-size:.96rem;line-height:1.38;max-width:16rem;color:var(--encre-douce)}
@media (max-width:860px){.chiffres{grid-template-columns:1fr 1fr}.chiffre dd{font-size:clamp(2.6rem,12vw,4.4rem)}}
.barres{display:grid;gap:0;border-top:1.5px solid #000}
.barre{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) 5.5rem;gap:1rem clamp(1rem,2vw,2rem);align-items:center;padding:1rem 0;border-bottom:1px solid #000}
.barre-nom{font-size:1rem;line-height:1.3;font-weight:600}
.barre-piste{height:1.5rem;position:relative}
.barre-piste i{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--c,var(--jaune));transform-origin:left;transition:transform 1.5s var(--ease-out);clip-path:polygon(0 0,calc(100% - .75rem) 0,100% .75rem,100% 100%,0 100%)}
.barres.attente .barre-piste i{transform:scaleX(0)}
.barre-val{font-weight:800;font-size:clamp(1.6rem,2.4vw,2.4rem);letter-spacing:-.05em;text-align:right;font-variant-numeric:tabular-nums;line-height:1}
@media (max-width:700px){.barre{grid-template-columns:minmax(0,1fr) 4rem}.barre-nom{grid-column:1 / -1}}

/* ---------- Filtres plats : contour noir, l'actif passe au jaune et garde son contour ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.filtres button{border:0;box-shadow:inset 0 0 0 1px #000;background:#fff;padding:.7rem 1.5rem .7rem 1.1rem;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#000;
  background:#fff var(--diag) 100% 0/.8rem .8rem no-repeat;clip-path:polygon(0 0,calc(100% - .8rem) 0,100% .8rem,100% 100%,0 100%);transition:background-color .35s var(--ease)}
.filtres button[aria-pressed=true]{background-color:var(--jaune)}
@media (hover:hover){.filtres button:not([aria-pressed=true]):hover{background-color:var(--jaune-pale)}}
.recherche{display:flex;align-items:center;gap:.6rem;max-width:28rem;border-bottom:1.5px solid #000;margin-bottom:1.4rem}
.recherche input{flex:1;min-width:0;border:0;background:transparent;padding:.85rem 0;font-size:1.1rem;outline:0}
.recherche svg{width:1.2rem;height:1.2rem;flex:none}
.recherche:focus-within{box-shadow:0 3px 0 var(--jaune)}
.vide{padding:1.2rem 0;color:var(--encre-douce)}

/* ---------- Activités : les cartes de l'accueil, en grille filtrable ---------- */
.act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem) clamp(1rem,2vw,2rem)}
.act .a4-c{flex:none}
.act .a4-c[hidden]{display:none}
.act .a4-h{font-size:clamp(1.2rem,1rem + .55vw,1.6rem)}
.act .a4-date b{font-size:clamp(2.4rem,3.4vw,3.6rem)}
.act .a4-mot b{font-size:clamp(1.9rem,2.6vw,2.8rem)}
@media (max-width:1100px){.act{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.act{grid-template-columns:minmax(0,1fr)}}

/* ---------- Cadre fin à coin coupé : outils et formulaires ---------- */
.cadre{--cc:2.6rem;position:relative;padding:clamp(1.4rem,3vw,2.8rem);box-shadow:inset 0 0 0 1px #000;background:#fff var(--diag) 100% 0/var(--cc) var(--cc) no-repeat;clip-path:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cc),100% 100%,0 100%)}
.f1.f1-nu{padding:0;background:none;overflow:visible}

/* Orientateur (idée 3) et réflexion guidée (idée 4) */
.progres{display:flex;gap:.4rem;margin-bottom:1.6rem;padding-right:2rem}
.progres li{flex:1;height:3px;background:var(--ligne);transition:background-color .4s var(--ease)}
.progres li.fait{background:#000}
.progres li.actif{background:#000;box-shadow:0 3px 0 var(--jaune)}
.q-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.8rem);margin-bottom:1.4rem;outline:0;text-wrap:balance;padding-right:2rem}
.q-choix{display:grid;border-top:1px solid #000}
.q-choix button{display:grid;gap:.15rem;text-align:left;border:0;border-bottom:1px solid #000;background:none;padding:1.05rem 3rem 1.05rem 0;font-weight:700;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);position:relative;color:#000}
.q-choix button > span:first-child,.q-choix button{line-height:1.25}
.q-choix small{font-weight:400;font-size:.9rem;color:var(--encre-douce)}
.q-choix button::after{content:"";position:absolute;right:.4rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%);transition:transform .5s var(--ease)}
.q-choix button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:var(--jaune);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
@media (hover:hover){.q-choix button:hover::before{transform:none}.q-choix button:hover::after{transform:translateX(4px)}}
.q-choix button:focus-visible::before{transform:none}
.q-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.btn-texte{border:0;background:none;font-weight:700;text-decoration:underline;text-underline-offset:4px;padding:.3rem 0;color:#000}
.suggestions{display:grid;border-top:1px solid #000}
.sugg{display:grid;grid-template-columns:minmax(0,1fr) 2.6rem;gap:1rem;align-items:center;padding:1.05rem 0;border-bottom:1px solid #000;text-decoration:none;color:#000}
.sugg b{display:block;font-size:clamp(1.1rem,1rem + .4vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
.sugg b::after{content:none}
.sugg span{font-size:.94rem;color:var(--encre-douce)}
.sugg .fl{position:relative;width:2.6rem;height:2.6rem;border-radius:50%;box-shadow:inset 0 0 0 1px #000;transition:background-color .4s var(--ease),transform .6s var(--ease)}
.sugg .fl::after{content:"";position:absolute;inset:0;margin:auto;width:.9rem;height:.9rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%)}
.sugg:first-child b{display:inline;background:linear-gradient(var(--jaune),var(--jaune)) 0 88%/100% .45em no-repeat}
@media (hover:hover){.sugg:hover .fl{background:#000;transform:rotate(-45deg)}.sugg:hover .fl::after{background:var(--jaune)}}
.affirmations{display:grid;gap:0;border-top:1px solid #000}
.aff{padding:1.2rem 0 1.3rem;border-bottom:1px solid #000}
.aff label{display:block;font-weight:700;font-size:1.08rem;line-height:1.3;margin-bottom:.8rem;max-width:36rem}
.aff-valeur{display:flex;justify-content:space-between;font-size:.82rem;color:var(--encre-douce);margin-top:.5rem}
.aff-valeur output{font-weight:800;color:#000}
.curseur{-webkit-appearance:none;appearance:none;display:block;width:100%;height:1.6rem;background:linear-gradient(#000,#000) 0 50%/var(--rempli,50%) 3px no-repeat,linear-gradient(var(--ligne),var(--ligne)) 0 50%/100% 3px no-repeat;outline:0;margin:0}
.curseur::-webkit-slider-thumb{-webkit-appearance:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--jaune);box-shadow:inset 0 0 0 1.5px #000;cursor:pointer}
.curseur::-moz-range-thumb{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--jaune);border:1.5px solid #000;cursor:pointer;box-sizing:border-box}
.curseur:focus-visible::-webkit-slider-thumb{outline:3px solid #000;outline-offset:2px}
.retour{margin-top:1.8rem;background:var(--jaune-pale);padding:1.5rem 1.6rem;clip-path:polygon(0 0,calc(100% - 1.6rem) 0,100% 1.6rem,100% 100%,0 100%)}
.retour[hidden]{display:none}
.retour-titre{font-weight:800;font-size:clamp(1.3rem,1rem + .8vw,1.8rem);letter-spacing:-.03em;margin-bottom:.4rem;outline:0}
.retour ul{margin-top:.9rem;display:grid}
.retour li{border-top:1px solid #000;padding:.7rem 0;font-size:.98rem}
.retour li b{display:block}
.retour-urgence{margin-top:1rem;font-size:.88rem;font-weight:600}
.discret-note{display:flex;gap:.5rem;align-items:center;font-size:.88rem;color:var(--encre-douce);margin-top:1.4rem}
.discret-note svg{width:1rem;height:1rem;flex:none}

/* Don avec effet concret (idée 10) */
.don{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem clamp(1.5rem,4vw,4rem);align-items:end}
.don-montant{font-weight:800;font-size:clamp(4rem,9vw,9rem);letter-spacing:-.065em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.don-montant-s{display:inline;background:linear-gradient(var(--jaune),var(--jaune)) 0 86%/100% .22em no-repeat}
.don-effet{min-height:5.6rem;font-size:clamp(1.15rem,1rem + .6vw,1.55rem);font-weight:600;letter-spacing:-.015em;line-height:1.3;max-width:28rem}
.don-choix{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 clamp(1.4rem,3vw,2.4rem);grid-column:1 / -1}
.don-choix button{border:0;box-shadow:inset 0 0 0 1px #000;padding:.75rem 1.5rem .75rem 1.1rem;font-weight:800;font-size:1rem;color:#000;background:#fff var(--diag) 100% 0/.8rem .8rem no-repeat;clip-path:polygon(0 0,calc(100% - .8rem) 0,100% .8rem,100% 100%,0 100%);transition:background-color .35s var(--ease)}
.don-choix button[aria-pressed=true]{background-color:var(--jaune)}
@media (hover:hover){.don-choix button:not([aria-pressed=true]):hover{background-color:var(--jaune-pale)}}
.don-bas{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:.6rem}
@media (max-width:760px){.don{grid-template-columns:minmax(0,1fr)}}

/* Agenda discret (idée 5) dans la confirmation d'inscription */
.agenda{margin-top:1rem;display:grid;gap:.7rem;padding:1rem 1.1rem;background:var(--papier);text-align:left}
.agenda[hidden]{display:none}
.agenda-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:space-between}
.agenda-apercu{font-size:.9rem}
.agenda-apercu b{display:block}

/* ---------- Dépliants à filets ---------- */
.depliants details{border-top:1px solid #000}
.depliants details:last-child{border-bottom:1px solid #000}
.depliants summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 2.6rem;align-items:center;gap:1rem;padding:1.1rem 0;font-weight:700;font-size:clamp(1.1rem,1rem + .4vw,1.4rem);letter-spacing:-.02em;line-height:1.2;cursor:pointer}
.depliants summary::-webkit-details-marker{display:none}
.depliants summary::after{content:"";width:2.6rem;height:2.6rem;border-radius:50%;box-shadow:inset 0 0 0 1px #000;background:linear-gradient(#000,#000) center/.9rem 1.5px no-repeat,linear-gradient(#000,#000) center/1.5px .9rem no-repeat;transition:transform .5s var(--ease),background-color .3s}
.depliants details[open] summary::after{transform:rotate(45deg);background-color:var(--jaune)}
.dep-corps{padding:0 3.6rem 1.5rem 0;max-width:46rem;color:var(--encre-douce);display:grid;gap:.7rem}

/* ---------- Promesses (confidentialité) ---------- */
.promesses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.4rem,3vw,3.5rem)}
.promesses li{border-top:1.5px solid #000;padding:1.1rem 0 clamp(1.6rem,3vw,2.4rem);color:var(--encre-douce);line-height:1.45}
.promesses b{display:block;color:#000;font-size:clamp(1.2rem,1rem + .7vw,1.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:.45rem;text-wrap:balance}
@media (max-width:700px){.promesses{grid-template-columns:minmax(0,1fr)}}

/* ---------- Documents ---------- */
.docs{border-top:1px solid #000}
.docs li{border-bottom:1px solid #000}
.docs li[hidden]{display:none}
.docs a{display:grid;grid-template-columns:minmax(0,1fr) auto 1.1rem;gap:1rem;align-items:center;padding:.95rem 0;text-decoration:none;color:#000}
.docs a::after{content:"";width:.95rem;height:.95rem;background:#000;clip-path:polygon(0 38%,55% 38%,33% 16%,47% 2%,98% 50%,47% 98%,33% 84%,55% 62%,0 62%);transform:rotate(90deg);transition:transform .45s var(--ease)}
.docs b{font-weight:700;letter-spacing:-.01em;justify-self:start;background:linear-gradient(var(--jaune),var(--jaune)) 0 90%/0% .5em no-repeat;transition:background-size .6s var(--ease)}
.docs .type{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}
@media (hover:hover){.docs a:hover b{background-size:100% .5em}.docs a:hover::after{transform:rotate(90deg) translateX(3px)}}

/* ---------- Contact (Nous joindre) : relais quand c'est fermé ---------- */
.relais{margin-top:.8rem;background:var(--jaune-pale);padding:1.1rem 1.6rem 1.1rem 1.2rem;clip-path:polygon(0 0,calc(100% - 1.6rem) 0,100% 1.6rem,100% 100%,0 100%)}
.relais[hidden]{display:none}
.relais-titre{font-weight:700;font-size:.95rem;line-height:1.35;margin-bottom:.5rem}
.relais-liste a{display:flex;justify-content:space-between;gap:1rem;width:100%;padding:0;border:0;text-decoration:none;font-size:.92rem}
.f1 .f1-heures .relais-liste li,.relais-liste li{border-top:1px solid #000;border-bottom:0;padding:.55rem 0}
.f1 .f1-heures .relais-liste li:last-child,.relais-liste li:last-child{border-bottom:1px solid #000}
.relais-liste span{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.f1-page{padding-top:var(--sec)}
.f1-page .f1-tel{margin-top:0}
.f1 .f1-heures li{border-top:1px solid var(--ligne)}

/* ---------- Prochain pas : le numéro géant de l'accueil ---------- */
.f1-simple .f1-tel{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.f1-suite{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.2rem}
.f1-suite .statut{font-weight:700;font-size:1.05rem}
.f1-simple{padding-bottom:clamp(4rem,8vw,8rem)}
.pas{padding-top:clamp(1rem,3vw,3rem)}
.pas .f1-titre{font-size:clamp(2.1rem,4.2vw,4.4rem);max-width:none}
.pas .f1-tel{font-size:clamp(3.1rem,10vw,10.5rem)}

/* ---------- Nouvelles (page) et article ---------- */
.nv-une{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.nv-une .photo{aspect-ratio:5/4}
.nv-une .n3-une{border-bottom:0;padding-bottom:0}
@media (max-width:900px){.nv-une{grid-template-columns:minmax(0,1fr)}}
.n3-liste li[hidden]{display:none}
.n3-liste{border-top:1px solid #000}
.article{max-width:46rem}
.article p{font-size:clamp(1.08rem,1rem + .25vw,1.2rem);line-height:1.6;margin-bottom:1.1rem}
.article .lead{margin-bottom:1.6rem;max-width:none}
.article h2{font-size:clamp(1.4rem,1rem + 1vw,2rem);font-weight:800;letter-spacing:-.03em;margin:2.4rem 0 .9rem}
.article ul{margin:0 0 1.2rem;border-top:1px solid #000}
.article li{border-bottom:1px solid #000;padding:.7rem 0}
.art-meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-bottom:2rem;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.art-grille{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2.5rem clamp(2rem,5vw,6rem);align-items:start}
.art-cote{border-top:1.5px solid #000;padding-top:1.1rem;display:grid;gap:.6rem;justify-items:start;position:sticky;top:calc(var(--entete-h) + 1.5rem)}
@media (max-width:900px){.art-grille{grid-template-columns:minmax(0,1fr)}.art-cote{position:static}}

/* ---------- Histoire (Le Centre) : photo dans l'icône, à gauche, recadrée par le bord ---------- */
.c1.c1-page{padding-top:clamp(2rem,5vw,5rem)}

/* ---------- Bande d'aide noire (idée 14), avant le pied ---------- */
.urg{background:#000;color:#fff;padding:clamp(2.4rem,4.5vw,4.5rem) var(--marge)}
.urg-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1.4rem clamp(2rem,4vw,4rem);align-items:start}
.urg-titre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.94;font-size:clamp(1.9rem,3.6vw,3.8rem);color:var(--jaune);text-wrap:balance}
.urg-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.urg-liste a{display:grid;gap:.15rem;padding:.95rem 1.6rem .95rem 1.1rem;background:#1c1c1c;color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 1rem,100% 100%,0 100%);transition:background-color .35s var(--ease)}
.urg-liste b{font-size:clamp(1.05rem,1rem + .3vw,1.3rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.urg-liste span{font-size:.84rem;color:#c9c9c0}
.urg-liste li:first-child a{background:var(--jaune);color:#000}
.urg-liste li:first-child span{color:#000}
.urg-liste a:focus-visible{outline-color:var(--jaune)}
@media (hover:hover){.urg-liste li:not(:first-child) a:hover{background:#3a3a3a}}
.urg-note{grid-column:2;font-size:.88rem;color:#b9b9b2}
@media (max-width:900px){.urg-in{grid-template-columns:minmax(0,1fr)}.urg-note{grid-column:1}.urg-liste{grid-template-columns:1fr 1fr}}
.pied{border-top:0}
.pied-nav{font-weight:600}

/* ---------- Apparitions et impression ---------- */
@media (prefers-reduced-motion:reduce){[data-rev]{opacity:1!important;transform:none!important}}
@media print{.sortie,.sortie-bulle,.entete,.dock,.menu,.urg,.pied{display:none!important}}

/* ---------- Retouches du 22 oct. 2026 ---------- */
/* Accueil : les chiffres seuls (l'histoire 1992 vit dans Le Centre) */
.c1.c1-seuls{padding-top:clamp(2rem,4vw,4rem)}
.c1-seuls .c1-bas{margin-top:0;display:block}
/* Nouvelles : un seul filet entre la une et la liste */
.n3-une + .n3-liste{border-top:0}
.e1-courriel{display:inline-block;margin:-.35rem 0 .85rem;font-size:.9rem;color:var(--encre-douce);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;overflow-wrap:anywhere}
@media (hover:hover){.e1-courriel:hover{color:#000;background-size:0 1px}}
.e1-lettres{text-transform:uppercase}
/* Parents : programmes en dépliants (titre + repère), thèmes à filets */
.prog summary > span{display:grid;gap:.3rem}
.prog summary small{font-size:.86rem;font-weight:500;color:var(--encre-douce);letter-spacing:0}
.themes{border-top:1px solid #000;margin:.3rem 0 .4rem}
.themes li{border-bottom:1px solid var(--ligne);padding:.5rem 0;color:#000;font-size:.98rem}
.prog .dep-corps .lien-fort{justify-self:start;color:#000}

/* ---------- Héros de l'accueil (variante B retenue le 22 oct. 2026) : l'affiche jaune et sa grille, une grande photo à coin coupé qui déborde sur la section suivante ---------- */
.heros-photo{--w:min(34vw,54svh);position:absolute;z-index:4;right:var(--marge);width:var(--w);aspect-ratio:4/5;margin:0;overflow:hidden;
  top:calc(max(40rem,100svh) - var(--w) * 1.25 + clamp(4rem,8vw,8rem));clip-path:polygon(0 0,calc(100% - 3.2rem) 0,100% 3.2rem,100% 100%,0 100%)}
.heros-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;display:block}
.h3-wrap .j3{padding-top:calc(clamp(4rem,8vw,8rem) + clamp(1.2rem,2.4vw,2.2rem))}
@media (max-width:900px){
  .heros-photo{--w:min(56vw,22rem);top:calc(max(38rem,100svh) - var(--w) * .9);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 2rem,100% 100%,0 100%)}
  .h3-wrap .j3{padding-top:calc(min(56vw,22rem) * .35 + 3rem)}
}




.don-rappel{font-size:.92rem;color:var(--encre-douce)}

/* ---------- V2 (4 nov. 2026) ---------- */
/* Ambiance : les trois photos alignées, même taille, qui mordent sur le bas du panneau jaune */
.amb .amb-ph{grid-row:2;align-self:start;aspect-ratio:4/5;width:auto;left:auto;top:auto;margin:calc(clamp(6rem,12vw,12rem) * -1) 0 0;justify-self:stretch;position:relative;z-index:1;
  clip-path:polygon(0 0,calc(100% - 2.2rem) 0,100% 2.2rem,100% 100%,0 100%)}
.amb .amb-ph2{grid-column:1 / 5}
.amb .amb-ph1{grid-column:5 / 9}
.amb .amb-ph3{grid-column:9 / 13}
.amb .amb-ph1 img{object-position:30% 50%}
@media (max-width:900px){
  .amb .amb-ph{margin-top:calc(clamp(4rem,20vw,7rem) * -1);clip-path:polygon(0 0,calc(100% - 1.2rem) 0,100% 1.2rem,100% 100%,0 100%)}
  .amb .amb-ph2{grid-column:1 / 5}.amb .amb-ph1{grid-column:5 / 9}.amb .amb-ph3{grid-column:9 / 13}
}
/* Bandeau des partenaires : séparateurs en couleur */
.n3-mq-ico svg{overflow:visible}
/* Héros : « Écoute, soutien et accompagnement. » en trois lignes, le plus long mot tient dans la colonne */
.heros .titre-geant{font-size:clamp(2.3rem,6vw,6.6rem);max-width:none}

/* ---------- Le Centre : Nos valeurs, grandes lignes numérotées à filets ---------- */
.va-liste{border-top:1.5px solid #000}
.va-liste li{display:grid;grid-template-columns:clamp(4.5rem,9vw,8.5rem) minmax(0,5fr) minmax(0,6fr);gap:.6rem clamp(1.2rem,3vw,3rem);align-items:baseline;padding:clamp(1.3rem,2.4vw,2.2rem) 0;border-bottom:1.5px solid #000}
.va-n{font-weight:800;font-size:clamp(2.6rem,5vw,4.8rem);letter-spacing:-.06em;line-height:.85}
.va-nom{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:clamp(1.8rem,3.6vw,3.6rem)}
.va-nom span{background:linear-gradient(var(--jaune),var(--jaune)) 0 88%/100% .38em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.va-liste p{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.45;color:var(--encre-douce);max-width:38rem}
@media (max-width:800px){.va-liste li{grid-template-columns:3.6rem minmax(0,1fr)}.va-liste p{grid-column:2}}
/* Notre histoire : plus loin, sobre */
.hist-liste{margin-top:1.4rem;border-top:1px solid #000}
.hist-liste li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid #000;align-items:baseline}
.hist-liste b{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.hist-liste span{color:var(--encre-douce)}
/* « Ce qui reste entre nous » : photo claire (ado et intervenante au divan) ; l'icône passe sur le mur, à gauche, loin des visages */
.p2-photo img{object-position:50% 50%}
@media (min-width:861px){.p2-icone{right:auto;left:clamp(1.5rem,5%,5rem)}.p2-on .p2-icone{right:auto;left:var(--marge)}}
@media (max-width:860px){.p2-photo img{object-position:52% 50%}}