/* ═══════════════════════════════════════════════════════════════
   MT Horizon — monde « carnet de rendez-vous »
   Porté depuis maquette-refonte-carnet-anim.html, contrat : DESIGN.md.
   Chargé APRÈS la feuille du thème enfant : le carnet règne sur
   l'accueil, l'en-tête et le pied ; les pages internes gardent
   l'ancien monde en attendant leur propre refonte.
   ═══════════════════════════════════════════════════════════════ */
/* ============================================================
   MONDE : LE CARNET DE RENDEZ-VOUS
   Rendu par les matériaux saturés du registre, jamais par le
   papier crème : toile de registre pétrole, papier à réglure
   vert d'eau, filets cyan et rose, encre à tampon violette,
   gommettes de couleur, carbone, stylo bille.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:root{
  /* toile de registre */
  --toile:#123A47;
  --toile-fonce:#0A2731;
  --toile-clair:#1D5866;
  /* papier de registre */
  --page:#E7EBDF;
  --page-haute:#F2F5EB;
  --page-creuse:#DAE0D0;
  --page-ombre:#C6CEB9;
  /* filets imprimés */
  --reglure:#79ACC0;
  --reglure-rose:#D2899B;
  /* encres */
  --encre:#141E1D;
  --encre-2:#4B5A55;
  --encre-3:#57655F;
  --bic:#1E3FAE;
  --tampon:#5A2D8A;
  --tampon-clair:#7B4FB0;
  --tampon-pale:#EDE4F6;
  --rouge:#C22F2A;
  /* gommettes */
  --g-rouge:#DE382D;
  --g-jaune:#EFBB25;
  --g-verte:#2C8A57;
  --g-bleue:#2A6AD2;

  --carnet:1240px;
  --lisiere:clamp(18px,4vw,44px);
  --ease:cubic-bezier(.2,.9,.25,1);
  --coin:3px;
  --ombre-page:0 2px 0 rgba(20,30,29,.06),0 18px 34px -18px rgba(5,13,16,.55);
  --ombre-fiche:0 1px 0 rgba(20,30,29,.08),0 10px 20px -12px rgba(5,13,16,.45);
  --ombre-flot:0 3px 0 rgba(20,30,29,.1),0 26px 44px -22px rgba(5,13,16,.65);
}

/* --- matières ------------------------------------------------ */
.toile{
  background-color:var(--toile);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}
.papier{
  color:var(--encre);
  background-color:var(--page);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
}
.reglure{
  --pas:34px;
  background-image:
    repeating-linear-gradient(180deg,transparent 0 calc(var(--pas) - 1px),color-mix(in srgb,var(--reglure) 52%,transparent) calc(var(--pas) - 1px) var(--pas));
  background-position:0 0;
}

/* --- socle --------------------------------------------------- */
body{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  color:var(--encre);
  background-color:var(--toile-fonce);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  /* « hidden » empeche bien le debordement, mais il fait du corps de page un
     conteneur de defilement : sur iOS la page peut encore etre trainee de
     quelques pixels sur le cote. « clip » coupe sans creer de defilement.
     Les deux sont ecrits : les navigateurs anciens gardent hidden. */
  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:var(--tampon);color:#F6F1FB}
:focus-visible{outline:3px solid var(--tampon-clair);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--toile-clair) var(--toile-fonce);overflow-x:clip}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--toile-fonce)}
::-webkit-scrollbar-thumb{background:var(--toile-clair);border:3px solid var(--toile-fonce);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#2A7285}

h1,h2,h3,h4,.mecanique{font-family:Archivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.4vw,5.4rem);font-weight:800;letter-spacing:-.036em}
h2{font-size:clamp(1.85rem,4.1vw,3.1rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem)}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{text-wrap:pretty}
a{color:inherit}
.chiffre{font-family:"Courier Prime",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.manuscrit{font-family:Caveat,cursive;font-weight:500;color:var(--bic);font-size:1.32em;line-height:1.15}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evite{color:var(--encre-2)}

/* --- le carnet ----------------------------------------------- */
.carnet{max-width:var(--carnet);margin-inline:auto;padding-inline:var(--lisiere)}
.feuille{
  position:relative;border-radius:var(--coin) 10px 10px var(--coin);
  box-shadow:var(--ombre-page);
}
.feuille::after{ /* tranche de la feuille */
  content:"";position:absolute;inset:auto 0 -5px 2px;height:5px;border-radius:0 0 8px 6px;
  background:linear-gradient(180deg,var(--page-creuse),color-mix(in srgb,var(--page-ombre) 80%,var(--toile)));
}
/* Position du filet de marge, partagée : le contenu de la page commence après
   lui, comme sur un cahier où l'on n'écrit pas dans la marge. Une seule valeur
   pour les deux, sinon le trait repasse sous le texte dès que la largeur change. */
.spread{ --marge-x:clamp(26px,4.4vw,54px) }
.marge{ /* filet rose de marge, comme sur un registre */
  position:absolute;top:0;bottom:0;left:var(--marge-x);width:1px;
  background:var(--reglure-rose);opacity:.75;
}
/* « .spread .recto » et non « .recto » : le raccourci padding declare plus bas
   ecraserait sinon ce padding-left, a specificite egale. */
.spread .recto{ padding-left:calc(var(--marge-x) + 1.35rem) }

/* --- boutons -------------------------------------------------- */
.btn{
  --fond:var(--tampon);--txt:#FAF7FD;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.012em;
  padding:.86em 1.35em;border:0;border-radius:2px;
  background:var(--fond);color:var(--txt);cursor:pointer;text-decoration:none;
  box-shadow:0 1px 0 rgba(20,30,29,.22),0 10px 18px -11px rgba(5,13,16,.6);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease);
  position:relative;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(20,30,29,.26),0 18px 26px -14px rgba(5,13,16,.65);background:var(--tampon-clair)}
.btn:active{transform:translateY(0) rotate(-.4deg)}
.btn svg{flex:none;transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--creux{
  --fond:transparent;--txt:var(--encre);
  border:1.5px solid color-mix(in srgb,var(--encre) 34%,transparent);
  box-shadow:none;
}
.btn--creux:hover{background:color-mix(in srgb,var(--encre) 6%,transparent);border-color:var(--encre);box-shadow:none}
.btn--clair{--fond:var(--page-haute);--txt:var(--toile-fonce);box-shadow:0 1px 0 rgba(0,0,0,.25),0 14px 24px -16px rgba(0,0,0,.8)}
.btn--clair:hover{background:#fff}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)}

/* --- tampon --------------------------------------------------- */
.tampon{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:"Courier Prime",monospace;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tampon);border:2.5px solid var(--tampon);border-radius:3px;
  padding:.34em .6em;transform:rotate(-3.2deg);
  opacity:.88;mix-blend-mode:multiply;
}
.tampon--rouge{color:var(--rouge);border-color:var(--rouge)}
.tampon--vert{color:var(--g-verte);border-color:var(--g-verte)}

/* --- gommettes ------------------------------------------------ */
.gommette{width:13px;height:13px;border-radius:50%;flex:none;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.22),inset 0 2px 2px rgba(255,255,255,.5)}

/* --- en-tête -------------------------------------------------- */
.bandeau{position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(0,0,0,.4)}
.bandeau::after{content:"";position:absolute;inset:auto 0 -6px;height:6px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}
.bandeau .carnet{display:flex;align-items:center;gap:clamp(12px,2.5vw,26px);padding-block:12px}
.plaque{
  display:flex;align-items:center;gap:.62rem;text-decoration:none;
  background:var(--page-haute);color:var(--toile-fonce);
  padding:.42rem .78rem;border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.12);
}
.plaque strong{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.03em;white-space:nowrap}
.plaque span{font-family:"Courier Prime",monospace;font-size:.66rem;letter-spacing:.12em;color:var(--toile);display:block;margin-top:-2px}
.onglets{display:flex;gap:4px;margin-left:auto}
.onglets a{
  font-family:Archivo,sans-serif;font-weight:600;font-size:.9rem;text-decoration:none;
  color:color-mix(in srgb,var(--page) 82%,transparent);
  padding:.5rem .78rem .55rem;border-radius:2px 2px 0 0;position:relative;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.onglets a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}
.onglets a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;background:var(--g-jaune);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.onglets a:hover::after{transform:scaleX(1)}
.bandeau-actions{display:flex;align-items:center;gap:10px}
.lien-cle{display:inline-flex;align-items:center;gap:.42rem;color:color-mix(in srgb,var(--page) 76%,transparent);
  text-decoration:none;font-size:.88rem;font-weight:600;padding:.4rem .5rem;border-radius:2px}
.lien-cle:hover{color:#fff;background:rgba(255,255,255,.09)}

/* --- hero ----------------------------------------------------- */
.spread{display:grid;grid-template-columns:1.06fr .94fr;gap:0;margin-block:clamp(20px,3.4vw,42px);position:relative}
.spread>*{min-width:0}
.recto,.verso{padding:clamp(22px,3vw,42px) clamp(20px,2.8vw,40px)}
.recto{
  border-radius:var(--coin) 0 0 var(--coin);
  box-shadow:var(--ombre-page);position:relative;z-index:2;
}
.verso{
  border-radius:0 10px 10px 0;position:relative;
  box-shadow:var(--ombre-page);
  background-color:var(--page-creuse);
}
.couture{ /* la reliure, sur le pli */
  /* Les deux pages sont en 1.06fr / 0.94fr : le pli tombe donc a 53% et non au
     milieu geometrique. A 50% la couture flottait 35px a l'interieur de la page
     de gauche, au lieu de marquer la jonction. */
  position:absolute;top:0;bottom:0;left:53%;width:26px;z-index:3;pointer-events:none;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(5,13,16,0),rgba(5,13,16,.24) 32%,rgba(5,13,16,.42) 50%,rgba(5,13,16,.18) 68%,rgba(5,13,16,0));
}
.couture::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:1px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 9px,transparent 9px 17px)}

