/* La carte du corps, version 5 : la ligne visuelle de la série d'Alain
   (aquarelle bleu pétrole et orange, veines lumineuses, papier crème).
   Les couleurs d'action restent foncées pour la lisibilité (contraste ≥ 4,5:1). */
:root {
  --papier: #F7F1E8;
  --papier-fonce: #EFE5D6;
  --encre: #1E2F3A;            /* texte principal */
  --encre-douce: #55636B;      /* texte secondaire (5,5:1 sur le papier) */
  --bleu: #24536A;             /* action : boutons, liens */
  --bleu-fonce: #1B4253;
  --bleu-lavis: #2F6690;
  --orange: #E0702A;           /* lueurs et décor, jamais du texte */
  --orange-texte: #A84816;     /* orange lisible (5,2:1 sur le papier) */
  --braise: rgba(224, 112, 42, 0.22);
  --trait: #7C8E98;
  --bord: rgba(36, 83, 106, 0.2);
  --bord-fort: rgba(36, 83, 106, 0.45);
  --focus: #1B4253;
  --duree: 280ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--papier);
  background-image: var(--papier-image, radial-gradient(ellipse at 15% 10%, rgba(47, 102, 144, 0.05), transparent 45%), radial-gradient(ellipse at 90% 70%, rgba(224, 112, 42, 0.05), transparent 50%));
  background-attachment: fixed;
  color: var(--encre);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Le papier de ChatGPT (T09), raccordé en miroir : il défile avec la page */
