/* ============================================================
   CONVERSION — portes de fin d'article · choix du besoin · diagnostic
   ------------------------------------------------------------
   12/10/2026. Une seule feuille, chargée seulement par les pages qui en ont
   besoin (articles avec une porte, /contact/, /diagnostic/, /studio/). Elle ne
   définit AUCUNE valeur : tout vient de `tokens.css`.
   Règles de la maison tenues ici : blanc lumineux majoritaire, aplats profonds
   francs, jamais de beige ; l'or ne sert qu'à des filets, jamais à du petit
   texte ; cibles tactiles de 44 px au moins ; mouvement réduit respecté (la
   variable --duree tombe à 0 dans zellij-ui.css).
   ============================================================ */

/* ------------------------------------------------------------
   1 · PORTE DE FIN D'ARTICLE — la bascule vers le Studio
   Un aplat prune après la lecture (surface claire → aplat profond), un filet
   doré pour tenir la page, un bouton ivoire. Le texte est en « tu », comme
   l'article qu'il termine.
   ------------------------------------------------------------ */
.article-porte {
  display: grid;
  gap: var(--pas-4);
  margin: clamp(48px, 8vh, 88px) 0 var(--pas-6);
  padding: clamp(28px, 6vw, 52px);
  border-radius: var(--rayon-grand);
  background: var(--plum);
  color: #fffdf8;
  box-shadow: inset 0 3px 0 0 var(--gold);
}

.article-porte__eyebrow {
  margin: 0 0 var(--pas-2);
  color: var(--rose);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-porte h2 {
  margin: 0 0 var(--pas-3);
  max-width: 24ch;
  color: #fffdf8;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.12;
}

/* les articles posent un petit repère devant leurs h2 : pas ici */
.article-porte h2::before { display: none; }

.article-porte p:not(.article-porte__eyebrow) {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 253, 248, 0.88);
  font-size: 1.02rem;
  line-height: 1.6;
}

.article-porte__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-3) var(--pas-4);
}

.article-porte .button.primary {
  background: #fffdf8;
  color: var(--plum);
  border-color: #fffdf8;
}

.article-porte .button.primary:hover,
.article-porte .button.primary:focus-visible {
  background: #ffffff;
  color: var(--plum-deep);
}

.article-porte__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fffdf8;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.article-porte__lien:hover,
.article-porte__lien:focus-visible { text-decoration-thickness: 2px; }

.article-porte a:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

@media (min-width: 820px) {
  .article-porte {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--pas-7);
  }
  .article-porte__actions { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------
   2 · CONTACT — choisir son besoin
   ------------------------------------------------------------ */
.besoin {
  display: grid;
  gap: var(--pas-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.besoin legend { margin-bottom: var(--pas-2); padding: 0; }

.besoin__choix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid rgba(56, 43, 63, 0.22);
  border-radius: var(--rayon-petit);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--duree) var(--ease), background var(--duree) var(--ease);
}

.besoin__choix:hover { border-color: var(--bordeaux); }

.besoin__choix input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bordeaux);
}

.besoin__choix:has(input:checked) {
  border-color: var(--plum);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--plum);
}

.besoin__choix:has(input:focus-visible) {
  outline: 3px solid rgba(123, 44, 63, 0.35);
  outline-offset: 2px;
}

.besoin-details { display: grid; gap: 12px; }
.besoin-details[hidden] { display: none; }

.newsletter-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(68, 19, 29, 0.22);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.newsletter-form select:focus {
  border-color: var(--bordeaux);
  outline: 3px solid rgba(110, 36, 50, 0.12);
}

.besoin-aide { margin: var(--pas-2) 0 0; color: var(--ink-soft); }
.besoin-aide a { color: var(--bordeaux); font-weight: 600; }

.besoin-reprise {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--olive);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------
   3 · DIAGNOSTIC — « Faire le point »
   Une question à la fois, de grandes zones tactiles, aucun envoi tant que la
   personne n'a pas choisi d'écrire au studio.
   ------------------------------------------------------------ */
