/* ============================================================
   Paddoco : feuille de style
   Palette : encre #141210 · or #C08F35 · ivoire #F5EFE4 · cuir #5C4633
   Titres : Cormorant Garamond · Corps : Inter
   ============================================================ */

/* ---------- Les polices, servies depuis ce site ----------
   ELLES VENAIENT DE CHEZ GOOGLE, ELLES N'EN VIENNENT PLUS. Trois raisons, dans
   l'ordre où elles comptent :

   1. Un site qui appelle `fonts.googleapis.com` envoie l'adresse IP de chaque
      visiteur à un tiers, sans son accord. C'est ce qu'un tribunal allemand a
      jugé en 2022, et cela reste vrai ici. Notre page de confidentialité promet
      qu'aucun tiers ne suit le visiteur : cette promesse coûtait deux lignes de
      `<link>` à tenir vraiment, pas une note de bas de page.
   2. Deux hôtes de moins à joindre, c'est deux résolutions DNS et deux
      poignées de main TLS de moins avant le premier titre affiché.
   3. La politique de sécurité du fichier `_headers` perd deux exceptions.

   CE SONT DES POLICES VARIABLES, et c'est ce qui rend l'opération légère : un
   SEUL fichier par famille et par style couvre toutes les graisses. Google en
   servait déjà un seul, en le déclarant trois fois. Vérifié plutôt que supposé :
   les trois URL de Cormorant 500, 600 et 700 étaient le MÊME fichier, au même
   md5. D'où `font-weight: 300 700` : une plage, pas une valeur.

   `latin` suffit au français, œ et Œ compris (U+0152). `latin-ext` ne se
   télécharge QUE si un caractère de sa plage s'affiche vraiment, grâce à
   `unicode-range` : un nom d'écurie d'Europe centrale ne coûte rien à ceux qui
   ne le croisent pas.

   `font-display: swap` affiche le texte tout de suite dans la police de repli,
   puis l'échange. Le contraire (`block`) laisse trois secondes de page blanche.

   Licences SIL OFL 1.1, dans `assets/fonts/`. Elles doivent y rester. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italique-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italique-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-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;
}

/* ---------- Reset & variables ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --encre: #141210;
  --encre-2: #1C1915;          /* cartes, surfaces */
  --encre-3: #25211B;          /* survols, champs */
  --or: #C08F35;
  --or-clair: #DDB267;
  --or-sombre: #9A7128;
  --ivoire: #F5EFE4;
  --ivoire-doux: rgba(245, 239, 228, .74);
  --ivoire-faible: rgba(245, 239, 228, .52);
  --cuir: #5C4633;
  --ligne: rgba(192, 143, 53, .22);
  --ligne-forte: rgba(192, 143, 53, .45);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Source Sans 3", system-ui, sans-serif;
  --largeur: 72rem;
  --rayon: .9rem;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--encre);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--ivoire);
}

h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
h3 { font-size: 1.42rem; }

p { color: var(--ivoire-doux); }

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

/* Accessibilité : focus toujours visible */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: .25rem;
}

/* Lien d'évitement */
.lien-evitement {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: .6rem 1.1rem;
  background: var(--or);
  color: var(--encre);
  font-weight: 600;
  border-radius: .4rem;
  text-decoration: none;
  transition: top .2s ease;
}
.lien-evitement:focus { top: .8rem; }

/* ---------- Utilitaires ---------- */
.conteneur {
  width: min(var(--largeur), 100% - 2.5rem);
  margin-inline: auto;
}

.sur-titre {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1rem;
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); scroll-margin-top: 5rem; }

