/* ════════════════════════════════════════════════════════════
   Pages publiques (côté cliente).
   Reprend l'identité visuelle du site omasso.ca : crème, terracotta,
   brun, sauge. Playfair Display pour les titres, DM Sans pour le texte.
   Volontairement séparé de style.css, qui habille l'administration.
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream:       #FAF6F0;
  --cream-warm:  #F0E8DC;
  --cream-deep:  #E8DDD1;
  --terracotta:  #C4856A;
  --terra-hover: #AF7159;
  /* Terracotta assombri, meme teinte et meme saturation. Le terracotta
     de marque ne porte pas de texte : il plafonne a 2,82:1 sur creme,
     et descend a 2,59:1 sur une carte selectionnee. */
  --terra-deep:  #A55F41;
  --terra-10:    rgba(196,133,106,.10);
  --terra-20:    rgba(196,133,106,.20);
  --brown:       #3D2B1F;
  --brown-soft:  #7A5445;
  --sage:        #8FAF8A;
  --sage-15:     rgba(143,175,138,.15);
  --danger:      #A03A3A;
  --danger-bg:   rgba(160,58,58,.08);
  --rule:        rgba(61,43,31,.10);
  /* Grille horaire : l'heure pleine porte le repère, la demie l'accompagne */
  --ligne-h:     rgba(61,43,31,.14);
  --ligne-d:     rgba(61,43,31,.055);
  --hachure:     rgba(61,43,31,.10);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--cream);
  color: var(--brown);
  line-height: 1.7;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, legend { font-family: 'Playfair Display', Georgia, serif; }

.pub-container { max-width: 660px; margin: 0 auto; padding: 0 1.5rem; }

/* ── NAV ── */
.pub-nav {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--rule);
  background: rgba(250,246,240,.92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.pub-nav-inner { display: flex; align-items: center; justify-content: space-between; }

.pub-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem; font-weight: 600;
  color: var(--brown); text-decoration: none; letter-spacing: -.02em;
}
.pub-logo .acc, .pub-footer-logo .acc { color: var(--terracotta); }

.pub-tel {
  font-size: .88rem; color: var(--brown-soft);
  text-decoration: none; transition: color .18s;
}
.pub-tel:hover { color: var(--terra-deep); }

.pub-main { flex: 1; }

/* ── FLASH ── */
.pub-flash {
  margin-top: 1.25rem; padding: .875rem 1.125rem;
  border-radius: 3px; font-size: .9rem;
  animation: pub-revele .3s cubic-bezier(.4,0,.2,1);
}
.pub-flash-error   { background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger); }
.pub-flash-success { background: var(--sage-15); color: #2A5E32; border-left: 3px solid var(--sage); }
.pub-flash-info    { background: var(--terra-10); color: var(--brown); border-left: 3px solid var(--terracotta); }

/* ── HERO ── */
/* Sur téléphone, cet en-tête occupait 40 % du premier écran et repoussait le
   calendrier sous la ligne de flottaison. La cliente a cliqué sur
   « réserver » : elle sait déjà où elle est, elle veut voir des heures. */
.pub-hero { padding: 3.5rem 0 2.25rem; text-align: center; }

.pub-eyebrow {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra-deep); font-weight: 500; margin-bottom: 1rem;
}
.pub-h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.75rem);
  font-weight: 600; line-height: 1.15; text-wrap: balance;
  margin-bottom: .875rem;
}
.pub-sub {
  font-size: 1rem; color: var(--brown-soft); font-weight: 300;
  max-width: 26rem; margin: 0 auto; line-height: 1.75;
}

/* ── FORMULAIRE ── */
.pub-form { padding-bottom: 4rem; }

.pub-step {
  border: none;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  /* Les navigateurs donnent min-width: min-content aux <fieldset>. Sans cette
     remise à zéro, l'élément refuse de descendre sous la largeur de la grille
     horaire, le défilement interne ne s'active jamais et la page déborde
     latéralement sur téléphone. */
  min-width: 0;
}
.pub-step:first-of-type { border-top: none; padding-top: 1rem; }

.pub-step legend {
  font-size: 1.15rem; font-weight: 600;
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.125rem;
}

.pub-step-num {
  width: 27px; height: 27px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}

.pub-label {
  display: block;
  font-size: .8rem; font-weight: 500; color: var(--brown-soft);
  letter-spacing: .02em; margin-bottom: .35rem;
}

