@font-face{font-family:"Recoleta";font-weight:400;font-style:normal;font-display:swap;src:url(557f6a4d25ca.woff2) format("woff2")}
@font-face{font-family:"Recoleta";font-weight:500 900;font-style:normal;font-display:swap;src:url(a0ea3e34e968.woff2) format("woff2")}
@font-face{font-family:"Glacial Indifference";font-weight:400;font-style:normal;font-display:swap;src:url(c9b902975a0c.woff2) format("woff2")}
@font-face{font-family:"Glacial Indifference";font-weight:500 700;font-style:normal;font-display:swap;src:url(cd3f3f62980e.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:300 400;font-style:normal;font-display:swap;src:url(cf7d38e27152.woff2) format("woff2")}
:root{
  --vert:#163b35; --nuit:#0d2420; --jaune:#fff7cb; --clair:#EEF4EF;
  --blanc:#FBFCFB; --ciel:#e6f1f8; --gris:#5E6F69;
  --haut:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:98px}
body{margin:0;background:var(--blanc);color:var(--vert);
  font-family:'Glacial Indifference','Jost','Helvetica Neue',system-ui,sans-serif;font-weight:300;font-size:17px;
  line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0 0 1.1em}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
::selection{background:var(--jaune);color:var(--vert)}
img{max-width:100%}
.ins{font-family:'Recoleta',Georgia,serif;font-weight:400}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.6}
.wrap{max-width:1240px;margin:0 auto;padding:0 64px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 30px;background:var(--vert);color:var(--blanc);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:opacity .3s}
.cta:hover{opacity:.84}
.cta-l{background:transparent;color:var(--vert);border:1px solid rgba(22,59,53,.28)}
.cta-l:hover{background:rgba(22,59,53,.05);opacity:1}
.souligne span{box-shadow:inset 0 -.46em 0 var(--jaune)}
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity 1.1s cubic-bezier(.22,.7,.28,1),transform 1.1s cubic-bezier(.22,.7,.28,1)}
.reveal.vu{opacity:1;transform:none}
/* ================= bandeau + en-tête (H1) ================= */
#bandeau{position:fixed;top:0;left:0;right:0;height:32px;z-index:60;
  background:var(--nuit);display:flex;align-items:center;justify-content:center}
#bandeau span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,247,203,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 16px}
#bandeau .court{display:none}
header{position:fixed;top:32px;left:0;right:0;z-index:55;color:var(--vert);
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:13px 64px;background:rgba(251,252,251,.92);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(22,59,53,.08)}
header .marque{width:138px}
header .marque svg{width:100%;height:auto;display:block}
header nav{display:flex;gap:30px;align-items:center;font-size:13px;letter-spacing:.12em}
header nav a:not(.cta):hover{opacity:.55}
header nav .cta{min-height:40px;padding:0 18px;font-size:12px}
header .fil{position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:rgba(22,59,53,.08);pointer-events:none}
header .fil i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--nuit)}
header .fil .aig{position:absolute;top:-9px;left:0;width:38px;height:auto;
  margin-left:-19px;transform-origin:45% 45%;
  filter:drop-shadow(0 0 2px rgba(251,252,251,.95))
  drop-shadow(0 0 5px rgba(251,252,251,.75))}
/* ================= une section = un ecran, strictement ================= */
.plein{height:calc(100vh - 98px);height:calc(100svh - 98px);min-height:520px;display:flex;flex-direction:column;
  justify-content:center;justify-content:safe center;overflow:hidden;box-sizing:border-box}
.plein>*{width:100%;box-sizing:border-box}
.plein>.pan{flex:1;display:flex;flex-direction:column;min-height:0}
.plein>.pan>.cadre{flex:1;display:flex;flex-direction:column;justify-content:center;
  min-height:0}
@media (max-width:1100px){.plein{height:auto;min-height:0;overflow:visible}}
/* ================= en-têtes de chapitre : libellule, numéro, titre ================= */
.chap{display:flex;align-items:center;justify-content:flex-start;gap:16px;
  text-align:left;color:var(--vert);width:100%;max-width:1320px;margin:0 auto;
  padding:16px 40px 14px}
.chap .clib{height:30px;width:auto;display:block;margin:0;opacity:.36;flex:none}
.chap .ligne{display:flex;align-items:baseline;gap:12px}
.chap .cnum{font-size:18px;line-height:1;opacity:.35}
.chap .clab{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.66}
#chap1 .chap{max-width:1180px}
.bascule .chap{display:none}
/* ================= le héros : la nuée ================= */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;display:flex;align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--blanc) 0%,#eef5fa 55%,var(--ciel) 100%);
  padding:96px 0 24px}
#nuee{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#libhero{position:absolute;top:0;left:0;width:112px;height:auto;z-index:2;opacity:0;
  color:var(--vert);pointer-events:none;will-change:transform,opacity}
.hero .in{position:relative;z-index:3}
.hero h1{font-size:clamp(38px,5.1vw,82px);line-height:1.05;letter-spacing:-.018em;
  margin-top:20px;max-width:16ch}
.hero .lead{font-size:clamp(15.5px,1.3vw,18px);line-height:1.7;max-width:44ch;
  margin-top:24px;opacity:.8}
.hero .actions{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.hero .prix{font-size:14px;opacity:.65;margin-top:18px}
.hero .prix b{font-weight:400;box-shadow:inset 0 -.5em 0 var(--jaune)}
.hero .in>*{opacity:0;transform:translateY(16px);
  transition:opacity 900ms ease,transform 900ms cubic-bezier(.2,.7,.3,1)}
.hero.ne .in>*{opacity:1;transform:none}
.hero.ne .in>*:nth-child(1){transition-delay:120ms}
.hero.ne .in>*:nth-child(2){transition-delay:240ms}
.hero.ne .in>*:nth-child(3){transition-delay:560ms}
.hero.ne .in>*:nth-child(4){transition-delay:740ms}
.hero.ne .in>*:nth-child(5){transition-delay:880ms}
/* les ailes battent (pivot dans le repère local des tracés) */
.aile{will-change:transform}
/* 07/10/2026 (audit technique) : 150 ms -> 400 ms, le battement a 150 ms pesait 0,9 s de TBT sur l'accueil */
#libhero .a1,#seq .libv .a1,footer .volf .a1{animation:b1 400ms ease-in-out infinite alternate}
#libhero .a2,#seq .libv .a2,footer .volf .a2{animation:b2 400ms ease-in-out infinite alternate 40ms}
@keyframes b1{from{transform:translate(451px,304px) scale(1,1) translate(-451px,-304px)}
  to{transform:translate(451px,304px) scale(1,.52) translate(-451px,-304px)}}
@keyframes b2{from{transform:translate(451px,304px) scale(1,1) translate(-451px,-304px)}
  to{transform:translate(451px,304px) scale(1,.66) translate(-451px,-304px)}}
@media (prefers-reduced-motion:reduce){
  #libhero .a1,#libhero .a2,#seq .libv .a1,#seq .libv .a2,footer .volf .a1,footer .volf .a2{animation:none}
  footer .volf{display:none}}
/* ================= le rail de page (une barre par section) ================= */
#railpage{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:44;
  display:flex;flex-direction:column;gap:11px}
#railpage a{display:block;width:2px;height:20px;background:var(--vert);opacity:.16;
  position:relative;transition:opacity .35s,height .35s,background .35s}
#railpage a.ici{opacity:.92;height:32px}
#railpage.surnuit a{background:var(--clair)}
#railpage a .lbl{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:inherit;opacity:0;transition:opacity .25s;pointer-events:none}
#railpage a:hover{opacity:.7}
#railpage a:hover .lbl{opacity:.65}
#railpage.surnuit a .lbl{color:var(--clair)}
@media (max-width:1120px),(prefers-reduced-motion:reduce){#railpage{display:none}}
/* ================= la journée : le plan-séquence ================= */
#seq .pastilles{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;gap:15px;align-items:center;z-index:7}
#seq .pt{width:9px;height:9px;flex:none;border-radius:50%;background:currentColor;
  opacity:.22;border:none;cursor:pointer;padding:0;position:relative;color:inherit;
  transition:opacity .3s,transform .3s,background .3s}
#seq .pt:hover{opacity:.6}
#seq .pt.ici{opacity:1;background:var(--jaune);transform:scale(1.3)}
#seq .pt span{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.16em;white-space:nowrap;opacity:0;
  transition:opacity .25s;pointer-events:none;color:inherit}
#seq .pt:hover span{opacity:.75}
#seq .indic{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin:0 0 10px;
  white-space:nowrap;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.4;
  transition:opacity .8s}
#seq .indic.off{opacity:0}
#seq{position:relative}
#seq .scene{position:relative;
  height:calc(100vh - 268px);height:calc(100svh - 268px);min-height:400px;overflow:hidden;
  background:#ddeefa;color:var(--vert);border:1px solid rgba(22,59,53,.14)}
#seq .scene.sombre{color:var(--clair)}
#seq .fondciel{position:absolute;inset:0}
#seq .astre{position:absolute;width:820px;height:820px;margin:-410px 0 0 -410px;
  border-radius:50%;pointer-events:none;will-change:transform,opacity}
