*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font-sans);color:var(--encre);background:var(--creme);
  line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{font-family:var(--font-serif);font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px}
body.locked{overflow:hidden}
/* menu ouvert : le défilement est bloqué, donc le header collant perd son
   ancrage — on le fixe pour qu'il reste visible au-dessus du menu */
body.menu-open header{position:fixed;top:0;left:0;right:0}
/* le défilement se fait sur l'élément racine : on le bloque aussi */
html:has(body.locked){overflow:hidden}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gout)}
.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--terracotta);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before,.eyebrow::after{content:"\2726";font-size:13px;line-height:1}
/* le titre s'ajuste à son texte pour que le filet ait sa largeur */
.section-title{
  font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:.02em;margin:14px 0 18px;
  width:fit-content;max-width:100%;
}
/* Filet à la largeur du titre, déployé lentement de gauche à droite */
.section-title::after{
  content:"";display:block;width:100%;height:2px;border-radius:2px;margin-top:18px;
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 30%, var(--rose) 65%,
    rgba(232,183,175,.5) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 2.6s cubic-bezier(.16,.72,.24,1);
}
.section-title.vu::after{transform:scaleX(1)}
.center .section-title{margin-inline:auto}
/* même sens que les autres filets : terracotta à gauche, rose à droite */
.center .section-title::after{
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 30%, var(--rose) 65%,
    rgba(232,183,175,.5) 100%);
}
@media (prefers-reduced-motion: reduce){
  .section-title::after{transform:none;transition:none}
}
.lede{color:var(--encre-60);max-width:580px;font-size:15.5px}
.center{text-align:center}
.center .lede{margin-inline:auto}
.section-pad{padding-block:82px 30px}

.btn{
  display:inline-block;border:none;border-radius:999px;padding:13px 30px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  background:var(--terracotta);color:var(--blanc);transition:background .25s,transform .2s;
}
.btn:hover{background:#AD6743;transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--encre);border:1px solid var(--encre);font-weight:500}
.btn-ghost:hover{background:var(--encre);color:var(--creme)}
.btn-clair{background:transparent;color:var(--encre);border:1px solid var(--encre);font-weight:500}
.btn-clair:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.btn-sm{padding:10px 20px;font-size:10.5px}

/* ---------- Header ---------- */
/* ⚠️ **`body > header`, et non `header`.** C'est un sélecteur d'**élément** :
   écrit seul, il attrape *tous* les `<header>` du projet — dont celui de chaque
   carte de commande, qui s'est mis à coller et à recouvrir les lignes
   d'articles. Un sélecteur d'élément ne désigne pas une chose, il désigne une
   catégorie ; l'en-tête du site est une chose. */
body > header{
  /* ⚠️ **Collant ne veut pas dire « suit le flux ».** Le bandeau de mode test
     est lui aussi collant : une fois épinglé, il quitte le flux et occupe le
     haut de la fenêtre. L'en-tête épinglé à `top:0` venait donc se poser
     **dessus**, et le menu passait sous les rayures. Un commentaire de
     `tokens.css` affirmait le contraire — il valait pour une barre en `fixed`,
     pas pour celle-ci. Avant l'épinglage, `top` ne s'applique pas : rien n'est
     décalé à tort. */
  position:sticky;top:var(--h-mode-test);z-index:50;background:rgba(247,239,230,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(196,122,83,.18);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:40px;height:78px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{width:40px;height:40px}
.brand-name{font-family:var(--font-serif);font-size:20px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:25px;align-items:center;flex-wrap:nowrap}
.nav-links a{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;opacity:.75;transition:opacity .2s;white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav-credits{font-size:10px;font-weight:600;background:var(--accent-soft);color:var(--terracotta);border-radius:999px;padding:3px 9px;margin-left:6px}
.burger{display:none;background:none;border:none;width:44px;height:44px;position:relative;z-index:60}
.burger span{display:block;width:22px;height:2px;background:var(--encre);margin:5px auto;transition:transform .3s,opacity .2s;border-radius:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:76px 0 auto 0;z-index:49;background:var(--creme);
  border-bottom:1px solid rgba(196,122,83,.2);box-shadow:0 30px 50px -30px rgba(122,74,45,.35);
  max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;padding:24px 28px 32px;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .3s,opacity .3s,visibility 0s .3s;
}
.mobile-menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .3s,opacity .3s}
.mobile-menu a{
  font-family:var(--font-serif);font-size:25px;padding:10px 0;width:100%;text-align:center;
  border-bottom:1px dashed rgba(196,122,83,.25);
}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu .btn{font-family:var(--font-sans);font-size:12px;margin-top:20px;width:auto;border-bottom:none;color:var(--blanc);padding:16px 52px}
.menu-scrim{position:fixed;inset:0;z-index:48;background:rgba(34,34,33,.25);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.menu-scrim.open{opacity:1;visibility:visible;transition:opacity .3s}

/* Barre de réservation permanente (mobile) — exigence CDC 14.2 */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:rgba(247,239,230,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(196,122,83,.25);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.sticky-cta .btn{width:100%;text-align:center;padding:15px}

/* ---------- Hero ---------- */
.hero{
  position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  min-height:clamp(520px,78vh,720px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:70px 0;overflow:hidden;
  /* Fond d'attente sous la photographie, le temps qu'elle arrive. */
  background:linear-gradient(150deg,var(--peche) 0%,var(--rose) 45%,#C9A98F 100%);
  background-size:cover;background-position:center;
}
/* Éclaircissement : garantit la lisibilité quelle que soit la photo. Les
   textes sont en encre par-dessus, il faut donc voiler de crème et non
   d'ombre — c'est la variante retenue par la cliente. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  /* ⚠️ Voile allégé le jour où la photographie a remplacé le dégradé. Réglé
     pour un aplat, il effaçait la photo : le mur terracotta ressortait rose pâle
     et le bas de l'image partait au blanc. Même leçon que les bandeaux de route
     — une force juste pour un emplacement est trop forte pour une image. */
  background:
    radial-gradient(ellipse at center, rgba(253,250,245,.44) 0%, rgba(253,250,245,.26) 78%),
    linear-gradient(180deg, rgba(253,250,245,.2) 0%, rgba(253,250,245,.08) 45%, rgba(247,239,230,.62) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;padding-inline:var(--gout,28px);margin:0 auto}
/* ⚠️ La photographie est **sous** le voile (`.hero::before`, z-index 1) et sous
   le texte (`.hero-inner`, z-index 2). Le dégradé de `.hero` lui reste derrière :
   il n'est plus un emplacement mais un fond d'attente, pour qu'un chargement lent
   ne montre pas une bande blanche. */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.hero-logo{width:clamp(150px,20vw,210px);margin:0 auto 22px}
.hero h1{
  font-size:clamp(34px,5.4vw,60px);letter-spacing:.16em;text-transform:uppercase;line-height:1.05;
  color:var(--encre);text-shadow:0 1px 14px rgba(253,250,245,.7);
}
.hero .disciplines{
  margin:22px 0 14px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--encre-60);display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
}
.hero .disciplines span::after{content:"·";margin-left:16px;color:var(--terracotta)}
.hero .disciplines span:last-child::after{content:""}
.hero .lieu{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-2);font-weight:500}
.hero p.tagline{
  font-family:var(--font-serif);font-style:italic;font-size:clamp(18px,2.3vw,24px);
  color:var(--terracotta-2);margin:14px auto 32px;max-width:620px;
  text-shadow:0 1px 12px rgba(253,250,245,.6);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.frise{display:flex;justify-content:center;gap:44px;padding:30px 0;overflow:hidden}
.frise svg{width:32px;height:32px;flex:none;opacity:.85}
.frise svg:nth-child(even){opacity:.45;transform:scale(.72)}

/* Animation logo */
.lg-flame{animation:var(--a-flame,none);transform-box:view-box;transform-origin:50% 50%}
.lg-ring{animation:var(--a-ring,none);transform-box:view-box;transform-origin:50% 50%}
.lg-pet.lg-l{animation:var(--a-pet-l,none);transform-box:view-box;transform-origin:50% 50%}
.lg-pet.lg-r{animation:var(--a-pet-r,none);transform-box:view-box;transform-origin:50% 50%}
.lg-leaf{animation:var(--a-leaf,none);transform-box:fill-box;transform-origin:center}
.lg-arc{animation:var(--a-arc,none)}
/* Teintes du sprite du monogramme. Elles remplacent des attributs style=,
   interdits par la CSP. `--mv` reste l'override par usage : la sémantique est
   strictement identique. Ne pas confondre avec .mv-* plus bas, qui posent
   --mv au lieu de peindre. */
.lg-brun{fill:var(--mv,#b88058)}
.lg-rose{fill:var(--mv,#dbaea1)}
.lg-vert{fill:var(--mv,#a2a38b)}
.lg-degrade{fill:var(--mv,url(#mv-grad))}
@media (prefers-reduced-motion: no-preference){
  :root{--lgT:30s}
  .hero-logo, header .brand svg{
    --a-flame:lgFlame var(--lgT) ease-in-out infinite; --a-ring:lgRing var(--lgT) ease-in-out infinite;
    --a-pet-l:lgPetL var(--lgT) ease-in-out infinite; --a-pet-r:lgPetR var(--lgT) ease-in-out infinite;
    --a-leaf:lgLeaf var(--lgT) cubic-bezier(.4,1.2,.5,1) infinite; --a-arc:lgArc var(--lgT) ease-in-out infinite;
  }
  .hero-logo{animation:lgBreathe 6s 2.4s ease-in-out infinite}
}
@keyframes lgFlame{0%{opacity:0;transform:scale(.4,.05)}2%{opacity:1}3.2%{transform:none}95%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:scale(.4,.05)}}
@keyframes lgRing{0%,1.5%{opacity:0;transform:translateY(-5%)}4.4%{opacity:1;transform:none}94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5%)}}
@keyframes lgPetL{0%,1.2%{opacity:0;transform:rotate(-22deg) scale(.55)}5%{opacity:1;transform:none}93.5%{opacity:1;transform:none}97%,100%{opacity:0;transform:rotate(-22deg) scale(.55)}}
@keyframes lgPetR{0%,1.2%{opacity:0;transform:rotate(22deg) scale(.55)}5%{opacity:1;transform:none}93.5%{opacity:1;transform:none}97%,100%{opacity:0;transform:rotate(22deg) scale(.55)}}
@keyframes lgLeaf{0%,3.2%{opacity:0;transform:scale(0)}5.8%{opacity:1;transform:none}93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(0)}}
@keyframes lgArc{0%,3.6%{opacity:0}7%{opacity:1}92%{opacity:1}95%,100%{opacity:0}}
@keyframes lgBreathe{0%,100%{transform:scale(.97)}50%{transform:scale(1.07)}}

.mv-blanc{--mv:#fff;color:#fff}
.mv-terra{--mv:var(--terracotta-2);color:var(--terracotta-2)}
.mv-sauge{--mv:#a2a38b;color:#a2a38b}
.watermark{position:absolute;pointer-events:none;opacity:.08;z-index:0}

/* ---------- Pratiques ---------- */
.prat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.prat-card{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:150px 150px 20px 20px;
  overflow:hidden;display:flex;flex-direction:column;text-align:center;
  transition:transform .3s,box-shadow .3s;
}
.prat-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(122,74,45,.35)}
/* ⚠️ **La teinte de la pratique passe dans un filet, pas dans l'aplat.**
   L'aplat est un **emplacement de photo** : il disparaîtra le jour où Delphine
   fournira les siennes, et l'identité de couleur avec lui. Le filet, lui, reste
   sous l'image.
   ⚠️ Et il porte la couleur **pleine**, pas la douce — la même leçon qu'à
   `.seance` et `.reco-c`, qui portent déjà ce filet de 4 px : sur l'aplat pâle,
   le Yin et le prénatal ne se séparent que de ΔE 1,17, soit rien pour un œil.
   Sur la teinte pleine, 4,76.
   ⚠️ **Sous l'image et non à gauche** : la carte est une arche
   (`border-radius:150px 150px`), un rail latéral suivrait la courbe du haut. */
.prat-visuel{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border-bottom:4px solid var(--sc,var(--sauge));
  /* La carte est une arche : sans cela, les coins carrés de la photo dépassent. */
  overflow:hidden;
}
.prat-visuel svg{width:56px;height:56px}
.prat-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:6px}
.prat-card h3{font-size:26px}
.prat-meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.prat-card p{font-size:13px;color:var(--encre-60);flex:1;margin-top:4px}
.prat-card .btn{margin-top:16px;align-self:center}

/* ---------- Planning ---------- */
.plan-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px}
/* ⚠️ **Il défile dans son conteneur, il n'élargit pas la page.** Les huit
   périodes du §4 tenaient sur une ligne en `inline-flex`, sans repli ni
   défilement : sur un téléphone, elles poussaient le corps entier à leur
   largeur, et toute la section statistiques partait vers la droite — titres
   coupés, cartes hors écran. C'est la règle générale du projet, appliquée là
   où elle manquait.

   ⚠️ **Sans `flex:none` sur les boutons, et c'est délibéré.** Ma première
   version le posait, avec `white-space:nowrap`, pour des pastilles d'une seule
   ligne. Mais des boutons qui refusent de rétrécir élargissent la barre, et
   `max-width:100%` ne la retient que si son parent est lui-même contraint —
   ce qu'il n'est pas partout. La page des offres, qui porte aussi un `.seg`,
   s'est mise à déborder : deux tests de parcours mobile l'ont dit. Les
   libellés se replient donc sur plusieurs lignes, ce qui est moins joli et
   toujours dans l'écran. */
.seg{
  display:inline-flex;background:var(--creme-2);border-radius:999px;padding:4px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  border:none;background:none;border-radius:999px;padding:8px 18px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--encre-60);transition:.2s;
}
.seg button.on{background:var(--blanc);color:var(--encre);box-shadow:0 2px 8px -4px rgba(34,34,33,.3)}
/* ---------- Planning : panneau de filtres ---------- */
.plan-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start;margin-top:26px}
.plan-main{min-width:0}
.plan-layout.replie{grid-template-columns:1fr}
.plan-layout.replie .plan-side{display:none}

.plan-side{
  /* Colle sous l'en-tête — qui descend lui-même du bandeau « mode test ». */
  position:sticky;top:calc(96px + var(--h-mode-test));
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:20px;
  overflow:hidden;
}
.ps-head{
  display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid rgba(196,122,83,.18);background:#FBF6EF;
}
.ps-titre{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}
.ps-reset{
  margin-left:auto;background:none;border:none;padding:0;
  font-size:10.5px;color:var(--terracotta-2);text-decoration:underline;text-underline-offset:3px;
}
.ps-reset:hover{color:var(--terracotta)}
.ps-fermer{background:none;border:none;font-size:20px;line-height:1;color:var(--encre-60);padding:0 2px}
.ps-fermer:hover{color:var(--encre)}
.ps-corps{padding:6px 18px 12px;max-height:min(60vh,560px);overflow-y:auto}
.ps-groupe{padding:14px 0;border-bottom:1px dashed rgba(196,122,83,.2)}
.ps-groupe:last-child{border-bottom:none}
.ps-groupe h4{
  font-family:var(--font-sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);margin-bottom:9px;
}
.ps-opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;padding:6px 0;font-size:13px;color:var(--encre-60);transition:color .2s;
}
.ps-opt:hover{color:var(--encre)}
.ps-opt::before{
  content:"";width:16px;height:16px;border-radius:5px;flex:none;
  border:1.5px solid rgba(34,34,33,.22);background:var(--blanc);transition:.2s;
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.ps-opt:hover::before{border-color:var(--terracotta)}
.ps-opt.on{color:var(--encre);font-weight:600}
.ps-opt.on::before{
  border-color:var(--terracotta);background-color:var(--terracotta);
  /* coche blanche */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFAF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.ps-vider{
  background:none;border:none;padding:6px 0 0 25px;
  font-size:10.5px;color:var(--terracotta-2);text-decoration:underline;text-underline-offset:3px;
}
.ps-vider:hover{color:var(--terracotta)}
.ps-pied{
  padding:13px 18px;border-top:1px solid rgba(196,122,83,.18);background:#FBF6EF;
  font-size:11.5px;color:var(--encre-60);
}

.ps-ouvrir{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  border:1.5px solid rgba(34,34,33,.16);background:var(--blanc);border-radius:999px;
  color:var(--encre-60);transition:.2s;
}
.ps-ouvrir:hover{border-color:var(--terracotta);color:var(--encre)}
.ps-ouvrir.on{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc)}
.ps-ouvrir svg{width:17px;height:17px}
.ps-badge[hidden]{display:none}
.ps-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--terracotta);color:var(--blanc);border:2px solid var(--creme);
  border-radius:999px;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:600;padding:0 4px;
}
.ps-ouvrir.on .ps-badge{background:var(--blanc);color:var(--terracotta);border-color:var(--terracotta)}
.ps-scrim{position:fixed;inset:0;z-index:46;background:rgba(34,34,33,.35)}
.ps-scrim[hidden]{display:none}

@media(max-width:900px){
  .plan-layout{grid-template-columns:1fr}
  .plan-side{
    /* ⚠️ 80px, pas 76 : l'en-tête fait 79px de haut, et le panneau démarrait
       donc trois pixels **au-dessus** de son bas. Ça tenait par chance, et le
       bandeau « mode test » a fait basculer la chance du mauvais côté. */
    position:fixed;top:calc(80px + var(--h-mode-test));left:0;bottom:0;z-index:47;width:min(310px,86vw);
    border-radius:0 20px 20px 0;transform:translateX(-104%);
    transition:transform .32s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
  }
  .plan-side.ouvert{transform:none}
  .plan-layout.replie .plan-side{display:flex}
  .ps-corps{flex:1;max-height:none}
}
@media(max-width:680px){
  /* le tiroir recouvre toute la hauteur, barre de réservation comprise */
  .plan-side{bottom:0}
}

.daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px}
.daypill{
  border:1.5px solid rgba(34,34,33,.14);background:var(--blanc);border-radius:14px;
  padding:9px 14px;text-align:center;flex:none;transition:.2s;
}
.daypill small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.daypill b{font-family:var(--font-serif);font-size:18px;font-weight:500}
.daypill.on{border-color:var(--accent);background:var(--accent-soft)}
/* planning : rappel du vert du hero sur la date sélectionnée */
#planning .daypill.on{border-color:#A2A38B;background:#E7EAE0}
#planning .daypill.on b{color:#5F6B50}
.daypill.empty{opacity:.45}

.seance{
  display:flex;align-items:center;gap:16px;background:var(--blanc);
  border:1px solid rgba(34,34,33,.08);border-left:4px solid var(--sc,var(--sauge));
  border-radius:14px;padding:15px 18px;margin-bottom:10px;transition:transform .2s,box-shadow .2s;
  width:100%;text-align:left;
}
.seance:hover{transform:translateX(3px);box-shadow:0 14px 28px -22px rgba(122,74,45,.4)}
.sc-h{font-family:var(--font-serif);font-size:21px;width:64px;flex:none;line-height:1.1}
.sc-h small{display:block;font-size:10px;font-family:var(--font-sans);color:var(--encre-60);letter-spacing:.06em}
.sc-main{flex:1;min-width:0}
.sc-main b{font-family:var(--font-serif);font-size:20px;font-weight:500;display:block;line-height:1.2}
.sc-sub{font-size:11.5px;color:var(--encre-60)}
.sc-right{text-align:right;flex:none}
.places{font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.places.low{color:var(--terracotta)}
.places.full{color:var(--encre-60)}
.badge-exp{
  display:inline-block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:var(--accent-soft);color:var(--terracotta);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px;
}
.day-head{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--terracotta);margin:22px 0 10px;
}
.vide{font-size:13px;color:var(--encre-60);font-style:italic;padding:20px 0}

/* ---------- Tarifs ---------- */
.tarif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.tarif{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:100px 100px 18px 18px;
  padding:30px 20px 24px;text-align:center;display:flex;flex-direction:column;gap:5px;
  transition:transform .25s,box-shadow .25s;
}
.tarif:hover{transform:translateY(-4px);box-shadow:0 18px 36px -26px rgba(122,74,45,.35)}
.tarif.star{border-color:var(--terracotta);border-width:1.5px}
.tarif h3{font-size:23px}
.tarif .px{font-family:var(--font-serif);font-size:32px;color:var(--terracotta);line-height:1.1}
.tarif .px small{font-size:12px;font-family:var(--font-sans);color:var(--encre-60)}
.tarif .det{font-size:11.5px;color:var(--encre-60);flex:1;margin:6px 0 12px}
.tarif .actif{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sauge)}
.tarif-note{font-size:12px;color:var(--encre-60);margin-top:20px;max-width:640px}

/* logo et titre alignés sur la même ligne */
.phero-titre{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-bottom:12px}
.phero-titre .mot{width:48px;height:48px;flex:none;margin:0;align-self:center}
/* margin:0 !important — les h1 de hero portent des marges héritées qui décalent le centrage */
.phero-titre h1{margin:0 !important;flex:1;min-width:0}
#planning .phero-titre h1,
#actualites .phero-titre h1{color:#7E8A6E}
/* Titre et monogramme dans la teinte de fin du dégradé, assombrie.
   Le tracé du monogramme est peint via --mv, pas via color. */
#univers .phero-titre h1,
#boutique .phero-titre h1{color:#8A6A4F}
#univers .phero-titre .mot,
#boutique .phero-titre .mot{--mv:#8A6A4F;color:#8A6A4F}
#offres .phero-titre h1,
#contact .phero-titre h1{color:#A85F53}
#offres .phero-titre .mot,
#contact .phero-titre .mot{--mv:#A85F53;color:#A85F53}

@media(max-width:680px){
  .phero-titre{gap:12px}
  .phero-titre .mot{width:36px;height:36px}
}

/* vignette professeure sur une fiche pratique */
.pr-mini{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--creme);border:none;border-radius:14px;padding:11px 13px;
  margin-bottom:9px;transition:.2s;
}
.pr-mini:last-of-type{margin-bottom:0}
.pr-mini:hover{background:var(--accent-soft)}
.pr-mini-av{
  width:44px;height:44px;border-radius:50%;flex:none;color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:18px;font-weight:600;
}
.pr-mini-txt{flex:1;min-width:0}
.pr-mini-txt b{display:block;font-size:14px;font-weight:600}
.pr-mini-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60);margin-top:1px}
.pr-mini-fl{flex:none;color:var(--terracotta);font-size:15px}
.pf-transmet{
  font-style:italic;font-size:14px;line-height:1.65;color:var(--terracotta-2);
  padding-left:14px;border-left:2px solid var(--rose);
}
.pr-note{font-size:11.5px;color:var(--terracotta-2);margin-top:12px;padding-left:10px;border-left:2px solid var(--rose);line-height:1.5}

/* ---------- Fiche publique d'une professeure ---------- */
/* les deux colonnes se terminent à la même hauteur */
.pf-cols{align-items:stretch}
.pf-col{display:flex;flex-direction:column}
/* ⚠️ **Deux colonnes indépendantes ne se terminent pas ensemble.** Chaque
   `.pf-col` empile ses cartes à leur hauteur propre : la plus courte s'arrêtait
   bien au-dessus de l'autre, et le bas de la page paraissait débordé d'un côté.
   La dernière carte de chaque colonne prend la hauteur qui reste — les deux
   colonnes finissent au même niveau, sans toucher au balisage. */
.bo-duo > .pf-col{height:100%}
.pf-col > .blkbo:last-child{flex:1}
.pf-col .blk{margin-bottom:16px}
.pf-col .blk:last-child{margin-bottom:0}
.pf-fill{flex:1;display:flex;flex-direction:column}
.pf-fill .mini-line:last-of-type{border-bottom:none}
/* boutons uniformes, comme dans l'administration */
/* align-self:center — sinon le bouton s'étire sur la hauteur de la ligne */
.mini-btn.pf-btn{
  align-self:center;flex:none;min-width:92px;height:34px;padding:0 14px;
  font-size:9.5px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.pf-cta{width:100%;margin-top:auto;padding-top:11px;padding-bottom:11px}

@media(max-width:900px){
  .pf-col .blk{margin-bottom:14px}
  .pf-fill{flex:none}
}

/* ---------- Professeures ---------- */
.profs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.prof-card{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:120px 120px 18px 18px;
  padding:0 0 22px;text-align:center;overflow:hidden;transition:transform .25s,box-shadow .25s;
}
.prof-card:hover{transform:translateY(-5px);box-shadow:0 20px 38px -26px rgba(122,74,45,.35)}
.prof-photo{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative}
/* ⚠️ Un portrait dans un conteneur à `aspect-ratio` **se déforme** sans
   `object-fit` : le rapport de la photo n'est pas forcément celui du cadre — le
   fichier d'origine était en 3:4 quand la vignette est en 4:5. `cover` recadre,
   il n'étire pas. La photo garde ses coins arrondis avec sa carte, d'où
   `overflow:hidden` porté par la carte elle-même. */
/* ⚠️ La photographie d'une pratique est en 4:3, comme son gabarit — aucun
   recadrage. `object-fit:cover` reste, parce qu'une photo suivante pourrait ne
   pas l'être, et parce qu'un cadre qui étire se remarque bien plus tard qu'un
   cadre qui rogne. */
.prat-visuel img,
.prof-photo img,.page-hero-visuel img,.fond-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
.prof-initiale{font-family:var(--font-serif);font-size:56px;color:rgba(255,255,255,.9)}
/* ⚠️ L'initiale est plus grande dans le rond de la fiche que dans la vignette.
   La taille venait d'une classe utilitaire posée dans le gabarit ; en factorisant
   le portrait, elle est tombée et l'initiale a rétréci sans que rien ne le dise.
   Elle appartient au contexte, pas à l'appel. */
.page-hero-visuel .prof-initiale{font-size:64px}
.prof-card h3{font-size:23px;margin:16px 0 2px}
.prof-prats{font-size:11.5px;color:var(--terracotta-2);margin-bottom:14px;font-weight:500}
.prof-role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);font-weight:600}
.prof-card .btn{margin-top:14px}