.pub-hint { font-size: .82rem; color: var(--brown-soft); margin-top: .625rem; font-style: italic; }
.pub-hint-centre { text-align: center; margin-top: 1rem; }
/* Les liens portent du texte : le terracotta de marque plafonne a 2,82:1.
   La zone de clic est aussi elargie, 17 px de haut est trop peu au doigt. */
.pub-hint a { color: var(--terra-deep); }
.pub-main a:not([class]) {
  color: var(--terra-deep);
  display: inline-block;
  padding: .2rem 0;
  text-underline-offset: .18em;
}

/* ── SERVICES ── */
.pub-services { display: flex; flex-direction: column; gap: .625rem; }

.pub-service { cursor: pointer; display: block; }
.pub-service input { position: absolute; opacity: 0; pointer-events: none; }

.pub-service-corps {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

/* Une pastille dessinée en CSS : le vrai bouton radio est masqué, et sans
   repère visible rien n'indiquait que ces cartes étaient des choix. */
.pub-service-corps::before {
  content: '';
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cream-deep);
  background: #fff;
  transition: border-color .18s, border-width .18s;
}
.pub-service:hover .pub-service-corps { border-color: var(--terra-20); }
.pub-service:hover .pub-service-corps::before { border-color: var(--terracotta); }

.pub-service input:checked + .pub-service-corps {
  border-color: var(--terracotta);
  background: var(--terra-10);
  box-shadow: 0 2px 12px rgba(196,133,106,.14);
}
/* Une bordure épaisse sur un petit cercle donne un point plein, sans second
   élément à positionner. */
.pub-service input:checked + .pub-service-corps::before {
  border: 5.5px solid var(--terracotta);
}
.pub-service input:focus-visible + .pub-service-corps {
  outline: 2px solid var(--terracotta); outline-offset: 2px;
}

.pub-service-texte {
  display: flex; flex-direction: column; gap: .15rem;
  flex: 1; min-width: 0;
}
.pub-service-nom {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem; font-weight: 600; line-height: 1.25;
}
.pub-service-note {
  font-size: .84rem; color: var(--brown-soft); line-height: 1.5;
}
/* La durée ouvre la ligne de description : elle répétait le nom quand on la
   posait à côté du prix, et « Séance 60 minutes … 60 min » sonnait faux. */
.pub-service-duree {
  font-weight: 500; color: var(--brown);
}
.pub-service-duree::after {
  content: '·'; margin: 0 .3rem 0 .35rem; color: var(--cream-deep);
}

/* Le prix est la seule chose posée à droite. Les chiffres tabulaires alignent
   90, 100 et 140 sur leur unité, sinon les dollars partent en escalier. */
.pub-service-prix {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; line-height: 1; color: var(--terra-deep);
  flex-shrink: 0; text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .12rem;
}
/* Pas d'opacite ici : a 15 px le symbole est du petit texte, il lui faut
   4,5:1, et l'attenuer le ferait passer sous le seuil. */
.pub-devise { font-size: .95rem; }
/* Sur une carte selectionnee, le fond terra-10 rapproche le prix du fond et
   le symbole, plus petit, passait sous 4,5:1. On l'assombrit la seulement. */
.pub-service input:checked + .pub-service-corps .pub-service-prix { color: #8A4E34; }

/* ── CHAMPS ── */
input[type=text], input[type=tel], input[type=email], input[type=date], textarea {
  width: 100%;
  padding: .7rem .9rem;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  font-family: inherit; font-size: .95rem; color: var(--brown);
  outline: none; transition: border-color .18s;
}
input:focus, textarea:focus { border-color: var(--terracotta); }
textarea { resize: vertical; }

.pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 1rem; }
.pub-champ-large { grid-column: 1 / -1; }

/* ── CALENDRIER DE SEMAINE ── */
.pub-sem-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem;
}

.pub-sem-titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem; color: var(--brown); text-align: center; flex: 1;
}

.pub-sem-fleche {
  width: 38px; height: 38px; flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  color: var(--brown); font-size: 1.05rem;
  cursor: pointer;
  transition: border-color .16s, background .16s, opacity .16s;
}
.pub-sem-fleche:hover:not(:disabled) {
  border-color: var(--terracotta); background: var(--terra-10); color: var(--terracotta);
}
.pub-sem-fleche:disabled { opacity: .3; cursor: not-allowed; }
.pub-sem-fleche:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Grille horaire : les créneaux sont placés à leur heure réelle sur un axe
   gradué. Les lignes d'heure traversent les sept jours, sinon rien ne relie
   un bloc du samedi au repère « 14:00 » resté dans la gouttière. */
