/* ============================================================================
   4W4MI — Four Women 4 More Impact
   Système de design « Le Sceau » — 2026
   Palette, typographie et géométrie dérivées du logo officiel.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* — Cacao : le socle, la peau, le M. Extrait du médaillon du logo (#46260F) */
  --cacao-900:#1C0F06;
  --cacao-850:#241408;
  --cacao-800:#2C1A0C;
  --cacao-700:#46260F;
  --cacao-600:#5C3719;
  --cacao-500:#7A5230;

  /* — Or : ce qui a de la valeur et qui dure. Extrait du wordmark (#B9861C) */
  --or-800:#6B4A0E;
  --or-700:#7A5610;
  --or-600:#9A6F16;
  --or-500:#B9861C;
  --or-400:#C99A2E;
  --or-300:#DFBE6B;
  --or-200:#EDD9A4;

  /* — Ivoire / crème : la lumière, le W */
  --ivoire:#FFFBEA;
  --creme:#FBF7F0;
  --creme-2:#F4ECDD;
  --creme-3:#E9DDC7;

  /* — Braise : les deux points de contact, là où le soutien devient élan.
       « seal-orange » est la teinte littérale du logo : elle n'est JAMAIS
       modifiée par le sélecteur de thème. « braise » est l'accent d'interface,
       lui remappable. */
  --seal-orange:#E15B1C;
  --braise:#E15B1C;
  --accent-rgb:225 91 28;   /* pour les voiles translucides (curseur, focus) */
  --braise-700:#B4430F;   /* AA sur creme et creme-2 */
  --braise-300:#F59A62;

  /* — Les quatre arcs. Base = signe graphique · 700 = texte sur clair · 300 = sur foncé */
  --violet:#6F1D95; --violet-700:#5E1880; --violet-300:#B98BD1;
  --bleu:#20A4EA;   --bleu-700:#0F6E9E;   --bleu-300:#8ACFF4;
  --rose:#E91A98;   --rose-700:#B4126F;   --rose-300:#F58AC8;
  --vert:#11AD6D;   --vert-700:#0A7A4C;   --vert-300:#6FD3A7;

  /* — Rôles sémantiques */
  --bg:var(--creme);
  --bg-alt:var(--creme-2);
  --bg-deep:var(--cacao-850);
  --surface:#FFFDF7;
  --text:#2C1A0C;
  --text-2:#5A3D25;
  --text-3:#6E5138;      /* AA a 12px sur creme-2 */
  --on-deep:#F6EEE0;
  --on-deep-2:#C3A886;
  --on-deep-3:#A2876A;    /* AA a 10px sur cacao-800 (legendes, compte a rebours) */
  --rule:rgba(70,38,15,.22);
  --rule-2:rgba(70,38,15,.12);
  --rule-deep:rgba(246,238,224,.28);   /* contour des boutons secondaires sur foncé */
  --rule-deep-2:rgba(246,238,224,.09);
  --accent:var(--braise);
  --accent-text:var(--braise-700);

  /* — Alias de marque : les couleurs du sceau, nommées une seule fois */
  --color-chocolate:var(--cacao-900);
  --color-ivory:var(--ivoire);
  --color-gold:var(--or-500);
  --color-orange:var(--seal-orange);
  --ink-rgb:28 15 6;      /* chocolat, pour les voiles et les ombres */
  --shade-rgb:14 8 3;     /* ombre photographique du Hero */

  /* — Typographie */
  --display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* — Espacement */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;  --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;  --s10:8rem;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section:clamp(4.5rem,10vw,9rem);
  --section-sm:clamp(3rem,6vw,5rem);

  /* — Formes : le sceau est fait de cercles et de droites. Presque aucun rayon. */
  --r-0:0px; --r-1:2px; --r-2:4px; --r-pill:999px;

  /* — Conteneurs */
  --w-page:1240px;
  --w-text:66ch;

  /* — Mouvement */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.18s var(--e-out);
  --t:.32s var(--e-out);

  --nav-h:76px;
  /* Commandes flottantes (thème, WhatsApp) : retrait, taille, et zone à leur
     réserver quand du contenu se termine dans leur coin. */
  --float-inset:clamp(1rem,3vw,1.75rem);
  --float-size:54px;
  --float-safe:calc(var(--float-inset) + var(--float-size) + .75rem);
}
@media (max-width:900px){ :root{ --nav-h:64px; } }

/* ---------------------------------------------------- 1b. THÈMES D'ACCENT */
/* « Original » = aucun attribut : les valeurs ci-dessus reprennent la main.
   Chaque thème réutilise les trois tons déjà vérifiés AA de la couleur :
   base (signe graphique) · 700 (texte sur clair) · 300 (texte sur foncé). */
:root[data-theme="violet"]{ --braise:var(--violet); --braise-700:var(--violet-700); --braise-300:var(--violet-300); --accent-rgb:111 29 149; }
:root[data-theme="bleu"]  { --braise:var(--bleu);   --braise-700:var(--bleu-700);   --braise-300:var(--bleu-300); --accent-rgb:32 164 234; }
:root[data-theme="vert"]  { --braise:var(--vert);   --braise-700:var(--vert-700);   --braise-300:var(--vert-300); --accent-rgb:17 173 109; }
:root[data-theme="rose"]  { --braise:var(--rose);   --braise-700:var(--rose-700);   --braise-300:var(--rose-300); --accent-rgb:233 26 152; }
/* --accent / --accent-text suivent automatiquement puisqu'ils pointent sur
   --braise ; focus, liens, survols de boutons, champs et curseur aussi. */
:root[data-theme]{ --accent:var(--braise); --accent-text:var(--braise-700); }



/* ------------------------------------------------------------------ 2. BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.7;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4,h5{ margin:0; font-weight:500; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
figure,blockquote{ margin:0; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }
::selection{ background:var(--or-300); color:var(--cacao-900); }

:focus-visible{ outline:2px solid var(--braise); outline-offset:3px; border-radius:var(--r-1); }
.section--deep :focus-visible,.hero :focus-visible,.closer :focus-visible,
.footer :focus-visible,.drawer :focus-visible{ outline-color:var(--braise-300); }

.skip-link{
  position:fixed; top:0; left:50%; transform:translate(-50%,-140%); z-index:900;
  background:var(--cacao-900); color:var(--ivoire); padding:.85rem 1.5rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:transform var(--t);
}
.skip-link:focus-visible{ transform:translate(-50%,0); }

/* --------------------------------------------------------- 3. TYPOGRAPHIE */
.display-1,.display-2,.display-3,.display-4{
  font-family:var(--display); font-weight:500; letter-spacing:-.015em; text-wrap:balance;
}
.display-1{ font-size:clamp(2.6rem,6.5vw,5.1rem); line-height:.98; letter-spacing:-.025em; }
.display-2{ font-size:clamp(2.1rem,4.8vw,3.9rem); line-height:1.03; letter-spacing:-.02em; }
.display-3{ font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.12; }
.display-4{ font-size:clamp(1.25rem,1.9vw,1.65rem); line-height:1.25; letter-spacing:-.01em; }
.display-1 em,.display-2 em,.display-3 em,.display-4 em{ font-style:italic; font-weight:400; color:var(--or-700); }
.section--deep .display-1 em,.section--deep .display-2 em,.section--deep .display-3 em,
.hero em,.closer em,.poster__body em{ color:var(--or-300); }

/* Le lettrage très espacé de la baseline du logo : « F O U R  W O M E N » */
.label{
  display:inline-flex; align-items:center; gap:.75em;
  font-size:.75rem; font-weight:600; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or-700);
}
.label::before{ content:''; flex:none; width:1.75rem; height:1px; background:currentColor; opacity:.55; }
.label--bare::before{ display:none; }
.section--deep .label,.hero .label,.closer .label,.poster .label{ color:var(--or-300); }

.lede{
  font-size:clamp(1.0625rem,.99rem + .42vw,1.3125rem);
  line-height:1.62; color:var(--text-2); max-width:56ch;
}
.section--deep .lede,.hero .lede,.closer .lede,.poster .lede{ color:var(--on-deep-2); }

.prose{ max-width:var(--w-text); color:var(--text); }
.prose > * + *{ margin-top:1.15em; }
.prose strong{ color:var(--text); font-weight:600; }
.prose em{ font-style:italic; }
.prose a,.link{
  color:var(--accent-text); font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--e-out),color var(--t);
}
.prose a:hover,.link:hover{ background-size:0 1px; background-position:100% 100%; }
.link{ display:inline-flex; align-items:center; gap:.5em; font-size:.9375rem; font-weight:600; }
.section--deep .prose{ color:var(--on-deep-2); }
.section--deep .prose strong{ color:var(--on-deep); }
.section--deep .prose a,.section--deep .link,.closer .link{ color:var(--or-300); }

.small{ font-size:.875rem; line-height:1.6; color:var(--text-3); }
.section--deep .small{ color:var(--on-deep-3); }

/* ------------------------------------------------------------------ 4. GRILLE */
.wrap{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); position:relative; }
.section--sm{ padding-block:var(--section-sm); }
.section--deep{ background:var(--bg-deep); color:var(--on-deep); }
.section--alt{ background:var(--bg-alt); }
.section--deep.section--cacao{ background:var(--cacao-800); }
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{ color:var(--on-deep); }

.section-head{ max-width:60ch; }
.section-head > * + *{ margin-top:var(--s4); }
.head-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }

/* Filet à quatre couleurs — la signature graphique du sceau, mise à plat. */
.rule-4{ display:flex; width:100%; height:2px; overflow:hidden; }
.rule-4 > i{ flex:1; }
.rule-4 > i:nth-child(1){ background:var(--violet); }
.rule-4 > i:nth-child(2){ background:var(--bleu); }
.rule-4 > i:nth-child(3){ background:var(--vert); }
.rule-4 > i:nth-child(4){ background:var(--rose); }

/* ---------------------------------------------------------------- 5. BOUTONS */
/* Principal : plein, contrasté. Secondaire : contour discret. Survol sobre :
   léger soulèvement, changement de fond ou de bordure, aucun effet de reflet. */