/* ---------- Expériences ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.exp{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:20px;
  padding:26px;display:flex;flex-direction:column;gap:7px;transition:transform .25s,box-shadow .25s;
}
.exp:hover{transform:translateY(-4px);box-shadow:0 20px 38px -26px rgba(122,74,45,.35)}
.exp .quand{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}
.exp h3{font-size:27px;line-height:1.15}
.exp p{font-size:13px;color:var(--encre-60);flex:1}
.exp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.exp-px{font-family:var(--font-serif);font-size:24px;color:var(--terracotta)}

/* ---------- Overlays génériques ---------- */
.ov{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(34,34,33,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.ov[hidden]{display:none}
.sheet{
  background:var(--blanc);border-radius:24px;width:100%;max-width:920px;height:min(800px,92dvh);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 80px -30px rgba(34,34,33,.5);
}
.sheet.sm{max-width:440px;height:auto;max-height:92dvh}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 26px;border-bottom:1px solid rgba(34,34,33,.08);background:#FBF6EF;flex:none;
}
.sheet-head h3{font-size:24px}
.sheet-head .ttl{display:flex;align-items:center;gap:12px;min-width:0}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 34px}
.sheet-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 26px;border-top:1px solid rgba(34,34,33,.08);background:#FBF6EF;flex:none;
}
.x{background:none;border:none;font-size:26px;line-height:1;color:var(--encre-60);padding:0 4px}
.x:hover{color:var(--encre)}
.link-back{background:none;border:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--encre-60)}
.link-back:hover{color:var(--encre)}

/* Page plein écran (pratiques, professeures) */
.page{position:fixed;inset:0;z-index:var(--z-page);background:var(--creme);overflow-y:auto}
.page[hidden]{display:none}
.page-head{
  position:sticky;top:0;z-index:2;background:rgba(247,239,230,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(196,122,83,.2);padding:14px 0;
}
.page-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.page-hero{padding:44px 0 18px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.page-hero-visuel{
  width:180px;height:180px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  /* ⚠️ Sans `overflow:hidden`, les coins carrés d'une photo débordent du rond :
     le `border-radius` du parent ne rogne pas un enfant. Invisible tant que le
     bloc n'était qu'un dégradé. */
  overflow:hidden;
}
.page-hero-visuel svg{width:74px;height:74px}
.page-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.1}
.page-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-radius:999px;padding:6px 14px;background:var(--creme-2);color:var(--encre-60);
}
.tag.on{background:var(--accent-soft);color:var(--terracotta)}
.page-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;padding-bottom:70px}
.blk{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:18px;padding:24px;margin-bottom:16px}
.blk h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:14px;font-family:var(--font-sans)}
.blk h4{font-size:22px;margin-bottom:8px}
.blk p{font-size:13.5px;color:var(--encre-60);margin-bottom:10px}
.blk p:last-child{margin-bottom:0}
.blk ul{list-style:none;font-size:13.5px;color:var(--encre-60)}
.blk li{padding:6px 0 6px 20px;position:relative;border-bottom:1px dashed rgba(34,34,33,.08)}
.blk li:last-child{border:none}
.blk li::before{content:"\2726";position:absolute;left:0;color:var(--terracotta);font-size:10px;top:9px}
/* ⚠️ `align-items` manquait : en `flex`, la valeur par défaut est `stretch`, et
   le bouton de droite s'étirait donc sur **toute la hauteur** de la ligne. Sur
   une ligne d'un mot cela ne se voyait pas ; sur une description de trois
   lignes, « Voir » devenait une pilule de cent pixels de haut. Le défaut était
   partout où une `.mini-line` porte un texte long. */
.mini-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px dashed rgba(34,34,33,.09)}
.mini-line:last-child{border:none}
.mini-line > .mini-btn{flex:none}

/* ---------- Quiz : les trois recommandations ---------- */
/* ⚠️ **La teinte vient de la pratique**, pas d'un choix d'écran : chaque
   pratique porte sa couleur douce dans le référentiel, et c'est elle qui la
   désigne partout ailleurs — au planning, sur sa fiche. Elle passe par
   `data-sc`, la seule voie que la CSP autorise pour une valeur calculée. */
/* ⚠️ **Trois hauteurs égales**, sur la plus haute : `1fr` en `grid-auto-rows`.
   Des cartes de hauteurs différentes se lisent comme trois blocs sans rapport ;
   ici ce sont trois réponses à la même question, et le rang seul les ordonne. */
.reco{list-style:none;display:grid;grid-auto-rows:1fr;gap:12px;padding:0;margin:0}
/* ⚠️ **Sélecteurs doublés `.blk .reco-c`, et ce n'est pas cosmétique.** Ces
   cartes vivent dans un `.blk`, qui habille ses `li` en liste éditoriale :
   `.blk li` (0,1,1) et `.blk li::before` l'emportaient sur `.reco-c` (0,1,0).
   Résultat : la puce ✦ revenait, et le padding de la liste — `6px 0 6px 20px` —
   écrasait le mien, si bien que le bouton « Voir » touchait le cadre. La
   mesure le disait ; l'œil, non. */
.blk .reco-c::before{content:none}
.blk .reco-c,
.reco-c{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--blanc);border:1px solid rgba(34,34,33,.07);
  /* ⚠️ Le rebord prend la couleur **pleine** de la pratique, pas sa teinte
     douce : `#F2DBCB` sur fond crème ne se voit pas, et le Pilates semblait
     n'en avoir aucune. La pastille, elle, garde une version transparente de la
     même couleur — une seule valeur à poser, deux usages. */
  border-left:4px solid var(--sc,var(--terracotta));
  border-radius:16px;padding:16px 22px 16px 18px;position:relative;
  border-bottom:1px solid rgba(34,34,33,.07);
  box-shadow:0 12px 24px -22px rgba(34,34,33,.5);
}
.reco-n{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--sc,var(--terracotta)) 20%, transparent);
  font-family:var(--font-serif);font-size:16px;color:var(--encre);
}
/* Le texte se cale en haut : sur une carte étirée à la plus haute, un bloc
   centré flotterait au milieu du vide. */
.reco-c .reco-t{align-self:start;padding-top:2px}
.reco-t b{font-family:var(--font-serif);font-weight:400;font-size:19px;display:block;margin-bottom:3px}
.reco-t p{margin:0;font-size:13px;color:var(--encre-60);line-height:1.55}
.reco-plus{
  margin-top:12px;padding-top:12px;border-top:1px dashed rgba(34,34,33,.12);
  font-size:13px;color:var(--encre-60);
}
.reco-plus b{font-family:var(--font-serif);font-weight:400;font-size:16px;color:var(--encre)}
@media(max-width:560px){
  .reco-c{grid-template-columns:auto 1fr;gap:12px}
  .reco-c .mini-btn{grid-column:2;justify-self:start}
}
.sticky-blk{position:sticky;top:calc(96px + var(--h-mode-test))}

/* ---------- Fiche séance / réservation ---------- */
.fs-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.fs-date{
  background:var(--accent-soft);border-radius:14px;padding:12px 16px;text-align:center;flex:none;
}
.fs-date b{display:block;font-family:var(--font-serif);font-size:26px;line-height:1}
.fs-date small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-60)}
.fs-h1{font-size:30px;line-height:1.15}
.fs-meta{font-size:12.5px;color:var(--encre-60);margin-top:4px}
.opt{
  display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--creme);border:1.5px solid transparent;border-radius:14px;padding:15px 18px;margin-bottom:10px;transition:.2s;
}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt:disabled{opacity:.45;cursor:not-allowed}
.opt b{font-family:var(--font-serif);font-size:19px;font-weight:500;display:block}
.opt small{font-size:11.5px;color:var(--encre-60)}
.opt .px{font-family:var(--font-serif);font-size:20px;color:var(--terracotta);white-space:nowrap}
.notice{
  background:var(--accent-soft);border-radius:12px;padding:13px 16px;font-size:12.5px;color:var(--encre);margin-bottom:16px;
}
.notice.warn{background:#F7E1DC;color:#8E4432}
.notice.ok{background:#E9EDE2;color:#4E5A44}
.rules{font-size:11.5px;color:var(--encre-60);margin-top:16px;line-height:1.7}
.success-blk{text-align:center;padding:26px 10px}
.success-blk svg{width:76px;height:76px;margin:0 auto 16px}
.success-blk h3{font-size:31px;margin-bottom:10px}
.success-blk p{color:var(--encre-60);max-width:440px;margin:0 auto 22px;font-size:13.5px}
.field{margin-bottom:14px}
.auth-onglets{
  display:flex;gap:4px;background:var(--creme);border-radius:999px;padding:4px;margin-bottom:18px;
}
.auth-onglets button{
  flex:1;border:none;background:none;border-radius:999px;padding:9px 10px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--encre-60);transition:.2s;
}
.auth-onglets button.on{background:var(--blanc);color:var(--encre);box-shadow:0 2px 8px -4px rgba(34,34,33,.3)}
.auth-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-case{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  font-size:12px;color:var(--encre-60);line-height:1.5;cursor:pointer;
}
.auth-case span{flex:1;min-width:0}
.auth-case input{
  appearance:none;width:17px;height:17px;flex:none;margin-top:1px;
  border:1.5px solid rgba(34,34,33,.25);border-radius:5px;background:var(--blanc);transition:.2s;
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.auth-case input:checked{
  border-color:var(--terracotta);background-color:var(--terracotta);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFAF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.auth-case .lien-sobre{display:inline;font-size:12px}
.mdp-force{display:flex;align-items:center;gap:9px;margin-top:7px}
.mdp-barre{flex:1;height:4px;border-radius:999px;background:rgba(34,34,33,.1);overflow:hidden}
.mdp-barre i{display:block;height:100%;width:0;border-radius:999px;transition:width .3s, background .3s}
.mdp-txt{font-size:10.5px;color:var(--encre-60);white-space:nowrap}
@media(max-width:520px){ .auth-duo{grid-template-columns:1fr} }

.auth-oubli{display:flex;justify-content:flex-end;margin:-6px 0 16px}
.lien-sobre{
  background:none;border:none;padding:0;
  font-size:12px;color:var(--terracotta-2);
  text-decoration:underline;text-underline-offset:3px;
}
.lien-sobre:hover{color:var(--terracotta)}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:6px;color:var(--encre-60)}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid rgba(34,34,33,.16);border-radius:12px;background:var(--blanc);
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--encre);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}

/* ---------- Tiroirs (membre) ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:74;width:min(440px,94vw);background:var(--creme);
  border-left:1px solid rgba(196,122,83,.2);box-shadow:-30px 0 60px -30px rgba(34,34,33,.4);
  transform:translateX(105%);transition:transform .35s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(196,122,83,.2);flex:none}
.drawer-head h3{font-size:25px}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px 30px}
.drawer-scrim{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(34,34,33,.35)}
.drawer-scrim[hidden]{display:none}
.card{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:16px;padding:18px;margin-bottom:14px}
.card h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:12px;font-family:var(--font-sans)}
.line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;border-bottom:1px dashed rgba(34,34,33,.08)}
.line:last-child{border:none}
.line small{color:var(--encre-60);font-size:11.5px}
.empty{font-size:12.5px;color:var(--encre-60);font-style:italic}
.big-num{font-family:var(--font-serif);font-size:44px;line-height:1;color:var(--terracotta)}
.big-num small{font-size:13px;color:var(--encre-60);font-family:var(--font-sans)}
.mini-btn{border:1px solid var(--terracotta);background:none;color:var(--terracotta);border-radius:999px;padding:5px 14px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.mini-btn:hover{background:var(--terracotta);color:var(--blanc)}
.mini-btn.danger{border-color:var(--brique);color:var(--brique)}
.mini-btn.danger:hover{background:var(--brique);color:#fff}
.mini-btn:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Back-offices (admin & professeure) ---------- */
/* Le shell d'administration **est** la page depuis que /admin et /pro sont des
   applications à part. Il était à 90 du temps où il se posait par-dessus le
   site public, ce qui obligeait chaque surcouche d'édition à se relever
   au-dessus de lui — huit règles identiques, une par identifiant, qui ne
   faisaient que redire ce que porte déjà `.ov`. Elles ont disparu avec la
   raison qui les justifiait. */
.bo{position:fixed;inset:0;z-index:var(--z-app);background:var(--creme);display:flex}
.bo[hidden]{display:none}
.bo-login{margin:auto;max-width:420px;width:100%;padding:20px}
.bo-card{
  position:relative;background:var(--blanc);border:1px solid rgba(196,122,83,.22);
  border-radius:26px;padding:36px 34px 30px;text-align:center;
  box-shadow:0 40px 80px -40px rgba(122,74,45,.45);
}
.bo-close{position:absolute;top:14px;right:16px}
.bo-logo{width:52px;height:52px;margin:0 auto 14px;display:block}
.bo-titre{font-family:var(--font-serif);font-weight:400;font-size:30px;margin:10px 0 8px}
.bo-sous{font-size:13px;color:var(--encre-60);margin-bottom:22px}
.bo-choix{
  width:100%;text-align:left;background:var(--creme);border:1.5px solid transparent;
  border-radius:16px;padding:15px 18px;margin-bottom:10px;transition:.2s;
  display:flex;flex-direction:column;gap:2px;
}
.bo-choix:hover{border-color:var(--terracotta);background:var(--accent-soft)}
.bo-choix-t{font-family:var(--font-serif);font-size:21px;font-weight:500;line-height:1.15}
.bo-choix-s{font-size:11.5px;color:var(--encre-60)}
.bo-note{font-size:11.5px;color:var(--encre-60);margin-top:14px}
.bo-shell{display:contents}
.bo-shell[hidden]{display:none}
.bo-side{
  width:236px;flex:none;background:var(--creme-2);color:var(--encre);
  border-right:1px solid rgba(196,122,83,.22);display:flex;flex-direction:column;overflow-y:auto;
}
.bo-brand{display:flex;align-items:center;gap:10px;padding:22px 22px 16px}
.bo-brand svg{width:28px;height:28px;flex:none}
.bo-brand span{font-family:var(--font-serif);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bo-role{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);padding:0 22px 16px;font-weight:600}
.bo-tab{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-left:3px solid transparent;
  padding:12px 16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);transition:.2s;position:relative;
}
.bo-tab:hover{background:rgba(196,122,83,.07);color:var(--encre)}
.bo-tab.on{background:rgba(196,122,83,.13);border-left-color:var(--terracotta);color:var(--terracotta-2)}
.bt-ico{width:19px;height:19px;flex:none;display:flex;align-items:center;justify-content:center}
.bt-ico svg{width:19px;height:19px}
.bt-lbl{flex:1;min-width:0;line-height:1.3}
.bt-badge[hidden]{display:none}
.bt-badge{
  flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--terracotta);color:var(--blanc);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;letter-spacing:0;
}
.bo-tab.on .bt-badge{background:var(--terracotta-2)}

/* Bouton de repli */
.bo-side{position:relative}
.bo-replier{
  position:absolute;top:15px;right:11px;width:25px;height:25px;border-radius:8px;z-index:2;
  border:1px solid rgba(196,122,83,.3);background:var(--blanc);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;transition:.22s;
}
.bo-replier:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc)}
.bo-replier svg{width:14px;height:14px;transition:transform .3s}

/* ---- Barre repliée : icônes seules ---- */
.bo.replie .bo-side{width:66px}
.bo.replie .bo-brand span,
.bo.replie .bo-role,
.bo.replie .bt-lbl,
.bo.replie .bo-quit span{display:none}
.bo.replie .bo-brand{justify-content:center;padding:16px 0}
.bo.replie .bo-tab{justify-content:center;padding:13px 0;gap:0}
.bo.replie .bo-replier{
  position:static;margin:0 auto 12px;
}
.bo.replie .bo-replier svg{transform:rotate(180deg)}
.bo.replie .bo-quit{
  padding:10px 0;margin:0 10px 14px;
}
.bo.replie .bo-quit::after{content:"⏻";font-size:13px}
/* le badge devient une pastille sur l'icône */
.bo.replie .bt-badge{
  position:absolute;top:6px;right:11px;min-width:16px;height:16px;font-size:8.5px;
  border:2px solid var(--creme-2);
}
.bo-side{transition:width .28s cubic-bezier(.25,.8,.3,1)}
.bo-quit{
  margin:auto 16px 18px;padding:11px 14px;border-radius:999px;
  border:1px solid rgba(34,34,33,.22);background:none;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--encre-60);transition:.2s;
}
.bo-quit:hover{background:rgba(34,34,33,.06);color:var(--encre)}
#boTabs{display:flex;flex-direction:column}
/* §46 — la recherche globale, au-dessus de la section courante.
   ⚠️ **C'est `.bo-main` qui défile, et il faut que ça le reste.** Ma première
   version faisait défiler `.bo-corps` pour rendre la barre `sticky` — mais
   `/pro` emploie `.bo-main` sans ce conteneur, et son écran aurait cessé de
   défiler. La barre est simplement **en dehors** de la zone qui défile : elle
   reste visible sans avoir besoin de coller à quoi que ce soit. */
/* ⚠️ `min-height:0` et non `overflow:hidden` : le second **rognait** la liste
   de résultats, qui est en `absolute` sous la barre. Le premier suffit pour
   qu'un enfant en `overflow-y:auto` défile dans une colonne flex. */
.bo-corps{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
/* ⚠️ Et une couche nommée : sans elle, `#boMain` — plus loin dans le document —
   se peint par-dessus la liste, qui reste cliquable pour un lecteur d'écran et
   inatteignable à la souris. */
.bo-rech{position:relative;z-index:var(--z-sticky);display:flex;align-items:center;gap:10px;
  padding:14px 38px;background:var(--blanc);border-bottom:1px solid var(--creme-2)}
.bo-rech-ico{display:inline-flex;width:16px;height:16px;color:var(--encre-60);flex:none}
.bo-rech-ico svg{width:100%;height:100%}
.bo-rech input{flex:1;border:0;background:none;font:400 13.5px/1.4 var(--font-sans);
  color:var(--encre);padding:5px 0}
.bo-rech input:focus{outline:none}
.bo-rech input::placeholder{color:var(--encre-60)}
.bo-rech-res{position:absolute;top:100%;left:38px;right:38px;max-height:60vh;overflow-y:auto;
  background:var(--blanc);border:1px solid var(--creme-2);border-top:0;border-radius:0 0 4px 4px;
  box-shadow:0 12px 30px rgba(34,34,33,.10)}
.rech-fam{font:500 10px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta);padding:13px 18px 6px}
.rech-r{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:8px 18px;font:400 13px/1.35 var(--font-sans);color:var(--encre)}
.rech-r:hover,.rech-r:focus{background:var(--creme);outline:none}
.rech-r em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60);margin-top:2px}
.rech-vide{padding:16px 18px;font-size:12.5px;color:var(--encre-60)}
.rech-tronque{padding:9px 18px 14px;font-size:11px;color:var(--encre-60);border-top:1px solid var(--creme-2)}
/* Une étiquette lue par les lecteurs d'écran, invisible à l'œil. */
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bo-main{flex:1;overflow-y:auto;padding:32px 38px 60px}
/* ---------- En-tête de page ---------- */
.bo-entete{
  display:flex;align-items:center;gap:16px;
  padding:0 0 20px;margin-bottom:24px;
  border-bottom:1px solid rgba(196,122,83,.22);position:relative;
}
/* Filet d'accent qui se déploie sous le titre.

   ⚠️ **Il s'arrêtait à 74 px, et il allait deux fois trop vite.** Le site
   public déploie le sien sur toute la largeur du titre, en 2,6 s et sur une
   autre courbe : deux gestes différents pour la même idée, dans deux moitiés du
   même produit. Il n'y avait aucune raison à cet écart — seulement deux règles
   écrites à des moments différents.

   ⚠️ Il garde une `animation` là où le public a une `transition` déclenchée au
   défilement, et c'est voulu : `#boMain` est réécrit en entier à chaque
   changement de section, donc le filet se redéploie à chaque écran. Un
   observateur d'intersection n'aurait rien à observer sur un élément qui vient
   de naître. */
.bo-entete::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 30%, var(--rose) 65%,
    rgba(232,183,175,.5) 100%);
  transform:scaleX(0);transform-origin:left center;
  animation:boFilet 2.6s cubic-bezier(.16,.72,.24,1) .1s forwards;
}
@keyframes boFilet{to{transform:none}}
/* ⚠️ **Sans cela, le filet disparaît pour qui demande moins d'animation.** La
   règle globale coupe toute animation en `!important` ; le `transform:scaleX(0)`
   du départ, lui, reste — et le trait ne se déploie jamais. Le site public a
   cette compensation depuis longtemps ; le back-office ne l'avait pas. */
@media (prefers-reduced-motion: reduce){
  .bo-entete::after{transform:none}
}
.bo-ico{
  width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(145deg,var(--accent-soft),var(--peche));color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -12px rgba(122,74,45,.5);
}
.bo-ico svg{width:22px;height:22px}
.bo-txt{flex:1;min-width:0}
.bo-title{font-size:30px;line-height:1.1;margin:0;color:var(--terracotta)}
.bo-sub{font-size:12.5px;color:var(--encre-60);margin:7px 0 0;max-width:720px}
/* Titre de section avec une action à droite. Le bouton ne rétrécit pas et ne
   passe pas à la ligne : c'est le sous-titre qui cède la place, lui seul peut
   se replier sans rien perdre. */
