/* ============================================================
   VIZ AGENCY — Feuille de style
   ------------------------------------------------------------
   Approche mobile-first : les styles de base ciblent ~380px,
   les media queries (min-width) élargissent ensuite.
   DA : éditorial luxe — fond de page crème pêche (#FCDEC0)
   quadrillé de lignes fines, tout le site resserré dans un
   cadre brun cacao profond. Titres serif italiques,
   CTA mono « [ … → ] », le mot-accent est en sable (#E5B299).
   Palette ColorHunt : #7D5A50 · #B4846C · #E5B299 · #FCDEC0.
   ============================================================ */

/* ------------------------------------------------------------
   0. Polices — AUTO-HÉBERGÉES
   ------------------------------------------------------------
   Elles étaient chargées depuis fonts.googleapis.com : l'adresse IP
   de chaque visiteur partait donc chez Google avant tout consentement,
   ce que la CNIL reproche (une IP est une donnée personnelle). Les
   fichiers sont maintenant servis depuis assets/polices/ : plus aucune
   requête vers un tiers au chargement, et une requête réseau de moins.
   Les trois familles sont sous licence libre (OFL / Apache), donc
   l'auto-hébergement est explicitement autorisé.
   Deux sous-ensembles par police : « latin » se télécharge toujours,
   « latin-ext » seulement si un glyphe étendu apparaît sur la page.
   Inter est une police VARIABLE : un seul fichier couvre 400 à 600,
   inutile d'en servir trois copies identiques.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/instrument-serif-400-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/instrument-serif-400-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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./assets/polices/inter-variable-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/space-mono-400-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/polices/space-mono-700-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/instrument-serif-400-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/instrument-serif-400-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: 400 600;
  font-display: swap;
  src: url('./assets/polices/inter-variable-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/polices/space-mono-400-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/polices/space-mono-700-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;
}

/* ------------------------------------------------------------
   1. Variables — palette, typo, rythme
   ------------------------------------------------------------ */
:root {
  /* Palette ColorHunt « Cacao & crème »
     crème pêche clair · cadre brun profond · accents sable + moka
     Les 4 tons donnés : #7D5A50 #B4846C #E5B299 #FCDEC0 ; les bruns
     très foncés du cadre sont des nuances assombries de cette famille
     (nécessaire pour un contraste AA du texte blanc/sable). */
  --fond:        #FCDEC0;  /* crème pêche : fond de page quadrillé */
  --vert:        #E5B299;  /* sable : accents + panneaux + CTA (nom conservé) */
  --vert-clair:  #EFC7AE;  /* état hover des CTA sable */
  --cocoa:       #7D5A50;  /* cacao : CTA du header, touches mi-ton */
  --mocha:       #B4846C;  /* moka : filets, quadrillage, secondaire */
  --sombre:      #46302A;  /* brun foncé : hero/process, texte sur clair */
  --sombre-2:    #2E1E19;  /* état hover des CTA sombres */
  --noir:        #3A2620;  /* brun très foncé : fond du cadre, footer, cartes */
  --blanc:       #FFFFFF;
  --texte-doux:  rgba(255, 255, 255, 0.80);   /* texte secondaire sur sombre */
  --trait:       rgba(180, 132, 108, 0.38);   /* filets moka sur sombre */
  --surface:     rgba(229, 178, 153, 0.08);   /* fond des cartes sable très dilué */

  /* Typographies */
  --font-display: "Instrument Serif", Georgia, serif;   /* grands titres */
  --font-mono:    "Space Mono", "Courier New", monospace; /* étiquettes, CTA */
  --font-corps:   "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Le cadre — resserré vers le centre */
  --marge-cadre: clamp(0.75rem, 3.5vw, 3rem); /* marge quadrillée visible */
  --rayon-cadre: clamp(12px, 2vw, 24px);
  --largeur-cadre: 70rem;                     /* largeur max du rectangle central */

  /* Rythme vertical & largeur de contenu */
  --section-pad: clamp(4rem, 10vw, 6.5rem);
  --container:   62rem;                       /* 992px max : contenu resserré */
  --gouttiere:   clamp(1.25rem, 4vw, 3rem);

  /* Micro-animations */
  --transition:  220ms cubic-bezier(0.33, 1, 0.68, 1);

  /* Hauteur du header (utilisée pour l'ancrage) */
  --header-h: 4.25rem;
}

