/* ═══════════════════════════════════════════════════════════
   B&F ESSENCE — Analyse de peau (/analyse-de-peau/)
   Chargée sur cette page seulement, après styles.css dont elle
   reprend les jetons (prune, rose, ivoire, Playfair, Montserrat).
   Écran large : image d'ambiance à gauche, question à droite.
   Écran étroit : l'image devient un bandeau, le rituel passe dessous.
   ═══════════════════════════════════════════════════════════ */

.page-analyse {
  --entete: 70px;                            /* hauteur de l'en-tête fixe des pages intérieures */
  --trait: #E6D9D3;
  --encre-2: #57504d;
  --encre-3: #857771;
  --bon: #2F6B45;
  --bon-fond: #E4F1E8;
}

/* L'image monte jusque sous l'en-tête : pas de liseré ivoire entre les deux */
body.page-analyse main { padding-top: var(--entete); background: var(--prune-nuit); }

.analyse {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  min-height: calc(100svh - var(--entete));
  background: var(--ivoire);
}

/* ─────────────────────────────── Image d'ambiance */

.analyse__visuel {
  grid-column: 1; grid-row: 1;
  position: sticky; top: var(--entete);
  height: calc(100svh - var(--entete));
  overflow: hidden;
  background: var(--prune-nuit);
}

.analyse__images img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.1s var(--ease), transform 7s var(--ease);
}

.analyse__images img.is-actif { opacity: 1; transform: none; }

/* point d'intérêt des photos de personnes : leur visage (les natures mortes restent centrées) */
.analyse__images img[data-image="intro"] { object-position: 62% 36%; }
.analyse__images img[data-image="photo"] { object-position: 45% 21%; }

.analyse__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29, 15, 20, .38) 0%, transparent 22%, transparent 48%, rgba(29, 15, 20, .72) 100%);
  pointer-events: none;
}

.analyse__legende {
  position: absolute; left: clamp(22px, 3vw, 40px); top: clamp(20px, 3vw, 34px);
  margin: 0;
  font: 600 10px var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(250, 248, 246, .86);
}

/* ─────────────────────────────── Le rituel qui se compose */

.plateau {
  grid-column: 1; grid-row: 1;
  align-self: end;
  position: sticky; bottom: 0;
  z-index: 2;
  margin: 0 clamp(18px, 2.6vw, 34px) clamp(18px, 2.6vw, 34px);
  padding: 18px 20px 16px;
  background: rgba(61, 33, 45, .62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(217, 164, 152, .28);
  color: var(--ivoire);
}

.plateau__titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
  font: 600 10px var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose);
}

.plateau__titre b { font: 500 italic 15px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ivoire); }

.plateau__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 16px;
  margin: 0; padding: 0;
  list-style: none;
}

.plateau__soin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plateau__soin img { width: 36px; height: 45px; object-fit: cover; flex: none; }
.plateau__soin span { display: grid; min-width: 0; }
.plateau__soin b { font: 500 14.5px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plateau__soin i { font: 600 9px var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-pale); }
.plateau__soin.is-nouveau { animation: plateauArrivee .7s var(--ease) both; }

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

/* ─────────────────────────────── Scène */

.analyse__scene {
  --pad-x: clamp(22px, 5vw, 80px);
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 100%; max-width: 880px;
  padding: clamp(22px, 4vh, 48px) var(--pad-x) clamp(24px, 4vh, 48px);
}

.analyse__ecran.is-entree > * > * { animation: analyseEntree .65s var(--ease) both; }
.analyse__ecran.is-entree > * > *:nth-child(2) { animation-delay: .05s; }
.analyse__ecran.is-entree > * > *:nth-child(3) { animation-delay: .1s; }
.analyse__ecran.is-entree > * > *:nth-child(4) { animation-delay: .15s; }
.analyse__ecran.is-entree > * > *:nth-child(n + 5) { animation-delay: .2s; }

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

/* Boutons et liens de l'analyse */
.analyse__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 30px; }
.analyse__bouton svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.analyse__bouton:hover:not(:disabled) svg { transform: translateX(4px); }