.pub-sem-cadre {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
}

.pub-semaine {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(84px, 1fr));
  min-width: 640px;
  align-items: start;
}

.pub-gouttiere { border-right: 1px solid var(--rule); background: var(--cream); }
.pub-gouttiere-tete { background: transparent; }

.pub-heure {
  position: absolute; right: .45rem;
  /* -50% centre sur la ligne quelle que soit la taille du texte, alors qu'un
     décalage en em laisse les deux niveaux de libellé désalignés. */
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
  font-size: .68rem; font-weight: 500; color: var(--brown);
}
/* La demie reste lisible mais s'efface : deux niveaux de lecture, pas un mur
   de chiffres tous identiques. */
.pub-demi { font-size: .58rem; font-weight: 400; color: var(--brown-soft); opacity: .55; }

.pub-jour { min-width: 0; border-right: 1px solid var(--rule); }
.pub-jour:last-child { border-right: none; }

.pub-jour-tete {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .2rem .55rem;
  background: var(--cream-warm);
  border-bottom: 1px solid var(--rule);
}
.pub-jour-nom {
  font-size: .58rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brown-soft); font-weight: 500;
}
.pub-jour-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; color: var(--brown); line-height: 1.15;
}

.pub-jour-tete.est-aujourdhui {
  background: var(--terra-10);
  box-shadow: inset 0 -2px 0 var(--terracotta);
}
.pub-jour-tete.est-aujourdhui .pub-jour-num { color: var(--brown); font-weight: 700; }

/* Les graduations sont peintes en fond : aucun noeud supplémentaire dans le
   DOM, et elles suivent --ph, la hauteur d'une heure posée par le script. */
.pub-jour-piste {
  position: relative;
  background-image:
    repeating-linear-gradient(to bottom,
      var(--ligne-h) 0 1px, transparent 1px var(--ph)),
    repeating-linear-gradient(to bottom,
      var(--ligne-d) 0 1px, transparent 1px calc(var(--ph) / 2));
}

/* Un jour sans aucune disponibilité est hachuré, comme une plage bloquée.
   Les trous d'un jour ouvert restent nus : le vide se lit tout seul, et
   hachurer partout ferait un fond de bruit sous les blocs. */
