/* VERS LUI | style.css
   Monde : le ciel d'avant l'aube. La page s'éclaircit en descendant. */

@font-face {
  font-family: "Markazi Text";
  src: url("../fonts/markazi-text-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro-latin-wght.woff2") format("woff2");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ciel */
  --nuit-0: oklch(0.16 0.045 266);
  --nuit-1: oklch(0.23 0.07 268);
  --crepuscule-0: oklch(0.27 0.085 276);
  --crepuscule-1: oklch(0.42 0.1 300);
  --braise: oklch(0.8 0.115 62);
  --braise-vive: oklch(0.86 0.11 68);
  --rose: oklch(0.7 0.11 22);

  /* Texte sur la nuit */
  --lait: oklch(0.955 0.015 255);
  --lait-2: oklch(0.83 0.035 262);
  --lait-3: oklch(0.7 0.05 266);

  /* Aube */
  --aube-haut: oklch(0.87 0.04 285);
  --aube-milieu: oklch(0.93 0.035 55);
  --aube-bas: oklch(0.89 0.075 62);
  --encre: oklch(0.23 0.07 268);
  --encre-2: oklch(0.38 0.06 268);

  /* Bulles */
  --bulle: oklch(0.31 0.085 270);
  --bulle-trait: oklch(0.5 0.09 272 / 0.55);
  --papier: oklch(0.94 0.03 72);

  --voix: "Markazi Text", "Iowan Old Style", Georgia, serif;
  --texte: "Readex Pro", "Segoe UI", system-ui, sans-serif;

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --respiration: clamp(6.5rem, 15vw, 12rem);

  --p: 0; /* progression du scroll, 0 = nuit, 1 = aube (main.js) */
}

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

html {
  background: var(--nuit-0);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scrollbar-color: oklch(0.45 0.08 272) var(--nuit-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-weight: 340;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--lait-2);
  caret-color: var(--braise);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--braise); color: var(--encre); }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--braise-vive);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s var(--sortie);
}
a:hover { color: var(--lait); }

:focus-visible {
  outline: 2px solid var(--braise-vive);
  outline-offset: 4px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--papier);
  color: var(--encre);
  border-radius: 0.5rem;
}
.evitement:focus { top: 1rem; color: var(--encre); }

/* ===== Ciel fixe ===== */
.ciel {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--nuit-0), var(--crepuscule-0) calc(var(--p) * 100%)) 0%,
    color-mix(in oklch, var(--nuit-1), var(--crepuscule-1) calc(var(--p) * 100%)) 100%
  );
}
.ciel-etoiles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(1 - var(--p) * 1.25);
}
.ciel-horizon {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -14vh;
  height: 78vh;
  background:
    radial-gradient(ellipse 52% 58% at 50% 100%, oklch(0.86 0.11 68 / 0.85), transparent 70%),
    radial-gradient(ellipse 78% 82% at 50% 100%, oklch(0.7 0.11 22 / 0.5), transparent 72%);
  opacity: calc(0.42 + var(--p) * 0.58);
  transform: translateY(calc((1 - var(--p)) * 5vh));
  will-change: transform, opacity;
}

/* ===== Structure ===== */
.cadre {
  width: min(100% - var(--gouttiere) * 2, 72rem);
  margin-inline: auto;
}
.cadre.etroit { width: min(100% - var(--gouttiere) * 2, 46rem); }

.bloc { padding-block: var(--respiration) 0; }

.titre {
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 0.88;
  letter-spacing: -0.012em;
  color: var(--lait);
  text-wrap: balance;
  max-width: 18ch;
}
.titre-citation { max-width: 22ch; font-size: clamp(2.3rem, 5.2vw, 3.7rem); }

.chapo {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: 1.125rem;
  color: var(--lait-2);
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.15em; }
.titre + .prose, .portrait + .prose { margin-top: 2.2rem; }