.recto h1{margin-bottom:.5rem}
.souligne{position:relative;display:inline;background:linear-gradient(180deg,transparent 62%,rgba(239,187,37,.55) 62%,rgba(239,187,37,.55) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-inline:.06em}
.accroche{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--encre-2);max-width:34ch;margin-top:1rem}
.socle-hero{max-width:46ch}
.trois{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.trois li{display:flex;align-items:center;gap:.5rem;font-size:.93rem;font-weight:500;color:var(--encre-2)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.prix-hero{margin-top:1.5rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.prix-hero b{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em}
.prix-hero span{font-size:.88rem;color:var(--encre-2)}

/* --- la journée qui s'écrit (verso du hero) -------------------- */
.jour-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--encre)}
.jour-tete h2{font-size:clamp(1.05rem,1.5vw,1.22rem);letter-spacing:-.01em;font-weight:700}
.jour-tete .date{font-family:"Courier Prime",monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.journee{--pas:58px;margin-top:0}
.creneau{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:.8rem;align-items:center;
  height:var(--pas);position:relative}
.creneau .h{font-family:"Courier Prime",monospace;font-size:.8rem;color:var(--encre-3);font-variant-numeric:tabular-nums}
.creneau .fiche{display:flex;align-items:center;gap:.55rem;min-width:0}
.creneau .txt{min-width:0}
.creneau .titre{display:block;font-weight:600;font-size:.95rem;line-height:1.2}
.creneau .sous{display:block;font-size:.82rem;color:var(--encre-2);line-height:1.2}
.creneau--vide .titre{color:var(--encre-3);font-weight:500;font-style:italic}
.ecrit{opacity:0;transform:translateY(6px)}
.vu .ecrit{animation:ecrire .5s var(--ease) forwards}
.vu .ecrit:nth-child(2){animation-delay:.16s}
@keyframes ecrire{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.trace{clip-path:inset(0 100% 0 0)}
.vu .trace{animation:tracer .85s var(--ease) forwards}
@keyframes tracer{to{clip-path:inset(0 0 0 0)}}
.tampon-tombe{opacity:0;transform:rotate(-16deg) scale(1.5)}
.vu .tampon-tombe{animation:tomber .46s cubic-bezier(.16,1,.3,1) .95s forwards}
@keyframes tomber{55%{opacity:1}to{opacity:.88;transform:rotate(-3.2deg) scale(1)}}
.bilan{margin-top:1.1rem;padding-top:.9rem;border-top:2px solid var(--encre)}
.bilan p{font-size:.9rem;color:var(--encre-2)}
.bilan b{font-family:Archivo,sans-serif;font-weight:800;color:var(--encre);font-size:1.02rem}
.bilan-fort{margin-top:.35rem;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(1.15rem,1.9vw,1.5rem);
  letter-spacing:-.028em;color:var(--encre) !important}
.legende{font-size:.74rem;color:var(--encre-3);margin-top:1rem;display:flex;align-items:center;gap:.4rem;font-style:italic}

/* --- rythme des sections -------------------------------------- */
.bloc{padding-block:clamp(52px,7vw,104px)}
section.bloc + section.bloc{padding-top:0}
section.seuil::before{content:"";display:block;width:calc(100% - 2 * var(--lisiere));max-width:var(--carnet);
  margin:0 auto clamp(44px,5.6vw,84px);height:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--page) 34%,transparent) 0 6px,transparent 6px 15px)}
.local > .folio{grid-column:1/-1}
.folio{display:block;text-align:right;margin-top:clamp(20px,2.4vw,32px);
  font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.16em;
  color:color-mix(in srgb,var(--page) 46%,transparent)}
.folio--encre{color:var(--encre-3)}
.bloc-tete{max-width:60ch;margin-bottom:clamp(28px,3.6vw,52px)}
.bloc-tete p{margin-top:1rem;font-size:clamp(1.02rem,1.3vw,1.16rem);color:var(--encre-2)}
.sur-toile{color:var(--page)}
.sur-toile .bloc-tete p,.sur-toile.bloc-tete p{color:color-mix(in srgb,var(--page) 74%,transparent)}
.sur-toile h2,.sur-toile.bloc-tete h2{color:var(--page-haute)}
.page-pleine{padding:clamp(26px,3.6vw,54px) clamp(22px,3.2vw,48px);position:relative;overflow:hidden}

/* --- le constat : la journée qui déborde ----------------------- */
.debord{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.regle{position:relative;padding-left:64px}
.regle::before{content:"";position:absolute;left:56px;top:6px;bottom:6px;width:2px;background:var(--encre);opacity:.85}
.plage{position:relative;margin-bottom:10px;border-radius:2px;padding:.9rem 1.05rem;
  box-shadow:var(--ombre-fiche)}
.plage .heure{position:absolute;left:-64px;top:.95rem;width:52px;text-align:right;
  font-family:"Courier Prime",monospace;font-size:.78rem;color:var(--encre-2);font-variant-numeric:tabular-nums}
.plage h3{font-size:1.02rem;margin-bottom:.3rem}
.plage p{font-size:.92rem;color:var(--encre-2)}
.plage--admin{
  background-color:color-mix(in srgb,var(--rouge) 9%,var(--page-haute));
  background-image:repeating-linear-gradient(-45deg,rgba(194,47,42,.14) 0 6px,transparent 6px 13px);
  border-left:1px solid color-mix(in srgb,var(--rouge) 45%,transparent);
}
.plage--admin h3{color:var(--rouge)}
.plage--terrain{background:var(--page-haute);min-height:132px;display:flex;flex-direction:column;justify-content:center}
.plage--terrain h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.verdict{border-top:2px solid var(--encre);padding-top:1.1rem;margin-top:1.4rem;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:500;line-height:1.42}
.verdict b{font-weight:700;background:linear-gradient(180deg,transparent 60%,rgba(239,187,37,.6) 60%)}

/* --- capacités : intercalaires --------------------------------- */
.inter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);align-items:center;
  padding-block:clamp(30px,4vw,58px);border-top:1px solid color-mix(in srgb,var(--page) 22%,transparent)}
.inter:first-of-type{border-top:0}
.inter--inverse .inter-txt{order:2}
.inter-txt h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.028em}
.inter-txt p{margin-top:.85rem;color:color-mix(in srgb,var(--page) 76%,transparent);font-size:1.02rem;max-width:44ch}
.inter-liste{margin-top:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.inter-liste li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:color-mix(in srgb,var(--page) 88%,transparent)}
.demo-piece{position:relative}

/* boîte de réception : l'état s'imprime */
.recu{padding:1.15rem 1.2rem 1.3rem;border-radius:var(--coin);background-color:var(--page-haute)}
.recu-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--encre);padding-bottom:.6rem;margin-bottom:.2rem}
.recu-tete strong{font-family:Archivo,sans-serif;font-size:.98rem}
.compteur{font-family:"Courier Prime",monospace;font-size:.74rem;letter-spacing:.08em;color:var(--encre-2)}
.ligne-recu{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid color-mix(in srgb,var(--reglure) 50%,transparent)}
.ligne-recu .quoi{font-weight:600;font-size:.93rem}
.ligne-recu .qui{font-size:.82rem;color:var(--encre-2)}
.ligne-recu .quand{font-family:"Courier Prime",monospace;font-size:.72rem;color:var(--encre-3);white-space:nowrap}

/* téléphone : agenda dans la poche */
.mobile{width:min(290px,100%);margin-inline:auto;border-radius:26px;padding:11px;
  background:linear-gradient(160deg,#243B44,#0E252D);box-shadow:var(--ombre-flot),inset 0 0 0 1px rgba(255,255,255,.13)}
.mobile-ecran{border-radius:17px;overflow:hidden;padding:14px 13px 16px}
.mobile-encoche{width:52px;height:4px;border-radius:3px;background:rgba(255,255,255,.28);margin:0 auto 9px}
.mini-tete{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--encre);padding-bottom:.4rem;margin-bottom:.5rem}
.mini-tete b{font-family:Archivo,sans-serif;font-size:.88rem}
.mini-tete span{font-family:"Courier Prime",monospace;font-size:.64rem;color:var(--encre-2)}
.mini-creneau{display:flex;gap:.5rem;align-items:center;padding:.44rem 0;border-bottom:1px solid color-mix(in srgb,var(--reglure) 45%,transparent);font-size:.79rem}
.mini-creneau .mh{font-family:"Courier Prime",monospace;color:var(--encre-3);font-size:.72rem;width:34px;flex:none}
.mini-creneau b{font-weight:600}
.mini-pied{margin-top:.7rem;display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--g-verte);font-weight:600}

/* --- métiers : gommettes --------------------------------------- */