/* L'écran de connexion de /admin. */
.bo-form{display:flex;flex-direction:column;gap:14px;margin-top:22px;text-align:left}
.bo-form .btn{width:100%;justify-content:center;margin-top:4px}
.bo-erreur{margin:0;font-size:12.5px;color:var(--brique);line-height:1.45}
.lien-discret{background:none;border:0;padding:0;font:400 12px/1.4 var(--font-sans);
  color:var(--encre-60);text-decoration:underline;cursor:pointer;align-self:center}
.lien-discret:hover{color:var(--terracotta)}
/* ⚠️ Nettement séparé du formulaire : c'est une porte de démonstration, pas une
   deuxième façon de se connecter. */
.bo-demo{margin-top:26px;padding-top:20px;border-top:1px solid var(--creme-2)}
.bo-demo p{margin:0 0 12px;font-size:12px;color:var(--encre-60)}

.bo-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* §47 — les six gestes fréquents, sous le titre du cockpit. Ils s'enroulent
   plutôt que de défiler : six boutons tiennent sur deux lignes en mobile, et
   une barre qui défile cache toujours le dernier. */
.actions-rapides{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 4px}
.act-r{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--creme-2);background:var(--blanc);color:var(--encre);
  font:500 12.5px/1 var(--font-sans);cursor:pointer;transition:border-color .16s,background .16s}
.act-r:hover{border-color:var(--terracotta);background:var(--creme)}
.act-ico{display:inline-flex;width:15px;height:15px;color:var(--terracotta)}
.act-ico svg{width:100%;height:100%}
.bo-tete>button{flex:none}
@media(max-width:680px){
  /* le sous-titre passe sur plusieurs lignes : l'icône se cale en haut */
  .bo-entete{gap:12px;padding-bottom:16px;margin-bottom:18px;align-items:flex-start}
  .bo-ico{margin-top:2px}
  .bo-ico{width:38px;height:38px;border-radius:12px}
  .bo-ico svg{width:18px;height:18px}
  .bo-title{font-size:25px}
}
/* ---------- Cockpit ---------- */
/* ⚠️ `margin-bottom` autant que `margin-top` : la rangée de KPI touchait le
   bloc suivant — les cartes de la boutique, le tableau d'occupation des
   espaces. Deux blocs qui se touchent se lisent comme un seul. */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 22px}
.kpi{
  position:relative;background:var(--blanc);border:1px solid rgba(34,34,33,.07);
  border-radius:17px;padding:17px 18px 16px;overflow:hidden;
  box-shadow:0 2px 4px -2px rgba(122,74,45,.08), 0 12px 26px -20px rgba(122,74,45,.35);
  transition:transform .25s cubic-bezier(.25,.8,.3,1), box-shadow .25s;
}
.kpi::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--terracotta),var(--rose));opacity:.5;
}
.kpi:hover{transform:translateY(-3px);box-shadow:0 4px 8px -3px rgba(122,74,45,.12), 0 22px 40px -24px rgba(122,74,45,.5)}
/* ligne 1 : icône + libellé — puis le chiffre — puis l'évolution */
.kpi-haut{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kpi-ico{
  width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.kpi-ico svg{width:16px;height:16px}
.kpi-lbl{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);line-height:1.35;
}
.kpi b{
  display:block;font-family:var(--font-serif);font-size:33px;font-weight:600;
  line-height:1;color:var(--encre);
}
.kpi-evo{
  display:inline-block;margin-top:10px;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.kpi-evo.hausse{background:#E9EDE2;color:#5F7150}
.kpi-evo.baisse{background:#F7E1DC;color:#B0604C}
.kpi-evo.stable{background:var(--creme);color:var(--encre-60)}
.kpi-barre{display:block;height:4px;border-radius:999px;background:rgba(34,34,33,.08);margin-top:11px;overflow:hidden}
.kpi-barre i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--rose))}
/* carte mise en avant */
.kpi.fort{background:linear-gradient(150deg,var(--accent-soft),var(--peche))}
.kpi.fort::before{opacity:1}
.kpi.fort .kpi-ico{background:var(--blanc)}
.kpi.attention::before{background:linear-gradient(90deg,#C0705F,var(--rose))}
.kpi.attention .kpi-ico{background:#F7E1DC;color:#B0604C}

/* la variable de progression doit être typée pour pouvoir s'animer */
@property --p{syntax:'<number>';inherits:false;initial-value:0}

/* ---------- Statistiques : graphiques ---------- */
.kpi-sous{display:block;font-size:10.5px;color:var(--encre-60);margin-top:8px}

/* barres horizontales */
.grf{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.grf-l{display:flex;align-items:center;gap:12px}
.grf-nom{width:118px;flex:none;font-size:12.5px;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grf-piste{flex:1;height:9px;border-radius:999px;background:rgba(34,34,33,.06);overflow:hidden}
.grf-piste i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--terracotta),var(--rose));
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.2,.8,.3,1);
}
.anime .grf-piste i{transform:none}
.grf-piste i.alerte{background:linear-gradient(90deg,#C0705F,var(--rose))}
@keyframes grfIn{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
.grf-val{width:72px;flex:none;text-align:right;font-size:12.5px;font-weight:600;color:var(--terracotta-2)}

/* colonnes verticales */
.col-graf{display:flex;align-items:flex-end;gap:10px;height:190px;margin-top:8px}
.cg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.cg-val{font-size:11.5px;font-weight:600;color:var(--terracotta-2)}
.cg-barre{
  width:100%;max-width:54px;border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,var(--rose),var(--terracotta));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .9s cubic-bezier(.2,.8,.3,1);
}
.anime .cg-barre{transform:none}
.cg-val{opacity:0;transition:opacity .5s ease .35s}
.anime .cg-val{opacity:1}
@keyframes cgIn{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}}
.cg-jour{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}

/* jauge dans les tableaux */
.mini-jauge{display:inline-block;width:74px;height:6px;border-radius:999px;background:rgba(34,34,33,.08);overflow:hidden;vertical-align:middle;margin-right:8px}
.mini-jauge i{
  display:block;height:100%;border-radius:999px;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.anime .mini-jauge i{transform:none}
.mini-jauge i.ok{background:#8B9A80}
.mini-jauge i.moy{background:var(--terracotta)}
.mini-jauge i.bas{background:#C0705F}
.tbl em{font-style:normal;font-size:11.5px;color:var(--encre-60)}

/* tuiles de statistiques */
.stat-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.st{background:var(--creme);border-radius:13px;padding:13px 14px}
.st b{display:block;font-family:var(--font-serif);font-size:25px;font-weight:600;line-height:1}
.st span{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-60);margin-top:5px}

/* anneaux de progression */
.anneaux{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.an{flex:1;min-width:88px;text-align:center}
.an-c{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;margin:0 auto 9px;
  --p:0;                                    /* départ à zéro, l'anneau se remplit */
  background:conic-gradient(var(--terracotta) calc(var(--p)*1%), rgba(196,122,83,.14) 0);
  transition:--p 1.1s cubic-bezier(.2,.8,.3,1);
}
/* disque central : l'anneau devient creux */
.an-c::before{
  content:"";position:absolute;inset:9px;border-radius:50%;background:var(--blanc);
}
.an-c b{
  position:relative;z-index:1;font-family:var(--font-serif);
  font-size:17px;font-weight:600;line-height:1;white-space:nowrap;
}
.an-lbl{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-60);line-height:1.4}

@media (prefers-reduced-motion: reduce){
  .grf-piste i,.cg-barre,.mini-jauge i{transform:none!important;transition:none}
  .cg-val{opacity:1;transition:none}
  .an-c{transition:none}
}
.bo-note-fin{font-size:11.5px;color:var(--encre-60);font-style:italic;margin-top:18px}
@media(max-width:680px){
  .grf-nom{width:88px;font-size:11.5px}
  .grf-val{width:60px;font-size:11.5px}
  .col-graf{height:150px;gap:5px}
  .cg-jour{font-size:8.5px}
}

/* ---------- Professeures ---------- */
.pr-head{display:flex;align-items:center;gap:14px;margin:20px 0 14px;font-size:12.5px;color:var(--encre-60)}
.pr-head .btn-sm{margin-left:auto}
.pr-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pr-c{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:18px;padding:16px 17px;
  display:flex;flex-direction:column;transition:.22s;
}
.pr-c:hover{box-shadow:0 18px 34px -26px rgba(122,74,45,.45)}
.pr-c.off{opacity:.62}
.pr-tete{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.pr-av{
  width:42px;height:42px;border-radius:50%;flex:none;color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:16px;font-weight:600;
}
.pr-id{flex:1;min-width:0}
.pr-id b{display:block;font-size:14.5px;font-weight:600}
.pr-id span{display:block;font-size:11px;color:var(--encre-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-badge{
  flex:none;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:4px 9px;background:rgba(34,34,33,.07);color:var(--encre-60);
}
.pr-badge.on{background:#E9EDE2;color:#5F7150}
.pr-prat{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.pr-prat span{font-size:9.5px;background:var(--creme);border-radius:999px;padding:4px 10px;color:var(--encre-60)}
.pr-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:11px 0;border-block:1px dashed rgba(196,122,83,.22)}
.pr-chiffres span{display:flex;flex-direction:column;gap:1px}
.pr-chiffres em{font-style:normal;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.pr-chiffres b{font-family:var(--font-serif);font-size:19px;font-weight:600}
.pr-jours{font-size:11.5px;color:var(--encre-60);margin-top:11px;flex:1}
/* Interrupteurs d'état — volontairement différents des boutons d'action */
/* Les deux interrupteurs tiennent sur une ligne : ils disent la même chose —
   ce que la fiche laisse voir — et l'un sous l'autre étirait la carte sans
   rien ajouter. Ils se replient si la place manque. */
.pr-modes{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding:11px 0;border-top:1px dashed rgba(196,122,83,.22)}
.pr-sw{
  display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;
  font-size:11.5px;color:var(--encre-60);text-align:left;transition:color .2s;
}
.pr-sw:hover{color:var(--encre)}
.pr-swi{
  width:32px;height:18px;border-radius:999px;flex:none;position:relative;
  background:rgba(34,34,33,.16);transition:background .25s;
}
.pr-swi::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--blanc);transition:transform .25s;box-shadow:0 1px 3px rgba(34,34,33,.3);
}
.pr-sw.on .pr-swi{background:var(--terracotta)}
.pr-sw.on .pr-swi::after{transform:translateX(14px)}
.pr-sw.on .pr-swt{color:var(--encre);font-weight:600}
.pr-swt{flex:1;min-width:0}

/* Boutons d'action — même gabarit tous les deux */
.pr-act{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center}
.pr-ordre{display:flex;gap:4px}
.pr-act .mini-btn{
  width:100%;padding:9px 10px;font-size:9.5px;line-height:1.2;
  display:flex;align-items:center;justify-content:center;min-height:34px;
}

.pr-prats{display:flex;flex-direction:column;gap:2px}
#prBody textarea{
  width:100%;box-sizing:border-box;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.14);border-radius:12px;
  padding:11px 13px;font-family:inherit;font-size:13.5px;color:var(--encre);resize:vertical;
}
#prBody textarea:focus{outline:none;border-color:var(--terracotta)}

@media(max-width:680px){
  .pr-grille{grid-template-columns:1fr}
  .pr-head{flex-wrap:wrap}
  .pr-head .btn-sm{margin-left:0;width:100%}
}

/* ---------- Éditeur d'article ---------- */
/* ⚠️ `#ovArticle` était groupé ici : la **surcouche** recevait le style de la
   **feuille**, `display:flex` compris — donc `.ov[hidden]{display:none}`, moins
   spécifique qu'un identifiant, ne la masquait plus. Elle restait ouverte en
   permanence, invisible seulement parce que le shell d'administration passait
   par-dessus. Elle porte `.ov` comme les autres, et sa feuille est à
   l'intérieur. */
.art-sheet{
  background:var(--blanc);border-radius:24px;width:min(1040px,100%);
  max-height:min(94dvh,900px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 44px 90px -44px rgba(122,74,45,.6);
}
.ar-body{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:22px;
  padding:20px 26px;overflow-y:auto;overscroll-behavior:contain;
}
.ar-col-principale,.ar-col-cote{display:flex;flex-direction:column;gap:14px;min-width:0}
.ar-col-principale .field{margin:0}
.ar-col-principale input,.ar-col-principale textarea{
  width:100%;box-sizing:border-box;background:var(--creme);
  border:1.5px solid rgba(34,34,33,.12);border-radius:12px;
  padding:11px 14px;font-family:inherit;font-size:14px;color:var(--encre);resize:vertical;
}
.ar-col-principale input:focus,.ar-col-principale textarea:focus{outline:none;border-color:var(--terracotta);background:var(--blanc)}
#arT{font-family:var(--font-serif);font-size:22px !important}

/* barre de mise en forme */
.ar-barre{
  display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  background:var(--creme);border:1.5px solid rgba(34,34,33,.12);border-bottom:none;
  border-radius:12px 12px 0 0;padding:7px 9px;
}
.ar-barre button{
  width:32px;height:30px;border:none;background:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--encre-60);transition:.16s;
}
.ar-barre button:hover{background:var(--blanc);color:var(--terracotta-2)}
.ar-barre button svg{width:16px;height:16px}
.ar-sep{width:1px;height:18px;background:rgba(34,34,33,.14);margin:0 4px}

.ar-zone{
  min-height:260px;max-height:420px;overflow-y:auto;
  background:var(--blanc);border:1.5px solid rgba(34,34,33,.12);border-radius:0 0 12px 12px;
  padding:16px 18px;font-size:14.5px;line-height:1.7;color:var(--encre);
}
.ar-zone:focus{outline:none;border-color:var(--terracotta)}
.ar-zone p{margin:0 0 12px}
.ar-zone h3{font-family:var(--font-serif);font-size:21px;font-weight:500;margin:18px 0 8px}
.ar-zone ul,.ar-zone ol{margin:0 0 12px;padding-left:22px}
.ar-zone li{margin-bottom:5px}
.ar-zone a{color:var(--terracotta-2);text-decoration:underline}
.ar-img{
  display:flex;align-items:center;justify-content:center;margin:14px 0;
  aspect-ratio:16/9;background:var(--creme);border:1.5px dashed rgba(196,122,83,.4);border-radius:12px;
}
.ar-img span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}

.ar-cover{
  aspect-ratio:16/9;background:var(--creme);border:1.5px dashed rgba(196,122,83,.4);
  border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.ar-cover span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}

/* liste des articles côté administration */
.art-admin{display:flex;flex-direction:column;gap:12px}
.arta{
  display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:16px;
  padding:13px 15px;transition:.22s;
}
.arta:hover{box-shadow:0 16px 30px -24px rgba(122,74,45,.45)}
.arta.st-brouillon{opacity:.72;border-style:dashed}
.arta-vis{
  position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.arta-vis svg{width:26px;height:26px;opacity:.6}
.arta-une{
  position:absolute;top:5px;left:5px;background:var(--terracotta);color:var(--blanc);
  font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:2px 7px;
}
.arta-txt{min-width:0}
.arta-tete{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.arta-cat{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terracotta)}
.arta-txt h4{font-family:var(--font-serif);font-size:19px;font-weight:500;line-height:1.2;margin-bottom:3px}
.arta-txt p{font-size:12px;color:var(--encre-60);line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.arta-meta{display:block;font-size:10.5px;color:var(--encre-60);margin-top:5px}
.arta-act{display:flex;flex-direction:column;gap:7px;flex:none}
.arta-act .mini-btn{min-width:110px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px}

@media(max-width:900px){
  .ar-body{grid-template-columns:1fr;gap:16px}
}
@media(max-width:680px){
  #ovArticle,
  #ovPratique{align-items:flex-end;padding:0}
  .art-sheet{width:100%;max-height:95dvh;border-radius:22px 22px 0 0}
  .ar-body{padding:16px 20px}
  .arta{grid-template-columns:86px minmax(0,1fr);gap:12px}
  .arta-act{grid-column:span 2;flex-direction:row}
  .arta-act .mini-btn{flex:1;min-width:0}
}

/* codes promotionnels */
.ex-cartes{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.ex-carte{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--encre-60)}
.ex-carte input[type="number"]{
  width:56px;box-sizing:border-box;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.14);border-radius:9px;padding:7px 9px;
  font-family:inherit;font-size:12.5px;text-align:center;
}
.ex-carte .fs-unite{width:78px}
.ex-carte .fs-unite input{width:100%;text-align:left;padding-right:22px}
/* Carré : 28 × 30 avec un rayon complet donne un cercle légèrement ovale. */
.ex-carte .mini-btn{width:28px;min-width:0;padding:0;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none}
@media(max-width:680px){
  #ovExp{align-items:flex-end;padding:0}
  #ovExp .art-sheet{width:100%;max-height:95dvh;border-radius:22px 22px 0 0}
}

.exp-tarif{
  font-family:var(--font-serif);font-size:17px;font-weight:600;
  color:var(--terracotta);margin-left:6px;
}
.promo-code{
  font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.06em;
  background:var(--creme);border-radius:6px;padding:2px 8px;display:inline-block;
}
.promo-note{display:block;font-size:10.5px;color:var(--encre-60);margin-top:3px;font-style:italic}
@media(max-width:680px){
  #ovPromo{align-items:flex-end;padding:0}
  #ovPromo .fs-sheet{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}
}

/* demandes reçues */
.msg-liste{list-style:none;margin:0;padding:0}
.msg-liste li{
  display:flex;gap:13px;padding:14px 0;align-items:flex-start;
  border-bottom:1px dashed rgba(196,122,83,.2);
}
.msg-liste li:last-child{border-bottom:none}
.msg-liste li.st-traité{opacity:.6}
.msg-av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--peche),var(--rose));color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:15px;font-weight:600;
}
.msg-liste li.st-nouveau .msg-av{background:linear-gradient(140deg,var(--terracotta),var(--rose))}
.msg-txt{flex:1;min-width:0}
.msg-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.msg-tete b{font-size:13.5px;font-weight:600}
.msg-motif{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--creme);color:var(--terracotta-2);border-radius:999px;padding:3px 9px;
}
.msg-date{font-size:10.5px;color:var(--encre-60);margin-left:auto}
.msg-txt p{font-size:12.5px;color:var(--encre-60);line-height:1.55}
.msg-mail{display:inline-block;font-size:11px;color:var(--terracotta-2);margin-top:5px;text-decoration:underline}
.msg-act{display:flex;flex-direction:column;gap:7px;flex:none;width:140px}
.msg-act .inp{width:100%;box-sizing:border-box}
.msg-act .mini-btn{min-height:32px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:680px){
  .msg-liste li{flex-wrap:wrap}
  .msg-act{width:100%;flex-direction:row}
  .msg-act .inp,.msg-act .mini-btn{flex:1}
}

/* ---------- FAQ (administration) ---------- */
.fq-cat{margin-bottom:22px}
.fq-cat:last-child{margin-bottom:0}
.fq-cat-tete{
  display:flex;align-items:center;gap:12px;padding-bottom:9px;margin-bottom:6px;
  border-bottom:1px solid rgba(196,122,83,.25);
}
.fq-cat-tete h4{
  font-family:var(--font-serif);font-size:19px;font-weight:500;flex:1;min-width:0;
}
.fq-nb{font-size:10.5px;color:var(--encre-60);flex:none}
/* ⚠️ **`>` : cette règle vise « Renommer », pas les flèches.** Elle les
   attrapait aussi — et son `min-height` l'emporte toujours sur la `height` de
   `.fq-ordre .mini-btn`, quelle que soit la spécificité. Les flèches faisaient
   26 × 30 au lieu d'être rondes. Troisième occurrence du même piège dans ce
   fichier : un sélecteur écrit pour un bouton en attrape un autre, imbriqué. */
.fq-cat-tete > .mini-btn{flex:none;min-height:30px;padding:0 12px;display:inline-flex;align-items:center}
.fq-ordre{display:flex;flex-direction:column;gap:3px;flex:none}

.fq-liste{list-style:none;margin:0;padding:0}
.fq-liste li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px dashed rgba(196,122,83,.18);
}
.fq-liste li:last-child{border-bottom:none}
.fq-liste li.off{opacity:.5}
.fq-txt{min-width:0}
.fq-txt b{display:block;font-size:13px;font-weight:600}
.fq-txt em{display:block;font-style:normal;font-size:11px;color:var(--encre-60);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-att{
  display:inline-block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:#F7E1DC;color:#B0604C;border-radius:999px;padding:2px 7px;margin-left:5px;vertical-align:middle;
}
/* Même piège ici, et corrigé avant qu'il ne se voie : `.fq-ordre` a lui aussi
   une flèche en dernier enfant. */
.fq-liste li > .mini-btn:last-child{flex:none;min-height:30px;padding:0 13px;display:inline-flex;align-items:center}
.fs-aide code{
  background:var(--creme);border-radius:5px;padding:1px 5px;font-size:11px;
  font-family:ui-monospace,monospace;color:var(--terracotta-2);
}
#ovFaq textarea{
  width:100%;box-sizing:border-box;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.14);border-radius:12px;
  padding:11px 13px;font-family:inherit;font-size:13.5px;line-height:1.6;resize:vertical;
}
#ovFaq textarea:focus{outline:none;border-color:var(--terracotta)}

@media(max-width:680px){
  #ovFaq{align-items:flex-end;padding:0}
  #ovFaq .fs-sheet{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}
  .fq-liste li{grid-template-columns:auto minmax(0,1fr) auto}
  .fq-liste li > .mini-btn:last-child{grid-column:1/-1;width:100%;justify-content:center;margin-top:5px}
}

/* ---------- Pratiques (administration) ---------- */
.pq-liste{list-style:none;margin:0;padding:0}
/* grille explicite : sans quoi les colonnes se compriment les unes les autres */
.pq-liste li{
  display:flex;align-items:center;gap:14px;padding:12px 0;width:100%;box-sizing:border-box;
  border-bottom:1px dashed rgba(196,122,83,.2);
}
/* .pr-sw est un bouton pleine largeur ailleurs : on le contraint ici */
.pq-liste li > .pq-ordre,
.pq-liste li > .pq-vis,
.pq-liste li > .mini-btn{flex:none}
.pq-liste li > .pr-sw{flex:none;width:32px;min-width:32px;padding:0}
.pq-liste li:last-child{border-bottom:none}
.pq-liste li.off{opacity:.5}
.pq-ordre{display:flex;flex-direction:column;gap:4px;flex:none}

.pq-vis{width:46px;height:46px;border-radius:12px;flex:none}
.pq-txt{flex:1 1 auto;min-width:0;width:100%}
.pq-txt b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-meta{display:block;font-size:10.5px;color:var(--encre-60);margin-top:3px}
.pq-liste .pr-sw{flex:none}
/* ⚠️ **`> ` et non un descendant quelconque.** Cette règle vise le bouton
   « Modifier » en fin de ligne — mais `:last-child` attrapait aussi la flèche ↓,
   dernière de son propre conteneur `.pq-ordre`. Plus spécifique que
   `.pq-ordre .mini-btn`, elle l'emportait : la flèche du bas prenait 30 × 32
   quand celle du haut faisait 26 × 26. Deux boutons du même couple, de deux
   tailles — et aucun des deux rond. */
.pq-liste li > .mini-btn:last-child{flex:none;min-height:32px;padding:0 14px;display:inline-flex;align-items:center}
.pq-profs{display:flex;flex-direction:column;gap:2px}

@media(max-width:680px){
  .pq-liste li{flex-wrap:wrap;gap:10px}
  .pq-vis{width:40px;height:40px}
  .pq-liste li > .mini-btn:last-child{flex:1 1 100%;justify-content:center;margin-top:4px}
}