.analyse__lien {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font: 600 12.5px var(--sans);
  color: var(--prune);
  text-decoration: underline; text-decoration-color: var(--cuivre); text-underline-offset: 5px;
  transition: color .3s;
}

.analyse__lien svg { width: 16px; height: 16px; }
.analyse__lien:hover { color: var(--cuivre); }
.analyse__lien--clair { color: var(--rose-pale); text-decoration-color: rgba(217, 164, 152, .6); }
.analyse__lien--clair:hover { color: var(--blanc); }

.analyse__retour { font: 600 12.5px var(--sans); color: var(--encre-3); padding: 10px 0; transition: color .3s; }
.analyse__retour:hover { color: var(--prune); }

.analyse :focus-visible { outline: 2px solid var(--prune); outline-offset: 3px; }
.analyse [tabindex="-1"]:focus { outline: none; }

/* ─────────────────────────────── Progression */

.barre { margin-bottom: clamp(18px, 3vh, 30px); }
.barre__piste { display: flex; gap: 5px; align-items: center; }
.barre__piste i { position: relative; flex: 1; height: 3px; background: var(--trait); overflow: hidden; }
.barre__piste i::after { content: ""; position: absolute; inset: 0; background: var(--prune); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.barre__piste i.is-fait::after { transform: none; }
.barre__piste i.is-actif::after { transform: scaleX(.5); background: var(--cuivre); }
.barre__piste i.barre__photo { flex: 0 0 9px; height: 9px; border-radius: 50%; }
.barre__piste i.barre__photo.is-actif::after { transform: none; }
.barre__texte { margin: 12px 0 0; font: 600 10.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cuivre); }

/* ─────────────────────────────── Introduction */

.intro__titre {
  margin: 0 0 22px;
  font: 500 clamp(40px, 5.2vw, 70px)/1.05 var(--serif);
  color: var(--charbon);
  letter-spacing: -.01em;
}

.intro__titre em { font-style: italic; color: var(--prune); }
.intro__texte { margin: 0 0 32px; max-width: 50ch; font: 400 17px/1.75 var(--sans); color: var(--encre-2); }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.intro__meta { margin: 16px 0 0; font: 600 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--encre-3); }

.intro__etapes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 26px;
  margin: clamp(30px, 5vh, 48px) 0 0; padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}

.intro__etapes li { display: grid; gap: 8px; align-content: start; }
.intro__etapes b { font: 500 italic 22px var(--serif); color: var(--cuivre); }
.intro__etapes span { font: 400 13px/1.6 var(--sans); color: var(--encre-3); }
.intro__etapes strong { display: block; margin-bottom: 3px; font: 600 13.5px/1.4 var(--sans); color: var(--charbon); }
.intro__signature { margin: 30px 0 0; max-width: 56ch; font: 400 italic 15.5px/1.6 var(--serif); color: var(--prune); }
.intro__signature a { text-decoration: underline; }

.intro__confidentialite, .etape-photo__note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 0; max-width: 60ch;
  font: 400 12.5px/1.6 var(--sans); color: var(--encre-3);
}

