/*
  Polices auto-hébergées.

  Elles étaient chargées depuis Google Fonts. Elles ne le sont plus : le site
  n'adresse désormais aucune requête à un tiers pour s'afficher. C'est ce qui
  permet d'écrire une politique de sécurité de contenu sans y déclarer
  d'origine extérieure, et de dire dans la politique de confidentialité que
  rien ne part vers un autre serveur tant que le visiteur n'a pas accepté les
  cookies publicitaires.

  Les deux familles sont des polices variables, un seul fichier couvrant
  toutes les graisses. Elles sont sous licence SIL Open Font License : voir
  public/assets/polices/OFL-bricolage-grotesque.txt et OFL-figtree.txt.

  Les fichiers « latin-ext » ne se téléchargent que si la page contient un
  caractère de cette plage : ils ne pèsent donc rien dans le cas courant.
*/

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/polices/bricolage-grotesque-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: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/polices/bricolage-grotesque-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: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/figtree-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: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/figtree-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;
}

/*
  Ardoise et safran, formes rondes.
  Feuille unique, écrite pour le mobile d'abord.
  L'accent safran est réservé aux boutons d'appel, aux coches et aux
  surtitres posés sur fond sombre. Il ne sert jamais de couleur de texte
  sur fond clair : le contraste y serait insuffisant.

  Deux écarts par rapport à la charte, pour tenir le niveau AA exigé par le
  brief (rapport de contraste d'au moins 4,5 sur du texte courant) :

  1. Les liens sont écrits en #8f5c00, qui est la couleur de survol prévue
     par la charte. Le #b37400 annoncé ne donne que 3,65 sur le fond crème.
  2. Le gris atténué #6f7d88 (3,96) ne sert plus à écrire, mais seulement à
     dessiner des filets et des chevrons. Les mentions secondaires prennent
     le gris #4b5a66 (6,67), lui aussi prévu par la charte.

  Voir A-VALIDER.md.
*/

:root {
  --creme: #fbf7ef;
  --ardoise: #24303a;
  --carte: #34434f;
  --texte: #1f2933;
  --texte-doux: #4b5a66;
  --texte-attenue: #6f7d88;
  --clair: #fbf7ef;
  --clair-doux: #d5dbe0;
  --clair-attenue: #aeb8c1;
  --filet: #e8e1d3;
  --champ: #d6cfc0;
  --lien: #8f5c00;
  --lien-survol: #6f4700;
  --safran: #f0a202;

  --rayon-bloc: 24px;
  --rayon-carte: 20px;
  --rayon-champ: 12px;
  --pilule: 999px;

  --largeur: 1120px;
  --barre: 68px;

  --titres: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --courant: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barre) + 16px);
}

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  padding-top: var(--barre);
  /* Place pour la barre d'action fixe du mobile. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1,
h2,
h3 {
  font-family: var(--titres);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 6.2vw, 3.25rem);
}

h2 {
  font-size: clamp(1.6rem, 4.6vw, 2.35rem);
}

h3 {
  font-size: clamp(1.125rem, 2.6vw, 1.3rem);
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--lien);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--lien-survol);
}

img {
  max-width: 100%;
  height: auto;
}

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

.sombre :focus-visible,
.barre-haute :focus-visible {
  outline-color: var(--safran);
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--creme);
  color: var(--texte);
  padding: 12px 20px;
  z-index: 60;
  border-radius: 0 0 var(--rayon-champ) 0;
}

.saut:focus {
  left: 0;
}

.zone {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding-block: clamp(44px, 8vw, 84px);
}

.sombre {
  background: var(--ardoise);
  color: var(--clair);
}

.sombre h1,
.sombre h2,
.sombre h3 {
  color: var(--clair);
}

.sombre p {
  color: var(--clair-doux);
}

.blanc {
  background: #ffffff;
}

.surtitre {
  font-family: var(--courant);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--texte-doux);
}

.sombre .surtitre {
  color: var(--safran);
}

.chapeau {
  font-size: 1.125rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

.sombre .chapeau {
  color: var(--clair-doux);
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--pilule);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.bouton--or {
  background: var(--safran);
  color: var(--ardoise);
}

.bouton--or:hover {
  background: #d99102;
  color: var(--ardoise);
}

.bouton--contour {
  background: transparent;
  border-color: var(--clair-attenue);
  color: var(--clair);
}

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

.bouton--sombre {
  background: var(--ardoise);
  color: var(--clair);
}

.bouton--sombre:hover {
  background: #1a242c;
  color: var(--clair);
}

/* Contour sombre, pour les fonds clairs. */
.bouton--ligne {
  background: transparent;
  border-color: var(--champ);
  color: var(--texte);
}

.bouton--ligne:hover {
  border-color: var(--texte-attenue);
  color: var(--texte);
}

.bouton--large {
  width: 100%;
}

/* Un bouton qui doit se lire comme un lien : rouvrir le bandeau cookies. */
.lien-bouton {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--lien);
  text-decoration: underline;
  cursor: pointer;
}

