/* ==========================================================================
   BODY DREAM MASSAGE — Formulaires
   Partagé par /admission et /consentement-photo

   Les polices viennent de style.css, chargé avant ce fichier par les deux
   pages. Aucune declaration @font-face ici : elles existent deja.
   ========================================================================== */

/* --------------------------------------------------------------------------
   JETONS
   -------------------------------------------------------------------------- */

:root {
  --noir: #000000;
  --papier: #f7f5f2;          /* blanc cassé : évite le halo du blanc pur sur noir */
  /* Contraste mesuré sur le fond noir, seuil AA de la WCAG : 4,5 pour 1 sur
     le corps de texte, 3 pour 1 sur le contour d'un contrôle.

     --voile passait déjà (5,65:1 à 0,54) mais restait pâle à l'usage sur du
     texte de 15 px. Monté à 0,66, soit 8,2:1 : la hiérarchie avec le texte
     principal tient toujours, la lecture est nette.

     --trait-fort dessine le contour des cases et des boutons radio. À 0,34 il
     tombait à 2,75:1, sous le seuil des éléments d'interface. Monté à 0,42,
     soit 3,7:1.

     --braise-clair porte les messages d'erreur. À #c33326 il ne donnait que
     3,82:1 : le texte le plus important du formulaire était le seul à ne pas
     atteindre AA. Monté à #e05548, soit 5,6:1. --braise ne sert qu'en filet
     décoratif, il n'a pas de seuil à tenir. */
  --voile: rgba(247, 245, 242, 0.66);
  --trait: rgba(247, 245, 242, 0.16);
  --trait-fort: rgba(247, 245, 242, 0.42);
  --braise: #a0271f;
  --braise-clair: #e05548;

  --display: 'Bodoni Moda', Georgia, serif;
  --texte: 'Atkinson Hyperlegible', system-ui, sans-serif;

  --colonne: 34rem;
  --rythme: 2.75rem;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--papier);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--papier);
  color: var(--noir);
}

:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   JAUGE DE PROGRESSION
   -------------------------------------------------------------------------- */

.jauge {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--trait);
  z-index: 10;
}

.jauge__fil {
  height: 100%;
  width: 0;
  background: var(--papier);
  transform-origin: left;
  transition: width 0.55s var(--courbe);
}

/* --------------------------------------------------------------------------
   CADRE
   -------------------------------------------------------------------------- */

.cadre {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}

@media (min-width: 40rem) {
  .cadre {
    padding: 6rem 2rem 8rem;
  }
}

/* --------------------------------------------------------------------------
   EN-TÊTE
   -------------------------------------------------------------------------- */

.enseigne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: var(--rythme);
  border-bottom: 1px solid var(--trait);
}

.enseigne__marque {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}

.enseigne__compte {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--voile);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ÉTAPES
   -------------------------------------------------------------------------- */

.etape {
  display: none;
}

.etape.est-active {
  display: block;
  animation: entree 0.42s var(--courbe) both;
}

/* L'animation pose un transform sur .etape, et un transform crée un bloc
   conteneur : pendant ces 0,42 s, une barre en position:fixed se positionne
   par rapport à l'étape et reste donc au bas du contenu, hors écran, avant de
   sauter au bas de la fenêtre.

   Le cas se produit au retour en arrière sur une étape déjà remplie. On y
   coupe l'animation : une étape qu'on a déjà remplie n'a pas besoin de l'effet
   d'arrivée, et la barre est à sa place dès le premier rendu. majComplete est
   appelée dans le même bloc synchrone que la pose de .est-active, donc les
   deux classes arrivent ensemble et l'animation ne démarre jamais. */
.etape.est-active.est-complete {
  animation: none;
}