.pub-jour-piste.est-vide {
  background-image:
    repeating-linear-gradient(-45deg,
      var(--hachure) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(to bottom,
      var(--ligne-h) 0 1px, transparent 1px var(--ph)),
    repeating-linear-gradient(to bottom,
      var(--ligne-d) 0 1px, transparent 1px calc(var(--ph) / 2));
}

.pub-jour-note {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .7rem; color: var(--brown-soft);
  font-style: italic; padding: 0 .2rem;
}

/* Un créneau disponible */
.pub-bloc {
  position: absolute;
  left: 4px; right: 4px;
  display: flex; flex-direction: column; justify-content: center;
  padding: .3rem .45rem;
  background: var(--terra-deep);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 5px;
  color: var(--cream);
  cursor: pointer;
  overflow: visible;
  transition: background .16s, box-shadow .16s;
}
/* Pas de translation au survol : un bloc posé à son heure ne doit pas bouger
   sur l'axe, il mentirait sur l'horaire qu'il représente. */
.pub-bloc:hover {
  background: #8A4E34;
  box-shadow: 0 4px 14px rgba(196,133,106,.35);
  z-index: 3;
}
.pub-bloc:focus-visible {
  outline: 2px solid var(--brown); outline-offset: 1px; z-index: 5;
}
.pub-bloc.actif {
  background: var(--brown);
  border-color: var(--brown);
  box-shadow: 0 0 0 2px var(--terracotta), 0 4px 16px rgba(61,43,31,.28);
  z-index: 4;
}

.pub-bloc-heure {
  font-size: .82rem; font-weight: 600; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.pub-bloc-fin {
  font-size: .66rem; line-height: 1.3;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
/* Les autres heures du même bloc, annoncées par un compteur discret plutôt
   que par « + 1 autre » répété sur chaque créneau de la semaine. */
.pub-bloc-plus {
  position: absolute; top: 4px; right: 5px;
  padding: 0 .25rem; border-radius: 2px;
  background: rgba(35,20,12,.42);
  font-size: .6rem; font-weight: 700; line-height: 1.5;
}

/* Liste dépliée quand un bloc contient plusieurs heures */
.pub-choix {
  position: absolute; z-index: 10;
  top: 100%; left: 0; margin-top: 3px;
  min-width: 100%;
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px;
  background: #fff;
  border: 1.5px solid var(--terracotta);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(61,43,31,.2);
  transform-origin: top center;
  animation: pub-revele .18s cubic-bezier(.4,0,.2,1);
}
.pub-choix-h {
  padding: .35rem .5rem;
  background: transparent; border: none; border-radius: 2px;
  font-family: inherit; font-size: .78rem; color: var(--brown);
  cursor: pointer; text-align: center;
  transition: background .13s;
}
.pub-choix-h:hover { background: var(--terra-10); }

/* Légende */
.pub-legende {
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; color: var(--brown-soft);
  margin-top: .75rem;
}
.pub-legende-libre, .pub-legende-pris {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
}
.pub-legende-libre { background: var(--terracotta); }
.pub-legende-pris {
  margin-left: .875rem;
  background: repeating-linear-gradient(-45deg,
    rgba(61,43,31,.18) 0 3px, transparent 3px 6px);
  border: 1px solid var(--rule);
}

.pub-vide-semaine { margin-top: .875rem; }

/* Sept jours n'entrent pas sur un téléphone. La grille défile latéralement,
   encore faut-il que la cliente le sache : sans repère, elle croit que la
   semaine s'arrête à jeudi. */
.pub-glisser {
  display: none;
  align-items: center; gap: .35rem;
  font-size: .76rem; color: var(--brown-soft);
  margin-top: .5rem;
}
@media (max-width: 700px) {
  .pub-glisser { display: flex; }
}

/* Le calendrier est le coeur de la page. Passé 960 px, il déborde du conteneur
   de texte pour offrir de vraies colonnes au lieu de 84 px chacune. */
@media (min-width: 960px) {
  .pub-sem-nav, .pub-sem-cadre, .pub-legende {
    margin-left: -100px; margin-right: -100px;
  }
}

.pub-chargement, .pub-vide {
  grid-column: 1 / -1;
  font-size: .9rem; color: var(--brown-soft); font-style: italic;
  padding: .875rem 1rem;
  background: var(--cream-warm);
  border-radius: 4px;
}

/* ── PROGRESSION DU QUESTIONNAIRE ── */
/* Collee sous la barre de navigation, qui fait elle-meme partie du flux
   colle : d'ou le decalage, sinon les deux se superposent. */
.pub-progres {
  position: sticky; top: 61px; z-index: 9;
  background: rgba(250,246,240,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: .5rem 0 .55rem;
}
.pub-progres-corps { display: flex; flex-direction: column; gap: .35rem; }
.pub-progres-etat {
  font-size: .72rem; letter-spacing: .04em;
  color: var(--brown-soft); font-weight: 500;
}
.pub-progres-piste {
  height: 3px; border-radius: 2px;
  background: var(--cream-deep); overflow: hidden;
}
.pub-progres-jauge {
  display: block; height: 100%; width: 20%;
  background: var(--terra-deep);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── QUESTIONNAIRE DE SANTÉ ── */
.pub-rappel-rdv {
  padding: .875rem 1.125rem;
  background: var(--cream-warm);
  border-left: 3px solid var(--terracotta);
  border-radius: 4px;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.pub-rappel-rdv strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
}

.pub-cases { display: flex; flex-wrap: wrap; gap: .5rem; }

.pub-case { cursor: pointer; }
.pub-case input { position: absolute; opacity: 0; pointer-events: none; }
.pub-case span {
  display: inline-block;
  padding: .4rem .8rem;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  font-size: .85rem;
  transition: border-color .16s, background .16s, color .16s;
}
.pub-case:hover span { border-color: var(--terra-20); }
.pub-case input:checked + span {
  background: var(--terracotta); border-color: var(--terracotta); color: var(--cream);
}
.pub-case input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Le libelle et les deux boutons tiennent sur une ligne des qu'il y a la
   place : empiles, chaque question coutait 103 px, et il y en a quinze. */
.pub-question {
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .875rem;
}
.pub-question:last-of-type { border-bottom: none; }
/* 12rem est le point ou le libelle tient a cote des boutons meme sur un
   telephone de 390 px. Plus large, il passe a la ligne ; plus etroit,
   il n'y a plus aucun gain, le texte a atteint son minimum. */
.pub-question-txt { font-size: .92rem; flex: 1 1 12rem; min-width: 0; }
.pub-question .pub-detail { flex: 1 0 100%; }

.pub-ouinon { display: flex; gap: .5rem; flex-shrink: 0; }

.pub-radio { cursor: pointer; }
.pub-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pub-radio span {
  display: inline-block;
  min-width: 4rem; text-align: center;
  padding: .4rem .9rem;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  font-size: .87rem;
  transition: border-color .16s, background .16s, color .16s;
}
.pub-radio:hover span { border-color: var(--terra-20); }
.pub-radio input:checked + span {
  background: var(--terracotta); border-color: var(--terracotta);
  color: var(--cream); font-weight: 500;
}
.pub-radio input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Apparition seulement : la disparition reste instantanee, sinon on garde a
   l'ecran un bloc que la cliente vient de rendre inutile. */
/* Deplacement seul, jamais d'opacite : si l'horloge d'animation cale, pour
   une raison quelconque, un element parti d'une opacite nulle reste
   invisible. Un element simplement decale reste lisible. Le mouvement suffit
   a attirer l'oeil. */
@keyframes pub-revele {
  from { transform: translateY(-6px); }
  to   { transform: none; }
}

.pub-detail {
  display: none;
  margin-top: .625rem;
  padding: .75rem .875rem;
  background: var(--cream-warm);
  border-left: 2px solid var(--terracotta);
  border-radius: 3px;
}
.pub-detail.visible { display: block; animation: pub-revele .26s cubic-bezier(.4,0,.2,1); }

.pub-consent {
  padding: 1.125rem 1.25rem;
  background: var(--cream-warm);
  border-radius: 4px;
  font-size: .87rem;
  color: var(--brown-soft);
  line-height: 1.7;
  margin-bottom: 1.125rem;
}

/* ── POLITIQUE D'ANNULATION ── */
/* Repliee par defaut, avec son resume visible : la cliente sait ce qu'elle
   accepte sans avoir a deplier, et peut lire le detail si elle le souhaite.
   Un texte long et impose ferait abandonner, un texte cache serait deloyal. */
.pub-politique {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 1rem;
}
.pub-politique summary {
  padding: .875rem 1.125rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .2rem;
  list-style: none;
}
.pub-politique summary::-webkit-details-marker { display: none; }
.pub-politique summary::after {
  content: 'Lire le détail';
  font-size: .78rem; color: var(--terra-deep); font-weight: 500;
  margin-top: .2rem;
}
.pub-politique[open] summary::after { content: 'Replier'; }
.pub-politique summary:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: -2px;
}
.pub-politique-titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem; font-weight: 600;
}
.pub-politique-resume { font-size: .84rem; color: var(--brown-soft); line-height: 1.5; }

.pub-politique-corps {
  padding: 0 1.125rem 1.125rem;
  border-top: 1px solid var(--rule);
  padding-top: .875rem;
  font-size: .9rem;
}
.pub-politique-corps dl { margin: .875rem 0; display: grid; gap: .5rem; }
.pub-politique-corps dt { font-weight: 500; }
.pub-politique-corps dd {
  margin: 0 0 .25rem; color: var(--brown-soft);
  padding-left: .875rem; border-left: 2px solid var(--cream-deep);
}
.pub-politique-fin { color: var(--brown-soft); font-style: italic; }

/* La case elle-meme : cible large, et l'etiquette entiere est cliquable. */
.pub-consentement {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1.125rem;
  background: var(--cream-warm);
  border-radius: 4px;
  cursor: pointer;
  font-size: .93rem;
}
.pub-consentement input {
  width: 20px; height: 20px; flex-shrink: 0;
  margin-top: .1rem;
  accent-color: var(--terra-deep);
  cursor: pointer;
}
.pub-consentement input:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px;
}

/* ── RÉCAP ── */
.pub-recap {
  margin: 1.75rem 0 1.25rem;
  padding: 1.125rem 1.375rem;
  background: var(--cream-warm);
  border-left: 3px solid var(--terracotta);
  border-radius: 4px;
  font-size: .95rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.pub-recap[hidden] { display: none; }
.pub-recap:not([hidden]) { animation: pub-revele .3s cubic-bezier(.4,0,.2,1); }
/* Le texte forme un seul élément flex, sinon le saut de ligne interne
   deviendrait un élément vide et les deux lignes se retrouveraient cote a cote. */
.pub-recap-txt { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
.pub-recap strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem; display: block;
}
.pub-recap-prix {
  margin-left: auto; flex-shrink: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem; color: var(--terracotta);
}

/* Dit pourquoi le bouton d'envoi est encore inactif. Un bouton grisé sans
   explication laisse la cliente chercher ce qu'elle a oublié. */
.pub-manque {
  text-align: center;
  font-size: .85rem;
  color: var(--brown-soft);
  margin-bottom: .75rem;
}
.pub-manque[hidden] { display: none; }

/* ── BOUTON ── */
.pub-btn {
  display: block; width: 100%;
  padding: 1rem 1.5rem;
  background: var(--terra-deep); color: var(--cream);
  border: 1.5px solid var(--terra-deep); border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background .18s, transform .16s, box-shadow .18s;
}
.pub-btn:hover:not(:disabled) {
  background: #8A4E34; border-color: #8A4E34;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(196,133,106,.3);
}
.pub-btn:disabled { opacity: .4; cursor: not-allowed; }

.pub-btn-clair {
  background: transparent; color: var(--terra-deep);
  margin: 1.75rem 0;
}
.pub-btn-clair:hover:not(:disabled) { background: var(--terra-deep); color: var(--cream); }

/* ── CONFIRMATION ── */
.pub-confirm { padding: 3.5rem 1.5rem 4rem; text-align: center; }

.pub-check {
  width: 62px; height: 62px; margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--sage-15);
  display: flex; align-items: center; justify-content: center;
}
.pub-check svg {
  width: 30px; height: 30px;
  stroke: var(--sage); fill: none; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.pub-fiche {
  margin: 2.25rem 0 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-align: left;
  overflow: hidden;
}
.pub-fiche-ligne {
  display: flex; gap: 1.25rem;
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--rule);
}
.pub-fiche-ligne:last-child { border-bottom: none; }

.pub-fiche-lbl {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown-soft); flex-shrink: 0; width: 5.5rem; padding-top: .2rem;
}
.pub-fiche-val { font-size: .95rem; line-height: 1.6; }

.pub-encart {
  margin-top: 1rem; padding: 1.5rem;
  background: var(--cream-warm);
  border-radius: 4px; text-align: left;
}
.pub-encart-titre {
  font-size: 1.1rem; font-weight: 600; margin-bottom: .625rem;
}
.pub-encart p { font-size: .92rem; color: var(--brown-soft); }
.pub-encart-note { margin-top: .625rem; font-size: .85rem; font-style: italic; }

/* ── REÇU D'ASSURANCE ── */
.pub-recu-page { padding: 2.5rem 0 4rem; }
.pub-recu-actions { margin-bottom: 1.25rem; text-align: right; }
.pub-recu-actions .pub-btn { display: inline-block; width: auto; }

.pub-recu {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2.25rem;
}
.pub-recu-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.pub-recu-marque {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
}
.pub-recu-marque .acc { color: var(--terracotta); }
.pub-recu-sous { font-size: .84rem; color: var(--brown-soft); }
.pub-recu-numero { text-align: right; }
.pub-recu-lbl {
  display: block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brown-soft); font-weight: 500;
}
.pub-recu-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem; color: var(--terra-deep);
  font-variant-numeric: tabular-nums;
}