body.avec-papier { background-size: 384px 384px; background-repeat: repeat; background-attachment: scroll; }
a { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- En-tête et pied --- */
/* La bande du haut reprend celle du site /atelier/ (demande d'Alain) : même
   blanc-crème, même filet, même logo, et le même menu derrière un bouton
   hamburger (menu.js, partagé par les pages des outils). */
.entete {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; height: 68px;
  background: #FDFCF9; border-bottom: 0.5px solid rgba(70, 96, 94, 0.12);
}
.logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: #14201E; text-decoration: none; letter-spacing: 0.02em; }
.menu-burger {
  display: flex; flex-direction: column; gap: 5px; padding: 10px; margin-right: -10px;
  background: none; border: none; cursor: pointer;
}
.menu-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #14201E; }
.menu-site {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 2rem 1.25rem 2.25rem;
  background: #FDFCF9; border-bottom: 0.5px solid rgba(70, 96, 94, 0.12);
  box-shadow: 0 12px 24px -16px rgba(20, 32, 30, 0.35);
}
.menu-site a { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #14201E; text-decoration: none; }
.menu-site a:hover { color: #A0543C; }
.pied {
  margin-top: auto; padding: 2rem 1.25rem 2.5rem; border-top: 0.5px solid var(--bord);
  font-size: 13px; color: var(--encre-douce); text-align: center;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; }
.pied-liens a { color: var(--encre-douce); }

/* --- Le parcours --- */
.carte { width: 100%; max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.etape { animation: apparait 420ms ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.etape h1, .etape h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--encre); line-height: 1.15; }
.etape h1 { font-size: 2.6rem; margin: 1.25rem 0 0.75rem; }
.etape h2 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.etape h1:focus, .etape h2:focus { outline: none; }
.aide { color: var(--encre-douce); margin-bottom: 1.25rem; }
/* la phrase du haut de la dernière page */
.resultat-intro { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25rem; line-height: 1.4; margin: 0.25rem 0 1.25rem; }
.intro-p { font-size: 1.08rem; margin-bottom: 0.9rem; }
.note {
  font-size: 0.88rem; color: var(--encre-douce);
  background: rgba(239, 229, 214, 0.7); padding: 0.9rem 1rem; border-radius: 4px; margin: 1.5rem 0;
}
.noscript { padding: 2rem 0; }

/* Progression : six points qui s'allument */
.progres { display: flex; gap: 0.5rem; justify-content: center; margin: 0.25rem 0 1.25rem; }
.progres-point { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--trait); transition: all var(--duree); }
.progres-point.fait { background: var(--orange); border-color: var(--orange); }
.progres-point.ici { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px var(--braise); transform: scale(1.2); }

/* Boutons */
.actions { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 1.75rem; flex-wrap: wrap; }
.btn {
  min-height: 48px; padding: 0.8rem 1.6rem; border-radius: 999px;
  font: inherit; font-size: 15px; cursor: pointer;
  transition: background var(--duree), color var(--duree), opacity var(--duree), transform 150ms;
}
.btn:active { transform: scale(0.97); }
.btn-plein { background: var(--bleu); color: #fff; border: none; margin-left: auto; }
.btn-plein:hover { background: var(--bleu-fonce); }
.btn-plein[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn-plein[aria-disabled="true"]:hover { background: var(--bleu); }
.btn-trait { background: transparent; color: var(--bleu); border: 1px solid var(--bord-fort); }
.btn-trait:hover { border-color: var(--bleu); }
.btn-trait:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-lien { background: none; border: none; color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; padding: 0.8rem 0.25rem; }
.btn-grand { font-size: 17px; padding: 1rem 2.2rem; box-shadow: 0 8px 24px -10px rgba(224, 112, 42, 0.55); }
.btn-petit { min-height: 36px; font-size: 13px; padding: 0.3rem 0; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
a.btn-plein { color: #fff; }
.indice { font-size: 0.9rem; color: var(--orange-texte); margin-top: 0.75rem; min-height: 1.4em; }

/* « Autre » : une pastille qui ouvre un petit champ */
.autre-bloc { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.pastille-autre {
  min-height: 44px; padding: 0.55rem 1.2rem; border-radius: 999px;
  font: inherit; font-size: 14px; color: var(--encre-douce); background: transparent;
  border: 1px dashed var(--bord-fort); cursor: pointer;
}
.pastille-autre[aria-pressed="true"] { border-style: solid; border-color: var(--orange); color: var(--encre); background: var(--braise); }
.champ-autre, textarea {
  width: 100%; font: inherit; color: inherit;
  border: 1px solid var(--bord-fort); border-radius: 10px;
  padding: 0.7rem 0.9rem; background: rgba(255, 255, 255, 0.55);
}
textarea { resize: vertical; }

/* --- Accueil --- */
/* le titre de l'accueil : la question */
.etape h1.accueil-titre { font-size: 2.2rem; line-height: 1.15; margin: 1rem 0 0.6rem; }
.actions-accueil { justify-content: center; margin-top: 1rem; }
.actions-accueil .btn-plein { margin: 0 auto; }
/* en petit, comme des conditions d'utilisation */
/* bien plus bas : on ne doit pas le lire d'emblée (demande d'Alain) */
.petites-lignes { margin-top: max(6rem, 32vh); font-size: 12px; line-height: 1.55; color: var(--encre-douce); text-align: center; }
.petites-lignes a { color: var(--encre-douce); }

/* Des indices qui s'ajoutent sur l'image d'accueil (T10), presque effacée au
   départ ; --r va de 0 à 1 à mesure qu'ils arrivent, puis l'image est entière. */
.accueil-scene { margin: 1rem -1rem 0; }
.scene-indices {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer;
  border-radius: 0 0 40% 60% / 0 0 10% 14%; -webkit-tap-highlight-color: transparent;
}
.scene-indices:focus-visible { outline: 2px dashed var(--focus); outline-offset: -4px; }
.scene-indices.revelee { cursor: default; }
.scene-fond {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: calc(0.1 + var(--r, 0) * 0.9);
  filter: blur(calc((1 - var(--r, 0)) * 10px)) saturate(calc(0.45 + var(--r, 0) * 0.55));
  transform: scale(calc(1.06 - var(--r, 0) * 0.06));
  transition: opacity 900ms ease, filter 900ms ease, transform 1200ms ease;
}
.scene-decor { position: absolute; inset: 0; pointer-events: none; }
/* les taches, centrées sur leur point (marges en % de la largeur, comme la taille) */
.scene-taches .tache {
  position: absolute; width: 12%; height: auto; aspect-ratio: 1; margin: -6% 0 0 -6%;
  animation: eclot 700ms cubic-bezier(.2, 1.6, .4, 1) both; transition: opacity 900ms;
}
.scene-indices.revelee .scene-taches .tache { opacity: 0.8; }
.scene-liste { position: absolute; left: 1rem; top: 9%; width: 46%; list-style: none; display: grid; gap: 0.3rem; }
.scene-ligne {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(0.92rem, 3.9vw, 1.15rem); line-height: 1.15;
  color: var(--encre); text-shadow: 0 0 10px rgba(247, 241, 232, 0.95), 0 0 2px rgba(247, 241, 232, 0.95);
  animation: apparait 500ms ease-out both;
}
.scene-puce { flex: none; width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.scene-courbe { flex: none; width: 1.6em; height: auto; color: var(--bleu); }
.scene-fin {
  min-height: 3.2em; margin: 0.6rem 1rem 0; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--encre);
}
.scene-fin:not(:empty) { animation: apparait 600ms ease-out both; }

/* --- 1. La ligne du temps --- */
.chemin { position: relative; border: none; margin: 0.5rem 0 0; padding: 0.5rem 0; --v: 84px; }
.chemin-trace {
  position: absolute; left: calc(var(--v) / 2 - 3px); top: 1.5rem; bottom: 5.5rem; width: 6px; border-radius: 6px;
  background: linear-gradient(180deg, #2F6690 0%, #5C7F97 35%, #C9784A 70%, #E0702A 100%);
  filter: blur(0.6px); opacity: 0.75;
}
.chemin-trace.avec-image {
  width: 46px; left: calc(var(--v) / 2 - 23px); border-radius: 0; background-size: 100% 100%; background-repeat: no-repeat; filter: none; opacity: 0.9;
}
.station { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0; cursor: pointer; z-index: 1; }
.station-vignette {
  flex: none; width: var(--v); height: var(--v); border-radius: 50%; overflow: hidden;
  border: 3px solid var(--papier); box-shadow: 0 0 0 1px var(--bord-fort);
  transition: transform 350ms cubic-bezier(.2,1.6,.4,1), box-shadow var(--duree);
}
.station-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.station:hover .station-vignette { transform: scale(1.06); }
.station.choisie .station-vignette { transform: scale(1.14); box-shadow: 0 0 0 3px var(--orange), 0 0 26px 6px var(--braise); }
.station-texte { font-size: 1.05rem; line-height: 1.3; }
.station.choisie .station-texte { font-weight: 500; }
.station:has(input:focus-visible) .station-vignette { outline: 2px solid var(--focus); outline-offset: 4px; }
.station-autre { margin-top: 0.75rem; }
.station-autre .station-vignette { background: transparent; border: 2px dashed var(--bord-fort); box-shadow: none; transform: scale(0.72); }
.station-autre.choisie .station-vignette { transform: scale(0.8); }
/* Les scènes peintes (T01) : des lavis ronds, sans cadre ; la scène touchée s'allume */
.station-vignette.avec-image { border: none; border-radius: 0; overflow: visible; box-shadow: none; }
.station-vignette.avec-image img { object-fit: contain; }
.station.choisie .station-vignette.avec-image { box-shadow: none; filter: drop-shadow(0 0 10px rgba(224, 112, 42, 0.75)); }
.station:not(.choisie) .station-vignette.avec-image { filter: saturate(0.85); }
.station-precision { margin: -0.25rem 0 0.6rem calc(var(--v) + 1rem); display: flex; flex-direction: column; gap: 0.3rem; }
.precision-libelle { font-size: 0.9rem; color: var(--orange-texte); font-weight: 500; }
.etincelle {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, #FFF4E0 0 25%, #FFB067 45%, rgba(224, 112, 42, 0) 72%);
  box-shadow: 0 0 18px 6px rgba(224, 112, 42, 0.45); z-index: 2; pointer-events: none;
  transition: transform 700ms cubic-bezier(.5,0,.2,1);
  animation: battement 1.6s ease-in-out infinite;
}
.etincelle.posee { animation: none; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@keyframes battement { 50% { opacity: 0.45; transform-origin: center; } }

/* --- 2. Le corps --- */
/* --corps-l et --corps-h : le format de l'image du corps, posé par carte.js depuis les données */
.silhouette { width: min(100%, calc(78vh * var(--corps-l, 240) / var(--corps-h, 520)), 400px); margin: 0 auto; }
.silhouette-cotes {
  display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: 0.25rem;
}
.corps-scene {
  position: relative; width: 100%; aspect-ratio: var(--corps-l, 240) / var(--corps-h, 520); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: crosshair; color: #4C6878;
}
.corps-scene:focus-visible { outline: 2px dashed var(--focus); outline-offset: 6px; }
.corps-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.corps-points { position: absolute; inset: 0; }
.point {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0;
  border: none; background: none; cursor: grab; touch-action: none; border-radius: 50%;
}
.point:active { cursor: grabbing; }
.point .tache { position: absolute; inset: -6px; width: auto; height: auto; }
.point.choisi::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--encre); box-shadow: 0 0 0 3px rgba(247, 241, 232, 0.8);
}
.point.nouveau .tache { animation: eclot 600ms cubic-bezier(.2,1.6,.4,1); }
@keyframes eclot { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.point-etiquette {
  position: absolute; transform: translate(-50%, calc(-100% - 30px)); white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--encre); color: #fff; pointer-events: none; opacity: 0; transition: opacity var(--duree);
}
.point-etiquette.visible { opacity: 1; }
.viseur {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid var(--orange); box-shadow: 0 0 0 2px #fff; display: none; pointer-events: none;
}
.corps-scene:focus-visible .viseur { display: block; }
.loupe {
  position: absolute; width: 112px; height: 112px; margin-left: -56px; border-radius: 50%;
  background-color: var(--papier); background-repeat: no-repeat;
  border: 3px solid #fff; box-shadow: 0 6px 20px rgba(30, 47, 58, 0.35), 0 0 0 1px var(--bord-fort);
  pointer-events: none; opacity: 0; transform: scale(0.6); transition: opacity 150ms, transform 150ms; z-index: 3;
}
.loupe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.loupe.visible { opacity: 1; transform: scale(1); }
.corps-compte { text-align: center; font-size: 0.92rem; color: var(--orange-texte); min-height: 1.5em; margin-top: 0.5rem; }
.corps-selection { text-align: center; min-height: 44px; }

/* La tache lumineuse (point, fiche, carte finale) :
   .tache > .tache-fond (> .tache-matiere), puis .tache-forme-cadre > .tache-forme */
.tache {
  display: block; position: relative;
  /* un fin liseré clair la détache du corps, puis sa lueur */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 9px color-mix(in srgb, var(--c, #E0702A) 75%, transparent));
}
.tache-fond {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, #E0702A) 60%, white) 0 14%, var(--c, #E0702A) 40%, color-mix(in srgb, var(--c, #E0702A) 45%, transparent) 62%, transparent 72%);
}
/* avec un masque de ChatGPT (T03), la tache prend la forme d'une éclaboussure */
.tache-masque .tache-fond {
  border-radius: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, #E0702A) 80%, white) 0 10%, var(--c, #E0702A) 38%);
  -webkit-mask: var(--masque) center / contain no-repeat; mask: var(--masque) center / contain no-repeat;
}
.tache-petite { width: 30px; height: 30px; }
.tache-moyenne { width: 64px; height: 64px; }
.tache-grande { width: 100%; height: 100%; }
/* la matière (T04), en gris clair, fondue dans la couleur sans la pâlir : elle ne fait que la texturer */
.tache-matiere {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.3) brightness(1.2); mix-blend-mode: multiply; opacity: 0.6;
}
/* la forme (T05) : un signe blanc, cerné de sombre pour se lire sur toutes les couleurs */
.tache-forme-cadre { position: absolute; inset: 27%; filter: drop-shadow(0 0 1.5px rgba(30, 47, 58, 0.95)) drop-shadow(0 0 4px rgba(30, 47, 58, 0.45)); }
.tache-forme { position: absolute; inset: 0; background: #fff; -webkit-mask: var(--masque-forme) center / contain no-repeat; mask: var(--masque-forme) center / contain no-repeat; }

/* --- 3. Les fiches : couleur, matière, forme --- */
.fiche-compteur { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.fiche-pas { display: inline-flex; gap: 0.35rem; }
.fiche-pas-point { width: 22px; height: 4px; border-radius: 4px; background: var(--bord); }
.fiche-pas-point.fait, .fiche-pas-point.ici { background: var(--orange); }
.fiche-tete { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0.75rem; }
.fiche-vue {
  flex: none; width: 176px; height: 176px; border-radius: 50%; position: relative;
  background-color: var(--papier); background-repeat: no-repeat;
  border: 3px solid #fff; box-shadow: 0 8px 26px -8px rgba(30, 47, 58, 0.45), 0 0 0 1px var(--bord-fort);
}
.fiche-vue .tache { position: absolute; inset: 22%; width: 56%; height: 56%; }
.fiche-vue.vibre .tache { animation: vibre 520ms ease-out; }
@keyframes vibre { 0% { transform: scale(0.75); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fiche-titre { font-size: 1.6rem !important; }
.fiche-question { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; line-height: 1.25; margin-top: 0.5rem; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.6rem; }
.tuile {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.6rem 0.3rem 0.5rem;
  min-height: 44px; border-radius: 14px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.45);
  font: inherit; color: var(--encre); cursor: pointer; transition: transform 160ms, border-color var(--duree), background var(--duree);
}
.tuile:hover { transform: translateY(-2px); border-color: var(--bord-fort); }
.tuile[aria-pressed="true"] { border-color: var(--orange); background: var(--braise); transform: scale(1.04); }
.tuile-libelle { font-size: 13px; line-height: 1.2; text-align: center; }
.apercu { display: block; width: 64px; height: 64px; }
.apercu-couleur {
  border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c) 70%, white), var(--c) 55%, color-mix(in srgb, var(--c) 80%, black));
  box-shadow: inset 0 0 0 1px rgba(30, 47, 58, 0.12);
}
/* la couleur posée dans une éclaboussure (T03) */
.apercu-couleur.tache-masque {
  border-radius: 0; box-shadow: none;
  background: radial-gradient(circle at 42% 40%, color-mix(in srgb, var(--c) 60%, white) 0 12%, var(--c) 52%);
  -webkit-mask: var(--masque) center / contain no-repeat; mask: var(--masque) center / contain no-repeat;
}
.apercu-matiere {
  border-radius: 42% 58% 50% 50% / 50% 45% 55% 50%; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(30, 47, 58, 0.12);
}
/* le signe (T05), à l'encre */
.apercu-forme { background: var(--encre); -webkit-mask: var(--masque-forme) center / contain no-repeat; mask: var(--masque-forme) center / contain no-repeat; }
.apercu-autre { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--encre-douce); border: 2px dashed var(--bord-fort); border-radius: 50%; }
.fiche-autre { display: flex; gap: 0.6rem; margin-top: 0.9rem; align-items: center; }
.fiche-autre .btn-plein { margin-left: 0; }

/* --- 4. L'envie du corps : des cartes peintes (T06) --- */
.cartes-envie { display: grid; gap: 0.7rem; }
.carte-envie {
  display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.35rem 1rem 0.35rem 0.35rem; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.55);
  font: inherit; color: var(--encre); cursor: pointer;
  transition: transform 200ms, border-color var(--duree), box-shadow var(--duree), opacity var(--duree);
}
.carte-envie:hover { transform: translateY(-2px); }
.carte-envie[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 10px 30px -12px rgba(224, 112, 42, 0.6); }
/* une carte jouée : les scènes des autres s'effacent un peu (leurs mots restent lisibles) */
.carte-art { transition: opacity var(--duree); }
.cartes-envie:has([aria-pressed="true"]) .carte-envie:not([aria-pressed="true"]) .carte-art { opacity: 0.5; }
.carte-art { flex: none; width: 128px; aspect-ratio: 1; display: block; }
.carte-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carte-texte { display: flex; flex-direction: column; gap: 0.25rem; }
.carte-titre { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; line-height: 1.1; }
.carte-sous { font-size: 0.92rem; line-height: 1.35; color: var(--encre-douce); }
/* on touche : la scène fait ce que dit la carte (animations proposées par ChatGPT) */
.anim-recule > * { animation: recule 1.4s ease-out forwards; }
.anim-pousse > * { animation: pousse 1.4s cubic-bezier(.2,1.2,.4,1) forwards; }
.anim-fige > * { animation: fige 1.4s ease-out forwards; }
@keyframes recule { to { transform: scale(0.84) translateY(-3%); opacity: 0.72; filter: blur(0.6px) saturate(0.8); } }
@keyframes pousse {
  35% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(255, 176, 103, 0.95)); }
  to { transform: scale(1.03); filter: drop-shadow(0 0 5px rgba(255, 176, 103, 0.5)); }
}
@keyframes fige {
  8%, 24% { transform: translateX(-2px); } 16%, 32% { transform: translateX(2px); }
  45% { transform: none; filter: none; }
  to { transform: none; filter: grayscale(0.75) brightness(1.06) drop-shadow(0 0 8px #CFE3EE); }
}

/* --- 5. Le mouvement : trois poses (T07) fondues l'une dans l'autre --- */
.mouvement-scene { position: relative; width: min(86%, 320px); margin: 0.25rem auto 0; }
.mvt-halo {
  position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(ellipse, var(--halo, #8a6f6b) 0%, color-mix(in srgb, var(--halo, #8a6f6b) 45%, transparent) 40%, transparent 70%);
  opacity: calc(0.25 + var(--v, 0.5) * 0.45); transform: scale(calc(0.6 + var(--v, 0.5) * 0.7)); transition: transform 120ms, opacity 120ms;
}
.mvt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 120ms; }
/* la pose du milieu reste dans le flux : c'est elle qui donne sa taille à la scène */
.mvt-img.mvt-milieu { position: relative; display: block; height: auto; }
.mouvement-palier { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; min-height: 1.6em; margin: 0.5rem 0 0.25rem; }
.curseur-bloc { margin: 0.25rem 0 0; }
.curseur { width: 100%; height: 44px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.curseur::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #2F6690, #9A8C80, #E0702A); }
.curseur::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #2F6690, #9A8C80, #E0702A); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 2px 10px rgba(30, 47, 58, 0.3); }
.curseur::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 2px 10px rgba(30, 47, 58, 0.3); }
.curseur.pas-touche::-webkit-slider-thumb { animation: appel 1.4s ease-in-out infinite; }
.curseur.pas-touche::-moz-range-thumb { animation: appel 1.4s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 10px var(--braise); } }
.curseur-bornes { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--encre-douce); }
.curseur-bornes span:last-child { text-align: right; }

/* --- 6. La sensation dans le temps : quatre courbes (proposition de ChatGPT, T08) --- */
.courbes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.courbe {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 1rem 0.7rem 0.8rem;
  border-radius: 18px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.55);
  font: inherit; color: var(--encre); cursor: pointer;
  transition: transform 200ms, border-color var(--duree), box-shadow var(--duree);
}
.courbe:hover { transform: translateY(-2px); }
.courbe[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 10px 30px -12px rgba(224, 112, 42, 0.6); }
.courbe-dessin { display: block; width: 100%; height: auto; aspect-ratio: 120 / 48; overflow: visible; }
.courbe-dessin path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* dessous, le même trait large et pâle, comme un lavis ; dessus, le trait */
.courbe-lavis { stroke: var(--bleu); stroke-width: 10; opacity: 0.14; }
.courbe-trait { stroke: var(--bleu); stroke-width: 3; }
.courbe[aria-pressed="true"] .courbe-lavis { stroke: var(--orange); opacity: 0.3; }
.courbe[aria-pressed="true"] .courbe-trait { stroke: var(--orange); }
.courbe-libelle { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; line-height: 1.1; }
/* on touche : la courbe se dessine une fois, à son rythme, puis reste */
.courbe.trace path { stroke-dasharray: 1; animation: dessine 1.2s ease-in-out both; }
.courbe-vagues.trace path { animation-duration: 2.2s; }
.courbe-montee.trace path { animation-timing-function: ease-in; }
.courbe-breve.trace .courbe-trait { animation: dessine 0.8s ease-out both, pali 1.1s 0.9s ease-out forwards; }
@keyframes dessine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pali { to { opacity: 0.45; } }

/* --- 7. Le dé : un vrai dé en 3D, qu'on lance --- */
.de-titre { text-align: center; }
.de-lancer {
  --de: 116px;
  display: block; margin: 0.25rem auto 0; padding: 1.6rem 2rem 1.2rem; background: none; border: none; cursor: pointer;
  border-radius: 24px; -webkit-tap-highlight-color: transparent;
}
.de-lancer:focus-visible { outline: 2px dashed var(--focus); }
.de-scene { display: block; width: var(--de); height: var(--de); perspective: 640px; }
.de-incline { display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(24deg); }
.de-cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.15, .75, .25, 1); }
.de-face {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%;
  border-radius: 20%; border: 2px solid var(--bleu); backface-visibility: hidden;
  background: radial-gradient(circle at 28% 22%, #FFFDF9, #F4E8D6 62%, #EAD7BD);
  box-shadow: inset 0 0 18px rgba(36, 83, 106, 0.18);
}
.de-face-1 { transform: translateZ(calc(var(--de) / 2)); }
.de-face-6 { transform: rotateY(180deg) translateZ(calc(var(--de) / 2)); }
.de-face-3 { transform: rotateY(90deg) translateZ(calc(var(--de) / 2)); }
.de-face-4 { transform: rotateY(-90deg) translateZ(calc(var(--de) / 2)); }
.de-face-2 { transform: rotateX(90deg) translateZ(calc(var(--de) / 2)); }
.de-face-5 { transform: rotateX(-90deg) translateZ(calc(var(--de) / 2)); }
.de-point {
  width: 72%; aspect-ratio: 1; place-self: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFC78A, #E0702A 58%, #A84816); box-shadow: 0 0 7px rgba(224, 112, 42, 0.6);
}
/* son ombre au sol */
.de-lancer::after {
  content: ""; display: block; width: 70%; height: 10px; margin: 20px auto 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 47, 58, 0.24), transparent 70%);
}
/* avant le premier lancer, il hésite doucement : on a envie de le toucher */
.de-lancer.attente .de-incline { animation: hesite 2.8s ease-in-out infinite; }
@keyframes hesite { 0%, 100% { transform: rotateX(-18deg) rotateY(24deg); } 50% { transform: rotateX(-10deg) rotateY(42deg) translateY(-4px); } }
/* lancé : il saute, roule et retombe */
.de-lancer.lance .de-scene { animation: saut 1.1s cubic-bezier(.3, .6, .4, 1); }
@keyframes saut { 0% { transform: none; } 30% { transform: translateY(-42px) scale(1.06); } 62% { transform: translateY(0) scale(1); } 78% { transform: translateY(-9px); } 100% { transform: none; } }
.de-appel { text-align: center; font-size: 0.95rem; color: var(--encre-douce); min-height: 1.4em; }
.de-question { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; line-height: 1.25; text-align: center; margin: 0.25rem 0 0.9rem; }
.de-question:not(:empty) { animation: apparait 500ms ease-out both; }
.de-saisie { display: grid; gap: 0.6rem; }
.de-saisie .btn-trait { justify-self: start; }
.rappel { font-size: 0.82rem; color: var(--encre-douce); }
.indices-gardes { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.indices-titre { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-texte); }
.indices-aucun { color: var(--encre-douce); font-size: 1.2rem; line-height: 1; }
.indice-carte { border-left: 3px solid var(--orange); padding: 0.4rem 0 0.2rem 0.9rem; background: rgba(255, 255, 255, 0.4); border-radius: 0 10px 10px 0; }
.indice-question { font-size: 0.85rem; color: var(--encre-douce); }
.indice-reponse { font-size: 1rem; }
.indices-complet { margin-top: 0.5rem; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--orange-texte); }