.btn{
  --btn-bg:var(--cacao-800); --btn-fg:var(--ivoire); --btn-bd:transparent;
  --btn-bg-h:var(--cacao-700); --btn-fg-h:var(--ivoire); --btn-bd-h:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  min-height:50px; padding:.85rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--r-1);
  font-size:.9375rem; font-weight:600; letter-spacing:.01em; line-height:1;
  text-align:center; position:relative;
  transition:background-color var(--t),color var(--t),border-color var(--t),transform var(--t-fast),box-shadow var(--t);
}
.btn:hover,.btn:focus-visible{ background:var(--btn-bg-h); color:var(--btn-fg-h); border-color:var(--btn-bd-h); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn .icon{ flex:none; transition:transform var(--t); }
.btn:hover .icon--arrow{ transform:translateX(3px); }
.btn--gold{ --btn-bg:var(--or-500); --btn-fg:var(--cacao-900); --btn-bg-h:var(--or-400); --btn-fg-h:var(--cacao-900);
  box-shadow:0 10px 24px -18px rgb(var(--ink-rgb) / .7); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--rule);
  --btn-bg-h:rgb(var(--ink-rgb) / .04); --btn-fg-h:var(--text); --btn-bd-h:var(--text); }
.section--deep .btn--ghost,.hero .btn--ghost,.closer .btn--ghost,.drawer .btn--ghost,
.poster .btn--ghost,.section--brown .btn--ghost,.footer .btn--ghost{
  --btn-fg:var(--on-deep); --btn-bd:var(--rule-deep);
  --btn-bg-h:rgb(246 238 224 / .08); --btn-fg-h:var(--ivoire); --btn-bd-h:var(--on-deep-2); }
/* WhatsApp : blanc sur vert foncé (contraste AA). */
.btn--wa{ --btn-bg:var(--vert-700); --btn-fg:#fff; --btn-bg-h:#075C39; --btn-fg-h:#fff; }
.btn--sm{ min-height:42px; padding:.55rem 1.05rem; font-size:.8125rem; }
.btn--block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.875rem; }

/* ----------------------------------------------------------------- 6. ICÔNES */
.icon{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon--lg{ width:1.35em; height:1.35em; }

/* ----------------------------------------------------------------- 7. SCEAU */
/* Le sceau officiel : image recadrée depuis le logo officiel, sans aucune
   recréation (médaillon, quatre arcs et quatre points d'or d'origine). */
.seal-img{ display:block; width:100%; height:auto; max-width:none; aspect-ratio:1;
  -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* ------------------------------------------------------------ 8. NAVIGATION */
/* Reserve la hauteur du header injecte par chrome.js : aucun decalage au montage.
   Sans JS, c'est la barre .nojs-bar qui occupe le flux, donc pas de cale. */
.nav-spacer{ display:none; height:var(--nav-h); }
.has-js .nav-spacer{ display:block; }
/* Transparent en haut de page ; chocolat profond dès que l'on défile. */
.nav{
  position:fixed; inset:0 0 auto; z-index:200; height:var(--nav-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .4s var(--e-out),border-color .4s var(--e-out),box-shadow .4s var(--e-out);
}
.nav.is-stuck{ background:rgb(var(--ink-rgb) / .97); border-bottom-color:rgb(246 238 224 / .08);
  box-shadow:0 16px 36px -28px rgb(0 0 0 / .9); }
.nav__inner{ display:flex; align-items:center; gap:var(--s5); height:100%; }
.nav__logo{ flex:none; display:flex; align-items:center; height:100%; }
.nav__logo img{ height:clamp(30px,4.2vw,40px); width:auto; }
/* Sur fond sombre (header défilé, ou au-dessus de la photo du Hero), le logo
   officiel repose sur son cartouche crème : son lettrage brun reste lisible. */
.nav.is-stuck .nav__logo img,
body[data-page="accueil"] .nav:not(.is-stuck) .nav__logo img{ box-sizing:content-box; padding:.3rem .55rem;
  background:var(--creme); border-radius:var(--r-1); }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem); margin-inline:auto; }
.nav__links a{ position:relative; padding:.5rem 0; font-size:.875rem; font-weight:500;
  color:var(--text-2); transition:color var(--t); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:.1rem; height:1.5px; width:100%;
  background:var(--braise); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .34s var(--e-out);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__links a[aria-current="page"]{ color:var(--text); font-weight:600; }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); background:var(--or-500); }
.nav__end{ flex:none; display:flex; align-items:center; gap:.75rem; }
/* Liens clairs sur fond sombre. */
.nav.is-stuck .nav__links a,
body[data-page="accueil"] .nav:not(.is-stuck) .nav__links a{ color:rgb(246 238 224 / .8); }
body[data-page="accueil"] .nav:not(.is-stuck) .nav__links a{ text-shadow:0 1px 12px rgb(var(--shade-rgb) / .55); }
.nav.is-stuck .nav__links a:hover,.nav.is-stuck .nav__links a[aria-current="page"],
body[data-page="accueil"] .nav:not(.is-stuck) .nav__links a:hover,
body[data-page="accueil"] .nav:not(.is-stuck) .nav__links a[aria-current="page"]{ color:var(--ivoire); }
.nav.is-stuck .burger__box span,
body[data-page="accueil"] .nav:not(.is-stuck) .burger__box span{ background:var(--ivoire); }
.nav.is-stuck .burger:hover,
body[data-page="accueil"] .nav:not(.is-stuck) .burger:hover{ background:rgb(246 238 224 / .1); }
.nav.is-stuck :focus-visible,
body[data-page="accueil"] .nav:not(.is-stuck) :focus-visible{ outline-color:var(--braise-300); }

.burger{ display:none; place-items:center; width:46px; height:46px; margin-right:-10px;
  border-radius:var(--r-pill); transition:background var(--t); }
.burger:hover{ background:rgba(70,38,15,.07); }
.burger__box{ position:relative; width:22px; height:12px; }
.burger__box span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--text);
  transition:transform .38s var(--e-in-out),width .38s var(--e-in-out),background var(--t); }
.burger__box span:nth-child(1){ top:0; }
.burger__box span:nth-child(2){ bottom:0; width:70%; }
.burger[aria-expanded="true"] .burger__box span{ background:var(--ivoire); }
.burger[aria-expanded="true"] .burger__box span:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2){ width:100%; transform:translateY(-5.25px) rotate(-45deg); }
.nav.is-open{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; box-shadow:none; }

.drawer{
  position:fixed; inset:0; z-index:190; background:var(--cacao-900); color:var(--on-deep);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 1.25rem) var(--gutter) max(1.75rem,env(safe-area-inset-bottom));
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;   /* le filigrane ne deborde jamais */
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .52s var(--e-in-out),visibility 0s linear .52s;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .52s var(--e-in-out),visibility 0s; }
.drawer__ring{ position:absolute; top:14%; right:-30%; width:min(92vw,460px);
  opacity:.14; pointer-events:none; }
.drawer__links{ display:flex; flex-direction:column; margin-block:auto;
  position:relative; z-index:1; counter-reset:d; }
.drawer__links a{
  display:flex; align-items:baseline; gap:1rem; padding:.45rem 0;
  border-bottom:1px solid var(--rule-deep-2);
  font-family:var(--display); font-size:clamp(1.65rem,7.5vw,2.4rem); font-weight:400;
  line-height:1.35; color:var(--on-deep);
  opacity:0; transform:translateY(14px);
  transition:color var(--t),opacity .5s var(--e-out),transform .5s var(--e-out);
}
.drawer.is-open .drawer__links a{ opacity:1; transform:none;
  transition-delay:calc(.14s + var(--i,0) * .05s); }
.drawer__links a:hover,.drawer__links a[aria-current="page"]{ color:var(--or-300); }
.drawer__foot{ display:flex; flex-direction:column; gap:.75rem; position:relative; z-index:1; padding-top:1.75rem; }
.drawer__meta{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; padding-top:1.25rem;
  margin-top:.35rem; border-top:1px solid var(--rule-deep-2); }
.drawer__meta a,.drawer__meta span{ display:inline-block; padding-block:4px; font-size:.8125rem; color:var(--on-deep-2); }
.drawer__meta a:hover{ color:var(--or-300); }

@media (max-width:980px){
  .nav__links{ display:none; }
  .burger{ display:grid; }
  /* Le CTA d'inscription reste accessible sur mobile, à côté du menu. */
  .nav__end{ margin-left:auto; }
  .nav__end .btn{ min-height:38px; padding:.5rem .85rem; font-size:.8125rem; }
}
@media (max-width:380px){
  .nav__inner{ gap:.6rem; }
  .nav__end{ gap:.35rem; }
  .nav__end .btn{ padding:.45rem .7rem; }
}
body.is-locked{ overflow:hidden; }

/* --------------------------------------------------------- 9. PIED DE PAGE */
.footer{ position:relative; background:var(--color-chocolate); color:var(--on-deep-2);
  padding-top:clamp(3.5rem,7vw,5.5rem); }
.footer__rule{ position:absolute; left:0; right:0; top:0; height:3px; }
.footer__intro{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:1.5rem clamp(2rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--rule-deep-2); }
/* Le logo officiel sur son cartouche crème : son lettrage brun reste lisible. */
.footer__logo img{ box-sizing:content-box; height:40px; width:auto; padding:.7rem 1rem;
  background:var(--creme); border-radius:var(--r-1); }
.footer__claim{ max-width:48ch; font-size:.9375rem; line-height:1.7; }
.footer__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.footer__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.5rem clamp(2rem,5vw,4rem); padding-block:clamp(2.5rem,5vw,3.5rem); }
.footer h3{ font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  color:var(--or-300); margin-bottom:1.1rem; }
.footer ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer li{ font-size:.9375rem; line-height:1.5; }
.footer ul a{ display:inline-block; padding-block:3px; transition:color var(--t); }
.footer ul a:hover{ color:var(--ivoire); }
.footer__contact li{ display:flex; align-items:flex-start; gap:.65rem; }
.footer__contact .icon{ margin-top:.32em; color:var(--or-500); }
.footer__bottom{ padding-block:1.5rem; border-top:1px solid var(--rule-deep-2);
  font-size:.8125rem; color:var(--on-deep-3); }
/* Sous 1340px, les commandes flottantes croisent la dernière ligne du footer,
   que l'on ne peut plus faire défiler : elle leur réserve leur zone. */