.section__tete { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section__intro { margin-top: 1rem; font-size: 1.1rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.7rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: .55rem;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.bouton--or { background: var(--or); color: var(--encre); }
.bouton--or:hover { background: var(--or-clair); }
.bouton--contour { border-color: var(--ligne-forte); color: var(--ivoire); }
.bouton--contour:hover { border-color: var(--or); color: var(--or-clair); }
.bouton--petit { padding: .55rem 1.2rem; font-size: .95rem; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.entete.defile {
  background: rgba(20, 18, 16, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--ligne);
}
.entete__interieur {
  width: min(var(--largeur), 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: 1rem;
}
.entete__logo { width: 9.5rem; height: auto; }

/* Cinq entrées depuis l'ajout du « parti pris » : l'écart passe de 1,8 à 1,4 rem
   pour que la rangée tienne encore à côté du logotype jusqu'au repli mobile. */
.entete__nav { display: flex; align-items: center; gap: 1.4rem; }
.entete__nav a:not(.bouton) {
  color: var(--ivoire-doux);
  text-decoration: none;
  font-size: .98rem;
  font-weight: 500;
  transition: color .2s ease;
}
.entete__nav a:not(.bouton):hover { color: var(--or-clair); }

/* Bouton menu mobile */
.entete__burger {
  display: none;
  flex-direction: column;
  gap: .32rem;
  padding: .6rem;
  background: none;
  border: 1px solid var(--ligne);
  border-radius: .5rem;
  cursor: pointer;
}
.entete__burger span {
  width: 1.35rem; height: 2px;
  background: var(--ivoire);
  transition: transform .25s ease, opacity .25s ease;
}
.entete__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.45rem) rotate(45deg); }
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.45rem) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 4rem;
  overflow: hidden;
}
.hero__halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(192, 143, 53, .14), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(92, 70, 51, .18), transparent 70%);
  pointer-events: none;
}
.hero__interieur { position: relative; max-width: 52rem; }
.hero__blason {
  width: clamp(9.5rem, 24vw, 15rem);
  margin-inline: auto;
  margin-bottom: 2.2rem;
  filter: drop-shadow(0 0 2.6rem rgba(192, 143, 53, .35));
  animation: apparition-blason 1.4s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__sur-titre { margin-bottom: 1.2rem; animation: montee .9s .5s ease both; }
.hero__titre {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  animation: montee .9s .65s ease both;
}
.hero__sous-titre {
  max-width: 38rem;
  margin: 1.4rem auto 0;
  font-size: 1.14rem;
  animation: montee .9s .8s ease both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: 2.4rem;
  animation: montee .9s .95s ease both;
}
.hero__boutiques { margin-top: 2.1rem; animation: montee .9s 1.1s ease both; }

/* ---------- Badges App Store / Google Play ---------- */
.boutiques__legende {
  font-size: .92rem;
  color: var(--ivoire-faible);
  margin-bottom: .8rem;
}
.boutiques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .8rem;
}
.boutiques--gauche { justify-content: flex-start; }
.boutiques__lien {
  display: inline-block;
  line-height: 0;
  border-radius: .55rem;
  transition: transform .25s ease, filter .25s ease;
}
.boutiques__lien img { height: 2.6rem; width: auto; }
.boutiques__lien:hover { transform: translateY(-2px); filter: brightness(1.14); }
.rejoindre__boutiques { margin-top: 2.2rem; }

/* LE BOUTON « SUR ORDINATEUR », À CÔTÉ DES DEUX BADGES.
   Il doit se lire comme un troisième badge, sans en être un : les badges de
   boutique sont des images imposées par Apple et Google, dont la forme ne se
   discute pas. Celui-ci est du texte, donc il se traduit, se lit à la voix et
   ne pixellise jamais. Sa HAUTEUR est calée sur celle des badges (2,6 rem) et
   son rayon sur le leur, sinon la rangée fait des marches d'escalier.
   C'est aussi le seul des trois qui mène réellement quelque part aujourd'hui. */
