/* Pullpace : feuille de style du site (accueil FR, DE, EN, politique de confidentialité, page 404).
   Couleurs : palette « Abricot » de la DA v2 (docs/direction_artistique.md ; valeurs de design/tokens/pullpace.json,
   reprises telles quelles). Fonds toujours teintés : ni blanc pur, ni noir, ni gris neutre. Aplats seulement.
   Aucune ressource externe : la police est servie par le site (Gabarito, licence OFL, fonts/OFL-gabarito.txt). */

@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* couleur.* (clair) */
  --fond: #FFF0E3;
  --fond-eleve: #FFF7F0;
  --fond-enfonce: #F8E1CE;
  --selection: #FFD8C6;
  --trait: #EED6C1;
  --trait-fort: #857466;
  --texte: #2E1E10;
  --texte-2: #665444;
  --principal: #BD520B;
  --sur-principal: #FFFAF5;
  --lien: #9E4204;
  --focus: #9E4204;
  --succes: #2A6B3C;
  --succes-doux: #D9EFDC;
  /* intensite.* (clair) */
  --i-repos: #EAE1FF;
  --i-repos-encre: #2E1E10;
  --i-calme: #E4B67E;
  --i-calme-encre: #2E1E10;
  --i-modere: #DE7C46;
  --i-modere-encre: #2E1E10;
  --i-dur: #A23130;
  --i-dur-encre: #FFFAF5;
  /* lecteur.* (sombre dans les deux thèmes) */
  --l-fond: #290E21;
  --l-carte: #3F1F35;
  --l-texte: #F9EEF5;
  --l-texte-2: #C2ADBB;
  --l-principal: #FC8E58;
  --l-piste: #533449;
  /* marque.* et mascotte.* */
  --marque: #DD6B2C;
  --marque-2: #D59FD0;
  --m-bas: #36212F;
  --m-sol: #E2D3DC;
  /* propres au site */
  --bande: var(--fond-enfonce);
  --carte: var(--fond-eleve);
  --cadre-tel: #2E1225;
  --rayon: 16px;
  --large: 1120px;
  --police: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #2E1225;
    --fond-eleve: #3D1D33;
    --fond-enfonce: #47293D;
    --selection: #5D321D;
    --trait: #4C3043;
    --trait-fort: #927E8B;
    --texte: #F9EEF5;
    --texte-2: #C5B0BD;
    --principal: #FC8E58;
    --sur-principal: #2E1225;
    --lien: #FEAA82;
    --focus: #FEAA82;
    --succes: #82CC92;
    --succes-doux: #1B3621;
    --i-repos: #3A304B;
    --i-repos-encre: #F9EEF5;
    --i-calme: #734D16;
    --i-calme-encre: #F9EEF5;
    --i-modere: #C96E3B;
    --i-modere-encre: #2E1225;
    --i-dur: #FF978F;
    --i-dur-encre: #2E1225;
    --m-bas: #7B5873;
    --m-sol: #5C4454;
    --bande: var(--fond-eleve);
    --carte: var(--fond-eleve);
    --cadre-tel: #5A3A50;
  }
  .bande { --carte: var(--fond); }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  margin: 0;
}

.conteneur {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 20px;
}

.evitement {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--principal);
  color: var(--sur-principal);
  font-weight: 700;
  text-decoration: none;
}

.evitement:focus {
  top: 12px;
}

/* ---------------------------------------------------------------- En-tête */

.entete {
  padding: 18px 0;
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texte);
  text-decoration: none;
}

.marque__symbole {
  width: 36px;
  height: 36px;
  flex: none;
}

.marque__mot {
  width: 112px;
  height: 37px;
  margin-top: -4px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
}

.nav__lien {
  color: var(--texte-2);
  font-weight: 600;
  text-decoration: none;
}

.nav__lien:hover {
  color: var(--texte);
}

.langues {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
}

.langues a {
  display: block;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--texte-2);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.langues a[aria-current="page"] {
  background: var(--selection);
  color: var(--texte);
}

@media (max-width: 760px) {
  .nav__lien {
    display: none;
  }
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--principal);
  border-radius: 999px;
  background: var(--principal);
  color: var(--sur-principal);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}

.bouton:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.bouton--discret {
  border-color: var(--trait-fort);
  background: transparent;
  color: var(--texte);
}

.bouton--petit {
  min-height: 44px;
  padding: 0 18px;
  font-size: 1rem;
}

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