#seq .grains{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#seq .art{position:absolute;top:50%;left:50%;width:min(660px,84%);
  margin-left:max(-330px,-42%);transform:translateY(-42%);text-align:center;
  opacity:0;pointer-events:none;color:inherit;transition:none}
#seq .art.sort{opacity:0;transform:translateY(calc(-50% - 52px));pointer-events:none;
  transition:opacity 300ms ease,transform 300ms cubic-bezier(.45,0,.8,.4)}
#seq .art.actif{opacity:1;transform:translateY(-50%);pointer-events:auto;
  transition:opacity 600ms ease 100ms,transform 600ms cubic-bezier(.2,.7,.3,1) 100ms}
#seq .filig{position:absolute;inset:0;pointer-events:none;z-index:1}
#seq .fg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:min(21vw,270px);line-height:1;letter-spacing:-.03em;white-space:nowrap;
  opacity:0;color:currentColor;transition:opacity 600ms ease}
#seq .coin{position:absolute;top:26px;left:30px;z-index:6;margin:0;
  display:flex;align-items:baseline;gap:12px}
#seq .coin .ch{font-family:'Recoleta',Georgia,serif;font-size:26px;line-height:1}
#seq .coin .cm{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.55}
#seq .ttt{font-size:clamp(30px,3.3vw,48px);line-height:1.14;max-width:18ch;
  margin-left:auto;margin-right:auto}
#seq .ppp{font-size:16.5px;line-height:1.85;margin-top:18px;max-width:44ch;opacity:.86;
  margin-left:auto;margin-right:auto}
#seq .ppp p{margin:0 0 .7em}
#seq .jjj{font-family:'Recoleta',Georgia,serif;font-style:italic;
  font-size:clamp(20px,1.9vw,27px);line-height:1.35;margin-top:22px;max-width:29ch;
  margin-left:auto;margin-right:auto}
#seq .txts{position:absolute;inset:0;z-index:5;pointer-events:none}
#seq .libv{position:absolute;top:0;left:0;width:62px;height:auto;z-index:6;opacity:0;
  pointer-events:none;will-change:transform,opacity}
/* la petite flèche qui saute la journée : à droite du cadre, dans la marge */

/* ================= la bascule : le bandeau sombre ================= */
.bascule{background:var(--nuit);color:var(--clair);text-align:center;
  padding:110px 40px;position:relative;z-index:1}
.bascule .avant{font-size:16.5px;line-height:1.85;max-width:44ch;margin:0 auto;
  opacity:.62;letter-spacing:.01em}
.bascule .fort{font-size:clamp(36px,4.8vw,68px);line-height:1.14;max-width:20ch;
  margin:42px auto 0}
.bascule .retenue{font-style:italic;font-size:clamp(24px,3vw,42px);line-height:1.2;
  margin:30px auto 0;opacity:.92}
.bascule .apres{margin:60px auto 0;font-size:15.5px;opacity:.6;letter-spacing:.04em}
/* ================= chapitres : des panneaux encadrés sur le blanc ================= */
.pan{max-width:1320px;margin:0 auto;padding:24px 40px 56px}
.pan-seq{max-width:1180px;padding-bottom:26px}
.cadre{border:1px solid rgba(22,59,53,.14);
  background:linear-gradient(178deg,#F7FAFB,#E9F1F4);
  padding:50px 64px;position:relative}
.cadre.blanc{background:var(--blanc)}
.bloc{position:relative;z-index:1}
.bloc h2{font-size:clamp(32px,3.3vw,48px);line-height:1.12;max-width:34ch}
.bloc .corps{font-size:17px;line-height:1.8;max-width:54ch;margin-top:20px;opacity:.84}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.vign{height:min(46vh,420px);background-size:cover;background-position:center;position:relative}
.vign .lg{position:absolute;left:0;top:100%;margin-top:10px;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;opacity:.4;line-height:1.7;max-width:34ch}
.second{display:grid;grid-template-columns:330px 1fr;gap:44px;align-items:start;
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(22,59,53,.14)}
.second h3{font-family:'Recoleta',Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.4vw,34px);line-height:1.16;margin:0}
.second p{font-size:15.5px;line-height:1.75;max-width:54ch}
.second p:last-child{margin-bottom:0}
/* les trois gestes du service */
.gestes{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(22,59,53,.14)}
.geste{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start;
  padding:13px 0;border-bottom:1px solid rgba(22,59,53,.14)}
.geste .gn{font-size:30px;line-height:1.1;opacity:.3}
.geste b{font-weight:400;font-family:'Recoleta',Georgia,serif;font-size:21px;
  display:block;margin-bottom:6px}
.geste p{margin:0;font-size:13.5px;line-height:1.65;opacity:.68;max-width:38ch}
/* l'offre */
.offres.cadre{padding:30px 52px 22px}
.offres .tete{margin:0 auto;text-align:center;max-width:30ch;font-size:clamp(23px,2.3vw,31px)}
.offres .chapo{margin:7px auto 0;text-align:center;font-size:14px;opacity:.7;max-width:52ch}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.niv{padding:0 40px 0 0}
.niv+.niv{border-left:1px solid rgba(22,59,53,.14);padding-left:40px}
.niv .nom{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.5;
  display:flex;align-items:baseline;gap:12px}
.niv .nom b{font-family:'Recoleta',Georgia,serif;font-size:20px;font-weight:400;
  letter-spacing:0;opacity:.4;line-height:1}
.niv .t{font-family:'Recoleta',Georgia,serif;font-size:clamp(20px,1.8vw,25px);
  line-height:1.16;margin-top:8px;min-height:0}
.niv .sous{font-size:10.5px;letter-spacing:.04em;opacity:.42;margin-top:4px;min-height:2.4em}
.niv .d{font-size:13px;line-height:1.55;opacity:.62;margin-top:7px;min-height:6.3em}
.niv .prixl{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.niv .p{font-family:'Recoleta',Georgia,serif;font-size:clamp(28px,2.6vw,36px);
  line-height:1;display:inline-block}
.niv .e{font-size:.42em;vertical-align:.44em;margin-left:.1em;opacity:.55}
.niv .u{font-size:11px;opacity:.45;letter-spacing:.08em}
.niv .lanc{margin-top:10px;display:inline-block;background:var(--jaune);color:var(--vert);
  font-size:11.5px;letter-spacing:.03em;padding:5px 11px}
.niv .incl{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;line-height:1.45;
  opacity:.78}
.niv .incl li{padding:6px 0 6px 15px;position:relative;border-top:1px solid rgba(22,59,53,.14)}
.niv .incl li:before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;
  background:var(--jaune);box-shadow:0 0 0 1px rgba(22,59,53,.22)}
.pied-offre{margin-top:16px;font-size:12px;line-height:1.7;opacity:.55;max-width:76ch;
  border-top:1px solid rgba(22,59,53,.14);padding-top:12px}
/* la visite */
.visite h2{margin-top:12px;font-size:clamp(27px,3vw,42px)}
/* l'origine */
.origine{padding:84px 64px 96px;text-align:center}
.origine .intro{font-family:'Recoleta',Georgia,serif;
  font-size:clamp(21px,2.1vw,29px);line-height:1.34;max-width:34ch;margin:20px auto 0;
  text-wrap:balance}
.origine .intro a{border-bottom:2px solid var(--jaune);padding-bottom:2px;
  transition:border-color .3s}
.origine .intro a:hover{border-color:var(--vert)}
.origine .recit{margin:32px auto 0;max-width:54ch;font-size:16.5px;line-height:1.9;
  opacity:.8}
.origine .recit p:last-child{margin-bottom:0;opacity:1}
.origine .lien{display:inline-block;margin-top:30px;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid rgba(22,59,53,.28);padding-bottom:5px;
  transition:border-color .3s}
.origine .lien:after{content:" →"}
.origine .lien:hover{border-color:var(--vert)}
/* pourquoi */
.pourquoi{text-align:center}
.pourquoi .lib-x{width:78px;height:auto;color:var(--vert);opacity:.4;display:block;
  margin:0 auto 22px}
.pourquoi .corps{margin:16px auto 0;max-width:56ch;font-size:16.5px}
/* ================= 05 · le bandeau des jardins ================= */
.defile-band{overflow:hidden;padding:26px 0 56px;position:relative}
.defile-band:before,.defile-band:after{content:"";position:absolute;top:0;bottom:0;
  width:110px;z-index:2;pointer-events:none}
.defile-band:before{left:0;background:linear-gradient(90deg,var(--blanc),rgba(251,252,251,0))}
.defile-band:after{right:0;background:linear-gradient(270deg,var(--blanc),rgba(251,252,251,0))}
.piste{display:flex;gap:26px;width:max-content;animation:derive 98s linear infinite}
/* 20/09 : deux fleches pour les presses (le script est dans la section) */
.defile-band .def-fl{position:absolute;top:calc(50% - 30px);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(22,59,53,.16);background:rgba(251,252,251,.94);color:var(--vert);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 6px 18px rgba(13,36,32,.12);
  transition:transform .2s,background .2s;-webkit-appearance:none;appearance:none}