.intro__confidentialite svg, .etape-photo__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--cuivre); }
.intro__confidentialite a, .etape-photo__note a { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────── Question */

.question fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.question__titre {
  display: block; width: 100%;
  margin: 0 0 18px; padding: 0;
  font: 500 clamp(26px, 2.5vw, 36px)/1.18 var(--serif);
  color: var(--charbon);
}

.question__consigne { margin: -6px 0 18px; font: 400 14px/1.6 var(--sans); color: var(--encre-3); }
.question__choix { display: grid; gap: 8px; }

.choix {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 13px 18px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.choix:hover { border-color: var(--rose); transform: translateY(-1px); box-shadow: 0 14px 30px -22px rgba(84, 46, 60, .5); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.choix__marque {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px;
  border: 1.5px solid #C9B5AE; border-radius: 50%;
  color: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.choix input[type="checkbox"] + .choix__marque { border-radius: 4px; }
.choix__marque svg { width: 13px; height: 13px; }
.choix__texte { display: grid; gap: 2px; min-width: 0; }
.choix__texte b { font: 600 15.5px/1.35 var(--sans); color: var(--charbon); }
.choix__texte i { font: 400 13px/1.45 var(--sans); font-style: normal; color: var(--encre-3); }

.choix:has(input:checked) { border-color: var(--prune); background: linear-gradient(100deg, #F6ECE8, #FBF5F2); box-shadow: inset 3px 0 0 var(--prune); }
.choix input:checked + .choix__marque { background: var(--prune); border-color: var(--prune); color: var(--blanc); }
.choix:has(input:focus-visible) { outline: 2px solid var(--prune); outline-offset: 2px; }

.question__precision { display: grid; gap: 8px; margin-top: 16px; }
.question__precision label, .champ label { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }

.question__precision input, .champ input {
  width: 100%; min-height: 50px;
  padding: 10px 16px;
  font: 400 16px var(--sans); color: var(--charbon);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 0;
  transition: border-color .3s;
}

.question__precision input:focus, .champ input:focus { outline: none; border-color: var(--prune); box-shadow: 0 0 0 3px rgba(110, 61, 79, .12); }

/* — Retour des fondatrices et suggestion de soin — */

.question__retour:empty { display: none; }
.question__retour { margin-top: 18px; }

.retour {
  padding: 15px 20px 15px 22px;
  background: #F6ECE8;
  border-left: 3px solid var(--prune);
  animation: analyseEntree .5s var(--ease) both;
}

.retour::before {
  content: "Ce que cela nous dit";
  display: block; margin-bottom: 8px;
  font: 600 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cuivre);
}

.retour p { margin: 0; font: 400 15px/1.7 var(--sans); color: #3f3a38; }
.retour p + p { margin-top: 10px; }
.retour strong { font-weight: 600; color: var(--prune-deep); }

.suggestion { margin-top: 16px; display: grid; gap: 10px; animation: analyseEntree .5s var(--ease) .12s both; }
.suggestion__titre { margin: 0; font: 600 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cuivre); }

.mini {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 10px 18px 10px 10px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.mini:hover { border-color: var(--rose); transform: translateY(-1px); box-shadow: 0 16px 34px -24px rgba(84, 46, 60, .55); }
.mini img { width: 64px; height: 80px; object-fit: cover; }
.mini__corps { display: grid; gap: 3px; }
.mini__corps b { font: 500 19px/1.2 var(--serif); color: var(--prune-deep); }
.mini__corps i { font: 600 9.5px var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); }
.mini__corps span { margin-top: 4px; font: 400 13.5px/1.6 var(--sans); color: var(--encre-2); }
.suggestion--ecart .mini img { filter: grayscale(.7); opacity: .75; }
.suggestion--ecart .mini__corps b { color: var(--encre-2); }

/* Retour / Suivant : toujours la dernière chose de l'écran, sous la suggestion de soins */
.question__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-top: clamp(16px, 2.6vh, 26px);
}

/* L'introduction, courte, reste centrée dans la hauteur */
.analyse[data-etape="intro"] .analyse__scene { justify-content: center; }

/* ─────────────────────────────── Étape photo */

.etape-photo__texte { margin: 0 0 22px; max-width: 54ch; font: 400 16px/1.75 var(--sans); color: var(--encre-2); }
.etape-photo__consignes { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.etape-photo__consignes li { display: flex; align-items: center; gap: 14px; font: 500 14.5px/1.5 var(--sans); color: var(--charbon); }
.etape-photo__consignes svg { width: 40px; height: 40px; padding: 10px; flex: none; background: var(--rose-voile); color: var(--prune); border-radius: 50%; }
.etape-photo__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.etape-photo__actions .btn--outline { padding: 17px 26px; }
.etape-photo__zone:empty { display: none; }
.etape-photo__attente { font: 500 14px var(--sans); color: var(--encre-3); text-align: center; padding: 40px 0; }
.etape-photo__apercu { width: min(240px, 60%); margin: 4px 0 8px; }
.etape-photo__apercu img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Pendant la prise : la caméra seule */
.etape-photo.is-capture > :not(.etape-photo__zone):not(.question__titre) { display: none; }
.etape-photo.is-capture .question__titre { font-size: clamp(22px, 2.4vw, 30px); text-align: center; margin-bottom: 16px; }

.accord { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font: 400 13.5px/1.6 var(--sans); color: var(--encre-2); }
.accord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.accord__case { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; background: var(--blanc); border: 1.5px solid #C9B5AE; border-radius: 4px; color: transparent; transition: background .25s, border-color .25s, color .25s; }
.accord__case svg { width: 13px; height: 13px; }
.accord input:checked + .accord__case { background: var(--prune); border-color: var(--prune); color: var(--blanc); }
.accord input:focus-visible + .accord__case { outline: 2px solid var(--prune); outline-offset: 2px; }
.accord a { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }

/* — Caméra — */

.photo { display: grid; justify-items: center; gap: 16px; --avance: 0; }

.photo__cadre {
  position: relative;
  width: min(100%, 400px, calc((100svh - var(--entete) - 300px) * .75));
  min-width: 240px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1d0f14;
  box-shadow: 0 30px 60px -36px rgba(36, 19, 24, .8);
}

.photo__video, .photo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__video, .photo[data-source="camera"] .photo__image { transform: scaleX(-1); }   /* effet miroir, comme un égoportrait */
.photo__guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.photo__ovale { stroke: rgba(250, 248, 246, .9); stroke-width: 2; stroke-dasharray: 1.2 1.6; transition: stroke .3s; }
.photo.is-bon .photo__ovale { stroke: #9FE3B4; stroke-width: 3.5; stroke-dasharray: calc(var(--avance) * 100) 100; stroke-linecap: round; }
.photo[data-etat="revue"] .photo__guide, .photo[data-etat="sans-camera"] .photo__guide { display: none; }
.photo[data-etat="sans-camera"] .photo__cadre { aspect-ratio: auto; min-height: 120px; background: var(--rose-voile); box-shadow: none; }

.photo__message {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  margin: 0; padding: 11px 14px;
  font: 600 13.5px/1.4 var(--sans); text-align: center; color: var(--blanc);
  background: rgba(29, 15, 20, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.photo[data-etat="sans-camera"] .photo__message { position: static; background: none; color: var(--prune-deep); backdrop-filter: none; padding: 34px 22px; font-weight: 500; }
.photo.is-bon .photo__message { background: rgba(47, 107, 69, .82); }

.photo__verifs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.photo__verifs li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px;
  font: 600 11.5px var(--sans);
  color: var(--encre-3); background: var(--rose-voile);
  border-radius: 99px;
  transition: background .3s, color .3s;
}

.photo__verifs svg { width: 14px; height: 14px; opacity: .25; transition: opacity .3s; }
.photo__verifs li.is-bon { color: var(--bon); background: var(--bon-fond); }
.photo__verifs li.is-bon svg { opacity: 1; }
.photo__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; }

/* ─────────────────────────────── Calcul */

.calcul { display: grid; justify-items: center; text-align: center; padding: clamp(30px, 8vh, 90px) 0; }
.calcul__embleme { width: 96px; height: 96px; animation: calculPouls 1.8s var(--ease) infinite; }
.calcul__titre { margin: 26px 0 22px; font: 500 italic clamp(26px, 3vw, 36px)/1.2 var(--serif); color: var(--prune); }
.calcul__lignes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; justify-items: start; }
.calcul__lignes li { display: flex; align-items: center; gap: 10px; font: 500 14px var(--sans); color: var(--encre-2); opacity: 0; animation: analyseEntree .5s var(--ease) var(--d) both; }
.calcul__lignes svg { width: 16px; height: 16px; color: var(--cuivre); }

@keyframes calculPouls {
  50% { transform: scale(1.07); opacity: .78; }
}

/* ─────────────────────────────── Résultats : pleine largeur */

.analyse[data-etape="resultats"] { display: block; }
.analyse[data-etape="resultats"] .analyse__visuel, .analyse[data-etape="resultats"] .plateau { display: none; }
.analyse[data-etape="resultats"] .analyse__scene { max-width: none; padding: 0; display: block; }
.analyse[data-etape="calcul"] .plateau { display: none; }

.resultats > section, .resultats__pied { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 0; }
.resultats__titre { margin: 0 0 clamp(22px, 3vw, 34px); font: 500 clamp(28px, 3.3vw, 44px)/1.14 var(--serif); color: var(--charbon); }
.resultats__titre em { font-style: italic; color: var(--prune); }
.resultats .surtitre--cuivre { margin-bottom: 12px; }

/* — Profil — */

.profil {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(28px, 6vw, 90px); align-items: center;
  padding: clamp(48px, 7vw, 96px) max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
  background: radial-gradient(120% 140% at 85% 0%, #7a4659 0%, var(--prune-deep) 46%, var(--prune-nuit) 100%);
  color: var(--ivoire);
}

.profil .surtitre { color: var(--rose); }
.profil__titre { margin: 0; font: 500 clamp(34px, 4.6vw, 62px)/1.08 var(--serif); letter-spacing: -.01em; }
.profil__note { margin: 12px 0 0; font: 400 13px var(--sans); color: var(--rose-pale); }
.profil__pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.profil__pastilles li { padding: 7px 14px; font: 600 11px var(--sans); letter-spacing: .08em; color: var(--ivoire); border: 1px solid rgba(217, 164, 152, .55); border-radius: 99px; }
.profil__allergies { margin: 18px 0 0; font: 400 13.5px/1.6 var(--sans); color: var(--rose-pale); }
.profil__allergies b { font-weight: 600; color: var(--ivoire); }
.profil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }

.jauges { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.profil__jauges { padding: clamp(22px, 3vw, 34px); background: rgba(250, 248, 246, .06); border: 1px solid rgba(217, 164, 152, .22); }
.jauge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: baseline; }
.jauge__nom { font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.jauge__valeur { font: 400 italic 14.5px var(--serif); color: var(--rose); text-align: right; }
.jauge__piste { grid-column: 1 / -1; grid-row: 2; height: 4px; background: rgba(250, 248, 246, .16); overflow: hidden; }
.jauge__piste i { display: block; height: 100%; width: max(4%, calc(var(--n) / 3 * 100%)); background: linear-gradient(90deg, var(--cuivre), var(--rose)); animation: jaugeMonte 1.1s var(--ease) .25s both; transform-origin: left; }
.jauge--claire .jauge__nom { color: var(--charbon); }
.jauge--claire .jauge__valeur { color: var(--prune); }
.jauge--claire .jauge__piste { background: rgba(110, 61, 79, .14); }
.jauge--claire .jauge__piste i { background: linear-gradient(90deg, var(--prune), var(--cuivre)); }

@keyframes jaugeMonte {
  from { transform: scaleX(0); }
}

/* — Ce que les réponses disent — */

.lectures__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.lectures__grille article { padding: 22px 24px; background: var(--blanc); border: 1px solid var(--trait); border-top: 2px solid var(--prune); }
.lectures__grille p { margin: 0; font: 400 14.5px/1.7 var(--sans); color: var(--encre-2); }
.lectures__grille .lectures__q { margin-bottom: 10px; font: 600 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre); }

/* — Lecture de la photo — */

.resultats > .lecture { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.lecture__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 30px 60px -36px rgba(36, 19, 24, .7); }
.lecture h2 { margin: 0 0 22px; font: 500 clamp(24px, 2.6vw, 34px)/1.2 var(--serif); }
.lecture .jauges { max-width: 520px; }
.lecture__note { margin: 24px 0 0; max-width: 62ch; font: 400 13px/1.7 var(--sans); color: var(--encre-3); }
.lecture__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 14px 0 0; font: 600 12.5px var(--sans); color: var(--bon); }
.lecture__etat svg { width: 15px; height: 15px; margin-right: -14px; }

/* — Routine : matin, soir, chaque semaine — */

.rituel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.rituel-col { padding: 24px 26px 26px; background: var(--blanc); border: 1px solid var(--trait); }
.rituel-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--trait); font: 600 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--prune); }
.rituel-col h3 svg { width: 20px; height: 20px; color: var(--cuivre); }
.rituel-col ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: pas; }
.rituel-col li { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); gap: 12px; align-items: center; counter-increment: pas; }
.rituel-col li::before { content: counter(pas); font: 500 italic 17px var(--serif); color: var(--cuivre); }
.rituel-col img { width: 40px; height: 50px; object-fit: cover; }
.rituel-col span { display: grid; gap: 1px; }
.rituel-col i { font: 600 9.5px var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); }
.rituel-col b { font: 500 18px/1.2 var(--serif); color: var(--charbon); }