/* ------------------------------------------------------------
   2. Reset minimal & base
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;                 /* défilement doux vers les ancres */
  scroll-padding-top: 1rem;                /* pas de header flottant à compenser */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-corps);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--blanc);
  /* Fond crème + quadrillage fin (lignes 1px cacao très diluées) */
  background-color: var(--fond);
  background-image:
    repeating-linear-gradient(0deg,  rgba(125, 90, 80, 0.16) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(125, 90, 80, 0.16) 0 1px, transparent 1px 28px);
  overflow-x: hidden;
}

/* --- Le cadre : rectangle sombre uni, centré sur le fond clair --- */
.cadre {
  width: min(100% - 2 * var(--marge-cadre), var(--largeur-cadre));
  margin-inline: auto;
  margin-block: var(--marge-cadre);
  background-color: var(--noir);
  border-radius: var(--rayon-cadre);
  overflow: clip;                          /* arrondit tout, sans casser le sticky */
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  padding: 0;
  list-style: none;
}

::selection {
  background-color: var(--vert);
  color: var(--sombre);
}

/* Focus clavier visible partout */
:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement (invisible tant qu'il n'a pas le focus) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--sombre);
  color: var(--vert);
  border-radius: 0 0 8px 8px;
}
.skip-link:focus {
  top: 0;
}

/* ------------------------------------------------------------
   3. Utilitaires — conteneur, sections, sur-titres
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: var(--section-pad);
}

/* Sur-titre de section : mono espacé, précédé d'un trait */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 7.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: clamp(2.25rem, 6vw, 3.75rem);
}

/* Mot accentué : en sable, sur le cadre sombre */
.accent {
  color: var(--vert);
}

/* ------------------------------------------------------------
   4. Apparition au fondu (pilotée par IntersectionObserver)
   ------------------------------------------------------------ */
/* État masqué UNIQUEMENT si le JS est actif (classe .js sur <html>).
   Sans JS, .reveal reste visible → la page n'est jamais blanche. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Léger décalage en cascade dans les grilles
   (le process a ses propres délais, plus marqués, définis §7bis) */
.offres__grid .reveal.visible:nth-child(2),
.realisations__grid .reveal.visible:nth-child(2) { transition-delay: 90ms; }
.offres__grid .reveal.visible:nth-child(3),
.realisations__grid .reveal.visible:nth-child(3) { transition-delay: 180ms; }
.realisations__grid .reveal.visible:nth-child(4) { transition-delay: 270ms; }
.realisations__grid .reveal.visible:nth-child(5) { transition-delay: 360ms; }

/* ------------------------------------------------------------
   5. Boutons « [ … → ] »
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;                        /* cible tactile confortable */
  padding: 0.85rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: transparent;
  color: var(--blanc);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

/* Crochets décoratifs autour du libellé */
.btn::before {
  content: "[";
  color: var(--vert);
  transition: transform var(--transition);
}
.btn::after {
  content: "]";
  color: var(--vert);
  transition: transform var(--transition);
}
.btn:hover::before { transform: translateX(-3px); }
.btn:hover::after  { transform: translateX(3px); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Bouton principal : plein sable, texte brun foncé */
.btn--primary {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--sombre);
}
.btn--primary::before,
.btn--primary::after {
  color: var(--sombre);
}
.btn--primary:hover {
  background-color: var(--vert-clair);
  border-color: var(--vert-clair);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(229, 178, 153, 0.45);
}
.btn--primary:active {
  transform: translateY(0);
}