.pub-recu-bloc { padding: 1.5rem 0; }
.pub-recu-titre { font-size: 1.15rem; margin-bottom: 1.125rem; }
.pub-recu-liste {
  display: grid; grid-template-columns: auto 1fr; gap: .625rem 1.5rem;
  font-size: .95rem;
}
.pub-recu-liste dt {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brown-soft); font-weight: 500; padding-top: .15rem;
}
.pub-recu-liste dd { margin: 0; }

.pub-recu-montant {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.125rem 1.375rem;
  background: var(--cream-warm); border-radius: 4px;
}
.pub-recu-montant-lbl { font-size: .88rem; font-weight: 500; }
.pub-recu-montant-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem; color: var(--terra-deep);
  font-variant-numeric: tabular-nums;
}
.pub-recu-taxes {
  margin-top: .75rem; font-size: .8rem; color: var(--brown-soft);
  text-align: right;
}

.pub-recu-pied {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .86rem; color: var(--brown-soft); line-height: 1.6;
}
.pub-recu-nom { font-weight: 500; color: var(--brown); }
.pub-recu-emis { text-align: right; }
.pub-recu-note { margin-top: 1.25rem; }

/* A l'impression, le reste de la page n'a rien a faire sur le papier. */
@media print {
  .pub-nav, .pub-footer, .pub-recu-actions, .pub-recu-note { display: none; }
  body { background: #fff; }
  .pub-recu { border: none; padding: 0; }
  .pub-recu-page { padding: 0; }
}

/* ── FOOTER ── */
.pub-footer {
  background: var(--brown);
  padding: 2.75rem 0;
  text-align: center;
  margin-top: auto;
}
.pub-footer-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem; font-weight: 600; color: var(--cream);
  margin-bottom: .875rem;
}
.pub-footer-txt {
  font-size: .84rem; color: rgba(250,246,240,.72);
  font-weight: 300; line-height: 1.8;
}
.pub-footer-tag {
  margin-top: .75rem;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: .88rem; color: rgba(250,246,240,.6);
}