/* — Les soins, et pourquoi — */

.soins-reco__liste { display: grid; gap: 14px; }

.soin-reco {
  display: grid; grid-template-columns: clamp(150px, 20vw, 230px) minmax(0, 1fr);
  background: var(--blanc);
  border: 1px solid var(--trait);
  transition: opacity .3s var(--ease);
}

.soin-reco.is-retire { opacity: .55; }
.soin-reco__photo { position: relative; display: block; overflow: hidden; background: var(--rose-voile); }
.soin-reco__photo img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; transition: transform .9s var(--ease); }
.soin-reco:hover .soin-reco__photo img { transform: scale(1.04); }
.soin-reco__rang { position: absolute; left: 14px; top: 12px; font: 500 italic 22px var(--serif); color: var(--blanc); text-shadow: 0 1px 12px rgba(29, 15, 20, .7); }
.soin-reco__corps { padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 38px); }
.soin-reco__geste { margin: 0 0 8px; font: 600 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cuivre); }
.soin-reco h3 { margin: 0; font: 500 clamp(24px, 2.5vw, 32px)/1.15 var(--serif); color: var(--prune-deep); }
.soin-reco__type { margin: 6px 0 0; font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.soin-reco__pourquoi { margin: 20px 0 8px; font: 600 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--prune); }
.soin-reco__raisons { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.soin-reco__raisons li { position: relative; padding-left: 20px; font: 400 14.5px/1.65 var(--sans); color: #3f3a38; }
.soin-reco__raisons li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--cuivre); }
.soin-reco__frequence { margin: 12px 0 0; font: 400 italic 14.5px var(--serif); color: var(--encre-2); }
.soin-reco__alerte { margin: 14px 0 0; padding: 12px 16px; font: 400 13px/1.6 var(--sans); color: #6b4a1f; background: #FBF1DF; border-left: 3px solid #D9A441; }

.soin-reco__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait); }
.soin-reco__prix { font: 500 24px var(--serif); color: var(--prune); }
.soin-reco__choix { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; font: 600 12px var(--sans); color: var(--charbon); }
.soin-reco__choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.soin-reco__choix input:checked + .accord__case { background: var(--prune); border-color: var(--prune); color: var(--blanc); }
.soin-reco__choix input:focus-visible + .accord__case { outline: 2px solid var(--prune); outline-offset: 2px; }
.soin-reco__choix .accord__case { margin: 0; }