/* Bouton secondaire : contour clair */
.btn--ghost:hover {
  border-color: var(--blanc);
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.btn--large {
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
}

.btn--small {
  padding: 0.55rem 0.9rem;
  font-size: 0.6875rem;
}

/* ------------------------------------------------------------
   6. Header & navigation
   ------------------------------------------------------------
   Le header vit SUR le fond vert clair, au-dessus du cadre :
   couleurs inversées (brun foncé sur crème), aligné sur la
   largeur du cadre. Il ne suit PAS le défilement : il reste
   en haut de la page et disparaît avec le scroll.
   ------------------------------------------------------------ */
.header {
  width: min(100% - 2 * var(--marge-cadre), var(--largeur-cadre));
  margin-inline: auto;
  height: var(--header-h);
  color: var(--sombre);
}

.header :focus-visible {
  outline-color: var(--sombre);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  height: 3.25rem;                          /* ~52px dans le header de 68px */
  width: auto;
  display: block;
}

/* CTA du header : s'inverse sur fond clair (plein cacao) */
.header .btn--primary {
  background-color: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--blanc);
}
.header .btn--primary::before,
.header .btn--primary::after {
  color: var(--vert);
}
.header .btn--primary:hover {
  background-color: var(--sombre);
  border-color: var(--sombre);
  box-shadow: 0 14px 28px -14px rgba(58, 38, 32, 0.5);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* Navigation en clair : masquée sur mobile (le bouton Menu prend le relais),
   affichée en ligne à partir de 900px (voir §14bis). */
.header__nav {
  display: none;
}

/* --- Bouton Menu (tous écrans) --- */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sombre);
}
.burger__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.burger__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.burger__line {
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--transition);
}
/* Croisement des deux lignes quand le menu est ouvert */
.burger[aria-expanded="true"] .burger__line:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__line:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}
.burger:hover .burger__label {
  color: rgba(58, 38, 32, 0.65);
}

/* --- Menu déroulant compact, ancré sous le bouton Menu ---
   NOTE : le panneau est en position fixed ; il ne doit JAMAIS
   avoir d'ancêtre avec transform, filter ou backdrop-filter
   (sinon celui-ci devient son bloc conteneur et casse tout). */
.nav {
  position: absolute;                      /* défile avec la page, comme le header */
  top: calc(var(--header-h) + 0.5rem);
  /* Aligné sur le bord droit du cadre/header */
  right: max(var(--marge-cadre), calc((100vw - var(--largeur-cadre)) / 2));
  z-index: 90;
  width: min(20rem, calc(100vw - 2 * var(--marge-cadre)));
  max-height: calc(100svh - var(--header-h) - 2rem);
  overflow-y: auto;
  background-color: var(--sombre);
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 28px 56px -24px rgba(58, 38, 32, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility 0s linear 220ms;
}
.nav.ouvert {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility 0s;
}

.nav__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;                        /* remplace le padding du .container */
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                        /* cible tactile confortable */
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--blanc);
  transition: color var(--transition), transform var(--transition);
}
.nav__link:hover {
  color: var(--vert);
  transform: translateX(0.25em);
}

.nav__cta {
  align-self: stretch;
}

/* ------------------------------------------------------------
   7. Hero — centré, façon affiche éditoriale
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Remplit le premier écran : viewport moins header et marge crème */
  min-height: calc(100svh - var(--header-h) - 2 * var(--marge-cadre));
  padding-block: 3rem 4.5rem;
  overflow: hidden;
  text-align: center;
}

