/* =========================================================================
   Chez le psy — feuille de style unique.

   Polices auto-hébergées, aucun script ni ressource chargés depuis un tiers.
   Système : verts en dégradés granuleux, encre vert-noir, papier crème.
   ========================================================================= */

/* ---------- Polices ---------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("polices/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("polices/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ------------------------------------------------------ */

:root {
  /* Verts */
  --vert-50:  #f1faf3;
  --vert-100: #ddf3e2;
  --vert-200: #b6e7c5;
  --vert-300: #7fd39c;
  --vert-400: #45b877;
  --vert-500: #2b9a5c;
  --vert-600: #1e7c49;
  --vert-700: #19613a;
  --vert-800: #14472c;
  --vert-900: #0e2e1d;

  /* Limes, repris du dégradé */
  --lime-200: #e2f5a8;
  --lime-300: #cfec74;
  --lime-400: #b8e043;

  /* Papiers et encres */
  --papier:      #fbfcf7;
  --papier-2:    #f3f6ec;
  --surface:     #ffffff;
  --ligne:       #e2e7d9;
  --ligne-forte: #cdd5c1;

  --encre:      #0b1f16;
  --encre-doux: #47574d;
  --encre-tenu: #5d6b62;

  --accent:      var(--vert-600);
  --accent-vif:  var(--vert-700);
  --surlignage:  var(--lime-300);

  /* Familles */
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
             Georgia, "Times New Roman", serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --cadre:  76rem;
  --rayon:      14px;
  --rayon-pill: 999px;

  --ombre: 0 1px 2px rgba(11, 31, 22, 0.04),
           0 8px 24px -12px rgba(11, 31, 22, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #07110c;
    --papier-2:    #0c1811;
    --surface:     #101d15;
    --ligne:       #1d2c22;
    --ligne-forte: #2a3c30;

    --encre:      #e7efe8;
    --encre-doux: #a3b1a7;
    --encre-tenu: #8b998f;

    --accent:      var(--vert-300);
    --accent-vif:  var(--vert-200);
    --surlignage:  var(--lime-400);

    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4),
             0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cadre {
  width: 100%;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 48rem) { .cadre { padding: 0 2.5rem; } }

/* ---------- Titres ------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 7.5vw, 5.5rem);
  line-height: 0.94;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.02;
}

h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Surlignage au feutre, posé derrière la ligne de base */
/* Le surlignage reste clair dans les deux thèmes : le texte posé dessus
   doit donc rester sombre, sans quoi il devient illisible en mode sombre. */
.surligne {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #0b1f16;
}

.surligne::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.055em;
  height: 0.3em;
  background: var(--surlignage);
  border-radius: 3px;
  z-index: -1;
}

.italique { font-style: italic; }

/* Sauts de ligne de composition : ils desservent la lecture sur petit écran */
@media (max-width: 40rem) {
  .saut-large { display: none; }
}

/* ---------- Étiquettes et texte courant --------------------------------- */

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-700);
  background: var(--vert-100);
  border-radius: var(--rayon-pill);
  padding: 0.375rem 0.75rem;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .etiquette { color: var(--vert-200); background: rgba(69, 184, 119, 0.16); }
}

.etiquette .pastille {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--vert-500);
  flex: 0 0 auto;
}

.plomb {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--encre-doux);
  margin: 1.5rem 0 0;
}

.plomb strong { color: var(--encre); font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-vif); }