@keyframes entree {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.etape__titre {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

.etape__intro {
  color: var(--voile);
  max-width: 30rem;
  margin: 0 0 var(--rythme);
}

.etape__intro:last-of-type {
  margin-bottom: var(--rythme);
}

/* Encadré d'avertissement (bloc « aucun acte médical ») */
.avis {
  border-left: 2px solid var(--trait-fort);
  padding: 0.125rem 0 0.125rem 1.125rem;
  margin: 0 0 var(--rythme);
  color: var(--papier);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   QUESTIONS
   -------------------------------------------------------------------------- */

.question {
  border: 0;
  padding: 0;
  margin: 0 0 var(--rythme);
  min-width: 0;

  /* .commandes est collée en bas et recouvre le contenu. Sans cette réserve,
     scrollIntoView ramène la question fautive DERRIÈRE la barre : le champ
     est bien remis « en vue », mais caché par le bouton. C'est la même
     panne que l'alerte invisible, sous une autre forme.

     Hauteur réelle de la barre, mesurée sur le CSS : 1.5rem de padding haut
     + le bouton (12px x 1.65 de texte + 40px de padding + 3px de bordure
     = 62.8px) + 1.25rem de padding bas = 106.8px, soit 6.67rem. On réserve
     7rem : 5px de dégagement, et un chiffre rond qui reste juste si le
     bouton change d'un ou deux pixels.

     L'encoche est reprise telle quelle : .commandes l'ajoute à son padding,
     on l'ajoute ici, l'écart entre les deux reste constant. */
  scroll-margin-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));

  /* Quand la question est plus haute que l'écran, scrollIntoView aligne son
     bord haut : sans cette marge, l'intitulé colle au bord de l'écran. */
  scroll-margin-top: 1.5rem;
}

.question:last-child {
  margin-bottom: 2rem;
}

.question__enonce {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 0.375rem;
}

.question__aide {
  display: block;
  color: var(--voile);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.question__enonce + .choix,
.question__enonce + .champ,
.question__enonce + .teintes {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   TUILES DE CHOIX — le geste signature : la sélection inverse la tuile
   -------------------------------------------------------------------------- */

.choix {
  display: grid;
  gap: 0.5rem;
}

.tuile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--trait);
  border-radius: 2px;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.18s var(--courbe), background-color 0.18s var(--courbe),
    color 0.18s var(--courbe);
}

.tuile:hover {
  border-color: var(--trait-fort);
}

.tuile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Puce */
.tuile__puce {
  flex: 0 0 auto;
  width: 1.0625rem;
  height: 1.0625rem;
  border: 1px solid var(--trait-fort);
  transition: inherit;
}

.tuile--radio .tuile__puce {
  border-radius: 50%;
}

.tuile--case .tuile__puce {
  border-radius: 2px;
}

/* État sélectionné : inversion complète */
.tuile:has(input:checked) {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--noir);
}

.tuile:has(input:checked) .tuile__puce {
  background: var(--noir);
  border-color: var(--noir);
  box-shadow: inset 0 0 0 3px var(--papier);
}