.lien-bouton:hover {
  color: var(--lien-survol);
}

.bouton[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.icone {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ------------------------------------------------------------ Barre haute */

.barre-haute {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--barre);
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
}

.barre-haute .zone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marque {
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0;
}

.marque strong {
  display: block;
  font-family: var(--titres);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.marque strong,
.marque span {
  /* La barre a une hauteur fixe : ces deux lignes ne doivent jamais
     passer à la ligne, elles sont tronquées si l'écran est trop étroit. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marque span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-doux);
  line-height: 1.4;
}

.barre-haute .bouton {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .barre-haute .bouton .numero {
    display: none;
  }

  .barre-haute .bouton {
    padding: 9px 16px;
  }
}

/* ------------------------------------------------------------------- Hero */

.hero {
  padding-block: clamp(36px, 7vw, 72px);
}

/*
  Une seule image de portrait dans la page, placée par la grille : réduite
  à gauche du paragraphe sur mobile, en colonne de droite sur ordinateur.
  Le <picture> ne télécharge qu'une seule variante, celle qui correspond
  à la largeur réelle.
*/
.hero .zone {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "surtitre surtitre"
    "titre    titre"
    "portrait texte"
    "reperes  reperes"
    "boutons  boutons"
    "horaires horaires";
  column-gap: 16px;
}

.hero .surtitre {
  grid-area: surtitre;
}

.hero h1 {
  grid-area: titre;
  max-width: 17ch;
}

.hero .hero-texte {
  grid-area: texte;
  margin: 0;
  color: var(--clair-doux);
}

.hero-portrait {
  grid-area: portrait;
  display: block;
  width: 92px;
  aspect-ratio: 4 / 5;
  align-self: start;
}

.hero .boutons {
  grid-area: boutons;
}

.hero .horaires {
  grid-area: horaires;
}

.portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rayon-carte);
  background: var(--carte);
}

.reperes {
  grid-area: reperes;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.repere {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  padding: 16px 18px;
}

.repere b {
  display: block;
  font-family: var(--titres);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clair);
  line-height: 1.2;
}

.repere span {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--clair-attenue);
  line-height: 1.4;
}

.horaires {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--clair-attenue);
}

@media (min-width: 900px) {
  .hero .zone {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "surtitre portrait"
      "titre    portrait"
      "texte    portrait"
      "reperes  portrait"
      "boutons  portrait"
      "horaires portrait";
    column-gap: 48px;
  }

  .hero-portrait {
    width: 100%;
    align-self: center;
  }

  .reperes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ Avis Google */

.avis {
  background: #ffffff;
  border-bottom: 1px solid var(--filet);
}

.avis .zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding-block: 18px;
  text-align: center;
}

.etoiles {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
}

.etoiles svg {
  width: 18px;
  height: 18px;
  fill: var(--safran);
}

.avis-note {
  font-weight: 700;
}

.avis-lien {
  font-weight: 600;
}

/* Sur mobile, tout le bandeau est cliquable, sans ajouter de second lien. */
@media (max-width: 819px) {
  .avis .zone {
    position: relative;
  }

  .avis-lien::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

/* ----------------------------------------------------------- Trois étapes */

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

.etape {
  background: #ffffff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-bloc);
  padding: 24px;
}

.etape::before {
  counter-increment: etape;
  content: counter(etape);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ardoise);
  color: var(--clair);
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1.0625rem;
}

.etape p {
  margin: 0;
  color: var(--texte-doux);
}

@media (min-width: 820px) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------- Honoraires */

.honoraires-grille {
  display: grid;
  gap: 32px;
  margin-top: 28px;
}

.montant {
  font-family: var(--titres);
  font-size: clamp(2.75rem, 10vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--clair);
}

.montant-detail {
  margin: 10px 0 0;
  font-size: 1.125rem;
  color: var(--clair-doux);
}

.montant-note {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--clair-attenue);
  max-width: 44ch;
}

.comprend {
  background: var(--carte);
  border-radius: var(--rayon-bloc);
  padding: 24px;
}

.comprend h3 {
  margin-bottom: 16px;
}

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

.coches li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--clair-doux);
  line-height: 1.5;
}

.coches svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  fill: var(--safran);
}

@media (min-width: 820px) {
  .honoraires-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* -------------------------------------------------------------- Formulaire */

.formulaire-bloc {
  background: #ffffff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-bloc);
  padding: clamp(22px, 4vw, 36px);
  margin-top: 28px;
}

.champ {
  margin-bottom: 20px;
}

.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.champ .aide {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin-top: 2px;
}

.facultatif {
  font-weight: 400;
  color: var(--texte-doux);
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--champ);
  border-radius: var(--rayon-champ);
  background: var(--creme);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
}

input::placeholder {
  color: var(--texte-doux);
}

input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--champ);
  border-radius: var(--rayon-champ);
  background: var(--creme);
  font-family: var(--courant);
  font-size: 0.9375rem;
}

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