.boutiques__ordi {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 2.6rem;
  padding: 0 .95rem;
  border: 1px solid var(--ligne-forte);
  border-radius: .55rem;
  background: var(--encre-2);
  color: var(--ivoire);
  /* Sans cette ligne, les deux textes du bouton sont SOULIGNÉS : c'est un lien,
     et les deux badges d'à côté ne le sont pas parce qu'ils ne contiennent
     qu'une image. La rangée de trois avait donc un intrus. */
  text-decoration: none;
  line-height: 1.1;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.boutiques__ordi:hover,
.boutiques__ordi:focus-visible {
  transform: translateY(-2px);
  border-color: var(--or);
  background: var(--encre-3);
}
.boutiques__ordi svg { color: var(--or); flex: none; }
.boutiques__ordi-texte { display: flex; flex-direction: column; text-align: left; }
/* La petite ligne du dessus, comme le « Télécharger dans » des badges. */
.boutiques__ordi-sur {
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivoire-faible);
}
.boutiques__ordi-nom {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.hero__fleche {
  position: absolute;
  bottom: 1.6rem;
  color: var(--ivoire-faible);
  transition: color .2s ease;
  animation: montee .9s 1.3s ease both;
}
.hero__fleche:hover { color: var(--or); }

@keyframes apparition-blason {
  from { opacity: 0; transform: translateY(1.2rem) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes montee {
  from { opacity: 0; transform: translateY(.9rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Grilles génériques deux colonnes ---------- */
.constat__grille,
.equi-mamour__grille,
.rejoindre__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.constat__texte p + p,
.equi-mamour__texte p + p { margin-top: 1.1rem; }
.constat__texte h2,
.equi-mamour__texte h2 { margin-bottom: 1.3rem; }

/* Cadre photo premium : double filet or discret */
.cadre-photo {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: .55rem;
  background: var(--encre-2);
}
.cadre-photo img {
  border-radius: calc(var(--rayon) - .35rem);
  width: 100%;
  object-fit: cover;
}

/* ---------- Fil de publications (constat) ---------- */
.cadre-fil {
  display: grid;
  gap: 1rem;
  max-width: 26rem;
  margin-inline: auto;
}
.pub {
  background: var(--encre-2);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1rem 1.1rem 1.05rem;
  transition: border-color .3s ease;
}
.pub:hover { border-color: var(--ligne-forte); }
.pub__tete {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .8rem;
}
.pub__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--or);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
}
.pub__avatar--cuir { background: var(--cuir); color: var(--ivoire); }
.pub__auteur {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ivoire);
  line-height: 1.3;
}
.pub__auteur em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: .82rem;
  color: var(--ivoire-faible);
}
.pub__date {
  margin-left: auto;
  font-size: .8rem;
  color: var(--ivoire-faible);
  white-space: nowrap;
}
.pub__photo img {
  width: 100%;
  border-radius: .55rem;
  aspect-ratio: 1;
  object-fit: cover;
}
.pub__legende { margin-top: .7rem; font-size: .95rem; color: var(--ivoire-doux); }
.pub__texte { font-size: .95rem; color: var(--ivoire-doux); }
.pub__meta {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(192, 143, 53, .14);
  font-size: .8rem;
  color: var(--or);
}

/* ---------- Promesses ---------- */
.promesses { background: linear-gradient(180deg, transparent, rgba(28, 25, 21, .6) 18%, rgba(28, 25, 21, .6) 82%, transparent); }
.promesses__grille {
  display: grid;
  gap: 1.6rem;
}
.carte-promesse {
  background: var(--encre-2);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.carte-promesse:hover { border-color: var(--ligne-forte); transform: translateY(-.25rem); }
.carte-promesse__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.carte-promesse__corps { padding: 1.6rem 1.8rem 1.9rem; }
.carte-promesse__corps h3 { color: var(--or-clair); margin-bottom: .7rem; }

/* LES QUATRE ATOUTS SOUS CHAQUE PROMESSE. Le filet doré à gauche remplace la
   puce : une liste à puces rondes ressemble à un cahier des charges, un filet
   ressemble à une réponse. `list-style: none` retire la sémantique de liste
   pour les lecteurs d'écran de Safari, d'où le `role="list"` dans le HTML. */
.liste-atouts {
  list-style: none;
  margin-top: 1.2rem;
  display: grid;
  gap: .85rem;
}
.liste-atouts li {
  padding-left: .95rem;
  border-left: 2px solid var(--ligne-forte);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ivoire-doux);
  transition: border-color .3s ease;
}
.carte-promesse:hover .liste-atouts li { border-left-color: var(--or); }
.liste-atouts strong { color: var(--ivoire); font-weight: 600; }

/* ---------- Le parti pris : ce que Paddoco refuse ---------- */
.parti-pris__grille {
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.refus {
  position: relative;
  padding: 1.6rem 1.6rem 1.7rem;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: linear-gradient(150deg, rgba(192, 143, 53, .07), transparent 60%), var(--encre-2);
  transition: border-color .3s ease, transform .3s ease;
}
.refus:hover { border-color: var(--ligne-forte); transform: translateY(-.2rem); }
.refus__icone {
  display: inline-flex;
  color: var(--or);
  margin-bottom: .9rem;
}
.refus__icone svg { width: 1.85rem; height: 1.85rem; }
/* Le titre du refus se lit en serif : c'est une affirmation, pas une étiquette. */
.refus h3 { font-size: 1.34rem; color: var(--ivoire); margin-bottom: .55rem; }
.refus p { font-size: .97rem; line-height: 1.6; }
.refus strong { color: var(--or-clair); font-weight: 600; }
.refus em { font-style: italic; color: var(--ivoire); }

/* ---------- Fonctionnalités ---------- */
.grille-fonctions {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
.fonction {
  background: var(--encre-2);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.5rem 1.5rem 1.6rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.fonction:hover { border-color: var(--ligne-forte); background: var(--encre-3); }
.fonction__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--ligne-forte);
  border-radius: .7rem;
  color: var(--or);
  background: rgba(192, 143, 53, .08);
  margin-bottom: 1.1rem;
}
.fonction__icone svg { width: 1.5rem; height: 1.5rem; }
.fonction h3 { font-size: 1.28rem; margin-bottom: .45rem; }
.fonction p { font-size: .98rem; line-height: 1.6; }

/* ---------- Aperçu de l'application ---------- */
.apercu__duo { display: grid; gap: 1.6rem; }

/* ---------- Signature Equi Mamour ---------- */
.equi-mamour__signature {
  margin-top: 1.6rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--or);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--or-clair);
}


.cadre-app {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--encre-2);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45);
}
.cadre-app__barre {
  display: flex;
  gap: .45rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ligne);
  background: var(--encre-3);
}
.cadre-app__barre span {
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--cuir);
}
.cadre-app__barre span:first-child { background: var(--or-sombre); }
.cadre-app img { width: 100%; }
.cadre-app figcaption {
  padding: 1rem 1.4rem 1.2rem;
  font-size: .95rem;
  color: var(--ivoire-faible);
  border-top: 1px solid var(--ligne);
}

