.carte figcaption{margin-top:12px;font-size:13px;line-height:1.6;opacity:.72}
.carte .av{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  opacity:.55;margin-bottom:4px}
@media (prefers-reduced-motion:reduce){
  .defile-band{overflow-x:auto}
  .piste{animation:none;width:auto}
  .piste .carte:nth-child(n+9){display:none}
  .defile-band .def-fl{display:none}}
@media (max-width:1100px){
  .carte{width:240px}
  .carte i{height:300px}
  .defile-band{padding:22px 0 54px}
  .defile-band .def-fl{width:40px;height:40px;top:calc(50% - 26px)}.defile-band .def-g{left:12px}.defile-band .def-d{right:12px}}
/* ================= la ligne soeur ================= */
.soeur{margin:34px auto 0;max-width:64ch;font-size:14.5px;line-height:1.85;opacity:.68;
  border-top:1px solid rgba(22,59,53,.14);padding-top:22px}
.soeur a{border-bottom:1px solid rgba(22,59,53,.3)}
.soeur a:hover{border-color:var(--vert)}
.soeur .plus{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.soeur .plus:after{content:" →"}
footer{background:var(--nuit);color:rgba(238,244,239,.66);
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - 98px);min-height:calc(100svh - 98px);box-sizing:border-box;
  padding:130px 0 46px;position:relative;z-index:1;overflow:hidden;
  border-top:4px solid var(--jaune)}
/* les lucioles vivent dans les deux bandes VIDES du pied (au-dessus de la signature et
   sous les colonnes) : elles ne se posent plus sur les lettres (audit 16/09, P12) */
footer .lucioles{position:absolute;inset:0;pointer-events:none;z-index:0}
footer .lucioles i{position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--jaune);opacity:0;animation:luciole 4.6s ease-in-out infinite;
  box-shadow:0 0 8px 2px rgba(255,247,203,.55)}
@keyframes luciole{0%,100%{opacity:0}9%{opacity:1}28%{opacity:.3}
  44%{opacity:.9}66%{opacity:0}}
footer .filig-mw{position:absolute;right:-50px;bottom:-84px;width:400px;opacity:.05;
  color:var(--clair);pointer-events:none}
footer .filig-mw svg{width:100%;height:auto;display:block}
footer .grande-sig{color:var(--clair);text-align:center;
  font-size:clamp(30px,3.9vw,58px);line-height:1.16;max-width:22ch;margin:0 auto 96px}