/* Sur-titre du hero : centré, sans trait */
.hero .eyebrow {
  justify-content: center;
}
.hero .eyebrow::before {
  display: none;
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 13.5vw, 6.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.hero__title-soft {
  color: var(--blanc);
}

/* Mot alterné du titre (vendre → plaire → convertir).
   Les trois mots sont empilés dans une seule case de grille : l'emplacement
   prend la largeur du plus long, donc la ligne centrée ne bouge pas d'un pixel
   quand le mot change. Le sortant descend en se dissipant, l'entrant arrive
   par le haut. Le pilotage est en JS (§4) ; sans JS, .est-actif est déjà posé
   dans le HTML sur « vendre. » et rien ne bouge. */
.mot-alterne {
  display: inline-grid;
  vertical-align: baseline;
}
/* Entrée du nouveau mot : il descend du haut en apparaissant en fondu.
   Le délai de 220 ms est indispensable — sans lui, les deux mots se croisent
   à mi-opacité au même endroit et l'ensemble devient illisible (double
   exposition). L'opacité couvre toute la durée du déplacement des deux côtés :
   on voit un vrai fondu, pas une coupure. */
.mot-alterne__mot {
  grid-area: 1 / 1;
  justify-self: center;
  opacity: 0;
  transform: translateY(-0.5em);
  transition:
    opacity 340ms cubic-bezier(0, 0, 0.2, 1) 220ms,
    transform 400ms cubic-bezier(0.22, 0.8, 0.26, 1) 220ms;
}
.mot-alterne__mot.est-actif {
  opacity: 1;
  transform: none;
}
/* Sortie : le mot s'efface vers le bas tout de suite, sans délai. */
.mot-alterne__mot.sort {
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity 240ms cubic-bezier(0.4, 0, 1, 1),
    transform 240ms cubic-bezier(0.4, 0, 1, 1);
}

.hero__subtitle {
  max-width: 34rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  color: var(--texte-doux);
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.hero__reassurance {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
}

/* ------------------------------------------------------------
   7bis. Le process — trois cartes d'étapes
   ------------------------------------------------------------
   Jusqu'à la fin du process (sections hero + 01), le cadre
   garde le brun cacao ; le brun très foncé commence après.
   ------------------------------------------------------------ */
.hero,
.process {
  background-color: var(--sombre);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Carte d'étape : rectangle noir uni (sans dégradé), gros numéro en bas */
.etape {
  display: flex;
  flex-direction: column;
  min-height: 26rem;
  padding: clamp(1.75rem, 5vw, 2.25rem);
  background-color: var(--noir);
  border: 1px solid var(--trait);
  border-radius: 12px;
  text-align: center;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
.etape:hover {
  border-color: rgba(229, 178, 153, 0.5);
  box-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.8);
}

/* Apparition « en escalier » — reproduit le Smart Animate du prototype Figma
   (Flow 2, nœud 4:47) : les cartes montent d'en bas jusque dans la diagonale,
   en cascade 1 → 2 → 3, courbe ease-out.
   Spécif. Figma : durée 2 s, ease-out, déclenché au survol de la section ;
   ici 1,3 s et déclenché à l'entrée dans l'écran. La montée est RÉVERSIBLE :
   quand la section ressort de l'écran, JS retire .visible et les cartes
   redescendent — elles remontent donc à nouveau quand on revient dessus.
   La montée (transform) se compose avec le décalage en diagonale
   (margin-top, défini en desktop plus bas). */
/* --- DESKTOP (≥900px) : la montée en escalier décrite ci-dessus --- */
@media (min-width: 900px) {
  .js .etape.reveal {
    transform: translateY(120px);
    transition:
      opacity 1300ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .etape.reveal.visible {
    transform: none;
  }
  .process__grid .reveal.visible:nth-child(1) { transition-delay: 0ms; }
  .process__grid .reveal.visible:nth-child(2) { transition-delay: 260ms; }
  .process__grid .reveal.visible:nth-child(3) { transition-delay: 520ms; }
}

/* --- SECTION ÉPINGLÉE (desktop, JS actif) ---------------------------
   .process--epingle est posée par script.js (§2quater) uniquement à partir
   de 900px et hors « mouvement réduit ». La piste mesure un écran + la
   course de l'animation ; pendant qu'on la traverse, l'écran reste collé en
   haut et les cartes montent proportionnellement au scroll — donc l'effet
   s'inverse tout seul quand on remonte. Aucune transition ici : le transform
   suit la molette image par image, une transition ajouterait un temps de
   retard. */
.process--epingle {
  /* Course volontairement longue : les cartes montent lentement, on a le
     temps de lire chaque étape avant que la suivante n'arrive. */
  --course-process: 260svh;
  padding-block: 0;
}
.process--epingle .process__piste {
  height: calc(100svh + var(--course-process));
}
.process--epingle .process__ecran {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
}
/* Garde-fou : si la composition dépasse la hauteur de l'écran (fenêtre
   basse), script.js réduit l'ensemble d'un bloc plutôt que de rogner la
   dernière carte. Vaut 1 tant que tout tient. */
.process--epingle .process__zoom {
  transform: scale(var(--zoom-process, 1));
  transform-origin: center center;
}
.process--epingle .etape.reveal,
.process--epingle .etape.reveal.visible {
  transition: none;
  will-change: transform, opacity;
}

/* --- MOBILE (<900px) : arrivée « carte posée », pilotée au scroll ---
   Chaque carte entre penchée, un peu réduite et décalée vers le bas, puis
   se redresse progressivement à mesure qu'elle monte dans l'écran (l'effet
   suit le doigt, et s'inverse quand on remonte).
   Le transform et l'opacité sont écrits en style inline par script.js :
   pas de transition ici, sinon le suivi du scroll aurait un temps de retard. */
@media (max-width: 899px) {
  /* Penchées, les coins des cartes dépassent sur les côtés : sans ça, ils
     créeraient un défilement horizontal. `clip` (et non `hidden`) ne crée
     pas de conteneur de défilement. */
  .process {
    overflow-x: clip;
  }
  .js .etape.reveal,
  .js .etape.reveal.visible {
    transition: none;
    will-change: transform, opacity;
  }
}

.etape__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.75rem;
}

.etape__titre {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.etape__desc {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 30ch;
  margin-inline: auto;
}

/* Numéro géant, aligné en bas à gauche */
.etape__numero {
  display: flex;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 2.5rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(5.5rem, 20vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--blanc);
  text-align: left;
}
.etape__diese {
  font-size: 0.22em;
  letter-spacing: 0;
  margin: 0.4em 0.35em 0 0;
}

/* ------------------------------------------------------------
   8. Offres
   ------------------------------------------------------------ */
.offres__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 5vw, 2.25rem);
  background-color: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 12px;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.offre:hover {
  transform: translateY(-5px);
  border-color: rgba(229, 178, 153, 0.5);
  box-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.55);
}

/* Carte signature : fond sable, texte brun foncé */
.offre--signature {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--sombre);
}

/* Badge « Signature » : dans le flux, AU-DESSUS du titre (plus de chevauchement) */
.offre__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  margin-bottom: 1.25rem;
  padding: 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sombre);
  border: 1px solid rgba(58, 38, 32, 0.5);
  border-radius: 999px;
}