.dg {
  width: min(100%, 760px);
  margin-inline: auto;
  /* la place des questions est réservée avant l'arrivée du script : sans elle, tout le bas de la page saute d'un coup */
  min-height: 36rem;
}

@media (min-width: 820px) {
  .dg { min-height: 27rem; }
}

.dg__suivi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-3);
  margin-bottom: var(--pas-3);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dg__barre {
  height: 3px;
  margin-bottom: var(--pas-5);
  border-radius: 3px;
  background: rgba(56, 43, 63, 0.12);
  overflow: hidden;
}

.dg__barre i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--plum);
  transition: width var(--duree-longue, 420ms) var(--ease);
}

.dg__q { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

.dg__q legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--pas-4);
  padding: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 5.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
}

.dg__q legend:focus { outline: none; }

.dg__options { display: grid; gap: 10px; }

.dg__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 18px;
  border: 1px solid rgba(56, 43, 63, 0.2);
  border-radius: var(--rayon);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--duree) var(--ease), background var(--duree) var(--ease), color var(--duree) var(--ease);
}

.dg__option:hover { border-color: var(--bordeaux); }

.dg__option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bordeaux);
}

.dg__option:has(input:checked) {
  border-color: var(--plum);
  background: var(--plum);
  color: #fffdf8;
}

.dg__option:has(input:checked) input { accent-color: #fffdf8; }

.dg__option:has(input:focus-visible) {
  outline: 3px solid rgba(123, 44, 63, 0.4);
  outline-offset: 3px;
}

.dg__aide {
  margin-top: var(--pas-4);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.dg__aide summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bordeaux);
  font-weight: 600;
  cursor: pointer;
}

.dg__aide p { margin: 0 0 var(--pas-2); max-width: 56ch; }

.dg__nav { margin-top: var(--pas-5); }

.dg__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.dg__lien:hover, .dg__lien:focus-visible { color: var(--bordeaux); }

/* Hero d'un outil : sur téléphone, la première question doit être à portée de pouce. L'illustration reste sur grand écran. */
@media (max-width: 819px) {
  .page-hero.hero--outil .hero-sheet { display: none; }
  .page-hero.hero--outil { min-height: 0; padding-bottom: var(--pas-5); }
}

/* ---- le résultat ---- */
.dg__verdict {
  margin: 0 0 var(--pas-6);
  padding: clamp(26px, 6vw, 48px);
  border-radius: var(--rayon-grand);
  background: var(--plum);
  color: #fffdf8;
  box-shadow: inset 0 3px 0 0 var(--gold);
}

.dg__verdict .dg__etiquette {
  margin: 0 0 var(--pas-2);
  color: var(--rose);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dg__verdict h2 {
  margin: 0 0 var(--pas-3);
  color: #fffdf8;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5.6vw, 2.7rem);
  font-weight: 400;
  line-height: 1.1;
}

.dg__verdict h2::before { display: none; }
.dg__verdict h2:focus { outline: none; }

.dg__verdict p:not(.dg__etiquette) {
  margin: 0;
  max-width: 58ch;
  color: rgba(255, 253, 248, 0.9);
  line-height: 1.6;
}

.dg__sous-titre {
  margin: 0 0 var(--pas-4);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.8vw, 1.8rem);
  font-weight: 400;
}

.dg__points {
  display: grid;
  gap: var(--pas-4);
  margin: 0 0 var(--pas-6);
  padding: 0;
  list-style: none;
  counter-reset: dg;
}

.dg__points li {
  position: relative;
  padding: 0 0 var(--pas-4) 52px;
  border-bottom: 1px solid rgba(56, 43, 63, 0.14);
  counter-increment: dg;
}

.dg__points li::before {
  content: counter(dg);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  color: var(--bordeaux);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
}

.dg__points h3 {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
}

.dg__points p { margin: 0 0 6px; max-width: 58ch; line-height: 1.55; }
.dg__points p b { font-weight: 600; color: var(--olive-dark, var(--olive)); }