.deux {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .deux { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* ===== Barre du haut ===== */
.haut {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem var(--gouttiere);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--voix);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  color: var(--lait);
  text-decoration: none;
}
.marque-signe { color: var(--braise); flex: none; }
.haut-lien {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--lait);
  text-decoration-color: oklch(0.8 0.115 62 / 0.7);
  padding-block: 0.6rem;
}
@media (max-width: 30rem) { .haut-lien { display: none; } }

/* ===== Boutons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--braise);
  color: var(--encre);
  font: 500 1.0625rem/1.2 var(--texte);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 40px -14px oklch(0.8 0.115 62 / 0.75);
  transition: background-color 0.25s var(--sortie), transform 0.25s var(--sortie), box-shadow 0.25s var(--sortie);
}
.btn:hover {
  background: var(--braise-vive);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 20px 46px -14px oklch(0.8 0.115 62 / 0.9);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.btn-encre {
  background: var(--encre);
  color: var(--aube-milieu);
  box-shadow: 0 14px 34px -16px oklch(0.23 0.07 268 / 0.8);
}
.btn-encre:hover {
  background: oklch(0.3 0.085 270);
  color: oklch(0.98 0.01 70);
  box-shadow: 0 20px 40px -16px oklch(0.23 0.07 268 / 0.9);
}

/* ===== Hero ===== */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 7.5rem 5rem;
}
.hero-titre {
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(3.3rem, 9.4vw, 6rem);
  line-height: 0.84;
  letter-spacing: -0.018em;
  color: var(--lait);
  max-width: 11.5ch;
  text-wrap: balance;
}
.hero-peutetre {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--lait-2);
}
.hero-peutetre li + li { margin-top: 0.3rem; }
.hero-pourtant {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--voix);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.05;
  color: var(--braise-vive);
}
@media (min-width: 62rem) {
  .hero .cadre {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(3rem, 7vw, 6rem);
  }
  .hero-titre, .hero-pourtant, .hero-action { grid-column: 1; }
  .hero-peutetre {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0 0 0.6rem;
    padding-left: 1.6rem;
    border-left: 1px solid oklch(0.83 0.035 262 / 0.28);
  }
  .hero-peutetre li + li { margin-top: 0.9rem; }
}
.hero-action {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem 2rem;
}
.hero-note {
  flex: 1 1 18rem;
  max-width: 44ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--lait-3);
}

/* Entrée du hero : les pensées arrivent l'une après l'autre */
@keyframes venir {
  from { opacity: 0; filter: blur(8px); transform: translateY(0.6rem); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.hero-titre, .hero-peutetre li, .hero-pourtant, .hero-action {
  animation: venir 1.1s var(--sortie) both;
}
.hero-peutetre li:nth-child(1) { animation-delay: 0.55s; }
.hero-peutetre li:nth-child(2) { animation-delay: 0.95s; }
.hero-peutetre li:nth-child(3) { animation-delay: 1.35s; }
.hero-peutetre li:nth-child(4) { animation-delay: 1.75s; }
.hero-pourtant { animation-delay: 2.5s; animation-duration: 1.6s; }
.hero-action { animation-delay: 3s; }

/* ===== Apparitions au scroll (activées par main.js) ===== */
.js [data-r] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.9s var(--sortie), transform 0.9s var(--sortie);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-r].est-vu { opacity: 1; transform: none; }

/* ===== Fil des phrases ===== */
.fil {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}
.bulle {
  position: relative;
  max-width: min(100%, 30rem);
  padding: 0.9rem 1.35rem;
  border: 1px solid var(--bulle-trait);
  border-radius: 1.5rem 1.5rem 0.4rem 1.5rem;
  background: var(--bulle);
  color: var(--lait);
  font: 380 clamp(1.05rem, 1.6vw, 1.22rem)/1.4 var(--texte);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px -22px oklch(0.1 0.04 266 / 0.9);
  transition: background-color 0.3s var(--sortie), color 0.3s var(--sortie), border-color 0.3s var(--sortie),
    opacity 0.9s var(--sortie), transform 0.5s var(--sortie);
}
.js .bulle[data-r] { transform: translateX(1.4rem); }
.js .bulle[data-r].est-vu { transform: none; }
.bulle:hover { background: oklch(0.37 0.095 272); border-color: oklch(0.62 0.09 272 / 0.7); }
.bulle:active { transform: scale(0.98); }
.bulle[aria-pressed="true"] {
  background: var(--braise);
  border-color: var(--braise-vive);
  color: var(--encre);
  font-weight: 450;
}
/* Décalages irréguliers : un fil écrit à la main, pas une grille */
@media (min-width: 48rem) {
  .bulle:nth-child(3n + 1) { margin-right: 9%; }
  .bulle:nth-child(3n + 2) { margin-right: 0; }
  .bulle:nth-child(3n) { margin-right: 20%; }
  .bulle:nth-child(8) { margin-right: 4%; }
}

.fil-choix {
  margin-top: 1.2rem;
  text-align: right;
  font-size: 0.95rem;
}

.echo {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.reponse {
  max-width: 21ch;
  padding: 1.5rem 1.9rem 1.6rem;
  border-radius: 1.8rem 1.8rem 1.8rem 0.4rem;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 0.9;
  text-wrap: balance;
  box-shadow: 0 30px 60px -30px oklch(0.1 0.04 266 / 0.9);
}
.saisie {
  display: none;
  gap: 0.35rem;
  padding: 0.95rem 1.2rem;
  border-radius: 1.4rem 1.4rem 1.4rem 0.4rem;
  background: var(--papier);
}
.saisie i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--encre-2);
  animation: pulser 1.1s ease-in-out infinite;
}
.saisie i:nth-child(2) { animation-delay: 0.16s; }
.saisie i:nth-child(3) { animation-delay: 0.32s; }
@keyframes pulser {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.2rem); }
}
.js .echo.attend .reponse { display: none; }
.js .echo.ecrit .saisie { display: inline-flex; }
.js .echo.ecrit .reponse { display: none; }
.js .echo.dit .reponse { animation: venir 0.9s var(--sortie) both; }