/* Sur les 2 cartes sans badge, un espaceur de même hauteur (1,75rem + 1,25rem
   = 3rem) aligne les trois titres sur la même ligne. */
.offre:not(.offre--signature)::before {
  content: "";
  display: block;
  height: 3rem;
  flex-shrink: 0;
}

.offre__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  margin-bottom: 0.875rem;
}

.offre__desc {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-bottom: 1.5rem;
}

/* Sur fond sable, un brun foncé adouci reste très lisible */
.offre--signature .offre__desc {
  color: rgba(58, 38, 32, 0.82);
}

.offre__list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.offre__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
}
.offre__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--vert);
  font-family: var(--font-mono);
}
.offre--signature .offre__list li::before {
  color: var(--sombre);
}

/* CTA de carte : lien mono « [ … ] », poussé en bas de la carte */
.offre__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: auto;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
}
.offre__cta::before { content: "["; color: var(--vert); }
.offre__cta::after  { content: "]"; color: var(--vert); }
.offre--signature .offre__cta {
  color: var(--sombre);
}
.offre--signature .offre__cta::before,
.offre--signature .offre__cta::after {
  color: var(--sombre);
}
.offre__cta .btn__arrow {
  transition: transform var(--transition);
}
.offre__cta:hover .btn__arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   9. Manifeste (panneau SOMBRE inversé, en retrait dans le cadre)
   ------------------------------------------------------------
   Moment « statement » : fond brun profond (plus foncé que le cadre)
   souligné d'un filet, grand titre + mots-clés en sable, texte clair.
   Le CTA garde le style par défaut (plein sable) qui ressort sur le sombre. */
.manifeste {
  background-color: var(--sombre-2);
  color: var(--blanc);
  border: 1px solid var(--trait);
  margin: var(--marge-cadre) clamp(0.75rem, 2vw, 1.5rem);
  border-radius: calc(var(--rayon-cadre) - 6px);
}

.manifeste .eyebrow {
  color: var(--vert);
}

.manifeste__title {
  max-width: 18ch;
  color: var(--vert);                       /* grand titre serif en sable */
}

.manifeste__texte {
  max-width: 40rem;
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.manifeste__texte p {
  font-size: 1.0625rem;
  color: var(--texte-doux);
}

/* Mots-clés accentués en sable */
.manifeste .hl {
  color: var(--vert);
}

/* ------------------------------------------------------------
   10. Réalisations
   ------------------------------------------------------------ */
.realisations__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Carte entière cliquable */
.realisation {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.realisation:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 178, 153, 0.5);
  box-shadow: 0 32px 56px -32px rgba(0, 0, 0, 0.6);
}

.realisation__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
/* Aperçu au survol : l'image (capture pleine page) balaie du haut vers le bas
   pour faire défiler tout le site dans la fenêtre de la carte. */