footer .grande-sig em{font-style:italic;
  text-decoration:underline;text-decoration-color:rgba(255,247,203,.26);
  -webkit-text-decoration-color:rgba(255,247,203,.26);
  text-decoration-thickness:.44em;text-underline-offset:-.38em;
  text-decoration-skip-ink:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
footer .sig-act{display:flex;flex-direction:column;align-items:center;gap:16px;
  margin:-40px auto 96px}
footer .cta-fin{min-height:58px;padding:0 40px;font-size:13px}
footer .cta-bleu{background:#aacde2;color:var(--vert)}
footer .cta-fin:hover{opacity:.88}
footer .sig-note{font-size:13px;opacity:.5;letter-spacing:.03em}
footer .volf{position:absolute;top:0;left:0;width:58px;height:auto;z-index:2;opacity:0;
  color:var(--clair);pointer-events:none;will-change:transform,opacity}
footer .lucioles{transition:opacity 1.2s ease}
footer .lucioles.cache{opacity:0}
footer .marque{width:200px;display:block;color:var(--clair);margin-bottom:24px}
footer .marque svg{width:100%;height:auto;display:block}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:48px;
  position:relative}
footer .tit{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(238,244,239,.5);margin-bottom:14px}
footer p{font-size:14px;line-height:2.15}
footer a:hover{color:var(--jaune)}
footer .bas{display:flex;justify-content:space-between;font-size:12px;gap:20px;
  color:rgba(238,244,239,.36);border-top:1px solid rgba(238,244,239,.12);margin-top:72px;
  padding-top:24px;flex-wrap:wrap;position:relative}
footer .bas a{color:rgba(238,244,239,.56);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(238,244,239,.26)}
footer .bas a:hover{color:var(--jaune)}
@media (prefers-reduced-motion:reduce){
  footer .lucioles i,footer .aq-pose{animation:none}
  footer .lucioles i{opacity:.3}}
/* ================= réactif ================= */
@media (max-width:1100px){
  :root{--haut:74px}
  .wrap{padding-left:26px;padding-right:26px}
  #bandeau{height:28px}
  #bandeau .long{display:none}
  #bandeau .court{display:inline;font-size:7.6px;letter-spacing:.16em}
  header{top:28px;padding:10px 20px}
  header .marque{width:116px}
  header nav{gap:14px}
  header nav a:not(.cta){display:none}
  header .fil .aig{width:28px;top:-7px}
  .cbar{padding:11px 24px}
  .hero{height:auto;min-height:100svh;padding:112px 0 40px}
  .hero h1{max-width:none}
  .duo{grid-template-columns:1fr;gap:40px}
  footer{min-height:0;display:block}
  .vign{height:52vw;max-height:340px;margin-bottom:26px}
  .second{grid-template-columns:1fr;gap:14px;margin-top:44px}
  .bloc{padding:80px 0}
  .grille{grid-template-columns:1fr;margin-top:40px}
  .niv{padding:0}
  .niv+.niv{border-left:0;border-top:1px solid rgba(22,59,53,.14);padding-left:0;
    margin-top:40px;padding-top:40px}
  .niv .t,.niv .sous,.niv .d{min-height:0}
  .origine{padding:60px 26px 70px}
  .pan{padding:14px 12px 44px}
  .cadre{padding:56px 24px}
  footer{padding-top:88px}
  footer .grande-sig{margin-bottom:52px}
  footer .sig-act{margin:-24px auto 64px}
  footer .cols{grid-template-columns:1fr 1fr;gap:30px}
  /* la journée en portrait */
  #seq .scene{height:calc(100vh - 220px);height:calc(100svh - 220px);min-height:480px}
  #seq .indic{display:none}
  #seq .art{left:26px;right:26px;width:auto;margin-left:0}
  #seq .fg{font-size:34vw}
  #seq .coin{top:16px;left:18px}
  #seq .coin .ch{font-size:21px}
  .bascule{padding:88px 24px}
  .chap{padding:0 24px 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .in>*{opacity:1;transform:none;transition:none}
  #nuee,#libhero,#seq .grains,#seq .libv{display:none}
  #seq{height:auto}
  #seq .scene{position:relative;height:auto;min-height:0;padding:30px 0 10px}
  #seq .astre,#seq .pastilles{display:none}
  #seq .txts{position:relative;inset:auto}
  #seq .art{position:relative;opacity:1;transform:none;left:auto;right:auto;
    pointer-events:auto;max-width:640px;margin:0 auto;padding:44px 26px;
    border-top:1px solid rgba(22,59,53,.14)}
  header,header .marque,header nav{transition:none}
}
/* ================= écrans peu hauts : une section = un écran, vraiment ================= */
@media (max-height:860px) and (min-width:901px){
  .chap{padding:12px 40px 10px}
  .chap .clib{height:26px}
  .pan{padding:12px 40px 34px}
  .cadre{padding:22px 44px}
  .offres.cadre{padding:16px 40px 12px}
  .offres .tete{font-size:clamp(20px,1.9vw,25px)}
  .offres .chapo{margin-top:4px;font-size:13px}
  .grille{margin-top:9px;gap:0 34px}
  .niv+.niv{padding-left:34px}
  .niv .t{font-size:clamp(19px,1.6vw,23px);margin-top:6px}
  .niv .sous{min-height:2.2em;margin-top:3px}
  .niv .d{min-height:6.6em;line-height:1.55;margin-top:6px}
  .niv .prixl{margin-top:6px}
  .niv .p{font-size:clamp(24px,2.1vw,29px)}
  .niv .u{margin-top:2px}
  .niv .lanc{margin-top:6px;font-size:12px;padding:4px 10px}
  .niv .incl{margin-top:7px}
  .niv .incl li{padding:4.5px 0 4.5px 14px}
  .niv .incl li:before{top:10px}
  .pied-offre{margin-top:10px;padding-top:8px;line-height:1.6}
  .bloc .corps{font-size:16.5px;line-height:1.75;margin-top:14px}
  .bloc h2{font-size:clamp(28px,2.9vw,38px)}
  .gestes3{gap:36px;margin-top:20px}
  .g3 .gn{font-size:30px}
  .g3 b{font-size:21px}
  .g3 p{line-height:1.6}
  .s1-fin{margin-top:20px;padding-top:14px}
  .s1-fin .t{font-size:21px}
  .s1-fin p{font-size:14.5px}
  .tablo th,.tablo td{padding:10px 12px;font-size:14.5px}
  .t-t{font-size:23px}
  .t-prix{font-size:29px}
  .carton{padding:26px 30px}
  .vign{height:min(38vh,340px)}
  .defile-band{padding:18px 0 36px}
  .carte i{height:min(36vh,300px)}
  .carte figcaption{margin-top:8px;font-size:13.5px}
  .pourquoi .lib{width:52px;margin-bottom:14px}
  .pourquoi .corps{font-size:15px;line-height:1.7;margin-top:10px}
  .soeur{margin-top:20px;padding-top:12px;font-size:14px;line-height:1.7}
  #seq .scene{height:calc(100vh - 236px);height:calc(100svh - 236px)}
  footer{padding-top:72px}
  footer .grande-sig{margin-bottom:74px}
  footer .sig-act{margin:-38px auto 68px}
  .bascule{padding:76px 40px}
  .bascule .fort{margin-top:28px}
  .bascule .retenue{margin-top:20px}
  .bascule .apres{margin-top:38px}
}
/* ============ 02 · S1 : les trois gestes en vitrine ============ */
.s1-haut{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.chapo-s{max-width:64ch;font-size:16.5px;line-height:1.75;opacity:.8;margin:0}
.gestes3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;margin-top:30px}
.g3 .gn{font-family:'Recoleta',Georgia,serif;font-size:36px;opacity:.22;
  line-height:1;display:block}
.g3 b{font-weight:400;font-size:23px;display:block;margin:7px 0 6px}
.g3 p{font-size:15px;line-height:1.72;opacity:.8;margin:0}
.eco-l{font-size:14px;line-height:1.7;opacity:.62;margin:18px 0 0;font-style:italic}
.s1-fin{display:flex;gap:28px;align-items:baseline;border-top:1px solid rgba(22,59,53,.14);
  margin-top:30px;padding-top:18px;flex-wrap:wrap}
.s1-fin .t{font-size:23px;white-space:nowrap}
.s1-fin p{font-size:14.5px;line-height:1.7;opacity:.85;margin:0;flex:1}
/* ============ 03 · F2 : la table du cycle ============ */
.tablo-w{margin-top:20px;overflow-x:auto}
.tablo{width:100%;border-collapse:collapse}
.tablo th,.tablo td{text-align:left;padding:13px 14px;font-weight:300;font-size:15px}
.tablo thead th{vertical-align:top;border-bottom:1px solid rgba(22,59,53,.3);
  padding-bottom:16px}
.tablo .niv-c{width:19%}
.t-nom{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;
  display:block}
.t-t{font-size:26px;line-height:1.12;display:block;margin-top:5px;font-weight:400}
.t-prixl{display:flex;align-items:baseline;gap:9px;margin-top:10px}
.t-prix{font-size:34px;line-height:1;font-weight:400}
.t-prix .e{font-size:.42em;vertical-align:.5em;opacity:.55}
.t-ttc{font-size:12px;opacity:.55;letter-spacing:.06em;white-space:nowrap}
.tablo tbody th,.tablo tbody td{border-bottom:1px solid rgba(22,59,53,.14)}
.tablo tbody th{opacity:.85;font-size:15px}
.tablo .oui{display:inline-block;width:9px;height:9px;background:var(--jaune);
  outline:1px solid rgba(22,59,53,.3)}
.tablo .lanc-l td{font-size:13.5px;background:rgba(255,247,203,.5)}
/* ============ 04 · V3 : le carton de rendez-vous ============ */
.v3duo{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.carton{border:none;padding:33px 37px;text-align:center;
  background-color:var(--blanc);
  background-image:
    repeating-linear-gradient(90deg,rgba(22,59,53,.4) 0 6px,transparent 6px 13px),
    repeating-linear-gradient(90deg,rgba(22,59,53,.4) 0 6px,transparent 6px 13px),
    repeating-linear-gradient(180deg,rgba(22,59,53,.4) 0 6px,transparent 6px 13px),
    repeating-linear-gradient(180deg,rgba(22,59,53,.4) 0 6px,transparent 6px 13px);
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.carton:hover{transform:rotate(-1.6deg)}
@media (prefers-reduced-motion:no-preference){
  .carton:hover{animation:decoupe 5s linear infinite}
}
@keyframes decoupe{to{background-position:26px 0,-26px 100%,0 -26px,100% 26px}}
.carton .c-eti{display:block;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  opacity:.6;margin-bottom:12px}
.carton .c-h{font-size:clamp(22px,2vw,29px);line-height:1.25;display:block}
.carton .c-d{display:block;font-size:13.5px;opacity:.7;margin:12px 0 20px}
.carton .cta{width:100%}
/* ============ 06 · M3 : l'aquarelle en grand ============ */
.m3duo{display:grid;grid-template-columns:1.1fr .8fr;gap:64px;align-items:center;
  text-align:left}
.m3duo .corps{max-width:none;margin:0}
.m3duo .corps p{margin-left:0;margin-right:0}
.m3duo h2{margin-bottom:14px}
.m3duo .corps p{font-size:18px;line-height:1.9;opacity:.87}
.m3duo .soeur{margin:26px 0 0;max-width:none;text-align:left}
.aq{text-align:center}
.aq img{width:80%;max-width:400px;transform:rotate(-6deg);
  filter:saturate(1.05) drop-shadow(0 14px 24px rgba(13,36,32,.12))}
/* ================= écrans vraiment peu hauts (~700-790 px) ================= */
@media (max-height:790px){
  .chap{padding-bottom:8px}
  .chap .clib{height:22px}
  .pan{padding:6px 40px 24px}
  .cadre{padding:16px 40px}
  .offres.cadre{padding:12px 36px 10px}
  .offres .tete{font-size:clamp(18px,1.7vw,22px)}
  .grille{margin-top:8px}
  .niv .d{min-height:6.4em;line-height:1.5}
  .niv .incl{margin-top:5px}
  .niv .incl li{padding:3.5px 0 3.5px 13px}
  .niv .lanc{margin-top:5px;font-size:12px;padding:3px 9px}
  .pied-offre{margin-top:8px;padding-top:6px;line-height:1.55}
  .bloc h2{font-size:clamp(26px,2.6vw,33px)}
  .bloc .corps{font-size:16px;line-height:1.7;margin-top:10px}
  .gestes3{gap:30px;margin-top:16px}
  .g3 .gn{font-size:26px}
  .g3 b{font-size:19px}
  .g3 p{line-height:1.55}
  .s1-fin{margin-top:16px;padding-top:11px}
  .s1-fin .t{font-size:19px}
  .s1-fin p{font-size:14.5px}
  .tablo th,.tablo td{padding:8px 11px;font-size:14px}
  .t-t{font-size:21px}
  .t-prix{font-size:26px}
  .t-nom{font-size:12px}
  .carton{padding:20px 26px}
  .aq img{max-width:330px}
  .m3duo .corps p{font-size:16.5px;line-height:1.8}
  .vign{height:min(32vh,280px)}
  .carte i{height:min(32vh,260px)}
  .pourquoi .lib{width:44px;margin-bottom:10px}
  .pourquoi .corps{font-size:15px;line-height:1.6;margin-top:8px}
  .soeur{margin-top:14px;padding-top:10px;font-size:14px;line-height:1.65}
  .bascule{padding:40px 40px}
  .bascule .fort{margin-top:20px;font-size:clamp(30px,4vw,54px)}
  .bascule .retenue{margin-top:14px}
  .bascule .apres{margin-top:26px}
  #seq .scene{height:calc(100vh - 212px);height:calc(100svh - 212px)}
  footer{padding-top:44px}
  footer .grande-sig{font-size:clamp(24px,3vw,42px);margin-bottom:46px}
  footer .sig-act{margin:-28px auto 40px;gap:12px}
  footer .cta-fin{min-height:48px;padding:0 30px;font-size:12px}
  footer .marque{width:160px;margin-bottom:14px}
  footer p{font-size:14px;line-height:1.9}
  footer .cols{gap:34px}
  footer .bas{margin-top:26px;padding-top:18px}
}
/* mobile : les nouvelles grilles en une colonne (declare en dernier pour gagner la cascade) */
@media (max-width:1100px){
  .gestes3,.v3duo,.m3duo{grid-template-columns:1fr;gap:30px}
  .aq img{max-width:240px}
  .s1-fin{flex-direction:column;gap:8px}
  .s1-haut{flex-direction:column;align-items:flex-start;gap:14px}
}