/* --- démos ------------------------------------------------------ */
.demos{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,2.4vw,34px);align-items:stretch}
/* une seule demonstration : la carte se centre au lieu de tenir une colonne de deux */
.demos:has(.demo:only-child){grid-template-columns:minmax(0,760px);justify-content:center}
.demo{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,32px);border-radius:var(--coin);
  box-shadow:var(--ombre-page);position:relative;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.demo:hover{transform:translateY(-4px) rotate(-.25deg);box-shadow:var(--ombre-flot)}
.demo h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;letter-spacing:-.026em}
.demo p{color:var(--encre-2);margin-top:.42rem;font-size:.98rem}
.demo .url{font-family:"Courier Prime",monospace;font-size:.76rem;color:var(--tampon);letter-spacing:.02em;margin-bottom:.7rem}
.demo .actions{margin-top:auto;padding-top:1.4rem}
.apercu{margin-top:1.3rem;border-radius:2px;overflow:hidden;box-shadow:var(--ombre-fiche);background:var(--page-haute)}
.apercu-barre{display:flex;align-items:center;gap:.35rem;padding:.42rem .6rem;background:var(--toile);}
.apercu-barre i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.32);display:block}
.apercu-barre span{margin-left:.35rem;font-family:"Courier Prime",monospace;font-size:.62rem;color:rgba(255,255,255,.66)}
.apercu-corps{padding:.85rem .95rem 1rem}
.mini-site{font-size:9px;line-height:1.35}
.mini-site .enseigne{font-family:Archivo,sans-serif;font-weight:800;font-size:10px;letter-spacing:-.02em;
  display:flex;justify-content:space-between;align-items:center;padding-bottom:.4rem;
  border-bottom:1px solid color-mix(in srgb,var(--encre) 16%,transparent)}
.mini-site .enseigne em{font-style:normal;font-weight:500;color:var(--encre-2);font-size:8px}
.mini-site h4{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.03em;
  line-height:1.05;margin:.55rem 0 .3rem}
.mini-site p{color:var(--encre-2);font-size:9px;max-width:30ch}
.mini-site .mini-btn{display:inline-block;margin-top:.5rem;background:var(--tampon);color:#FAF7FD;
  font-family:Archivo,sans-serif;font-weight:700;font-size:9px;padding:.34rem .6rem;border-radius:2px}
.mini-site .mini-services{display:grid;grid-template-columns:repeat(3,1fr);gap:.32rem;margin-top:.65rem}
.mini-site .mini-services span{background:var(--page-creuse);border-radius:2px;padding:.34rem .3rem;
  font-size:8px;font-weight:600;text-align:center;color:var(--encre-2)}

/* --- visibilité locale ------------------------------------------ */
.local{display:grid;grid-template-columns:1fr minmax(300px,.9fr);gap:clamp(26px,3.6vw,56px);align-items:start}
.points{display:flex;flex-direction:column;gap:1.5rem;margin-top:.5rem}
.point{display:grid;grid-template-columns:auto 1fr;gap:.9rem}
.point h3{font-size:1.1rem;font-weight:700}
.point p{margin-top:.3rem;color:color-mix(in srgb,var(--page) 74%,transparent);font-size:.96rem;max-width:46ch}
.icone-cercle{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1.5px solid color-mix(in srgb,var(--g-jaune) 70%,transparent);color:var(--g-jaune)}
.colonne-locale{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.resultat{padding:1.1rem 1.15rem 1.25rem;border-radius:var(--coin);box-shadow:var(--ombre-flot);position:relative}
.zones{padding:1.05rem 1.15rem 1.2rem;border-radius:var(--coin);box-shadow:var(--ombre-fiche)}
.zones h4{font-size:.98rem;padding-bottom:.5rem;border-bottom:2px solid var(--encre)}
.zones ul{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .8rem;margin-top:.6rem}
.zones li{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;
  font-size:.88rem;padding:.3rem 0;border-bottom:1px solid color-mix(in srgb,var(--reglure) 45%,transparent)}
.zones .page-faite{font-family:"Courier Prime",monospace;font-size:.68rem;color:var(--g-verte)}
.trombone{position:absolute;top:-16px;right:22px;color:var(--encre-3);transform:rotate(8deg)}
.recherche{display:flex;align-items:center;gap:.55rem;border:1.5px solid color-mix(in srgb,var(--encre) 22%,transparent);
  border-radius:999px;padding:.5rem .85rem;font-size:.9rem;color:var(--encre-2);background:var(--page-haute)}
.fiche-locale{margin-top:.9rem;padding-top:.9rem;border-top:1px solid color-mix(in srgb,var(--reglure) 55%,transparent)}
.fiche-locale .site{font-family:"Courier Prime",monospace;font-size:.74rem;color:var(--g-verte)}
.fiche-locale h4{font-size:1.05rem;color:var(--bic);margin-top:.15rem}
.fiche-locale .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.82rem;color:var(--encre-2)}
.etoiles{display:inline-flex;gap:1px;color:var(--g-jaune)}

/* --- méthode : les carbones -------------------------------------- */
.etapes{border-top:2px solid var(--encre)}
.etape-ligne{display:grid;grid-template-columns:clamp(44px,5vw,64px) minmax(0,1fr);gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(.95rem,1.8vw,1.35rem) 0;align-items:baseline;
  border-bottom:1px solid color-mix(in srgb,var(--reglure) 58%,transparent)}
.etape-ligne:last-child{border-bottom:0}
.etape-ligne .rang{font-family:"Courier Prime",monospace;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--tampon);line-height:1;font-variant-numeric:tabular-nums}
.etape-ligne h3{font-size:clamp(1.06rem,1.7vw,1.28rem);margin-bottom:.3rem}
.etape-ligne p{font-size:.96rem;color:var(--encre-2);max-width:62ch}

/* --- composeur d'offre : la réglette ------------------------------ */
.composeur{border-radius:var(--coin);box-shadow:var(--ombre-flot);overflow:hidden}
.composeur-haut{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,2.4vw,38px);
  padding:clamp(20px,2.6vw,34px);align-items:end;border-bottom:2px solid var(--encre)}
.rail{margin-bottom:1.1rem}
.rail:last-child{margin-bottom:0}
.rail>span{display:block;font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-2);margin-bottom:.5rem}
.fiches-t{display:flex;gap:6px;background:color-mix(in srgb,var(--encre) 9%,transparent);
  padding:5px;border-radius:3px;box-shadow:inset 0 2px 5px rgba(20,30,29,.18)}
.fiche-t{flex:1;border:0;cursor:pointer;position:relative;text-align:left;
  padding:.66rem .8rem .72rem;border-radius:2px;background:var(--page-haute);color:var(--encre);
  box-shadow:0 1px 0 rgba(20,30,29,.16),0 4px 8px -5px rgba(20,30,29,.5);
  transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.fiche-t b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.02em}
.fiche-t i{display:block;font-style:normal;font-size:.78rem;color:var(--encre-2);margin-top:.1rem}
.fiche-t::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:2px 2px 0 0;background:transparent;transition:background-color .2s var(--ease)}
.fiche-t:hover{transform:translateY(-2px)}
.fiche-t[aria-pressed="true"]{background:var(--tampon);color:#FAF7FD;transform:translateY(-3px);
  box-shadow:0 2px 0 rgba(20,30,29,.28),0 12px 18px -10px rgba(5,13,16,.6)}
.fiche-t[aria-pressed="true"] i{color:rgba(250,247,253,.78)}
.fiche-t[aria-pressed="true"]::before{background:var(--g-jaune)}
.fiche-t[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.note-rail{font-size:.8rem;color:var(--encre-2);margin-top:.5rem;display:flex;gap:.4rem;align-items:flex-start}
/* L'attribut hidden etait ecrase par un display:flex herite : la note
   « la repartition commence avec Suite » restait affichee sur Suite et
   Gestion, ou elle est fausse. */
.note-rail[hidden]{display:none}

.ardoise{text-align:right;min-width:min(240px,42vw)}
.ardoise .label{font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.ardoise .montant{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(3rem,7.4vw,5.6rem);line-height:.92;display:block;margin:.1rem 0}
.ardoise .cond{font-size:.86rem;color:var(--encre-2)}
.ardoise .nom-offre{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem}
.composeur-bas{display:grid;grid-template-columns:1.25fr .75fr;gap:0}
.inclus{padding:clamp(20px,2.6vw,34px)}
.inclus h3{font-size:1.06rem;margin-bottom:.9rem}
.inclus ul{display:grid;gap:.5rem}
.inclus li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.95rem}
.inclus li.herite{color:var(--encre-2)}
.inclus li.herite b{font-weight:600;color:var(--encre)}
.composeur-cta{padding:clamp(20px,2.6vw,34px);background:var(--page-creuse);
  border-left:1px solid color-mix(in srgb,var(--encre) 12%,transparent);display:flex;flex-direction:column;gap:.9rem}
.composeur-cta .bonus{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;color:var(--encre-2)}
.composeur-cta .mention{font-size:.8rem;color:var(--encre-3);margin-top:auto}

/* --- comparatif -------------------------------------------------- */
.compare{width:100%;border-collapse:collapse;font-size:.93rem}
.compare caption{text-align:left;font-size:.84rem;color:color-mix(in srgb,var(--page) 66%,transparent);padding-bottom:.7rem}
.compare th,.compare td{padding:.62rem .7rem;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--page) 18%,transparent)}
.compare thead th{font-family:Archivo,sans-serif;font-size:.9rem;color:var(--page-haute);
  border-bottom:2px solid color-mix(in srgb,var(--page) 40%,transparent);white-space:nowrap}