/* ---------- Documents & demandes ---------- */
.mp-docs{list-style:none;margin:0;padding:0}
.mp-docs li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed rgba(196,122,83,.2)}
.mp-docs li:last-child{border-bottom:none}
.mpd-ico{
  width:32px;height:32px;border-radius:9px;flex:none;background:var(--creme);color:var(--encre-60);
  display:flex;align-items:center;justify-content:center;
}
.mpd-ico svg{width:16px;height:16px}
.mp-docs li.bientot .mpd-ico{background:var(--accent-soft);color:var(--terracotta-2)}
.mp-docs li.expire .mpd-ico{background:#F7E1DC;color:#B0604C}
.mpd-txt{flex:1;min-width:0}
.mpd-txt b{display:block;font-size:12.5px;font-weight:600}
.mpd-txt em{display:block;font-style:normal;font-size:11px;color:var(--encre-60);margin-top:1px}
.mpd-jours{
  flex:none;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  border-radius:999px;padding:3px 9px;background:var(--creme);color:var(--encre-60);
}
.mpd-jours.attention{background:var(--accent-soft);color:var(--terracotta-2)}
.mpd-jours.urgent{background:#F7E1DC;color:#B0604C}
.mp-docs .mini-btn{flex:none;min-height:30px;padding:0 12px;font-size:9.5px;display:inline-flex;align-items:center}
.mp-ajout{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(196,122,83,.22)}
.mp-ajout .mini-btn{width:100%;min-height:34px;display:inline-flex;align-items:center;justify-content:center}
.mp-verrou{
  display:flex;align-items:center;gap:11px;background:var(--creme);border-radius:13px;
  padding:12px 14px;margin-top:14px;
}
.mpv-ico{font-size:14px;flex:none;opacity:.6}
.mp-verrou div{flex:1;min-width:0}
.mp-verrou b{display:block;font-size:12.5px;font-weight:600}
.mp-verrou em{display:block;font-style:normal;font-size:11px;color:var(--encre-60);margin-top:1px}
.mp-verrou .mini-btn{flex:none;min-height:30px;padding:0 12px;display:inline-flex;align-items:center}
.mp-dem{list-style:none;margin:12px 0 0;padding:0}
.mp-dem li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px dashed rgba(196,122,83,.2)}
.mp-dem b{display:block;font-size:12.5px;font-weight:600}
.mp-dem em{display:block;font-style:normal;font-size:11px;color:var(--encre-60);margin-top:1px}

/* factures côté administration */
.fa-barre{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--accent-soft);border-radius:13px;padding:11px 15px;margin-bottom:14px;
}
.fa-barre b{font-size:12.5px;color:var(--terracotta-2);flex:1;min-width:0}
.fa-barre .mini-btn{flex:none;min-height:32px;padding:0 13px;display:inline-flex;align-items:center}
.fa-case{
  width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(34,34,33,.25);
  background:var(--blanc);transition:.18s;display:block;
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.fa-case.on{
  border-color:var(--terracotta);background-color:var(--terracotta);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFAF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.fa-actions{display:flex;gap:6px;justify-content:flex-end}
.fa-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(196,122,83,.25);
}
.fa-total span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--encre-60)}
.fa-total b{font-family:var(--font-serif);font-size:23px;font-weight:600;color:var(--terracotta)}

/* demandes */
.dm-liste{list-style:none;margin:0;padding:0}
.dm-liste li{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px dashed rgba(196,122,83,.2)}
.dm-liste li:last-child{border-bottom:none}
.dm-av{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--peche),var(--rose));color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:16px;font-weight:600;
}
.dm-txt{flex:1;min-width:0}
.dm-txt b{display:block;font-size:13.5px;font-weight:600}
.dm-txt em{display:block;font-style:normal;font-size:12px;color:var(--encre-60);margin-top:1px}
.dm-date{display:block;font-size:10.5px;color:var(--encre-60);margin-top:3px}
.dm-act{display:flex;gap:7px;flex:none}
.dm-act .mini-btn{min-height:32px;padding:0 14px;display:inline-flex;align-items:center}

@media(max-width:680px){
  .dm-liste li{flex-wrap:wrap}
  .dm-act{width:100%}
  .dm-act .mini-btn{flex:1}
  .fa-barre b{flex:1 1 100%}
}

/* ---------- Espace partenaire ---------- */
/* Prochaine séance, en tête du tableau de bord */
.pa-prochaine{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;
  background:linear-gradient(135deg,var(--accent-soft),var(--creme));
  border:1px solid rgba(196,122,83,.28);border-radius:20px;padding:20px 24px;margin-bottom:18px;
}
.pp-quand{text-align:center;flex:none;padding-right:22px;border-right:1px dashed rgba(196,122,83,.35)}
.pp-jour{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terracotta)}
.pp-quand b{display:block;font-family:var(--font-serif);font-size:38px;font-weight:600;line-height:1.05;color:var(--terracotta-2)}
.pp-duree{display:block;font-size:10.5px;color:var(--encre-60)}
.pp-quoi{min-width:0}
.pp-eyebrow{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--terracotta);margin-bottom:3px}
.pp-quoi h3{font-family:var(--font-serif);font-size:26px;font-weight:500;line-height:1.1}
.pp-quoi p{font-size:12.5px;color:var(--encre-60);margin-top:2px}
.pp-jauge{display:flex;align-items:center;gap:11px;margin-top:11px}
.pp-jauge span{flex:1;max-width:200px;height:6px;border-radius:999px;background:rgba(34,34,33,.1);overflow:hidden}
.pp-jauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--rose))}
.pp-jauge em{font-style:normal;font-size:11.5px;color:var(--encre-60)}
.pp-jauge em b{color:var(--encre)}
.pp-act{display:flex;flex-direction:column;gap:8px;flex:none}
.pp-act .btn-sm,.pp-act .mini-btn{white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;justify-content:center}

.pp-alertes{list-style:none;margin:0;padding:0}
.pp-alertes li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(196,122,83,.2)}
.pp-alertes li:last-child{border-bottom:none}
.ppa-ico{
  width:26px;height:26px;border-radius:50%;flex:none;background:var(--creme);color:var(--encre-60);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.ppa-ico.attention{background:var(--accent-soft);color:var(--terracotta-2)}
.ppa-ico.urgent{background:#F7E1DC;color:#B0604C}
.pp-alertes li > div{flex:1;min-width:0}
.pp-alertes li b{display:block;font-size:13px;font-weight:600}
.pp-alertes li em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60)}
.pp-alertes .mini-btn{flex:none;min-height:32px;padding:0 13px;display:inline-flex;align-items:center}

/* Appel : quatre états, boutons larges */
.pa-compteurs .warn{background:var(--accent-soft)}
.pa-compteurs .warn b{color:var(--terracotta-2)}
.pa-etats{display:flex;gap:6px;flex:none}
.pae{
  border:1.5px solid rgba(34,34,33,.14);background:var(--blanc);border-radius:999px;
  padding:9px 15px;font-size:11px;font-weight:600;color:var(--encre-60);
  transition:.18s;white-space:nowrap;min-height:38px;
}
.pae:hover{border-color:var(--terracotta)}
.pae.ok.on{background:#5F7150;border-color:#5F7150;color:var(--blanc)}
.pae.off.on{background:#B0604C;border-color:#B0604C;color:var(--blanc)}
.pae.warn.on{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc)}
/* Un ton par état de présence (REFERENCE-ADMIN.md §11). Ils étaient trois et
   sont cinq : `.e-justifiee` a survécu au changement, et les deux nouveaux
   états n'avaient aucune règle. */
.pa-liste li.e-presente{background:#F3F6EE}
.pa-liste li.e-annulDelai{background:#F4F1EA;opacity:.8}
.pa-liste li.e-annulTardive{background:#FBF3EC}
.pa-liste li.e-noshow{background:#FCF4F1}
.pa-liste li.e-absente{background:#FCF4F1;opacity:.75}
.pa-liste.fige .pae{opacity:.75;cursor:default}
.pa-neuf.sr{background:#E9EDE2;color:#5F7150}
.pa-ok{position:absolute;top:6px;right:8px;font-style:normal;font-size:11px;color:#5F7150;font-weight:700}
.pa-jour{position:relative}
.pa-valide{
  display:flex;align-items:center;gap:12px;background:#E9EDE2;border-radius:13px;
  padding:12px 15px;margin-bottom:14px;
}
.pa-valide > span{
  width:26px;height:26px;border-radius:50%;background:#5F7150;color:var(--blanc);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.pa-valide div{flex:1;min-width:0}
.pa-valide b{display:block;font-size:13px;color:#4A5A3E}
.pa-valide em{display:block;font-style:normal;font-size:11.5px;color:#5F7150}
.pa-ajout{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(196,122,83,.22)}
.pa-ajout .mini-btn{width:100%;min-height:34px;display:inline-flex;align-items:center;justify-content:center}
.pa-pied .btn-sm[disabled]{opacity:.4;cursor:default}

/* Factures */
.fa-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.fa-form .field{margin:0}
.fa-form .inp,.fa-form select{width:100%;box-sizing:border-box;text-align:left}
.fa-form .fs-unite .inp{padding-right:30px}
.fa-depot{
  border:1.5px dashed rgba(196,122,83,.45);border-radius:14px;background:var(--creme);
  padding:26px 20px;text-align:center;transition:.2s;cursor:pointer;
}
.fa-depot:hover{background:var(--accent-soft);border-color:var(--terracotta)}
.fa-depot svg{width:26px;height:26px;color:var(--terracotta);margin-bottom:8px}
.fa-depot b{display:block;font-size:13px;font-weight:600}
.fa-depot em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60);margin-top:2px}

.fa-liste{display:flex;flex-direction:column;gap:13px}
.fa-c{background:var(--creme);border:1px solid rgba(34,34,33,.07);border-radius:16px;padding:15px 17px}
.fa-c.payee{background:#F3F6EE;border-color:rgba(139,154,128,.3)}
.fa-tete{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.fa-tete > div{flex:1;min-width:0}
.fa-tete b{display:block;font-size:14px;font-weight:600}
.fa-tete span{display:block;font-size:11px;color:var(--encre-60);margin-top:1px}
.fa-montant{font-family:var(--font-serif);font-size:24px;font-weight:600;color:var(--terracotta);flex:none}

.fa-suivi{display:flex;gap:4px;margin-bottom:13px}
.fa-et{flex:1;min-width:0;text-align:center}
.fa-et i{display:block;height:4px;border-radius:999px;background:rgba(34,34,33,.12);margin-bottom:5px}
.fa-et em{font-style:normal;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--encre-60);line-height:1.3}
.fa-et.on i{background:linear-gradient(90deg,var(--terracotta),var(--rose))}
.fa-et.on em{color:var(--terracotta-2)}
.fa-act{display:flex;align-items:center;gap:12px;padding-top:11px;border-top:1px dashed rgba(196,122,83,.22)}
.fa-fichier{flex:1;min-width:0;font-size:11px;color:var(--encre-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-act .mini-btn{flex:none;min-height:32px;padding:0 14px;display:inline-flex;align-items:center}

@media(max-width:900px){
  .pa-prochaine{grid-template-columns:1fr;gap:16px}
  .pp-quand{display:flex;align-items:baseline;gap:10px;text-align:left;padding:0 0 14px;border-right:none;border-bottom:1px dashed rgba(196,122,83,.35)}
  .pp-quand b{font-size:30px}
  .pp-act{flex-direction:row}
  .pp-act .btn-sm,.pp-act .mini-btn{flex:1}
}
@media(max-width:680px){
  .pa-liste li{flex-wrap:wrap}
  .pa-etats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .pae{min-height:44px;font-size:11.5px;padding:10px 8px}
  .pae.warn{grid-column:span 2}
  .fa-suivi{flex-wrap:wrap;gap:7px}
  .fa-et{flex:1 1 44%}
}

/* ---------- Profil professeure ---------- */
.mp-apercu{background:var(--creme);border-radius:14px;padding:18px;text-align:center}
.mp-av{
  width:62px;height:62px;border-radius:50%;color:var(--blanc);margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:26px;font-weight:600;
}
.mp-apercu > b{display:block;font-family:var(--font-serif);font-size:22px;font-weight:500}
.mp-apercu > em{display:block;font-style:normal;font-size:12px;color:var(--encre-60);margin-top:2px}
.mp-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:11px 0}
.mp-tags span{font-size:9.5px;background:var(--blanc);border-radius:999px;padding:4px 10px;color:var(--encre-60)}
.mp-apercu p{font-size:12px;line-height:1.6;color:var(--encre-60);text-align:left;margin-top:10px}
.mp-apercu ul{list-style:none;margin:11px 0 0;padding:0;text-align:left}
.mp-apercu li{font-size:11px;color:var(--encre-60);padding:3px 0 3px 14px;position:relative}
.mp-apercu li::before{content:"✦";position:absolute;left:0;color:var(--terracotta);font-size:8px;top:5px}


/* ---------- Feuille de présence ---------- */
.pa-choix{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin:20px 0 16px;scrollbar-width:none}
.pa-choix::-webkit-scrollbar{display:none}
.pa-jour{
  flex:none;min-width:132px;text-align:left;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.12);border-radius:14px;padding:10px 13px;transition:.2s;
}
.pa-jour:hover{border-color:var(--terracotta)}
.pa-jour.on{background:var(--accent-soft);border-color:var(--terracotta)}
.pa-jour.passe{opacity:.55}
.pa-jour small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.pa-jour b{display:block;font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--terracotta-2);line-height:1.1}
.pa-jour span{display:block;font-size:11px;color:var(--encre-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pa-tete{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.pa-tete > div:first-child{flex:1;min-width:200px}
.pa-tete h3{margin-bottom:3px}
.pa-compteurs{display:flex;gap:10px;flex:none}
.pa-compteurs span{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:var(--creme);border-radius:12px;padding:9px 15px;min-width:66px;
}
.pa-compteurs b{font-family:var(--font-serif);font-size:22px;font-weight:600;line-height:1}
.pa-compteurs em{font-style:normal;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.pa-compteurs .ok{background:#E9EDE2}
.pa-compteurs .ok b{color:#5F7150}
.pa-compteurs .off{background:#F7E1DC}
.pa-compteurs .off b{color:#B0604C}

.pa-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pa-aide{font-size:11.5px;color:var(--encre-60)}

.pa-liste{list-style:none;margin:0;padding:0}
.pa-liste li{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;
  border-bottom:1px dashed rgba(196,122,83,.2);transition:.2s;
}
.pa-liste li:last-child{border-bottom:none}
.pa-liste li.absente{background:#FCF4F1;opacity:.72}
.pa-av{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--peche),var(--rose));color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:14px;font-weight:600;
}
.pa-id{flex:1;min-width:0}
.pa-id b{display:block;font-size:13.5px;font-weight:600}
.pa-id > span{display:block;font-size:11px;color:var(--encre-60);margin-top:1px}
/* display:inline-block — sinon la pastille hérite du bloc et s'étire */
.pa-neuf{
  display:inline-block !important;font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--accent-soft);color:var(--terracotta-2);border-radius:999px;padding:2px 7px;
  vertical-align:middle;margin-left:4px;
}
.pa-note{
  display:block;font-style:italic;font-size:11px;color:var(--terracotta-2);
  margin-top:3px;padding-left:8px;border-left:2px solid var(--rose);
}
.pa-pied{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(196,122,83,.22);
}
.pa-pied span{font-size:11.5px;color:var(--encre-60);margin-left:auto}
.pa-pied .mini-btn{min-height:34px;padding:0 16px;display:inline-flex;align-items:center}

@media(max-width:680px){
  .pa-tete{gap:12px}
  .pa-compteurs{width:100%}
  .pa-compteurs span{flex:1;min-width:0}
  .pa-liste li{flex-wrap:wrap;gap:10px}
}

.gift-dest{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(122,74,45,.28)}
.gift-libelle{
  display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta-2);margin-bottom:9px;
}
.gift-seg{width:100%;margin-bottom:10px;background:rgba(253,250,245,.7);padding:4px}
/* !important : la règle générique .seg button impose une couleur trop pâle */
.gift-seg button{
  flex:1;color:var(--terracotta-2) !important;font-weight:600;opacity:1 !important;
  border-radius:999px;transition:.2s;
}
.gift-seg button:hover{background:rgba(253,250,245,.6)}
.gift-seg button.on{
  background:var(--blanc);color:var(--encre) !important;
  box-shadow:0 3px 10px -4px rgba(122,74,45,.45);
}
.gift-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.gift-dest input,.gift-dest textarea{
  width:100%;box-sizing:border-box;border:1.5px solid rgba(34,34,33,.18);border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:13px;background:var(--blanc);resize:vertical;
}
.gift-dest input:focus,.gift-dest textarea:focus{outline:none;border-color:var(--terracotta)}
.gift-quand{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12.5px;color:var(--encre-60)}
.gift-quand span{flex:none}
.gift-quand input{flex:1}
@media(max-width:560px){ .gift-duo{grid-template-columns:1fr} }

.ct-ok{
  background:#E9EDE2;border-radius:13px;padding:13px 15px;margin-top:12px;
  font-size:13px;color:#4A5A3E;line-height:1.55;
  animation:newsIn .4s cubic-bezier(.2,.8,.3,1) both;
}
.ct-ok span{color:var(--rose);font-size:15px}
.ct-ok[hidden]{display:none}

.livr-seul{
  background:var(--creme);border-radius:13px;padding:12px 14px;margin-bottom:4px;
}
.livr-seul b{display:block;font-size:13px;font-weight:600}
.livr-seul span{display:block;font-size:11.5px;color:var(--encre-60);margin-top:2px;line-height:1.5}

.dispo{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;font-weight:600;
  border-radius:999px;padding:4px 11px;margin-top:8px;
}
.dispo-stock{background:#E9EDE2;color:#5F7150}
.dispo-faible{background:var(--accent-soft);color:var(--terracotta-2)}
.dispo-commande{background:var(--creme);color:var(--encre-60)}
.dispo-rupture{background:#F7E1DC;color:#B0604C}
.prod.epuise .prod-vis{opacity:.55}

.exp-date{font-size:12.5px;color:var(--terracotta-2);font-weight:600;margin-top:8px}
.exp-cartes{font-size:11px;color:var(--encre-60);margin-top:6px;padding-top:6px;border-top:1px dashed rgba(196,122,83,.22)}
.exp-dispo{font-size:11.5px;color:var(--encre-60);margin-top:6px}

/* mise en avant d'une formule */
.tarif{position:relative}
.tarif-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--terracotta);color:var(--blanc);white-space:nowrap;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:5px 13px;box-shadow:0 6px 14px -8px rgba(122,74,45,.7);
}
.tarif-unite{
  display:block;font-size:11.5px;color:var(--terracotta-2);font-weight:600;margin-top:4px;
}

/* ---------- Newsletter ---------- */
.nl-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.nl-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.nl-compte{margin-left:auto;font-size:11px;color:var(--encre-60)}
.nl-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.nl-seg{text-align:left;background:var(--creme);border:1.5px solid transparent;border-radius:14px;padding:13px 14px;transition:.2s}
.nl-seg:hover{border-color:rgba(196,122,83,.35)}
.nl-seg.on{background:var(--accent-soft);border-color:var(--terracotta)}
.nl-seg b{display:block;font-family:var(--font-serif);font-size:24px;font-weight:600;line-height:1;color:var(--terracotta)}
.nl-seg span{display:block;font-size:12px;font-weight:600;margin-top:5px}
.nl-seg em{display:block;font-style:normal;font-size:10.5px;color:var(--encre-60);margin-top:2px;line-height:1.35}

.nl-blocs{list-style:none;margin:0;padding:0}
.nl-b{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(196,122,83,.2)}
.nl-b:last-child{border-bottom:none}
.nl-b:not(.on){opacity:.5}
.nl-sw{background:none;border:none;padding:0;flex:none}
.nl-sw[disabled]{opacity:.4;cursor:default}
.nl-sw .pr-swi{width:32px;height:18px;border-radius:999px;position:relative;display:block;background:rgba(34,34,33,.16);transition:background .25s}
.nl-sw .pr-swi::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--blanc);transition:transform .25s;box-shadow:0 1px 3px rgba(34,34,33,.3)}
.nl-sw.on .pr-swi{background:var(--terracotta)}
.nl-sw.on .pr-swi::after{transform:translateX(14px)}
.nl-btxt{flex:1;min-width:0}
.nl-btxt b{display:block;font-size:13px;font-weight:600}
.nl-btxt em{display:block;font-style:normal;font-size:11px;color:var(--encre-60);margin-top:1px}
.nl-fixe{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--encre-60);flex:none}
.nl-fl{display:flex;gap:5px;flex:none}
/* Carré ici aussi — les flèches du modèle de newsletter faisaient 30 × 28. */
.nl-fl .mini-btn{width:28px;min-width:0;padding:0;height:28px;display:inline-flex;align-items:center;justify-content:center}
.mini-btn[disabled]{opacity:.35;cursor:default}
.nl-edito{width:100%;box-sizing:border-box;background:var(--creme);border:1.5px solid rgba(34,34,33,.12);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:13.5px;line-height:1.6;resize:vertical}
.nl-edito:focus{outline:none;border-color:var(--terracotta);background:var(--blanc)}

/* ⚠️ **Un bloc collant plus haut que la fenêtre ne peut jamais se décoller.**
   Celui-ci faisait près de six cents pixels — titre, aperçu de 520 px et
   marges — dans une colonne qui en montre moins. Il restait donc épinglé en
   permanence, et tout ce qui le suivait dans la même colonne — le sujet du
   message, les boutons d'envoi — défilait **dessous** : on lisait un texte
   coupé par un bloc opaque.

   La correction n'est pas de le déplacer mais de le **borner** : il ne colle
   que ce qui tient à l'écran, et c'est l'aperçu lui-même qui défile à
   l'intérieur. `--h-mode-test` entre dans le calcul parce que le bandeau prend
   sa place en haut du conteneur.

   ⚠️ `min-height:0` sur l'enfant : sans lui, un enfant en `overflow` dans une
   colonne flex refuse de rétrécir sous la hauteur de son contenu — et le bloc
   reprend les six cents pixels qu'on venait de lui retirer. */
.nl-apercu-bloc{
  position:sticky;top:16px;
  max-height:calc(100vh - var(--h-mode-test) - 132px);
  display:flex;flex-direction:column;
}
.nl-apercu{
  background:var(--creme);border-radius:14px;padding:16px;
  flex:1;min-height:0;overflow-y:auto;border:1px solid rgba(196,122,83,.2);
}
.nlp-entete{text-align:center;padding:14px 0 18px;border-bottom:1px solid rgba(196,122,83,.25)}
.nlp-entete svg{width:34px;height:34px;margin:0 auto 8px;display:block}
.nlp-entete b{display:block;font-family:var(--font-serif);font-size:19px;letter-spacing:.16em;text-transform:uppercase}
.nlp-entete span{display:block;font-size:11px;color:var(--encre-60);margin-top:3px}
.nlp-bloc{padding:14px 0;border-bottom:1px solid rgba(196,122,83,.15)}
.nlp-bloc h5{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--terracotta);margin-bottom:9px}
.nlp-edito{font-size:12.5px;line-height:1.6;color:var(--encre)}
.nlp-art{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.nlp-art span{width:44px;height:30px;border-radius:6px;flex:none}
.nlp-art b{display:block;font-size:12px;font-weight:600;line-height:1.25}
.nlp-art em{display:block;font-style:normal;font-size:10px;color:var(--encre-60);margin-top:1px}
.nlp-l{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:4px 0}
.nlp-l b{font-weight:600;flex:none}
.nlp-l span{color:var(--encre-60);text-align:right;min-width:0}
.nlp-exp b{display:block;font-family:var(--font-serif);font-size:17px}
.nlp-exp em{font-style:normal;font-size:11px;color:var(--encre-60)}
.nlp-pied{padding-top:14px;font-size:10px;color:var(--encre-60);text-align:center;line-height:1.6}

.nl-recap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.nl-recap span{display:flex;flex-direction:column;gap:2px;background:var(--creme);border-radius:11px;padding:10px 11px}
.nl-recap em{font-style:normal;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.nl-recap b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:1000px){
  .nl-layout{grid-template-columns:1fr}
  .nl-apercu-bloc{position:static}
}

/* ---------- Panneau de filtres réutilisable ---------- */
.flt-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start;margin-top:18px}
.flt-layout.replie{grid-template-columns:1fr}
.flt-layout.replie .flt-side{display:none}
.flt-side{
  position:sticky;top:16px;background:var(--blanc);
  border:1px solid rgba(34,34,33,.08);border-radius:20px;overflow:hidden;
}
.flt-main{min-width:0}
.flt-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.flt-tools .cl-rech{flex:1;min-width:200px;max-width:none}
.flt-tools .btn-sm{margin-left:auto}
@media(max-width:900px){
  .flt-layout{grid-template-columns:1fr}
  .flt-side{
    position:fixed;top:76px;left:0;bottom:0;z-index:47;width:min(300px,86vw);
    border-radius:0 20px 20px 0;transform:translateX(-104%);
    transition:transform .32s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
  }
  .flt-side.ouvert{transform:none}
  .flt-layout.replie .flt-side{display:flex}
  .flt-side .ps-corps{flex:1;max-height:none}
}
@media(max-width:680px){
  .flt-tools{gap:9px}
  .flt-tools .cl-rech{flex:1 1 100%;order:2}
  .flt-tools .btn-sm{margin-left:0}
}

/* pastilles de filtre (commandes) */
.cl-chips{display:flex;gap:6px;flex-wrap:wrap}
.cl-chip{
  border:1.5px solid rgba(34,34,33,.14);background:var(--blanc);border-radius:999px;
  padding:8px 15px;font-size:11px;font-weight:500;color:var(--encre-60);transition:.2s;
}
.cl-chip:hover{border-color:var(--terracotta);color:var(--encre)}
.cl-chip.on{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc);font-weight:600}

/* ---------- Boutique : commandes ---------- */
.cmd-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.cmd-c{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;transition:.22s;
  box-shadow:0 2px 4px -2px rgba(122,74,45,.06);
}
.cmd-c:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(122,74,45,.5)}

/* en-tête coloré selon l'état */
.cmd-tete{
  display:flex;align-items:center;gap:12px;padding:15px 17px;
  background:var(--creme);border-bottom:1px solid rgba(34,34,33,.07);
}
.cmd-c.etat-a-preparer .cmd-tete{background:#F7E1DC;border-bottom-color:rgba(192,112,95,.28)}
.cmd-c.etat-prete .cmd-tete{background:var(--accent-soft);border-bottom-color:rgba(196,122,83,.28)}
.cmd-c.etat-expediee .cmd-tete{background:#E9EDE2;border-bottom-color:rgba(139,154,128,.3)}
.cmd-c.etat-annulee{opacity:.6}
.cmd-av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--blanc);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:14px;font-weight:600;
}
.cmd-qui{flex:1;min-width:0}
.cmd-qui b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-qui span{display:block;font-size:10.5px;color:var(--encre-60);letter-spacing:.04em;margin-top:1px}
.cmd-tete .chip-state{flex:none;background:var(--blanc);box-shadow:0 1px 3px -1px rgba(34,34,33,.2)}

.cmd-corps{padding:14px 17px 4px;flex:1;display:flex;flex-direction:column}

/* lignes d'articles : quantité en pastille */
.cmd-lignes{list-style:none;margin:0 0 2px;padding:0}
.cmd-lignes li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.cmd-q{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:var(--creme);color:var(--encre-60);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;
}
.cmd-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-lignes b{font-weight:600;flex:none}
.cmd-port{color:var(--encre-60)}
.cmd-port .cmd-q{background:none}

.cmd-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:8px;padding:11px 0;border-top:1px dashed rgba(196,122,83,.28);
}
.cmd-total span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--encre-60)}
.cmd-total b{font-family:var(--font-serif);font-size:25px;font-weight:600;color:var(--terracotta)}

.cmd-infos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cmd-mode{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--creme);border-radius:999px;padding:5px 11px;
  font-size:11px;font-weight:600;color:var(--encre-60);
}
.cmd-mode svg{width:13px;height:13px}
.cmd-mode.livraison{background:#E9EDE2;color:#5F7150}
.cmd-pay{font-size:11px;color:var(--encre-60)}
.cmd-adr{font-size:11.5px;color:var(--encre-60);line-height:1.45;margin-bottom:8px}
.cmd-note{
  font-size:11.5px;color:var(--terracotta-2);font-style:italic;line-height:1.5;
  padding-left:10px;border-left:2px solid var(--rose);margin-bottom:8px;
}

.cmd-act{
  display:flex;gap:8px;padding:12px 17px 15px;
  border-top:1px solid rgba(34,34,33,.07);background:#FBF6EF;
}
.cmd-act .inp{flex:1;min-width:0}
.cmd-act .mini-btn{flex:none;min-height:34px;padding:0 15px;font-size:9.5px;display:inline-flex;align-items:center}
@media(max-width:680px){ .cmd-grille{grid-template-columns:1fr} }

/* ---------- Paramètres ---------- */
/* sélecteur de sections en cartes */
.reg-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:20px}
.reg-c{
  display:flex;align-items:center;gap:13px;text-align:left;
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:16px;
  padding:14px 16px;transition:.22s;position:relative;overflow:hidden;
}
.reg-c::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--terracotta),var(--rose));
  transform:scaleX(0);transform-origin:left center;transition:transform .3s;
}
.reg-c:hover{box-shadow:0 16px 30px -24px rgba(122,74,45,.45)}
.reg-c.on{background:#FBF6EF;border-color:rgba(196,122,83,.28)}
.reg-c.on::before{transform:none}
.reg-ico{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--creme);color:var(--encre-60);
  display:flex;align-items:center;justify-content:center;transition:.22s;
}
.reg-ico svg{width:18px;height:18px}
.reg-c.on .reg-ico{background:var(--accent-soft);color:var(--terracotta-2)}
.reg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.reg-txt b{font-size:13.5px;font-weight:600;color:var(--encre-60);transition:color .2s}
.reg-c.on .reg-txt b{color:var(--terracotta-2)}
.reg-txt em{font-style:normal;font-size:11px;color:var(--encre-60);line-height:1.35}
/* champs texte : libellé au-dessus, champ pleine largeur */
/* ⚠️ Ces quatre exceptions étaient nées du même défaut, une par type de champ :
   `text`, `tel`, `email`, puis `date` qu'on avait oublié — et « Début » se
   réduisait à « D… ». Elles disparaissent : **toutes** les lignes sont en
   colonne maintenant, et il n'y a plus de liste de types à tenir à jour. */
/* L'étiquette : en petites capitales, au-dessus du champ. Une seule définition
   — il y en avait deux qui se contredisaient sur la couleur. */
.fo-r > span{
  flex:none;min-width:0;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--encre-60);
}
.fo-r .inp{width:100%;box-sizing:border-box;text-align:left;padding:9px 12px}