/* --- Le résultat : ta carte du corps --- */
.resultat-carte { display: grid; gap: 1.25rem; margin: 0.5rem 0 1.25rem; }
.resultat-corps { position: relative; width: min(70%, 260px); aspect-ratio: var(--corps-l, 240) / var(--corps-h, 520); margin: 0 auto; }
.resultat-corps .corps-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.point-peint { position: absolute; transform: translate(-50%, -50%) scale(0); animation: peint 700ms cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes peint { to { transform: translate(-50%, -50%) scale(1); } }
.point-numero {
  position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--encre); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.legende { list-style: none; display: grid; gap: 0.6rem; }
.legende-ligne { display: flex; align-items: center; gap: 0.7rem; }
.legende-numero {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--encre); color: #fff;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.legende-ligne .tache { flex: none; }
.legende-texte { display: flex; flex-direction: column; line-height: 1.3; }
.legende-texte strong { font-weight: 500; }
.legende-texte span { color: var(--encre-douce); font-size: 0.95rem; }
.legende-autre { color: var(--encre-douce); margin-bottom: 1rem; }
.releve { margin: 1rem 0 1.25rem; border-top: 0.5px solid var(--bord-fort); }
.releve-ligne { padding: 0.8rem 0; border-bottom: 0.5px solid var(--bord-fort); }
.releve dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-texte); margin-bottom: 0.2rem; }
.releve dd { font-size: 1.05rem; }
.recul {
  margin: 0 0 2rem; padding: 1.25rem 1.25rem 0.5rem; border-radius: 16px;
  background: linear-gradient(140deg, rgba(47, 102, 144, 0.09), rgba(224, 112, 42, 0.13));
  border-left: 3px solid var(--orange);
  overflow: hidden;   /* la lumière de la scène ne fait jamais déborder la page */
}
.recul h3 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--orange-texte); margin-bottom: 0.4rem; }
.reformulation { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; line-height: 1.45; margin-bottom: 1.25rem; }
.creuser { margin-bottom: 1rem; }
.recul-attente { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; text-align: center; margin-bottom: 0.75rem; }
/* La fin : les signes autour de la personne, puis des taches (voir aquarelle.js).
   Elle se joue quand la scène reçoit .joue (le résumé est arrivé ET la scène est
   à l'écran). Jusqu'à ~0,8 s : les signes tourbillonnent ; de 0,8 à ~1,5 s : ils
   se posent l'un après l'autre et s'étalent en taches, les gouttes du corps
   tombent ; ~2 s : la silhouette est peinte ; ~2,4 s : le résumé s'écrit. */