@media (max-width:1339px){ .footer__bottom{ padding-bottom:var(--float-safe); } }
@media (max-width:1023px){ .footer__intro{ grid-template-columns:1fr; justify-items:start; } }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__grid > :last-child{ grid-column:1/-1; } }
@media (max-width:480px){ .footer__grid{ grid-template-columns:1fr; } }

.wa-float{
  position:fixed; right:var(--float-inset); bottom:var(--float-inset); z-index:150;
  display:flex; align-items:center; gap:0; overflow:hidden;
  height:var(--float-size); padding:0 15px; border-radius:var(--r-pill);
  background:#157A43; color:#fff; box-shadow:0 14px 34px -12px rgba(21,122,67,.6);
  transition:gap var(--t),padding var(--t),transform var(--t);
}
.wa-float .icon{ width:24px; height:24px; }
.wa-float span{ max-width:0; opacity:0; white-space:nowrap; font-size:.875rem; font-weight:600;
  transition:max-width .4s var(--e-out),opacity .25s linear; }
.wa-float:hover,.wa-float:focus-visible{ gap:.6rem; padding-right:20px; transform:translateY(-2px); }
.wa-float:hover span,.wa-float:focus-visible span{ max-width:180px; opacity:1; }

/* ------------------------------------------------------- 10. EN-TÊTE DE PAGE */
.phead{ position:relative; overflow:hidden;
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,4rem); }
.phead__inner{ position:relative; z-index:1; }
.phead__inner .display-1{ max-width:18ch; }
.phead__inner .lede{ max-width:52ch; }
.phead .display-1{ margin-top:1.5rem; }
.phead .lede{ margin-top:1.5rem; }
.phead__ring{ position:absolute; top:50%; right:calc(var(--gutter) * -1); translate:0 -50%;
  width:min(44vw,430px); opacity:.1; pointer-events:none; }
/* Sous 420px le filigrane n'apporte plus rien et deborderait de 9px :
   on le retire plutot que de compter sur le rognage du conteneur. */
@media (max-width:420px){ .phead__ring{ display:none; } }
.phead .rule-4{ max-width:180px; margin-top:2.5rem; }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:.8125rem; color:var(--text-3); }
.crumb a{ display:inline-block; padding-block:4px; transition:color var(--t); }
.crumb a:hover{ color:var(--accent-text); }
.crumb .icon{ width:.8em; height:.8em; opacity:.5; }
.crumb [aria-current]{ color:var(--text-2); }

/* ------------------------------------------------------------- 11. ACCUEIL */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:max(100svh, 36rem);
  display:flex; align-items:flex-end;
  background:var(--cacao-900); color:var(--on-deep);
}
/* La photographie EST le fond du Hero : plein écran, object-fit:cover
   (l'équivalent de background-size:cover, avec srcset et chargement
   prioritaire). Cadrage propre à chaque photo (--pos ; --pos-m sur mobile). */
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__zoom{ position:absolute; inset:0; }
/* L'image sortante garde sa visibilité pendant tout le fondu enchaîné. */
.hero__slide{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity 1.6s var(--e-out), visibility 0s linear 1.6s; }
.hero__slide.is-active{ z-index:1; opacity:1; visibility:visible;
  transition:opacity 1.6s var(--e-out), visibility 0s; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 25%); }
/* Mouvement extrêmement lent : scale(1) → scale(1.04) et léger glissement.
   Il redémarre à chaque activation (classe retirée puis remise). */
.hero__slide.is-active img{ animation:hero-drift 8.8s cubic-bezier(.45,.05,.55,.95) both; will-change:transform; }
@keyframes hero-drift{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.04) translate3d(-.7%,-.5%,0); }
}
/* Dégradé LOCALISÉ au bas de l'image, là où vit le texte. La moitié haute
   (où sont les visages) ne reçoit ni voile, ni flou, ni filtre. */
.hero__shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgb(var(--shade-rgb) / .84) 0%, rgb(var(--shade-rgb) / .7) 28%, rgb(var(--shade-rgb) / .5) 44%, rgb(var(--shade-rgb) / .14) 54%, rgb(var(--shade-rgb) / 0) 62%),
    radial-gradient(70% 60% at 0% 100%, rgb(var(--shade-rgb) / .3) 0%, rgb(var(--shade-rgb) / 0) 70%); }

/* Voile très court en haut, sous le header transparent seulement (au-dessus
   des visages) : les liens restent lisibles sur la photographie. */
.hero__shade::before{ content:''; position:absolute; left:0; right:0; top:0; height:calc(var(--nav-h) + 3rem);
  background:linear-gradient(to bottom, rgb(var(--shade-rgb) / .5), rgb(var(--shade-rgb) / 0)); }

.hero__inner{ position:relative; z-index:2; width:100%;
  padding-block:clamp(2rem,4vw,3.5rem) clamp(2.25rem,4.5vw,3.75rem); }
.hero__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.hero__rule{ width:clamp(88px,10vw,140px); height:3px; }
.hero__title{ margin-top:clamp(1.1rem,2vw,1.5rem); font-family:var(--display); font-weight:500;
  font-size:clamp(2.5rem,6vw,5.6rem); line-height:.95; letter-spacing:-.028em;
  color:var(--ivoire); text-shadow:0 2px 26px rgba(10,5,2,.4); }
.hero__title em{ font-style:italic; font-weight:400; color:var(--or-300); }
.hero__tagline{ margin-top:clamp(.75rem,1.4vw,1.1rem); max-width:44ch;
  font-size:clamp(1rem,.95rem + .35vw,1.25rem); line-height:1.5; color:var(--on-deep);
  text-shadow:0 1px 16px rgba(10,5,2,.55); }
/* Accroche, activités et appel à découvrir l'histoire : une seule rangée sur
   grand écran, pour que le bloc reste bas, sous les visages. */
.hero__lead{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem 2.5rem; max-width:64rem; }
.hero__intro{ margin-top:.35rem; max-width:52ch; font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);
  line-height:1.5; color:rgb(246 238 224 / .86); text-shadow:0 1px 14px rgba(10,5,2,.6); }
.hero .hero__cta{ flex:none; --btn-bd:rgb(246 238 224 / .6); --btn-bg:rgb(var(--shade-rgb) / .2); }
@media (max-width:520px){ .hero .hero__cta{ min-height:44px; padding:.65rem 1.1rem; font-size:.875rem; } }

/* Les quatre noms : une ligne éditoriale, un accent de couleur par femme
   (les quatre couleurs des arcs du sceau). Ni cartes, ni blocs. */
.hero__names{ margin-top:clamp(1.5rem,3vw,2.4rem); max-width:64rem;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem clamp(1rem,2.4vw,2.25rem); }
.hero__names li{ padding-top:.7rem; border-top:2px solid var(--na); }
.hero__names a{ font-family:var(--display); font-size:clamp(1rem,.9rem + .45vw,1.3rem); line-height:1.25;
  color:var(--nc); text-shadow:0 1px 14px rgba(10,5,2,.6);
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .45s var(--e-out); }
.hero__names a:hover,.hero__names a:focus-visible{ background-size:100% 1px; }
.hero__names .sep{ opacity:.55; }

/* Petits éléments graphiques : compteur et progression du diaporama. */
.hero__slidenav{ display:flex; align-items:center; gap:.9rem; }
.hero__counter{ font-family:var(--display); font-size:1rem; letter-spacing:.04em; color:var(--on-deep);
  text-shadow:0 1px 12px rgba(10,5,2,.6); }
.hero__counter b{ font-weight:500; color:var(--or-300); }
.hero__counter-sep{ opacity:.5; margin:0 .1rem; }
.hero__progress{ display:flex; gap:.35rem; }
.hero__progress button{ position:relative; width:34px; height:24px; padding:0; border:0; background:none; cursor:pointer; }
.hero__progress button::before,
.hero__progress i{ content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; }
.hero__progress button::before{ background:rgba(255,247,237,.38); }
.hero__progress i{ background:var(--or-300); transform:scaleX(0); transform-origin:0 50%; }
.hero__progress button.is-done i{ transform:scaleX(1); }
.hero__progress button.is-on i{ animation:hero-progress var(--hero-delay,7000ms) linear forwards; }
@keyframes hero-progress{ to{ transform:scaleX(1); } }
.hero__progress button:focus-visible{ outline:2px solid var(--or-300); outline-offset:2px; }

/* Écrans d'ordinateur peu hauts : le bloc se resserre pour rester sous les visages. */
@media (min-width:1024px) and (max-height:820px){
  .hero__title{ font-size:clamp(2.4rem,4.6vw,4.3rem); }
  .hero__names{ margin-top:1.3rem; }
  .hero__inner{ padding-bottom:2.25rem; }
}
/* Très peu hauts (1280 × 720…) : le titre et l'espacement se resserrent encore. */
@media (min-width:1024px) and (max-height:760px){
  .hero__title{ font-size:clamp(2.2rem,3.9vw,3.4rem); }
  .hero__names{ margin-top:1rem; }
}
@media (max-width:1023px){
  .hero__names{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:40rem; }
  /* En portrait, le texte occupe une part plus haute de l'écran : le dégradé
     monte un peu plus, sans atteindre la zone des visages. */
  .hero__shade{ background:
    linear-gradient(to top, rgb(var(--shade-rgb) / .86) 0%, rgb(var(--shade-rgb) / .72) 32%, rgb(var(--shade-rgb) / .48) 48%, rgb(var(--shade-rgb) / .12) 57%, rgb(var(--shade-rgb) / 0) 63%); }
}
/* Mobile : toujours la photographie en fond (jamais une colonne), cadrage
   dédié pour garder un visage entier au centre. */
@media (max-width:767px){
  .hero__slide img{ object-position:var(--pos-m, var(--pos, 50% 25%)); }
  /* En portrait, la photo occupe toute la hauteur : chacune remonte d'une
     fraction mesurée (--lift-m), sans couper les visages, pour qu'ils restent
     au-dessus du texte. */
  .hero__slide img{ position:absolute; left:0; top:calc(var(--lift-m, 0) * -100%);
    height:calc(100% * (1 + var(--lift-m, 0))); }
  /* Le compteur de photos laisse sa place au texte ; le diaporama continue. */
  .hero__top{ display:none; }
  .hero__title{ margin-top:0; }
}
@media (max-width:520px){
  .hero{ min-height:max(100svh, 40rem); }
  .hero__names{ grid-template-columns:1fr; gap:.5rem; }
  .hero__names li{ padding:.05rem 0 .05rem .75rem; border-top:0; border-left:3px solid var(--na); }
  .hero__progress button{ width:24px; }
}
/* Très petits téléphones : Hero un peu plus haut et titre resserré, pour que
   le texte reste nettement sous les visages. */