/* ===== Bascules : la question qu'on ne pose pas, celle qu'on pose ===== */
.bascules {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.6rem);
}
.bascule-pas {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--lait-3);
}
.bascule-pas span {
  background: linear-gradient(var(--rose), var(--rose)) no-repeat 0 56% / 100% 1.5px;
}
.js .bascule[data-r] .bascule-pas span {
  background-size: 0% 1.5px;
  transition: background-size 0.9s var(--sortie) 0.35s;
}
.js .bascule[data-r].est-vu .bascule-pas span { background-size: 100% 1.5px; }
.bascule-mais {
  margin-top: 0.5rem;
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.6vw, 4.8rem);
  line-height: 0.86;
  color: var(--lait);
  max-width: 17ch;
  text-wrap: balance;
}
@media (min-width: 60rem) {
  .bascule:nth-child(2) { margin-left: 22%; }
}

.verset {
  padding-left: clamp(1.2rem, 3vw, 2rem);
  border-left: 1px solid oklch(0.8 0.115 62 / 0.5);
}
.verset blockquote p {
  font-family: var(--voix);
  font-size: clamp(1.6rem, 2.7vw, 2.05rem);
  line-height: 1.08;
  color: var(--lait);
}
.verset figcaption, .aube-hadith figcaption {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--lait-3);
}

.fondatrice {
  margin-top: clamp(4rem, 10vw, 7rem);
  max-width: 24ch;
  margin-left: auto;
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 0.9;
  color: var(--braise-vive);
  text-wrap: balance;
}

/* ===== Étapes : l'ordre de l'échange compte, d'où les numéros ===== */
.etapes {
  margin-top: clamp(3rem, 7vw, 5rem);
  counter-reset: etape;
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.4rem) clamp(2rem, 6vw, 5rem);
}
@media (min-width: 52rem) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes li:nth-child(even) { margin-top: 4.5rem; }
}
.etapes li {
  counter-increment: etape;
  position: relative;
  padding-top: 1.1rem;
  border-top: 1px solid oklch(0.83 0.035 262 / 0.25);
}
.etapes li::before {
  content: counter(etape);
  display: block;
  font-family: var(--voix);
  font-size: 3.6rem;
  line-height: 0.9;
  color: var(--braise);
}
.etapes h3 {
  margin-top: 0.5rem;
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  line-height: 1.05;
  color: var(--lait);
}
.etapes p { margin-top: 0.7rem; max-width: 44ch; }
.apres-etapes {
  margin-top: clamp(3rem, 7vw, 5rem);
  max-width: 62ch;
  color: var(--lait-2);
}