.realisation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: object-position 2.5s cubic-bezier(0.33, 0.2, 0.2, 1);
}
.realisation:hover .realisation__media img,
.realisation:focus-visible .realisation__media img {
  object-position: center bottom;          /* défile jusqu'au bas de la page */
}

/* Aperçu sur mobile (pas de survol possible) : quand la carte entre dans l'écran,
   l'image balaie une fois du haut vers le bas. Déclenché par .is-previewing
   (script.js) pour ne jouer qu'en vue ; désactivé sous mouvement réduit (§15). */
@media (hover: none) {
  .realisation:not(.realisation--fixe).is-previewing .realisation__media img {
    animation: realisation-pan 2.6s cubic-bezier(0.33, 0.2, 0.2, 1) forwards;
  }
}
@keyframes realisation-pan {
  0%   { object-position: center top; }
  100% { object-position: center bottom; }
}

/* Carte « figée » (La Remise) : l'image reste cadrée sur le haut, aucun
   défilement au survol. La carte garde son léger soulèvement. */
.realisation--fixe .realisation__media img {
  transition: none;
}
.realisation--fixe:hover .realisation__media img,
.realisation--fixe:focus-visible .realisation__media img {
  object-position: center top;
}

/* Carte vedette : pleine largeur en tête de grille. Sur 2 colonnes, on
   l'aplatit (2:1) pour qu'elle ne fasse pas deux fois la hauteur des
   autres ; le cadrage descend un peu pour garder titre et produits. */
.realisation--vedette {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .realisation--vedette .realisation__media {
    aspect-ratio: 2 / 1;
  }
  .realisation--vedette .realisation__media img,
  .realisation--vedette:hover .realisation__media img,
  .realisation--vedette:focus-visible .realisation__media img {
    object-position: center 60%;
  }
}

.realisation__bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  border-top: 1px solid var(--trait);
}

.realisation__nom {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

.realisation__descriptif {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin-top: 0.125rem;
}

.realisation__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert);
  white-space: nowrap;
}
.realisation__fleche {
  display: inline-block;
  transition: transform var(--transition);
}
.realisation:hover .realisation__fleche {
  transform: translate(3px, -3px);
}

/* ------------------------------------------------------------
   11. À propos
   ------------------------------------------------------------ */
.a-propos__inner {
  max-width: 46rem;
}

.a-propos .section__title {
  margin-bottom: 1.5rem;
}

.a-propos__texte {
  font-size: 1.0625rem;
  color: var(--texte-doux);
}

/* Bloc signature façon atelier : portrait du fondateur + signature serif italique
   en sable. L'ancrage humain qui remplace les logos clients tant qu'il n'y en a pas.
   Le fond brun studio du portrait se fond dans le cadre sombre — voulu. */
.a-propos__signe {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2rem;
}
.a-propos__portrait {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--trait);
}
.a-propos__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--vert);
}

/* ------------------------------------------------------------
   12. CTA final (panneau sable, comme le manifeste)
   ------------------------------------------------------------ */
.cta-final {
  background-color: var(--vert);
  color: var(--sombre);
  margin: var(--marge-cadre) clamp(0.75rem, 2vw, 1.5rem);
  border-radius: calc(var(--rayon-cadre) - 6px);
}

.cta-final .eyebrow {
  color: var(--sombre);
}

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Le CTA est un lien géant, façon typographique */
.cta-final__lien {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(58, 38, 32, 0.4);
  text-underline-offset: 0.12em;
  transition: text-decoration-color var(--transition);
}
.cta-final__lien:hover {
  text-decoration-color: var(--sombre);
}
.cta-final__fleche {
  display: inline-block;
  font-style: normal;
  transition: transform var(--transition);
}
.cta-final__lien:hover .cta-final__fleche {
  transform: translateX(0.15em);
}

.cta-final__reassurance {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(58, 38, 32, 0.82);
}

.cta-final :focus-visible {
  outline-color: var(--sombre);
}