.compare tbody th{font-weight:500;color:color-mix(in srgb,var(--page) 84%,transparent)}
.compare td{text-align:center;width:11%;color:var(--page)}
.compare thead th:not(:first-child){text-align:center}
.compare .oui{color:var(--g-jaune)}
.compare .non{color:color-mix(in srgb,var(--page) 64%,transparent)}
.compare tbody tr:hover th,.compare tbody tr:hover td{background:rgba(255,255,255,.055)}
.rang-prix td,.rang-prix th{border-bottom:0;padding-top:.9rem}
.rang-prix td{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;color:var(--g-jaune);letter-spacing:-.02em}

/* --- option ------------------------------------------------------- */
.option{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,2.4vw,40px);align-items:center;
  padding:clamp(20px,2.6vw,34px);border-radius:var(--coin);box-shadow:var(--ombre-page)}
.option h3{font-size:clamp(1.2rem,2vw,1.55rem)}
.option p{color:var(--encre-2);margin-top:.4rem;max-width:52ch}
.option .tarif{text-align:right}
.option .tarif b{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.035em;display:block}
.option .tarif span{font-size:.84rem;color:var(--encre-2)}

/* --- FAQ ----------------------------------------------------------- */
.faq{display:grid;gap:2px;background:color-mix(in srgb,var(--page) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--page) 18%,transparent);border-radius:var(--coin);overflow:hidden}
.qr{background:var(--toile)}
.qr summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;display:grid;grid-template-columns:1fr auto;
  gap:1rem;align-items:center;font-family:Archivo,sans-serif;font-weight:600;font-size:1.02rem;color:var(--page-haute);
  transition:background-color .2s var(--ease)}
.qr summary::-webkit-details-marker{display:none}
.qr summary:hover{background:rgba(255,255,255,.06)}
.qr summary .croix{width:20px;height:20px;flex:none;color:var(--g-jaune);transition:transform .28s var(--ease)}
.qr[open] summary .croix{transform:rotate(45deg)}
.qr .rep{padding:0 1.2rem 1.15rem;color:color-mix(in srgb,var(--page) 78%,transparent);max-width:72ch;font-size:.98rem}
.qr[open] .rep{animation:deplier .3s var(--ease)}
@keyframes deplier{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* --- module de réservation ----------------------------------------- */
.rdv{display:grid;grid-template-columns:.92fr 1.08fr;gap:0;border-radius:var(--coin);overflow:hidden;box-shadow:var(--ombre-flot)}
.rdv-gauche{padding:clamp(22px,3vw,42px);color:var(--page);min-width:0}
.rdv-gauche h2{color:var(--page-haute)}
.rdv-gauche p{color:color-mix(in srgb,var(--page) 76%,transparent);margin-top:.9rem;max-width:40ch}
.dispo{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;
  color:var(--g-jaune);margin-bottom:1rem}
.pastille{width:8px;height:8px;border-radius:50%;background:var(--g-verte);box-shadow:0 0 0 0 rgba(44,138,87,.7);animation:pulser 2.6s infinite}
@keyframes pulser{0%{box-shadow:0 0 0 0 rgba(44,138,87,.6)}70%{box-shadow:0 0 0 9px rgba(44,138,87,0)}100%{box-shadow:0 0 0 0 rgba(44,138,87,0)}}
.rappel{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--page) 22%,transparent)}
.rappel h3{font-size:1.05rem;color:var(--page-haute)}
.rappel p{margin-top:.35rem;font-size:.92rem}
.champ-tel{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.champ-tel input{flex:1;min-width:150px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  border-radius:2px;padding:.75rem .85rem;color:var(--page);font-size:.98rem}
.champ-tel input::placeholder{color:color-mix(in srgb,var(--page) 52%,transparent)}
.champ-tel input:focus{background:rgba(255,255,255,.13);border-color:var(--g-jaune);outline:none}
.consentement{display:flex;gap:.55rem;align-items:flex-start;margin-top:.8rem;font-size:.8rem;
  color:color-mix(in srgb,var(--page) 66%,transparent);max-width:46ch}
.consentement a{color:var(--g-jaune)}

/* min-width:0 : sans lui, la colonne de droite refuse de descendre sous la
   largeur naturelle de la bande de jours du module (867px), la piste de
   grille s'etire d'autant, et tout ce qui depasse est coupe par le
   overflow:hidden de .rdv, hors d'atteinte. Avec lui, la colonne suit la
   largeur de l'ecran et la bande de jours defile comme prevu. */
.rdv-droite{padding:clamp(20px,2.6vw,34px);min-width:0}
.etapes-rdv{display:flex;gap:.35rem;margin-bottom:1.2rem;flex-wrap:wrap}
.etapes-rdv li{display:flex;align-items:center;gap:.4rem;font-family:"Courier Prime",monospace;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.etapes-rdv li::after{content:"";width:14px;height:1px;background:currentColor;opacity:.5}
.etapes-rdv li:last-child::after{display:none}
.etapes-rdv li.active{color:var(--tampon);font-weight:700}
.etapes-rdv li.faite{color:var(--g-verte)}
.choix{display:grid;gap:.6rem;margin-bottom:1.3rem}
.choix label{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;cursor:pointer;
  padding:.85rem .95rem;border:1.5px solid color-mix(in srgb,var(--encre) 18%,transparent);border-radius:2px;
  background:var(--page-haute);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.choix label:hover{border-color:color-mix(in srgb,var(--tampon) 55%,transparent)}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix .coche{width:19px;height:19px;border-radius:50%;border:2px solid color-mix(in srgb,var(--encre) 34%,transparent);
  margin-top:.15rem;display:grid;place-items:center;flex:none}
.choix .coche::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--tampon);transform:scale(0);transition:transform .18s var(--ease)}
.choix input:checked + .coche{border-color:var(--tampon)}
.choix input:checked + .coche::after{transform:scale(1)}
.choix input:checked ~ .quoi b{color:var(--tampon)}
.choix label:has(input:checked){border-color:var(--tampon);box-shadow:0 0 0 3px var(--tampon-pale)}
.choix input:focus-visible + .coche{outline:3px solid var(--tampon-clair);outline-offset:2px}
.choix .quoi b{display:block;font-family:Archivo,sans-serif;font-size:1rem}
.choix .quoi span{font-size:.86rem;color:var(--encre-2)}
.choix .duree{font-family:"Courier Prime",monospace;font-size:.74rem;color:var(--encre-2);white-space:nowrap}
.creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.45rem}
.creneaux button{background:var(--page-haute);border:1.5px solid color-mix(in srgb,var(--encre) 16%,transparent);
  border-radius:2px;padding:.6rem .3rem;cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.creneaux button b{display:block;font-family:"Courier Prime",monospace;font-weight:700;font-size:.95rem}
.creneaux button span{display:block;font-size:.72rem;color:var(--encre-2);margin-top:.05rem}
.creneaux button:hover:not([disabled]){transform:translateY(-2px);border-color:var(--tampon);background:#fff}
.creneaux button[aria-pressed="true"]{background:var(--tampon);border-color:var(--tampon);color:#FAF7FD}
.creneaux button[aria-pressed="true"] span{color:rgba(250,247,253,.8)}
.creneaux button[disabled]{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.recommande{margin-top:.9rem;display:flex;gap:.5rem;align-items:flex-start;font-size:.84rem;color:var(--encre-2)}
.rdv-pied{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;
  padding-top:1.1rem;border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent);flex-wrap:wrap}

/* --- clôture + pied ------------------------------------------------- */
.cloture{text-align:center;padding-block:clamp(56px,8vw,110px)}
.cloture h2{font-size:clamp(2.1rem,5.6vw,4.2rem);max-width:16ch;margin-inline:auto}
.cloture p{margin-top:1.1rem;color:color-mix(in srgb,var(--page) 74%,transparent);font-size:1.06rem}
.cloture .actions{justify-content:center;margin-top:2rem}
.pied{border-top:1px solid rgba(255,255,255,.14);padding-block:clamp(34px,4vw,54px) 90px;color:color-mix(in srgb,var(--page) 70%,transparent);font-size:.92rem}
.pied-haut{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(20px,3vw,44px)}
.pied h4{font-family:Archivo,sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--page) 56%,transparent);margin-bottom:.7rem}
.pied a{text-decoration:none;color:inherit;display:inline-block;padding:.18rem 0}
.pied .plaque{color:var(--toile-fonce);padding:.42rem .78rem}
.pied a:hover{color:var(--g-jaune)}
.pied ul{display:grid;gap:.1rem}
.pied-bas{margin-top:clamp(26px,3vw,42px);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;
  color:color-mix(in srgb,var(--page) 52%,transparent)}

/* --- barre collante mobile ------------------------------------------ */
.collante{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:70;display:none;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--toile-fonce) 92%,transparent);backdrop-filter:blur(9px);
  border-top:1px solid rgba(255,255,255,.16)}
.collante .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;font-size:.94rem;padding:.78rem .8rem}