/* ---------- Formules & tarifs ---------- */
.fo-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fo-head h3{margin:0}
.fo-head .btn-sm{margin-left:auto}
.fo-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.fo-c{
  background:var(--creme);border:1px solid rgba(34,34,33,.07);border-radius:16px;
  padding:15px 16px;display:flex;flex-direction:column;transition:.22s;
}
.fo-c:hover{background:#FBF6EF;box-shadow:0 14px 28px -22px rgba(122,74,45,.45)}
.fo-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.fo-tete b{font-size:14.5px;font-weight:600;flex:1;min-width:0}
.fo-px{font-family:var(--font-serif);font-size:23px;font-weight:600;color:var(--terracotta)}
.fo-lignes{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:11px 0;border-block:1px dashed rgba(196,122,83,.22)}
.fo-lignes span{display:flex;flex-direction:column;gap:1px;min-width:0}
.fo-lignes em{font-style:normal;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.fo-lignes b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-d{font-size:11.5px;color:var(--encre-60);margin-top:10px;line-height:1.5;flex:1}
.fo-c.epuisee{opacity:.55}
.fo-emet{display:flex;gap:8px;align-items:center}
.fo-emet .inp{width:130px}
.mini-btn[disabled]{opacity:.5;cursor:default}
.fo-edit{
  margin-top:12px;width:100%;padding:9px 10px;font-size:9.5px;line-height:1.2;
  display:flex;align-items:center;justify-content:center;min-height:34px;
}
.fs-aide{font-size:11.5px;color:var(--terracotta-2);margin-top:9px;font-style:italic}

.fo-regles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
/* ⚠️ **L'étiquette au-dessus, le champ dessous — et non côte à côte.**
   La disposition en ligne ne tient pas dans une carte de 240 px : « Ouverture
   des réservations » et son champ se disputaient la largeur, et l'un ou l'autre
   cédait. Superposer le suffixe d'unité au champ masquait le nombre ; lui
   réserver une largeur fixe cassait l'étiquette mot par mot. Le problème
   n'était pas le réglage de la largeur — c'était la disposition.

   Une seule exception, plus bas : l'interrupteur, qui n'a pas de valeur à
   lire et tient naturellement à droite de son libellé. */
.fo-r{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  background:var(--creme);border-radius:13px;padding:12px 14px;font-size:12.5px;
}
/* ⚠️ **L'unité se pose à côté du champ, elle ne se superpose plus.** Ailleurs,
   `.fs-unite` place son suffixe en `absolute` par-dessus l'`input` et lui
   réserve la place par un `padding-right` **fixe** de 52 px : « pers. » et
   « mois » y tiennent, « jours avant » non — il passait par-dessus le nombre
   saisi. Un espace fixe pour un texte de longueur variable finit toujours par
   déborder ; une grille, jamais. */
.fo-r .fs-unite{
  width:100%;min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;
}
.fo-r .fs-unite .inp{width:100%;box-sizing:border-box;padding-right:10px;text-align:left}
.fo-r .inp{width:100%;box-sizing:border-box;text-align:left}
.fo-r .fs-unite span{
  position:static;transform:none;font-size:10.5px;white-space:nowrap;color:var(--encre-60);
}
/* L'interrupteur reste sur la ligne de son libellé : il n'a pas de valeur à
   lire, et une bascule sous son texte se lit comme un réglage orphelin. */
.fo-r:has(.pr-sw){flex-direction:row;align-items:center;gap:12px}
.fo-r:has(.pr-sw) > span{flex:1}

/* ⚠️ **La date revient sur la ligne de son étiquette — mais bornée.** Je viens
   de retirer les exceptions par type de champ ; celle-ci n'est pas la même. Le
   défaut d'origine venait d'un champ à largeur **intrinsèque** face à une
   étiquette qui, elle, se comprimait : « Début » se réduisait à « D… ». Ici
   c'est l'inverse — la largeur du champ est **plafonnée**, l'étiquette prend ce
   qui reste et ne cède jamais. Une date tient en dix caractères ; lui donner
   toute la largeur d'une carte, puis une ligne à elle, coûtait deux fois. */
.fo-r:has(.cal){flex-direction:row;align-items:center;gap:12px}
.fo-r:has(.cal) > span{flex:1;min-width:0}
.fo-r .cal{flex:none}

@media(max-width:680px){
  .fo-grille{grid-template-columns:1fr}
  .fo-head{flex-wrap:wrap}
  .fo-head .btn-sm{margin-left:0;width:100%}
}

/* ---------- Fiche cliente ---------- */
.fi-sheet{
  background:var(--blanc);border-radius:24px;width:min(760px,100%);
  max-height:min(92dvh,860px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 44px 90px -44px rgba(122,74,45,.6);
}
.fi-head{
  display:flex;align-items:center;gap:16px;padding:22px 26px;
  background:linear-gradient(135deg,var(--accent-soft),var(--creme));
  border-bottom:1px solid rgba(196,122,83,.22);
}
.fi-av{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--peche),var(--rose));color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:21px;font-weight:600;
}
.fi-id{flex:1;min-width:0}
.fi-id h3{font-family:var(--font-serif);font-weight:400;font-size:26px;line-height:1.1}
.fi-id p{font-size:12px;color:var(--encre-60);margin-top:3px}
.fi-depuis{font-size:11px !important;opacity:.85}
.fi-head .x{flex:none;align-self:flex-start}

.fi-onglets{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding:0 26px;background:#FBF6EF;border-bottom:1px solid rgba(196,122,83,.18);
}
.fi-onglets::-webkit-scrollbar{display:none}
.fi-onglets button{
  flex:none;background:none;border:none;border-bottom:2px solid transparent;
  padding:14px 14px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);transition:.2s;white-space:nowrap;
}
.fi-onglets button:hover{color:var(--encre)}
.fi-onglets button.on{color:var(--terracotta-2);border-color:var(--terracotta)}
.fi-onglets em{
  font-style:normal;background:rgba(196,122,83,.16);color:var(--terracotta-2);
  border-radius:999px;padding:1px 6px;font-size:9px;margin-left:3px;
}
.fi-onglets button.on em{background:var(--terracotta);color:var(--blanc)}

.fi-body{padding:20px 26px 24px;overflow-y:auto;overscroll-behavior:contain}
.fi-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.fi-tuile{background:var(--creme);border-radius:13px;padding:13px 14px}
.fi-tuile em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--encre-60);margin-bottom:4px}
.fi-tuile b{font-family:var(--font-serif);font-size:19px;font-weight:600}
.fi-bloc{margin-bottom:18px}
.fi-bloc h4{
  font-family:var(--font-sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta);margin-bottom:10px;
}
.fi-ajout{display:flex;gap:9px;margin-bottom:16px}
.fi-ajout input{
  flex:1;min-width:0;background:var(--creme);border:1.5px solid rgba(34,34,33,.12);
  border-radius:12px;padding:11px 14px;font-family:inherit;font-size:13px;
}
.fi-ajout input:focus{outline:none;border-color:var(--terracotta);background:var(--blanc)}
.fi-notes{list-style:none;margin:0;padding:0}
.fi-notes li{padding:12px 0;border-bottom:1px dashed rgba(196,122,83,.22)}
.fi-notes li:last-child{border-bottom:none}
.fi-date{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:4px}
.fi-notes p{font-size:13px;color:var(--encre);line-height:1.55}

@media(max-width:560px){
  #ovFiche{align-items:flex-end;padding:0}
  .fi-sheet{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}
  .fi-head{padding:18px 20px;gap:12px}
  .fi-av{width:46px;height:46px;font-size:18px}
  .fi-id h3{font-size:22px}
  .fi-onglets{padding:0 20px}
  .fi-body{padding:16px 20px 20px}
}

/* ---------- Clientes ---------- */
/* mise en page à panneau, comme le planning */
.cl-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start;margin-top:20px}
.cl-layout.replie{grid-template-columns:1fr}
.cl-layout.replie .cl-side{display:none}
.cl-side{
  position:sticky;top:16px;background:var(--blanc);
  border:1px solid rgba(34,34,33,.08);border-radius:20px;overflow:hidden;
}
.cl-main{min-width:0}
.cl-actifs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.cl-tagf{
  display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--terracotta-2);
  border-radius:999px;padding:5px 8px 5px 12px;font-size:11px;font-weight:600;
}
.cl-tagf button{background:none;border:none;color:inherit;font-size:14px;line-height:1;padding:0 2px;opacity:.7}
.cl-tagf button:hover{opacity:1}

.cl-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cl-rech{position:relative;flex:1;min-width:210px;max-width:320px}
.cl-rech svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--encre-60)}
.cl-rech input{
  width:100%;box-sizing:border-box;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.14);border-radius:999px;
  padding:10px 14px 10px 36px;font-family:inherit;font-size:13px;
}
.cl-rech input:focus{outline:none;border-color:var(--terracotta)}
.cl-tools .btn-sm{margin-left:auto}
.cl-rech{flex:1;max-width:none}