/* ------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------ */
/* Footer fondu dans le noir du cadre juste au-dessus (aucune couture) */
.footer {
  background-color: var(--noir);
  color: var(--texte-doux);
  padding-block: 3rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer__logo {
  height: 3.5rem;                           /* le footer a de la place */
  width: auto;
  align-self: flex-start;                   /* évite l'étirement dans le flex column */
  display: block;
}

.footer__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.footer__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                        /* cible tactile conforme (≥44px) */
  font-size: 0.9375rem;
  transition: color var(--transition);
}
.footer__liens a:hover {
  color: var(--vert);
}

.footer__copyright {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------
   13bis. CTA flottant — apparaît une fois le hero dépassé
   ------------------------------------------------------------
   Pilule mono cacao (même famille que le CTA du header), crochets sable.
   Masquée au repos, révélée par la classe .visible ajoutée en JS quand le
   hero sort de l'écran : l'action « Réserver » reste ainsi accessible tout
   au long du défilement (réalisations, à propos…). */
.cta-flottant {
  position: fixed;
  right: clamp(0.9rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 3vw, 2rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.8rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  background-color: var(--cocoa);
  border: 1px solid var(--cocoa);
  border-radius: 999px;
  box-shadow: 0 16px 34px -16px rgba(58, 38, 32, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity var(--transition),
    transform var(--transition),
    background-color var(--transition),
    visibility 0s linear 220ms;
}
.cta-flottant::before { content: "["; color: var(--vert); }
.cta-flottant::after  { content: "]"; color: var(--vert); }
.cta-flottant.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--transition),
    transform var(--transition),
    background-color var(--transition),
    visibility 0s;
}
.cta-flottant:hover {
  background-color: var(--sombre);
  border-color: var(--sombre);
  transform: translateY(-2px);
}
.cta-flottant .btn__arrow {
  transition: transform var(--transition);
}
.cta-flottant:hover .btn__arrow {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   14. Petits écrans : header compact
   ------------------------------------------------------------ */
@media (max-width: 479px) {
  .burger__label {
    display: none;                         /* l'icône seule suffit, bouton 44px */
  }
  .burger {
    min-width: 44px;
    justify-content: center;
  }
  .header__inner,
  .header__actions {
    gap: 0.5rem;
  }
  /* CTA compact, sans crochets : tout doit tenir dans le cadre à 380px */
  .header__actions .btn--small {
    padding: 0.5rem 0.7rem;
    font-size: 0.625rem;
  }
  .header__actions .btn--small::before,
  .header__actions .btn--small::after {
    display: none;
  }
  .logo {
    font-size: 1.25rem;
  }
}

@media (max-width: 359px) {
  .header__actions .btn--small {
    padding: 0.4rem 0.55rem;
    font-size: 0.5625rem;
  }
  .logo {
    font-size: 1.125rem;
  }
}

/* ------------------------------------------------------------
   14bis. Écrans moyens et larges
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .realisations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .header__actions .btn--small {
    padding: 0.65rem 1.1rem;
    font-size: 0.75rem;
  }

  /* Nav en clair au centre du header ; le bouton Menu disparaît (plus besoin :
     les quatre sections sont directement accessibles). */
  .header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
  }
  .header__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sombre);
    transition: color var(--transition);
  }
  .header__nav a:hover {
    color: var(--cocoa);
  }
  .header .burger {
    display: none;
  }

  .offres__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Process : 3 colonnes en diagonale descendante marquée. Toutes les cartes
     font la MÊME hauteur (31rem) ; chaque carte démarre à la MOITIÉ de la
     précédente (décalage = 31rem / 2 = 15,5rem). align-items:start pour que
     le décalage n'écrase pas la hauteur. */
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;                       /* légèrement resserré (était 1,5rem) */
    align-items: start;
  }
  .process__grid .etape {
    height: 31rem;                 /* hauteur commune, contenu le plus haut = 467px */
    min-height: 0;
  }
  /* Décalage = quart de la hauteur (31rem / 4 = 7,75rem) : diagonale plus resserrée. */
  .process__grid .etape:nth-child(1) { margin-top: 0; }
  .process__grid .etape:nth-child(2) { margin-top: 7.75rem; }
  .process__grid .etape:nth-child(3) { margin-top: 15.5rem; }

  /* En mode épinglé, la composition REMPLIT le cadre : toute la largeur du
     rectangle brun (on sort du --container) et toute la hauteur de l'écran.
     La hauteur des cartes et le décalage de la diagonale sont calculés en JS
     (§2quater) pour occuper exactement la place libre, et posés ici en
     variables. Le rembourrage, le numéro géant et la marge du titre se
     resserrent sur les fenêtres basses : c'est ce qui libère la hauteur
     nécessaire à la diagonale au lieu de tout réduire au zoom. */
  .process--epingle .process__zoom {
    max-width: none;
  }
  .process--epingle .process__grid .etape {
    height: var(--h-etape, 31rem);
    padding: clamp(1.25rem, 2.8svh, 2.25rem);
  }
  .process--epingle .process__grid .etape:nth-child(2) { margin-top: var(--decalage, 7.75rem); }
  .process--epingle .process__grid .etape:nth-child(3) { margin-top: calc(var(--decalage, 7.75rem) * 2); }
  .process--epingle .etape__numero {
    padding-top: clamp(0.75rem, 2.5svh, 2.5rem);
    font-size: clamp(4rem, 11svh, 7.5rem);
  }
  /* Sur une fenêtre basse, tout ce qui est gagné ici part dans l'escalier :
     le décalage des cartes est ce qui reste une fois l'en-tête et le contenu
     servis. Titre, sur-titre et interligne se resserrent donc avec la hauteur
     de fenêtre — sur un grand écran, les valeurs hautes des clamps
     reprennent la main et rien ne change. */
  .process--epingle .section__title {
    font-size: clamp(2.25rem, 6.6svh, 4rem);
    margin-bottom: clamp(1rem, 2.6svh, 2.5rem);
  }
  .process--epingle .eyebrow { margin-bottom: clamp(0.5rem, 1.6svh, 1.25rem); }
  .process--epingle .etape__desc { line-height: 1.5; }

  .manifeste__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 5rem);
  }
  .manifeste__inner .eyebrow    { grid-column: 1 / -1; }
  .manifeste__title             { grid-row: 2; }
  .manifeste__texte             { grid-row: 2 / 4; grid-column: 2; margin-bottom: 0; }
  .manifeste__inner > .reveal:last-child { grid-row: 3; grid-column: 1; align-self: end; }

  /* Réalisations : une vedette pleine largeur + grille 2×2 en desktop. Des
     vignettes plus grandes montrent bien mieux les sites qu'une rangée de 3
     étroites, et évitent la carte orpheline en fin de rangée. */
  .realisations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .realisations__grid {
    gap: 2rem;
  }
}