:focus-visible {
  outline: 2px solid var(--vert-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Barre de navigation ----------------------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 84%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.barre.posee { border-bottom-color: var(--ligne); }

.barre .cadre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  flex: 0 0 auto;
}

.marque:hover { color: var(--encre); }

.marque .jeton {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.liens-barre {
  display: none;
  gap: 1.75rem;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

@media (min-width: 56rem) { .liens-barre { display: flex; } }

.liens-barre a {
  font-size: 0.9375rem;
  color: var(--encre-doux);
  text-decoration: none;
}

.liens-barre a:hover { color: var(--encre); }

.barre .bouton { margin-left: auto; }

@media (min-width: 56rem) { .barre .bouton { margin-left: 0; } }

/* ---------- Boutons ------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--rayon-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms ease;
}

.bouton:active { transform: translateY(1px); }

.bouton--plein {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}

.bouton--plein:hover {
  background: var(--vert-800);
  border-color: var(--vert-800);
  color: var(--papier);
}

@media (prefers-color-scheme: dark) {
  .bouton--plein { background: var(--vert-300); color: #07110c; border-color: var(--vert-300); }
  .bouton--plein:hover { background: var(--vert-200); border-color: var(--vert-200); color: #07110c; }
}

.bouton--contour {
  background: var(--surface);
  color: var(--encre);
  border-color: var(--ligne-forte);
}

.bouton--contour:hover { border-color: var(--encre); color: var(--encre); }

.bouton .fleche { transition: transform 180ms ease; }
.bouton:hover .fleche { transform: translateX(2px); }

/* ---------- Ouverture ---------------------------------------------------- */

.ouverture {
  position: relative;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  text-align: center;
  overflow: hidden;
}

/* Halo : nappes de vert en dégradés, plus un grain en SVG encodé dans l'URL.
   Aucune ressource distante, le bruit est généré par le navigateur. */
.halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 10% 4%,  rgba(207, 236, 116, 0.58), transparent 68%),
    radial-gradient(52% 64% at 90% 14%, rgba(127, 211, 156, 0.46), transparent 70%),
    radial-gradient(70% 52% at 46% 96%, rgba(43, 154, 92, 0.16),  transparent 72%);
}

.halo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le halo s'efface progressivement vers le bas de l'ouverture */
.ouverture .halo {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

@media (prefers-color-scheme: dark) {
  .halo {
    background:
      radial-gradient(58% 62% at 10% 4%,  rgba(184, 224, 67, 0.16), transparent 68%),
      radial-gradient(52% 64% at 90% 14%, rgba(69, 184, 119, 0.18), transparent 70%),
      radial-gradient(70% 52% at 46% 96%, rgba(43, 154, 92, 0.12), transparent 72%);
  }
  .halo::after { opacity: 0.3; mix-blend-mode: soft-light; }
}

.ouverture-contenu {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
}

.ouverture .etiquette { margin-bottom: 1.75rem; }

.ouverture .plomb {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Formulaire d'inscription ------------------------------------- */

.inscription {
  margin: 2.5rem auto 0;
  max-width: 32rem;
}

.ligne-champ {
  display: flex;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pill);
  padding: 0.375rem;
  box-shadow: var(--ombre);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ligne-champ:focus-within {
  border-color: var(--vert-500);
  box-shadow: 0 0 0 4px rgba(43, 154, 92, 0.16);
}

.inscription label.intitule {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inscription input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: transparent;
  border: 0;
}

.inscription input[type="email"]:focus { outline: none; }

.inscription input[type="email"]:-webkit-autofill,
.inscription input[type="email"]:-webkit-autofill:hover,
.inscription input[type="email"]:-webkit-autofill:focus,
.inscription input[type="email"]:-webkit-autofill:active {
  -webkit-text-fill-color: var(--encre);
  -webkit-box-shadow: 0 0 0 100vmax var(--surface) inset;
  box-shadow: 0 0 0 100vmax var(--surface) inset;
  caret-color: var(--encre);
  border-radius: var(--rayon-pill);
  /* Chrome rétablit sa couleur au bout d'un instant : une transition très
     longue la maintient hors de vue. */
  transition: background-color 100000s ease-in-out 0s;
}
.inscription input[type="email"]::placeholder { color: var(--encre-tenu); }

.inscription .bouton { flex: 0 0 auto; }

@media (max-width: 30rem) {
  .ligne-champ { flex-direction: column; border-radius: var(--rayon); padding: 0.5rem; }
  .inscription input[type="email"] { padding: 0.75rem; }
  .inscription .bouton { width: 100%; }
}

.consentement {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 1rem 0 0;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--encre-tenu);
  text-align: left;
  cursor: pointer;
}

.consentement input {
  margin: 0.1875rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--vert-600);
}

.consentement a { color: var(--encre-doux); }

.retour {
  margin: 1rem 0 0;
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  color: var(--vert-900);
  background: var(--vert-100);
  border-radius: var(--rayon);
  animation: apparition 260ms ease both;
}

@media (prefers-color-scheme: dark) {
  .retour { color: var(--vert-100); background: rgba(69, 184, 119, 0.16); }
}

.retour[hidden] { display: none; }

@keyframes apparition {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Rangée de garanties ------------------------------------------ */

.garanties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--encre-tenu);
}

.garanties li { display: inline-flex; align-items: center; gap: 0.5rem; }
.garanties svg { flex: 0 0 auto; color: var(--vert-500); }

/* ---------- Sections ------------------------------------------------------ */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--creuse { background: var(--papier-2); }

.tete-section {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3rem;
  align-items: end;
}

@media (min-width: 52rem) {
  .tete-section {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.tete-section .plomb { margin-top: 0; }

/* Sans texte d'accompagnement, le titre ne doit pas rester coincé sur la
   colonne étroite laissée par la grille à deux colonnes. */
.tete-section--seule { display: block; }
.tete-section .etiquette { margin-bottom: 1.25rem; }

/* ---------- Cartes -------------------------------------------------------- */

.grille-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46rem) { .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carte .numero {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--vert-500);
}

.carte h3 { margin: 0; }

.carte p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--encre-doux);
}