.sommaire {
  position: sticky; bottom: 14px; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  margin-top: 18px; padding: 16px 18px 16px 26px;
  background: var(--prune-deep); color: var(--ivoire);
  box-shadow: 0 26px 50px -26px rgba(36, 19, 24, .85);
}

.sommaire__texte { display: grid; gap: 2px; }
.sommaire__texte b { font: 500 22px var(--serif); }
.sommaire__texte span { font: 400 12.5px var(--sans); color: var(--rose-pale); }

.ecartes, .ensuite { margin-top: clamp(30px, 4vw, 46px); }
.ecartes h3, .ensuite h3 { margin: 0 0 14px; font: 600 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--encre-3); }
.ecartes ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 14.5px/1.65 var(--sans); color: var(--encre-2); }
.ecartes b { font: 500 17px var(--serif); color: var(--charbon); }
.ensuite__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mini--ligne { grid-template-columns: 56px minmax(0, 1fr); padding: 8px 14px 8px 8px; }
.mini--ligne img { width: 56px; height: 70px; }

/* — Conseils — */

.conseils-reco ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 clamp(28px, 5vw, 64px); margin: 0; padding: 0; list-style: none; }
.conseils-reco li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--trait); }
.conseils-reco b { font: 500 italic 22px/1.2 var(--serif); color: var(--cuivre); }
.conseils-reco p { margin: 0; font: 400 15px/1.7 var(--sans); color: #3f3a38; }

/* — Courriel — */

.resultats > .contact {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start;
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(30px, 5vw, 64px);
  max-width: calc(1240px - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter));
  background: var(--rose-voile);
}