@media (max-width:380px){
  .hero{ min-height:max(100svh, 46rem); }
  .hero__title{ font-size:2.3rem; }
  .hero__names{ gap:.4rem; }
}
/* Mobile : le Hero met en avant les quatre femmes — un carrousel plein cadre,
   une photo à la fois, fondu enchaîné. Masqué sur ordinateur. */
.hero__women{ display:none; }
.hero__wslide{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--e-out), visibility 0s linear 1.1s; }
.hero__wslide.is-active{ opacity:1; visibility:visible; transition:opacity 1.1s var(--e-out), visibility 0s; }
.hero__wslide img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos-m,50% 22%); }
.hero__carousel-ui{ display:none; }
.hero__wname{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-size:clamp(1.15rem,1rem + 1.2vw,1.4rem); font-weight:500; color:var(--ivoire);
  text-shadow:0 1px 16px rgba(10,5,2,.7);
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .45s var(--e-out); }
.hero__wname:hover,.hero__wname:focus-visible{ background-size:100% 1px; }
.hero__wname .dot{ width:10px; height:10px; border-radius:50%; background:var(--wc,var(--or-300)); flex:none; }
.hero__wdots{ display:flex; gap:.45rem; margin-top:.85rem; }
.hero__wdots button{ position:relative; width:28px; height:26px; padding:0; border:0; background:none; cursor:pointer; }
.hero__wdots button::before{ content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:rgba(255,247,237,.4); transition:background .3s var(--e-out); }
.hero__wdots button[aria-current="true"]::before{ background:var(--or-300); }
.hero__wdots button:focus-visible{ outline:2px solid var(--or-300); outline-offset:2px; }
@media (max-width:767px){
  .hero__slides{ display:none; }
  .hero__women{ display:block; position:absolute; inset:0; z-index:0; }
  .hero__names{ display:none; }
  .hero__carousel-ui{ display:block; margin-top:clamp(1.25rem,4vw,1.75rem); }
}

/* Commandes flottantes : là où la colonne de texte les croise, le bas du Hero
   leur réserve leur zone, pour qu'aucun nom ne soit recouvert au premier écran.
   Seulement quand le texte reste nettement sous les visages (vérifié par mesure,
   1024–1339 × 720+ et tablettes / grands téléphones 880+) : ailleurs, la règle
   « jamais de texte sur les visages » prime. */
@media (min-width:1024px) and (max-width:1339px) and (min-height:720px),
       (max-width:1023px) and (min-height:880px){
  .hero__inner{ padding-bottom:var(--float-safe); }
}
@media (prefers-reduced-motion:reduce){
  .hero__slide.is-active img{ animation:none!important; }
  .hero__progress button.is-on i{ animation:none!important; transform:scaleX(1); }
}

/* Manifeste */
.manifesto{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,6vw,5rem); align-items:start; }
.manifesto__side{ position:sticky; top:calc(var(--nav-h) + 2rem); }
.manifesto__side .display-3{ margin-top:1.25rem; }
.manifesto__body > p:not(.label){ font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem); line-height:1.55;
  color:var(--text); max-width:46ch; }
.manifesto__body > p:not(.label) + p{ margin-top:1.25rem; }
.manifesto__pull{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:2rem;
  border-top:1px solid var(--rule); display:grid; gap:1.25rem; }
.manifesto__pull q{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem); line-height:1.4; color:var(--text);
  quotes:'\00ab\00a0' '\00a0\00bb'; }
.manifesto__pull footer{ display:flex; align-items:center; gap:.75rem; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--or-700); font-weight:600; }
.dots2{ display:inline-flex; gap:.4rem; }
.dots2 i{ width:9px; height:9px; border-radius:50%; background:var(--seal-orange); }
@media (max-width:820px){ .manifesto{ grid-template-columns:1fr; } .manifesto__side{ position:static; } }

/* ── « Notre identité » : logo réel + galerie éditoriale des quatre femmes ── */
.manifesto__logo{
  display:block; height:clamp(42px,5.5vw,62px); width:auto; max-width:100%;
  object-fit:contain; margin-bottom:1.5rem;
}
.manifesto__body .label{ margin-bottom:1.25rem; }

/* ------------------------------------------- 11c. CARTES ÉQUIPE (ACCUEIL) */
/* Quatre cartes strictement identiques : même largeur de colonne, même ratio
   d'image, même hauteur totale. Les visages ont été recadrés en amont pour
   se poser au même endroit dans chaque cadre. */
.team-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem); align-items:stretch;
}
.tcard{ display:flex; flex-direction:column; height:100%; }
.tcard__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--cacao-900); border-radius:var(--r-1);
}
.tcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--e-out);
}
.tcard:hover .tcard__media img{ transform:scale(1.05); }
/* Le filet de couleur signe la carte au survol. */
.tcard__media::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:var(--fc); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--e-out);
}
.tcard:hover .tcard__media::before{ transform:scaleX(1); }

.tcard__body{ display:flex; flex-direction:column; gap:.35rem; padding-top:1rem; flex:1; }
.tcard__name{
  font-family:var(--display); font-size:clamp(1.02rem,1.4vw,1.2rem);
  font-weight:500; line-height:1.2; color:var(--text);
  /* Deux lignes reservees : les quatre cartes gardent exactement la meme
     hauteur, que le nom tienne sur une ou deux lignes. */
  min-height:2.4em;
  transition:color var(--t);
}
.tcard:hover .tcard__name{ color:var(--fc-text); }
.tcard__firm{
  font-size:.75rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fc-text);
}
.tcard__role{ font-size:.875rem; line-height:1.5; color:var(--text-2); margin-top:auto; padding-top:.5rem; }

@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .team-grid{ grid-template-columns:1fr; gap:1.75rem; } }

/* Le sceau annoté */
.seal-figure{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,6vw,5rem); align-items:center; }
/* Le sceau officiel seul : aucune couche ajoutée autour. Seulement une
   lumière très douce derrière (sans contour) et une ombre qui suit sa forme. */
.seal-figure__art{ position:relative; display:grid; place-items:center; aspect-ratio:1;
  padding:clamp(1rem,4vw,2.5rem); margin:0; }
.seal-figure__art::before{
  content:''; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(223,190,107,.08), transparent);
}
.seal-figure__turn{ position:relative; display:block; width:100%; }
/* Ombre et balancement sur le conteneur : l'image entière comme ses étapes de
   construction partagent exactement le même mouvement. */
.seal-figure__turn{ filter:drop-shadow(0 28px 42px rgba(0,0,0,.45)); }
.seal-figure__art .seal-img{ transition:transform 1.2s var(--e-out); }
.seal-figure__art:hover .seal-img{ transform:scale(1.035); }
.seal-notes li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem;
  align-items:start; padding-block:1.2rem; border-top:1px solid var(--rule-deep-2); }
.seal-notes li:last-child{ border-bottom:1px solid var(--rule-deep-2); }
/* Repère : une pastille dans la couleur réelle de l'élément décrit
   (M or, W ivoire, points orange, arcs aux quatre couleurs). */
.seal-notes li::before{ content:''; width:10px; height:10px; margin-top:.5rem; border-radius:50%;
  background:var(--nc,var(--or-500)); }
.seal-notes li:nth-child(2){ --nc:var(--ivoire); }
.seal-notes li:nth-child(3){ --nc:var(--seal-orange); }
.seal-notes li:nth-child(4){ --nc:conic-gradient(var(--violet) 0 25%, var(--bleu) 0 50%, var(--vert) 0 75%, var(--rose) 0); }
.seal-notes h3{ font-family:var(--display); font-size:1.2rem; font-weight:500; color:var(--on-deep); }
.seal-notes p{ margin-top:.4rem; font-size:.9375rem; line-height:1.65; color:var(--on-deep-2); }
@media (max-width:860px){
  .seal-figure{ grid-template-columns:1fr; }
  /* Largeur explicite : « margin-inline:auto » fait passer l'element en
     shrink-to-fit, et le medaillon (en %) s'effondrerait a zero. */
  .seal-figure__art{ width:min(330px,100%); margin-inline:auto; }
}

/* Affiche « prochain rendez-vous » */
.poster{ display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(1.5rem,5vw,3.5rem); align-items:center; }
.poster__date{ text-align:center; }
.poster__day{ display:block; font-family:var(--display); font-size:clamp(4rem,12vw,8.5rem);
  line-height:.8; color:var(--or-300); letter-spacing:-.04em; }
.poster__month{ display:block; margin-top:.9rem; font-size:.75rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--on-deep-2); }
.poster__rule{ width:1px; align-self:stretch; background:var(--rule-deep); }
.poster__body .display-2{ margin-top:1rem; }
.poster__meta{ display:flex; flex-wrap:wrap; gap:.6rem 2.25rem; margin-top:1.75rem;
  padding-top:1.5rem; border-top:1px solid var(--rule-deep-2); }
.poster__meta div{ display:flex; align-items:center; gap:.6rem; font-size:.9375rem; color:var(--on-deep-2); }
.poster__meta .icon{ color:var(--or-500); }
.poster .btn-row{ margin-top:2rem; }
@media (max-width:520px){
  .poster .countdown{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 1.5rem; }
  .poster .countdown__lbl{ font-size:.75rem; letter-spacing:.14em; }
}
@media (max-width:820px){
  .poster{ grid-template-columns:1fr; gap:1.5rem; }
  .poster__date{ text-align:left; display:flex; align-items:baseline; gap:1rem; }
  .poster__day{ font-size:clamp(3.25rem,17vw,5rem); }
  .poster__month{ margin-top:0; }
  .poster__rule{ width:100%; height:1px; }
}

/* ── Prochain rendez-vous : composition éditoriale à deux photographies ──
   Tête (titre + date monumentaux), puis une scène asymétrique : l'image
   principale part du bord gauche de l'écran, la seconde la chevauche
   uniquement sur une zone sans visage, le texte vit dans sa propre colonne. */