/* ===== Ce que tu ne trouveras pas ===== */
.refus {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 0.92;
  color: var(--lait);
}
.refus li {
  padding-block: 0.55em;
  border-bottom: 1px solid oklch(0.83 0.035 262 / 0.2);
  max-width: 26ch;
  text-wrap: balance;
}
.refus li:first-child { border-top: 1px solid oklch(0.83 0.035 262 / 0.2); }
.refus span { color: var(--rose); }
@media (min-width: 60rem) {
  .refus li { max-width: none; }
}

.urgence {
  padding: 1.6rem 1.7rem 1.7rem;
  border-radius: 1.2rem;
  background: oklch(0.2 0.06 268 / 0.75);
  border: 1px solid oklch(0.7 0.11 22 / 0.55);
}
.urgence h3 {
  font: 500 1.05rem/1.3 var(--texte);
  color: var(--lait);
}
.urgence p { margin-top: 0.6rem; font-size: 0.98rem; color: var(--lait-2); }
.urgence a { font-weight: 500; white-space: nowrap; }

/* ===== Confidentialité ===== */
.garanties {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 0;
}
.garanties > div {
  display: grid;
  gap: 0.4rem 3rem;
  padding-block: 1.6rem;
  border-top: 1px solid oklch(0.83 0.035 262 / 0.22);
}
.garanties > div:last-child { border-bottom: 1px solid oklch(0.83 0.035 262 / 0.22); }
@media (min-width: 52rem) {
  .garanties > div { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: baseline; }
}
.garanties dt {
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.05;
  color: var(--lait);
}
.garanties dd { max-width: 58ch; }

/* ===== À propos ===== */
.portrait {
  margin-top: 2.2rem;
  width: min(100%, 20rem);
  border-radius: 1.2rem;
}

/* ===== Questions ===== */
.faq { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.faq details { border-top: 1px solid oklch(0.83 0.035 262 / 0.22); }
.faq details:last-child { border-bottom: 1px solid oklch(0.83 0.035 262 / 0.22); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font: 420 clamp(1.05rem, 1.6vw, 1.2rem)/1.4 var(--texte);
  color: var(--lait);
}
.faq summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid var(--braise);
  border-bottom: 1.5px solid var(--braise);
  transform: translateY(-0.2rem) rotate(45deg);
  transition: transform 0.35s var(--sortie);
}
.faq details[open] summary::after { transform: translateY(0.15rem) rotate(-135deg); }
.faq summary:hover h3 { color: var(--braise-vive); }
.faq details p { padding-bottom: 1.5rem; max-width: 62ch; }

/* ===== Lectures (articles, alimenté par articles-list.php) ===== */
.lectures-liste { margin-top: 2.5rem; display: grid; gap: 0; }
.lectures-liste li { border-top: 1px solid oklch(0.83 0.035 262 / 0.22); }
.lectures-liste a {
  display: block;
  padding-block: 1.2rem;
  font-family: var(--voix);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--lait);
  text-decoration: none;
}
.lectures-liste a:hover { color: var(--braise-vive); }
.lectures-liste span {
  display: block;
  margin-top: 0.3rem;
  font: 340 0.95rem/1.55 var(--texte);
  color: var(--lait-3);
  max-width: 70ch;
}

/* ===== Aube : fin de page, le jour se lève ===== */
.aube {
  margin-top: var(--respiration);
  padding-top: clamp(16rem, 38vw, 26rem);
  background: linear-gradient(
    to bottom,
    transparent 0,
    oklch(0.62 0.09 300 / 0.75) 7rem,
    var(--aube-haut) clamp(12rem, 28vw, 19rem),
    var(--aube-milieu) 62%,
    var(--aube-bas) 100%
  );
  color: var(--encre-2);
  color-scheme: light;
}
.aube ::selection { background: var(--encre); color: var(--aube-milieu); }
.aube a { color: var(--encre); }
.aube a:hover { color: oklch(0.42 0.13 30); }
.aube :focus-visible { outline-color: var(--encre); }