.fichiers-choisis li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--creme);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-champ);
  padding: 10px 12px;
  font-size: 0.9375rem;
}

.fichiers-choisis .poids {
  color: var(--texte-doux);
  font-size: 0.875rem;
  white-space: nowrap;
}

.retirer {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--lien);
  font-family: var(--courant);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--pilule);
}

.retirer:hover {
  color: var(--lien-survol);
}

.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.consentement input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--ardoise);
}

.consentement label {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

.message {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--rayon-champ);
  font-size: 0.9375rem;
}

.message--erreur {
  background: #fdecec;
  border: 1px solid #e4b4b4;
  color: #7a1f1f;
}

.turnstile {
  margin-bottom: 18px;
}

.mention-formulaire {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* ------------------------------------------------------------ Votre avocat */

.avocat-grille {
  display: grid;
  gap: 28px;
  align-items: start;
}

.avocat-portrait {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
}

.coordonnees {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

@media (min-width: 820px) {
  .avocat-grille {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
  }
}

/* --------------------------------------------------------------------- FAQ */

.questions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.questions details {
  background: #ffffff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
}

.questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 22px;
  font-family: var(--titres);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  border-radius: var(--rayon-carte);
}

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

.questions summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--texte-attenue);
  border-bottom: 2px solid var(--texte-attenue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.questions details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.questions .reponse {
  padding: 0 22px 20px;
  margin: 0;
  color: var(--texte-doux);
}

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

.pied {
  background: var(--ardoise);
  color: var(--clair-doux);
  padding-block: 40px;
  font-size: 0.9375rem;
}

.pied strong {
  font-family: var(--titres);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--clair);
  display: block;
}

.pied a {
  color: var(--clair);
}

.pied a:hover {
  color: var(--safran);
}

.pied-grille {
  display: grid;
  gap: 24px;
}

.pied-liens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.pied-liens button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--clair);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pied-liens button:hover {
  color: var(--safran);
}

@media (min-width: 820px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* -------------------------------------------------- Barre d'action mobile */

.barre-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 35;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--creme);
  border-top: 1px solid var(--filet);
  transition: transform 0.2s ease;
}

.barre-mobile[data-cachee="oui"] {
  transform: translateY(130%);
}

.barre-mobile .bouton {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 12px;
  font-size: 1rem;
}

@media (min-width: 820px) {
  .barre-mobile {
    display: none;
  }
}

@media (max-width: 819px) {
  body {
    padding-bottom: 88px;
  }
}

/* ------------------------------------------------------- Bandeau cookies */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--ardoise);
  color: var(--clair-doux);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--carte);
}

.cookies .zone {
  display: grid;
  gap: 14px;
  padding: 0 20px;
}

.cookies p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--clair-doux);
  max-width: 70ch;
}

.cookies a {
  color: var(--clair);
}

.cookies-choix {
  display: flex;
  gap: 10px;
}

.cookies-choix .bouton {
  flex: 1 1 0;
  min-height: 48px;
  font-size: 1rem;
  background: var(--clair);
  color: var(--ardoise);
  border-color: var(--clair);
}

.cookies-choix .bouton:hover {
  background: #ffffff;
  color: var(--ardoise);
}

@media (min-width: 820px) {
  .cookies .zone {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    max-width: var(--largeur);
    margin: 0 auto;
  }

  .cookies-choix .bouton {
    flex: 0 0 auto;
    min-width: 150px;
  }
}

/* ------------------------------------------------- Pages secondaires */

.page-texte {
  padding-block: clamp(36px, 7vw, 64px);
}

.page-texte .zone {
  max-width: 760px;
}

.page-texte h2 {
  margin-top: 1.6em;
}

.page-texte h2:first-of-type {
  margin-top: 1em;
}

.page-texte ul {
  padding-left: 22px;
  color: var(--texte-doux);
}

.page-texte li {
  margin-bottom: 8px;
}

.releve-grille {
  display: grid;
  gap: 32px;
}

.bloc-numerote {
  background: #ffffff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-bloc);
  padding: 24px;
  margin-bottom: 16px;
}

.bloc-numerote p:last-child {
  margin-bottom: 0;
}

.aparte {
  background: var(--ardoise);
  border-radius: var(--rayon-bloc);
  padding: 24px;
  color: var(--clair-doux);
}

.aparte h2 {
  font-size: 1.3rem;
  color: var(--clair);
}

.aparte .bouton {
  width: 100%;
  margin-top: 10px;
}

@media (min-width: 900px) {
  .releve-grille {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }

  .aparte {
    position: sticky;
    top: calc(var(--barre) + 24px);
  }
}

.merci {
  text-align: center;
  padding-block: clamp(56px, 12vw, 110px);
}

.merci .zone {
  max-width: 620px;
}

.merci .chapeau {
  margin-inline: auto;
}

.merci .boutons {
  justify-content: center;
}

/* La page « relevé » a une colonne latérale : elle a besoin de la pleine
   largeur, contrairement aux pages de texte courant. */
.page-large .zone {
  max-width: var(--largeur);
}