/* 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}
}
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}
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}