.defile-band .def-fl:hover{background:#fff;transform:scale(1.06)}
.defile-band .def-g{left:22px}
.defile-band .def-d{right:22px}
.defile-band .def-fl::before{content:"";width:11px;height:11px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:5px}
.defile-band .def-d::before{transform:rotate(-135deg);margin-left:-5px}
@keyframes derive{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.carte{margin:0;width:330px;flex:none}
.carte i{display:block;height:340px;background-size:cover;background-position:center;
  border:1px solid rgba(22,59,53,.14);opacity:.85}
.cb1{background-image:none}
.cb2{background-image:none}
.cb3{background-image:none}
.cb4{background-image:none}
.cb5{background-image:none}
.cb6{background-image:none}
.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}
}
/* ========== LABO XVII : BORD DE MER (brand book strict) ========== */
@font-face{font-family:"Caveat";font-weight:400 700;font-style:normal;
  font-display:swap;src:url(fc15624330b7.woff2) format("woff2")}
@font-face{font-family:"Autography";font-weight:400;
  font-style:normal;font-display:swap;
  src:url(f735d04608d5.woff2) format("woff2")}
:root{--casse:#fbfaf6;--bleu:#aacde2;--bleupale:#e3eef7;
  --jaunepale:#fdf7d9}
body{background:var(--casse)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;
  z-index:4;background:url(9023ca6b6905.webp);background-size:340px;
  mix-blend-mode:soft-light;opacity:.25}
/* le menu (arbitrage 29/08 apres les labos XX et XXIII) : la barre
   de base, pleine largeur, juste un peu plus FINE */
body.bm-a header{padding:8px 64px}
body.bm-a header .marque{width:112px}
body.bm-a header nav{gap:24px;font-size:12.5px}
/* liens a gauche, Dimwazel au centre, rendez-vous a droite */
@media (min-width:901px){
  body.bm-a header{justify-content:flex-start}
  body.bm-a header .marque{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%)}
  body.bm-a header nav{width:100%;justify-content:flex-start}
  body.bm-a header nav .cta{margin-left:auto}
}
@media (max-width:900px){body.bm-a header{padding:7px 20px}}
header{background:rgba(251,250,246,.92)}
.defile-band:before{background:linear-gradient(90deg,var(--casse),
  rgba(251,250,246,0))}
.defile-band:after{background:linear-gradient(270deg,var(--casse),
  rgba(251,250,246,0))}
/* les ecrans pleine hauteur respirent : les blocs ne collent plus au
   bas de la fenetre, et tout a plus d'air */
body.bm-a .plein{height:auto;min-height:calc(100vh - 98px);min-height:calc(100svh - 98px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:10px;padding-bottom:44px}
body.bm-a .bascule.plein{min-height:calc(100vh - 98px);min-height:calc(100svh - 98px);
  padding-top:0;padding-bottom:0}
body.bm-a .chap{padding-top:18px;padding-bottom:8px}
/* le monogramme : fleurons entre les ecrans (curseur) */
.fleuron{display:none}
body.bm-mono .fleuron{display:flex;justify-content:center;
  margin:8px 0 2px}
body.bm-mono .fleuron svg{width:58px;height:auto;color:#163b35;
  opacity:.3}
/* ============ A. LE COLLAGE ============ */
body.bm-a .hero{padding-top:190px;background:linear-gradient(180deg,
  #b6d5e8 0%,var(--bleu) 52%,#98c0da 100%)}
body.bm-a .hero h1{font-size:clamp(25px,2.9vw,44px);line-height:1.16;
  margin-top:10px}
body.bm-a .hero .lead{font-size:15px;line-height:1.75}
body.bm-a .hero .actions{margin-top:26px}
body.bm-a .hero .wrap{padding-bottom:9vh;
  margin-left:clamp(26px,13vw,190px);margin-right:auto}
@media (max-width:900px){body.bm-a .hero .wrap{margin-left:auto}}
body.bm-a .hero::before{content:"";position:absolute;left:0;right:0;
  bottom:-1px;height:22px;z-index:2;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%}
body.bm-a.bm-ray .hero{background:
  repeating-linear-gradient(90deg,var(--casse) 0 16px,
  #eef4fa 16px 32px)}
body.bm-a.bm-ray .hero h1{font-size:clamp(38px,4vw,64px)}
body.bm-a.bm-ray .hero::before{display:none}
body.bm-a .pola-h{display:block;position:absolute;right:34px;
  top:-38px;width:min(270px,22vw);background:#fff;
  padding:12px 12px 14px;box-shadow:0 14px 40px rgba(22,59,53,.2);
  transform:rotate(3.5deg);z-index:3}
body.bm-a .pola-h img{width:100%;height:auto;display:block}
body.bm-a .pola-h figcaption{font-family:'Autography','Caveat',
  cursive;font-size:19px;color:#163b35;text-align:center;
  margin-top:9px;opacity:.9}
body.bm-a .pola-h::before{content:"";position:absolute;top:-12px;
  left:50%;transform:translateX(-50%) rotate(-4deg);width:92px;
  height:26px;background:rgba(255,247,203,.75);
  box-shadow:0 1px 3px rgba(22,59,53,.12)}
body.bm-a #libhero{color:#35688c;opacity:.45;width:158px;
  height:130px;
  -webkit-box-reflect:below 10px
    linear-gradient(transparent 45%,rgba(0,0,0,.22))}
body.bm-a #visite{position:relative;overflow:visible}
/* les blocs : le bleu et le jaune DU BRAND BOOK, sans dilution */
body.bm-a #service,body.bm-a .pourquoi{background:var(--bleu);
  border-radius:18px;padding:36px 44px 40px;margin:0 18px 26px}
body.bm-a #service{padding:26px 40px 28px}
body.bm-a #service .gestes3{margin-top:18px;gap:26px}
body.bm-a #service .s1-fin{margin-top:16px;padding-top:12px}
body.bm-a #offre{background:#fff;border:1px solid rgba(22,59,53,.16);
  border-radius:18px;padding:22px 36px 24px;margin:0 18px 26px}
body.bm-a #offre .tablo th,body.bm-a #offre .tablo td{
  padding:6px 10px;font-size:13px}
body.bm-a #offre .tablo-w{margin-top:10px}
body.bm-a #offre .t-prix{background:var(--jaune);padding:3px 12px;
  border-radius:10px;display:inline-block;white-space:nowrap}
body.bm-a #visite{background:var(--bleu);border-radius:18px;
  padding:36px 44px 40px;margin:0 18px 26px}
