/* ============================================================================
   LES PAGES DE RÉFÉRENCEMENT — la matière de la vitrine, en autonome.

   Ces pages sont écrites au moment de la construction du site et ne chargent
   aucun script : leur style tient donc ici et dans `tokens.css`, la palette de
   la marque servie à la racine. Rien de plus, pour qu'elles s'affichent avant
   même qu'on ait fini de scruter la barre d'adresse.
   ============================================================================ */

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

body {
  margin: 0;
  background: var(--color-gray-bg);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── La barre ─────────────────────────────────────────────────────────────── */
.tete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-gray-border);
}
.tete__marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.tete__marque img { height: 30px; width: auto; }
.tete__marque span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tete__marque b {
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-10);
  border-radius: 999px;
  padding: 2px 8px;
}
.tete__action {
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  border: 1px solid var(--color-gray-border);
  border-radius: 999px;
  padding: 8px 16px;
  transition: border-color .2s ease, color .2s ease;
}
.tete__action:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Sur un téléphone, le logo, le nom du module et le bouton ne tiennent pas ensemble : le
   nom cède, comme il le fait dans le générateur lui-même. Le logo suffit à dire d'où l'on
   vient, et le bouton doit rester entier. */
@media (max-width: 520px) {
  .tete { padding: 10px 14px; gap: 10px; }
  .tete__marque span { display: none; }
  .tete__marque img { height: 26px; }
  .tete__action { font-size: .82rem; padding: 7px 13px; }
}

/* ── Le corps ─────────────────────────────────────────────────────────────── */
.page { max-width: 46rem; margin: 0 auto; padding: 48px 20px 80px; }

/* Le contour du navigateur suffit rarement à se voir sur un fond clair : celui qui navigue
   au clavier doit toujours savoir où il est. */
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Le chemin, la date de vérification et le sommaire ────────────────────── */

/* Le fil d'Ariane sert d'abord au lecteur qui arrive d'une recherche et ne sait pas
   encore où il a atterri ; il donne accessoirement à Google un chemin lisible à
   afficher sous le lien, à la place de l'adresse. */
.chemin { font-size: .82rem; color: var(--color-gray-text); margin: 0 0 18px; }
.chemin a { text-decoration: none; }
.chemin a:hover { text-decoration: underline; }
.chemin span[aria-hidden] { margin: 0 6px; opacity: .5; }

/* La date est notre principal argument contre les modèles Word qui circulent depuis
   2010 : elle se voit sous le titre, pas en pied de page. */
.verifie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-gray-text);
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  margin: 0 0 22px;
}
/* Le point vert dit d'un coup d'œil que la page est tenue à jour, ce qui est notre écart
   avec les modèles Word figés depuis 2010. */
.verifie::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* Sur cinq mille mots, personne ne lit tout : le sommaire donne au lecteur le moyen
   d'aller droit à sa question, et à Google des ancres à proposer sous le résultat. */
.sommaire {
  border-left: 3px solid var(--color-primary-10);
  padding: 2px 0 2px 18px;
  margin: 0 0 40px;
}
.sommaire__titre {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-gray-text);
  margin: 0 0 10px;
}
.sommaire ol { margin: 0; padding-left: 18px; font-size: .95rem; }
.sommaire li { margin-bottom: 7px; }
.sommaire a { color: var(--color-dark); text-decoration: none; }
.sommaire a:hover { color: var(--color-primary); text-decoration: underline; }

/* Un titre visé par une ancre ne doit pas se coller au bord haut de la fenêtre. */
h2[id] { scroll-margin-top: 80px; }

h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.chapo { font-size: 1.15rem; line-height: 1.6; color: var(--color-gray-text); margin: 0 0 32px; }

h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  text-wrap: balance;
}
p { margin: 0 0 16px; }
a { color: var(--color-primary); }

/* ── Les appels à l'action, en début et en fin d'article ──────────────────── */
.appel {
  background: linear-gradient(150deg, rgb(255 0 55 / .07), rgb(242 179 39 / .04));
  border: 1px solid var(--color-primary-10);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 36px;
}
.appel p { margin: 0 0 14px; font-size: .98rem; }
.appel--fin { margin: 48px 0 0; }
.bouton {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bouton:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgb(255 0 55 / .5); }
.lien { margin-left: 14px; font-weight: 600; font-size: .92rem; }

/* ── L'arrêté composé par le moteur ───────────────────────────────────────── */
.acte { margin: 40px 0; padding: 0; }
.acte__legende {
  font-size: .82rem;
  color: var(--color-gray-text);
  margin-bottom: 10px;
  padding-left: 2px;
}
.acte__papier {
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: 14px;
  padding: 34px 38px;
  font-family: 'Tinos', 'Times New Roman', Times, serif;
  font-size: .92rem;
  line-height: 1.55;
  box-shadow: var(--shadow-card);
}
/* Comme dans le produit : justifié quand la colonne le permet, aligné à gauche sur un
   téléphone, où la justification creuse des trous entre les mots. */
.acte__papier p { margin: 0 0 8px; text-align: left; }
@media (min-width: 640px) {
  .acte__papier p { text-align: justify; }
}
.acte__entete { text-align: center; font-size: .82rem; margin-bottom: 2px; }
.acte__entete--nom { font-weight: 700; font-size: .95rem; }
.acte__filet { border: 0; border-top: 2px solid var(--color-dark); margin: 12px 0 16px; }
.acte__titre { text-align: center; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; margin-bottom: 16px; }
.acte__vu { padding-left: 1.7rem; text-indent: -1.7rem; }
.acte__arrete { text-align: center; font-weight: 700; letter-spacing: .2em; margin: 18px 0; }
.acte__article { margin-bottom: 12px; }
.acte__signature { text-align: right; margin-top: 22px; }

/* ── Les questions ────────────────────────────────────────────────────────── */
details {
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: 14px;
  padding: 0 20px;
  margin-bottom: 10px;
}
summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "⌄"; float: right; color: var(--color-gray-text); }
details[open] summary::after { content: "⌃"; }
details p { padding-bottom: 18px; margin: 0; color: var(--color-gray-text); }

/* ── Le maillage et le pied ───────────────────────────────────────────────── */
.voisines { margin-top: 48px; border-top: 1px solid var(--color-gray-border); padding-top: 24px; }
.voisines h2 { margin-top: 0; font-size: 1.05rem; }
.voisines ul { margin: 0; padding-left: 20px; }
.voisines li { margin-bottom: 8px; }

.pied {
  border-top: 1px solid var(--color-gray-border);
  background: #fff;
  padding: 28px 20px;
  text-align: center;
  font-size: .85rem;
  color: var(--color-gray-text);
}
.pied p { margin: 0 0 8px; }