.aquarelle { container-type: inline-size; position: relative; width: min(100%, 360px); aspect-ratio: 0.82; margin: 0.4rem auto 1.4rem; }
.feuille {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: 3px;
  background-color: #FBF8F2; background-image: var(--papier-image, none); background-size: 384px 384px;
  box-shadow: 0 1px 2px rgba(30, 47, 58, 0.1), 0 14px 30px -18px rgba(30, 47, 58, 0.45);
}
/* la toile se pose sur le papier en multiplication : le grain du papier traverse la peinture */
.aquarelle-toile { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s; }
.aquarelle-toile.prete { opacity: 1; }
.aquarelle-gouttes { position: absolute; inset: 0; z-index: 3; }
/* sous chaque signe, des coups de pinceau doux de sa couleur (T17) : ils se peignent
   de gauche à droite quand le signe se pose */
.aquarelle-pinceaux { position: absolute; inset: 0; z-index: 1; }
.pinceau {
  position: absolute; width: var(--d); aspect-ratio: 1; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background: var(--c); mix-blend-mode: multiply; opacity: 0.55; transform: rotate(var(--tourne));
  clip-path: inset(0 100% 0 0);
  -webkit-mask: var(--masque) center / contain no-repeat; mask: var(--masque) center / contain no-repeat;
}
.aquarelle.joue .pinceau { animation: peint-pinceau 0.7s cubic-bezier(.3, .6, .3, 1) calc(var(--t) - 0.1s) forwards; }
@keyframes peint-pinceau { to { clip-path: inset(0 0 0 0); } }
/* les gouttes : en attente au-dessus du papier, plus grosses (plus près de l'œil),
   leur ombre décalée ; elles tombent, rapetissent, l'ombre les rejoint, et elles
   éclatent en lavis */