body.bm-a .chap .cnum{background:#fff}
body.bm-a .chap .cnum{color:#163b35;opacity:.9;background:#fff;
  border-radius:50%;width:1.9em;height:1.9em;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px}
/* le bouton retenu par Vincent (29/08) : la PASTILLE arrondie (jaune
   pour le principal, blanche pour le secondaire) + le souligne vague
   sous le texte ; au survol la vague se met a courir */
@keyframes vague-file{from{background-position-x:0}
  to{background-position-x:-24px}}
body.bm-a .cta{border:none;background:var(--jaune);border-radius:12px;
  min-height:56px;color:#163b35;padding:10px 30px 6px;font-weight:500;
  font-size:12.5px;letter-spacing:.18em;
  transition:background .25s ease,transform .2s ease}
body.bm-a .cta .sv{display:inline-block;padding:2px 2px 11px;
  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}
body.bm-a .cta:hover{background:#fff3ae;transform:translateY(-2px)}
body.bm-a .cta:hover .sv{animation:vague-file .9s linear infinite}
body.bm-a .cta-l{background:#fff;
  box-shadow:0 6px 18px rgba(22,59,53,.12)}
body.bm-a .cta-l:hover{background:var(--jaune)}
body.bm-a header nav .cta{min-height:34px;padding:6px 16px 2px;
  font-size:10px;border-radius:8px}
body.bm-a header nav .cta .sv{padding:1px 1px 7px;
  background-size:18px 6px}
body.bm-a .lanc{background:#fff}
body.bm-a #offre tr:last-child td{background:var(--jaune)}
body.bm-a .tablo .oui{width:17px;height:17px;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 L 6.5 11.5 L 12.5 4.5' fill='none' stroke='%23163b35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  center/12px no-repeat;outline:1px solid rgba(22,59,53,.4);
  border-radius:4px}
body.bm-a .defile-band figure{background:#fff;padding:10px 10px 34px;
  box-shadow:0 10px 26px rgba(22,59,53,.14)}
body.bm-a .defile-band figure:nth-child(odd){transform:rotate(-1.4deg)}
body.bm-a .defile-band figure:nth-child(even){transform:rotate(1.2deg)}
body.bm-a .souligne span{box-shadow:inset 0 -.46em 0 var(--bleu)}
/* les touches collage (29/08) : une libellule jaune deborde du bloc
   bleu du service, l'ecriture jaune habille les titres des blocs
   bleus, et les trois libellules se posent sur les polaroids */
body.bm-a #service{position:relative}
body.bm-a .lib-deb{position:absolute;top:-36px;right:40px;width:98px;
  height:auto;color:var(--jaune);transform:rotate(-9deg);
  filter:drop-shadow(0 4px 10px rgba(22,59,53,.22))}
body.bm-a #service h2,body.bm-a #visite h2,
body.bm-a .pourquoi h2{color:var(--jaune)}
body.bm-a .carte{position:relative}
body.bm-a .lib-p{position:absolute;height:auto;z-index:3;
  width:46px;color:var(--bleu,#aacde2);pointer-events:none;filter:drop-shadow(0 1px 2px rgba(22,59,53,.28))}
/* 21/09 Morgane : bleues */
body.bm-a .lp1{top:-16px;right:-14px;transform:rotate(13deg)}
body.bm-a .lp2{bottom:-15px;left:-14px;transform:rotate(-11deg)}
body.bm-a .lp3{bottom:-14px;right:-16px;transform:rotate(7deg)}
body.bm-a .lp4{top:-16px;left:-14px;transform:rotate(-15deg)}
body.bm-a .lp5{top:38%;right:-22px;transform:rotate(18deg)}
body.bm-a .lp6{top:-14px;right:44px;transform:rotate(-6deg)}
@media (max-width:640px){body.bm-a .lib-deb{width:74px;top:-26px;
  right:22px}}
/* la section rassure sur le design : titre + gestes elargis */
@media (min-width:901px){
  body.bm-a .gestes3{grid-template-columns:repeat(4,1fr);gap:28px}}
body.bm-a #offre .alac{text-align:center;font-size:12.5px;
  font-style:italic;opacity:.75}
/* les photos des jardins fournies par Vincent (29/08) */
body.bm-a .carte i{opacity:1}
body.bm-a .cb1{background-image:none}
body.bm-a .cb2{background-image:none;
  background-position:center 42%}
body.bm-a .cb3{background-image:none;
  background-position:center 58%}
body.bm-a .cb4{background-image:none;
  background-position:30% 55%}
body.bm-a .cb5{background-image:none;
  background-position:center 76%}
body.bm-a .cb6{background-image:none;
  background-position:30% 62%}
body.bm-a .carte .av{display:none}
/* l'aiguille du fil et la section du nom : l'aquarelle officielle */
body.bm-a .fil .aig{content:none}
body.bm-a .pourquoi .aq img{content:none;
  transform:scaleX(-1);
  filter:drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 12px rgba(255,255,255,.9))}
/* le carton de la visite : calme (Vincent 29/08) : plus de
   pointilles decoupes, plus de rotation au survol */
body.bm-a .carton{background-image:none;
  box-shadow:0 10px 28px rgba(22,59,53,.13);border-radius:6px}
body.bm-a .carton:hover{transform:none;animation:none}
/* les fleches de la journee */
#seq{position:relative;overflow:hidden}
.fseq{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;background:#fff;
  border:1px solid rgba(22,59,53,.25);color:#163b35;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(13,36,32,.16)}
.fseq svg{width:22px;height:22px}
.fseq:hover{background:var(--jaune)}
.fseq-g{left:16px}
.fseq-d{right:16px}
@media (max-width:640px){.fseq{width:38px;height:38px}
  .fseq-g{left:8px}.fseq-d{right:8px}}
/* ---- cadre labo ---- */
#labar{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#0d2420;color:#fff7cb;text-align:center;padding:8px 14px}
#labar .lt{font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase}
#bmsel{position:fixed;right:14px;bottom:52px;z-index:90;
  background:#fdfcf8;border:1px solid rgba(22,59,53,.25);
  border-radius:10px;box-shadow:0 8px 30px rgba(13,36,32,.18);
  padding:12px 14px;width:250px;color:#163b35;
  font-family:'Jost','Helvetica Neue',sans-serif}
#bmsel .mt{font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.75;margin:0 0 8px}
#bmsel .mrow{display:flex;align-items:center;
  justify-content:space-between;gap:8px;margin:5px 0}
#bmsel .ml{font-size:12.5px}
#bmsel .mbs{display:flex;gap:3px}
#bmsel button{font:600 10.5px 'Jost',sans-serif;letter-spacing:.05em;
  border:1px solid rgba(22,59,53,.35);background:transparent;
  color:#163b35;border-radius:6px;padding:3px 9px;cursor:pointer}
#bmsel button.on{background:#163b35;color:#fff7cb;
  border-color:#163b35}
#bmsel .plier{position:absolute;top:8px;right:10px;border:none;
  background:none;font-size:13px;padding:2px;opacity:.6;width:auto;
  margin:0}
body.bmplie #bmsel .mrow{display:none}
@media (max-width:900px){
  body.bm-a .pola-h{position:static;margin:18px auto 0;width:240px;
    transform:rotate(2deg)}
  body.bm-a #service,body.bm-a #offre,body.bm-a #visite,
  body.bm-a .pourquoi{padding:26px 18px 30px;margin:0 6px}
  #bmsel{width:216px;right:8px;bottom:48px}
}
html:not([data-mode="attente"]) .m-attente{display:none!important}
html[data-mode="attente"] .m-preco,html[data-mode="attente"] [data-dispo],html[data-mode="attente"] [data-offre]{display:none!important}
html.liv-offerte .lo-non{display:none!important}
html:not(.liv-offerte) .lo-oui{display:none!important}
header.h2 .pole{position:relative}
/* 20/09 : la libellule est hors flux, sinon elle decale le logo du centre de la barre */
/* 20/09 (Morgane) : la libellule colle a son mot. L'ancre porte ~23px de retrait a gauche,
   d'ou l'ecart de 29px. On decale la libellule de 20px vers la droite (marges gauche et droite
   deplacees de la meme quantite) : l'ecart tombe a 9px et le flux ne bouge pas, donc le logo
   reste au centre de la barre. */
header.h2 .hv-lib{display:none;width:26px;height:auto;flex:none;margin:0 -14px 0 -12px;color:#163b35;opacity:.85;transform:translateY(-3px) rotate(-8deg);pointer-events:none}
html[data-univers="service"] header.h2 .pole.pg .hv-lib,html[data-univers="boutique"] header.h2 .pole.pd .hv-lib{display:block}
html[data-univers="service"] header.h2 .pole.pd .pl,html[data-univers="boutique"] header.h2 .pole.pg .pl{opacity:.5}
html[data-univers="service"] header.h2 .pole.pd .pl:hover,html[data-univers="boutique"] header.h2 .pole.pg .pl:hover{opacity:.85}
/* ================= MEGA MENU (09/09/2026, a la Carli Paris) ================= */
/* plus de bandeau de lancement : le menu colle en haut (Morgane 09/09 soir) */
#bandeau{display:none}
header#hdr.h2{top:0}
html{scroll-padding-top:70px}
.page-int main{padding-top:61px}
/* 16/09 : exactement la hauteur de la barre, sinon un filet creme apparait sous elle quand le heros est colore */
.tiroir .tir-in{padding-top:84px}
body.bm-a .hero{padding-top:150px}
header#hdr.h2{padding:10px 64px;display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,4vw,60px);overflow:visible}
header#hdr.h2 .marque{width:138px;position:static;transform:none;flex:none;margin-top:-2px}
/* 20/09 soir (Morgane) : le logo paraissait plus bas que les mots ; ses lettres descendent 8 px sous la ligne de base des mots et ne montent que 6 px au-dessus : on le remonte d'un pixel */
/* 20/09 : les deux poles font la meme largeur, sinon le logo n'est pas au centre de la barre */
header#hdr.h2 .pole{flex:1 1 0}
header#hdr.h2 .pole.pg{justify-content:flex-end}
header#hdr.h2 .pole.pd{justify-content:flex-start}
header#hdr.h2 nav{width:auto;justify-content:center}
header.h2 .pole{display:flex;align-items:center;flex:none}
header.h2 .pole.pd{margin-left:0}
/* 20/09 (Morgane) : « pourquoi l'icone de l'espace client n'est pas dispo sur la partie service ? »
   Un client du service a aussi un espace : l'icone est sur tout le site, le panier reste a la boutique. */
header.h2 .hico{display:flex;position:absolute;right:28px;top:50%;transform:translateY(-50%);gap:6px;align-items:center}
body:not(.pg-boutique) header.h2 .hi-cart{display:none}
header.h2 .hi{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#163b35;transition:background .2s}
header.h2 .hi svg{width:22px;height:22px}
header.h2 .hi:hover{background:rgba(22,59,53,.08)}
header.h2 .hico-n{position:absolute;top:1px;right:0;min-width:17px;height:17px;line-height:17px;border-radius:999px;background:#163b35;color:#fff;font:500 10px 'Glacial Indifference','Jost',sans-serif;text-align:center;padding:0 4px}
header.h2 .pl{position:relative;display:inline-block;padding:10px 4px;white-space:nowrap;
  font-family:'Recoleta',Georgia,serif;font-size:21px;line-height:1;letter-spacing:.01em;
  color:#163b35}
header.h2 .pl::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:6px;
  border-radius:3px;background:var(--bleu,#aacde2);opacity:0;transform:scaleX(.4);
  transform-origin:left;transition:opacity .25s,transform .35s cubic-bezier(.22,.7,.28,1);
  z-index:-1}
header.h2 .pl.on::after,header.h2 .pl:hover::after{opacity:1;transform:none}
/* 20/09 (Morgane) : le soulignement prend la couleur qui se voit. Sur les pages service, l'entete
   est bleue : bleu sur bleu, le trait n'existait pas, il passe en jaune. Sur l'accueil, chaque
   lien prend la couleur de son univers : bleu sous « Le service », jaune sous « La boutique ». */
html[data-univers="service"] header.h2 .pl::after{background:var(--jaune,#fff7cb)}
html[data-univers="accueil"] header.h2 .pole.pd .pl::after{background:var(--jaune,#fff7cb)}
header.h2 .pl:hover{opacity:1}
header.h2 .burger{display:none;border:none;background:none;padding:8px 6px;
  cursor:pointer;width:38px;height:38px;flex-direction:column;
  justify-content:center;gap:5px;position:absolute;left:10px;top:50%;
  transform:translateY(-50%)}
header.h2 .burger i{display:block;height:1.5px;background:#163b35;
  border-radius:2px;transition:transform .3s,opacity .2s}
header.h2 .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
header.h2 .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
header.h2 .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* le panneau */
header.h2 .mega{position:absolute;left:0;right:0;top:100%;z-index:54;
  background:var(--casse,#fbfaf6);border-top:1px solid rgba(22,59,53,.08);
  box-shadow:0 22px 44px rgba(22,59,53,.14);opacity:0;visibility:hidden;
  transform:translateY(-8px);pointer-events:none;
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,.7,.28,1),
  visibility 0s linear .3s}
header.h2 .mega.on,header.h2 .mega:focus-within,
header.h2 .pole:focus-within+.mega{opacity:1;visibility:visible;transform:none;
  pointer-events:auto;transition-delay:0s}
header.h2 .mega-in{max-width:1180px;margin:0 auto;padding:34px 64px 38px;
  display:grid;gap:26px 34px;align-items:start;color:#163b35}
header.h2 .mega-3{grid-template-columns:repeat(3,minmax(0,1fr)) 260px}
header.h2 .mega-4{grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:"a b c d" "g g g g"}
header.h2 .mega-4 .mcard{grid-area:g;justify-self:start;
  flex-direction:row;align-items:center;gap:22px;max-width:100%}
header.h2 .mega-4 .mcard .mv{max-width:520px}
header.h2 .mcol .mct{display:block;position:static;width:auto;height:auto;background:none;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  opacity:.55;margin:0 0 10px;padding:0;white-space:nowrap;line-height:1.4;font-family:'Glacial Indifference','Jost',sans-serif}
header.h2 .mcol a.mct:hover{opacity:1}
header.h2 .mcol a{display:block;font-size:14.5px;line-height:1.55;
  padding:3px 0;letter-spacing:.01em;transition:opacity .2s}
header.h2 .mcol a:hover{opacity:.6}
header.h2 .mcol a small{display:block;font-size:11.5px;opacity:.6;line-height:1.3;margin-top:1px}
header.h2 .mcard{display:flex;flex-direction:column;gap:8px;
  border-radius:16px;padding:20px 22px 18px;letter-spacing:0;
  transition:transform .25s}
header.h2 .mcard:hover{transform:translateY(-2px)}
header.h2 .mc-bleu{background:var(--bleu,#aacde2)}
header.h2 .mc-jaune{background:var(--jaune,#fff7cb)}
header.h2 .mcard .mk{font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  opacity:.7}
header.h2 .mcard .mv{font-size:19px;line-height:1.25}
header.h2 .mcard .ml{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;padding-bottom:6px;
  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.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/24px 8px;
  align-self:flex-start}
/* le tiroir mobile */
.tiroir{position:fixed;left:0;right:0;top:0;bottom:0;z-index:52;
  background:var(--casse,#fbfaf6);color:#163b35;overflow-y:auto;
  -webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:opacity .3s,transform .35s,
  visibility 0s linear .35s}
.tiroir.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.tiroir .tir-in{padding:112px 28px 60px;max-width:520px;margin:0 auto}
.tiroir .tt{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  opacity:.55;margin:26px 0 6px}
.tiroir .tt:first-child{margin-top:0}
.tiroir .tl{display:block;font-family:'Recoleta',Georgia,serif;font-size:22px;
  line-height:1.2;padding:9px 0;border-bottom:1px solid rgba(22,59,53,.1)}
.tiroir details{border-bottom:1px solid rgba(22,59,53,.1)}
.tiroir summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;
  font-family:'Recoleta',Georgia,serif;font-size:22px;line-height:1.2;
  padding:9px 0}
.tiroir summary::-webkit-details-marker{display:none}
.tiroir summary::after{content:"+";font-family:'Jost',sans-serif;
  font-weight:300;font-size:26px;line-height:1;opacity:.6;
  transition:transform .3s}
.tiroir details[open] summary::after{transform:rotate(45deg)}
.tiroir details .tl{font-family:'Glacial Indifference','Jost',sans-serif;
  font-size:15px;padding:6px 0 6px 14px;border:none;opacity:.85}
.tiroir details .tl:last-child{padding-bottom:14px}
body.tir-ouvert{overflow:hidden}
/* ================= le tiroir mobile v2 (15/09/2026, variante C « epuree » choisie par Vincent le soir) :
   deux univers, le grand titre en Recoleta souligne de sa couleur (bleu service, jaune boutique), une
   ligne par page en capitales fines, pas de panneaux, pas de contact ================= */
.tiroir.t2 .tir-in{padding:26px 24px 130px;max-width:560px}
.tiroir.t2 .tir-accueil{display:inline-flex;align-items:center;gap:10px;color:#163b35;margin:0 0 26px;padding:10px 0;min-height:44px;text-decoration:none}
.tiroir.t2 .tir-accueil svg{width:34px;height:auto;opacity:.9}
.tiroir.t2 .tir-accueil span{font:400 12px/1 'Glacial Indifference','Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.tiroir.t2 .tp{padding:0;margin:0 0 30px;color:#163b35}
.tiroir.t2 .tps{display:none}
.tiroir.t2 .tpt{position:relative;display:inline-block;
  font-family:'Recoleta',Georgia,serif;font-size:clamp(40px,12vw,48px);line-height:1;letter-spacing:-.01em;padding:0 0 4px;margin:0 0 6px;border:none}
.tiroir.t2 .tpt span{background:linear-gradient(transparent 62%,var(--bleu,#aacde2) 62%,var(--bleu,#aacde2) 88%,transparent 88%)}
.tiroir.t2 .tp-jaune .tpt span{background:linear-gradient(transparent 62%,var(--jaune,#fff7cb) 62%,var(--jaune,#fff7cb) 88%,transparent 88%)}
.tiroir.t2 nav{display:block}
.tiroir.t2 .tl{display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 0;border:none;
  font-family:'Glacial Indifference','Jost',sans-serif;font-weight:300;font-size:14px;letter-spacing:.2em;text-transform:uppercase;line-height:1.25}
.tiroir.t2 .tl.ici{font-weight:700;color:#2f6f8f}
.tiroir.t2 .tp-jaune .tl.ici{color:#8a6d00}
.tiroir.t2 .tpt.ici span{background-size:100% 100%}
.tiroir.t2 .tl-n{margin-left:8px;min-width:20px;height:20px;line-height:20px;border-radius:999px;background:#163b35;color:#fff7cb;font:600 11px/20px 'Glacial Indifference','Jost',sans-serif;letter-spacing:0;text-align:center;padding:0 6px}
html[data-mode="attente"] .tiroir.t2 .m-preco{display:none}
/* 10/10/2026 (Morgane) : le menu du telephone tient sur un ecran, sans defiler : les espacements suivent
   la hauteur visible (dvh), le bouton « Fermer » garde sa place en bas */
.tiroir.t2 .tir-in{min-height:100dvh;box-sizing:border-box;padding:max(8px,1.4dvh) 24px 76px!important}
.tiroir.t2 .tir-accueil{margin:0 0 1.6dvh;padding:2px 0;min-height:32px}
.tiroir.t2 .tp{margin:0 0 2.8dvh}
.tiroir.t2 .tpt{font-size:clamp(28px,5.4dvh,48px);margin:0 0 .4dvh}
.tiroir.t2 .tl{min-height:0!important;padding:clamp(3px,1.2dvh,14px) 0;font-size:13.5px;letter-spacing:.18em}
/* ================= l'en-tete sur telephone (15/09/2026 soir, variante C du labo choisie par Vincent) :
   plus de barre ; une pastille « libellule · Menu » en bas au centre, de la couleur de l'univers
   (data-univers sur <html> : accueil = creme, service = bleu, boutique = jaune, pose par mk_mobile) ;
   le logo n'apparait qu'au defilement, petit, dans une pastille de la meme couleur ================= */
:root{--u:var(--casse,#fbfaf6)}
html[data-univers="service"]{--u:var(--bleu,#aacde2)}
html[data-univers="boutique"]{--u:var(--jaune,#fff7cb)}
.pas{display:none;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:56;
  height:52px;border:none;border-radius:999px;padding:0 20px 0 16px;gap:10px;align-items:center;justify-content:center;cursor:pointer;
  color:#163b35;background:var(--u);box-shadow:0 10px 26px rgba(22,59,53,.18),0 1px 0 rgba(255,255,255,.6) inset;
  transition:background .6s ease,bottom .25s ease,transform .25s ease;-webkit-tap-highlight-color:transparent}
.pas:active{transform:translateX(-50%) scale(.96)}
.pas .lib,.pas .crx{display:block;transition:transform .35s cubic-bezier(.22,.7,.28,1),opacity .25s}
.pas .lib{width:26px;height:auto}
.pas .crx{position:absolute;left:14px;width:20px;height:20px;opacity:0;transform:rotate(-90deg) scale(.5)}
body.tir-ouvert .pas .lib{opacity:0;transform:rotate(90deg) scale(.4)}
body.tir-ouvert .pas .crx{opacity:1;transform:none}
.pas .pas-m{font:500 12px/1 'Glacial Indifference','Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;padding-top:2px;min-width:3.6em;text-align:left}
body.f-colle-vu .pas{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){
  .pas{display:flex}
  header#hdr.h2{display:none!important}   /* la barre disparait ; le burger (cache) reste cliquable en JS par la pastille */
  header#hdr.h2 .marque{position:fixed;left:50%;top:calc(40px + env(safe-area-inset-top,0px));width:auto;margin-top:0;padding:8px 16px 6px;border-radius:999px;
    background:var(--u);box-shadow:0 8px 22px rgba(22,59,53,.14);opacity:0;pointer-events:none;
    transform:translate(-50%,-50%) translateY(-10px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,.7,.28,1),background .6s ease}
}
@media (max-width:900px){
  header#hdr.h2{padding:9px 16px;justify-content:center}
  header.h2 .pole{display:none}
  header.h2 .hico{right:12px;gap:0}
  header.h2 .burger{display:flex}
  header#hdr.h2 .marque{width:112px}
  header.h2 .mega{display:none}
}
footer{padding-top:120px}
footer .grande-sig{margin-bottom:70px}
footer .cols{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
@media (max-width:1100px){footer .cols{grid-template-columns:1fr 1fr 1fr;gap:28px}}
@media (max-width:640px){footer .cols{grid-template-columns:1fr 1fr;gap:24px}}
/* ---- pied, audit du 16/09 (P12, P6) ---- */
/* la signature dans la police de la charte, y compris sur les CGV qui n'ont pas
   la substitution Instrument Serif -> Recoleta de _charte.py */
footer .grande-sig{font-family:'Recoleta',Georgia,serif;font-weight:400}
/* le surlignage de « plus irrésistible que vous. » : un vrai surligneur, posé sur la
   ligne d'écriture, qui ne se coupe plus en deux quand la phrase passe à la ligne */
footer .grande-sig em{box-shadow:none;
  text-decoration:underline;text-decoration-color:rgba(254,249,185,.26);
  -webkit-text-decoration-color:rgba(254,249,185,.26);
  text-decoration-thickness:.44em;text-underline-offset:-.38em;
  text-decoration-skip-ink:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* le texte passe devant les lucioles, jamais dessous */
footer .wrap{position:relative;z-index:2}
footer .lucioles{z-index:0}
/* et les lucioles se posent dans les deux bandes vides du pied, jamais sur les lettres.
   Les positions d'origine sont en style en ligne (b3_corps) : d'ou le !important. */
footer .lucioles i:nth-child(1){left:6%!important;top:30px!important}
footer .lucioles i:nth-child(2){left:22%!important;top:58px!important}
footer .lucioles i:nth-child(3){left:41%!important;top:24px!important}
footer .lucioles i:nth-child(4){left:63%!important;top:52px!important}
footer .lucioles i:nth-child(5){left:86%!important;top:34px!important}
footer .lucioles i:nth-child(6){left:9%!important;top:auto!important;bottom:20px}
footer .lucioles i:nth-child(7){left:31%!important;top:auto!important;bottom:36px}
footer .lucioles i:nth-child(8){left:52%!important;top:auto!important;bottom:16px}
footer .lucioles i:nth-child(9){left:74%!important;top:auto!important;bottom:30px}
footer .lucioles i:nth-child(10){left:93%!important;top:auto!important;bottom:22px}
footer .tit{font-size:11.5px;letter-spacing:.22em}
footer .bas a{text-underline-offset:4px}
/* ================= service ou boutique ? ================= */
.compare{padding:40px 0 30px;color:#163b35}
.compare .c-wrap{max-width:1140px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.compare .c-wrap{padding:0 16px}}
.compare h2{font-size:clamp(26px,2.8vw,36px);line-height:1.12;margin:0 0 8px}
.compare .c-sous{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:clamp(18px,1.8vw,23px);line-height:1.3;max-width:34em;margin:0 0 16px}
.compare .c-lead{font-size:15px;line-height:1.7;max-width:52em;margin:0 0 10px;opacity:.9}
.compare .c-deux{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:52em}
.compare .c-deux .c-lead{margin:0}
.compare .c-deux+.c-table{margin-top:26px}
.compare .c-sous+.c-table,.compare h2+.c-table{margin-top:26px}
.compare .c-sous{max-width:44em}
@media (max-width:640px){.compare .c-deux{grid-template-columns:1fr;gap:12px}}
.compare .c-pro td{font-family:'Recoleta',Georgia,serif;font-size:15px;padding-top:0;padding-bottom:12px;border-top:none}
.compare .c-pro th{border-top:none}
.compare .c-pro td:nth-child(2){background:var(--bleu,#aacde2)}
.compare .c-pro td:nth-child(3){background:var(--jaune,#fff7cb)}
.compare thead th:nth-child(2),.compare thead th:nth-child(3){padding-bottom:4px}
.compare tbody b,.compare .c-lead b{font-weight:600}
.compare .c-table{overflow-x:auto;background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:16px}
.compare table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.4;min-width:560px}
.compare th,.compare td{padding:8px 16px;text-align:left;vertical-align:top;border-top:1px solid rgba(22,59,53,.1)}
.compare thead th{border-top:none;font-family:'Recoleta',Georgia,serif;font-weight:700;font-size:26px;padding-top:16px;line-height:1.1}
.compare thead th:nth-child(2){background:var(--bleu,#aacde2)}
.compare thead th:nth-child(3){background:var(--jaune,#fff7cb)}
.compare thead th:nth-child(2),.compare thead th:nth-child(3){text-align:center;padding-bottom:12px}
/* 21/09 Morgane : titres centres */
/* 21/09 : la section tient sur un ecran d'ordinateur, meme bas : on resserre sous 860 px de haut */
@media (min-width:901px) and (max-height:860px){.compare th,.compare td{padding-top:6px;padding-bottom:6px}.compare tbody th{padding-top:8px}.compare thead th{font-size:23px;padding-top:12px}.compare table{font-size:13px;line-height:1.35}.compare .c-act{margin-top:12px}}
.compare td{width:41%}
.compare tbody th{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;width:18%;padding-top:10px;white-space:nowrap}
.compare tbody td:nth-child(2){background:rgba(170,205,226,.22)}
.compare tbody td:nth-child(3){background:rgba(255,247,203,.35)}
.compare .c-act{display:grid;grid-template-columns:18% 41% 41%;margin-top:18px}
.compare .c-act>span{padding:0 16px}
.compare .c-act .cta{width:100%;box-sizing:border-box}
.cta.cta-bleu{background:var(--bleu,#aacde2);color:#163b35}
@media (max-width:640px){.compare .c-act{grid-template-columns:1fr;gap:10px}.compare .c-act>span:first-child{display:none}.compare .c-act>span{padding:0}}
/* ---- les heros : une seule famille, ferme par la vague ---- */
.lx-tete.sv-bleu,.rv-tete,.r-tete,.co-tete{position:relative}
.lx-tete.sv-bleu::after,.rv-tete::after,.r-tete::after,.co-tete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:22px;z-index:4;background:var(--casse);pointer-events:none;
  -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%}
.rv-tete{min-height:min(72vh,640px);display:flex;flex-direction:column;justify-content:center}
.lx-tete.sv-bleu{min-height:min(72vh,660px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){.rv-tete,.lx-tete.sv-bleu{min-height:0}}
/* ================= les boutons : bleu = service, jaune = boutique (P8) ================= */
:where(button.cta){font-family:inherit}
/* 09/10/2026 (audit 42) : un <button> ne prend pas la police du site tout seul */
body .cta,
body.bm-a .cta,
body .cta.cta-bleu,
body.bm-a .cta.cta-bleu{background:var(--bleu,#aacde2);color:#163b35;border:none}
body .cta:hover,
body.bm-a .cta:hover,
body .cta.cta-bleu:hover,
body.bm-a .cta.cta-bleu:hover{background:#95c1de;transform:translateY(-2px)}
body .cta.cta-jaune,
body.bm-a .cta.cta-jaune,
body a.cta[href^="/boutique"]:not(.cta-l),
body.bm-a a.cta[href^="/boutique"]:not(.cta-l),
body.pg-boutique button.cta,body.bm-a.pg-boutique button.cta,body.pg-boutique .cta:not([href]):not(.cta-l),body.bm-a.pg-boutique .cta:not([href]):not(.cta-l),body.pg-boutique a.cta[href^="#"]:not(.cta-l),body.bm-a.pg-boutique a.cta[href^="#"]:not(.cta-l){background:var(--jaune,#fff7cb);color:#163b35}
body .cta.cta-jaune:hover,
body.bm-a .cta.cta-jaune:hover,
body a.cta[href^="/boutique"]:not(.cta-l):hover,
body.bm-a a.cta[href^="/boutique"]:not(.cta-l):hover,
body.pg-boutique button.cta:hover,body.bm-a.pg-boutique button.cta:hover,body.pg-boutique .cta:not([href]):not(.cta-l):hover,body.bm-a.pg-boutique .cta:not([href]):not(.cta-l):hover,body.pg-boutique a.cta[href^="#"]:not(.cta-l):hover,body.bm-a.pg-boutique a.cta[href^="#"]:not(.cta-l):hover{background:#fff3ae}
body .cta.cta-l,
body.bm-a .cta.cta-l{background:#fff;color:#163b35;box-shadow:0 6px 18px rgba(22,59,53,.12)}
body .cta.cta-l:hover,
body.bm-a .cta.cta-l:hover{background:#eef4fa}
/* sur un aplat bleu, un bouton bleu ne se voit pas : il passe en vert nuit, vaguelette claire */
body .sur-bleu .cta,
body.bm-a .sur-bleu .cta,
body .sur-bleu a.cta[href],
body.bm-a .sur-bleu a.cta[href],
body .lx-tete .cta,
body.bm-a .lx-tete .cta,
body .lx-tete a.cta[href],
body.bm-a .lx-tete a.cta[href],
body .rv-tete .cta,
body.bm-a .rv-tete .cta,
body .rv-tete a.cta[href],
body.bm-a .rv-tete a.cta[href],
body .r-tete .cta,
body.bm-a .r-tete .cta,
body .r-tete a.cta[href],
body.bm-a .r-tete a.cta[href],
body .r-pan-s .cta,
body.bm-a .r-pan-s .cta,
body .r-pan-s a.cta[href],
body.bm-a .r-pan-s a.cta[href],
body .bl-tuile-s .cta,
body.bm-a .bl-tuile-s .cta,
body .bl-tuile-s a.cta[href],
body.bm-a .bl-tuile-s a.cta[href],
body .co-carte .cta,
body.bm-a .co-carte .cta,
body .co-carte a.cta[href],
body.bm-a .co-carte a.cta[href],
body .serv-l .cta,
body.bm-a .serv-l .cta,
body .serv-l a.cta[href],
body.bm-a .serv-l a.cta[href],
body .sh-ou .cta,
body.bm-a .sh-ou .cta,
body .sh-ou a.cta[href],
body.bm-a .sh-ou a.cta[href],
body .lv-carte .cta,
body.bm-a .lv-carte .cta,
body .lv-carte a.cta[href],
body.bm-a .lv-carte a.cta[href],
body .e-bleu .cta,
body.bm-a .e-bleu .cta,
body .e-bleu a.cta[href],
body.bm-a .e-bleu a.cta[href],
body .d-bleu .cta,
body.bm-a .d-bleu .cta,
body .d-bleu a.cta[href],
body.bm-a .d-bleu a.cta[href],
body .bleup .cta,
body.bm-a .bleup .cta,
body .bleup a.cta[href],
body.bm-a .bleup a.cta[href],
body #service .cta,
body.bm-a #service .cta,
body #service a.cta[href],
body.bm-a #service a.cta[href],
body #visite .cta,
body.bm-a #visite .cta,
body #visite a.cta[href],
body.bm-a #visite a.cta[href],
body .pourquoi .cta,
body.bm-a .pourquoi .cta,
body .pourquoi a.cta[href],
body.bm-a .pourquoi a.cta[href]{background:#163b35;color:#fbfaf6}
body .sur-bleu .cta:hover,
body.bm-a .sur-bleu .cta:hover,
body .sur-bleu a.cta[href]:hover,
body.bm-a .sur-bleu a.cta[href]:hover,
body .lx-tete .cta:hover,
body.bm-a .lx-tete .cta:hover,
body .lx-tete a.cta[href]:hover,
body.bm-a .lx-tete a.cta[href]:hover,
body .rv-tete .cta:hover,
body.bm-a .rv-tete .cta:hover,
body .rv-tete a.cta[href]:hover,
body.bm-a .rv-tete a.cta[href]:hover,
body .r-tete .cta:hover,
body.bm-a .r-tete .cta:hover,
body .r-tete a.cta[href]:hover,
body.bm-a .r-tete a.cta[href]:hover,
body .r-pan-s .cta:hover,
body.bm-a .r-pan-s .cta:hover,
body .r-pan-s a.cta[href]:hover,
body.bm-a .r-pan-s a.cta[href]:hover,
body .bl-tuile-s .cta:hover,
body.bm-a .bl-tuile-s .cta:hover,
body .bl-tuile-s a.cta[href]:hover,
body.bm-a .bl-tuile-s a.cta[href]:hover,
body .co-carte .cta:hover,
body.bm-a .co-carte .cta:hover,
body .co-carte a.cta[href]:hover,
body.bm-a .co-carte a.cta[href]:hover,
body .serv-l .cta:hover,
body.bm-a .serv-l .cta:hover,
body .serv-l a.cta[href]:hover,
body.bm-a .serv-l a.cta[href]:hover,
body .sh-ou .cta:hover,
body.bm-a .sh-ou .cta:hover,
body .sh-ou a.cta[href]:hover,
body.bm-a .sh-ou a.cta[href]:hover,
body .lv-carte .cta:hover,
body.bm-a .lv-carte .cta:hover,
body .lv-carte a.cta[href]:hover,
body.bm-a .lv-carte a.cta[href]:hover,
body .e-bleu .cta:hover,
body.bm-a .e-bleu .cta:hover,
body .e-bleu a.cta[href]:hover,
body.bm-a .e-bleu a.cta[href]:hover,
body .d-bleu .cta:hover,
body.bm-a .d-bleu .cta:hover,
body .d-bleu a.cta[href]:hover,
body.bm-a .d-bleu a.cta[href]:hover,
body .bleup .cta:hover,
body.bm-a .bleup .cta:hover,
body .bleup a.cta[href]:hover,
body.bm-a .bleup a.cta[href]:hover,
body #service .cta:hover,
body.bm-a #service .cta:hover,
body #service a.cta[href]:hover,
body.bm-a #service a.cta[href]:hover,
body #visite .cta:hover,
body.bm-a #visite .cta:hover,
body #visite a.cta[href]:hover,
body.bm-a #visite a.cta[href]:hover,
body .pourquoi .cta:hover,
body.bm-a .pourquoi .cta:hover,
body .pourquoi a.cta[href]:hover,
body.bm-a .pourquoi a.cta[href]:hover{background:#20514a}
body .sur-bleu .cta .sv,
body.bm-a .sur-bleu .cta .sv,
body .sur-bleu a.cta[href] .sv,
body.bm-a .sur-bleu a.cta[href] .sv,
body .lx-tete .cta .sv,
body.bm-a .lx-tete .cta .sv,
body .lx-tete a.cta[href] .sv,
body.bm-a .lx-tete a.cta[href] .sv,
body .rv-tete .cta .sv,
body.bm-a .rv-tete .cta .sv,
body .rv-tete a.cta[href] .sv,
body.bm-a .rv-tete a.cta[href] .sv,
body .r-tete .cta .sv,
body.bm-a .r-tete .cta .sv,
body .r-tete a.cta[href] .sv,
body.bm-a .r-tete a.cta[href] .sv,
body .r-pan-s .cta .sv,
body.bm-a .r-pan-s .cta .sv,
body .r-pan-s a.cta[href] .sv,
body.bm-a .r-pan-s a.cta[href] .sv,
body .bl-tuile-s .cta .sv,
body.bm-a .bl-tuile-s .cta .sv,
body .bl-tuile-s a.cta[href] .sv,
body.bm-a .bl-tuile-s a.cta[href] .sv,
body .co-carte .cta .sv,
body.bm-a .co-carte .cta .sv,
body .co-carte a.cta[href] .sv,
body.bm-a .co-carte a.cta[href] .sv,
body .serv-l .cta .sv,
body.bm-a .serv-l .cta .sv,
body .serv-l a.cta[href] .sv,
body.bm-a .serv-l a.cta[href] .sv,
body .sh-ou .cta .sv,
body.bm-a .sh-ou .cta .sv,
body .sh-ou a.cta[href] .sv,
body.bm-a .sh-ou a.cta[href] .sv,
body .lv-carte .cta .sv,
body.bm-a .lv-carte .cta .sv,
body .lv-carte a.cta[href] .sv,
body.bm-a .lv-carte a.cta[href] .sv,
body .e-bleu .cta .sv,
body.bm-a .e-bleu .cta .sv,
body .e-bleu a.cta[href] .sv,
body.bm-a .e-bleu a.cta[href] .sv,
body .d-bleu .cta .sv,
body.bm-a .d-bleu .cta .sv,
body .d-bleu a.cta[href] .sv,
body.bm-a .d-bleu a.cta[href] .sv,
body .bleup .cta .sv,
body.bm-a .bleup .cta .sv,
body .bleup a.cta[href] .sv,
body.bm-a .bleup a.cta[href] .sv,
body #service .cta .sv,
body.bm-a #service .cta .sv,
body #service a.cta[href] .sv,
body.bm-a #service a.cta[href] .sv,
body #visite .cta .sv,
body.bm-a #visite .cta .sv,
body #visite a.cta[href] .sv,
body.bm-a #visite a.cta[href] .sv,
body .pourquoi .cta .sv,
body.bm-a .pourquoi .cta .sv,
body .pourquoi a.cta[href] .sv,
body.bm-a .pourquoi a.cta[href] .sv{background-image: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='%23fbfaf6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
/* le second bouton reste blanc, meme sur un aplat bleu */
body .sur-bleu .cta.cta-l,
body.bm-a .sur-bleu .cta.cta-l,
body .sur-bleu a.cta.cta-l[href],
body.bm-a .sur-bleu a.cta.cta-l[href],
body .lx-tete .cta.cta-l,
body.bm-a .lx-tete .cta.cta-l,
body .lx-tete a.cta.cta-l[href],
body.bm-a .lx-tete a.cta.cta-l[href],
body .rv-tete .cta.cta-l,
body.bm-a .rv-tete .cta.cta-l,
body .rv-tete a.cta.cta-l[href],
body.bm-a .rv-tete a.cta.cta-l[href],
body .r-tete .cta.cta-l,
body.bm-a .r-tete .cta.cta-l,
body .r-tete a.cta.cta-l[href],
body.bm-a .r-tete a.cta.cta-l[href],
body .r-pan-s .cta.cta-l,
body.bm-a .r-pan-s .cta.cta-l,
body .r-pan-s a.cta.cta-l[href],
body.bm-a .r-pan-s a.cta.cta-l[href],
body .bl-tuile-s .cta.cta-l,
body.bm-a .bl-tuile-s .cta.cta-l,
body .bl-tuile-s a.cta.cta-l[href],
body.bm-a .bl-tuile-s a.cta.cta-l[href],
body .co-carte .cta.cta-l,
body.bm-a .co-carte .cta.cta-l,
body .co-carte a.cta.cta-l[href],
body.bm-a .co-carte a.cta.cta-l[href],
body .serv-l .cta.cta-l,
body.bm-a .serv-l .cta.cta-l,
body .serv-l a.cta.cta-l[href],
body.bm-a .serv-l a.cta.cta-l[href],
body .sh-ou .cta.cta-l,
body.bm-a .sh-ou .cta.cta-l,
body .sh-ou a.cta.cta-l[href],
body.bm-a .sh-ou a.cta.cta-l[href],
body .lv-carte .cta.cta-l,
body.bm-a .lv-carte .cta.cta-l,
body .lv-carte a.cta.cta-l[href],
body.bm-a .lv-carte a.cta.cta-l[href],
body .e-bleu .cta.cta-l,
body.bm-a .e-bleu .cta.cta-l,
body .e-bleu a.cta.cta-l[href],
body.bm-a .e-bleu a.cta.cta-l[href],
body .d-bleu .cta.cta-l,
body.bm-a .d-bleu .cta.cta-l,
body .d-bleu a.cta.cta-l[href],
body.bm-a .d-bleu a.cta.cta-l[href],
body .bleup .cta.cta-l,
body.bm-a .bleup .cta.cta-l,
body .bleup a.cta.cta-l[href],
body.bm-a .bleup a.cta.cta-l[href],
body #service .cta.cta-l,
body.bm-a #service .cta.cta-l,
body #service a.cta.cta-l[href],
body.bm-a #service a.cta.cta-l[href],
body #visite .cta.cta-l,
body.bm-a #visite .cta.cta-l,
body #visite a.cta.cta-l[href],
body.bm-a #visite a.cta.cta-l[href],
body .pourquoi .cta.cta-l,
body.bm-a .pourquoi .cta.cta-l,
body .pourquoi a.cta.cta-l[href],
body.bm-a .pourquoi a.cta.cta-l[href]{background:#fff;color:#163b35}
body .sur-bleu .cta.cta-l .sv,
body.bm-a .sur-bleu .cta.cta-l .sv,
body .sur-bleu a.cta.cta-l[href] .sv,
body.bm-a .sur-bleu a.cta.cta-l[href] .sv,
body .lx-tete .cta.cta-l .sv,
body.bm-a .lx-tete .cta.cta-l .sv,
body .lx-tete a.cta.cta-l[href] .sv,
body.bm-a .lx-tete a.cta.cta-l[href] .sv,
body .rv-tete .cta.cta-l .sv,
body.bm-a .rv-tete .cta.cta-l .sv,
body .rv-tete a.cta.cta-l[href] .sv,
body.bm-a .rv-tete a.cta.cta-l[href] .sv,
body .r-tete .cta.cta-l .sv,
body.bm-a .r-tete .cta.cta-l .sv,
body .r-tete a.cta.cta-l[href] .sv,
body.bm-a .r-tete a.cta.cta-l[href] .sv,
body .r-pan-s .cta.cta-l .sv,
body.bm-a .r-pan-s .cta.cta-l .sv,
body .r-pan-s a.cta.cta-l[href] .sv,
body.bm-a .r-pan-s a.cta.cta-l[href] .sv,
body .bl-tuile-s .cta.cta-l .sv,
body.bm-a .bl-tuile-s .cta.cta-l .sv,
body .bl-tuile-s a.cta.cta-l[href] .sv,
body.bm-a .bl-tuile-s a.cta.cta-l[href] .sv,
body .co-carte .cta.cta-l .sv,
body.bm-a .co-carte .cta.cta-l .sv,
body .co-carte a.cta.cta-l[href] .sv,
body.bm-a .co-carte a.cta.cta-l[href] .sv,
body .serv-l .cta.cta-l .sv,
body.bm-a .serv-l .cta.cta-l .sv,
body .serv-l a.cta.cta-l[href] .sv,
body.bm-a .serv-l a.cta.cta-l[href] .sv,
body .sh-ou .cta.cta-l .sv,
body.bm-a .sh-ou .cta.cta-l .sv,
body .sh-ou a.cta.cta-l[href] .sv,
body.bm-a .sh-ou a.cta.cta-l[href] .sv,
body .lv-carte .cta.cta-l .sv,
body.bm-a .lv-carte .cta.cta-l .sv,
body .lv-carte a.cta.cta-l[href] .sv,
body.bm-a .lv-carte a.cta.cta-l[href] .sv,
body .e-bleu .cta.cta-l .sv,
body.bm-a .e-bleu .cta.cta-l .sv,
body .e-bleu a.cta.cta-l[href] .sv,
body.bm-a .e-bleu a.cta.cta-l[href] .sv,
body .d-bleu .cta.cta-l .sv,
body.bm-a .d-bleu .cta.cta-l .sv,
body .d-bleu a.cta.cta-l[href] .sv,
body.bm-a .d-bleu a.cta.cta-l[href] .sv,
body .bleup .cta.cta-l .sv,
body.bm-a .bleup .cta.cta-l .sv,
body .bleup a.cta.cta-l[href] .sv,
body.bm-a .bleup a.cta.cta-l[href] .sv,
body #service .cta.cta-l .sv,
body.bm-a #service .cta.cta-l .sv,
body #service a.cta.cta-l[href] .sv,
body.bm-a #service a.cta.cta-l[href] .sv,
body #visite .cta.cta-l .sv,
body.bm-a #visite .cta.cta-l .sv,
body #visite a.cta.cta-l[href] .sv,
body.bm-a #visite a.cta.cta-l[href] .sv,
body .pourquoi .cta.cta-l .sv,
body.bm-a .pourquoi .cta.cta-l .sv,
body .pourquoi a.cta.cta-l[href] .sv,
body.bm-a .pourquoi a.cta.cta-l[href] .sv{background-image: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")}
/* la resiliation : vert nuit sobre, sans vaguelette (audit P8) */
body .rs .cta,body.bm-a .rs .cta,body .rs-tete .cta,body.bm-a .rs-tete .cta{
  background:#163b35;color:#fbfaf6}
body .rs .cta:hover,body.bm-a .rs .cta:hover{background:#20514a}
body .rs .cta .sv,body.bm-a .rs .cta .sv{background-image:none;padding-bottom:2px}
/* le pied (vert nuit) : le bouton de fin garde sa teinte claire */
footer .cta,footer .cta.cta-bleu,footer .cta-fin{background:#C3D4DB;color:#163b35}
footer .cta:hover,footer .cta-fin:hover{background:#d6e3e9}