/* ════════════════════════════════════════════════════════════════════════
   OGMO — LANDING PUBLIQUE (decouvrir.ogmo.fr)
   ────────────────────────────────────────────────────────────────────────
   Feuille unique, servie par Netlify. Aucun framework, aucune dépendance,
   aucune ressource distante : la CSP de `_headers` pose `default-src 'none'`
   et n'ouvre que `img-src`, `style-src` et l'`action` du formulaire.

   ⚠️ CHARTE — les valeurs viennent de `apps/web/tailwind.config.ts`, qui fait
   foi. La crème est `#F4ECE2` et NON `#F6F3EE` : B4 a tranché en faveur du
   logo, dont les SVG peignent leur onde avec cette valeur. Les deux se
   ressemblent trop pour qu'un écart se voie autrement qu'en les posant côte
   à côte — ce que cette page fait, logo sur fond crème.

   ⚠️ L'AMBRE (#E8A33D) N'APPARAÎT PAS ICI, ET C'EST LA RÈGLE : il ne doit
   jamais habiller une action. Le registre « on peut agir » appartient au
   terracotta, et le partager lui ferait perdre ce qui le rend lisible d'un
   coup d'œil. Aucun bouton, aucun lien, aucun état actif en ambre.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --petrole: #1c3a3c;
  --terracotta: #c75d3c;
  --creme: #f4ece2;
  --blanc: #ffffff;

  /* Pétrole éclairci pour le texte secondaire sur fond clair, et crème
     assombrie pour le secondaire sur fond sombre. Ce sont des opacités de la
     couleur de charte, jamais de nouvelles teintes. */
  --texte-doux: rgba(28, 58, 60, 0.78);
  --texte-doux-inverse: rgba(244, 236, 226, 0.82);
  --filet: rgba(28, 58, 60, 0.14);

  --prose: 42rem;
  --large: 68rem;

  /* ⚠️ JETONS QUI BASCULENT AVEC LE FOND DE SECTION. Ils sont redéfinis dans
     `.hero`, `.section--sombre` et `.footer` — c'est ce qui permet d'alterner
     pétrole et crème sans dupliquer une seule règle de composant. Les définir
     ici, sur `:root`, donne la version « fond clair » par défaut : une section
     qui oublierait de basculer sort lisible, jamais illisible. */
  --texte-2: var(--texte-doux);
  --carte-fond: var(--blanc);
  --carte-bord: rgba(28, 58, 60, 0.12);
  --filet-local: var(--filet);
}

/* ⚠️ ALTERNANCE PÉTROLE / CRÈME — LES TROIS CONTEXTES SOMBRES.
   Contrastes calculés, pas estimés (`landing-check.py` les recalcule) :
   crème sur pétrole 10,4:1 · secondaire 7,6:1 · sur crème, pétrole 10,4:1 et
   secondaire 5,6:1. Les quatre passent AA, les deux principaux passent AAA. */
.hero,
.section--sombre,
.footer {
  background: var(--petrole);
  color: var(--creme);
  --texte-2: var(--texte-doux-inverse);
  --carte-fond: rgba(244, 236, 226, 0.06);
  --carte-bord: rgba(244, 236, 226, 0.2);
  --filet-local: rgba(244, 236, 226, 0.2);
}

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

html {
  scroll-behavior: smooth;
}

/* ⚠️ Le seul mouvement de la page est ce défilement vers l'ancre. Il se coupe
   pour qui a demandé moins d'animations — la règle vaut même quand il n'y a
   presque rien à couper. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--petrole);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: inherit;
}

/* ── Gabarit ─────────────────────────────────────────────────────────── */

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

.wrap--prose {
  max-width: calc(var(--prose) + 3rem);
}

/* Borne la MESURE du texte dans une section en `wrap` large : une capture a
   besoin de toute la largeur, un paragraphe non — au-delà de ~75 caractères
   par ligne, l'œil perd le début de la ligne suivante. */