.tuile:has(input:focus-visible) {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

.tuile__texte {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   ÉCHELLE DE FITZPATRICK — le seul moment de couleur
   -------------------------------------------------------------------------- */

.teintes {
  display: grid;
  gap: 0.5rem;
}

.teinte {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  align-items: stretch;
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s var(--courbe), background-color 0.18s var(--courbe),
    color 0.18s var(--courbe);
}

.teinte:hover {
  border-color: var(--trait-fort);
}

.teinte input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.teinte__pastille {
  min-height: 4.5rem;
  display: grid;
  place-items: center;
}

.teinte__rang {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.teinte__texte {
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  align-self: center;
}

.teinte:has(input:checked) {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--noir);
}

.teinte:has(input:focus-visible) {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

/* Degrades en classes, jamais en style="" : le CSP du site interdit l'inline.
   Le chiffre romain est pose sur la teinte, en contraste avec elle. */
.teinte__pastille--i   { background: linear-gradient(155deg, #fae7d8, #efd3bf); }
.teinte__pastille--ii  { background: linear-gradient(155deg, #f0d1b4, #e2bb9a); }
.teinte__pastille--iii { background: linear-gradient(155deg, #ddb089, #cc9a6d); }
.teinte__pastille--iv  { background: linear-gradient(155deg, #bd8d63, #a87850); }
.teinte__pastille--v   { background: linear-gradient(155deg, #855a3c, #6d4630); }
.teinte__pastille--vi  { background: linear-gradient(155deg, #503023, #3a2118); }

.teinte__pastille--i .teinte__rang,
.teinte__pastille--ii .teinte__rang,
.teinte__pastille--iii .teinte__rang { color: #3f2717; }

.teinte__pastille--iv .teinte__rang,
.teinte__pastille--v .teinte__rang,
.teinte__pastille--vi .teinte__rang { color: #f7f0e8; }

.teinte--sans .teinte__pastille {
  background: repeating-linear-gradient(
    45deg,
    var(--trait) 0 6px,
    transparent 6px 12px
  );
}

/* --------------------------------------------------------------------------
   CHAMPS TEXTE
   -------------------------------------------------------------------------- */

.champ {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--trait-fort);
  border-radius: 0;
  color: var(--papier);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: 0.625rem 0;
  transition: border-color 0.18s var(--courbe);
  -webkit-appearance: none;
  appearance: none;
}

.champ:focus {
  outline: none;
  border-bottom-color: var(--papier);
}

.champ::placeholder {
  color: rgba(247, 245, 242, 0.3);
}

textarea.champ {
  resize: vertical;
  min-height: 5.5rem;
}

/* --------------------------------------------------------------------------
   ENGAGEMENTS (cases de consentement)
   -------------------------------------------------------------------------- */

.engagement {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--trait);
  cursor: pointer;
}

.engagement:last-of-type {
  border-bottom: 1px solid var(--trait);
}

.engagement input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.engagement__puce {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  transition: background-color 0.18s var(--courbe), border-color 0.18s var(--courbe);
}

.engagement:has(input:checked) .engagement__puce {
  background: var(--papier);
  border-color: var(--papier);
  box-shadow: inset 0 0 0 3px var(--noir);
}

.engagement:has(input:focus-visible) .engagement__puce {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

.engagement__texte {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.engagement__detail {
  display: block;
  color: var(--voile);
  margin-top: 0.25rem;
}

/* Bloc juridique déroulant */
.mention {
  border-top: 1px solid var(--trait);
  margin-bottom: var(--rythme);
}

.mention summary {
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--voile);
  list-style: none;
}

.mention summary::-webkit-details-marker {
  display: none;
}

.mention summary::after {
  content: '+';
  float: right;
  font-family: var(--display);
}

.mention[open] summary::after {
  content: '–';
}

.mention__corps {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--voile);
  padding-bottom: 1.25rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   COMMANDES
   -------------------------------------------------------------------------- */

/* Tant que l'étape est incomplète, la barre attend en bas du contenu.
   Dès que tout est répondu, .est-complete l'épingle au bas de l'écran :
   le bouton vient sous le pouce au lieu d'attendre au bout d'une liste de
   dix cases. C'est la cliente qui décide d'avancer, on lui évite seulement
   d'aller chercher le bouton. */
.etape.est-complete .commandes {
  position: fixed;
  bottom: 0;

  /* Un élément fixed ne connaît plus la largeur de son parent : sans ces
     trois lignes il s'étalerait sur toute la fenêtre au lieu de suivre la
     colonne du formulaire. On reprend la largeur de .cadre — sa max-width
     et son padding — et on centre comme lui. */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--colonne), 100%);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* La barre épinglée sort du flux : sans cette réserve, elle recouvrirait la
   dernière case que la cliente vient justement de cocher. Même valeur que le
   scroll-margin de .question, pour que les deux restent cohérents.

   La réserve va sur body et non sur l'étape : le pied de page vit en dehors
   de .cadre, et une réserve posée sur l'étape le laissait passer sous la
   barre. En bas de page, le bouton se retrouvait posé par-dessus la mention
   du pied, avec le vide de la réserve juste au-dessus. */
body.barre-epinglee {
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 40rem) {
  /* .cadre passe à 2rem de padding à cette largeur, la barre suit. */
  .etape.est-complete .commandes {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.commandes {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.5rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--noir) 58%, rgba(0, 0, 0, 0));
}

/* Le bouton principal porte .btn, le bouton métallique du reste du site,
   défini dans style.css — chargé avant cette feuille dans les deux pages.
   Les formulaires avaient au départ leur propre bouton argenté : deux
   boutons métalliques différents sur le même site, pour rien.

   style.css a déjà un état désactivé (.form .btn[disabled], ligne 714),
   mais il ne vise que le contexte .form. Ces pages-ci sont bâties sur
   .cadre et .commandes, donc il ne s'y applique pas.

   Restreint à .commandes : sans ça, la règle toucherait aussi les .btn
   de l'en-tête et du menu de ces deux pages. */
.commandes .btn[disabled] {
  filter: saturate(0.4) brightness(0.82);
  cursor: progress;
  transform: none;
}

.retour {
  background: none;
  border: 0;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--voile);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.retour:hover {
  color: var(--papier);
}

.retour[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   ERREURS
   -------------------------------------------------------------------------- */

.erreur {
  color: var(--braise-clair);
  font-size: 0.9375rem;
  line-height: 1.5;

  /* L'alerte se pose avant la question fautive : la marge va donc en dessous,
     entre le message et la question qu'il commente. */
  margin: 0 0 0.625rem;

  /* C'est l'alerte qu'on amène à l'écran. Elle doit dégager la barre comme
     .question le fait, sinon elle atterrit derrière le bouton. */
  scroll-margin-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  scroll-margin-top: 1.5rem;
}

.erreur[hidden] {
  display: none;
}

.question--fautive .question__enonce {
  text-decoration: underline;
  text-decoration-color: var(--braise-clair);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* --------------------------------------------------------------------------
   FIN
   -------------------------------------------------------------------------- */

.fin__titre {
  font-family: var(--display);
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 1rem;
}

.fin p {
  color: var(--voile);
  max-width: 28rem;
}

.fin a {
  color: var(--papier);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   POT DE MIEL
   -------------------------------------------------------------------------- */

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   PIED
   -------------------------------------------------------------------------- */

.pied {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  font-size: 0.8125rem;
  color: var(--voile);
}

@media (min-width: 40rem) {
  .pied {
    padding: 0 2rem 4rem;
  }
}

.pied a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   SANS JAVASCRIPT
   -------------------------------------------------------------------------- */

.sans-js {
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  padding: 1.25rem;
  margin-bottom: var(--rythme);
}

.sans-js p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   MOUVEMENT RÉDUIT
   Public post-chirurgical : on coupe tout déplacement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .etape.est-active {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   REPLI POUR NAVIGATEURS SANS :has()
   -------------------------------------------------------------------------- */

@supports not selector(:has(*)) {
  .tuile.est-cochee,
  .teinte.est-cochee {
    background: var(--papier);
    border-color: var(--papier);
    color: var(--noir);
  }

  .tuile.est-cochee .tuile__puce {
    background: var(--noir);
    border-color: var(--noir);
    box-shadow: inset 0 0 0 3px var(--papier);
  }

  .engagement.est-cochee .engagement__puce {
    background: var(--papier);
    border-color: var(--papier);
    box-shadow: inset 0 0 0 3px var(--noir);
  }
}