/* ------------------------------------------------------------
   14bis. Pages légales (mentions légales, confidentialité)
   ------------------------------------------------------------
   Pages de texte long, dans le même cadre brun que le site mais
   sans aucune animation : on veut qu'elles soient lisibles tout
   de suite, y compris sans JS (elles n'en chargent pas du tout).
   Colonne de lecture volontairement étroite (~62 caractères).
   ------------------------------------------------------------ */
.page-legale {
  padding-block: clamp(3rem, 8vw, 5rem);
}
.page-legale__inner {
  max-width: 44rem;
}
.page-legale__titre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 2rem;
}
.page-legale__chapeau {
  font-size: 1.0625rem;
  color: var(--vert);
  border-left: 2px solid var(--trait);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
}
.page-legale section {
  margin-bottom: 2.5rem;
}
.page-legale h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: 0.875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
}
.page-legale h3 {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 1.75rem 0 0.625rem;
}
.page-legale p,
.page-legale li {
  color: var(--texte-doux);
  margin-bottom: 0.875rem;
}
.page-legale ul {
  list-style: none;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.page-legale li {
  position: relative;
}
.page-legale li::before {
  content: "·";
  position: absolute;
  left: -1.25rem;
  color: var(--mocha);
}
.page-legale strong {
  color: var(--blanc);
  font-weight: 500;
}
.page-legale a {
  color: var(--vert);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.page-legale a:hover,
.page-legale a:focus-visible {
  color: var(--vert-clair);
}
/* Note d'attente : signale une information légale pas encore disponible.
   Volontairement discrète mais lisible — ce n'est pas un avertissement,
   juste une précision honnête. */
.page-legale__note {
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 1rem 1.125rem;
  background-color: var(--surface);
  font-size: 0.9375rem;
  margin-top: 1.25rem;
}
.page-legale__maj {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mocha);
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
}

/* ------------------------------------------------------------
   15. Accessibilité — préférence de mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .etape.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}