/* Cartes de ressources, cliquables ---------------------------------------- */

.carte--lien {
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.carte--lien:hover {
  border-color: var(--ligne-forte);
  transform: translateY(-2px);
  box-shadow: var(--ombre);
  color: inherit;
}

.carte--lien[aria-disabled="true"] { opacity: 0.62; pointer-events: none; }

.carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pictogramme {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-100);
  color: var(--vert-700);
  flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
  .pictogramme { background: rgba(69, 184, 119, 0.16); color: var(--vert-200); }
}

.mention {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--encre-tenu);
}

/* ---------- Qui écrit ----------------------------------------------------- */

.portrait-grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .portrait-grille {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 4rem;
  }
}

.portrait {
  width: 100%;
  max-width: 19rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vert-100);
}

/* L'échelle resserre le cadrage sur le visage, le point d'origine décale
   la zone visible vers le bas de la photo. Aucune perte : l'image reste
   intacte, seule la fenêtre change. */
.portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.26);
}

.portrait-grille .plomb { margin-top: 1.25rem; }


/* ---------- Champ piège anti-robot ---------------------------------------
   Hors du flux et hors du parcours clavier. Un robot qui remplit tous les
   champs se signale ; un visiteur ne le voit jamais.
   ------------------------------------------------------------------------- */

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

/* ---------- Titre qui suit une étiquette --------------------------------- */

.titre-suivi { margin-top: 1.25rem; }

/* ---------- Bande vers les numéros d'aide -------------------------------- */

.bande-aide {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
  background: var(--vert-100);
  border: 1px solid var(--vert-200);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre);
  transition: border-color 180ms ease, transform 180ms ease;
}

.bande-aide:hover {
  border-color: var(--vert-400);
  transform: translateY(-2px);
  color: var(--encre);
}

@media (prefers-color-scheme: dark) {
  .bande-aide {
    background: rgba(69, 184, 119, 0.12);
    border-color: rgba(127, 211, 156, 0.28);
  }
}

.bande-aide-texte {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre-doux);
}

.bande-aide-texte strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--encre);
  margin-bottom: 0.125rem;
}

.bande-aide .fleche { flex: 0 0 auto; color: var(--vert-600); }
.bande-aide:hover .fleche { transform: translateX(3px); }

@media (prefers-color-scheme: dark) {
  .bande-aide .fleche { color: var(--vert-300); }
}

.pictogramme--vif {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--surface);
  color: var(--vert-600);
  border: 1px solid var(--vert-200);
}

@media (prefers-color-scheme: dark) {
  .pictogramme--vif {
    background: var(--surface);
    color: var(--vert-300);
    border-color: rgba(127, 211, 156, 0.24);
  }
}

@media (max-width: 34rem) {
  .bande-aide { flex-wrap: wrap; }
  .bande-aide-texte { flex-basis: 100%; order: 3; }
}

/* ---------- Questions fréquentes ------------------------------------------
   Accordéon natif : aucun script, et le contenu reste trouvable par la
   recherche du navigateur.
   ------------------------------------------------------------------------- */

.questions {
  display: grid;
  gap: 0.625rem;
  max-width: 46rem;
}

.questions details {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
}

.questions details[open] { border-color: var(--ligne-forte); }

.questions summary {
  list-style: none;
  cursor: pointer;
  padding: 1.125rem clamp(1.125rem, 3vw, 1.5rem);
  padding-right: 3.25rem;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--encre);
}

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

/* Croix qui bascule en signe moins à l'ouverture */
.questions summary::before,
.questions summary::after {
  content: "";
  position: absolute;
  right: clamp(1.125rem, 3vw, 1.5rem);
  top: 50%;
  width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--vert-600);
  transition: transform 220ms ease;
}

.questions summary::after { transform: translateY(-50%) rotate(90deg); }
.questions summary::before { transform: translateY(-50%); }
.questions details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

@media (prefers-color-scheme: dark) {
  .questions summary::before,
  .questions summary::after { background: var(--vert-300); }
}

.questions .reponse {
  padding: 0 clamp(1.125rem, 3vw, 1.5rem) 1.25rem;
  color: var(--encre-doux);
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: 40rem;
}

.questions details[open] .reponse { animation: apparition 200ms ease both; }

/* ---------- Bloc de contact ----------------------------------------------- */

.bloc-contact {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: clamp(16px, 3vw, 20px);
}