.section--deep.rdv{
  position:relative; overflow:hidden;
  padding-block:clamp(4rem,8vw,7.5rem) clamp(4.5rem,9vw,8rem);
  /* Prolonge le fond du Hero : les deux sections se fondent l'une dans l'autre. */
  background:linear-gradient(180deg, var(--cacao-900) 0, var(--cacao-800) clamp(8rem,22vw,20rem));
}
.rdv__topline{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; }
.rdv__rule{ margin-top:1.4rem; height:2px; }
.rdv__titlerow{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:1.25rem clamp(2rem,5vw,4rem); margin-top:clamp(1.75rem,3.5vw,2.75rem); }
.rdv .rdv__title{ font-family:var(--display); font-weight:500; color:var(--ivoire);
  font-size:clamp(2.9rem,8.2vw,7.6rem); line-height:.92; letter-spacing:-.03em; }
.rdv__title em{ font-style:italic; font-weight:400; color:var(--or-300); }
.rdv__title .line + .line{ padding-left:clamp(1.75rem,11vw,10rem); }
.rdv__date{ display:flex; align-items:flex-end; gap:1rem; margin:0; padding-bottom:.35rem; }
.rdv__day{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(4rem,9vw,8.25rem);
  line-height:.78; letter-spacing:-.05em; color:var(--or-300); }
.rdv__month{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  line-height:1.75; color:var(--on-deep-2); padding-bottom:.2rem; }

.rdv__stage{ display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  column-gap:clamp(2rem,5vw,5rem); align-items:start; margin-top:clamp(2.5rem,5vw,4rem);
  padding-right:max(var(--gutter), calc((100% - var(--w-page)) / 2 + var(--gutter))); }
/* L'espace réservé sous l'image principale accueille la seconde image. */
.rdv__media{ position:relative; padding-bottom:clamp(5rem,11vw,9.5rem); }
.rdv__main{ position:relative; width:88%; aspect-ratio:3/2; overflow:hidden; margin:0; background:var(--cacao-900); }
/* Couche légèrement plus haute que le cadre : marge pour la parallaxe. */
.rdv__plx{ position:absolute; inset:-6% 0; }
.rdv__plx img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transform:scale(1.03); transition:transform 1.9s var(--e-out); }
.rdv__main:hover .rdv__plx img{ transform:scale(1.07); }
.rdv__second-wrap{ position:absolute; right:0; bottom:0; z-index:2; width:34%; margin:0; }
.rdv__second{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--cacao-900);
  border:clamp(5px,.55vw,8px) solid var(--cacao-800);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.8); }
.rdv__second img{ width:100%; height:100%; object-fit:cover; object-position:inherit;
  transform:scale(1.02); transition:transform 1.6s var(--e-out); }
.rdv__second-wrap:hover .rdv__second img{ transform:scale(1.07); }
/* Diaporama : la diapo entrante apparaît par-dessus la sortante, qui reste
   visible dessous puis s'efface (aucun fond découvert pendant le fondu). */
.rdv__slide{ position:absolute; inset:0; margin:0; object-position:50% 40%;
  opacity:0; visibility:hidden; transition:opacity 1.2s var(--e-out), visibility 0s linear 1.2s; }
.rdv__slide.is-active{ z-index:1; opacity:1; visibility:visible;
  transition:opacity 1.2s var(--e-out), visibility 0s; }

.rdv__body{ min-width:0; padding-top:clamp(0rem,2.5vw,2rem); }
.rdv__lede{ max-width:40ch; }
.rdv .rdv__count{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  margin-top:clamp(1.75rem,3vw,2.5rem); border-block:1px solid var(--rule-deep-2); }
.rdv .rdv__count .countdown__cell{ min-width:0; gap:.55rem;
  padding:1.1rem 0 1rem clamp(.7rem,1.4vw,1.2rem); border-left:1px solid var(--rule-deep-2); }
.rdv .rdv__count .countdown__cell:first-child{ padding-left:0; border-left:0; }
.rdv .rdv__count .countdown__num{ font-size:clamp(1.9rem,3.2vw,3.1rem); color:var(--ivoire); }
.rdv .rdv__count .countdown__cell:first-child .countdown__num{ color:var(--or-300); }
/* Petit indicateur de progression : la minute en cours se vide au rythme des
   secondes du compte à rebours (quatre couleurs du sceau). */
.rdv .rdv__count{ position:relative; }
.rdv__tick{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none; }
.rdv__tick i{ position:absolute; inset:0; transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--bleu),var(--vert),var(--rose));
  animation:rdv-minute 60s linear infinite; }
@keyframes rdv-minute{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.rdv__count[data-ended="true"] .rdv__tick{ display:none; }
.rdv__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; margin-top:1.5rem; }
.rdv__meta li{ display:flex; align-items:center; gap:.55rem; font-size:.9375rem; color:var(--on-deep-2); }
.rdv__meta .icon{ flex:none; color:var(--or-500); }
.rdv .rdv__cta{ margin-top:clamp(1.75rem,3vw,2.25rem); }

@media (max-width:1023px){
  .rdv__titlerow{ grid-template-columns:1fr; align-items:start; }
  .rdv__stage{ grid-template-columns:1fr; row-gap:clamp(1.25rem,4vw,2rem); padding-right:0; }
  /* Réserve plus haute : la seconde image ne recouvre que le cinquième
     inférieur de la photo principale (genoux, tables), jamais un visage. */
  .rdv__media{ padding-bottom:clamp(5rem,29vw,12.5rem); }
  .rdv__main{ width:100%; }
  .rdv__second-wrap{ right:var(--gutter); width:min(42%,300px); }
  .rdv__body{ padding-inline:var(--gutter); padding-top:0; }
  .rdv__lede{ max-width:60ch; }
}
@media (max-width:520px){
  .rdv .rdv__count{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rdv .rdv__count .countdown__cell{ padding:1rem 0 .9rem 1.1rem; }
  .rdv .rdv__count .countdown__cell:nth-child(odd){ padding-left:0; border-left:0; }
  .rdv .rdv__count .countdown__cell:nth-child(n+3){ border-top:1px solid var(--rule-deep-2); }
  .rdv .rdv__count .countdown__lbl{ font-size:.75rem; letter-spacing:.14em; }
  .rdv__date{ gap:.75rem; }
}

/* Convictions */
/* ── Base « Ce qu'il incarne » (Notre Histoire) : deux colonnes sobres ── */
.creed{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,6vw,5rem); }
.creed__item{ padding-block:clamp(1.5rem,3vw,2.25rem); border-top:1px solid var(--rule); }
/* Une pastille à la couleur de la conviction, au lieu d'un numéro. */
.creed__item h3::before{ content:''; display:inline-block; width:9px; height:9px; margin-right:.65rem;
  border-radius:50%; background:var(--cc); vertical-align:.14em; }
.creed__item h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.15; }
.creed__item p{ margin-top:.6rem; font-size:1rem; line-height:1.65; color:var(--text); max-width:40ch; }
@media (max-width:760px){ .creed{ grid-template-columns:1fr; } }

/* Voix */
.voice{ padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(1rem,4vw,3rem);
  align-items:start; }
.voice:last-child{ border-bottom:1px solid var(--rule); }
.voice--right{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
.voice--right .voice__q{ order:-1; }
.voice__q{ font-family:var(--display); font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.75rem); line-height:1.45; color:var(--text);
  quotes:'\00ab\00a0' '\00a0\00bb'; }
.voice__q::before{ content:open-quote; } .voice__q::after{ content:close-quote; }
.voice__src{ font-size:.8125rem; line-height:1.6; color:var(--text-3); }
.voice__src b{ display:block; margin-bottom:.35rem; font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--or-700); }
@media (max-width:720px){
  .voice,.voice--right{ grid-template-columns:1fr; }
  .voice--right .voice__q{ order:0; } .voice__src{ order:1; }
}

/* Bandeau d'appel final */
.closer{ position:relative; overflow:hidden; background:var(--cacao-900); color:var(--on-deep);
  padding-block:clamp(4rem,9vw,7rem); text-align:center; }
.closer__ring{ position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(120vw,720px); opacity:.07; pointer-events:none; }
.closer__inner{ position:relative; z-index:1; }
.closer__inner .display-2{ max-width:17ch; margin-inline:auto; }
.closer .label{ justify-content:center; }
.closer .btn-row{ justify-content:center; margin-top:2rem; }


/* ------------------------------------------- 11b. BANDES PHOTOGRAPHIQUES */
/* Bande photographique pleine largeur (en-tete de page, section). */
.band{ position:relative; overflow:hidden; background:var(--cacao-900); }
.band > .frame img{
  width:100%; height:auto; display:block;
  object-fit:cover; object-position:50% 30%;
  aspect-ratio:16/9;
  filter:saturate(1.03) contrast(1.03);
}
.band .rule-4{ position:absolute; left:0; right:0; bottom:0; height:4px; }
/* Conteneur de parallaxe : l'image garde sa révélation (transform) et son zoom
   lent (scale/translate). Léger débord vertical rogné par le cadre, pour que le
   décalage de parallaxe ne découvre jamais le fond. */
.band__plx{ display:block; margin-block:-4px; }
/* La légende tombe sur une nappe blanche : elle repose sur une plaque sombre
   discrète au lieu d'être posée nue sur la photographie. */
.band__cap{ position:absolute; right:var(--gutter); bottom:1.35rem; z-index:2;
  padding:.5rem .8rem; border-radius:var(--r-1); background:rgb(var(--ink-rgb) / .74);
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivoire); }
@media (max-width:900px){ .band > .frame img{ aspect-ratio:4/3; object-position:50% 40%; } }

/* ---------------------------------------------------- 12. NOTRE HISTOIRE */
/* Chapitres : hiérarchie éditoriale nette — numéro (œil de gris), titre de
   section imposant, corps confortable et aéré, mesure de lecture maîtrisée.
   (Corps en Instrument Sans, poids 400 ; titres en Bodoni Moda.) */
.chapter{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4rem); align-items:start;
  padding-block:clamp(3rem,6vw,5rem); border-top:1px solid var(--rule); }
.chapter__head{ position:sticky; top:calc(var(--nav-h) + 2rem); }
/* Numéro : petit œil-de-bœuf sans-serif, suivi d'un court filet or. */
.chapter__num{ display:block; margin-bottom:1.1rem; font-family:var(--sans);
  font-size:.8125rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--or-700); }