.chapeau {
  max-width: var(--prose);
}

.chapeau--apres {
  margin-top: 2rem;
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

/* ── Titres et prose ─────────────────────────────────────────────────── */

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1.15rem;
}

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

/* Phrase de bascule d'une section : ce qu'on retient si on ne lit que ça. */
.lead {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.75rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--terracotta);
}

/* ── Hero ────────────────────────────────────────────────────────────── */

/* ⚠️ PADDINGS RESSERRÉS PAR RAPPORT AU RESTE DE LA PAGE, ET C'EST MESURÉ. Le
   hero doit tenir dans une fenêtre de portable 13 pouces (≈ 690 px utiles) :
   chaque respiration prise ici sort le bouton de l'écran. Toute retouche de
   ces valeurs se rejoue avec `apps/landing-outils/hauteur_hero.py`. */
.hero {
  background: var(--petrole);
  color: var(--creme);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* ⚠️ FOND PÉTROLE, PAS BLANC. Les captures sont des PNG dont le fond vaut
   EXACTEMENT #1C3A3C : sur une section sombre elles se fondent dans la page,
   ce qui est l'effet recherché — un extrait, pas une vignette posée. Un fond
   blanc produirait en plus un flash clair pendant le chargement. */
.ecran {
  display: block;
  width: 100%;
  height: auto;
  background: var(--petrole);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* ⚠️ SEUIL À 64rem. En dessous, deux colonnes réduiraient le visuel à une
   vignette ET écraseraient le titre sur quatre lignes : les deux moitiés
   perdent en même temps. Empilé, chacune garde sa pleine largeur. */
@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.hero__texte {
  min-width: 0;
}

.hero__logo {
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ⚠️ 20ch ET NON 16ch : à 16ch le titre tombe sur TROIS lignes, soit 60 px de
   plus — et ces 60 px sont précisément ce qui faisait sortir le bouton de
   l'écran sur un portable 13 pouces. */
.hero h1 {
  max-width: 20ch;
}

.hero__sub {
  max-width: 46rem;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--texte-doux-inverse);
}

.hero__cta {
  margin-top: 2.25rem;
}

/* ══ VISUEL DU HERO ═══════════════════════════════════════════════════════
   ⚠️⚠️ DEUX CRITÈRES QUI TIRENT EN SENS CONTRAIRE, et le second est le plus
   fort. ① La LISIBILITÉ croît avec la largeur d'affichage (le texte rendu vaut
   « taille dans la capture × largeur affichée ÷ largeur de l'image »).
   ② La TENUE DANS L'ÉCRAN, elle, décroît avec cette même largeur.

   Une version optimisant ① a été livrée puis retirée : bloc en pleine largeur,
   téléphone à côté, texte à 13 px — et un hero de 905 px qui DÉBORDAIT sur
   tous les formats, 1920×1080 compris. Un premier écran qui ne tient pas dans
   un écran n'est plus un premier écran.

   ⚠️ LE HERO N'EST DONC PAS L'ENDROIT DE LA DÉMONSTRATION. Il attire l'œil ;
   §3 démontre, à l'échelle 1:1. Le bloc y est réduit à TROIS actions et le
   téléphone recouvre son coin — assumé.
   ⚠️ Toute retouche ici se rejoue avec `apps/landing-outils/hauteur_hero.py`.
   ══════════════════════════════════════════════════════════════════════════ */
.hero__visuel {
  position: relative;
  /* Réserve la place du téléphone, qui déborde sous le bloc. */
  padding-bottom: 9%;
}

.hero__visuel .ecran--bloc {
  max-width: 100%;
  margin: 0;
  border-radius: 6px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 24px 48px rgba(0, 0, 0, 0.32);
}

/* ⚠️ DÉCORATIF, ET ASSUMÉ COMME TEL. Mesuré : il faudrait 521 px d'affichage
   pour que son texte atteigne 11 px — soit la moitié de la page occupée par un
   téléphone. Il dit le GESTE (ça se dicte sur le terrain) ; le bloc dit le
   RÉSULTAT. Ne pas sacrifier la composition à sa lisibilité. */
.ecran--telephone {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 26%;
  border-radius: 10px;
  border: 3px solid var(--petrole);
  outline: 1px solid rgba(244, 236, 226, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

/* ── La démonstration en quatre temps ───────────────────────────────────
   ⚠️ LES CAPTURES DE BLOC SONT PLAFONNÉES À LEUR LARGEUR NATIVE (730 px) et
   jamais étirées. C'est ce qui les garde à l'échelle 1:1, donc LISIBLES : la
   démonstration ne vaut que si le lecteur peut lire l'écran. Les agrandir les
   flouterait, les réduire rendrait le texte illisible — et une capture qu'on
   ne peut pas lire ne prouve rien. */
.demo {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.demo__etape {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

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

  /* Une étape sur deux inverse texte et image : l'œil redescend en zigzag au
     lieu de longer une colonne, et chaque étape se détache de la précédente. */
  .demo__etape:nth-child(even) .demo__texte {
    order: 2;
  }
}

.demo__texte h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.demo__texte p {
  color: var(--texte-2);
  margin: 0;
  max-width: 34ch;
}

.ecran--bloc {
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
  border-radius: 4px;
}

/* ── Figures pleine largeur ─────────────────────────────────────────────
   Aucune bordure : le fond de la capture et celui de la section sont la même
   couleur, un liseré ne délimiterait qu'un rectangle arbitraire autour d'une
   image qui, elle, n'a pas de bord. */
.figure {
  margin: 2.5rem 0 0;
}

.figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  color: var(--texte-2);
  max-width: var(--prose);
}

/* ── Texte + capture téléphone côte à côte ──────────────────────────────── */
.duo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
}

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

.duo__texte h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.duo__texte p {
  color: var(--texte-2);
  margin: 0;
  max-width: 42ch;
}

.ecran--mobile-plat {
  width: 100%;
  max-width: 316px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(244, 236, 226, 0.18);
}

/* ── Bouton ──────────────────────────────────────────────────────────── */

/* ⚠️ 19 px / 700 N'EST PAS UN CHOIX ESTHÉTIQUE. Le blanc sur terracotta donne
   un contraste de 4,15:1 — sous le seuil WCAG AA du texte courant (4,5:1),
   mais au-dessus de celui du GRAND texte (3:1), qui commence à 18,66 px en
   gras. Réduire la taille ou le graisser moins ferait tomber le bouton
   principal de la page hors conformité, sans qu'aucun outil du projet ne le
   signale. ⚠️ Et on ne « corrige » pas en assombrissant le terracotta : ce
   serait faire mentir la charte partout ailleurs. */
.button {
  display: inline-block;
  background: var(--terracotta);
  color: var(--blanc);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.button:hover {
  background: #b04f31;
}

.button:focus-visible {
  outline: 3px solid var(--petrole);
  outline-offset: 3px;
}

/* Sur fond pétrole, le contour pétrole serait invisible. */
.hero .button:focus-visible {
  outline-color: var(--creme);
}

/* ── Cartes (§3 « Comment ça marche », §6 « n'est pas », §7 « Vos données ») ──
   ⚠️ UN SEUL COMPOSANT POUR LES TROIS SECTIONS. Elles portent chacune une
   liste de trois éléments, et trois grilles écrites séparément auraient
   divergé — c'est la leçon des cinq en-têtes de B4-1, transposée. La sémantique
   HTML reste propre à chacune (`ol` pour des étapes ordonnées, `dl` pour des
   définitions, `ul` pour des faits) : c'est la présentation qui est partagée,
   pas le sens.

   ⚠️ Les couleurs viennent de `--carte-fond` / `--carte-bord`, qui BASCULENT
   avec le fond de section. Aucune règle `.section--sombre .carte` : le jour où
   l'ordre des sections change, rien à corriger. */

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

@media (min-width: 52rem) {
  .cartes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.carte {
  background: var(--carte-fond);
  border: 1px solid var(--carte-bord);
  border-radius: 6px;
  padding: 1.5rem;
}

.carte h3,
.carte dt {
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.carte p,
.carte dd {
  margin: 0;
  color: var(--texte-2);
}

/* ⚠️ PASTILLE TERRACOTTA + TRAIT CRÈME, ET C'EST UN CHOIX DE CONTRASTE.
   Une icône terracotta posée à même le fond rend 3,5:1 sur crème mais
   seulement 2,9:1 sur pétrole — un trait de 1,75 px y disparaîtrait. La
   pastille inverse le problème : c'est elle qui porte la couleur, et le trait
   crème dessus tient 3,5:1 dans les DEUX sections. Un seul rendu partout.
   ⚠️ ET SURTOUT PAS D'AMBRE ICI, même si son contraste sur pétrole serait
   meilleur : il ne doit jamais s'installer à côté d'un registre d'action. */
.ico {
  display: block;
  width: 20px;
  height: 20px;
  padding: 8px;
  margin-bottom: 1rem;
  box-sizing: content-box;
  color: var(--creme);
  background: var(--terracotta);
  border-radius: 5px;
}

/* ── Figures pleine largeur ─────────────────────────────────────────────
   Aucune bordure : le fond de la capture et celui de la section sont la même
   couleur, un liseré ne délimiterait qu'un rectangle arbitraire autour d'une
   image qui, elle, n'a pas de bord. */
.figure {
  margin: 2.5rem 0 0;
}

.figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  color: var(--texte-2);
  max-width: var(--prose);
}

/* ── Texte + capture téléphone côte à côte ──────────────────────────────── */
.duo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
}

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

.duo__texte h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.duo__texte p {
  color: var(--texte-2);
  margin: 0;
  max-width: 42ch;
}

.ecran--mobile-plat {
  width: 100%;
  max-width: 316px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(244, 236, 226, 0.18);
}

/* ── Bouton ──────────────────────────────────────────────────────────── */

/* ⚠️ 19 px / 700 N'EST PAS UN CHOIX ESTHÉTIQUE. Le blanc sur terracotta donne
   un contraste de 4,15:1 — sous le seuil WCAG AA du texte courant (4,5:1),
   mais au-dessus de celui du GRAND texte (3:1), qui commence à 18,66 px en
   gras. Réduire la taille ou le graisser moins ferait tomber le bouton
   principal de la page hors conformité, sans qu'aucun outil du projet ne le
   signale. ⚠️ Et on ne « corrige » pas en assombrissant le terracotta : ce
   serait faire mentir la charte partout ailleurs. */
.button {
  display: inline-block;
  background: var(--terracotta);
  color: var(--blanc);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.button:hover {
  background: #b04f31;
}

.button:focus-visible {
  outline: 3px solid var(--petrole);
  outline-offset: 3px;
}

/* Sur fond pétrole, le contour pétrole serait invisible. */
.hero .button:focus-visible {
  outline-color: var(--creme);
}

/* ── Cartes (§3 « Comment ça marche », §6 « n'est pas », §7 « Vos données ») ──
   ⚠️ UN SEUL COMPOSANT POUR LES TROIS SECTIONS. Elles portent chacune une
   liste de trois éléments, et trois grilles écrites séparément auraient
   divergé — c'est la leçon des cinq en-têtes de B4-1, transposée. La sémantique
   HTML reste propre à chacune (`ol` pour des étapes ordonnées, `dl` pour des
   définitions, `ul` pour des faits) : c'est la présentation qui est partagée,
   pas le sens.

   ⚠️ Les couleurs viennent de `--carte-fond` / `--carte-bord`, qui BASCULENT
   avec le fond de section. Aucune règle `.section--sombre .carte` : le jour où
   l'ordre des sections change, rien à corriger. */

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

@media (min-width: 52rem) {
  .cartes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.carte {
  background: var(--carte-fond);
  border: 1px solid var(--carte-bord);
  border-radius: 6px;
  padding: 1.5rem;
}

.carte h3,
.carte dt {
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.carte p,
.carte dd {
  margin: 0;
  color: var(--texte-2);
}

/* ⚠️ PASTILLE TERRACOTTA + TRAIT CRÈME, ET C'EST UN CHOIX DE CONTRASTE.
   Une icône terracotta posée à même le fond rend 3,5:1 sur crème mais
   seulement 2,9:1 sur pétrole — un trait de 1,75 px y disparaîtrait. La
   pastille inverse le problème : c'est elle qui porte la couleur, et le trait
   crème dessus tient 3,5:1 dans les DEUX sections. Un seul rendu partout.
   ⚠️ ET SURTOUT PAS D'AMBRE ICI, même si son contraste sur pétrole serait
   meilleur : il ne doit jamais s'installer à côté d'un registre d'action. */
.ico {
  display: block;
  width: 20px;
  height: 20px;
  padding: 8px;
  margin-bottom: 1rem;
  box-sizing: content-box;
  color: var(--creme);
  background: var(--terracotta);
  border-radius: 5px;
}

/* ── Roadmap ─────────────────────────────────────────────────────────── */

/* Encadrée pour se lire comme une PERSPECTIVE et non comme une description du
   produit actuel — la distinction est portée par le texte (« ces briques ne
   sont pas encore là »), la mise en forme ne fait que ne pas la contredire. */
.roadmap {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--carte-fond);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 4px 4px 0;
}

.roadmap h3 {
  margin-bottom: 0.75rem;
}

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

/* ── Chiffres ────────────────────────────────────────────────────────── */

.figures {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--carte-fond);
  border: 1px solid var(--carte-bord);
  border-radius: 4px;
}

/* ── Formulaire ──────────────────────────────────────────────────────── */

.section--form {
  background: var(--petrole);
}

.card {
  background: var(--creme);
  border-radius: 6px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.form {
  margin: 1.75rem 0 1.5rem;
}

.field {
  display: block;
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.req,
.opt {
  font-weight: 400;
  color: var(--texte-doux);
}

.opt {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--petrole);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 0.7rem 0.85rem;
}

.field input::placeholder {
  color: rgba(28, 58, 60, 0.45);
}

.field input:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 1px;
}

/* ⚠️ LE PIÈGE ANTI-ROBOT — masqué SANS `display: none`. Une partie des robots
   ignore les champs en `display: none` ou `hidden`, et le piège cesserait
   alors de piéger. Il est donc sorti du flux et de l'écran, tout en restant un
   champ ordinaire pour qui lit le HTML. `tabindex="-1"` et `aria-hidden` (dans
   le HTML) le retirent du clavier et des lecteurs d'écran. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form__submit {
  margin: 0;
}

.legal {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--texte-doux);
  margin-bottom: 0.85rem;
}

.legal:last-child {
  margin-bottom: 0;
}

.legal a {
  color: var(--petrole);
}

/* ── Pied de page ────────────────────────────────────────────────────── */

.footer {
  background: var(--petrole);
  color: var(--texte-doux-inverse);
  padding: 3rem 0 3.5rem;
  border-top: 1px solid rgba(244, 236, 226, 0.14);
}

.footer__logo {
  display: block;
  margin-bottom: 1.25rem;
}

.footer__baseline {
  max-width: 34rem;
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  margin: 0;
}

.footer__links a {
  color: var(--creme);
}

.footer a:focus-visible {
  outline: 2px solid var(--creme);
  outline-offset: 2px;
}