.goutte {
  position: absolute; width: var(--d); aspect-ratio: 1; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0 7%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--c) 32%, transparent) 0%, color-mix(in srgb, var(--c) 74%, transparent) 64%, color-mix(in srgb, var(--c) 82%, black) 100%);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 60%, black);
  transform: scale(1.6);
  animation: plane 2.8s ease-in-out infinite; animation-delay: calc(var(--k) * -0.37s);
}
.goutte::after {
  content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 50%;
  background: rgba(30, 47, 58, 0.16); filter: blur(2px); transform: translate(40%, 55%);
}
@keyframes plane { 50% { transform: scale(1.6) translateY(-7%); } }
.aquarelle.joue .goutte { animation: chute 0.28s cubic-bezier(.55, 0, .95, .45) calc(var(--t) - 0.28s) forwards, eclate 0.2s ease-out var(--t) forwards; }
.aquarelle.joue .goutte::after { animation: ombre 0.28s cubic-bezier(.55, 0, .95, .45) calc(var(--t) - 0.28s) forwards; }
@keyframes chute { to { transform: scale(1); } }
@keyframes ombre { to { transform: none; opacity: 0.6; } }
@keyframes eclate { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
/* les signes de la personne : ils tournent autour d'elle (--a, l'angle ; --rad, la
   distance au centre), puis chacun file vers sa place, s'y pose et s'étale en tache */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --rad { syntax: "<length>"; inherits: false; initial-value: 0px; }
.aq-signe {
  --a: var(--a0); --rad: var(--rad0);
  position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a)));
  transition: --a var(--t) cubic-bezier(.3, .5, .25, 1), --rad var(--t) cubic-bezier(.5, .05, .35, 1);
}
.aquarelle.joue .aq-signe { --a: var(--a1); --rad: var(--rad1); }
.aq-signe-flotte {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  animation: flotte 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * -0.45s);
}
@keyframes flotte { 50% { transform: translate(3px, -5px) rotate(4deg); } }
/* en se posant : un rebond ; le signe reste sur sa tache */
.aquarelle.joue .aq-signe-flotte { animation: pose-signe 0.6s cubic-bezier(.34, 1.5, .64, 1) var(--t) both; }
@keyframes pose-signe { 0% { transform: scale(1.12); } 35% { transform: scale(0.78); } 100% { transform: scale(0.86); } }
.aq-signe img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(30, 47, 58, 0.28)); }
.aq-signe svg { width: 88%; height: auto; overflow: visible; filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.9)); }
/* les signes tracés, à l'encre : la tache porte déjà la couleur */
.aq-signe .signe-courbe, .aq-signe .signe-mouvement { color: #24485C !important; }
.signe-de {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 70%; aspect-ratio: 1; padding: 9%;
  border: 2px solid var(--bleu); border-radius: 22%; background: radial-gradient(circle at 30% 25%, #FFFDF9, #F4E8D6 70%);
  box-shadow: 0 2px 6px rgba(30, 47, 58, 0.25);
}
/* sans WebGL : le corps en image, des lavis simples */
.aquarelle-corps { position: absolute; opacity: 0; filter: blur(3px); mix-blend-mode: multiply; }
.aquarelle.joue .aquarelle-corps { animation: seche 1s ease-out 0.7s forwards; }
@keyframes seche { to { opacity: 1; filter: none; } }
.lavis-css {
  position: absolute; width: var(--d); aspect-ratio: 1; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  mix-blend-mode: multiply; transform: scale(0);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent) 0 40%, color-mix(in srgb, var(--c) 75%, transparent) 70%);
  -webkit-mask: var(--masque, none) center / contain no-repeat; mask: var(--masque, none) center / contain no-repeat;
}
.aquarelle.joue .lavis-css { animation: etale 0.6s cubic-bezier(.2, .8, .3, 1) var(--t) forwards; }
@keyframes etale { to { transform: scale(1); } }
/* le résumé s'écrit, mot à mot, comme au pinceau : chaque mot se découvre de
   gauche à droite, encre bleue et mouillée, puis sèche en encre foncée */