.aube > .cadre {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .aube > .cadre { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .aube-texte { position: sticky; top: 6rem; }
}
.aube-titre {
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(2.7rem, 6.2vw, 4.7rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  color: var(--encre);
  max-width: 14ch;
  text-wrap: balance;
}
.aube-texte > p { margin-top: 1.5rem; max-width: 46ch; font-size: 1.125rem; }
.aube-hadith {
  margin-top: 2.4rem;
  padding-left: 1.3rem;
  border-left: 1px solid oklch(0.23 0.07 268 / 0.4);
}
.aube-hadith blockquote p {
  font-family: var(--voix);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--encre);
}
.aube-hadith figcaption { color: var(--encre-2); }

.formulaire {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 1.6rem;
  background: oklch(0.975 0.014 75 / 0.82);
  box-shadow: 0 40px 80px -46px oklch(0.4 0.1 40 / 0.7);
}
.formulaire-titre {
  font-family: var(--voix);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  line-height: 1;
  color: var(--encre);
}
.formulaire-sous { margin-top: 0.5rem; font-size: 0.95rem; }

.champ { margin-top: 1.4rem; }
.champ label {
  display: block;
  font-weight: 450;
  font-size: 0.95rem;
  color: var(--encre);
}
.facultatif { font-weight: 340; color: var(--encre-2); }
.champ input, .champ textarea {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.85rem 1rem;
  border: 1px solid oklch(0.23 0.07 268 / 0.35);
  border-radius: 0.8rem;
  background: oklch(0.995 0.005 75);
  color: var(--encre);
  font: 380 1.0625rem/1.5 var(--texte);
  caret-color: var(--encre);
  transition: border-color 0.2s var(--sortie), box-shadow 0.2s var(--sortie);
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ input:hover, .champ textarea:hover { border-color: oklch(0.23 0.07 268 / 0.6); }
.champ input:focus-visible, .champ textarea:focus-visible {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px oklch(0.8 0.115 62 / 0.7);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: oklch(0.5 0.17 28); }
.aide { margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.5; color: var(--encre-2); }
.champ-piege { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

.coche {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--encre);
  cursor: pointer;
}
.coche input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--encre);
}
.formulaire .btn { margin-top: 1.6rem; width: 100%; }
.formulaire-etat {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  background: oklch(0.9 0.05 150);
  color: oklch(0.27 0.07 155);
}
.formulaire-etat.est-erreur { background: oklch(0.9 0.05 28); color: oklch(0.33 0.12 28); }
.formulaire-autre { margin-top: 1.2rem; font-size: 0.93rem; text-align: center; }

.pied {
  margin-top: clamp(5rem, 12vw, 9rem);
  padding-block: 2.2rem 6.5rem;
  border-top: 1px solid oklch(0.23 0.07 268 / 0.2);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--encre-2);
}
.pied-cadre { display: grid; gap: 0.5rem; }
.pied-cadre p { max-width: 70ch; }
.pied-nom { font-family: var(--voix); font-size: 1.5rem; line-height: 1.1; color: var(--encre); }
@media (min-width: 48rem) { .pied { padding-bottom: 2.6rem; } }

/* ===== Bouton collant mobile ===== */
.collant {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.3rem;
  border-radius: 999px;
  background: var(--braise);
  color: var(--encre);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 16px 36px -12px oklch(0.1 0.04 266 / 0.85);
  transform: translateY(160%);
  transition: transform 0.5s var(--sortie);
}
.collant:hover { color: var(--encre); }
.collant.est-la { transform: none; }
@media (min-width: 48rem) { .collant { display: none; } }

/* ===== Mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-r], .js .bulle[data-r] { opacity: 1; transform: none; }
  .ciel-horizon { transform: none; }
}