.cl-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.cl-c{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:18px;padding:16px 17px;
  transition:transform .22s, box-shadow .22s;
}
.cl-c:hover{transform:translateY(-3px);box-shadow:0 20px 38px -26px rgba(122,74,45,.45)}
.cl-c.connectee{background:var(--accent-soft);border-color:rgba(196,122,83,.35)}
.cl-tete{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.cl-av{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--peche),var(--rose));color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:16px;font-weight:600;letter-spacing:.04em;
}
.cl-id{flex:1;min-width:0}
.cl-id b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-id span{display:block;font-size:11px;color:var(--encre-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-st{
  flex:none;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:4px 9px;
}
.cl-st.active{background:#E9EDE2;color:#5F7150}
.cl-st.nouvelle{background:var(--accent-soft);color:var(--terracotta-2)}
.cl-st.endormie{background:#F7E1DC;color:#B0604C}
.cl-st.perdue{background:rgba(34,34,33,.07);color:var(--encre-60)}

.cl-lignes{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 0;border-block:1px dashed rgba(196,122,83,.22)}
.cl-lignes span{display:flex;flex-direction:column;gap:1px;min-width:0}
.cl-lignes em{font-style:normal;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.cl-lignes b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cl-prat{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}
.cl-prat span{font-size:9.5px;background:var(--creme);border-radius:999px;padding:4px 10px;color:var(--encre-60)}
.cl-note{
  font-size:11.5px;color:var(--terracotta-2);font-style:italic;line-height:1.5;
  margin-top:11px;padding-left:10px;border-left:2px solid var(--rose);
}
.cl-act{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:13px}
.cl-act .mini-btn{
  width:100%;padding:9px 10px;font-size:9.5px;line-height:1.2;
  display:flex;align-items:center;justify-content:center;min-height:34px;
}

@media(max-width:900px){
  .cl-layout{grid-template-columns:1fr}
  .cl-side{
    position:fixed;top:76px;left:0;bottom:0;z-index:47;width:min(300px,86vw);
    border-radius:0 20px 20px 0;transform:translateX(-104%);
    transition:transform .32s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
  }
  .cl-side.ouvert{transform:none}
  .cl-layout.replie .cl-side{display:flex}
  .cl-side .ps-corps{flex:1;max-height:none}
}
@media(max-width:680px){
  .cl-grille{grid-template-columns:1fr}
  .cl-tools{gap:9px}
  .cl-rech{flex:1 1 100%;order:2}
  .cl-tools .btn-sm{margin-left:0}
}

/* ---------- Planning du back-office ---------- */
.pl-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:20px 0 14px}
/* ---------- Fenêtre de séance (back-office) ---------- */
.fs-sheet{
  background:var(--blanc);border-radius:24px;width:min(560px,100%);
  max-height:min(92dvh,780px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 44px 90px -44px rgba(122,74,45,.6);
}
.fs-head{
  display:flex;align-items:flex-start;gap:14px;padding:22px 26px 18px;
  background:linear-gradient(135deg,var(--accent-soft),var(--creme));
  border-bottom:1px solid rgba(196,122,83,.22);
}
.fs-head .eyebrow{font-size:9px;margin-bottom:4px}
.fs-head h3{font-family:var(--font-serif);font-weight:400;font-size:27px;line-height:1.1}
.fs-head .x{margin-left:auto;flex:none}

.fs-body{padding:20px 26px 8px;overflow-y:auto;overscroll-behavior:contain}
.fs-bloc{
  background:var(--creme);border-radius:16px;padding:16px 17px;margin-bottom:14px;
}
.fs-bloc h4{
  font-family:var(--font-sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta);margin-bottom:13px;
}
.fs-bloc .field{margin-bottom:12px}
.fs-bloc .field:last-child{margin-bottom:0}
.fs-bloc input:not([type="checkbox"]),.fs-bloc select{
  width:100%;box-sizing:border-box;background:var(--blanc);
  border:1.5px solid rgba(34,34,33,.14);border-radius:12px;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--encre);
}
.fs-bloc input:not([type="checkbox"]):focus,.fs-bloc select:focus{outline:none;border-color:var(--terracotta)}
/* les cases à cocher gardent leur taille fixe */
.fs-bloc .auth-case input[type="checkbox"]{width:17px;height:17px;flex:none;padding:0}
.fs-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fs-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* min-width:0 : sans quoi les champs date/heure natifs imposent leur largeur
   minimale et débordent de la colonne (comportement iOS notamment) */
.fs-duo .field,.fs-trio .field{margin-bottom:0;min-width:0}
.fs-bloc .cal,.fs-bloc input[type="time"]{
  min-width:0;max-width:100%;appearance:none;-webkit-appearance:none;
}
.fs-bloc .cal{display:flex}

/* champ avec unité accolée */
.fs-unite{position:relative}
.fs-unite input{padding-right:44px}
.fs-unite span{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:11.5px;color:var(--encre-60);pointer-events:none;
}

.fs-note{
  background:#F7E1DC;border:1px solid rgba(192,112,95,.3);border-radius:12px;
  padding:12px 14px;margin:0 0 14px;font-size:11.5px;color:#8A4A3A;line-height:1.55;
}
.fs-note[hidden]{display:none}

.fs-pied{
  display:flex;align-items:center;gap:10px;padding:16px 26px 20px;
  border-top:1px solid rgba(196,122,83,.18);background:#FBF6EF;
}
/* les trois boutons du pied ont la même hauteur et la même typographie */
.fs-pied .mini-btn,
.fs-pied .btn{
  padding:10px 20px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;border-radius:999px;line-height:1.2;
  border:1px solid transparent;   /* même géométrie, plein ou contour */
}
.fs-pied .mini-btn{border-color:var(--terracotta)}
.fs-pied .btn-ghost{border-color:var(--encre)}
.fs-pied .mini-btn.danger{border-color:#C0705F;color:#B0604C;background:none}
.fs-pied .mini-btn.danger:hover{background:#F7E1DC}
.fs-pied .btn-sm:last-child{margin-left:auto}
#fsSupprimer{margin-right:auto}
#fsSupprimer[hidden]{display:none}

@media(max-width:560px){
  #ovFormSeance{align-items:flex-end;padding:0}
  .fs-sheet{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}
  .fs-head{padding:18px 20px 15px}
  .fs-head h3{font-size:23px}
  .fs-body{padding:16px 20px 6px}
  .fs-duo{grid-template-columns:1fr}
  .fs-trio{grid-template-columns:1fr 1fr}
  .fs-trio .field:first-child{grid-column:span 2}
  .fs-pied{padding:14px 20px 18px;flex-wrap:wrap;gap:9px}
  .fs-pied .btn-sm{flex:1}
  .fs-pied .mini-btn{order:3;width:100%;margin:0}
  #fsSupprimer,#foSupprimer,#prSupprimer{order:3;width:100%;margin:0}
}
.pl-seg{flex:none}
.pl-reperes{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--encre-60)}
.pl-reperes b{color:var(--encre);font-weight:600}
.pl-tx{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.pl-piste{display:block;width:64px;height:5px;border-radius:999px;background:rgba(34,34,33,.09);overflow:hidden;flex:none}
.pl-piste i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--rose))}
.pl-tx em{font-style:normal;font-weight:600;color:var(--terracotta-2)}
.pl-al{background:#F7E1DC;color:#B0604C;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600}

.dp-pt{
  position:absolute;top:5px;right:6px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:rgba(196,122,83,.16);color:var(--terracotta-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;
}
.daypill{position:relative}
.daypill.on .dp-pt{background:var(--terracotta);color:var(--blanc)}

/* Vue jour : cartes en agenda */
.pl-liste{display:flex;flex-direction:column;gap:10px}
.pl-c{
  display:grid;grid-template-columns:74px 1fr auto auto;gap:16px;align-items:center;
  background:var(--creme);border:1px solid rgba(34,34,33,.07);border-left:4px solid var(--terracotta);
  border-radius:14px;padding:14px 16px;transition:background .2s;
}
.pl-c:hover{background:#FBF6EF}
.pl-c.complete{border-left-color:#8B9A80}
.pl-c.faible{border-left-color:#C0705F;background:#FCF2EE}
.pl-c.annulee{border-left-color:rgba(34,34,33,.2);opacity:.55}
.pl-h{text-align:center}
.pl-h b{display:block;font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--terracotta-2);line-height:1}
.pl-h span{font-size:10px;color:var(--encre-60)}
.pl-titre{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-titre b{font-size:14.5px;font-weight:600}
.pl-tag{
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  background:var(--accent-soft);color:var(--terracotta-2);border-radius:999px;padding:3px 8px;
}
.pl-tag.alerte{background:#F7E1DC;color:#B0604C}
.pl-prof{display:block;font-size:11.5px;color:var(--encre-60);margin-top:2px}
.pl-jauge{height:5px;border-radius:999px;background:rgba(34,34,33,.08);overflow:hidden;margin-top:9px;max-width:260px}
.pl-jauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--rose))}
.pl-droite{text-align:right;min-width:82px}
.pl-nb{display:block;font-size:12.5px;color:var(--encre-60)}
.pl-nb b{font-family:var(--font-serif);font-size:20px;color:var(--encre)}
.pl-etat{display:block;font-size:10.5px;color:var(--encre-60);margin-top:2px}
.pl-actions{display:flex;align-items:center;gap:10px}
.pl-cap{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.pl-cap .inp{width:56px}

/* Vue semaine : grille 7 colonnes */
.pl-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px}
.pls-col{background:var(--creme);border-radius:13px;padding:9px 8px;display:flex;flex-direction:column;gap:7px;min-height:130px}
.pls-col.auj{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px rgba(196,122,83,.4)}
.pls-tete{text-align:center;padding-bottom:7px;border-bottom:1px dashed rgba(196,122,83,.28)}
.pls-tete small{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-60);font-weight:600}
.pls-tete b{font-family:var(--font-serif);font-size:17px;font-weight:600}
.pls-s{
  width:100%;text-align:left;background:var(--blanc);border:none;border-left:3px solid var(--terracotta);
  border-radius:8px;padding:7px 8px;transition:transform .18s, box-shadow .18s;
}
.pls-s:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(122,74,45,.5)}
.pls-s.complete{border-left-color:#8B9A80}
.pls-s.faible{border-left-color:#C0705F}
.pls-s.annulee{border-left-color:rgba(34,34,33,.2);opacity:.5}
.pls-s b{display:block;font-size:10.5px;font-weight:700;color:var(--terracotta-2)}
.pls-s span{display:block;font-size:10px;color:var(--encre-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-j{display:block;height:3px;border-radius:999px;background:rgba(34,34,33,.1);margin-top:5px;overflow:hidden}
.pls-j i{display:block;height:100%;border-radius:999px;background:var(--terracotta)}
.pls-vide{text-align:center;color:var(--encre-60);font-size:12px;padding:8px 0}
.pl-legende{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--encre-60)}
.pl-legende span{display:flex;align-items:center;gap:6px}
.lg{width:11px;height:11px;border-radius:3px;display:inline-block}
.lg.ouverte{background:var(--terracotta)}
.lg.complete{background:#8B9A80}
.lg.faible{background:#C0705F}
.lg.annulee{background:rgba(34,34,33,.25)}

@media(max-width:1000px){
  /* minmax(0,1fr) : sans quoi la colonne refuse de se comprimer
     et le contenu déborde de la carte */
  .pl-c{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .pl-droite{grid-column:2;text-align:left;min-width:0}
  .pl-actions{grid-column:2;flex-wrap:wrap;min-width:0}
  .pl-corps{min-width:0}
  .pl-jauge{max-width:none}
  .pl-sem{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .pl-sem{grid-template-columns:repeat(2,1fr)}
  .pl-reperes{gap:12px;font-size:11.5px}
  /* la ligne d'actions passe en pleine largeur */
  .pl-c{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:13px 14px}
  .pl-actions{gap:8px}
  .pl-actions .mini-btn{flex:1;min-width:0;padding:8px 10px;font-size:9.5px}
  .pl-cap{flex:1 1 100%;justify-content:space-between}
  .pl-cap .inp{width:72px}
  .pl-h b{font-size:19px}
}

/* bandeau d'alerte */
/* ⚠️ Marge basse autant que haute : le bandeau d'alerte touchait le bloc
   suivant, et deux blocs qui se touchent se lisent comme un seul. Même défaut
   que la rangée de KPI, à un autre endroit — c'est le troisième bloc de ce
   fichier qui n'avait qu'une moitié de respiration. */
.bo-alerte{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  background:#F7E1DC;border:1px solid rgba(192,112,95,.35);border-radius:16px;padding:14px 18px;
}
.ba-ico{
  width:34px;height:34px;border-radius:50%;background:var(--blanc);color:#B0604C;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.ba-ico svg{width:18px;height:18px}
.bo-alerte b{display:block;font-size:13.5px}
.bo-alerte span{font-size:12px;color:var(--encre-60)}
.bo-alerte .mini-btn{margin-left:auto;flex:none}

/* deux colonnes : aujourd'hui / demain */
/* ⚠️ **`minmax(0,1fr)`, pas `1fr`.** `1fr` vaut `minmax(auto, 1fr)` : un élément
   de grille refuse alors de rétrécir sous la largeur de son contenu. Un tableau
   large gardait donc sa colonne à sa taille, et l'administration débordait de
   deux cents pixels vers la droite sur un téléphone — même repliée sur une
   seule colonne. Le piège est générique ; `.plan-layout` s'en gardait déjà. */
.bo-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:18px}
.bo-fil{list-style:none;margin:0;padding:0}
.bo-fil li{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px dashed rgba(196,122,83,.2);
}
.bo-fil li:last-child{border-bottom:none}
.bo-fil li.off{opacity:.45;text-decoration:line-through}
.bf-h{
  font-family:var(--font-serif);font-size:18px;font-weight:600;
  color:var(--terracotta-2);width:52px;flex:none;
}
.bf-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.bf-txt b{font-size:13.5px;font-weight:500}
.bf-txt em{font-style:normal;font-size:11px;color:var(--encre-60)}
.bf-jauge{width:60px;height:4px;border-radius:999px;background:rgba(34,34,33,.08);overflow:hidden;flex:none}
.bf-jauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--rose))}
.bf-nb{font-size:11.5px;color:var(--encre-60);width:42px;text-align:right;flex:none}

@media(max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo-duo{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){ .kpis{grid-template-columns:minmax(0,1fr)} }
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;scrollbar-width:thin}
.tbl{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:14px;overflow:hidden;font-size:12.5px;border:1px solid rgba(34,34,33,.08)}
.tbl th{background:#F1E6D8;text-align:left;padding:11px 14px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.tbl td{padding:10px 14px;border-top:1px solid rgba(34,34,33,.06);vertical-align:middle}
/* Une ligne sur deux prend le fond crème : sur un tableau large, l'œil perd la
   ligne entre le nom du produit et son stock. Un filet ne suffit pas ; une
   bande, oui. */
.tbl tbody tr:nth-child(even) td,
.tbl tr:nth-child(even) td{background:rgba(247,239,230,.55)}

/* ⚠️ **Dans un tableau, l'unité sort du champ.** `.fs-unite` la pose en
   `absolute` par-dessus l'`input` : le nombre et le symbole se disputaient
   alors les mêmes pixels, et le champ paraissait collé à son bord droit. Une
   grille les met côte à côte — le champ garde toute sa largeur pour la valeur,
   l'unité se lit à côté. Même correction que pour les cartes de réglage. */
.tbl .fs-unite{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;
}
.tbl .fs-unite .inp{width:100%;box-sizing:border-box;padding-right:10px;text-align:left}
.tbl .fs-unite span{
  position:static;transform:none;font-size:11px;color:var(--encre-60);white-space:nowrap;
}
.inp{width:74px;border:1px solid rgba(34,34,33,.18);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:12.5px;background:var(--blanc);color:var(--encre)}

/* ---------- Champs numériques : une zone de saisie, pas un compteur ----------
   ⚠️ **Les flèches natives d'un `input[type=number]` mangent la place, et la
   valeur avec.** Elles occupent une vingtaine de pixels à droite du champ, sans
   qu'aucune règle du projet ne les mentionne : dans le tableau des produits,
   « 59 € » s'affichait « 5 € » et « 20 » devenait « 2 ». Le chiffre était juste
   dans le champ, faux à l'écran — le genre de défaut qui se recopie dans un
   inventaire.

   On les retire partout : ces champs se saisissent au clavier, et personne ne
   règle un prix en cliquant vingt fois sur une flèche de six pixels. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.blkbo{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:16px;padding:20px;margin-bottom:16px}
.blkbo h3{font-size:21px;margin-bottom:13px}
.chip-state{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:3px 10px}
.st-ok{background:#E9EDE2;color:#4E5A44}
.st-warn{background:#F8E5D8;color:#A56E43}
.st-off{background:rgba(34,34,33,.08);color:var(--encre-60)}
/* ⚠️ Marge basse autant que haute — quatrième bloc de ce fichier à n'avoir
   qu'une moitié de respiration, après les KPI, l'alerte et la grille des
   espaces. Deux blocs qui se touchent se lisent comme un seul. */
.locked-note{
  background:#F1E6D8;border:1px dashed rgba(196,122,83,.5);border-radius:14px;padding:16px 18px;
  font-size:12.5px;color:var(--encre-60);margin:18px 0;
}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--encre);color:var(--creme);border-radius:999px;padding:13px 26px;font-size:13px;
  opacity:0;pointer-events:none;transition:.35s;z-index:var(--z-toast);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- Footer ---------- */
footer{background:var(--creme-2);border-top:1px solid rgba(196,122,83,.22);padding:40px 0 28px;margin-top:36px;position:relative;overflow:hidden}
.foot-grid{
  display:grid;grid-template-columns:1.15fr .85fr .85fr 1.15fr;gap:40px;
  position:relative;z-index:1;align-items:start;
}
.foot-marque .brand{margin-bottom:2px}
/* le logo s'aligne sur la ligne de base des titres de colonnes */
/* alignement optique : le centre du logo s'aligne sur le centre des titres */
.foot-marque{margin-top:-15px}
.foot-marque .brand svg{width:36px;height:36px}
.foot-marque .brand-name{font-size:18px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
  width:38px;height:38px;padding:0;border-radius:50%;opacity:1;
  border:1px solid rgba(196,122,83,.35);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;transition:.22s;
}
.foot-social a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--blanc)}
.foot-social svg{width:17px;height:17px}
.foot-adresse{font-size:12.5px;color:var(--encre-60);margin-top:16px;line-height:1.7}
.foot-news-txt{font-size:12.5px;color:var(--encre-60);margin-bottom:12px}
footer h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:16px;font-family:var(--font-sans);line-height:1.3}
footer a{display:block;font-size:13px;opacity:.7;padding:4px 0;transition:opacity .2s}
footer a:hover{opacity:1}
.foot-tagline{font-family:var(--font-serif);font-style:italic;font-size:15.5px;color:var(--terracotta-2);margin-top:14px;max-width:250px;line-height:1.5}
.news-row{display:flex;gap:8px;margin-top:10px}
.news-row input{
  flex:1;min-width:0;border:1.5px solid rgba(34,34,33,.18);border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:13px;background:var(--blanc);
}
.news-row .btn{border-radius:14px;white-space:nowrap}
.news-ok{
  background:#E9EDE2;border-radius:12px;padding:11px 14px;margin-top:10px;
  font-size:12.5px;color:#4A5A3E;line-height:1.5;
  animation:newsIn .4s cubic-bezier(.2,.8,.3,1) both;
}
.news-ok span{color:var(--rose);font-size:14px}
.news-ok[hidden]{display:none}
@keyframes newsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.news-rgpd{font-size:10.5px;color:var(--encre-60);margin-top:10px;line-height:1.55;opacity:.85}
.news-row input:focus{outline:none;border-color:var(--terracotta)}
.foot-bottom{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(34,34,33,.12);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.foot-copy{font-size:11.5px;letter-spacing:.08em;color:var(--encre-60)}
.foot-legal{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-legal a{
  display:inline;font-size:11.5px;letter-spacing:.08em;color:var(--encre-60);
  opacity:1;padding:0;text-decoration:none;transition:color .2s;
}
.foot-legal a:hover{color:var(--terracotta-2);text-decoration:underline}
.foot-legal a + a::before{
  content:"\2726";               /* étoile de la charte */
  color:var(--terracotta);font-size:9px;margin-right:12px;
  display:inline-block;vertical-align:1px;
}
@media(max-width:560px){
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-legal{gap:8px 16px}
  .foot-legal a + a::before{content:none}
}

/* ---------- Découvrir : les espaces ---------- */
/* ⚠️ **Une carte par espace : image, nom et description ensemble.** Ils étaient
   séparés — une mosaïque en haut, une liste en bas — et il fallait retrouver
   dans le texte le nom de la photo qu'on venait de regarder. Une fois les
   vraies photos posées, les cartouches disparaîtront et plus rien ne les
   relierait. */
.lieu-h{font-family:var(--font-serif);font-weight:400;font-size:30px;margin:34px 0 18px}
.espaces-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 30px}
.espace-c h4{
  font-family:var(--font-serif);font-weight:400;font-size:22px;margin:16px 0 4px;
}
.espace-c p{margin:0;font-size:14.5px;color:var(--encre-60);max-width:52ch}
.esp-photo{
  aspect-ratio:3/2;border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(34,34,33,.07);
}
.esp-photo svg{width:62px;height:62px;opacity:.55}
/* Les teintes vont par rang, pas par espace : c'est une décoration. Une couleur
   par espace demanderait une colonne, et la CSP interdit le style en ligne. */
.esp-teinte-1{background:linear-gradient(150deg,#F2D9C9,#E8B7AF)}
.esp-teinte-2{background:linear-gradient(150deg,#F8E5D8,#E9C4AC)}
.esp-teinte-3{background:linear-gradient(150deg,#E4E8DC,#A6B09C)}
.esp-teinte-4{background:linear-gradient(150deg,#F5DAD5,#DBAEA1)}

/* Le matériel n'est pas un espace : son image et sa phrase vont ensemble. */
.lieu-materiel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:34px;align-items:center;margin-top:46px;
}
.mat-photo{
  aspect-ratio:3/2;border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(34,34,33,.07);
}
.mat-photo svg{width:62px;height:62px;opacity:.55}
.mat-txt h4{font-family:var(--font-serif);font-weight:400;font-size:24px;margin:0 0 8px}
.mat-txt p{margin:0;font-size:15px;color:var(--encre-60);max-width:60ch}

/* La fondatrice */
.fondatrice{
  display:grid;grid-template-columns:320px 1fr;gap:46px;align-items:center;
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:26px;
  padding:34px;margin-top:44px;
}
.fond-photo{
  aspect-ratio:4/5;border-radius:20px;display:flex;align-items:center;justify-content:center;
  /* Une photo aux coins carrés déborderait du rayon sans cela. */
  overflow:hidden;
}
.fond-txt h3{font-size:36px;margin:10px 0 6px;line-height:1.1}
.fond-cit{
  font-family:var(--font-serif);font-style:italic;font-size:26px;
  color:var(--terracotta-2);margin:14px 0 20px;line-height:1.35;
  padding-left:20px;border-left:2px solid var(--rose);
}
.fond-txt p{font-size:14.5px;color:var(--encre-60);margin-bottom:10px;max-width:640px}

/* Premiers pas */
.premiers-pas{
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  background:var(--accent-soft);border-radius:24px;padding:32px 36px;margin-top:34px;
}
.premiers-pas h3{font-size:28px;margin:8px 0 8px;line-height:1.15}
.premiers-pas p{font-size:14px;color:var(--encre-60);max-width:620px}
.premiers-pas .btn{flex:none}

/* Nos valeurs */
.valeurs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.val{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:110px 110px 20px 20px;
  padding:34px 24px 28px;text-align:center;transition:transform .25s,box-shadow .25s;
}
.val:hover{transform:translateY(-5px);box-shadow:0 22px 42px -28px rgba(122,74,45,.4)}
.val svg{width:46px;height:46px;margin:0 auto 16px}
.val h3{font-size:26px;margin-bottom:10px}
.val-cle{
  font-size:13.5px !important;font-weight:600;color:var(--terracotta-2) !important;
  margin-bottom:9px;line-height:1.4;
}
.val p{font-size:13px;color:var(--encre-60);line-height:1.6}

@media(max-width:1000px){
  .espaces-grille{grid-template-columns:1fr;gap:28px}
  .lieu-materiel{grid-template-columns:1fr;gap:20px}
  .fondatrice{grid-template-columns:1fr;gap:26px;text-align:center}
  .fond-photo{max-width:250px;margin:0 auto}
  .valeurs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .premiers-pas{padding:26px 22px;gap:20px}
  .premiers-pas .btn{width:100%;text-align:center}
  .valeurs-grid{grid-template-columns:1fr}
  .fond-txt h3{font-size:30px}
  .fond-cit{font-size:20px;padding-left:0;border-left:none;border-top:2px solid var(--rose);padding-top:14px}
}

/* ---------- Heros de page ---------- */
.phero{
  position:relative;overflow:hidden;margin-bottom:30px;
  width:100vw;margin-inline:calc(50% - 50vw);
}
.phero-img{position:relative;display:flex;align-items:flex-end;border-radius:0 0 28px 28px;overflow:hidden}
/* La photo remplit le bandeau et se laisse rogner : le cadre va de 4:1 sur
   ordinateur à 1,5:1 sur téléphone, aucun fichier ne peut être aux deux formats.
   ⚠️ `object-position` vise le **centre bas** : c'est là qu'est l'agenda ouvert,
   le sujet de cette page — un cadrage centré verticalement montrerait surtout le
   mur et le plafond. */
.phero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}
/* ⚠️ **Un voile est nécessaire dès qu'il y a une photo.** Ce fichier portait
   « pas de voile : la teinte du hero reste telle quelle » — vrai d'un dégradé
   pâle, faux d'une photographie : le titre terracotta et le sous-titre gris se
   perdaient dans les fleurs et les étagères. Le voile part du bas, là où le
   texte est posé, et s'efface vers le haut pour ne pas éteindre l'image.
   Il est **crème et non sombre** : la charte pose du terracotta sur du clair,
   et un voile noir aurait obligé à passer le texte en blanc — une autre
   identité. Sa suffisance est mesurée, pas jugée à l'œil
   (`tests/bandeaux.spec.js`). */
.phero-img::before{display:none}
/* ⚠️ **Plus de voile : le texte n'est plus sur la photo.** Il l'était, et aucun
   réglage ne tenait les deux promesses à la fois — une photographie entièrement
   visible et un titre lisible. Mesure à l'appui : le contraste des titres tombait
   à 1,9–2,7 sur un voile léger, pour un plancher de 3,0, et même la teinte la plus
   sombre de la charte n'y suffisait pas. Le texte descend sous le bandeau : la
   photo est intacte, le texte est sur le crème, et le titre ne concurrence plus
   le « MAISON VÉNUS » peint sur les murs photographiés. */

/* Le bloc de texte est sous le bandeau, sur le crème de la page : il n'a plus à
   se caler sur le bas d'une image ni à z-indexer par-dessus. */
.phero-inner{position:relative;width:100%;padding:26px var(--gout,28px) 0;max-width:1180px;margin:0 auto}


.phero .eyebrow{color:var(--peche)}
.phero h1{font-family:var(--font-serif);font-weight:400;color:var(--terracotta);
  font-size:clamp(32px,4.6vw,50px);line-height:1.1;margin:12px 0 10px;text-shadow:none}
.phero p{color:var(--encre-60);font-size:15px;max-width:560px}


.phero .mot{width:44px;height:44px;margin-bottom:4px;opacity:.9}
.phero.grand .phero-img{height:clamp(240px,32vw,360px)}
/* Chaque hero garde sa teinte en fond d'attente, sous la photo. Elle reste
   visible tant que l'image n'est pas arrivée, et pour les routes qui n'en ont
   pas encore. */
#planning .phero-titre .mot,
#actualites .phero-titre .mot{--mv:#7E8A6E;color:#7E8A6E}
.route.has-hero{padding-block:0 30px}
/* ⚠️ **L'en-tête est collant, donc dans le flux : au repos il ne recouvre rien.**
   Il ne masquait le titre du hero que lorsqu'on **arrive par une adresse à
   fragment** — le navigateur fait alors défiler la route dans la vue, et elle
   passe sous lui. Quatre routes sur six avaient leur titre invisible en petit
   format, sur ordinateur le titre étant poussé depuis le bas par
   `padding-bottom:112px`.
   ⚠️ **Ma première correction réservait la hauteur de l'en-tête en rembourrage**,
   ce qui la réservait *aussi au repos* : 126 px de crème morte au-dessus du
   titre, sur un bandeau qui n'en fait que 304. `scroll-margin-top` dit au
   navigateur où s'arrêter quand il fait défiler cet élément dans la vue — elle ne
   coûte aucune place le reste du temps. */
.route{scroll-margin-top:calc(var(--h-mode-test, 0px) + var(--h-entete) + 9px)}
@media(max-width:680px){
  /* ⚠️ 240 px de bande pour 192 px de texte : la photographie n'avait plus que
     48 px pour exister. On lui laisse de quoi se voir sous le texte, qui reste
     calé en bas. */
  .phero.grand .phero-img{height:auto;min-height:340px}
  .phero-inner{padding-top:20px}
  .phero p{font-size:13.5px}
  .phero .mot{width:32px;height:32px;margin-bottom:2px}
  .phero h1{font-size:32px;margin:8px 0 8px}
  .phero-img.ph::after{
    left:14px;right:14px;top:12px;bottom:auto;max-width:none;width:auto;
    font-size:7.5px;
  }
}

/* ---------- Barre d'ancres : posée sur le hero, puis figée en haut ---------- */
.ancres{
  position:sticky;top:calc(var(--h-entete) + var(--h-mode-test));z-index:41;
  /* ⚠️ Elle remontait de 124 px pour se poser **dans** le hero, du temps où le
     texte y était. Le texte est descendu ; elle suit, sans chevauchement. */
  margin-top:6px;
  transition:background .3s, box-shadow .3s, margin .3s;
}
.ancres-in{
  display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;
  padding-block:16px;align-items:center;
}
.ancres-in::-webkit-scrollbar{display:none}
/* ⚠️ **Un seul traitement : l'encre sombre sur pastille claire.** Les liens
   inactifs étaient en quasi-blanc (`--blanc` sur 14 % de blanc), un reste de
   l'époque où le hero était sombre — or la cliente a tranché pour la variante
   claire et « il n'y a plus de variante ». Sur un hero pâle, et plus encore sur
   une photographie, cette navigation était **illisible** : du blanc sur du clair.
   La classe `.claire`, écrite pour la page Tarifs, était déjà la bonne ; elle
   devient la règle.
   ⚠️ **Mais son état actif ne la suit pas.** `.claire` peignait l'actif en
   terracotta plein avec du texte blanc : 3,6:1, sous le plancher de 4,5 exigé
   pour du texte courant. L'actif garde donc le blanc plein et l'encre du
   traitement d'origine, qui lui est très au-dessus. */
.ancres a{
  flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(34,34,33,.25);color:var(--encre);
  background:rgba(253,250,245,.72);backdrop-filter:blur(6px);transition:.22s;
}
.ancres a:hover,.ancres a.actif{background:var(--blanc);color:var(--encre);border-color:var(--encre-60)}

/* Une fois figée sous le header */
.ancres.figee{
  margin-top:6px;
  background:rgba(247,239,230,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,122,83,.22);
  box-shadow:0 10px 24px -20px rgba(34,34,33,.4);
}
.ancres.figee a{
  border-color:rgba(34,34,33,.18);color:var(--encre-60);background:transparent;backdrop-filter:none;
}
.ancres.figee a:hover{border-color:var(--terracotta);color:var(--encre);background:transparent}
.ancres.figee a.actif{background:var(--accent-soft);border-color:var(--terracotta);color:var(--terracotta-2)}

/* Sections d'une page thématique : fonds alternés */
.sect{padding-block:56px 44px;scroll-margin-top:142px;position:relative}
/* une section sur deux prend le fond crème profond */
.sect:nth-of-type(even){background:var(--creme-2)}
.sect:nth-of-type(even)::before,
.sect:nth-of-type(even)::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(196,122,83,.18);
}
.sect:nth-of-type(even)::before{top:0}
.sect:nth-of-type(even)::after{bottom:0}

/* Bande alternée sur les pages sans sous-sections */
.bande{position:relative;isolation:isolate}
.bande::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--creme-2);
  border-block:1px solid rgba(196,122,83,.18);
  width:100vw;left:50%;transform:translateX(-50%);
}
@media(max-width:680px){
  /* ⚠️ Elle remontait de 96 px pour se poser **dans** le bandeau, du temps où le
     texte y flottait plus haut. Le texte occupe désormais le bas de la bande :
     elle mangeait 44 px du sous-titre. Elle suit le bandeau, elle n'y entre plus. */
  /* ⚠️ Le `top` n'est plus redéclaré ici : la version mobile valait `76px` sec,
     sans `--h-mode-test`, donc la barre se collait 33 px sous l'en-tête dès que
     le bandeau de mode test était là. Seule la marge diffère selon le format. */
  .ancres{margin-top:8px}
  .ancres.figee{margin-top:8px}
  .ancres-in{padding-block:13px;gap:7px}
  .ancres a{font-size:9.5px;padding:9px 14px}
  .sect{padding-block:42px 34px;scroll-margin-top:132px}
}

/* ---------- Emplacements photo (mode maquette) ---------- */
.ph{position:relative;overflow:hidden}
.ph::after{
  content:attr(data-ph);
  position:absolute;left:8px;right:8px;bottom:8px;
  font-family:var(--font-sans);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;line-height:1.35;
  color:rgba(34,34,33,.62);background:rgba(253,250,245,.86);
  border:1px dashed rgba(196,122,83,.55);border-radius:8px;
  padding:5px 7px;text-align:center;pointer-events:none;
}
body.no-ph .ph::after{display:none}
.phero-img.ph::after{
  left:auto;right:16px;top:16px;bottom:auto;width:auto;max-width:min(340px,60%);
  background:rgba(253,250,245,.92);
}
/* Bandeau photo d'accueil */
/* Galerie du lieu */
/* Encadré récapitulatif */
.ph-legend{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px dashed rgba(196,122,83,.5);border-radius:14px;
  padding:12px 16px;margin-top:18px;font-size:12px;color:var(--encre);
}
.ph-legend b{font-family:var(--font-serif);font-size:16px;font-weight:600}
.ph-toggle{
  border:1px solid var(--terracotta);background:none;color:var(--terracotta);
  border-radius:999px;padding:6px 14px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;margin-left:auto;
}
.ph-toggle:hover{background:var(--terracotta);color:var(--blanc)}
@media(max-width:680px){
  .ph::after{font-size:7.5px;padding:4px 5px}
}

/* ---------- Routeur ---------- */
.route{display:none}
.route.on{display:block;animation:routeIn .34s cubic-bezier(.25,.8,.3,1) both}
/* Une fois l'animation terminée on retire l'animation : sinon la transformation
   résiduelle décale tout élément en position fixe placé à l'intérieur. */
.route.on.pose{animation:none}
@keyframes routeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .route.on{animation:none} }
.nav-links a.actif{opacity:1;font-weight:600;color:var(--terracotta-2)}
  .mobile-menu a.actif{color:var(--terracotta)}

/* ---------- Boutique ---------- */
.shop-cats{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 22px}
.cat{border:1.5px solid rgba(34,34,33,.16);background:var(--blanc);border-radius:999px;padding:9px 18px;font-size:12px;font-weight:500;transition:.2s}
.cat:hover{border-color:var(--terracotta)}
.cat.on{border-color:var(--terracotta);background:var(--accent-soft);color:var(--terracotta-2);font-weight:600}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:90px 90px 16px 16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.prod:hover{transform:translateY(-4px);box-shadow:0 18px 34px -26px rgba(122,74,45,.35)}
.prod-vis{height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.prod-vis svg{width:42px;height:42px}
.prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:3px;flex:1;text-align:center}
.prod h3{font-size:19px;line-height:1.2}
.prod .crea{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);font-weight:600}
.prod .d{font-size:11.5px;color:var(--encre-60);flex:1;margin-top:5px}
.prod-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.prod .px{font-family:var(--font-serif);font-size:20px;color:var(--terracotta)}
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:46;background:var(--encre);color:var(--creme);border:none;border-radius:999px;padding:14px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;box-shadow:0 14px 30px -12px rgba(34,34,33,.5);transition:transform .2s}
.cart-fab:hover{transform:translateY(-2px)}
.cart-fab[hidden]{display:none}
.cart-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed rgba(34,34,33,.1);font-size:13px}
.qty{display:flex;gap:7px;align-items:center}
.qty button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(34,34,33,.2);background:var(--blanc);font-size:14px}
.cart-tot{display:flex;justify-content:space-between;margin:16px 0;font-size:15px;font-weight:600}
.livr{display:flex;gap:8px;margin:12px 0}
.livr button{flex:1;border:1.5px solid rgba(34,34,33,.16);background:var(--blanc);border-radius:12px;padding:11px 8px;font-size:11.5px;font-weight:500;transition:.2s}
.livr button.on{border-color:var(--terracotta);background:var(--accent-soft);color:var(--terracotta-2);font-weight:600}

/* ---------- Cartes cadeaux ---------- */
.gift{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,var(--peche),var(--rose));
  border-radius:24px;padding:36px 40px;margin-top:30px;
}
.gift-txt h3{font-size:29px;line-height:1.2;margin-bottom:10px}
.gift-txt p{font-size:14px;color:rgba(34,34,33,.72)}
.gift-form .shop-cats{margin-bottom:12px}
.gift-row{display:flex;gap:10px}
.gift-row input{
  flex:1;min-width:0;border:1.5px solid rgba(34,34,33,.18);border-radius:999px;
  padding:13px 20px;font-family:inherit;font-size:14px;background:var(--blanc);
}
.gift-row input:focus{outline:none;border-color:var(--terracotta)}
.gift-row .btn{flex:none}
.gift-code{
  background:var(--blanc);border:1.5px dashed var(--terracotta);border-radius:14px;
  padding:14px;text-align:center;margin-top:12px;
}
.gift-code b{font-family:var(--font-serif);font-size:23px;letter-spacing:.13em;color:var(--terracotta)}
.gift-code small{display:block;font-size:11px;color:var(--encre-60);margin-top:4px}

.sous-titre{
  font-family:var(--font-serif);font-weight:400;font-size:27px;
  margin:44px 0 4px;
}
.coffrets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.coffret{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:20px;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:6px;text-align:center;
  transition:transform .25s,box-shadow .25s;
}
.coffret:hover{transform:translateY(-4px);box-shadow:0 20px 38px -26px rgba(122,74,45,.4)}
.coffret svg{width:40px;height:40px;margin:0 auto 8px}
.coffret h4{font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1.2}
.coffret p{font-size:12.5px;color:var(--encre-60);flex:1;margin:4px 0 12px}
.coffret .px{font-family:var(--font-serif);font-size:28px;color:var(--terracotta);margin-bottom:12px}

/* ---------- Timeline animée ---------- */
.tl{position:relative;margin-top:34px;--tl-gap:22px;--tl-pt:40px}
/* Un segment entre chaque étape, aligné sur la même grille */
.tl-rails{
  position:absolute;top:19px;left:0;right:0;z-index:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tl-gap);
}
.tl-seg{
  display:block;height:2px;border-radius:2px;overflow:hidden;
  background:transparent;            /* aucun trait avant le passage */
  margin-left:var(--tl-pt);
  width:calc(100% + var(--tl-gap) - var(--tl-pt));
}
/* le dégradé de chaque segment reprend celui des filets sous les titres */
.tl-seg i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,
    var(--terracotta) 0%, var(--terracotta-2) 35%, var(--rose) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .85s linear;   /* linéaire : durée identique d'un segment à l'autre */
}
.tl-seg.on i{transform:scaleX(1)}
.tl-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tl-gap);position:relative;z-index:1}
.tl-et{display:flex;flex-direction:column;gap:12px}
.tl-pt{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--terracotta);border:2px solid var(--terracotta);color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:18px;font-weight:600;
  /* apparaît au passage du trait */
  opacity:0;transform:scale(.55);
  transition:opacity .5s ease, transform .5s cubic-bezier(.3,1.5,.5,1);
}
.tl-et p{
  font-size:13.5px;color:var(--encre-60);padding-right:14px;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s, transform .6s;
}
/* chaque étape apparaît à son tour, au passage du trait */
.tl.vue .tl-et.on .tl-pt{opacity:1;transform:scale(1)}
.tl.vue .tl-et.on p{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .tl-seg i{transform:none;transition:none}
  .tl-pt{opacity:1;transform:none;transition:none}
  .tl-et p{opacity:1;transform:none;transition:none}
}
@media(max-width:900px){
  .tl{--tl-gap:26px}
  .tl-rails{
    top:0;bottom:0;left:19px;right:auto;width:2px;
    grid-template-columns:none;grid-auto-rows:1fr;
  }
  .tl-seg{
    width:2px;height:auto;margin-left:0;margin-top:var(--tl-pt);
    margin-bottom:calc(var(--tl-pt) - var(--tl-gap));
  }
  .tl-seg i{width:100%;height:100%;transform:scaleY(0);transform-origin:center top;
    background:linear-gradient(180deg,
      var(--terracotta) 0%, var(--terracotta-2) 35%, var(--rose) 100%);}
  .tl-seg.on i{transform:scaleY(1)}
  .tl-etapes{grid-template-columns:1fr;gap:var(--tl-gap)}
  .tl-et{flex-direction:row;align-items:flex-start;gap:16px}
  .tl-et p{padding-top:9px;padding-right:0}
}