/* ---------- Sécurité ---------- */
.securite__grille { display: grid; gap: 1.3rem; }
.carte-secu {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.8rem 1.7rem;
  background: linear-gradient(160deg, var(--encre-2), transparent);
}
.carte-secu__icone {
  display: inline-flex;
  width: 2.6rem; height: 2.6rem;
  align-items: center;
  justify-content: center;
  color: var(--or);
  margin-bottom: 1rem;
}
.carte-secu__icone svg { width: 2rem; height: 2rem; }
.carte-secu h3 { color: var(--or-clair); margin-bottom: .6rem; }

/* ---------- Rejoindre ---------- */
.rejoindre { border-top: 1px solid var(--ligne); }
.rejoindre__texte h2 { margin-bottom: 1.2rem; }
.rejoindre__aside {
  margin-top: 1.4rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--or);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--or-clair);
}

.formulaire {
  background: var(--encre-2);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  display: grid;
  gap: 1.1rem;
}
.formulaire__ligne { display: grid; gap: 1.1rem; }
.champ { display: grid; gap: .4rem; }
.champ label { font-size: .92rem; font-weight: 600; color: var(--ivoire); }
.champ__facultatif { font-weight: 400; color: var(--ivoire-faible); }
.champ input,
.champ textarea {
  font: inherit;
  color: var(--ivoire);
  background: var(--encre-3);
  border: 1px solid var(--ligne);
  border-radius: .5rem;
  padding: .75rem .95rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.champ input::placeholder,
.champ textarea::placeholder { color: var(--ivoire-faible); }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--or);
  background: #29241D;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.formulaire .bouton { justify-self: start; }
.formulaire__note { font-size: .88rem; color: var(--ivoire-faible); }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--ligne);
  padding-block: 3rem 2.4rem;
  background: #100E0C;
}
.pied__interieur {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.pied__logo { width: 10.5rem; opacity: .92; }
.pied__devise {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ivoire-doux);
}
.pied__nav { display: flex; gap: 1.6rem; }
.pied__nav a {
  color: var(--ivoire-faible);
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s ease;
}
.pied__nav a:hover { color: var(--or-clair); }
.pied__copyright { font-size: .88rem; color: var(--ivoire-faible); }

/* ---------- La page « bientôt sur mobile » ----------
   Elle n'a ni en-tête fixe ni script : c'est une page de passage, atteinte
   depuis un badge de boutique, et tout ce qu'elle doit faire tient sans une
   ligne de JavaScript. Le seul bloc qui compte est le bouton doré du haut, qui
   mène à l'application. Le reste explique pourquoi il faut attendre le reste. */