.ouverture {
  padding: 28px 0 72px;
}

.ouverture__grille {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .ouverture__grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
  }
}

.surtitre {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--selection);
  color: var(--texte);
  font-size: 0.9375rem;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.35rem, 5.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h1 span {
  display: block;
  color: var(--principal);
}

.chapo {
  margin-top: 22px;
  max-width: 36em;
  color: var(--texte-2);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.chapo strong {
  color: var(--texte);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.atouts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.atouts li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.atouts li::before {
  content: "";
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--succes-doux)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.5L13 6.4' fill='none' stroke='%232A6B3C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

@media (prefers-color-scheme: dark) {
  .atouts li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.5L13 6.4' fill='none' stroke='%2382CC92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.garde {
  margin-top: 22px;
  max-width: 34em;
  color: var(--texte-2);
  font-size: 0.9375rem;
}

/* Scène de l'ouverture : l'écran Aujourd'hui, le lecteur pendant un repos, la mascotte. */

.scene {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding-bottom: 200px;
}

.tel {
  width: 300px;
  max-width: 100%;
  margin-left: 40px;
  padding: 9px;
  border-radius: 46px;
  background: var(--cadre-tel);
}

.tel__ecran {
  overflow: hidden;
  border-radius: 38px;
  background: var(--fond);
  color: var(--texte);
  font-size: 13px;
  line-height: 1.35;
}

.tel__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 16px 10px;
}

.prog {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prog svg {
  width: 30px;
  height: 30px;
  transform: rotate(-90deg);
}

.prog .piste {
  fill: none;
  stroke: var(--fond-enfonce);
  stroke-width: 4;
}

.prog .plein {
  fill: none;
  stroke: var(--principal);
  stroke-width: 4;
  stroke-linecap: round;
}

.etq {
  display: block;
  color: var(--texte-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prog b {
  display: block;
  font-size: 15px;
}

.rond {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fond-enfonce);
  color: var(--texte-2);
}

.rond svg {
  width: 18px;
  height: 18px;
}

.semaine {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 0;
  padding: 4px 10px 12px;
  list-style: none;
  text-align: center;
}

.semaine li {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 0 6px;
  border-radius: 12px;
}

.semaine .auj {
  background: var(--selection);
}

.semaine .jl {
  color: var(--texte-2);
  font-size: 10px;
  font-weight: 600;
}

.semaine .jn {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.semaine .auj .jn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--principal);
  color: var(--sur-principal);
}

.semaine .mk {
  display: flex;
  justify-content: center;
  min-height: 12px;
}

/* Repère d'intensité : couleur, jauge de 3 barres et mot (le mot dans le badge, la jauge partout). */

.niv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
}

.niv--repos { background: var(--i-repos); color: var(--i-repos-encre); }
.niv--calme { background: var(--i-calme); color: var(--i-calme-encre); }
.niv--modere { background: var(--i-modere); color: var(--i-modere-encre); }
.niv--dur { background: var(--i-dur); color: var(--i-dur-encre); }

.jauge {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 9px;
}

.jauge i {
  display: block;
  width: 3px;
  border: 1.2px solid currentColor;
  border-radius: 1px;
}

.jauge i:nth-child(1) { height: 5px; }
.jauge i:nth-child(2) { height: 7px; }
.jauge i:nth-child(3) { height: 9px; }

.jauge[data-n="1"] i:nth-child(-n + 1),
.jauge[data-n="2"] i:nth-child(-n + 2),
.jauge[data-n="3"] i:nth-child(-n + 3) {
  background: currentColor;
}

.mk .niv {
  padding: 2px 5px;
}

.badge {
  padding: 3px 9px 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.tel__corps {
  display: grid;
  gap: 10px;
  padding: 2px 14px 14px;
}

.tel__titre {
  font-size: 19px;
  font-weight: 700;
}

.carte-seance {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: var(--fond-eleve);
}

.carte-seance__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carte-seance h3 {
  font-size: 16px;
  letter-spacing: 0;
}

.carte-seance__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--texte-2);
}

.carte-seance__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--principal);
  color: var(--sur-principal);
  font-weight: 700;
}

.carte-seance__bouton svg {
  width: 12px;
  height: 12px;
}

.tel__ensuite {
  color: var(--texte-2);
}