.reformulation .mot { display: inline-block; opacity: 0; }
.recul.joue .reformulation .mot {
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, 0.5) 47%, transparent 61%);
  mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, 0.5) 47%, transparent 61%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: pinceau 0.5s cubic-bezier(.25, .6, .35, 1) forwards;
  animation-delay: calc(var(--debut-texte, 2.05s) + var(--i) * 45ms);
}
@keyframes pinceau {
  0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; color: #2F6690; text-shadow: 0 0 5px rgba(47, 102, 144, 0.5); }
  60% { color: #24485C; text-shadow: 0 0 2px rgba(47, 102, 144, 0.3); }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; color: var(--encre); text-shadow: none; }
}
.creuser.inscrit { opacity: 0; }
.recul.joue .creuser.inscrit { animation: apparait 0.7s ease-out forwards; animation-delay: var(--d, 4s); }
/* les traits de pinceau (T14) : un lavis orange peint sous le titre, puis sous la question */
.recul h3 { position: relative; isolation: isolate; }
.recul h3::before, .trait-pinceau {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--orange); opacity: 0.2;
  -webkit-mask: url("images/trait-court.webp") left center / 100% 100% no-repeat; mask: url("images/trait-court.webp") left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}
.recul h3::before { left: -0.5rem; top: -0.15rem; width: 11.5rem; height: 1.7rem; }
.trait-pinceau {
  position: relative; display: block; width: 78%; height: 1.15rem; margin: -0.2rem 0 1.1rem -0.4rem; opacity: 0.3;
  -webkit-mask-image: url("images/trait-long.webp"); mask-image: url("images/trait-long.webp");
}
.recul.joue h3::before { animation: peint-trait 0.7s cubic-bezier(.3, .7, .3, 1) 0.1s forwards; }
.recul.joue .trait-pinceau { animation: peint-trait 0.8s cubic-bezier(.3, .7, .3, 1) forwards; animation-delay: var(--d, 4s); }
@keyframes peint-trait { to { clip-path: inset(0 0 0 0); } }
/* hors du cadre : une phrase calme, et le lien vers le cadre de l'outil */
.hors-cadre { padding-bottom: 0.9rem; }
.hors-cadre p { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.4rem; }
.hors-cadre-lien { font-size: 0.95rem; text-underline-offset: 3px; }
/* le paragraphe de fin, avec le lien vers l'accompagnement */
.suite { margin: 0 0 1.5rem; }
.actions-releve .btn-plein { margin-left: 0; }
.btn-accompagnement { width: 100%; justify-content: center; text-align: center; box-shadow: 0 8px 24px -10px rgba(224, 112, 42, 0.6); }
.actions-releve { justify-content: center; }
/* le cadre de l'outil, en petit, tout en bas, comme des conditions d'utilisation */
.cadre-outil { margin-top: 3.5rem; padding-top: 1rem; border-top: 0.5px solid var(--bord); font-size: 12.5px; line-height: 1.55; color: var(--encre-douce); }
.cadre-outil summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.cadre-outil summary::-webkit-details-marker { display: none; }
/* un petit chevron, qui pivote quand le cadre est ouvert */
.cadre-outil summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--duree);
}
.cadre-outil[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.cadre-outil[open] summary { margin-bottom: 0.5rem; }
.cadre-outil p { margin-bottom: 0.5rem; }
.cadre-outil ul { list-style: none; display: grid; gap: 0.3rem; }
fieldset { border: none; }
/* la silhouette, femme ou homme : deux boutons collés, celui choisi est plein */
.version { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.version-titre { font-size: 0.95rem; color: var(--encre-douce); }
.version-boutons { display: inline-flex; border: 1.5px solid var(--bleu); border-radius: 999px; overflow: hidden; }
.version-bouton {
  min-height: 40px; padding: 0.4rem 1.1rem; border: none; background: transparent; color: var(--bleu);
  font: inherit; font-size: 0.95rem; cursor: pointer;
}
.version-bouton[aria-pressed="true"] { background: var(--bleu); color: #fff; }

@media (min-width: 640px) {
  .carte { padding-top: 2.5rem; }
  .etape h1 { font-size: 3.2rem; }
  .etape h2 { font-size: 2.2rem; }
  .entete { padding: 0 2rem; }
  .resultat-carte { grid-template-columns: 1fr 1fr; align-items: center; }
  .resultat-corps { width: 100%; }
  /* sur grand écran, les trois cartes de l'envie côte à côte */
  .cartes-envie { grid-template-columns: repeat(3, 1fr); }
  .carte-envie { flex-direction: column; text-align: center; padding: 0.5rem 0.5rem 1rem; }
  .carte-art { width: 100%; }
  .courbes { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree: 0ms; }
  .etape, .etincelle, .point.nouveau .tache, .fiche-vue.vibre .tache, .scene-taches .tache, .scene-ligne,
  .scene-fin, .de-lancer.attente .de-incline, .de-lancer.lance .de-scene, .de-question,
  .curseur.pas-touche::-webkit-slider-thumb, .courbe.trace path { animation: none !important; }
  .etincelle, .de-cube, .scene-fond { transition: none; }
  /* la fin, d'emblée dans son état final, sans mouvement (la toile dessine sa dernière image) */
  .goutte { display: none; }
  .aquarelle.joue .pinceau { clip-path: none; animation: none !important; }
  .recul.joue h3::before, .recul.joue .trait-pinceau { clip-path: none; animation: none !important; }
  .aq-signe, .aq-signe-flotte { animation: none !important; transition: none !important; }
  .aquarelle.joue .aq-signe { --a: var(--a1); --rad: var(--rad1); }
  .aquarelle.joue .aquarelle-corps { opacity: 1; filter: none; animation: none !important; }
  .aquarelle.joue .lavis-css { transform: none; animation: none !important; }
  .reformulation .mot, .creuser.inscrit { animation: none !important; opacity: 1; -webkit-mask-image: none !important; mask-image: none !important; }
  .point-peint { animation: none; transform: translate(-50%, -50%); }
  .anim-recule > *, .anim-pousse > *, .anim-fige > * { animation-duration: 1ms !important; }
}