/* --- adaptations ------------------------------------------------------ */
@media (max-width:1080px){
  .composeur-bas{grid-template-columns:1fr}
  .composeur-cta{border-left:0;border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent)}
  .rdv{grid-template-columns:1fr}
  .demos{grid-template-columns:1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  .onglets{display:none}
  .spread{grid-template-columns:1fr;gap:14px}
  .recto,.verso{border-radius:var(--coin)}
  .couture{display:none}
  .debord,.local,.inter{grid-template-columns:1fr}
  .inter--inverse .inter-txt{order:0}
  /* Le bloc de marque est plus long que les deux listes : en trois colonnes
     ramenees a deux, il poussait « Informations » sous lui et laissait la
     moitie droite vide, ce qui donnait un pied desordonne. La marque prend
     donc toute la largeur, les deux listes se rangent cote a cote dessous. */
  .pied-haut{grid-template-columns:1fr 1fr; gap:26px 20px}
  .pied-haut > div:first-child{grid-column:1 / -1}
  .pied-haut > div:first-child p{max-width:46ch}
  .pied-bas{flex-direction:column; gap:.45rem}
  .collante{display:flex}
  .compare{font-size:.84rem}
  .compare th,.compare td{padding:.5rem .35rem}
  .option{grid-template-columns:1fr}
  .option .tarif{text-align:left}
  .composeur-haut{grid-template-columns:1fr}
  .ardoise{text-align:left;min-width:0}
}
.glisser{display:none;align-items:center;gap:.45rem;font-size:.82rem;margin-bottom:.7rem;
  color:color-mix(in srgb,var(--page) 76%,transparent)}
@media (max-width:860px){
  .creneau{height:auto;min-height:var(--pas);padding-block:.45rem}
  .journee{background-image:none}
  .creneau + .creneau{border-top:1px solid color-mix(in srgb,var(--reglure) 58%,transparent)}
  .creneau .tampon{font-size:.66rem;padding:.28em .45em}
  .glisser{display:flex}
  .table-defile{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .compare{min-width:560px}
  .compare th[scope="row"]{position:sticky;left:0;z-index:2;background:var(--toile);
    box-shadow:1px 0 0 color-mix(in srgb,var(--page) 20%,transparent)}
  .compare thead th:first-child{position:sticky;left:0;z-index:3;background:var(--toile)}
}
@media (max-width:560px){
  .fiches-t{flex-direction:column}
  .bandeau-actions .lien-cle span{display:none}

  /* ── le premier ecran, resserre ──
     Le titre a un plancher de 40px que la largeur d'ecran ne fait plus baisser :
     sur un telephone il prend cinq lignes et remplit l'ecran a lui seul, si bien
     que le bouton et le prix tombent sous la ligne de flottaison. On rapproche
     l'ensemble de ce qu'on voit sur un ecran moyen : le titre, la promesse, les
     trois points, l'action et le prix se lisent d'un coup d'oeil.
     Rien au-dela de 560px n'est touche. */
  .socle-hero h1{ font-size:2.05rem; letter-spacing:-.03em }
  .socle-hero .accroche{ font-size:1rem; margin-top:.85rem }
  .socle-hero .trois{ margin-top:1.1rem; padding-top:.95rem; gap:.45rem .8rem }
  .socle-hero .trois li{ font-size:.9rem }
  .socle-hero .actions{ margin-top:1.15rem; gap:.6rem }
  .socle-hero .actions .btn{ font-size:.95rem; padding:.78em 1.15em }
  .socle-hero .prix-hero{ margin-top:1.15rem }
  .socle-hero .prix-hero b{ font-size:1.4rem }

  /* La colonne de texte ne faisait que 271px sur un ecran de 375 : 104px
     partaient dans la lisiere, la marge du carnet et le retrait interieur.
     C'est ce qui cassait le bouton en deux lignes. On resserre la marge du
     registre sur telephone : le filet reste, il tient juste moins de place. */
  .spread{ --marge-x:16px }
  .spread .recto{ padding-left:calc(var(--marge-x) + .95rem); padding-right:16px }
  .verso{ padding-inline:16px }
  .socle-hero .actions .btn{ font-size:.92rem }

  /* Le tampon attend son animation en scale(1.5) : a cette taille il depassait
     de deux pixels sur la droite de l'ecran, ce qui suffit a rendre la page
     trainable lateralement. Il tombe d'un peu moins haut, on ne voit pas la
     difference et plus rien ne sort du cadre. */
  .tampon-tombe{ transform:rotate(-16deg) scale(1.22) }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ecrit,.trace,.tampon-tombe{opacity:1;transform:none;clip-path:none}
}
/* --- album vierge : coins photo, pas de faux visuel -------------- */
.cadre-photo{
  position:relative;aspect-ratio:4/3;border-radius:2px;
  background-color:var(--page-creuse);
  background-image:repeating-linear-gradient(-45deg,rgba(20,30,29,.05) 0 8px,transparent 8px 16px);
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(20,30,29,.1);
}
.cadre-photo span{font-family:"Courier Prime",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3)}
.cadre-photo::before,.cadre-photo::after{content:"";position:absolute;width:16px;height:16px;
  border:8px solid transparent}
.cadre-photo::before{top:0;left:0;border-top-color:var(--encre-2);border-left-color:var(--encre-2);opacity:.45}
.cadre-photo::after{bottom:0;right:0;border-bottom-color:var(--encre-2);border-right-color:var(--encre-2);opacity:.45}

.table-defile{overflow-x:auto}
.choix label{position:relative}
.consentement input{accent-color:var(--g-jaune);flex:none}
.champ-tel input{accent-color:var(--g-jaune)}
/* ===========================================================
   L'EMPILEMENT : quatre pages du carnet que l'on tourne.
   position:sticky seul, aucun script, aucune librairie.
   Chaque page se cale sous l'en-tete avec un decalage croissant,
   la tranche des pages precedentes reste donc visible.
   =========================================================== */
.pile{position:relative;counter-reset:feuillet;overflow:visible}
.pile .feuillet{--rot:0deg;--dx:0px}
.pile .feuillet{
  position:sticky;
  top:calc(60px + var(--i) * 14px);
  min-height:min(78vh,660px);
  align-content:center;
  padding:clamp(26px,3.4vw,52px) clamp(22px,3vw,46px);
  border-radius:12px 12px 3px 3px;
  color:var(--encre);
  background-color:var(--page);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
  box-shadow:0 -22px 46px -24px rgba(5,13,16,.85),0 3px 0 rgba(5,13,16,.34),0 22px 34px -26px rgba(5,13,16,.9);
  margin-bottom:clamp(20px,2.6vw,34px);
}
.pile .feuillet:nth-child(1){--i:0;background-color:var(--page-haute)}
.pile .feuillet:nth-child(2){--i:1;background-color:var(--page)}
.pile .feuillet:nth-child(3){--i:2;background-color:var(--page-haute)}
.pile .feuillet:nth-child(4){--i:3;background-color:var(--page-haute)}
.pile .feuillet:nth-child(5){--i:4;background-color:var(--page)}
.pile .feuillet:nth-child(6){--i:5;background-color:var(--page-haute)}
.pile .feuillet:last-child{margin-bottom:0}
.pile .feuillet .inter-txt h3{color:var(--encre)}
.pile .feuillet .inter-txt p{color:var(--encre-2)}
.pile .feuillet .inter-liste li{color:var(--encre)}
.pile .feuillet .inter-liste svg{color:var(--tampon)}
.pile .feuillet::before{
  content:counter(feuillet) " / 6";counter-increment:feuillet;
  position:absolute;top:clamp(12px,1.6vw,18px);right:clamp(20px,2.8vw,42px);
  font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.16em;color:var(--encre-3)}