@media(max-width:1000px){
  .gift{grid-template-columns:1fr;gap:22px;padding:30px 26px}
  .coffrets-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .gift-txt h3{font-size:25px}
}

/* ---------- Journal ---------- */
.art-mosaique{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:36px;align-items:stretch}
.art-cotes{display:grid;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:20px}
.art-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}

.art{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;text-align:left;
  transition:transform .3s cubic-bezier(.25,.8,.3,1), box-shadow .3s;
}
.art:hover{transform:translateY(-5px);box-shadow:0 24px 44px -28px rgba(122,74,45,.45)}
.art-vis{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;
}
.art-vis svg{width:44px;height:44px;transition:transform .5s cubic-bezier(.25,.8,.3,1)}
.art:hover .art-vis svg{transform:scale(1.09)}
.art-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:7px}
.art h3{font-size:22px;line-height:1.2;transition:color .2s}
.art:hover h3{color:var(--terracotta-2)}
.art .ex{font-size:12.5px;color:var(--encre-60);flex:1}
.art-meta{font-size:11px;color:var(--encre-60);margin-top:4px}

/* catégorie et durée posées sur l'image */
.art-cat{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(253,250,245,.92);color:var(--terracotta);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:999px;
}
.art-duree{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(34,34,33,.42);color:var(--blanc);backdrop-filter:blur(4px);
  font-size:9.5px;letter-spacing:.08em;font-weight:600;padding:4px 10px;border-radius:999px;
}
/* ruban diagonal dans le coin */
.art-ruban{
  position:absolute;top:20px;right:-52px;z-index:3;width:180px;text-align:center;
  background:var(--terracotta);color:var(--blanc);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:6px 0;transform:rotate(45deg);
  box-shadow:0 6px 16px -8px rgba(34,34,33,.5);
}

/* article à la une */
.art-une{grid-row:span 1}
.art-une .art-vis{aspect-ratio:16/9}
.art-une .art-vis svg{width:74px;height:74px}
.art-une .art-body{padding:26px 28px 28px;gap:9px;justify-content:center}
.art-une h3{font-size:31px;line-height:1.15}
.art-une .ex{font-size:14px;flex:none}
.art-une .art-ruban{top:26px;right:-56px;width:200px;font-size:9.5px;padding:7px 0}

.art-petit .art-vis{aspect-ratio:16/9}
.art-petit .art-vis svg{width:34px;height:34px}
.art-petit .art-body{padding:16px 17px 18px;gap:5px}
.art-petit h3{font-size:17px;line-height:1.22}
.art-petit .ex{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-petit .art-cat{font-size:8px;padding:4px 9px;left:11px;top:11px}
.art-petit .art-duree{font-size:8.5px;padding:3px 8px;left:11px;bottom:11px}

.art-plus{display:flex;justify-content:center;margin-top:32px}
.art-reste{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--terracotta);color:var(--blanc);border-radius:999px;
  min-width:19px;height:19px;font-size:9.5px;font-weight:600;margin-left:8px;padding:0 5px;
}
.art-fin{font-size:12.5px;color:var(--encre-60);font-style:italic}

@media(max-width:1000px){
  .art-mosaique{grid-template-columns:1fr;gap:18px}
  .art-cotes{grid-template-rows:none;grid-template-columns:repeat(2,1fr);gap:18px}
  .art-suite{grid-template-columns:repeat(2,1fr);gap:18px}
  .art-une h3{font-size:26px}
}
@media(max-width:680px){
  .art-cotes,.art-suite{grid-template-columns:1fr}
  .art-une h3{font-size:23px}
  .art-petit h3{font-size:19px}
  .art-petit .ex{font-size:12.5px}
}

/* ---------- Contact ---------- */
.ct-carte{
  display:grid;grid-template-columns:1.6fr 1fr;gap:0;margin-top:30px;
  border-radius:24px;overflow:hidden;border:1px solid rgba(34,34,33,.08);
}
.ct-map{
  background:linear-gradient(150deg,#E4E8DC,#C3CDB6);min-height:340px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.ct-map svg{width:56px;height:56px;opacity:.8}
.ct-map span{font-size:11.5px;color:rgba(34,34,33,.55);letter-spacing:.06em}
.ct-adresse{
  background:var(--blanc);padding:38px 34px;
  display:flex;flex-direction:column;justify-content:center;
}
.ct-adresse h3{font-size:29px;line-height:1.2;margin:10px 0 6px}
.ct-ville{font-size:13.5px;color:var(--encre-60)}
.ct-detail{font-size:13px;color:var(--encre-60);margin:12px 0 20px}
.ct-adresse .btn{align-self:flex-start}

.ct-infos{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:22px;
  margin-top:16px;overflow:hidden;
}
.ct-info{
  display:flex;align-items:center;gap:14px;padding:20px 24px;text-align:left;
  border-right:1px dashed rgba(196,122,83,.22);
  border-bottom:1px dashed rgba(196,122,83,.22);
  transition:background .2s;
}
.ct-info:nth-child(3n){border-right:none}
.ct-info:nth-last-child(-n+3){border-bottom:none}
a.ct-info:hover{background:var(--creme)}
.ct-ico{
  width:38px;height:38px;border-radius:50%;flex:none;background:var(--accent-soft);color:var(--terracotta-2);
  display:flex;align-items:center;justify-content:center;
}
.ct-ico svg{width:18px;height:18px}
.ct-txt{min-width:0}
.ct-lbl{
  display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--encre-60);margin-bottom:2px;
}
.ct-info b{font-size:14px;font-weight:500;color:var(--encre);word-break:break-word}

.ct-bas{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:24px;align-items:stretch}
.ct-form{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:24px;padding:32px 34px}
.ct-form h3{font-size:28px;margin:10px 0 6px;line-height:1.2}
.ct-form-sous{font-size:13.5px;color:var(--encre-60);margin-bottom:22px}
.ct-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-cote{display:flex;flex-direction:column;gap:18px;height:100%}
.ct-cote .ct-bloc{flex:1;display:flex;flex-direction:column;justify-content:center}
.ct-bloc{background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:24px;padding:28px}
.ct-bloc h4{font-family:var(--font-serif);font-weight:400;font-size:24px;margin:10px 0 8px;line-height:1.2}
.ct-bloc p{font-size:13px;color:var(--encre-60);margin-bottom:16px}
.ct-bloc-accent{background:var(--accent-soft);border-color:rgba(196,122,83,.35)}
.ct-bloc .btn{align-self:flex-start}
.ct-social{display:flex;flex-direction:column;gap:8px}
.ct-social a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
  background:var(--creme);border:1px solid transparent;color:var(--encre);
  font-size:13.5px;transition:.2s;
}
.ct-social a:hover{border-color:var(--terracotta);background:var(--accent-soft);color:var(--terracotta-2)}
.ct-social svg{width:20px;height:20px;color:var(--terracotta-2);flex:none}

.faq-groupe{margin-bottom:26px}
.faq-groupe:last-child{margin-bottom:0}
.faq-cat{
  font-family:var(--font-sans);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--terracotta);
  margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid rgba(196,122,83,.25);
}
.faq-item{border-bottom:1px solid rgba(34,34,33,.1)}
.faq-item:last-child{border:none}
.faq-btn{
  width:100%;text-align:left;background:none;border:none;padding:15px 30px 15px 0;
  font-family:var(--font-serif);font-size:19px;position:relative;
}
.faq-btn::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--terracotta);font-family:var(--font-sans);font-size:18px}
.faq-item.open .faq-btn::after{content:"−"}
.lien-faq{
  background:none;border:none;padding:0;font:inherit;color:var(--terracotta-2);
  text-decoration:underline;text-underline-offset:2px;
}
.lien-faq:hover{color:var(--terracotta)}
.faq-rep{display:none;font-size:13.5px;color:var(--encre-60);padding:0 0 16px}
.faq-item.open .faq-rep{display:block}

@media(max-width:1000px){
  .ct-bas{align-items:start}
  .ct-cote{height:auto}
  .ct-cote .ct-bloc{flex:none}
  .ct-carte{grid-template-columns:1fr}
  .ct-map{min-height:240px}
  .ct-infos{grid-template-columns:repeat(2,1fr)}
  .ct-bas{grid-template-columns:1fr}
}
@media(max-width:680px){
  .ct-infos{grid-template-columns:1fr}
  .ct-info{border-right:none}
  .ct-info:nth-last-child(-n+3){border-bottom:1px dashed rgba(196,122,83,.22)}
  .ct-info:last-child{border-bottom:none}
  .ct-duo{grid-template-columns:1fr}
  .ct-form,.ct-bloc{padding:24px 20px}
  .ct-adresse{padding:28px 22px}
}

/* ---------- Découvrir ---------- */
.valeurs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.valeur{background:var(--creme);border-radius:16px;padding:20px;text-align:center}
.valeur svg{width:34px;height:34px;margin:0 auto 10px}
.valeur h4{font-size:19px;margin-bottom:5px}
.valeur p{font-size:12px;color:var(--encre-60)}

/* ---------- Bandeau cookies ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cookies);
  background:rgba(247,239,230,.97);backdrop-filter:blur(12px);
  border-top:1px solid rgba(196,122,83,.28);
  padding:11px 0 calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 40px -30px rgba(34,34,33,.4);
}
.cookies[hidden]{display:none}
/* Le bandeau est à z-index 95, donc au-dessus de toutes les surfaces modales
   (.ov 70, .page 72, .drawer 73, .bo 90). Sur un écran court il recouvre leurs
   commandes : sur Pixel 7 il occupe 259 px de haut sur 839 et interceptait les
   clics sur le second bouton de choix de rôle de l'espace professionnel.

   On ne le descend pas sous les modales : il resterait peint derrière leur
   voile translucide, ce qui se lit comme un défaut d'affichage. On le masque
   tant qu'une surface modale est ouverte — `body.locked` est précisément ce
   signal, posé par chacune d'elles.

   Masquer n'est pas consentir : le bandeau revient intact à la fermeture, et
   l'état du consentement n'est pas touché. On ne demande pas un consentement
   cookies pendant qu'une administratrice ouvre son back-office. */
body.locked .cookies{display:none}
.cookies-inner{
  max-width:1180px;margin:0 auto;padding-inline:28px;
  display:flex;align-items:center;gap:22px;
}
/* ⚠️ **Le titre est sur la même ligne que le texte.** Empilés, ils faisaient
   deux lignes de plus qu'il n'en fallait : le bandeau montait à une centaine de
   pixels et recouvrait les deux boutons d'appel de l'accueil — c'est-à-dire ce
   pour quoi la page existe. « Votre vie privée » tient en trois mots ; il n'a
   pas besoin de sa propre ligne. */
.cookies-txt{flex:1;min-width:0;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:4px 14px}
.cookies h4{font-size:15px;margin:0;flex:none}
/* ⚠️ `flex:1;min-width:0` : sans quoi le paragraphe, trop long pour tenir à
   côté du titre, passe à la ligne **en entier** — et le bandeau reprend la
   hauteur qu'on venait de lui retirer. Il doit se réduire, pas se déplacer. */