.chapter__num::after{ content:''; display:block; width:44px; height:2px; margin-top:.85rem; background:var(--or-500); }
/* Titre : vraie taille de titre de section (≈48px desktop, ≈44 tablette). */
.chapter__head h2{ font-family:var(--display); font-size:clamp(2rem,1.35rem + 2.5vw,3rem);
  font-weight:500; line-height:1.08; letter-spacing:-.01em; color:var(--text); overflow-wrap:break-word; }
/* Corps : 17→19px, interligne aéré, largeur de lecture, paragraphes espacés. */
.story .prose{ max-width:43rem; font-size:clamp(1.0625rem,1.01rem + .32vw,1.1875rem);
  line-height:1.75; color:var(--text); }
.story .prose > * + *{ margin-top:1.4em; }
.story .prose strong{ font-weight:600; color:var(--text); }
@media (max-width:800px){
  .chapter{ grid-template-columns:1fr; }
  .chapter__head{ position:static; }
  .chapter__num::after{ margin-top:.7rem; }
  /* Titre : ≈30→38px sur téléphone ; il peut passer sur deux lignes. */
  .chapter__head h2{ font-size:clamp(1.9rem,1.4rem + 2.4vw,2.4rem); line-height:1.12; margin-top:.15rem; }
}

/* Les quatre étapes : quatre cartes STRICTEMENT identiques (même taille, même
   traitement, aucun décalage d'escalier — égalité visuelle des quatre femmes). */
.steps4{ list-style:none; margin:clamp(1.75rem,3.5vw,2.75rem) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.5vw,1.6rem); }
@media (min-width:620px){ .steps4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.step-card{ display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--rule); border-bottom:3px solid var(--sc); border-radius:var(--r-1); overflow:hidden; }
.step-card__media{ aspect-ratio:4/5; overflow:hidden; background:var(--cacao-900); }
.step-card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.step-card__body{ display:flex; flex-direction:column; gap:.55rem; padding:1.1rem 1.25rem 1.25rem; }
.step-card__step{ font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sc-fg); }
.step-card__name{ font-family:var(--display); font-size:clamp(1.4rem,1.2rem + .7vw,1.7rem);
  font-weight:500; line-height:1.1; color:var(--text); }
.step-card__line{ font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.1rem,1.02rem + .35vw,1.3rem); line-height:1.3; color:var(--text); }

/* Légende des quatre couleurs */
.legend{ border-top:1px solid var(--rule); }
.legend__row{ display:grid; grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);
  gap:.6rem clamp(1rem,3vw,2.5rem); align-items:center; padding-block:1.35rem;
  border-bottom:1px solid var(--rule); transition:background var(--t); }
.legend__row:hover{ background:var(--surface); }
.legend__swatch{ width:14px; height:14px; border-radius:50%; background:var(--lc); }
.legend__row b{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:500; }
.legend__row span{ font-size:.9375rem; color:var(--text-2); }
@media (max-width:560px){ .legend__row{ grid-template-columns:auto minmax(0,1fr); }
  /* Seule la description passe en 2e colonne : la pastille (elle aussi un
     <span>) reste en 1re colonne, sinon la ligne « Awa » débordait. */
  .legend__row span:not(.legend__swatch){ grid-column:2; } }

.note-band{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:1rem 1.5rem;
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
.note-band p{ flex:1; min-width:min(100%,32ch); font-size:.9375rem; color:var(--text-2); line-height:1.65; }

/* ------------------------------------------------------------- 13. ÉQUIPE */
.team-index{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border-block:1px solid var(--rule); }
.team-index a{ display:flex; flex-direction:column; gap:.4rem; padding:1.35rem 1.25rem;
  background:var(--bg); transition:background var(--t); }
.team-index a:hover{ background:var(--surface); }
.team-index i{ font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.18em; color:var(--tc); }
.team-index b{ font-family:var(--display); font-size:1.0625rem; font-weight:500; }
@media (max-width:760px){ .team-index{ grid-template-columns:1fr 1fr; } }

.bio{ padding-block:clamp(3rem,7vw,6rem); border-top:1px solid var(--rule); }
.bio__grid{ display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.bio--flip .bio__grid{ grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr); }
.bio--flip .bio__media{ order:2; }
.bio__media{ position:sticky; top:calc(var(--nav-h) + 2.5rem); }
.bio__portrait{ position:relative; }
/* « scale » est independant de « transform » : le zoom d'harmonisation
   n'entre pas en conflit avec la revelation par masque ni le survol. */
.bio__portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--creme-3); scale:var(--zoom,1); }
.bio__portrait::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--fc); }
.bio__credit{ margin-top:.7rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.bio__cabinet{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.25rem;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fc-text); }
.bio__cabinet::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--fc); }
.bio__name{ margin-top:0; }
.bio__name .sep{ color:var(--text-3); font-weight:400; }
.bio__role{ margin-top:1rem; font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--fc-text); line-height:1.4; }
.bio__body{ margin-top:1.75rem; }
.bio__list{ display:grid; gap:.7rem; margin-top:1.5rem; }
.bio__list li{ position:relative; padding-left:1.6rem; font-size:.9375rem; line-height:1.6; color:var(--text-2); }
.bio__list li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--fc); }
.bio__sign{ margin-top:1.75rem; padding-left:1.4rem; border-left:2px solid var(--fc);
  font-family:var(--display); font-style:italic; font-size:1.0625rem; line-height:1.55; color:var(--text); }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.tag{ display:inline-flex; align-items:center; padding:.45rem .85rem; border-radius:var(--r-pill);
  border:1px solid var(--rule); background:var(--surface); font-size:.8125rem; font-weight:500; color:var(--text-2); }
.pending{ display:flex; align-items:flex-start; gap:.7rem; margin-top:1.5rem; padding:1rem 1.15rem;
  background:var(--bg-alt); border-left:2px solid var(--or-500);
  font-size:.875rem; line-height:1.6; color:var(--text-2); }
.pending .icon{ color:var(--or-700); margin-top:.22em; }
@media (max-width:900px){
  .bio__grid,.bio--flip .bio__grid{ grid-template-columns:1fr; }
  .bio--flip .bio__media{ order:0; }
  .bio__media{ position:static; max-width:380px; }
}

/* -------------------------------------------------------- 14. ÉVÉNEMENTS */
.agenda{ border-top:1px solid var(--rule); }
.agenda__item{ display:grid; grid-template-columns:minmax(0,.28fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem); padding-block:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule); }
.agenda__when b{ display:block; font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.3rem);
  font-weight:500; line-height:1; color:var(--text); }
.agenda__when span{ display:block; margin-top:.5rem; font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--or-700); }
.agenda__what h3{ font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.6rem);
  font-weight:500; line-height:1.25; }
.agenda__what p{ margin-top:.85rem; font-size:.9375rem; line-height:1.7; color:var(--text-2); max-width:62ch; }
.agenda__partners{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.1rem; }
.agenda__partners b{ margin-right:.25rem; font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
@media (max-width:700px){ .agenda__item{ grid-template-columns:1fr; gap:1rem; } }

.status{ display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .85rem;
  border-radius:var(--r-pill); background:rgba(185,134,28,.16); color:var(--or-300);
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--vert-300); }
/* L'onde du point est un calque séparé animé en scale / opacity (composité),
   et non une box-shadow animée en continu. Même rendu. */
.status{ position:relative; }
.status::after{ content:''; position:absolute; left:.85rem; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:rgba(111,211,167,.6); opacity:0; pointer-events:none;
  animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%{ scale:1; opacity:.6; } 70%,100%{ scale:3.3; opacity:0; } }

/* --------------------------------------------------------- 15. PARTENAIRES */
.wall{ display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.wall__cell{ position:relative; display:grid; place-items:center; text-align:center;
  min-height:clamp(120px,16vw,180px); padding:1.75rem 1.25rem;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--display); font-size:clamp(1rem,1.7vw,1.3rem); font-weight:500; line-height:1.3;
  transition:background var(--t); }
.wall__cell::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--wc,var(--or-500)); transform:scaleX(0); transition:transform .45s var(--e-out); }
.wall__cell:hover{ background:var(--surface); }
.wall__cell:hover::before{ transform:scaleX(1); }
@media (max-width:760px){ .wall{ grid-template-columns:1fr 1fr; } }

.offer__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem;
  align-items:start; padding-block:1.35rem; border-top:1px solid var(--rule-deep-2); }
.offer__item:last-child{ border-bottom:1px solid var(--rule-deep-2); }
.offer__item::before{ content:''; width:9px; height:9px; margin-top:.6rem; border-radius:50%; background:var(--oc); }
.offer__item p{ font-size:.9375rem; line-height:1.65; color:var(--on-deep-2); }

/* ------------------------------------------------------- 16. FORMULAIRES */
.panel{ background:var(--surface); border:1px solid var(--rule); padding:clamp(1.5rem,4vw,2.75rem); }

.field{ display:flex; flex-direction:column; gap:.5rem; }
.field + .field,.field-row + .field,.field + .field-row,.field-row + .field-row{ margin-top:1.35rem; }
.field > label:not(.check){ font-size:.9375rem; font-weight:600; letter-spacing:0;
  color:var(--text); }