.dg__suite {
  display: grid;
  gap: var(--pas-3);
  margin-bottom: var(--pas-6);
  padding: clamp(22px, 5vw, 36px);
  border: 1px solid rgba(56, 43, 63, 0.18);
  border-radius: var(--rayon-grand);
  background: var(--paper);
}

.dg__suite h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  font-weight: 400;
}

.dg__suite p { margin: 0; max-width: 58ch; line-height: 1.6; }

.dg__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-3) var(--pas-4);
}

.dg__lectures { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dg__lectures a { color: var(--bordeaux); font-weight: 600; }

.dg__note {
  margin: var(--pas-5) 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 62ch;
}

.dg__sans-js { max-width: 62ch; }

/* ------------------------------------------------------------
   4 · STUDIO — la porte du diagnostic
   ------------------------------------------------------------ */
.studio-diagnostic {
  display: grid;
  gap: var(--pas-3);
  align-items: center;
  padding: clamp(22px, 5vw, 36px);
  border: 1px solid rgba(56, 43, 63, 0.18);
  border-radius: var(--rayon-grand);
  background: var(--paper);
}

.studio-diagnostic h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.8vw, 1.85rem);
  font-weight: 400;
}

.studio-diagnostic p { margin: 0; max-width: 56ch; line-height: 1.6; }

@media (min-width: 820px) {
  .studio-diagnostic { grid-template-columns: minmax(0, 1.6fr) auto; gap: var(--pas-6); }
}

/* les quatre cartes de prestations deviennent des portes : le besoin est déjà choisi à l'arrivée sur /contact/ */
.studio-possibilities__grid article { display: flex; flex-direction: column; }
.studio-card-lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--pas-3);
  min-height: 44px;
  /* la section « Ce que le studio réalise » est un aplat prune sombre : le bordeaux n'y serait pas lisible */
  color: var(--rose);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
}
.studio-card-lien i { font-style: normal; transition: transform var(--duree) var(--ease); }
.studio-card-lien:hover i, .studio-card-lien:focus-visible i { transform: translateX(4px); }
.studio-card-lien:hover, .studio-card-lien:focus-visible { color: #fffdf8; text-decoration: underline; text-underline-offset: 0.3em; }
.studio-card-lien:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------
   5 · FICHES KITS — étoiles du formulaire d'avis
   Les étoiles non choisies étaient d'un taupe (#b5aa9c), couleur écartée par la direction artistique, à environ 2:1 sur le blanc
   (WCAG 1.4.11 demande 3:1 pour un élément graphique). Prune moyen de la gamme (#7a6284, environ 5:1) ; l'étoile choisie reste dorée.
   ------------------------------------------------------------ */
.fiche-avis-rating label { color: #7a6284; }
.fiche-avis-rating label:hover, .fiche-avis-rating label:hover ~ label, .fiche-avis-rating input:checked ~ label { color: var(--gold); }

/* ------------------------------------------------------------
   6 · FICHES KITS — avis publiés (la section n'existe que s'il y a au moins un avis relu et approuvé)
   ------------------------------------------------------------ */
.avis-liste { display: grid; gap: var(--pas-4); margin: 0 0 var(--pas-4); padding: 0; list-style: none; }
.avis-carte { margin: 0; padding: var(--pas-4); border: 1px solid rgba(56, 43, 63, 0.16); border-radius: var(--rayon); background: var(--paper); }
.avis-carte__note { margin: 0 0 var(--pas-2); color: var(--gold); font-size: 1.25rem; letter-spacing: 0.15em; line-height: 1; }
.avis-carte__note i { font-style: normal; color: rgba(122, 98, 132, 0.35); }
.avis-carte blockquote { margin: 0 0 var(--pas-3); padding: 0; border: 0; }
.avis-carte blockquote p { margin: 0; max-width: 60ch; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--ink); }
.avis-carte__auteur { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.avis-note { max-width: 62ch; margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
@media (min-width: 820px) { .avis-liste { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dg__barre i, .dg__option, .besoin__choix { transition: none; }
}