/* ── RESPONSIVE ── */
/* Sur écran étroit, la grille garde sa largeur minimale et défile
   horizontalement dans son cadre. Écraser sept colonnes sur 375 px les
   rendrait illisibles et impossibles à toucher. */
@media (max-width: 700px) {
  /* Sur telephone, les sept jours tiennent dans l'ecran : plus de defilement
     lateral du tout. C'etait le vrai irritant, 161 px de semaine restaient
     hors champ et la semaine semblait s'arreter a jeudi. */
  .pub-semaine {
    grid-template-columns: 32px repeat(7, minmax(0, 1fr));
    min-width: 0;
  }
  .pub-bloc { left: 2px; right: 2px; padding: .25rem .2rem; }
  .pub-bloc-heure { font-size: .68rem; text-align: center; }
  /* L'heure de fin se deduit du soin choisi : sur une colonne de 44 px elle
     coute plus qu'elle n'apporte. */
  .pub-bloc-fin   { display: none; }
  .pub-bloc-plus  { top: 1px; right: 1px; padding: 0 .15rem; font-size: .52rem; }
  .pub-jour-note  { font-size: .58rem; }
  .pub-jour-nom   { font-size: .5rem; letter-spacing: .04em; }
  .pub-jour-num   { font-size: .95rem; }
  .pub-jour-tete  { padding: .4rem .1rem .45rem; }
  .pub-heure { font-size: .58rem; right: .25rem; }
  /* Gouttiere trop etroite pour deux niveaux : les lignes de demi-heure
     restent, leur libelle s'efface. */
  .pub-demi { display: none; }
  /* Plus rien ne defile lateralement, le repere n'a plus lieu d'etre. */
  .pub-glisser { display: none; }
}