.contact h2 { margin: 0 0 12px; font: 500 clamp(28px, 3.2vw, 42px)/1.14 var(--serif); color: var(--charbon); }
.contact h2 em { font-style: italic; color: var(--prune); }
.contact__texte p, .contact__merci p { margin: 0; font: 400 15.5px/1.7 var(--sans); color: var(--encre-2); }
.contact__merci { grid-column: 1 / -1; text-align: center; }
.contact__form { display: grid; gap: 16px; }
.champ { display: grid; gap: 8px; }
.champ label span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--encre-3); }
.contact__erreur { margin: 0; min-height: 1.4em; font: 500 13.5px var(--sans); color: #9B2C2C; }
.contact__erreur:empty { display: none; }
.contact__form .btn { justify-self: start; }

.resultats__pied { padding-bottom: clamp(48px, 7vw, 88px); display: grid; gap: 14px; }
.resultats__pied p { margin: 0; max-width: 82ch; font: 400 12.5px/1.7 var(--sans); color: var(--encre-3); }
.resultats__pied div { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ─────────────────────────────── Écrans étroits */

@media (max-width: 980px) {
  .analyse { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .analyse__visuel { position: relative; top: 0; grid-column: 1; grid-row: 1; height: clamp(120px, 26vw, 220px); }
  .analyse[data-etape="intro"] .analyse__visuel { height: clamp(220px, 46svh, 420px); }
  .analyse__legende { top: auto; bottom: 16px; left: var(--gutter); }
  .analyse__scene { --pad-x: var(--gutter); grid-column: 1; grid-row: 2; max-width: 720px; margin: 0 auto; padding: 22px var(--gutter) 26px; justify-content: flex-start; }
  .analyse[data-etape="photo"] .analyse__visuel { height: clamp(170px, 44vw, 280px); }
  .plateau { grid-column: 1; grid-row: 3; position: static; margin: 0 var(--gutter) 34px; padding: 14px 16px; background: var(--prune-deep); backdrop-filter: none; }
  .plateau__liste { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .plateau__liste::-webkit-scrollbar { display: none; }
  .plateau__soin { flex: none; gap: 8px; padding-right: 8px; }
  .plateau__soin img { width: 30px; height: 38px; }
  .plateau__soin b { font-size: 13.5px; }
  .plateau__soin i { display: none; }
  .profil { grid-template-columns: minmax(0, 1fr); }
  .resultats > .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .intro__etapes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .intro__etapes li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .intro__texte { font-size: 16px; }
  .analyse__bouton { padding: 17px 24px; }
  .intro__actions .analyse__bouton { width: 100%; }
  .choix { padding: 14px 16px; gap: 14px; }
  .question__nav .analyse__lien { order: -1; flex-basis: 100%; }
  .question__titre { font-size: clamp(25px, 7vw, 30px); }
  .etape-photo__actions .btn { flex: 1 1 100%; }
  .soin-reco { grid-template-columns: minmax(0, 1fr); }
  .soin-reco__photo img { min-height: 0; aspect-ratio: 16 / 10; }
  .soin-reco__choix { margin-left: 0; flex-basis: 100%; }
  /* Les lectures défilent de côté plutôt que d'allonger la page */
  .lectures__grille { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .lectures__grille::-webkit-scrollbar { display: none; }
  .lectures__grille article { flex: 0 0 82%; scroll-snap-align: center; }
  .resultats > .lecture { grid-template-columns: minmax(0, 1fr); }
  .lecture__photo { max-width: 220px; }
  .sommaire { bottom: 8px; padding: 14px 14px 14px 18px; }
  .sommaire .btn { flex: 1 1 100%; }
  .mini { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding-right: 12px; }
  .mini img { width: 62px; height: 78px; }
}

/* ─────────────────────────────── Réponses en tuiles
   Dès que la colonne de la question a la place (ordinateur, tablette), les réponses
   se rangent côte à côte en tuiles presque carrées : la question, le retour, la
   suggestion de soins et le bouton Suivant tiennent à l'écran. Sur cellulaire,
   la colonne est étroite : la liste d'origine revient d'elle-même. */
.question { container: question / inline-size; }

@container question (min-width: 470px) {
  .question__choix { grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); gap: 10px; }
  .question__choix--n2 { --colonnes: 2; }
  .question__choix--n3 { --colonnes: 3; }
  .question__choix--n4 { --colonnes: 4; }
  .question__choix--n5 { --colonnes: 3; }
  .question__choix--n6, .question__choix--n7, .question__choix--n8 { --colonnes: 4; }
  .question__choix--n9, .question__choix--n10 { --colonnes: 4; }

  /* la case au-dessus du texte : le libellé garde toute la largeur de la tuile */
  .choix {
    display: block;
    padding: 13px 13px 15px 14px;
  }
  .choix__marque { width: 20px; height: 20px; margin: 0 0 10px; }
  .choix__texte { display: block; }
  .choix__texte b { display: block; font-size: 14.5px; line-height: 1.32; hyphens: manual; }
  .choix__texte i { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; }
  .choix:has(input:checked) { box-shadow: inset 0 -3px 0 var(--prune); }

  /* Deux soins suggérés : côte à côte */
  .suggestion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suggestion__titre { grid-column: 1 / -1; }
  .suggestion .mini:only-of-type { grid-column: 1 / -1; }
}

@container question (min-width: 470px) and (max-width: 600px) {
  .question__choix--n4 { --colonnes: 2; }   /* colonne étroite : 2 × 2 plutôt que 4 tuiles trop minces */
}

@container question (min-width: 640px) {
  .question__choix--n5, .question__choix--n10 { --colonnes: 5; }
}

/* Écrans d'ordinateur de hauteur ordinaire (768 à 960 px) : on resserre encore */
@media (min-width: 981px) and (max-height: 960px) {
  .analyse__scene { padding-top: 16px; }
  .barre { margin-bottom: 14px; }
  .barre__texte { margin-top: 8px; }
  .question__titre { font-size: clamp(24px, 2.1vw, 30px); margin-bottom: 14px; }
  .question__consigne { margin-bottom: 14px; }
  .question__retour { margin-top: 14px; }
  .retour { padding: 12px 18px 12px 20px; }
  .retour::before { margin-bottom: 5px; }
  .retour p { font-size: 14px; line-height: 1.6; }
  .suggestion { margin-top: 12px; gap: 8px; }
  .mini { padding: 8px 14px 8px 8px; gap: 12px; grid-template-columns: 52px minmax(0, 1fr); }
  .mini img { width: 52px; height: 66px; }
  .mini__corps b { font-size: 17px; }
  .mini__corps span { font-size: 12.5px; line-height: 1.5; }
  .question__nav { margin-top: 14px; }
  .analyse__bouton { padding: 15px 26px; }
  .question__precision { margin-top: 10px; }
  .question__precision input { min-height: 42px; }
}

@media (min-width: 981px) and (max-height: 960px) {
  .choix { padding-top: 10px; padding-bottom: 11px; }
  .choix__marque { margin-bottom: 7px; }
}

/* Portables de 768 px de haut : encore un cran */
@media (min-width: 981px) and (max-height: 800px) {
  .analyse__scene { padding-top: 10px; }
  .barre { margin-bottom: 10px; }
  .question__titre { font-size: clamp(22px, 1.9vw, 27px); margin-bottom: 10px; }
  .question__consigne { margin: -4px 0 10px; font-size: 13px; }
  .question__choix { gap: 8px; }
  .question__retour { margin-top: 10px; }
  .retour { padding: 10px 16px 10px 18px; }
  .retour::before { margin-bottom: 4px; }
  .retour p { font-size: 13.5px; line-height: 1.55; }
  .retour p + p { margin-top: 6px; }
  .suggestion { margin-top: 10px; }
  .mini { padding: 6px 12px 6px 6px; }
  .mini__corps span { font-size: 12px; line-height: 1.45; margin-top: 2px; }
  .question__nav { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .analyse__ecran.is-entree > * > *, .retour, .suggestion, .plateau__soin.is-nouveau, .calcul__lignes li { animation: none; opacity: 1; }
  .calcul__embleme, .jauge__piste i { animation: none; }
  .analyse__images img { transition: opacity .3s; transform: none; }
}