@supports (animation-timeline:view()){
  /* la feuille arrive plus de travers, puis se retasse en se calant */
  .pile .feuillet{
    animation:poser linear both;
    animation-timeline:view();
    animation-range:entry 8% entry 92%;
  }
  @keyframes poser{
    from{transform:translateY(16px)}
    to{transform:none}
  }
}
@media (max-width:900px){
  .pile .feuillet{position:static;min-height:0;box-shadow:var(--ombre-page);animation:none;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pile .feuillet{position:static;min-height:0;animation:none;transform:none;filter:none}
}

/* Sur la toile, l'action se signe en papier, pas en encre a tampon.
   Le violet ne se detache que de 1,26:1 du fond : il etait rattrape par un
   filet jaune, ce qui superposait les deux encres d'accent sur un meme objet.
   Le systeme prevoit un bouton clair pour exactement ce cas. */
.cloture .btn,.collante .btn{
  background:var(--page-haute); color:var(--toile-fonce); border:0;
  box-shadow:0 1px 0 rgba(5,13,16,.4),0 10px 18px -11px rgba(5,13,16,.7);
}
.cloture .btn:hover,.collante .btn:hover{
  background:#fff; box-shadow:0 2px 0 rgba(5,13,16,.44),0 18px 26px -14px rgba(5,13,16,.75);
}
.cloture .btn svg,.collante .btn svg{color:var(--toile-fonce)}

/* l'action secondaire reste un contour, en papier attenue */
.cloture .btn--creux,.collante .btn--creux{
  background:none; color:var(--page); border:1.5px solid color-mix(in srgb,var(--page) 46%,transparent);
  box-shadow:none;
}
.cloture .btn--creux:hover,.collante .btn--creux:hover{
  background:color-mix(in srgb,var(--page) 10%,transparent);
  border-color:var(--page); color:var(--page-haute); box-shadow:none;
}

/* ===========================================================
   LES FEUILLES VOLANTES : elles animent le PROBLEME.
   Papiers laches, poses de travers les uns sur les autres,
   par opposition a la pile carree de la section outil.
   =========================================================== */
.volantes{position:relative;padding-top:.2rem}
.entete-volantes{font-family:Archivo,sans-serif;font-weight:700;font-size:.98rem;
  color:var(--encre-2);margin-bottom:.9rem}
.volante{
  position:relative;
  background-color:var(--page-haute);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
  border-radius:2px 3px 2px 3px;
  padding:.85rem 1.05rem .95rem;
  box-shadow:0 1px 0 rgba(20,30,29,.1),0 10px 18px -12px rgba(5,13,16,.75);
  transform:rotate(var(--rot)) translateX(var(--dx));
}
.volante + .volante{margin-top:-.55rem}
.volante:nth-child(2){--rot:-2.6deg;--dx:-6px;z-index:1}
.volante:nth-child(3){--rot:1.9deg;--dx:9px;z-index:2}
.volante:nth-child(4){--rot:-1.2deg;--dx:2px;z-index:3}
.volante .manuscrit{display:block;line-height:1.2}
@supports (animation-timeline:view()){
  .volante{animation:jeter linear both;animation-timeline:view();animation-range:entry 10% entry 88%}
  @keyframes jeter{
    from{transform:rotate(calc(var(--rot) * 2.2)) translate(calc(var(--dx) * 2),-22px)}
    to{transform:rotate(var(--rot)) translateX(var(--dx))}
  }
}
@media (max-width:900px){
  .volante{--rot:0deg}
  .volante:nth-child(2){--rot:-1.6deg}
  .volante:nth-child(3){--rot:1.2deg}
  .volante:nth-child(4){--rot:-.8deg}
}
@media (prefers-reduced-motion:reduce){
  .volante{animation:none;transform:rotate(var(--rot)) translateX(var(--dx))}
}

[id]{scroll-margin-top:72px}

/* ═══════════════════════════════════════════════════════════════
   CONTRAT DE COULEURS DU MODULE DE RÉSERVATION
   Le module lit ces variables et n'en connaît pas d'autres. On les
   redéfinit sur la palette du registre : il prend donc les couleurs de
   ce monde sans qu'on touche à son balisage, ce qui le laisse libre
   d'évoluer de son côté.
   L'action se signe à l'encre à tampon, comme partout ailleurs ici.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --mth-accent:      var(--tampon);
  --mth-accent-2:    var(--tampon-clair);
  --mth-accent-deep: var(--tampon);
  --mth-accent-soft: var(--tampon-pale);
  --mth-accent-ring: color-mix(in srgb, var(--tampon) 24%, transparent);
  --mth-on-accent:   #FAF7FD;

  --mth-surface:     var(--page-haute);
  --mth-surface-2:   var(--page);
  --mth-header:      var(--toile);
  --mth-header-2:    var(--toile-clair);

  --mth-text:        var(--encre);
  --mth-text-soft:   var(--encre-2);
  --mth-muted:       var(--encre-3);
  --mth-line:        color-mix(in srgb, var(--encre) 16%, transparent);

  --mth-success:     var(--g-verte, #2C8A57);
  --mth-error:       var(--rouge);

  /* Contrat de FORMES (plugin >= 1.24.0). Le monde carnet est imprime :
     coupe droite partout, aucun cadre flottant. Les elements que l'habillage
     ci-dessous ne cite pas (vignettes, pilules, carte geo, icone de succes)
     suivent d'ici, sans surcharge de selecteur. */
  --mth-radius-cadre:  0;
  --mth-radius-bloc:   2px;
  --mth-radius-carte:  2px;
  --mth-radius-champ:  2px;
  --mth-radius-pilule: 2px;
  --mth-radius-rond:   2px;
  --mth-cadre-bord:    0;
  --mth-cadre-ombre:   none;
}

/* ═══════════════════════════════════════════════════════════════
   HABILLAGE DU MODULE DE RÉSERVATION
   Le contrat de couleurs ci-dessus lui donne les teintes du registre ;
   ce bloc lui donne la forme : coupe presque droite, filets imprimés,
   Courier Prime sur tout ce qui relève du registre (étapes, heures,
   durées), encre à tampon pour l'action.
   Tout est préfixé « .rdv-droite » : l'habillage ne vaut que dans cette
   page, le module reste libre ailleurs (espace pro, autres sites).
   ═══════════════════════════════════════════════════════════════ */

/* ── le cadre du module : aucun. La feuille de droite EST le cadre. ──
   Le plugin dessine par defaut une carte arrondie (24px), bordee de blanc
   et posee sur une ombre bleutee : une carte dans une feuille, deux cadres
   concentriques. On l'aplatit ici pour que le tunnel vive a meme le papier.
   Rien n'est casse ailleurs : la surcharge est bornee a .rdv-droite. */
.rdv-droite .as-booking{
  background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.rdv-droite .as-wizard{ max-width:none }

/* ── le fil d'étapes devient une ligne de registre, sans bandeau sombre ── */
.rdv-droite .as-progress{
  background:none; padding:0 .25rem 1.15rem; margin:0 0 1.6rem; gap:.5rem .62rem;
  /* les etapes se suivent, centrees dans la colonne ; le leger retrait evite
     que le premier chiffre ne touche le bord */
  justify-content:center; align-items:center;
  flex-wrap:wrap; border-bottom:1px solid color-mix(in srgb,var(--encre) 14%,transparent);
  overflow:visible; isolation:auto;
}
.rdv-droite .as-progress::after{ display:none } /* halo de l'ancien monde */
.rdv-droite .as-progress__item{
  flex:0 0 auto; flex-direction:row; align-items:center; gap:.42rem;
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.78rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3);
}
/* un vrai tiret cadratin plutot qu'un filet d'un pixel : a cette taille le filet
   disparaissait, alors que le caractere a la densite du texte qui l'entoure */
.rdv-droite .as-progress__item::before{
  content:"\2014"; position:static; width:auto; height:auto; background:none;
  border-radius:0; margin-left:.62rem; opacity:.55; color:var(--encre-3);
  font-family:"Courier Prime",ui-monospace,monospace; line-height:1;
  /* le module le place en z-index:-1 pour son bandeau sombre : ici il passait
     derriere le papier et restait invisible */
  z-index:auto; inset:auto;
}
/* le tiret precede chaque etape : c'est la premiere qui n'en a pas, et le
   module s'en charge deja. Masquer la derniere retirait un tiret de trop. */
.rdv-droite .as-progress__item.is-active{ color:var(--tampon); font-weight:700 }
.rdv-droite .as-progress__item.is-active .as-progress__dot,
.rdv-droite .as-progress__item.is-active .as-progress__label{ font-weight:700 }
/* le tiret garde son gris quelle que soit l'etape : c'est une ponctuation,
   pas un état */
.rdv-droite .as-progress__item.is-active::before,
.rdv-droite .as-progress__item.is-done::before{ color:var(--encre-3); background:none }
.rdv-droite .as-progress__item.is-done{ color:var(--g-verte) }
.rdv-droite .as-progress__dot{
  /* « display:grid » le rendait haut et etroit, et poussait le point sous le
     chiffre : en ligne, il se lit « 1. Besoin » */
  display:inline; width:auto; height:auto; min-width:0; aspect-ratio:auto;
  background:none; border:0; box-shadow:none; color:inherit; font:inherit; padding:0;
}
.rdv-droite .as-progress__dot::after{ content:"." }
/* le module entoure le numero de l'etape en cours d'un anneau violet, pense
   pour sa pastille ronde. Ici le numero est du texte : ni rond, ni halo. */
.rdv-droite .as-progress__item.is-active .as-progress__dot,
.rdv-droite .as-progress__item.is-done .as-progress__dot{
  background:none; color:inherit; box-shadow:none; border-radius:0; border:0;
}
/* Etape franchie : le module pose une coche par-dessus le chiffre, qui se
   chevauchaient. La coche dit l'etat, elle prend donc la place du numero. */
.rdv-droite .as-progress__item.is-done .as-progress__dot{ font-size:0 }
.rdv-droite .as-progress__item.is-done .as-progress__dot::after{
  font-size:.82rem; content:"\2713"; color:var(--g-verte);
}
/* le module force ce libellé en blanc pour son bandeau sombre d'origine :
   sur le papier du registre il devenait invisible. Il reprend la couleur de
   son étape, donc l'encre à tampon quand elle est en cours. */
.rdv-droite .as-progress__label{ font:inherit; letter-spacing:inherit; color:inherit }
.rdv-droite .as-progress__item.is-active .as-progress__label,
.rdv-droite .as-progress__item.is-done .as-progress__label{ color:inherit }

/* ── titres d'étape ── */
.rdv-droite .as-step__title{ font-family:Archivo,system-ui,sans-serif; font-size:1.12rem; margin-bottom:.5rem }
.rdv-droite .as-step__hint{ font-size:.88rem; color:var(--encre-2); margin-bottom:1rem }

/* ── les prestations deviennent des étiquettes de choix ── */
/* une étiquette par ligne, comme dans la maquette : sur deux colonnes la
   description se casse en cinq lignes et la fiche double de hauteur */
.rdv-droite .as-choices,
/* sous 560px le module repasse en deux colonnes avec un sélecteur plus
   spécifique que le nôtre : on le reprend à l'identique pour garder une
   étiquette par ligne, sinon le texte s'écrase dans 133px. */