@media (max-width: 560px) {
  .pub-grid { grid-template-columns: 1fr; }
  .pub-service-corps { gap: .75rem; padding: 1rem 1.125rem; }
  .pub-service-nom { font-size: 1.02rem; }
  .pub-service-note { font-size: .8rem; }
  .pub-service-prix { font-size: 1.35rem; }
  .pub-hero { padding: 1.5rem 0 1.25rem; }
  .pub-h1 { margin-bottom: .5rem; }
  /* Le sous-titre répète l'information du site : sur téléphone il coûte plus
     de place qu'il n'en rapporte. */
  .pub-hero .pub-sub { display: none; }
  .pub-step:first-of-type { padding-top: .5rem; }
  .pub-step { padding: 1.25rem 0; }
}

/* Coupe aussi les animations, pas seulement les transitions : la regle
   precedente ne desactivait que la moitie du mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}


/* ── Page de texte suivi (politique de confidentialité) ───────────────────
   Une colonne étroite : au-delà de 70 caractères par ligne, l'oeil perd le
   début de la ligne suivante et le texte cesse d'être lu. */
.pub-texte {
  max-width: 40rem;
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.pub-texte p {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--brown-soft);
  margin-bottom: 1rem;
}
.pub-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brown);
  margin: 2.2rem 0 .7rem;
}
.pub-texte a { color: var(--terracotta); }
.pub-footer-txt a { color: inherit; text-decoration: underline; }