.bientot {
  max-width: 52rem;
  padding: 4.5rem 0 5rem;
  text-align: center;
}
.bientot__retour {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--ivoire-faible);
  text-decoration: none;
  font-size: .95rem;
  transition: color .2s ease;
}
.bientot__retour:hover { color: var(--or-clair); }
.bientot__blason {
  width: clamp(7rem, 18vw, 10rem);
  margin: 0 auto 1.8rem;
  filter: drop-shadow(0 0 2.2rem rgba(192, 143, 53, .32));
}
.bientot__titre { font-size: clamp(2.1rem, 5.5vw, 3.4rem); font-weight: 700; }
.bientot__chapeau {
  max-width: 40rem;
  margin: 1.3rem auto 0;
  font-size: 1.1rem;
}
.bientot__action {
  margin-top: 2.4rem;
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon);
  background: linear-gradient(160deg, rgba(192, 143, 53, .1), transparent 65%), var(--encre-2);
}
.bientot__precision {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: .95rem;
}
.bientot__grille {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.4rem;
  text-align: left;
}
.bientot__carte {
  padding: 1.7rem 1.7rem 1.8rem;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--encre-2);
}
.bientot__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--ligne-forte);
  border-radius: .7rem;
  color: var(--or);
  background: rgba(192, 143, 53, .08);
  margin-bottom: 1rem;
}
.bientot__icone svg { width: 1.5rem; height: 1.5rem; }
.bientot__carte h2 { font-size: 1.5rem; margin-bottom: .7rem; }
.bientot__carte p + p { margin-top: .85rem; }
.bientot__carte p { font-size: .98rem; line-height: 1.6; }
.bientot__carte a:not(.bouton) { color: var(--or-clair); }
.bientot__carte .bouton { margin-top: .4rem; }
/* L'appel aux testeurs : le seul paragraphe de la page qui demande quelque
   chose, donc le seul qui a le droit d'attirer l'œil. */
.bientot__appel {
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--or);
  background: rgba(192, 143, 53, .07);
  border-radius: 0 .5rem .5rem 0;
}
.bientot__appel strong { color: var(--or-clair); }
.bientot__note { font-size: .88rem; color: var(--ivoire-faible); }
.bientot__prevenir {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--ligne);
}
.bientot__prevenir h2 { font-size: 1.7rem; margin-bottom: .7rem; }
.bientot__prevenir p + p { margin-top: 1.2rem; }
.bientot__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne);
}
.bientot__pied a {
  color: var(--ivoire-faible);
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s ease;
}
.bientot__pied a:hover { color: var(--or-clair); }

@media (min-width: 48rem) {
  /* `align-items: start` et pas la hauteur commune par défaut : la carte Android
     est deux fois plus longue que celle d'iOS, et une carte étirée pour rien
     laisse un grand vide sous son dernier mot, qu'on lit comme un oubli. */
  .bientot__grille { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- Apparition au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--delai, 0s);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive : tablette et au-delà ---------- */
@media (min-width: 44rem) {
  .grille-fonctions { grid-template-columns: repeat(2, 1fr); }
  .parti-pris__grille { grid-template-columns: repeat(2, 1fr); }
  .securite__grille { grid-template-columns: repeat(3, 1fr); }
  .formulaire__ligne { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62rem) {
  .grille-fonctions { grid-template-columns: repeat(3, 1fr); }
  /* QUATRE DE FRONT, ET SUR UNE SEULE LIGNE : les quatre refus se lisent
     ensemble ou ne veulent rien dire. En deux lignes de deux, on croit qu'il y
     en a d'autres plus bas. */
  .parti-pris__grille { grid-template-columns: repeat(4, 1fr); }
  .promesses__grille { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .constat__grille { grid-template-columns: 1.05fr .95fr; }
  .equi-mamour__grille { grid-template-columns: 1.1fr .9fr; }
  .rejoindre__grille { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .apercu__duo { grid-template-columns: 1.08fr .92fr; }
}

/* ---------- Mobile : navigation ---------- */
@media (max-width: 52rem) {
  .entete__burger { display: flex; }
  .entete__nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 1.25rem 1.1rem;
    background: rgba(16, 14, 12, .97);
    border-bottom: 1px solid var(--ligne);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .entete__nav.ouvert { transform: none; opacity: 1; visibility: visible; }
  .entete__nav a:not(.bouton) { padding: .85rem .2rem; border-bottom: 1px solid rgba(192, 143, 53, .12); }
  .entete__nav .bouton { margin-top: .9rem; }
}

/* ---------- Respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* LE DÉLAI COMPTE AUTANT QUE LA DURÉE, et il manquait. Les six blocs du hero
       montent en cascade grâce à `animation-delay`, jusqu'à 1,3 s pour la
       flèche du bas. Sans cette ligne, quelqu'un qui a demandé moins
       d'animation gardait le DÉLAI en entier avec `animation-fill-mode: both`,
       donc l'écran restait vide plus d'une seconde avant de tout afficher d'un
       coup : exactement ce qu'il voulait éviter. Trouvé au banc, en constatant
       que les badges de boutique n'étaient sur aucune photo. */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}