/* ================= les deux offres (09/09/2026, les deux offres au meme plan) ================= */
#deux{padding:38px 18px 8px}
.deux-w{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1240px;margin:0 auto}
.d-carte{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;color:#163b35;position:relative;
  transition:transform .3s cubic-bezier(.22,.7,.28,1),box-shadow .3s}
.d-carte:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,59,53,.14)}
.d-bleu{background:var(--bleu)}
.d-jaune{background:var(--jaune)}
.d-carte .d-im{display:block;aspect-ratio:16/10;background:#dfe9e4 center/cover no-repeat}
.d-carte .d-tx{display:flex;flex-direction:column;flex:1;gap:10px;padding:28px 32px 28px}
.d-carte .dk{font-size:14px;letter-spacing:.02em;opacity:.8}
.d-carte h2{font-size:clamp(22px,2vw,28px);line-height:1.18;margin-top:2px;max-width:16em}
.d-bleu h2{color:var(--jaune)}
.d-carte p{font-size:15px;line-height:1.7;margin:2px 0 0;max-width:34em}
.d-carte .dp{padding-top:6px;font-size:12.5px;letter-spacing:.06em;opacity:.85;margin-top:auto}
.d-carte .dl{display:inline-flex;align-self:flex-start;margin-top:12px;
  background:#fff;border-radius:12px;padding:10px 22px 6px;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  box-shadow:0 6px 18px rgba(22,59,53,.12)}
.d-carte .dl .sv{display:inline-block;padding:2px 2px 10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 0 12 4 T 24 4' fill='none' stroke='%23163b35' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/24px 8px}
.d-carte:hover .dl .sv{animation:vague-file .9s linear infinite}
@media (max-width:900px){
  .deux-w{grid-template-columns:1fr}
  .d-carte .d-im{aspect-ratio:16/9}
  .d-carte .d-tx{padding:22px 22px 22px}
  #deux{padding:26px 12px 4px}
}
@media (min-width:901px){body.bm-a .hero .lead{max-width:80ch} body.bm-a .gestes3{grid-template-columns:repeat(3,1fr)}}
/* ================= l'accueil comme une histoire (09/09/2026) ================= */
#railpage{display:none}
/* le heros de la page d'attente */
.hero-f{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  min-height:100vh;min-height:100svh;overflow:hidden;padding:14vh 28px 40px;box-sizing:border-box;
  background:linear-gradient(180deg,#b6d5e8 0%,var(--bleu) 52%,#98c0da 100%)}
.hero-f::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;z-index:4;
  background:var(--casse);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 37.5 2 75 10 T 150 10 L 150 20 L 0 20 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  -webkit-mask-size:150px 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 37.5 2 75 10 T 150 10 L 150 20 L 0 20 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  mask-size:150px 100%}
#nuee-f{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#libhero-f{position:absolute;top:0;left:0;width:112px;height:auto;z-index:6;overflow:visible;opacity:0;
  color:rgba(255,255,255,.82);pointer-events:none;will-change:transform,opacity;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}
#libhero-f .a1{animation:b1 400ms ease-in-out infinite alternate}
#libhero-f .a2{animation:b2 400ms ease-in-out infinite alternate 40ms}
#libhero-f.pose .a1,#libhero-f.pose .a2{animation:none}
.main-f{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center}
.logo-f{width:min(31vw,600px);color:#fff7cb;filter:drop-shadow(0 6px 18px rgba(22,59,53,.12))}
.logo-f svg{width:100%;height:auto;display:block}
.main-f h1{font-size:clamp(34px,4.2vw,84px);line-height:1.1;margin:9vh 0 0;color:#fff7cb;max-width:none;
  font-weight:400;letter-spacing:-.01em;opacity:.9}
.main-f h1 b{font-weight:900;opacity:1}
/* 15/10/2026 : le surtitre dans le h1 (SEO), petite ligne au-dessus du slogan */
.main-f h1 .h1-sur{display:block;font-family:'Glacial Indifference','Jost',sans-serif;font-weight:400;font-size:13px;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;margin:0 0 18px;opacity:.85}
.main-f h1 .h1-t{display:block}
@media (max-width:900px){.main-f h1 .h1-sur{font-size:11px;letter-spacing:.2em;margin-bottom:12px}}
.main-f .sous-h{margin:46px auto 0;max-width:44em;color:#fff7cb;font-family:'Recoleta',Georgia,serif;font-style:italic;
  font-size:17px;line-height:1.6;opacity:.95}
@media (max-width:900px){.main-f .sous-h{font-size:15px;margin-top:30px;padding:0 6px}}
.sous-h .past-h{display:inline-block;font-style:normal;font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.04em;line-height:1;
  padding:7px 13px 6px;border-radius:999px;color:#163b35;text-decoration:none;margin:0 2px;vertical-align:2px;transition:transform .2s ease,box-shadow .2s ease}
.sous-h .past-s{background:#fbfaf6}
.sous-h .past-b{background:#fff7cb}
.sous-h .past-h:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,59,53,.18)}
@media (max-width:900px){.sous-h .past-h{font-size:13px;padding:6px 11px 5px}}
@media (max-width:900px){.hero-f{min-height:100vh;min-height:100svh;padding:40px 20px 50px}
  .logo-f{width:min(58vw,300px)}.main-f h1{font-size:clamp(28px,8vw,36px);margin-top:36px;max-width:11em}.main-f h1 br{display:none}}
/* la journee : les six moments cote a cote, alignes ligne a ligne, un ecran au plus */
#chap1.jour{box-sizing:border-box;display:flex;flex-direction:column;padding:26px 40px 18vh;background:var(--casse)}
#chap1.jour .chap{padding:0 14px 10px;max-width:none}
.moments{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto auto auto auto auto;gap:22px}
.mo{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0;border-radius:14px;padding:16px 16px 16px;
  overflow:hidden;color:var(--vert)}
.mo .mh{margin:0;display:flex;flex-direction:column;gap:3px}
.mo .ch{font-size:22px;line-height:1}
.mo .cm{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
.mo .meteo{height:74px;margin:10px 0 6px;display:flex;align-items:center;justify-content:center}
.mo .meteo svg{width:120px;height:70px;display:block;overflow:visible}
.mo .ttt{font-size:clamp(17px,1.35vw,21px);line-height:1.18;margin:0;align-self:start}
.mo .ppp{font-size:clamp(14px,1.05vw,15px);line-height:1.55;margin:10px 0 0;opacity:.9}
.mo .ppp p{margin:0 0 .55em}
.mo .jjj{font-family:'Recoleta',Georgia,serif;font-style:italic;font-size:clamp(15px,1.15vw,16px);line-height:1.35;margin:8px 0 0;align-self:start}
.m0{background:#dfeaf3}
.m1{background:#e4eee2}
.m2{background:#fbf3c9}
.m3{background:#d6dfdb}
.m4{background:#b6c5b8}
.m5{background:#16342e;color:#fff7cb}
.m5 .cm{opacity:.7}
/* les petites meteos */
.sol-lev{animation:sol-lev 6s ease-in-out infinite alternate}
@keyframes sol-lev{from{transform:translateY(8px)}to{transform:translateY(-10px)}}
.nu-1{animation:nu-1 9s ease-in-out infinite alternate}
@keyframes nu-1{from{transform:translateX(-8px)}to{transform:translateX(14px)}}
.ray{transform-origin:60px 35px;animation:ray 24s linear infinite}
@keyframes ray{to{transform:rotate(360deg)}}
.pluie line{animation:pluie 1.1s linear infinite}
.pluie line:nth-child(2){animation-delay:.3s}
.pluie line:nth-child(3){animation-delay:.6s}
.pluie line:nth-child(4){animation-delay:.15s}
@keyframes pluie{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.vent path{stroke-dasharray:60;stroke-dashoffset:0;animation:vent 4s ease-in-out infinite}
.vent path:nth-child(2){animation-delay:.6s}
.vent path:nth-child(3){animation-delay:1.2s}
@keyframes vent{0%{stroke-dashoffset:60;opacity:0}30%{opacity:1}70%{stroke-dashoffset:-20;opacity:1}100%{stroke-dashoffset:-60;opacity:0}}
.etoiles circle{animation:etoile 2.6s ease-in-out infinite alternate}
.etoiles circle:nth-child(2){animation-delay:.7s}
.etoiles circle:nth-child(3){animation-delay:1.3s}
.etoiles circle:nth-child(4){animation-delay:.4s}
.etoiles circle:nth-child(5){animation-delay:1.9s}
@keyframes etoile{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sol-lev,.nu-1,.ray,.pluie line,.vent path,.etoiles circle{animation:none}}
@media (max-width:1100px){#chap1.jour{max-height:none;padding:70px 0 22px}
  #chap1.jour .chap{padding:0 26px 12px}
  .moments{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 26px 14px;gap:12px;-webkit-overflow-scrolling:touch}
  .mo{display:flex;flex-direction:column;flex:0 0 min(78vw,360px);scroll-snap-align:start}
  .mo .ttt{font-size:21px}.mo .ppp{font-size:14px}.mo .jjj{font-size:16px}}
/* le fonctionnement, resserre */
body.bm-a #chap2.plein{height:auto;min-height:0;max-height:100vh;max-height:100svh}
#chap2 .cadre.bloc{padding-top:34px}
#chap2 .s1-deux p{margin:6px auto 0;max-width:60ch}
#chap2 .s1-deux b{font-weight:600}
/* 16/09 au soir (Vincent) : la ligne « Et ensuite, ca continue » se cale sur les trois cartes,
   meme grille que .gestes3 : le titre sous 01, le service sous 02, la boutique sous 03. */
#chap2 .s1-deux{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;align-items:baseline;
  text-align:left}
/* 26px : le meme ecart que .gestes3, sinon les colonnes ne tombent pas dessous */
#chap2 .s1-deux .t{text-align:left}
#chap2 .s1-deux p{margin:0;max-width:none}
@media (max-width:900px){#chap2 .s1-deux{grid-template-columns:1fr;gap:14px}}
#chap2 .cadre.bloc>.dedans{max-width:1040px;margin-left:auto;margin-right:auto}
/* la ligne du bas prend la largeur des trois cartes, pas celle du texte : les colonnes s'alignent */
#chap2 .s1-deux{max-width:none;margin-left:0;margin-right:0}
/* les deux offres : la variante D du labo (14/09 nuit), photo fine et texte sur creme */
body.bm-a #deux.partage{padding:0 26px;max-height:none}
#deux .chap{padding:0 14px 14px;max-width:1400px}
.mt-w{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:884px;margin:0 auto}
/* echelle 85 % (Morgane, 14/09 nuit) */
.mt-c{display:flex;flex-direction:column;align-items:flex-start;color:var(--vert)}
.mt-k{font-family:'Recoleta',Georgia,serif;font-style:italic;font-size:clamp(15px,1.3vw,20px);color:var(--vert);
  line-height:1.25;margin:0 0 12px;text-align:center;width:100%;min-height:2.5em;display:flex;align-items:flex-end;justify-content:center}
.mt-im{display:block;width:100%;aspect-ratio:16/8;border-radius:12px;background:center/cover no-repeat;transition:transform .4s}
.mt-im:hover{transform:translateY(-3px)}
.mt-nom{display:block;font-size:clamp(26px,2.7vw,39px);line-height:1;margin:15px 0 10px;position:relative;padding-bottom:10px}
.mt-nom:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:4px;border-radius:3px}
.mt-bleu .mt-nom:after{background:var(--bleu)}
.mt-jaune .mt-nom:after{background:var(--jaune)}
.mt-t{display:block;font-size:13.5px;line-height:1.6;max-width:34em}
.mt-bas{display:flex;flex-direction:column;align-items:flex-start;margin-top:auto;padding-top:12px}
.mt-d{font-size:12.5px;letter-spacing:0;opacity:.85;color:var(--vert);line-height:1.45}
.mt-c .dl{display:inline-flex;margin-top:10px;border-radius:11px;padding:8px 17px 4px;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#163b35;text-decoration:none;box-shadow:0 6px 18px rgba(13,36,32,.14)}
.mt-c .dl-bleu{background:var(--bleu)}
.mt-c .dl-jaune{background:var(--jaune)}
.mt-c .dl .sv{display:inline-block;padding:2px 2px 10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 0 12 4 T 24 4' fill='none' stroke='%23163b35' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/24px 8px}
.mt-c .dl:hover .sv{animation:vague-file .9s linear infinite}
@media (min-width:901px){.mt-k{white-space:nowrap;min-height:0;font-size:clamp(14px,1.22vw,18px)}}
/* 21/09 Morgane : une ligne */
@media (max-width:900px){.mt-w{grid-template-columns:1fr;gap:34px}.mt-k{min-height:0}
  body.bm-a #deux.partage{padding:0 12px}}
/* les dispositifs dans le paysage : les photos de Morgane, carrees, tout petit arrondi,
   avec les petites libellules, sans legende ni polaroid */
.carte figcaption{display:none}
body.bm-a .defile-band figure{background:none;padding:0;box-shadow:none}
body.bm-a .defile-band figure:nth-child(odd),body.bm-a .defile-band figure:nth-child(even){transform:none}
body.bm-a .carte{width:340px}
body.bm-a .carte i{border:0;border-radius:6px;height:340px}
/* 20/09 (Morgane) : une Inyo, une Wiliv, en alternance : 8 cartes (4 + 4), doublees pour la boucle */
body.bm-a .carte .cb1{background-image:url(f453894ea818.webp);background-position:right 45%}
body.bm-a .carte .cb2{background-image:url(0e9689d7b003.webp);background-position:center 55%}
body.bm-a .carte .cb3{background-image:url(947382d83770.webp);background-position:60% 50%}
body.bm-a .carte .cb4{background-image:url(2cededd7ef92.webp);background-position:center 50%}
body.bm-a .carte .cb5{background-image:url(1275f718c102.webp);background-position:center 50%}
body.bm-a .carte .cb6{background-image:url(10d1794c8cd9.webp);background-position:center 50%}
body.bm-a .carte .cb7{background-image:url(e70050c44d01.webp);background-position:center 50%}
body.bm-a .carte .cb8{background-image:url(e73fb6a17e34.webp);background-position:center 50%}
/* 20/09 (Morgane) : sur chaque photo du carrousel, la marque du materiel, dans la couleur de son
   univers : Inyo en bleu (le service), Wiliv en jaune (la boutique). Un onglet en bas a droite.
   07/10 (Morgane) : z-index 4, au-dessus des libellules .lib-p (z-index 3, mk_labo17) qui couvraient le mot. */
body.bm-a .carte i{position:relative}
body.bm-a .carte i::after{content:"Inyo";position:absolute;z-index:4;right:14px;bottom:8px;font-family:'Recoleta',Georgia,serif;font-weight:700;font-size:44px;line-height:1;letter-spacing:-.01em;color:var(--bleu,#aacde2);text-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3)}
body.bm-a .carte .cb2::after,body.bm-a .carte .cb4::after,body.bm-a .carte .cb6::after,body.bm-a .carte .cb8::after{content:"Wiliv";color:var(--jaune,#fff7cb)}
@media (max-width:1100px){body.bm-a .carte i::after{font-size:32px;right:10px;bottom:6px}}
/* 20/09 (Morgane) : la libellule aquarelle « flotte un peu » dans l'encadre bleu. Le scaleX(-1)
   vient de mk_labo17 (elle regarde vers le texte), on le garde dans chaque etape. */
@keyframes flotte{0%,100%{transform:scaleX(-1) translate(0,0) rotate(0deg)}
  30%{transform:scaleX(-1) translate(5px,-9px) rotate(1.6deg)}
  55%{transform:scaleX(-1) translate(-2px,-13px) rotate(-.8deg)}
  80%{transform:scaleX(-1) translate(-5px,-4px) rotate(-1.8deg)}}
body.bm-a .pourquoi .aq img{animation:flotte 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){body.bm-a .pourquoi .aq img{animation:none}}
.defile-band{padding:20px 0 40px}
body.bm-a #chap5b.plein{height:auto;min-height:0;padding:34px 0 10px}
@media (max-width:1100px){body.bm-a .carte{width:240px}body.bm-a .carte i{height:300px}}
/* de l'air entre les sections */
#chap1.jour{margin-top:12vh}
body.bm-a #chap2.plein{margin:18vh auto 0}
body.bm-a #deux{margin-top:16vh}
body.bm-a #chap5b.plein{margin-top:18vh;padding:34px 0 10px}
body.bm-a #chap5.plein{margin-top:18vh}
footer#pied{margin-top:12vh}
@media (max-width:900px){#chap1.jour{margin-top:5vh}body.bm-a #chap2.plein,body.bm-a #chap5b.plein,body.bm-a #chap5.plein{margin-top:7vh}body.bm-a #deux{margin-top:6vh}}
/* le menu se montre au defilement */
header#hdr.h2{transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .4s}
body:not(.menu-la) header#hdr.h2{transform:translateY(-100%);opacity:0;pointer-events:none}
/* aussi sur telephone (Vincent, 15/09 : il n est pas la avant qu on defile) */
/* la bascule : un seul ecran, le texte a gauche, la borne a droite */
.basc{position:relative;height:100vh;height:100svh;min-height:560px;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  text-align:left;padding:0 6vw;box-sizing:border-box;overflow:hidden;background:#07110f;color:#fbfaf6}
.basc .asp{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.basc .bt{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:none;grid-column:1;justify-self:end;padding-right:4vw}
.basc p{margin:0}
.basc .l1{font-size:clamp(26px,2.9vw,44px);line-height:1.15;color:#fff7cb;max-width:14em}
.basc .l2{font-size:clamp(26px,2.9vw,44px);line-height:1.1;opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s ease}
.basc.l2-la .l2{opacity:1;transform:none}
.basc .apres-b{margin-top:14px;font-family:'Recoleta',Georgia,serif;font-size:20px;
  line-height:1.3;letter-spacing:0;opacity:0;transition:opacity 1.6s ease 1.2s}
.basc .borne-b{position:absolute;left:66%;top:50%;width:min(68vh,640px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  background:center 40%/cover no-repeat;border-radius:50%;z-index:2;opacity:0;
  transition:opacity 2.4s ease;filter:brightness(.5) saturate(.8);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.basc.borne-la .borne-b{opacity:1}
.basc.borne-la .apres-b{opacity:.8}
@media (max-width:900px){.basc{grid-template-columns:1fr;align-items:center;justify-items:center;
    padding:6vh 24px 8vh;text-align:center}
  .basc .bt{align-items:center;max-width:none;justify-self:center;padding-right:0}
  .basc .borne-b{left:50%;top:62%;width:min(44vh,88vw)}
  .basc .apres-b{font-size:17px}}
/* ---- audit du 16/09, P14 : pas de boutons dans le premier ecran ----
   Ils y avaient ete ajoutes le 16/09 puis retires le soir meme, a la demande de Vincent :
   le heros garde le titre, la phrase et la libellule qui se pose sur le L, rien d'autre.
   L'en-tete reste absent tant qu'on n'a pas defile (demande du 15/09). */
/* le lien « en savoir plus sur la marque » et l'aquarelle du 05 */
#chap5 .soeur .plus{font-size:12.5px}
@media (max-width:900px){#chap5 .soeur .plus{display:inline-flex;align-items:center;min-height:44px}}
#chap5 .plein .cadre,#chap5 .duo{align-items:center}
/* ================= les titres de section : le numero geant, v3 = labo B (10/09/2026) =================
   le numero en grand a gauche, dans le flux (rien ne se superpose), la libellule et le
   libelle decales a sa droite, le titre en grand dessous */
.chap{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:14px;
  padding:0 0 10px;margin:0 0 14px;max-width:none}
.chap .ligne{display:contents}
.chap .ligne .cnum{order:0;display:block!important;font-family:'Recoleta',Georgia,serif;font-size:76px!important;line-height:.85!important;
  color:var(--bleu,#aacde2)!important;opacity:1!important;background:none!important;margin:0 4px 0 0!important;letter-spacing:-.02em;
  width:auto!important;height:auto!important;min-width:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.chap .clib{order:1;margin:0!important;position:relative;z-index:1}
.chap .clab{order:2;margin-left:2px!important}
.chap .clab{font-size:14px;letter-spacing:.34em;text-transform:uppercase;opacity:1;padding-top:0}
.chap .clib{height:24px;width:auto;opacity:.5;flex:none;display:block;margin:0;padding-top:0}
.chap+.h2t,.chap+h2,h2.h2t{font-size:clamp(34px,4vw,56px);line-height:1.08;margin:0 0 14px;text-wrap:balance}
@media (max-width:900px){.chap .ligne .cnum{font-size:60px!important}.chap .clab{font-size:12px;letter-spacing:.26em}.chap .clib{height:22px}}