.rdv-droite .as-choices:not(.as-choices--ranged){
  display:grid; grid-template-columns:1fr; gap:.6rem; margin-bottom:1.3rem;
}
.rdv-droite .as-choice{
  display:grid; grid-template-columns:1fr auto; gap:.2rem .7rem; align-items:start;
  /* la coche se lit avant le titre, comme dans la maquette : on lui réserve
     la marge de gauche et le texte commence après elle */
  padding:.85rem .95rem .85rem 2.85rem; border-radius:2px; box-shadow:none;
  border:1.5px solid color-mix(in srgb,var(--encre) 18%,transparent);
  background:var(--page-haute); text-align:left;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rdv-droite .as-choice::before{ display:none } /* barre de couleur de l'ancien monde */
.rdv-droite .as-choice:hover{
  transform:none; background:var(--page-haute);
  border-color:color-mix(in srgb,var(--tampon) 55%,transparent);
}
/* la pastille de sélection reprend la coche ronde de la maquette */
.rdv-droite .as-choice::after{
  width:19px; height:19px; left:.95rem; right:auto; top:.95rem;
  border:2px solid color-mix(in srgb,var(--encre) 34%,transparent); background:none;
}
.rdv-droite .as-choice[aria-pressed="true"]{
  background:var(--page-haute); border-color:var(--tampon);
  box-shadow:0 0 0 3px var(--tampon-pale);
}
.rdv-droite .as-choice[aria-pressed="true"]::after{
  border-color:var(--tampon);
  background:radial-gradient(circle, var(--tampon) 0 4.5px, transparent 4.5px);
}
.rdv-droite .as-choice__label{
  grid-column:1; font-family:Archivo,system-ui,sans-serif; font-size:1rem; font-weight:700;
  color:var(--encre); padding-right:0;
}
.rdv-droite .as-choice[aria-pressed="true"] .as-choice__label{ color:var(--tampon) }
.rdv-droite .as-choice__desc{ grid-column:1; font-size:.86rem; color:var(--encre-2); margin:0 }
.rdv-droite .as-choice__meta{
  grid-column:2; grid-row:1; align-self:start; margin-top:.12rem;
  background:none; padding:0; border:0; border-radius:0; box-shadow:none;
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.74rem; color:var(--encre-2);
  white-space:nowrap;
}

/* Sous 560px, le module repasse ses prestations en mini cartes deux colonnes,
   avec un selecteur plus precis que le notre (« .as-choices:not(...) .as-choice »).
   Il gagnait donc sur trois points : la carte redevenait une colonne flex, la
   marge de gauche reservee a la coche disparaissait, et la coche se retrouvait
   posee sur le titre. On reprend son selecteur a l'identique pour garder ici
   une etiquette par ligne, coche a gauche, texte apres elle. */
@media (max-width:560px){
  .rdv-droite .as-choices:not(.as-choices--ranged) .as-choice{
    display:grid; grid-template-columns:1fr auto; gap:.2rem .7rem; align-items:start;
    padding:.85rem .95rem .85rem 2.85rem;
  }
  .rdv-droite .as-choices:not(.as-choices--ranged) .as-choice::after{
    left:.95rem; right:auto; top:.95rem; width:19px; height:19px;
  }
  .rdv-droite .as-choices:not(.as-choices--ranged) .as-choice__label{
    grid-column:1; font-size:1rem; padding-right:0;
  }
  /* le module coupe la description a deux lignes pour sa mini carte : sur une
     etiquette pleine largeur, elle tient entiere */
  .rdv-droite .as-choices:not(.as-choices--ranged) .as-choice__desc{
    grid-column:1; display:block; font-size:.86rem; overflow:visible;
    -webkit-line-clamp:none; -webkit-box-orient:horizontal;
  }
  .rdv-droite .as-choices:not(.as-choices--ranged) .as-choice__meta{
    grid-column:2; grid-row:1; align-self:start; margin:.12rem 0 0;
  }
}

/* ── créneaux ── */
.rdv-droite .as-day__slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.45rem }
.rdv-droite .as-slot{
  background:var(--page-haute); border-radius:2px; padding:.6rem .3rem;
  border:1.5px solid color-mix(in srgb,var(--encre) 16%,transparent);
  font-family:"Courier Prime",ui-monospace,monospace; font-weight:700; font-size:.95rem;
  color:var(--encre); box-shadow:none;
}
.rdv-droite .as-slot:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--tampon); background:#fff; color:var(--encre) }
.rdv-droite .as-slot.is-selected{ background:var(--tampon); border-color:var(--tampon); color:#FAF7FD }
/* Le module rend toutes les heures de la journee et barre celles qui sont
   prises. Sur un agenda un peu rempli, la grille devient un mur de creneaux
   barres ou les quelques heures libres se perdent. On n'affiche que ce qui est
   reservable : le visiteur n'a rien a faire de ce qui ne l'est pas.
   Purement visuel, les boutons restent en place et desactives. */
.rdv-droite .as-slot.is-unavailable{ display:none }
/* Si une journee n'a plus rien de libre, la grille ne reste pas vide. */
.rdv-droite .as-day__slots:not(:has(.as-slot:not(.is-unavailable)))::after{
  content:"Plus de créneau libre ce jour-là. Choisissez un autre jour.";
  grid-column:1 / -1; display:block; padding:.9rem 0;
  font-size:.9rem; color:var(--encre-2);
}
.rdv-droite .as-day-chip{ border-radius:2px; border:1.5px solid color-mix(in srgb,var(--encre) 16%,transparent);
  background:var(--page-haute); font-family:"Courier Prime",ui-monospace,monospace }
.rdv-droite .as-day-chip.is-selected{ background:var(--tampon); border-color:var(--tampon); color:#FAF7FD }
.rdv-droite .as-slots__dayhead{ font-family:Archivo,system-ui,sans-serif; color:var(--encre) }

/* La bande de jours defile a l'horizontale (le module masque sa barre de
   defilement). Sur un ecran etroit elle est coupee net par le bord du papier,
   ce qui ne dit pas qu'il y a une suite : le degrade de fin l'annonce, comme
   pour le tableau comparatif. */
@media (max-width:860px){
  .rdv-droite .as-slots__strip{
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
            mask-image:linear-gradient(90deg,#000 86%,transparent);
    scroll-snap-type:x proximity;
    /* le geste reste dans la bande : sans cela, un doigt qui derape sur le cote
       en faisant defiler la page entraine la page avec lui */
    overscroll-behavior-x:contain;
  }
  .rdv-droite .as-day-chip{ scroll-snap-align:start }
}
.rdv-droite .as-slots__reco-banner{
  border-radius:2px; background:var(--tampon-pale); border:1px solid color-mix(in srgb,var(--tampon) 30%,transparent);
  color:var(--encre); font-size:.84rem;
}

/* ── champs ── */
.rdv-droite .as-geo__input,
.rdv-droite .as-booking__field input,
.rdv-droite .as-booking__field textarea{
  border-radius:2px; border:1.5px solid color-mix(in srgb,var(--encre) 18%,transparent);
  background:var(--page-haute); color:var(--encre); box-shadow:none;
}
.rdv-droite .as-geo__input:focus,
.rdv-droite .as-booking__field input:focus,
.rdv-droite .as-booking__field textarea:focus{
  border-color:var(--tampon); box-shadow:0 0 0 3px var(--tampon-pale);
}
.rdv-droite .as-booking__field > span{ font-family:Archivo,system-ui,sans-serif; color:var(--encre) }

/* ── boutons : le tampon pour agir, le creux pour revenir ── */
.rdv-droite .as-btn{ border-radius:2px; font-family:Archivo,system-ui,sans-serif; font-weight:700 }
.rdv-droite .as-btn--next,
.rdv-droite .as-btn--confirm{
  background:var(--tampon); color:#FAF7FD; border:0;
  box-shadow:0 1px 0 rgba(20,30,29,.22),0 10px 18px -11px rgba(5,13,16,.6);
}
.rdv-droite .as-btn--next:hover,
.rdv-droite .as-btn--confirm:hover{ background:var(--tampon-clair); transform:translateY(-2px) }
.rdv-droite .as-btn--ghost{
  background:none; border:1.5px solid color-mix(in srgb,var(--encre) 34%,transparent);
  color:var(--encre); box-shadow:none;
}
.rdv-droite .as-btn--ghost:hover{ border-color:var(--encre); background:color-mix(in srgb,var(--encre) 6%,transparent) }
.rdv-droite .as-step__nav{
  margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent);
}

/* ── récapitulatif et rappel de choix ── */
/* Le module pose ici un bandeau lavande pleine largeur. Sur le papier vert du
   registre, deux teintes claires de tons opposes se touchent sans transition :
   ca se lit comme un degrade rate plutot que comme un bandeau. Le rappel de
   choix n'a pas besoin d'un aplat, l'etiquette suffit ; il ne reste qu'un filet
   de reglure pour le separer de l'etape. */
.rdv-droite .as-tunnel-recap{
  background:none;
  border-bottom:1px solid color-mix(in srgb,var(--encre) 12%,transparent);
  padding-top:1rem; padding-bottom:1rem;
}
.rdv-droite .as-recap__list,
.rdv-droite .as-tunnel-recap__item{ border-radius:2px; border-color:color-mix(in srgb,var(--encre) 16%,transparent) }
/* l'etiquette porte seule le rappel : fond papier, duree en machine a ecrire */
.rdv-droite .as-tunnel-recap__item{
  background:var(--page-haute); color:var(--encre);
  font-family:Archivo,system-ui,sans-serif; font-weight:700;
}
.rdv-droite .as-recap__list{ background:var(--page-creuse) }
.rdv-droite .as-recap__row{ border-bottom-color:color-mix(in srgb,var(--encre) 12%,transparent) }
.rdv-droite .as-recap__row dt{ font-family:"Courier Prime",ui-monospace,monospace; color:var(--encre-3) }
.rdv-droite .as-recap__row dd{ color:var(--encre) }
.rdv-droite .as-map{ border-radius:2px; border:1px solid color-mix(in srgb,var(--encre) 16%,transparent) }

/* ═══════════════════════════════════════════════════════════════
   TRANSITION ENTRE DEUX PAGES : ON TOURNE UNE PAGE
   Le parent pose un voile navy, un logo qui grandit et un anneau qui
   pulse : trois gestes de l'ancien monde. Ici, la toile se ferme et
   une feuille de papier se pose dessus, la plaque au centre. Rien ne
   grossit, rien ne rayonne. Les classes et le timing du parent sont
   conserves tels quels, on ne touche qu'a l'apparence.
   ═══════════════════════════════════════════════════════════════ */
#mn-overlay{
  background-color:var(--toile);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  transition:opacity .2s ease;
}
/* l'anneau qui pulse : hors du monde imprime */
#mn-overlay.mn-ov-in::after{ display:none }

/* la feuille : elle monte de quelques pixels et se pose, sans rebond */
.mn-ov-logo{
  transform:translateY(10px);
  transition:opacity .22s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1);
}
#mn-overlay.mn-ov-in .mn-ov-logo,
html.mn-entering .mn-ov-logo{ opacity:1; transform:translateY(0) }
#mn-overlay.mn-ov-out .mn-ov-logo{ opacity:0; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease }

/* la plaque, identique a celle du bandeau, posee sur une feuille */
.mn-ov-plaque{
  display:flex; align-items:baseline; gap:.62rem;
  background:var(--page-haute); color:var(--toile-fonce);
  padding:1.05rem 1.6rem; border-radius:2px;
  box-shadow:0 2px 0 rgba(20,30,29,.18), 0 22px 40px -24px rgba(5,13,16,.7);
}
.mn-ov-plaque strong{
  font-family:Archivo,system-ui,sans-serif; font-weight:800;
  font-size:clamp(1.25rem,3.4vw,1.9rem); letter-spacing:-.03em; white-space:nowrap;
}
.mn-ov-plaque span{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.7rem;
  letter-spacing:.12em; color:var(--toile);
}
/* le filet de reglure sous la plaque, trace pendant l'attente */
#mn-overlay .mn-ov-logo::after{
  content:""; display:block; height:1px; margin:1.15rem auto 0;
  width:0; background:var(--reglure); opacity:.85;
}
#mn-overlay.mn-ov-in .mn-ov-logo::after,
html.mn-entering .mn-ov-logo::after{ animation:mth-filet .5s cubic-bezier(.22,1,.36,1) forwards }
@keyframes mth-filet{ from{width:0} to{width:min(230px,62vw)} }

@media (prefers-reduced-motion:reduce){
  .mn-ov-logo{ transition:none; transform:none }
  #mn-overlay .mn-ov-logo::after{ display:none }
}

/* ── Le cachet « tarif fondateur » ──────────────────────────────
   Il se pose a cheval sur le montant, comme un tampon sur un
   document deja imprime : il chevauche le chiffre au lieu de se
   ranger a cote. Le mode multiplier lui fait prendre le grain du
   papier. Retire du flux : allumer ou eteindre le cachet ne
   deplace rien autour. */
.cachet-fondateur{
  /* Pose dans l'espace libre au-dessus de la formule, incline comme un coup
     de tampon. Dans le flux : il ne recouvre aucun chiffre, et l'allumer ne
     deplace que sa propre hauteur. */
  display:block; width:fit-content; margin:0 0 .8rem auto;
  transform:rotate(-3.4deg); transform-origin:right center;
  font-size:.72rem; letter-spacing:.14em; white-space:nowrap;
  mix-blend-mode:normal; opacity:1;
  background:var(--page-haute); box-shadow:0 1px 0 rgba(20,30,29,.1);
}
/* sur le comparatif, il se range apres l'intitule de la ligne */
.rang-prix .cachet-fondateur{
  position:static; transform:rotate(-3.2deg); margin-left:.7rem;
  background:none; font-size:.66rem;
}
@media (max-width:560px){
  .cachet-fondateur{font-size:.68rem; bottom:-.6em}
}


/* ═══════════════════════════════════════════════════════════════
   PAGES LÉGALES (mentions, confidentialité, CGV)
   Le gabarit vient du thème parent, sa mise en forme d'origine
   appartient à l'ancien monde : fond sombre chaud, accent orange,
   Inter. Ici la page devient ce qu'elle est dans un registre, une
   feuille glissée dans le carnet : papier posé sur la toile, titre
   à l'encre, sommaire en encart, filets de séparation entre les
   articles. Aucune retouche du parent, seulement son habillage.
   ═══════════════════════════════════════════════════════════════ */
.legal-page{
  background:none;
  padding:clamp(88px,10vw,124px) var(--lisiere) clamp(56px,7vw,92px);
}
.legal-wrap{
  max-width:820px; margin-inline:auto; position:relative;
  color:var(--encre);
  background-color:var(--page);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
  border-radius:var(--coin);
  box-shadow:var(--ombre-page);
  padding:clamp(30px,4vw,54px) clamp(22px,4.5vw,60px) clamp(38px,5vw,66px);
  overflow:hidden;
}
/* le filet de marge du carnet, a gauche, comme sur les feuillets de l'accueil */
.legal-wrap::before{
  content:""; position:absolute; inset:0 auto 0 clamp(14px,2.6vw,30px); width:1px;
  background:color-mix(in srgb,var(--reglure-rose) 62%,transparent);
  pointer-events:none;
}

/* ── en-tete de la feuille ── */
.legal-head{
  margin-bottom:clamp(20px,3vw,30px); padding-bottom:1.2rem;
  border-bottom:1px solid color-mix(in srgb,var(--encre) 15%,transparent);
}
.legal-back{
  display:inline-block; margin-bottom:1rem;
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.74rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--encre-3); text-decoration:none;
}
.legal-back:hover{ color:var(--tampon) }
.legal-title{
  font-family:Archivo,system-ui,sans-serif; font-weight:800; letter-spacing:-.022em;
  font-size:clamp(1.75rem,4.4vw,2.6rem); line-height:1.05; color:var(--encre); margin:0 0 .55rem;
}
.legal-updated{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.74rem;
  letter-spacing:.06em; color:var(--encre-3); margin:0;
}

/* ── sommaire : un encart de registre, pas une carte flottante ── */
.legal-toc{
  background:var(--page-creuse);
  border:1px solid color-mix(in srgb,var(--encre) 14%,transparent);
  border-radius:2px; box-shadow:none;
  padding:1.05rem 1.2rem; margin:0 0 clamp(24px,3.4vw,36px);
}
.legal-toc__title{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--encre-3); margin:0 0 .6rem;
}
.legal-toc ul{ display:grid; gap:.3rem; margin:0; padding:0; list-style:none }
.legal-toc a{
  color:var(--encre-2); font-size:.93rem; text-decoration:none;
  border-bottom:1px solid transparent;
}
.legal-toc a:hover{ color:var(--tampon); border-bottom-color:currentColor }

/* ── le corps du texte ── */
.legal-body{
  color:var(--encre-2); font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:1rem; line-height:1.72;
}
.legal-body h2{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1.16rem;
  letter-spacing:-.012em; color:var(--encre);
  margin:2.1rem 0 .65rem; padding-top:1.15rem;
  border-top:1px solid color-mix(in srgb,var(--encre) 13%,transparent);
  scroll-margin-top:96px; /* l'en-tete du site est collante */
}
.legal-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.legal-body h3{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1rem;
  color:var(--encre); margin:1.5rem 0 .35rem;
}
.legal-body p{ margin:0 0 .8rem }
.legal-body strong,.legal-body b{ color:var(--encre); font-weight:700 }
.legal-body ul{ list-style:disc; padding-left:1.2rem; margin:0 0 .9rem }
.legal-body ol{ list-style:decimal; padding-left:1.4rem; margin:0 0 .9rem }
.legal-body li{ margin-bottom:.35rem }
.legal-body a{
  color:var(--tampon); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.legal-body a:hover{ color:var(--tampon-clair) }
.legal-body hr{
  border:0; height:1px; margin:1.8rem 0;
  background:color-mix(in srgb,var(--encre) 13%,transparent);
}
/* un tableau de registre : filets fins, en-tetes en machine a ecrire */
.legal-body table{
  width:100%; border-collapse:collapse; margin:0 0 1.1rem; font-size:.93rem;
}
.legal-body th,.legal-body td{
  text-align:left; padding:.5rem .6rem;
  border-bottom:1px solid color-mix(in srgb,var(--encre) 13%,transparent);
}
.legal-body th{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-3); font-weight:700;
}
/* les tableaux longs defilent dans leur propre cadre plutot que d'elargir la feuille */
.legal-body .table-defile,.legal-body figure.wp-block-table{ overflow-x:auto }

@media (max-width:560px){
  .legal-wrap{ padding-left:clamp(18px,5.5vw,26px); padding-right:clamp(18px,5.5vw,26px) }
  .legal-wrap::before{ left:9px }
}