.cookies p{font-size:12px;color:var(--encre-60);margin:0;flex:1;min-width:0}
.cookies-btns{display:flex;gap:8px;flex:none}
.cookies-btns .btn{
  padding:9px 18px;font-size:10.5px;letter-spacing:.12em;white-space:nowrap;
}
.ck-detail-wrap{max-width:1180px;margin:0 auto;padding:0 28px 12px}
.ck-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;border-bottom:1px dashed rgba(34,34,33,.1)}
.ck-line:last-child{border:none}
.sw{width:42px;height:24px;border-radius:99px;background:rgba(34,34,33,.18);border:none;position:relative;transition:.25s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.sw.on{background:var(--sauge)}
.sw.on::after{left:21px}
.sw:disabled{opacity:.55;cursor:not-allowed}

@media(max-width:1000px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .valeurs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .cookies-inner{flex-direction:column;align-items:stretch;gap:10px}
  .cookies-btns{flex-wrap:wrap}
  .cookies-btns .btn{flex:1 1 auto;min-width:0;text-align:center;padding:11px 14px;white-space:normal}
}
/* ⚠️ **Trois boutons empilés prenaient 225 px sur un écran de 812** — plus d'un
   quart de la hauteur, et les deux appels de l'accueil disparaissaient
   dessous. Or ce sont eux qui font la page.

   « Refuser » et « Tout accepter » restent **côte à côte et de même taille** :
   le RGPD demande que refuser soit aussi simple qu'accepter, et deux boutons
   de largeurs différentes ne le sont pas. « Personnaliser » devient un lien —
   c'est un troisième choix, pas un choix de même rang, et lui rendre sa ligne
   coûtait quarante pixels. */
@media(max-width:560px){
  /* ⚠️ **Sur un téléphone, chaque ligne se paie.** Le titre prenait la sienne,
     le texte trois, les boutons deux : le bandeau mangeait un tiers de l'écran
     et recouvrait l'appel à réserver. Or ce bandeau n'est pas le sujet de la
     page — c'est une formalité qu'on veut expédier.

     Le titre disparaît : « Votre vie privée » sous un bandeau de cookies
     n'apprend rien que le texte ne dise déjà. Le texte se réduit à l'essentiel
     — ce qu'on dépose, et qu'on peut revenir dessus. « Personnaliser » se range
     à côté de lui, en lien, puisque c'est le choix qu'on prend rarement. */
  .cookies{padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .cookies-inner{gap:9px;padding-inline:18px}
  .cookies h4{display:none}
  .cookies-txt{display:block}
  .cookies p{font-size:11.5px;line-height:1.5}
  .cookies-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cookies-btns .btn{width:auto;letter-spacing:.12em;padding:11px 8px}
  /* ⚠️ « Personnaliser » reste un **lien**, au-dessus des deux vrais choix.
     Ma première tentative le posait en `absolute` dans un coin : il passait
     sous les boutons dès que le texte gagnait une ligne. Une ligne de dix-huit
     pixels, discrète, coûte moins qu'un chevauchement. */
  .cookies-btns #ckSet{
    grid-column:1 / -1;order:-1;justify-self:start;
    border:0;background:none;padding:0;
    font-size:11px;letter-spacing:.04em;text-transform:none;text-decoration:underline;
    color:var(--encre-60);line-height:1.4;
  }
}
@media(max-width:860px){
  .tbl-wrap{
    position:relative;
    background:linear-gradient(90deg, var(--blanc) 30%, rgba(253,250,245,0)),
               linear-gradient(270deg, var(--blanc) 30%, rgba(253,250,245,0)) 100% 0,
               radial-gradient(farthest-side at 0 50%, rgba(34,34,33,.14), transparent),
               radial-gradient(farthest-side at 100% 50%, rgba(34,34,33,.14), transparent) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  .tbl{min-width:520px}
  .tbl th,.tbl td{padding:9px 11px;white-space:nowrap}
  /* ⚠️ 64 px laissaient 62 px utiles pour un contenu qui en demande 68 : la
     valeur se rognait encore, sans les flèches cette fois. Un champ qui ampute
     un prix est un champ qui ment, quelle que soit la cause.

     Depuis que l'unité est sortie du champ, c'est la **cellule** qu'il faut
     desserrer : le champ prend ce que la grille lui laisse. */
  .tbl td{padding:10px 8px}
  .tbl td .inp{width:auto;min-width:56px}
  .tbl .fs-unite{grid-template-columns:minmax(56px,1fr) auto;gap:5px}
}
@media(max-width:680px){
  .cookies{bottom:74px}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .valeurs{grid-template-columns:1fr}
  .cart-fab{bottom:84px;right:16px}
}

/* ---------- Responsive ---------- */
@media(max-width:1200px){
  .nav-links{display:none}
  .burger{display:block}
}
@media(max-width:1000px){
  .valeurs-home{grid-template-columns:1fr!important}
  .prat-grid,.tarif-grid{grid-template-columns:repeat(2,1fr)}
  .profs-grid{grid-template-columns:repeat(2,1fr)}
  .page-cols{grid-template-columns:1fr}
  .sticky-blk{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .bo{flex-direction:column}
  .bo-side{
    width:100%;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;
    overflow:visible;border-right:none;border-bottom:1px solid rgba(196,122,83,.22);
  }
  .bo-brand{order:1;padding:11px 14px;flex:1;min-width:0;gap:9px}
  .bo-brand span{
    font-size:13px;letter-spacing:.12em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .bo-brand svg{width:26px;height:26px;flex:none}
  .bo-role{
    order:3;display:block;flex-basis:100%;padding:0 14px 9px;font-size:8.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .bo-quit{order:2;margin:0 14px 0 8px;flex:none;padding:8px 16px;font-size:9px}
  /* en bandeau horizontal, le repli n'a pas de sens */
  .bo-replier{display:none}
  /* la largeur de 100 % vaut pour la barre verticale : ici, chaque onglet
     ne prend que la place de son contenu */
  .bo-tab{width:auto;flex:none;gap:7px;border-left:none;padding:13px 14px}
  .bt-lbl{flex:none}
  .bt-ico{width:16px;height:16px}
  .bt-ico svg{width:16px;height:16px}
  #boTabs{
    order:4;flex-basis:100%;flex-direction:row;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(196,122,83,.18);
    scrollbar-width:none;
  }
  #boTabs::-webkit-scrollbar{display:none}
  .bo-tab{
    white-space:nowrap;flex:none;border-left:none;
    border-bottom:3px solid transparent;padding:13px 14px;font-size:10px;
  }
  .bo-tab.on{border-color:var(--terracotta)}
  .bo-main{padding:22px 18px 50px}
}
@media(max-width:680px){
  .section-pad{padding-block:60px 22px}
  .prat-grid,.tarif-grid,.profs-grid,.exp-grid{grid-template-columns:1fr}
  .sticky-cta{display:block}
  body{padding-bottom:74px}
  .sheet-body{padding:22px 18px 28px}
  .sheet-head,.sheet-foot{padding:14px 18px}
  .page-hero{gap:20px;padding:30px 0 12px}
  .page-hero-visuel{width:120px;height:120px}
  .page-hero-visuel svg{width:52px;height:52px}
  .seance{gap:12px;padding:13px 14px}
  .sc-h{width:54px;font-size:19px}
  .sc-main b{font-size:18px}
  .frise svg:nth-child(n+6){display:none}
  .foot-grid{grid-template-columns:1fr}
  .tbl{font-size:11.5px}
  .tbl th,.tbl td{padding:8px 10px}
}

/* ---------- Teintes de hero ----------
   Chaque paire de pages partage sa teinte : brun sable pour La Maison et la
   Boutique, rose profond pour Nos offres et Contact, vert sauge pour le
   Planning et les Actualités (docs/CONTEXTE.md §13). Ces dégradés étaient
   répétés en attributs style=, avec leurs hexadécimaux en dur. */
.phero-sable{background:linear-gradient(180deg,var(--creme) 0%,var(--peche) 52%,var(--sable-profond) 100%)}
.phero-rose{background:linear-gradient(180deg,var(--creme-2) 0%,var(--peche) 52%,var(--rose) 100%)}
.phero-sauge{background:linear-gradient(180deg,var(--creme-2) 0%,var(--sauge-clair) 55%,var(--sauge-profond) 100%)}

/* La règle qui coûte de l'argent, sur la carte et plus seulement sur la fiche.
   Discrète — elle informe, elle ne crie pas. */
.exp-hp{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--encre-60)}

/* Aperçu du pâle dérivé, dans le formulaire de pratique. La teinte claire n'est
   plus un champ : elle se calcule, et on montre ce qu'on obtient. */
.pq-pale{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--encre)}
.pq-pale i{width:26px;height:26px;border-radius:7px;flex:none;
  border:1px solid rgba(34,34,33,.16)}
.pq-pale-note{display:block;margin-top:5px;font-size:11px;color:var(--encre-60);line-height:1.4}

/* =====================================================================
   CALENDRIER DE SAISIE
   -----------------------------------------------------------------
   Le calendrier natif n'est ni stylable ni traduisible : il est dessiné
   par le navigateur, hors du DOM. Celui-ci est à nous — donc en français
   et à la charte. Voir core/calendrier.js pour le contrat de l'élément.
   ===================================================================== */

.cal{position:relative;display:inline-flex;align-items:center;gap:0;max-width:168px}
.cal-champ.cal-champ{width:100%;padding-right:32px;font-variant-numeric:tabular-nums}

/* Le bouton se pose **dans** le champ plutôt qu'à côté : accolé, il élargit la
   ligne d'une trentaine de pixels, et huit champs sur dix vivent dans une
   colonne déjà étroite. */
.cal-ouvre{
  position:absolute;right:1px;top:1px;bottom:1px;width:30px;
  display:grid;place-items:center;
  border:0;border-radius:0 8px 8px 0;background:none;cursor:pointer;
  color:var(--accent);opacity:.6;transition:opacity .18s ease;
}
.cal-ouvre:hover,.cal-ouvre[aria-expanded="true"]{opacity:1}
.cal-ouvre svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.cal-pop{
  position:fixed;z-index:var(--z-popover);
  width:266px;padding:12px;
  background:var(--blanc);color:var(--encre);
  border:1px solid rgba(34,34,33,.12);border-radius:14px;
  box-shadow:0 14px 40px rgba(34,34,33,.16);
  font-family:var(--font-sans);
}
.cal-pop[hidden]{display:none}

.cal-tete{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.cal-mois{
  flex:1;text-align:center;font-family:var(--font-serif);font-size:16px;
  font-weight:500;letter-spacing:.01em;
}
.cal-nav{
  width:26px;min-width:26px;height:26px;min-height:26px;padding:0;flex:none;
  display:grid;place-items:center;
  border:1px solid rgba(34,34,33,.14);border-radius:7px;
  background:var(--blanc);color:var(--encre-60);
  font-size:13px;line-height:1;cursor:pointer;transition:all .15s ease;
}
.cal-nav:hover{background:var(--creme);color:var(--accent);border-color:var(--accent)}

.cal-grille{width:100%;border-collapse:collapse;table-layout:fixed}
.cal-grille th{
  padding:4px 0 6px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--encre-60);
}
.cal-grille td{padding:1px;text-align:center}
.cal-c{
  width:100%;aspect-ratio:1;padding:0;
  border:1px solid transparent;border-radius:8px;
  background:none;color:var(--encre);
  font-family:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.cal-c:hover{background:var(--creme)}
.cal-hors{color:rgba(34,34,33,.3)}
/* Aujourd'hui se signale par un contour, la sélection par un aplat : deux
   faits différents, deux traitements différents — une seule case peut être
   les deux à la fois. */
.cal-auj{border-color:var(--accent)}
.cal-sel.cal-sel{background:var(--accent);color:var(--blanc);border-color:var(--accent)}

.cal-pied{
  display:flex;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(34,34,33,.1);
}
.cal-act{
  flex:1;padding:6px 0;
  border:1px solid rgba(34,34,33,.14);border-radius:8px;
  background:var(--blanc);color:var(--encre-60);
  font-family:inherit;font-size:11.5px;cursor:pointer;transition:all .15s ease;
}
.cal-act:hover{background:var(--creme);color:var(--accent);border-color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .cal-ouvre,.cal-nav,.cal-c,.cal-act{transition:none}
}

/* =====================================================================
   UTILITAIRES
   -----------------------------------------------------------------
   Traduction fidèle des attributs style= que la CSP interdit. Chaque
   classe porte exactement une déclaration, et son nom la décrit : la
   correspondance est mécanique, donc vérifiable.

   Le sélecteur est doublé (.u-x.u-x) pour porter la spécificité à 0,2,0.
   Un attribut style= l'emportait sur n'importe quelle règle de composant ;
   une classe simple, elle, perdrait contre .bloc .element. Le doublement
   restitue ce rapport de force sans recourir à !important.

   Une passe sémantique reste possible plus tard : replier ces déclarations
   dans les classes de composant lorsqu'elles valent pour toutes leurs
   instances. Ce n'était pas le sujet de cette PR, qui vise la conformité
   CSP à comportement strictement constant.
   ===================================================================== */

/* align-items */
.u-ai-center.u-ai-center{align-items:center}

/* aspect-ratio */
.u-ar-1-1.u-ar-1-1{aspect-ratio:1/1}
.u-ar-16-9.u-ar-16-9{aspect-ratio:16/9}

/* background */
.u-bg-f6e3d6.u-bg-f6e3d6{background:#F6E3D6}
.u-bg-linear-gradient-150deg-f2dbcb-c9a98f.u-bg-linear-gradient-150deg-f2dbcb-c9a98f{background:linear-gradient(150deg,#F2DBCB,#C9A98F)}
.u-bg-terracotta.u-bg-terracotta{background:var(--terracotta)}

/* border-color */
.u-bc-rgba-196-122-83-_4.u-bc-rgba-196-122-83-_4{border-color:rgba(196,122,83,.4)}
.u-bc-terracotta.u-bc-terracotta{border-color:var(--terracotta)}

/* border-radius */
.u-br-12.u-br-12{border-radius:12px}
.u-br-20.u-br-20{border-radius:20px}

/* border-top */
.u-bt-1_5-solid-encre.u-bt-1_5-solid-encre{border-top:1.5px solid var(--encre)}

/* border-width */
.u-bw-1_5.u-bw-1_5{border-width:1.5px}

/* bottom */
.u-bottom-neg-60.u-bottom-neg-60{bottom:-60px}

/* box-sizing */
.u-bs-border-box.u-bs-border-box{box-sizing:border-box}

/* color */
.u-c-blanc.u-c-blanc{color:var(--blanc)}
.u-c-encre-60.u-c-encre-60{color:var(--encre-60)}
.u-c-sauge.u-c-sauge{color:var(--sauge)}
.u-c-terracotta.u-c-terracotta{color:var(--terracotta)}
.u-c-terracotta-2.u-c-terracotta-2{color:var(--terracotta-2)}

/* display */
.u-d-block.u-d-block{display:block}
.u-d-flex.u-d-flex{display:flex}
.u-d-grid.u-d-grid{display:grid}

/* flex */
.u-fx-1.u-fx-1{flex:1}

/* flex-wrap */
.u-fwr-wrap.u-fwr-wrap{flex-wrap:wrap}

/* font-family */
.u-ff-serif.u-ff-serif{font-family:'Cormorant Garamond',serif}

/* font-size */
.u-fs-11.u-fs-11{font-size:11px}
.u-fs-11_5.u-fs-11_5{font-size:11.5px}
.u-fs-12.u-fs-12{font-size:12px}
.u-fs-12_5.u-fs-12_5{font-size:12.5px}
.u-fs-13.u-fs-13{font-size:13px}
.u-fs-13_5.u-fs-13_5{font-size:13.5px}
.u-fs-15.u-fs-15{font-size:15px}
.u-fs-19.u-fs-19{font-size:19px}
.u-fs-20.u-fs-20{font-size:20px}
.u-fs-21.u-fs-21{font-size:21px}
.u-fs-22.u-fs-22{font-size:22px}
.u-fs-24.u-fs-24{font-size:24px}
.u-fs-26.u-fs-26{font-size:26px}
.u-fs-29.u-fs-29{font-size:29px}
.u-fs-clamp-30-4_6vw-44.u-fs-clamp-30-4_6vw-44{font-size:clamp(30px,4.6vw,44px)}
.u-fs-clamp-30-4_6vw-46.u-fs-clamp-30-4_6vw-46{font-size:clamp(30px,4.6vw,46px)}

/* font-style */
.u-fst-italic.u-fst-italic{font-style:italic}

/* font-weight */
.u-fw-400.u-fw-400{font-weight:400}
.u-fw-600.u-fw-600{font-weight:600}

/* gap */
.u-g-10.u-g-10{gap:10px}
.u-g-11.u-g-11{gap:11px}
.u-g-18.u-g-18{gap:18px}
.u-g-6.u-g-6{gap:6px}
.u-g-8.u-g-8{gap:8px}

/* grid-template-columns */
.u-gtc-repeat-3-1fr.u-gtc-repeat-3-1fr{grid-template-columns:repeat(3,1fr)}

/* height */
.u-h-100.u-h-100{height:100px}
.u-h-30.u-h-30{height:30px}
.u-h-300.u-h-300{height:300px}
.u-h-54.u-h-54{height:54px}
.u-h-70.u-h-70{height:70px}
.u-h-auto.u-h-auto{height:auto}

/* justify-content */
.u-jc-center.u-jc-center{justify-content:center}
.u-jc-flex-start.u-jc-flex-start{justify-content:flex-start}

/* line-height */
.u-lh-1_15.u-lh-1_15{line-height:1.15}
.u-lh-1_2.u-lh-1_2{line-height:1.2}
.u-lh-1_25.u-lh-1_25{line-height:1.25}

/* margin */
.u-m-0.u-m-0{margin:0}
.u-m-0-0-14.u-m-0-0-14{margin:0 0 14px}
.u-m-0-0-16.u-m-0-0-16{margin:0 0 16px}
.u-m-10-0-18.u-m-10-0-18{margin:10px 0 18px}
.u-m-12-0-10.u-m-12-0-10{margin:12px 0 10px}
.u-m-12-0-6.u-m-12-0-6{margin:12px 0 6px}
.u-m-18-0-10.u-m-18-0-10{margin:18px 0 10px}
.u-m-18-0-6.u-m-18-0-6{margin:18px 0 6px}
.u-m-44-0-6.u-m-44-0-6{margin:44px 0 6px}
.u-m-52-0-6.u-m-52-0-6{margin:52px 0 6px}

/* margin-bottom */
.u-mb-10.u-mb-10{margin-bottom:10px}
.u-mb-12.u-mb-12{margin-bottom:12px}
.u-mb-14.u-mb-14{margin-bottom:14px}
.u-mb-16.u-mb-16{margin-bottom:16px}
.u-mb-18.u-mb-18{margin-bottom:18px}
.u-mb-22.u-mb-22{margin-bottom:22px}
.u-mb-26.u-mb-26{margin-bottom:26px}
.u-mb-6.u-mb-6{margin-bottom:6px}

/* margin-inline */
.u-mi-auto.u-mi-auto{margin-inline:auto}

/* margin-left */
.u-ml-10.u-ml-10{margin-left:10px}

/* margin-top */
.u-mt-10.u-mt-10{margin-top:10px}
.u-mt-12.u-mt-12{margin-top:12px}
.u-mt-14.u-mt-14{margin-top:14px}
.u-mt-16.u-mt-16{margin-top:16px}
.u-mt-18.u-mt-18{margin-top:18px}
.u-mt-20.u-mt-20{margin-top:20px}
.u-mt-24.u-mt-24{margin-top:24px}
.u-mt-26.u-mt-26{margin-top:26px}
.u-mt-30.u-mt-30{margin-top:30px}
.u-mt-34.u-mt-34{margin-top:34px}
.u-mt-4.u-mt-4{margin-top:4px}
.u-mt-6.u-mt-6{margin-top:6px}
.u-mt-8.u-mt-8{margin-top:8px}
.u-mt-9.u-mt-9{margin-top:9px}
.u-mt-neg-8.u-mt-neg-8{margin-top:-8px}

/* max-width */
.u-maxw-760.u-maxw-760{max-width:760px}
.u-maxw-800.u-maxw-800{max-width:800px}

/* min-height */
.u-minh-32.u-minh-32{min-height:32px}
.u-minh-34.u-minh-34{min-height:34px}

/* min-width */
.u-minw-0.u-minw-0{min-width:0}
.u-minw-260.u-minw-260{min-width:260px}

/* padding */
.u-p-44-0-10.u-p-44-0-10{padding:44px 0 10px}
.u-p-44-0-6.u-p-44-0-6{padding:44px 0 6px}

/* padding-bottom */
.u-pb-60.u-pb-60{padding-bottom:60px}

/* padding-top */
.u-pt-12.u-pt-12{padding-top:12px}

/* position */
.u-pos-absolute.u-pos-absolute{position:absolute}

/* right */
.u-right-neg-50.u-right-neg-50{right:-50px}

/* text-align */
.u-ta-left.u-ta-left{text-align:left}
.u-ta-right.u-ta-right{text-align:right}

/* text-transform */
.u-tt-uppercase.u-tt-uppercase{text-transform:uppercase}

/* width */
.u-w-100p.u-w-100p{width:100%}
.u-w-30.u-w-30{width:30px}
.u-w-300.u-w-300{width:300px}
.u-w-34.u-w-34{width:34px}
.u-w-54.u-w-54{width:54px}
.u-w-70.u-w-70{width:70px}

/* ---------- Porte d'erreur ----------
   Affiché lorsqu'une lecture échoue dans un chemin de rendu. Doit rester
   sobre et proposer une reprise : c'est le seul recours de l'utilisatrice. */
.bloc-erreur{
  grid-column:1/-1;text-align:center;padding:40px 22px;
  border:1px solid var(--peche);border-radius:16px;background:var(--blanc);
}
.bloc-erreur p{color:var(--encre-60);margin-bottom:16px}

/* Mention de l'offre de lancement, sous le prix. Discrète : elle informe,
   elle ne crie pas — un bandeau promotionnel jurerait avec la charte. */
.tarif-lancement{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--terracotta);
  font-weight:500;
}

/* Espace partenaire servi à /pro : il occupe la page entière au lieu d'être
   une surcouche du site public. */
.bo-autonome{position:static;height:100vh}
body.pro-page{background:var(--creme);overflow:hidden}

/* ---------- Espaces & locations ---------- */
.esp-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
.esp-col{background:var(--creme-2);border-radius:14px;padding:12px}
.esp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.esp-head b{font-family:var(--font-serif);font-size:16px}
.esp-head span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-60)}
.esp-slot{display:grid;gap:2px;background:var(--blanc);border-radius:10px;padding:9px 11px;margin-bottom:7px}
.esp-slot.location{box-shadow:inset 3px 0 0 var(--terracotta)}
.esp-slot.seance{box-shadow:inset 3px 0 0 #A6B09C}
.esp-h{font-size:12px;font-weight:600}
.esp-nom{font-size:12.5px;color:var(--encre-60)}
.esp-slot .chip-state{justify-self:start;margin-top:3px}
.daypill.passe{opacity:.72}
.daypill.passe b{font-weight:500}
.dp-pt.alerte{background:var(--terracotta);color:var(--blanc)}
.cl-secu{color:var(--terracotta-2);font-weight:500}
.cl-secu small{font-weight:400;color:var(--encre-60)}

/* Les indicateurs financiers se ressemblent et ne disent pas la même chose :
   chacun porte son explication sous sa valeur (REFERENCE-ADMIN.md §43). */
.kpi .kpi-sous{font-size:10.5px;line-height:1.35;color:var(--encre-60);margin-top:5px}

/* Une note de sécurité se signale sans se dire (REFERENCE-ADMIN.md §14). */
.fi-sensible{
  display:inline-block;padding:1px 7px;margin-right:6px;border-radius:999px;
  background:rgba(196,122,83,.14);color:var(--terracotta);
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.cl-note-reserve{font-style:italic;color:var(--terracotta)}
.fi-sec{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--encre-60);white-space:nowrap}
.fi-notes li{display:flex;align-items:flex-start;gap:10px}
.fi-notes li p{flex:1}

/* Un code refusé se signale par la teinte de refus de la palette — le module
   la posait en dur, `#B4543B`, par `element.style`. */
.code-msg.code-ko{color:var(--brique)}

/* ---------- Les flèches d'ordre, partout et une seule fois ---------- */
/* ⚠️ **Trois conteneurs, trois pièges différents, la même cause.** Chaque liste
   ordonnable — pratiques, FAQ, partenaires — avait sa propre règle de taille,
   et chacune se faisait attraper par un sélecteur voisin écrit pour le bouton
   d'action de la ligne : `.pq-liste .mini-btn:last-child`, `.fq-cat-tete
   .mini-btn`, `.pr-act .mini-btn`. Résultat : 26 × 26 en haut, 30 × 32 en bas,
   26 × 30 ailleurs — des cercles écrasés, et deux flèches d'un même couple de
   deux tailles.
   ⚠️ `min-height` est posé **explicitement** : il l'emporte toujours sur
   `height`, quelle que soit la spécificité. C'est ce qui rendait ces collisions
   si difficiles à voir — la règle qu'on lisait n'était pas celle qui gagnait.
   Écrite en fin de fichier, cette règle-ci n'a plus de voisine après elle. */
.fq-ordre > .mini-btn,
.pq-ordre > .mini-btn,
.pr-ordre > .mini-btn{
  width:26px;min-width:26px;height:26px;min-height:26px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
}


/* =====================================================================
   LE TEXTE SUR LA PHOTOGRAPHIE
   -----------------------------------------------------------------
   Traitement retenu par la cliente après comparaison des trois options :
   un voile **uniforme**, posé partout de la même façon. Elle a écarté d'emblée
   le voile asymétrique — « je ne suis pas fan d'un côté obscurci » —, et c'était
   juste : effacer la moitié d'une photographie pour porter du texte se voit.
   ⚠️ Sa force est le seul réglage qui compte, et il s'arbitre à la mesure : sous
   un certain seuil le titre passe sous le plancher de lisibilité, au-dessus la
   photo s'aplatit. Voir `tests/bandeaux.spec.js`.
   ===================================================================== */

.phero-img.sur-photo{display:flex;align-items:flex-end}
.phero-img.sur-photo > .phero-inner{
  position:relative;z-index:2;padding:0 var(--gout,28px) 34px;
}
@media(max-width:680px){
  .phero-img.sur-photo > .phero-inner{padding-bottom:22px;padding-top:56px}
}

.phero-img.sur-photo:has(.phero-photo)::before{
  content:'';position:absolute;inset:0;z-index:1;display:block;
  background:linear-gradient(to bottom,
    rgba(247,239,230,.58) 0%, rgba(247,239,230,.52) 55%, rgba(247,239,230,.62) 100%);
}