@media (min-width: 52rem) {
  .bloc-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

.bloc-contact .plomb { max-width: 40rem; }

/* ---------- Le cadre déontologique (bloc inversé) ------------------------- */

.bloc-cadre {
  background: var(--vert-900);
  color: var(--vert-100);
  border-radius: clamp(16px, 3vw, 24px);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.bloc-cadre::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -55%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
              rgba(184, 224, 67, 0.20), rgba(43, 154, 92, 0.10) 55%, transparent 72%);
  pointer-events: none;
}

.bloc-cadre-contenu { position: relative; z-index: 1; max-width: 44rem; }

.bloc-cadre h2 { color: var(--papier); }

@media (prefers-color-scheme: dark) {
  .bloc-cadre h2 { color: #f2f7f2; }
  .bloc-cadre { background: #0a2216; }
}

.bloc-cadre .etiquette {
  color: var(--vert-900);
  background: var(--lime-300);
  margin-bottom: 1.5rem;
}

.bloc-cadre .etiquette .pastille { background: var(--vert-700); }

.bloc-cadre p { color: var(--vert-100); }
.bloc-cadre .plomb--herite { color: var(--vert-100); margin-bottom: 1.25rem; }
.bloc-cadre .attenue { color: var(--vert-200); }

.urgence {
  margin: 2rem 0 0;
  padding: 1.125rem 1.25rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--vert-100);
}

.urgence strong { color: #f2f7f2; }

/* ---------- Rappel final -------------------------------------------------- */

.rappel {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: hidden;
}

.rappel .halo {
  background:
    radial-gradient(56% 66% at 88% 82%, rgba(207, 236, 116, 0.52), transparent 70%),
    radial-gradient(54% 62% at 12% 66%, rgba(127, 211, 156, 0.44), transparent 70%),
    radial-gradient(72% 50% at 50% 4%,  rgba(43, 154, 92, 0.14),  transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}

@media (prefers-color-scheme: dark) {
  .rappel .halo {
    background:
      radial-gradient(56% 66% at 88% 82%, rgba(184, 224, 67, 0.14), transparent 70%),
      radial-gradient(54% 62% at 12% 66%, rgba(69, 184, 119, 0.18), transparent 70%),
      radial-gradient(72% 50% at 50% 4%,  rgba(43, 154, 92, 0.10), transparent 72%);
  }
}
.rappel-contenu { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; }

/* ---------- Pied ---------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--ligne);
  padding: 3.5rem 0 3rem;
  font-size: 0.875rem;
  color: var(--encre-tenu);
}

.pied-grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 2.5rem;
}

@media (min-width: 46rem) {
  .pied-grille {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

.pied h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin: 0 0 1rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.pied ul a { color: var(--encre-doux); text-decoration: none; }
.pied ul a:hover { color: var(--accent); }

.pied .marque { margin-bottom: 1rem; }

.pied-legal {
  border-top: 1px solid var(--ligne);
  padding-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (min-width: 46rem) {
  .pied-legal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.pied-legal a { color: var(--encre-doux); }

/* ---------- Page de texte ------------------------------------------------- */

.page-texte main { padding: 3rem 0 4rem; }
.page-texte .cadre { max-width: 48rem; }
.page-texte h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 2rem; }

.page-texte h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vert-700);
  margin: 2.75rem 0 0.875rem;
}

@media (prefers-color-scheme: dark) {
  .page-texte h2 { color: var(--vert-300); }
}

.page-texte section { padding: 0; }
.page-texte ul { padding-left: 1.25rem; }
.page-texte li { margin-bottom: 0.5rem; }
.page-texte .attenue { color: var(--encre-doux); }

.retour-accueil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--encre-doux);
  text-decoration: none;
}

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

/* ---------- Entrée et mouvement ------------------------------------------- */

.entree { animation: montee 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.entree-2 { animation-delay: 60ms; }
.entree-3 { animation-delay: 120ms; }
.entree-4 { animation-delay: 180ms; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .barre, .inscription, .halo, .rappel { display: none; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   Page des numéros d'aide
   ========================================================================= */

.numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.numeros li {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.25rem clamp(1.125rem, 3vw, 1.5rem);
}

.numero-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.numero-appel {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--vert-700);
}

@media (prefers-color-scheme: dark) {
  .numero-appel { color: var(--vert-300); }
}

.numero-ligne:hover .numero-appel { text-decoration: underline; text-underline-offset: 4px; }

.numero-nom {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-tenu);
}

.numeros p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--encre-doux);
  max-width: 42rem;
}

/* =========================================================================
   Utilitaires remplaçant les attributs style, qui empêchaient une politique
   de sécurité de contenu sans 'unsafe-inline'.
   ========================================================================= */

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.plomb--tete { margin-top: 0; }
.attenue--fin { margin-top: 2.5rem; }