.onglets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 6px 16px;
  border-top: 1px solid var(--trait);
  background: var(--fond-eleve);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--texte-2);
}

.onglets span {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.onglets i {
  display: block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--fond-enfonce);
}

.onglets .actif {
  color: var(--texte);
  font-weight: 800;
}

.onglets .actif i {
  background: var(--principal);
}

.lecteur {
  position: absolute;
  right: 0;
  top: 392px;
  width: 222px;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: var(--l-fond);
  color: var(--l-texte);
  outline: 2px solid var(--fond);
  transform: rotate(2deg);
  font-size: 13px;
  line-height: 1.35;
}

.lecteur .etq {
  color: var(--l-texte-2);
}

.lecteur__phase {
  margin-top: 8px;
  color: var(--l-principal);
  font-weight: 700;
}

.lecteur__chrono {
  margin-top: 2px;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lecteur__barre {
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--l-piste);
  overflow: hidden;
}

.lecteur__barre::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: var(--l-principal);
}

.lecteur__carte {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--l-carte);
}

.lecteur__carte b {
  display: block;
  font-size: 14px;
}

.lecteur__carte span {
  display: block;
  margin-top: 2px;
  color: var(--l-texte-2);
}

.lecteur__consigne {
  margin-top: 6px;
  color: var(--l-texte-2);
}

.scene .mascotte {
  position: absolute;
  left: 0;
  bottom: 16px;
  width: 140px;
}

@media (max-width: 520px) {
  .tel {
    margin: 0 auto;
  }
  .lecteur {
    width: 205px;
  }
  .scene .mascotte {
    width: 120px;
  }
}

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

.section {
  padding: 72px 0;
}

.section--serree {
  padding: 40px 0;
}

.bande {
  background: var(--bande);
}

.section__tete {
  max-width: 44rem;
  margin-bottom: 36px;
}

.repere {
  display: block;
  margin-bottom: 10px;
  color: var(--principal);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 800;
}

.section__tete p {
  margin-top: 16px;
  color: var(--texte-2);
  font-size: 1.125rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Pour qui */

.pourtoi {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .pourtoi {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pourtoi li {
  padding: 18px 20px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte-2);
}

.pourtoi strong {
  color: var(--texte);
}

/* Cartes génériques : trois façons, règles, forces */

.grille {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}

.carte {
  padding: 24px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
}

.carte h3 {
  margin-bottom: 10px;
}

.carte p {
  color: var(--texte-2);
}

.carte p + p {
  margin-top: 10px;
}

.carte .petit {
  font-size: 0.9375rem;
}

.icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--selection);
  color: var(--texte);
}

.icone svg {
  width: 24px;
  height: 24px;
}

/* Étapes */

.etapes {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

@media (min-width: 720px) {
  .etapes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .etapes { grid-template-columns: repeat(4, 1fr); }
}

.etapes li {
  position: relative;
  padding: 24px;
  border-radius: var(--rayon);
  background: var(--bande);
  counter-increment: etape;
}

.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--principal);
  color: var(--sur-principal);
  font-weight: 800;
  font-size: 1.125rem;
}

.etapes h3 {
  margin-bottom: 8px;
  font-size: 1.1875rem;
}

.etapes p {
  color: var(--texte-2);
}

/* Calendrier d'exemple */

.calendrier__grille {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 960px) {
  .calendrier__grille {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
  }
}

.cal {
  padding: 20px;
  border: 1px solid var(--trait);
  border-radius: 22px;
  background: var(--carte);
}

.cal__phase {
  margin-bottom: 10px;
  font-weight: 700;
}

.cal__table {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  gap: 6px;
  align-items: center;
  text-align: center;
}