.field .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-3); }
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea{
  width:100%; padding:.95rem 1rem; font-size:1rem; background:var(--bg);
  border:1px solid var(--rule); border-radius:var(--r-1);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field textarea{ resize:vertical; min-height:8rem; line-height:1.6; }
.field select{ appearance:none; padding-right:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:1rem; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-3); opacity:.8; }
.field input:not([type="checkbox"]):hover,.field select:hover,.field textarea:hover{ border-color:var(--cacao-500); }
.field input:not([type="checkbox"]):focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--braise); background:var(--surface);
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .18); }
.field[data-invalid="true"] input:not([type="checkbox"]),.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-color:#B4126F; }
.field[data-invalid="true"] .check{ color:var(--rose-700); }
.field[data-invalid="true"] input[type="checkbox"]{ outline:2px solid var(--rose-700); outline-offset:2px; }
.field[data-invalid="true"] input:focus,.field[data-invalid="true"] select:focus,
.field[data-invalid="true"] textarea:focus{ box-shadow:0 0 0 3px rgba(180,18,111,.16); }
.field__error{ display:none; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--rose-700); }
.field[data-invalid="true"] .field__error{ display:flex; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
.field-row > .field + .field{ margin-top:0; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }

.check{ display:flex; align-items:flex-start; gap:.75rem; margin-top:1.5rem;
  font-size:.875rem; line-height:1.6; color:var(--text-2); cursor:pointer; }
.check input{ flex:none; width:24px; height:24px; margin-top:0; accent-color:var(--braise); cursor:pointer; }
.check[data-invalid="true"]{ color:var(--rose-700); }
.form-note{ margin-top:1.15rem; font-size:.8125rem; color:var(--text-3); text-align:center; }

.steps{ display:flex; align-items:center; gap:.75rem; margin-bottom:2rem; }
.steps__item{ display:flex; align-items:center; gap:.6rem; font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.steps__item b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--rule); font-family:var(--sans); font-size:.75rem; }
.steps__item[data-on="true"]{ color:var(--text); }
.steps__item[data-on="true"] b{ background:var(--cacao-800); border-color:var(--cacao-800); color:var(--ivoire); }
.steps__item[data-done="true"] b{ background:var(--vert-700); border-color:var(--vert-700); color:#fff; }
.steps__bar{ flex:1; height:1px; background:var(--rule); }
@media (max-width:520px){ .steps__item span{ display:none; } }

.ref{ text-align:center; padding:clamp(1.75rem,4vw,2.5rem); background:var(--bg-alt); border:1px solid var(--rule); }
.ref__label{ font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); }
.ref__code{ margin-top:.75rem; font-family:var(--display); font-size:clamp(1.8rem,5vw,2.5rem);
  color:var(--or-700); line-height:1; }
.ref__copy{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; padding:.5rem .9rem;
  border:1px solid var(--rule); border-radius:var(--r-pill); font-size:.8125rem; font-weight:500;
  transition:border-color var(--t),color var(--t); }
.ref__copy:hover{ border-color:var(--braise); color:var(--braise-700); }
.ref__note{ margin-top:1rem; font-size:.8125rem; color:var(--text-3); }

.recap{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem;
  padding-top:1.5rem; border-top:1px solid var(--rule); }
.recap div{ display:flex; flex-direction:column; gap:.35rem; }
.recap b{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.recap span{ font-family:var(--display); font-size:1.05rem; color:var(--text); line-height:1.35; }
@media (max-width:600px){ .recap{ grid-template-columns:1fr; } }

.pay{ display:grid; margin-top:1.25rem; }
.pay__item{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.25rem;
  align-items:center; padding-block:1.35rem; border-top:1px solid var(--rule); }
.pay__item:last-child{ border-bottom:1px solid var(--rule); }
.pay__mark{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--pm-bg); color:var(--pm-fg); }
.pay__item h4{ font-family:var(--display); font-size:1.05rem; font-weight:500; }
.pay__item p{ margin-top:.25rem; font-size:.875rem; line-height:1.55; color:var(--text-2); }
@media (max-width:620px){
  .pay__item{ grid-template-columns:auto minmax(0,1fr); row-gap:1rem; }
  .pay__item .btn{ grid-column:1/-1; width:100%; }
}

.contact{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.channels{ border-top:1px solid var(--rule); }
.channels__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.15rem;
  align-items:start; padding-block:1.75rem; border-bottom:1px solid var(--rule); }
.channels__mark{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--rule); background:var(--surface); color:var(--ch); flex:none; }
.channels__item b{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-2); }
/* Les coordonnees sont l'information principale : plus grandes, plus
   contrastees, et immediatement identifiables comme cliquables. */
.channels__value{
  display:inline-block; margin-top:.5rem;
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.65rem);
  font-weight:500; color:var(--text); line-height:1.25;
  letter-spacing:.005em;
}
a.channels__value{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:color var(--t), background-size .35s var(--e-out);
}
a.channels__value:hover{ color:var(--accent-text); background-size:0 1px; background-position:100% 100%; }
.channels__actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.channels__action{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:38px; padding:.4rem .9rem; border-radius:var(--r-pill);
  border:1px solid var(--rule); background:var(--surface);
  font-size:.8125rem; font-weight:600; color:var(--text-2);
  transition:border-color var(--t), color var(--t), transform var(--t);
}
.channels__action:hover{ border-color:var(--ch); color:var(--ch); transform:translateY(-1px); }
.channels__mark{ color:var(--ch); }
.channels__item small{ display:block; margin-top:.6rem; font-family:var(--sans);
  font-size:.8125rem; line-height:1.5; color:var(--text-3); }
.channels__social{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
/* Pages officielles non encore communiquées : nommées, sans apparence de bouton
   ni de lien (aucun faux lien « # »). */
.channels__social .tag{ cursor:default; padding:.2rem 0; margin-right:1.1rem; border:0; background:none;
  font-size:.9375rem; color:var(--text-2); }
@media (max-width:880px){ .contact{ grid-template-columns:1fr; } }

.done{ text-align:center; }
.done__mark{ display:grid; place-items:center; width:58px; height:58px; margin:0 auto 1.5rem;
  border-radius:50%; background:var(--vert-700); color:#fff; }
.done .lede{ margin:1rem auto 0; }

/* Inscription : consignes de paiement + dépôt de la capture */
.paiement{ margin-top:2rem; padding:1.5rem; background:var(--bg-alt); border:1px solid var(--rule); border-left:4px solid var(--or-500); }
.paiement h3{ font-family:var(--display); font-size:1.3rem; font-weight:500; }
.paiement__montant{ font-family:var(--display); font-size:clamp(1.6rem,4vw,2.1rem); color:var(--or-700); line-height:1.1; margin-top:.35rem; }
.paiement ol{ margin:1rem 0 0; padding-left:1.2rem; display:grid; gap:.55rem; font-size:.9375rem; line-height:1.55; color:var(--text-2); }
.paiement ol b{ color:var(--text); }
.paiement__num{ display:inline-block; font-family:var(--sans); font-weight:700; letter-spacing:.03em; color:var(--text); background:var(--surface); border:1px solid var(--rule); padding:.1rem .55rem; border-radius:var(--r-1); white-space:nowrap; }
.depot{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center;
  min-height:150px; padding:1.25rem; border:1.5px dashed var(--cacao-500); border-radius:var(--r-1); background:var(--bg);
  cursor:pointer; transition:border-color var(--t),background var(--t); }
.depot:hover,.depot.survol{ border-color:var(--braise); background:var(--surface); }
.depot input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.depot b{ font-size:.9375rem; color:var(--text); }
.depot small{ font-size:.8125rem; color:var(--text-3); }
.depot img{ max-height:180px; max-width:100%; border-radius:6px; margin-bottom:.4rem; }
.field[data-invalid="true"] .depot{ border-color:#B4126F; }
.form-erreur{ margin-top:1.25rem; padding:.9rem 1rem; border:1px solid rgba(180,18,111,.35); background:rgba(233,26,152,.06); color:var(--rose-700); font-size:.9rem; line-height:1.5; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* ------------------------------------------------- 16b. REPLI SANS JS */
/* Le header et le footer sont injectés par chrome.js ; si le script ne
   s'exécute pas, la navigation et les coordonnées restent accessibles. */
.nojs-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem var(--s5);
  padding:1rem var(--gutter); background:var(--creme); border-bottom:1px solid var(--rule); }
.nojs-bar__logo img{ height:36px; width:auto; }
.nojs-bar__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.nojs-bar__links a{ padding-block:.35rem; font-size:.875rem; font-weight:500; color:var(--text-2); }
.nojs-bar__links a[aria-current="page"]{ color:var(--text); font-weight:600; }
.nojs-foot{ padding:2.5rem var(--gutter); background:var(--cacao-900); color:var(--on-deep-2);
  font-size:.9375rem; text-align:center; }
.nojs-foot p + p{ margin-top:.5rem; }
.nojs-foot a{ color:var(--or-300); }

/* --------------------------------------------------------- 17. UTILITAIRES */
.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; }
[hidden]{ display:none!important; }

/* ---------------------------------------------------------- 18. MOUVEMENT */
.motion-on .reveal{ opacity:0; transform:translateY(22px); }
.motion-on .reveal.is-in{ opacity:1; transform:none;
  transition:opacity .7s var(--e-out),transform .7s var(--e-out); }
.reveal[data-delay="1"].is-in{ transition-delay:.08s; }
.reveal[data-delay="2"].is-in{ transition-delay:.16s; }
.reveal[data-delay="3"].is-in{ transition-delay:.24s; }
.reveal[data-delay="4"].is-in{ transition-delay:.32s; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1.5rem); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important; transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .reveal,[data-reveal]{ opacity:1!important; transform:none!important; }
}

/* --------------------------------------------------------- 19. IMPRESSION */
@media print{
  .nav,.drawer,.wa-float,.skip-link,.btn-row{ display:none!important; }
  body{ background:#fff; color:#000; }
  .section--deep,.hero,.closer,.footer{ background:#fff!important; color:#000!important; }
  .reveal,[data-reveal]{ opacity:1!important; transform:none!important; }
}


/* ============================================================================
   20. DIRECTION PREMIUM — contraste, profondeur, rythme
   Même identité, davantage de hiérarchie : alternance maîtrisée de fonds
   crème, ivoire, sombres et d'accents colorés ; plaques et superpositions
   éditoriales. Le logo officiel n'est jamais teinté, déformé ni redessiné.
   ============================================================================ */

/* ---- 20a. Le logo officiel sur un fond sombre ----
   Le lettrage « W4MI » et la baseline du logo officiel sont brun cacao : posés
   nus sur un fond sombre, ils disparaissent (contraste mesuré 1,3:1) et il ne
   reste qu'un « 4 4 » et le sceau — un logo qui paraît faux. Le fichier reste
   intact ; partout où il croise un fond sombre, il repose sur un cartouche
   crème, exactement comme dans la navigation. */
.nav.is-open .nav__logo img{ box-sizing:content-box; padding:.35rem .6rem;
  background:var(--creme); border-radius:var(--r-1); }

/* ---- 20b. Fonds ---- */
.section--ivory{ background:var(--surface); }
.section--brown{ background:var(--cacao-700); color:var(--on-deep); }
.section--brown h2,.section--brown h3{ color:var(--on-deep); }
.section--brown .label{ color:var(--or-300); }
.section--brown .display-2 em,.section--brown .display-3 em{ color:var(--or-300); }
.section--brown :focus-visible{ outline-color:var(--braise-300); }
/* Filet d'ouverture aux quatre couleurs, pleine largeur, qui se dessine. */
.rule-4.sec-rule{ position:absolute; left:0; right:0; top:0; height:4px; }

/* ---- 20c. L'identité : diaporama éditorial ancré ----
   Même mécanique que les portraits de L'Équipe : la colonne image est ancrée
   (sticky) pendant que le texte défile, le cadre se dévoile par masque
   (data-reveal="mask" + .frame), les portraits haute définition gardent le
   cadrage vérifié sur L'Équipe (object-position, --zoom). Aucun texte ne se
   pose sur une image. */
.idn{ overflow-x:clip; }
.idn__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
.idn__media{ position:relative; }
.idn__view{ position:relative; }
.idn__stage{ position:relative; z-index:1; margin:0; background:var(--cacao-900);
  box-shadow:0 40px 70px -40px rgb(var(--ink-rgb) / .6); }
.idn__stage .frame{ position:relative; width:100%; aspect-ratio:4/5; }
.idn__stage .rule-4{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:3px; }
/* Calque de parallaxe, légèrement plus haut que le cadre : son déplacement
   ne découvre jamais le fond. */
.idn__plx{ position:absolute; inset:-46px 0 -30px; display:block; }
/* Marge en pixels calée sur l amplitude de chaque écran (±30 / ±18 / ±10 px) : le fond ne se découvre jamais, même sur un cadre raccourci. */
@media (max-width:1023px){ .idn__plx{ inset:-34px 0 -22px; } }
@media (max-width:767px){ .idn__plx{ inset:-22px 0 -14px; } }
.idn__img{ position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--op,50% 30%); scale:var(--zoom,1);
  transform-origin:var(--org,50% 50%); }
/* Légende : nom et segments de progression (sans numéro). */
.idn__cap{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr);
  gap:.55rem; margin-top:clamp(1.25rem,2vw,1.75rem); }
.idn__name{ font-family:var(--display); font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:500;
  line-height:1.2; color:var(--text); }
@media (min-width:900px){
  /* Ancrage : l'image reste en place pendant la lecture du texte. */
  .idn__media{ position:sticky; top:calc(var(--nav-h) + 2rem); }
  /* Écrans peu hauts : le cadre et sa légende tiennent entiers à l'écran. */
  .idn__stage .frame{ max-height:calc(100vh - var(--nav-h) - 11rem); }
}
@media (max-width:899px){
  .idn__grid{ grid-template-columns:1fr; }
  .idn__media{ width:100%; max-width:30rem; }
}
/* Texte : hiérarchie affirmée, logo officiel présent. */
.idn .manifesto__logo{ height:clamp(52px,6.2vw,78px); }
.idn .manifesto__body > h2 + p{ margin-top:1.5rem; }
.idn__more{ margin-top:clamp(1.75rem,3vw,2.25rem); }
/* La citation devient une plaque ivoire signée par les quatre couleurs. */
.idn .manifesto__pull{ position:relative; margin-top:clamp(2.25rem,4.5vw,3.25rem);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem); border-top:0;
  background:var(--surface); box-shadow:0 34px 60px -44px rgb(var(--ink-rgb) / .55); }