.cal__table .t {
  color: var(--texte-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cal__table .s {
  color: var(--texte-2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: left;
}

.cal__case {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 10px;
}

.cal__case:not(.niv) {
  background: var(--fond-enfonce);
}

.cal__case .jauge {
  height: 11px;
}

.cal__case .jauge i {
  width: 3.5px;
}

.cal__case .jauge i:nth-child(1) { height: 6px; }
.cal__case .jauge i:nth-child(2) { height: 8.5px; }
.cal__case .jauge i:nth-child(3) { height: 11px; }

.cal__allegee {
  grid-column: 2 / -1;
  margin-top: -2px;
  color: var(--texte-2);
  font-size: 0.8125rem;
  text-align: left;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.legende li {
  padding: 4px 11px 4px 9px;
  font-size: 0.875rem;
  font-weight: 700;
}

.cal__note {
  margin-top: 14px;
  color: var(--texte-2);
  font-size: 0.9375rem;
}

.controle {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
}

.controle ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.controle li {
  display: flex;
  gap: 9px;
}

.controle li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  border-radius: 50%;
  background: var(--succes-doux)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.5L13 6.4' fill='none' stroke='%232A6B3C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

@media (prefers-color-scheme: dark) {
  .controle li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.5L13 6.4' fill='none' stroke='%2382CC92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.controle .etq {
  font-size: 0.8125rem;
}

/* Règles */

.regles .carte {
  background: var(--carte);
}

.note-bande {
  margin-top: 24px;
  max-width: 44rem;
  color: var(--texte-2);
  font-size: 0.9375rem;
}

/* Progrès et mascotte */

.progres {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px) {
  .progres {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 56px;
  }
}

.progres .mascotte {
  width: 220px;
  margin: 0 auto;
}

.progres__texte p {
  margin-top: 14px;
  color: var(--texte-2);
  font-size: 1.125rem;
}

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.puces li {
  padding: 8px 14px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--carte);
  font-weight: 600;
}

.puces b {
  color: var(--principal);
  font-variant-numeric: tabular-nums;
}

.puces__note {
  margin-top: 12px;
  color: var(--texte-2);
  font-size: 0.875rem;
}

/* Liste d'attente */

.attente__grille {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .attente__grille {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
  }
}

.attente__texte p {
  margin-top: 16px;
  color: var(--texte-2);
  font-size: 1.125rem;
}

.attente__promesses {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0 0 0 1.2em;
  color: var(--texte-2);
}

/* Le formulaire de Tally a un texte foncé qu'on ne peut pas changer : sa carte reste claire (crème) dans les
   deux thèmes, avec les couleurs du thème clair. */
.formulaire {
  padding: 24px;
  border-radius: 22px;
  background: #FFF7F0;
  color: #2E1E10;
  border: 1px solid #EED6C1;
}

.formulaire iframe {
  display: block;
  width: 100%;
  border: 0;
}

.formulaire__secours h3 {
  margin-bottom: 8px;
}

.formulaire__secours p {
  margin-bottom: 18px;
  color: #665444;
}

.formulaire .bouton {
  border-color: #BD520B;
  background: #BD520B;
  color: #FFFAF5;
}

.formulaire__aide {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #EED6C1;
  color: #665444;
  font-size: 0.875rem;
}

.formulaire__aide a {
  color: #9E4204;
}

.formulaire :focus-visible {
  outline-color: #9E4204;
}

/* Questions */

.faq {
  display: grid;
  gap: 10px;
  max-width: 50rem;
}

.faq details {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
}

.faq summary {
  position: relative;
  padding: 18px 52px 18px 22px;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--principal);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding: 0 22px 20px;
  color: var(--texte-2);
}

.faq details > div p + p {
  margin-top: 10px;
}

/* ---------------------------------------------------------------- Pied de page */

.pied {
  padding: 40px 0 48px;
  border-top: 1px solid var(--trait);
}

.pied__grille {
  display: grid;
  gap: 24px;
}

@media (min-width: 760px) {
  .pied__grille {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.pied__mention {
  margin-top: 12px;
  max-width: 34em;
  color: var(--texte-2);
  font-size: 0.875rem;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

/* ---------------------------------------------------------------- Pages de texte (politique, 404) */

.texte {
  max-width: 46rem;
  padding: 24px 0 72px;
}

.texte h1 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
}

.texte h2 {
  margin: 44px 0 14px;
  font-size: 1.5rem;
}

.texte h3 {
  margin: 26px 0 10px;
  font-size: 1.1875rem;
}

.texte p,
.texte ul,
.texte ol {
  margin: 0 0 14px;
}

.texte li + li {
  margin-top: 6px;
}

.texte .meta {
  color: var(--texte-2);
}

.essentiel {
  margin: 30px 0;
  padding: 6px 24px 10px;
  border-radius: var(--rayon);
  background: var(--bande);
}

.essentiel h2 {
  margin-top: 20px;
}

.tableau {
  overflow-x: auto;
  margin: 0 0 18px;
}

.tableau table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tableau th,
.tableau td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}

.tableau th {
  background: var(--bande);
}