.idn .manifesto__pull::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--violet) 0 25%, var(--bleu) 0 50%, var(--vert) 0 75%, var(--rose) 0); }

/* ---- 20d. L'équipe : cartes sur surface ivoire ---- */
.team-sec .tcard{ background:var(--surface);
  box-shadow:0 1px 0 var(--rule-2), 0 28px 50px -40px rgb(var(--ink-rgb) / .55);
  transition:box-shadow .6s var(--e-out), translate .6s var(--e-out); }
.team-sec .tcard:hover{ translate:0 -6px;
  box-shadow:0 1px 0 var(--rule-2), 0 40px 60px -36px rgb(var(--ink-rgb) / .6); }
.team-sec .tcard__body{ padding:1rem 1.1rem 1.2rem; border-bottom:3px solid var(--fc); }

/* ---- 20h. Sceau ancré, informations qui défilent ----
   Comme la colonne portrait de L'Équipe : le vrai sceau reste en place
   (position:sticky, aucune transformation liée au défilement) pendant que
   les informations défilent à côté. */
@media (min-width:861px){
  .seal-figure{ align-items:start; }
  .seal-figure__art{ position:sticky; top:calc(var(--nav-h) + 6vh); justify-self:center;
    width:min(100%, calc(100vh - var(--nav-h) - 12vh)); }
  .seal-notes li{ padding-block:clamp(1.75rem,7vh,4rem); }
}

/* ---- 20f. Voix : section brun médaillon ---- */
.voices .voice{ border-color:var(--rule-deep-2); }
.voices .voice__q{ color:var(--on-deep); }
.voices .voice__src{ color:var(--on-deep-2); }
.voices .voice__src b{ color:var(--or-300); }

/* ---- 20g. Nos partenaires (accueil) ---- */
.partners{ overflow:hidden; }
.partners__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; }
.partners .section-head{ max-width:44rem; }
.partners__sub{ font-size:clamp(1rem,.95rem + .3vw,1.2rem); line-height:1.6; color:var(--text-2); }
.pmarq{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); overflow:hidden;
  border-block:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.pmarq__track{ display:flex; width:max-content; }
.pmarq__set{ display:flex; align-items:center; flex:none; }
.pmark{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; min-height:clamp(6.5rem,11vw,9rem); padding-inline:clamp(1.75rem,4.5vw,4rem); text-align:center; }
/* Séparateur : un point d'or, comme les quatre points du sceau. */
.pmark::after{ content:''; position:absolute; right:0; top:50%; width:6px; height:6px; margin:-3px -3px 0 0;
  border-radius:50%; background:var(--or-500); opacity:.55; }
.pmark__name{ font-family:var(--display); font-size:clamp(1.5rem,2.9vw,2.35rem); font-weight:500;
  line-height:1.05; letter-spacing:-.01em; white-space:nowrap; color:var(--text); padding-bottom:.18em;
  background:linear-gradient(var(--pa),var(--pa)) 0 100% / 0 2px no-repeat; }
.pmark small{ font-size:.6875rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  white-space:nowrap; color:var(--text-2); }
.pmark__logo{ display:block; max-height:clamp(40px,6vw,64px); width:auto; }
/* Monochrome au repos (niveaux de gris, opacité réduite) ; vraies couleurs au
   survol, transition douce ; le défilement se met en pause au survol. */
.pmark__name,.pmark small,.pmark__logo{ filter:grayscale(1); opacity:.5;
  transition:filter .6s var(--e-out), opacity .6s var(--e-out), color .6s var(--e-out), background-size .6s var(--e-out); }
.pmark:hover .pmark__name,.pmark:hover small,.pmark:hover .pmark__logo{ filter:none; opacity:1; }
.pmark:hover .pmark__name{ color:var(--pc); background-size:100% 2px; }
.pmark:hover small{ color:var(--pc); }
/* Le partenaire survolé reste plus présent que les autres. */
.pmarq:hover .pmark:not(:hover) .pmark__name,.pmarq:hover .pmark:not(:hover) small,
.pmarq:hover .pmark:not(:hover) .pmark__logo{ opacity:.3; }

/* ---- 20i. Nous joindre : lisibilité et contraste ----
   Les coordonnées sont l'information principale : sans-serif (Instrument
   Sans), grandes, en 600, au contraste maximal. Les libellés deviennent de
   petits titres clairs (sans capitales espacées, plus lisibles) ; le texte
   secondaire est plus grand et mieux contrasté. La typographie éditoriale
   (Bodoni) reste réservée aux grands titres. */
.contact .label{ font-size:.8125rem; }
.channels__item{ gap:1.25rem; padding-block:1.85rem; }
.channels__mark{ width:52px; height:52px; border:1.5px solid currentColor; background:var(--surface); color:var(--ch); }
.channels__mark .icon{ width:24px; height:24px; stroke-width:2; }
.channels__item b{ font-family:var(--sans); font-size:.9375rem; font-weight:600; line-height:1.3;
  letter-spacing:.01em; text-transform:none; color:var(--text-2); }
.channels__value{ margin-top:.3rem; font-family:var(--sans); font-size:clamp(1.3rem,1.12rem + .8vw,1.7rem);
  font-weight:600; line-height:1.3; letter-spacing:-.005em; color:var(--text); overflow-wrap:anywhere; }
a.channels__value{ background-size:100% 2px; }
a.channels__value:hover{ color:var(--accent-text); }
.channels__actions{ margin-top:.9rem; }
/* « Écrire sur WhatsApp » : un vrai bouton lisible (blanc sur vert foncé, AA). */
.channels__action{ min-height:46px; padding:.6rem 1.15rem; font-size:.9375rem; font-weight:600;
  color:var(--text); border:1.5px solid var(--rule); }
.channels__action[href*="wa.me"]{ background:var(--vert-700); border-color:var(--vert-700); color:#fff; }
.channels__action[href*="wa.me"]:hover{ background:#075C39; border-color:#075C39; color:#fff; }
.channels__action .icon{ width:20px; height:20px; }
.channels__item small{ margin-top:.8rem; font-size:.9375rem; line-height:1.55; color:var(--text-2); }
.channels__social{ gap:.6rem; margin-top:.8rem; }
.channels__social .tag .icon{ width:18px; height:18px; }
@media (max-width:420px){
  .channels__item{ gap:1rem; }
  .channels__mark{ width:46px; height:46px; }
}

/* ---- 20j. L'identité : le logo officiel à côté de la citation ----
   La citation parle du M et du W : le logo se pose à côté d'elle, en haut à
   droite de la plaque, et le texte s'écoule autour. Sur les colonnes étroites,
   il se place au-dessus de la citation. Fichier officiel, ratio d'origine. */
.idn .manifesto__pull{ display:flow-root; }
.idn .manifesto__pull footer{ clear:both; margin-top:1.25rem; }
.idn .idn__pull-logo{ display:block; width:clamp(150px,12vw,210px); height:auto; margin:0 0 1rem; }
@media (min-width:1200px){
  .idn .idn__pull-logo{ float:right; margin:.4rem 0 .75rem 1.75rem; }
}