/* ==========================================================================
   GeoPrest — feuille de styles unique du site www.geoprest.be
   Écrite « mobile d'abord » : les règles de base visent le téléphone,
   les @media ajoutent la tablette (768 px), l'ordinateur (1240 px) et le menu complet (1440 px).

   Sommaire
   1. Variables (couleurs, tailles, rayons, ombres)
   2. Police Poppins (hébergée sur le site, licence OFL)
   3. Base
   4. Utilitaires (affichage mobile / large, conteneur)
   5. Éléments communs (boutons, surtitres, titres, sections, cartes)
   6. Bandeau 2027, en-tête, menu mobile, sélecteur de langue
   7. Pied de page
   8. Composants partagés entre les pages
   9. Accueil
   10. Pages intérieures
   11. Animations (survol, apparition, téléphone, illustration, en-tête)
   12. Mouvement réduit
   ========================================================================== */


/* 1. Variables
   ========================================================================== */
:root {
  /* Couleurs de la charte */
  --marine: #1F3663;            /* texte, fonds forts */
  --marine-survol: #152747;
  --marine-profond: #16243F;    /* pied de page */
  --orange: #EB9438;            /* filets, puces, grands éléments — jamais en petit texte */
  --orange-texte: #A85A0B;      /* petits textes orange sur fond clair */
  --orange-fonce: #8A4B0C;      /* textes du bandeau et des cartes crème */
  --orange-sur-marine: #F2B777; /* textes orange sur fond marine */
  --orange-chiffres: #C9700F;   /* grands chiffres */
  --bouton: #B45F0A;            /* boutons d'action plats */
  --bouton-survol: #9A5208;
  --fond: #F4F6FA;
  --blanc: #FFFFFF;
  --creme: #FDF3E6;             /* petites cartes d'accent seulement */
  --creme-filet: #F2DFC2;
  --texte-2: #2A3340;
  --texte-3: #3E4A5C;
  --texte-4: #5F6B7E;
  --texte-pale: #65718A;        /* le gris le plus clair lisible (AA) : exemples, emplacements */
  --filet: #D8DBDF;
  --filet-clair: #E3E7EE;
  --filet-menu: #EEF0F3;
  --chevron: #97A3B6;

  /* Textes sur le pied de page marine */
  --pied-texte: #B7C4DA;
  --pied-discret: #8FA3C2;

  /* Dégradés réservés aux boutons Start et Stop de l'app */
  --degrade-marine: linear-gradient(180deg, #41608F 0%, #1F3663 55%, #16243F 100%);
  --degrade-orange: linear-gradient(180deg, #E88A22 0%, #C9700F 52%, #9A5208 100%);
  /* Depuis le 1er octobre 2026 : Start en marine, Stop en orange */
  --degrade-start: var(--degrade-marine);
  --degrade-stop: var(--degrade-orange);
  --relief-bouton: inset 0 2px 1px rgba(255, 255, 255, .4), inset 0 -5px 10px rgba(10, 20, 40, .35), 0 14px 24px -12px rgba(10, 20, 40, .45);

  /* Typographie */
  --police: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-accueil: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);     /* 40 → 64 px */
  --h1-page: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);    /* 34 → 56 px */
  --h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);       /* 30 → 44 px */
  --h3: 1.25rem;
  --texte-intro: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem); /* 16 → 19 px */
  --texte: 1rem;
  --texte-petit: 0.875rem;
  --interlettrage-titre: -0.03em;

  /* Mise en page */
  --largeur-max: 1440px;
  --marge: 22px;
  --espace-section: 26px;
  --hauteur-entete: 64px;

  /* Rayons */
  --rayon-petit: 7px;
  --rayon-champ: 10px;
  --rayon-bouton: 14px;
  --rayon-carte: 20px;
  --rayon-pilule: 999px;

  /* Ombres */
  --ombre-carte: 0 18px 40px -30px rgba(31, 54, 99, .55);
  --ombre-carte-forte: 0 30px 60px -40px rgba(31, 54, 99, .5);
  --ombre-pastille: 0 1px 3px rgba(31, 54, 99, .18);
  --ombre-menu: 0 30px 40px -24px rgba(10, 20, 40, .35);

  /* Focus visible (clavier) */
  --focus: 3px solid var(--marine);
}

@media (min-width: 768px) {
  :root {
    --marge: 40px;
    --espace-section: 48px;
  }
}

@media (min-width: 1240px) {
  :root {
    --marge: 64px;
    --espace-section: 64px;
  }
}

@media (min-width: 1440px) {
  :root {
    --hauteur-entete: 84px;
  }
}


/* 2. Police Poppins
   Deux fichiers par graisse : latin (courant) et latin étendu (lettres rares).
   Le navigateur ne télécharge le second que s'il en a besoin.
   ========================================================================== */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.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: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-ext-400-normal.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: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.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: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-ext-500-normal.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: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.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: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-ext-600-normal.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: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.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: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-ext-700-normal.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; }


/* 3. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  color: var(--marine);
  font-family: var(--police);
  font-size: var(--texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* <picture> (WebP + PNG de secours) ne change pas la mise en page */
picture {
  display: contents;
}

/* …et ses <source> ne doivent pas compter comme des éléments (sinon un écart en plus dans les logos) */
picture > source {
  display: none;
}

img {
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul[class],
ol[class],
nav ul {
  list-style: none;
  padding: 0;
}

a {
  color: var(--marine);
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* Lien d'évitement : invisible jusqu'à ce qu'on arrive dessus au clavier */
.evitement {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--rayon-champ);
  background: var(--marine);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-200%);
  opacity: 0;            /* invisible même si Safari découvre le haut de la page */
  pointer-events: none;
}

.evitement:focus,
.evitement:focus-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  color: var(--blanc);
}

.evitement:focus-visible {
  outline-color: var(--orange-sur-marine);
}


/* 4. Utilitaires
   ========================================================================== */

/* Texte réservé aux lecteurs d'écran */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Versions de texte différentes entre téléphone (< 768 px) et écrans larges (≥ 768 px) */
@media (max-width: 767.98px) {
  .sur-large { display: none !important; }
}
@media (min-width: 768px) {
  .sur-mobile { display: none !important; }
}

/* Éléments de l'en-tête réservés au menu complet (≥ 1440 px, sinon menu burger) */
@media (max-width: 1439.98px) {
  .sur-ordinateur { display: none !important; }
}
@media (min-width: 1440px) {
  .hors-ordinateur { display: none !important; }
}

/* Largeur de contenu et marges latérales */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge);
}


/* 5. Éléments communs
   ========================================================================== */

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--rayon-bouton);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

@media (min-width: 768px) {
  .bouton { min-height: 56px; }
}

.bouton--action {
  background: var(--bouton);
  color: var(--blanc);
}

.bouton--action:hover {
  background: var(--bouton-survol);
  color: var(--blanc);
}

.bouton--marine {
  background: var(--marine);
  color: var(--blanc);
}

.bouton--marine:hover {
  background: var(--marine-survol);
  color: var(--blanc);
}

.bouton--contour {
  border-color: var(--filet);
  background: var(--blanc);
  color: var(--marine);
}

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

/* Bouton contour sur fond marine */
.bouton--contour-clair {
  border-color: rgba(255, 255, 255, .35);
  background: transparent;
  color: var(--blanc);
}

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

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

/* Lien texte avec flèche (« Ce que dit la loi → ») */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.lien-fleche::after {
  content: "→";
  transition: transform .15s ease;
}

.lien-fleche:hover::after {
  transform: translateX(3px);
}

/* Surtitre de section : petit filet orange + capitales espacées */
.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange-texte);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.surtitre::before {
  content: "";
  flex: none;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

@media (min-width: 768px) {
  .surtitre { font-size: 0.875rem; letter-spacing: .08em; }
}

.fond-marine .surtitre {
  color: var(--orange-sur-marine);
}

/* Titres */
.titre-accueil,
.titre-page,
.titre-section {
  font-weight: 700;
  letter-spacing: var(--interlettrage-titre);
}

.titre-accueil {
  font-size: var(--h1-accueil);
  line-height: 1.06;
}

.titre-page {
  font-size: var(--h1-page);
  line-height: 1.08;
}

.titre-section {
  font-size: var(--h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.intro {
  color: var(--texte-3);
  font-size: var(--texte-intro);
  line-height: 1.6;
}

/* Sections alternées blanc / gris / marine */
.section {
  padding-block: var(--espace-section);
}

.fond-gris {
  background: var(--fond);
}

.fond-marine {
  background: var(--marine);
  color: var(--blanc);
}

.fond-marine :focus-visible,
.pied :focus-visible {
  outline-color: var(--orange-sur-marine);
}

/* Cartes blanches très arrondies */
.carte {
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

/* Pastille « Bientôt sur iOS & Android » */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  box-shadow: 0 10px 24px -18px rgba(31, 54, 99, .6);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

.pastille svg,
.pied__bientot svg {
  flex: none;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
}


/* 6. Bandeau 2027, en-tête, menu mobile, sélecteur de langue
   ========================================================================== */

/* Bandeau 2027 (accueil) */
.bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px var(--marge);
  border-bottom: 1px solid var(--creme-filet);
  background: var(--creme);
  color: var(--orange-fonce);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.bandeau:hover {
  color: var(--orange-fonce);
}

.bandeau__annee {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--rayon-pilule);
  background: var(--bouton); /* orange foncé : texte blanc lisible (contraste AA) */
  color: var(--blanc);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
}

.bandeau__texte strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .bandeau {
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    padding-block: 8px;
    font-size: 0.906rem;
  }

  .bandeau__annee {
    padding: 3px 9px;
    font-size: 0.6875rem;
    line-height: 1.6;
  }

  .bandeau__texte strong {
    margin-left: 6px;
    text-underline-offset: 3px;
  }
}

/* En-tête */
.entete {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--filet-clair);
  background: var(--blanc);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largeur-max);
  height: var(--hauteur-entete);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Logo : broche + nom */
.logo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo__pin {
  width: auto;
  height: 34px;
}

.logo__nom {
  width: auto;
  height: 17px;
}

@media (min-width: 1440px) {
  .entete .logo { gap: 10px; }
  .entete .logo__pin { height: 42px; }
  .entete .logo__nom { height: 21px; }
}

/* Navigation principale (ordinateur) */
.nav-principale {
  display: none;
}

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.25vw, 18px);
}

.nav-principale a {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: 0.906rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.nav-principale a:hover {
  color: var(--bouton);
}

.nav-principale a[aria-current="page"] {
  font-weight: 600;
}

.nav-principale a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bouton secondaire « Espace gestionnaire » (contour, cadenas) : la démo reste l'action principale */
.bouton-espace {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #C9D1DE;
  border-radius: 12px;
  background: var(--blanc);
  color: var(--marine);
  font-size: 0.906rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.bouton-espace:hover {
  border-color: var(--marine);
  color: var(--marine);
}

.bouton-espace svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entete__demo {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (min-width: 1440px) {
  .entete__barre { gap: 24px; }
  .nav-principale { display: block; }

  .entete__actions {
    gap: clamp(12px, 1.25vw, 18px);
    padding-left: clamp(12px, 1.25vw, 18px);
    border-left: 1px solid var(--filet);
  }

  .entete__demo {
    min-height: 46px;
    padding: 0 18px;
    font-size: 0.906rem;
  }
}

/* Bouton burger (téléphone et tablette) */
.burger {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 11px;
  background: var(--blanc);
  cursor: pointer;
}

.burger svg {
  fill: none;
  stroke: var(--marine);
  stroke-width: 2;
  stroke-linecap: round;
}

.burger__fermer,
.burger[aria-expanded="true"] .burger__ouvrir {
  display: none;
}

.burger[aria-expanded="true"] .burger__fermer {
  display: block;
}

@media (min-width: 1440px) {
  .burger { display: none; }
}

/* Menu mobile, déroulé sous l'en-tête */
.menu-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--hauteur-entete));
  max-height: calc(100dvh - var(--hauteur-entete));
  overflow-y: auto;
  padding: 6px var(--marge) 22px;
  border-bottom: 1px solid var(--filet-clair);
  background: var(--blanc);
  box-shadow: var(--ombre-menu);
}

.menu-mobile[hidden] {
  display: none;
}

.menu-mobile ul {
  max-width: 640px;
}

.menu-mobile__espace {
  max-width: 640px;
  padding: 10px 0 6px;
}

.menu-mobile__espace .bouton-espace {
  display: flex;
  width: 100%;
  min-height: 50px;
  gap: 9px;
  border-radius: 14px;
  background: var(--fond);
  font-size: 1rem;
}

.menu-mobile li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--filet-menu);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.menu-mobile li a[aria-current="page"] {
  color: var(--orange-texte);
}

.menu-mobile li svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--chevron);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-mobile__langue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 640px;
  padding: 16px 0;
}

.menu-mobile__etiquette {
  color: var(--texte-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.menu-mobile > .bouton {
  max-width: 640px;
}

@media (min-width: 1440px) {
  .menu-mobile { display: none !important; }
}

/* Sélecteur de langue FR · NL · EN */
.langues {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: var(--rayon-champ);
  background: var(--fond);
}

.langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 26px;
  padding: 6px 8px;
  border-radius: var(--rayon-petit);
  color: var(--texte-4);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.langues a:hover {
  color: var(--marine);
}

.langues a[aria-current] {
  background: var(--blanc);
  box-shadow: var(--ombre-pastille);
  color: var(--marine);
  font-weight: 600;
}

/* Version tactile : zones de 44 px */
.langues--grandes a {
  min-width: 48px;
  height: 44px;
  padding: 0 14px;
  font-size: 0.875rem;
}


/* 7. Pied de page
   ========================================================================== */
.pied {
  flex: none;
  background: var(--marine-profond);
  color: var(--pied-texte);
  font-size: 0.906rem;
}

.pied a {
  color: var(--pied-texte);
  text-decoration: none;
}

.pied a:hover {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pied .langues a {
  color: var(--texte-4);
  text-decoration: none;
}

.pied .langues a[aria-current] {
  color: var(--marine);
}

.pied__grille {
  display: grid;
  gap: 22px;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: 34px var(--marge) 0;
}

.pied__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.pied .logo__pin { height: 32px; }
.pied .logo__nom { height: 16px; }

.pied__accroche {
  max-width: 340px;
  line-height: 1.6;
}

.pied__bientot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--rayon-champ);
  color: var(--blanc);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

.pied__bientot svg {
  stroke: var(--orange-sur-marine);
}

.pied__adresse,
.pied__bas {
  color: var(--pied-discret);
}

.pied__adresse {
  font-size: 0.875rem;
  line-height: 1.6;
}

.pied__titre {
  margin-bottom: 14px;
  color: var(--blanc);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Téléphone : liens sur deux colonnes, zones de 44 px */
.pied__liens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

.pied__liens a {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.3;
}

.pied__contact {
  line-height: 1.6;
}

.pied__bas {
  position: relative;
  max-width: var(--largeur-max);
  margin: 22px auto 0;
  padding: 16px var(--marge) 24px;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Filet au-dessus des mentions, aligné sur les marges */
.pied__bas::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--marge);
  right: var(--marge);
  height: 1px;
  background: rgba(255, 255, 255, .1);
}

@media (min-width: 768px) {
  .pied__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 48px;
    padding-top: 56px;
  }

  .pied__marque {
    gap: 18px;
    grid-column: 1 / -1;
  }

  .pied .logo__pin { height: 38px; }
  .pied .logo__nom { height: 19px; }

  .pied__liens {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .pied__liens a {
    min-height: 32px;
  }

  .pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 32px;
    margin-top: 48px;
    padding-block: 22px;
  }
}

@media (min-width: 1240px) {
  .pied__grille {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    padding-top: 64px;
  }

  .pied__marque {
    grid-column: auto;
  }
}


/* 8. Composants partagés entre les pages
   ========================================================================== */

/* Empilement vertical des blocs d'une section */
.pile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .pile { gap: 40px; }
}

/* En-tête de section : surtitre + titre à gauche, introduction à droite sur ordinateur */
.entete-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entete-section__titre {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entete-section__titre .titre-section {
  max-width: 720px;
}

.entete-section__intro {
  max-width: 480px;
  color: var(--texte-3);
  font-size: 0.97rem;
  line-height: 1.6;
}

.fond-marine .entete-section__intro {
  color: #C9D3E6;
}

@media (min-width: 768px) {
  .entete-section__titre { gap: 14px; }
  .entete-section__intro { font-size: 1.0625rem; }
}

@media (min-width: 1240px) {
  .entete-section {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
}

.titre-section--moyen {
  font-size: clamp(1.875rem, 1.6rem + 0.9vw, 2.375rem); /* 30 → 38 px */
}

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

@media (min-width: 1240px) {
  .section--serree { padding-block: 52px; }
}

/* Texte en dégradé orange (« Ergonomique en coulisses. ») */
.texte-degrade {
  background: linear-gradient(90deg, #F7C58C 0%, var(--orange) 55%, var(--orange-chiffres) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Icônes SVG (voir includes/icones.php) */
.icone-trait {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-broche {
  flex: none;
  fill: var(--blanc);
}

.icone-adresse {
  flex: none;
}

.icone-adresse path { fill: var(--orange); }
.icone-adresse circle { fill: var(--blanc); }

.icone-coche {
  flex: none;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fond-marine .icone-coche {
  stroke: var(--orange-sur-marine);
}

.icone-fleche {
  flex: none;
  fill: none;
  stroke: var(--chevron);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-guillemets {
  flex: none;
  fill: var(--orange);
}

/* Étiquettes Start / Stop */
.etiquette {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rayon-pilule);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.etiquette::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.etiquette--start {
  background: #E7ECF3;
  color: var(--marine);
}

.etiquette--start::before { background: var(--marine); }

.etiquette--stop {
  background: #FDEBD6;
  color: var(--orange-fonce);
}

.etiquette--stop::before { background: var(--orange); }

/* Badge « OFFERT » (orange foncé : texte blanc lisible) */
.badge {
  flex: none;
  padding: 4px 9px;
  border-radius: var(--rayon-pilule);
  background: var(--bouton);
  color: var(--blanc);
  font-size: 0.656rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Emplacement de contenu à fournir ([X]) */
.emplacement {
  padding: 2px 8px;
  border-radius: 6px;
  background: #FDEBD6;
  color: var(--orange-fonce);
  font-weight: 600;
}

/* Liste à coches orange */
.liste-coches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.liste-coches li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.97rem;
  line-height: 1.5;
}

.liste-coches .icone-coche {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* Petites pastilles de texte (Objectif, Fiable, Accessible) */
.puces-texte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.puces-texte li {
  padding: 8px 14px;
  border-radius: var(--rayon-pilule);
  background: #E7ECF3;
  font-size: 0.844rem;
  font-weight: 600;
  line-height: 1;
}

/* Rond Start / Stop décoratif (dégradés réservés à ces deux boutons) */
.rond-pointage {
  --d: 90px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
}

.rond-pointage > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--d) * .03);
  width: calc(var(--d) * .85);
  height: calc(var(--d) * .85);
  border-radius: 50%;
  box-shadow: var(--relief-bouton);
  color: var(--blanc);
  font-size: calc(var(--d) * .13);
  font-weight: 700;
  line-height: 1;
}

.rond-pointage .icone-broche {
  width: calc(var(--d) * .125);
  height: calc(var(--d) * .125);
}

.rond-pointage small {
  font-size: 9px;
  font-weight: 600;
}

.rond-pointage--start { background: #E8ECF3; }
.rond-pointage--start > span {
  background: var(--degrade-start);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .4), inset 0 -5px 10px rgba(10, 20, 40, .35), 0 14px 24px -12px rgba(31, 54, 99, .55);
}
.rond-pointage--stop { background: #FBEEDD; }
.rond-pointage--stop > span {
  background: var(--degrade-stop);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .4), inset 0 -5px 10px rgba(10, 20, 40, .35), 0 14px 24px -12px rgba(201, 112, 15, .55);
  text-shadow: 0 1px 2px rgba(110, 50, 0, .55); /* lisibilité du blanc sur le dégradé orange */
}

@media (min-width: 768px) {
  .rond-pointage { --d: 99px; }
}

.rond-pointage--moyen { --d: 104px; }


/* 9. Accueil
   ========================================================================== */

/* Haut de page */
.hero {
  padding-top: 30px;
}

.hero__interieur {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__texte {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero__boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero .pastille {
  align-self: flex-start;
  padding: 9px 13px;
  background: #E7ECF3;
  box-shadow: none;
  font-size: 0.78rem;
}

.hero .pastille .icone-trait {
  stroke: var(--orange-chiffres);
}

.hero__prix {
  color: var(--orange-fonce);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .hero {
    padding-top: 56px;
  }

  .hero__texte {
    gap: 26px;
    max-width: 640px;
  }

  .hero .intro {
    max-width: 560px;
  }

  .hero__boutons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
  }

  .hero .pastille {
    padding: 9px 14px;
    background: var(--blanc);
    box-shadow: 0 10px 24px -18px rgba(31, 54, 99, .6);
    font-size: 0.875rem;
  }

  .hero .pastille .icone-trait {
    stroke: var(--orange);
  }
}

@media (min-width: 1240px) {
  .hero {
    padding-top: 0;
  }

  .hero__interieur {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 620px;
  }
}

/* Démo du téléphone
   Sur mobile : image fixe, réduite, à l'état « Stop ».
   Dès 768 px : disposition de la maquette ordinateur, cliquable. */
.demo {
  position: relative;
  height: 268px;
  margin-top: 2px;
  overflow: hidden;
}

.demo__forme {
  position: absolute;
  left: 50%;
}

.demo__forme--bleue {
  top: 18px;
  width: 284px;
  height: 286px;
  margin-left: -142px;
  border-radius: 60px;
  background: #DFE6F1;
  transform: rotate(-8deg);
}

.demo__forme--orange {
  top: 4px;
  width: 118px;
  height: 118px;
  margin-left: 46px;
  border-radius: 36px;
  background: rgba(235, 148, 56, .13);
  transform: rotate(14deg);
}

.telephone {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 232px;
  height: 502px;
  margin-left: -78px;
  padding: 4px;
  border-radius: 35px;
  background: linear-gradient(145deg, #7E8794 0%, #3A4049 16%, #171B21 38%, #9AA3AF 53%, #1C2027 73%, #565D67 92%, #99A2AE 100%);
  box-shadow: 0 24px 38px -18px rgba(14, 22, 40, .48), 15px 11px 24px -14px rgba(14, 22, 40, .3);
  transform: perspective(1200px) rotateY(-12deg) rotateZ(-3deg) scale(.672);
  transform-origin: 0 0;
}

/* Petite barre de l'écouteur */
.telephone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  width: 26px;
  height: 3px;
  margin-left: -13px;
  border-radius: var(--rayon-pilule);
  background: #222C3C;
}

.telephone__ecran {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 3px solid #04070C;
  border-top-width: 11px;
  border-radius: 31px;
  background: #F6F8FB;
  color: var(--marine);
}

/* Reflet sur l'écran */
.telephone__ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 42%);
}

.telephone__barre {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  background: var(--blanc);
}

.telephone__barre .img-pin { width: auto; height: 17px; }
.telephone__barre .img-nom { width: auto; height: 9px; }

.telephone__jour {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 13px 1px;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
}

.telephone__jour span:last-child {
  color: #8A94A6;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.telephone__centre {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 0;
  padding: 2px 13px;
  text-align: center;
}

.telephone__pret {
  padding: 5px 10px;
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  color: var(--texte-4);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}

.telephone__chrono {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.telephone__chrono strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.telephone__chrono span {
  color: var(--texte-4);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
}

/* Bouton Start / Stop du téléphone (dégradés en relief réservés à ces deux boutons) */
.pointage {
  align-items: center;
  justify-content: center;
  width: 129px;
  height: 129px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s ease;
}

.pointage:hover { transform: scale(1.03); }
.pointage:active { transform: scale(.97); }
.pointage:focus-visible { border-radius: 50%; }

.pointage__rond {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 113px;
  height: 113px;
  border-radius: 50%;
  color: var(--blanc);
}

.pointage--start { background: #E8ECF3; }

.pointage--start .pointage__rond {
  background: radial-gradient(115% 95% at 50% 0%, #5B7CAE 0%, #35558A 30%, #1F3663 64%, #142544 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 11px rgba(8, 18, 38, .4), 0 10px 18px -8px rgba(31, 54, 99, .55);
}

.pointage--stop { background: #FBEEDD; }

.pointage--stop .pointage__rond {
  background: radial-gradient(115% 95% at 50% 0%, #FBBE6B 0%, #F09A2E 28%, #D27A14 62%, #B4620A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 11px rgba(120, 58, 4, .34), 0 10px 18px -8px rgba(201, 112, 15, .55);
  text-shadow: 0 1px 2px rgba(110, 50, 0, .55); /* lisibilité du blanc sur le dégradé orange */
}

.pointage__mot {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.pointage__aide {
  color: rgba(255, 255, 255, .88);
  font-size: 7px;
  font-weight: 500;
  line-height: 1;
}

.telephone__fini {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.telephone__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #FAEDDC;
}

.telephone__coche .icone-coche {
  width: 24px;
  height: 24px;
  stroke: var(--orange-chiffres);
  stroke-width: 1.5;
}

.telephone__fini strong {
  font-size: 11px;
  line-height: 1.2;
}

.telephone__fini button {
  height: 25px;
  padding: 0 12px;
  border: 1px solid #DEE3EA;
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
}

.telephone__lieu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.telephone__adresse {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--texte-3);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.3;
}

.telephone__precision {
  color: var(--texte-pale);
  font-size: 7px;
  line-height: 1.3;
}

.telephone__semaine {
  flex: none;
  margin: 0 10px 6px;
  padding: 7px 8px 6px;
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: 0 6px 13px -10px rgba(31, 54, 99, .5);
}

.telephone__semaine > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
}

.telephone__semaine strong {
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.telephone__semaine ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.telephone__semaine li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #A6AEBC;
  font-size: 5px;
  font-weight: 500;
  line-height: 1;
}

.telephone__semaine li::before {
  content: "";
  width: 100%;
  height: 13px;
  border-radius: 2px;
  background: #E1E7F0;
}

.telephone__semaine li:nth-child(2)::before { height: 18px; }
.telephone__semaine li:nth-child(3)::before { height: 11px; }
.telephone__semaine li:nth-child(4)::before { height: 17px; }
.telephone__semaine li:nth-child(5)::before { height: 20px; background: var(--orange); }
.telephone__semaine li:nth-child(6)::before { height: 5px; background: #EEF1F6; }

.telephone__onglets {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px 8px 4px;
  background: var(--blanc);
}

.telephone__onglets span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  border-radius: var(--rayon-petit);
  color: #8A94A6;
  font-size: 7px;
  font-weight: 500;
  line-height: 1;
}

.telephone__onglets .actif {
  background: #EDF1F7;
  color: var(--marine);
  font-weight: 600;
}

.telephone__onglets::after {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  width: 71px;
  height: 3px;
  margin: 1px 0 2px;
  border-radius: var(--rayon-pilule);
  background: #C9CFD9;
}

/* Tuiles blanches (logo, broche) et cartes flottantes */
.demo__tuile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
  box-shadow: 0 18px 38px -18px rgba(20, 30, 55, .35), 0 2px 6px rgba(20, 30, 55, .08);
}

.demo__tuile--logo {
  left: 50%;
  top: 10px;
  width: 58px;
  height: 58px;
  margin-left: -118px;
  border-radius: 17px;
}

.demo__tuile--logo img {
  width: auto;
  height: 32px;
}

.demo__tuile--broche {
  left: 474px;
  top: 488px;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  color: var(--orange);
}

.demo__tuile--broche svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.9;
}

.demo__carte {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 200px;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--blanc);
  box-shadow: 0 20px 40px -20px rgba(31, 54, 99, .55);
  line-height: 1.3;
}

.demo__carte--aide {
  top: 386px;
  gap: 6px;
  padding: 16px 18px;
}

.demo__carte--aide strong { font-size: 15px; }

.demo__carte--aide span {
  color: var(--texte-4);
  font-size: 13px;
  line-height: 1.45;
}

.demo__carte--start { top: 150px; }
.demo__carte--stop { top: 268px; }

.demo__carte > strong:not(:first-child) { font-size: 14px; font-weight: 600; }

.demo__ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.demo__lieu {
  color: var(--texte-4);
  font-size: 12.5px;
}

/* États de la démo : repos → en cours → terminé */
.telephone__pret,
.telephone__chrono,
.pointage,
.telephone__fini,
.demo__carte {
  display: none;
}

.demo[data-phase="repos"] .telephone__pret { display: inline-block; }
.demo[data-phase="repos"] .pointage--start,
.demo[data-phase="en-cours"] .pointage--stop { display: flex; }
.demo[data-phase="en-cours"] .telephone__chrono,
.demo[data-phase="termine"] .telephone__chrono,
.demo[data-phase="termine"] .telephone__fini { display: flex; }

/* Mobile : image fixe à l'état « Stop » (la démo n'est pas cliquable) */
@media (max-width: 767.98px) {
  .demo[data-phase] .telephone__pret,
  .demo[data-phase] .pointage--start,
  .demo[data-phase] .telephone__fini { display: none; }
  .demo[data-phase] .telephone__chrono,
  .demo[data-phase] .pointage--stop { display: flex; }

  .demo .telephone__centre { gap: 16px; }
  .demo .telephone__chrono strong { font-size: 26px; }
  .demo .telephone__chrono span { font-size: 9px; }
  .demo .telephone__adresse { font-size: 8.5px; }
  .demo .telephone__precision { font-size: 8px; }

  .demo .pointage {
    width: 150px;
    height: 150px;
  }

  .demo .pointage__rond {
    width: 132px;
    height: 132px;
  }

  .demo .pointage__mot { font-size: 22px; }
  .demo .pointage__aide { font-size: 8.5px; }

  .demo .telephone__barre {
    height: 38px;
    padding: 0 13px;
  }
}

@media (min-width: 768px) {
  .demo[data-phase="repos"] .demo__carte--aide,
  .demo[data-phase="en-cours"] .demo__carte--start,
  .demo[data-phase="termine"] .demo__carte--start,
  .demo[data-phase="termine"] .demo__carte--stop { display: flex; }

  .demo {
    flex: none;
    width: 560px;
    max-width: 100%;
    height: 620px;
    margin: 0 auto;
  }

  .demo__forme { margin-left: 0; }

  .demo__forme--bleue {
    left: 152px;
    top: 84px;
    width: 386px;
    height: 452px;
    border-radius: 72px;
  }

  .demo__forme--orange {
    left: 322px;
    top: 60px;
    width: 190px;
    height: 190px;
    border-radius: 56px;
  }

  .telephone {
    left: 282px;
    top: 62px;
    margin-left: 0;
    transform: perspective(1600px) rotateY(-13deg) rotateZ(-3.5deg);
    transform-origin: 50% 50%;
  }

  .demo__tuile--logo {
    left: 216px;
    top: 64px;
    width: 78px;
    height: 78px;
    margin-left: 0;
    border-radius: 24px;
  }

  .demo__tuile--logo img { height: 46px; }
}

@media (min-width: 1240px) {
  .demo { margin: 0; }
}

/* Références */
.references {
  border-block: 1px solid var(--filet-clair);
  background: var(--blanc);
}

.references__interieur {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 24px;
}

.references__texte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--texte-3);
  font-size: 0.844rem;
  line-height: 1.4;
}

.references__titre {
  color: var(--texte-4);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.references__logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

.references__nom {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte-4);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Logo d'un vrai client (avec son accord), lien vers son site */
.references__client a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  opacity: .78;
  transition: opacity .2s ease;
}

.references__client a:hover,
.references__client a:focus-visible { opacity: 1; }

.references__client img {
  width: auto;
  height: 38px;
}

.references__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  max-width: 100%;
  height: 44px;
  border: 1.5px dashed #C3CBD8;
  border-radius: var(--rayon-champ);
  color: var(--texte-pale);
  font-size: 0.6875rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .references__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
  }

  .references__nom { font-size: 1.25rem; }

  .references__client a { height: 52px; }
  .references__client img { height: 46px; }

  .references__logo {
    width: 150px;
    height: 52px;
    font-size: 0.75rem;
  }

  .references__texte { font-size: 0.906rem; gap: 8px; }
  .references__titre { font-size: 0.8125rem; }
}

@media (min-width: 1240px) {
  .references__interieur {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-block: 30px;
  }

  .references__texte { flex: none; }
  .references__logos { flex-wrap: nowrap; }
}

/* Prise en main : les trois étapes */
.etapes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.etape {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas:
    "numero titre"
    "numero duree"
    "numero texte";
  align-items: start;
  gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--filet-clair);
  border-radius: 16px;
  background: var(--blanc);
}

.etape__numero {
  display: flex;
  grid-area: numero;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--marine);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.etape__duree {
  grid-area: duree;
  justify-self: start;
  padding: 4px 10px;
  border-radius: var(--rayon-pilule);
  background: #FDEBD6;
  color: var(--orange-fonce);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.etape__illustration {
  display: flex;
  grid-area: illustration;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.etape__titre {
  grid-area: titre;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.25;
}

.etape__texte {
  grid-area: texte;
  color: var(--texte-3);
  font-size: 0.906rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding-top: 0;
  }

  .etape {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "numero duree"
      "illustration illustration"
      "titre titre"
      "texte texte";
    align-items: center;
    gap: 20px;
    padding: 26px 28px 30px;
    border-radius: var(--rayon-carte);
  }

  /* Zone de l'illustration : fond gris clair, l'image ne colle plus au texte (kit du 10/10/2026) */
  .etape__illustration {
    height: 176px;
    margin: 2px 0 8px;
    border-radius: 14px;
    background: #F4F6F9;
  }

  .etape__numero {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .etape__duree {
    justify-self: end;
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .etape__titre { font-size: 1.1875rem; }

  .etape__texte {
    margin-top: -12px;
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

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

/* Illustrations des étapes */
.mini-formulaire {
  width: 210px;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--blanc);
}

.mini-formulaire__titre {
  padding: 8px 12px;
  background: var(--filet-menu);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.mini-formulaire__corps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
}

.mini-formulaire__corps span {
  height: 22px;
  padding-left: 8px;
  border: 1px solid var(--filet);
  border-radius: 6px;
  color: #97A3B6;
  font-size: 10.5px;
  line-height: 20px;
}

.mini-formulaire__corps strong {
  height: 24px;
  border-radius: var(--rayon-petit);
  background: var(--marine);
  color: var(--blanc);
  font-size: 11px;
  line-height: 24px;
  text-align: center;
}

.mini-connexion {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icone-appli {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--degrade-marine);
  box-shadow: 0 12px 24px -14px rgba(10, 20, 40, .6);
}

.icone-appli img {
  width: auto;
  height: 34px;
}

.mini-connexion__bulle {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--fond);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.mini-connexion__bulle span {
  color: var(--texte-4);
  font-weight: 400;
}

/* Bloc « Toute la formation tient en une phrase » */
.formation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 18px;
  text-align: center;
}

.formation__texte {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation__titre {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.formation__texte p {
  color: #C9D3E6;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.formation__boutons {
  display: flex;
  order: 2;
  gap: 18px;
  padding-top: 4px;
}

.formation__atouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  order: 3;
  gap: 8px;
}

.formation__atouts li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 11px;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .1);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
}

.formation__atouts .icone-coche {
  display: none;
  margin-right: 8px;
}

@media (min-width: 768px) {
  .formation {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "texte boutons"
      "atouts boutons";
    align-items: center;
    gap: 14px 40px;
    padding: 32px 40px;
    border-radius: var(--rayon-carte);
    text-align: left;
  }

  .formation__texte { grid-area: texte; }
  .formation__titre { font-size: 1.375rem; line-height: 1.25; }
  .formation__texte p { font-size: 1.03rem; }

  .formation__atouts {
    grid-area: atouts;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 4px;
  }

  .formation__atouts li {
    padding: 9px 14px;
    font-size: 0.844rem;
  }

  .formation__atouts .icone-coche { display: block; }

  .formation__boutons {
    grid-area: boutons;
    gap: 14px;
    padding: 0;
  }
}

/* En images : illustration + emplacement de la vidéo */
.video {
  position: relative;
  aspect-ratio: 346 / 190;
  overflow: hidden;
  border: 1px solid var(--filet-clair);
  border-radius: 18px;
  background: var(--fond);
  box-shadow: 0 24px 40px -28px rgba(10, 20, 40, .45);
}

.video__illustration {
  width: 100%;
  height: 100%;
}

.video__releve {
  position: absolute;
  left: 36px;
  top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 10px 24px -16px rgba(31, 54, 99, .6);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.video__bouton {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 7px;
  border-radius: var(--rayon-pilule);
  background: var(--marine);
  box-shadow: 0 14px 28px -14px rgba(10, 20, 40, .7);
  color: var(--blanc);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.video__lecture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bouton);
}

.video__lecture svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 768px) {
  .video {
    align-self: center;
    width: 100%;
    max-width: 1040px;
    aspect-ratio: 2 / 1;
    border-radius: 26px;
    box-shadow: 0 40px 70px -40px rgba(10, 20, 40, .45);
  }

  .video__bouton {
    bottom: 34px;
    gap: 14px;
    height: 64px;
    padding: 0 26px 0 10px;
    box-shadow: 0 20px 40px -20px rgba(10, 20, 40, .7);
    font-size: 1rem;
  }

  .video__lecture {
    width: 46px;
    height: 46px;
  }

  .video__lecture svg {
    width: 18px;
    height: 18px;
  }
}

/* L'application (fond marine) */
.application {
  padding-block: 44px 46px;
  background:
    radial-gradient(320px 220px at 90% 4%, rgba(235, 148, 56, .22), rgba(235, 148, 56, 0) 70%),
    linear-gradient(180deg, var(--marine-profond) 0%, var(--marine) 100%);
}

.application .pile { gap: 26px; }
.application .titre-section { color: var(--blanc); }

@media (min-width: 768px) {
  .application {
    padding-block: 84px 90px;
    background:
      radial-gradient(900px 520px at 85% 8%, rgba(235, 148, 56, .2), rgba(235, 148, 56, 0) 70%),
      radial-gradient(800px 500px at 10% 100%, rgba(65, 96, 143, .55), rgba(65, 96, 143, 0) 70%),
      linear-gradient(180deg, var(--marine-profond) 0%, var(--marine) 100%);
  }

  .application .pile { gap: 56px; }
}

.fonctions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1024px) {
  .fonctions {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
  }
}

.fonction {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rayon-carte);
  background: rgba(255, 255, 255, .06);
}

.fonction__entete {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fonction__entete h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.fonction__entete p {
  color: var(--pied-texte);
  font-size: 0.875rem;
  line-height: 1.5;
}

.fonction__pointer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rond-pointage--grand { --d: 123px; }

.fonction__releve {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.releve {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 11px;
  border-radius: 11px;
  background: var(--blanc);
  box-shadow: 0 10px 24px -16px rgba(31, 54, 99, .6);
  color: var(--marine);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.releve .etiquette {
  margin-right: 7px;
}

.fonction__lieu {
  color: var(--pied-texte);
  font-size: 0.75rem;
  line-height: 1.4;
}

.tableau-pointages {
  overflow: hidden;
  border-radius: 12px;
  background: var(--blanc);
  color: var(--marine);
}

.tableau-pointages__entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--filet-menu);
  font-size: 13px;
  line-height: 1;
}

.tableau-pointages__entete span {
  width: 150px;
  height: 30px;
  margin-left: auto;
  padding-left: 12px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-pilule);
  color: var(--texte-4);
  font-size: 12px;
  line-height: 28px;
}

.tableau-pointages__ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--filet-menu);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
}

.tableau-pointages__ligne:first-child,
.tableau-pointages__entete + .tableau-pointages__ligne {
  border-top: 0;
}

.tableau-pointages__ligne > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fonction__carte {
  overflow: hidden;
  border-radius: 12px;
}

.fonction__carte svg {
  width: 100%;
  height: 130px;
}

.fonction__export {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fonction__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fonction__filtres span {
  padding: 8px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-champ);
  background: var(--blanc);
  color: var(--marine);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.fonction__fichiers {
  display: flex;
  gap: 12px;
}

.fonction__fichiers > span {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--filet);
  border-radius: 14px;
  background: var(--blanc);
  color: var(--marine);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.fonction__fichiers > span > span:last-child { min-width: 0; }

/* Nom du fichier exporté, en gris sous « Excel » */
.fichier__nom {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--texte-4);
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fichier {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: 42px;
  height: 50px;
  padding-bottom: 8px;
  border-radius: 6px;
  background: var(--marine);
  color: var(--blanc);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.fichier::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-bottom-left-radius: 4px;
  background: var(--orange);
}

@media (min-width: 768px) {
  .fonction {
    gap: 24px;
    padding: 30px;
    border-radius: 24px;
  }

  .fonction__entete { gap: 8px; }
  .fonction__entete h3 { font-size: 1.5rem; }
  .fonction__entete p { font-size: 0.97rem; }
  .fonction__pointer { gap: 24px; }
  .rond-pointage--grand { --d: 177px; }
  .fonction__releve { gap: 10px; }

  .releve .etiquette { margin-right: 8px; }

  .releve {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.875rem;
  }

  .fonction__lieu { font-size: 0.844rem; }

  .tableau-pointages {
    border: 1px solid var(--filet);
    border-radius: 14px;
  }

  .tableau-pointages__ligne {
    grid-template-columns: 1fr 80px 50px;
    gap: 0;
    padding: 9px 14px;
    font-size: 13px;
  }

  .fonction__carte {
    border: 1px solid var(--filet);
    border-radius: 14px;
  }

  .fonction__carte svg { height: 170px; }
}

/* Les deux garanties en bas de la section marine */
.garanties {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.garanties li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.garanties li > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.garanties__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(235, 148, 56, .16);
  color: var(--orange-sur-marine);
}

.garanties__icone svg {
  width: 19px;
  height: 19px;
}

.garanties h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.garanties p {
  color: #C9D3E6;
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .garanties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 48px;
  }

  .garanties li {
    gap: 16px;
    padding-top: 24px;
  }

  .garanties li > div { gap: 6px; }

  .garanties__icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .garanties__icone svg {
    width: 21px;
    height: 21px;
  }

  .garanties h3 { font-size: 1.125rem; }
  .garanties p { font-size: 0.9375rem; }
}

/* Témoignage et chiffres */
.temoignage__interieur {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.temoignage__citation {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.temoignage blockquote {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
}

.temoignage blockquote svg {
  display: none;
  margin-top: 4px;
}

.temoignage blockquote p {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
}

.temoignage figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.temoignage figcaption strong {
  font-size: 0.9375rem;
  line-height: 1.2;
}

.temoignage figcaption span {
  color: var(--texte-4);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.chiffres {
  display: flex;
  gap: 8px;
}

.chiffres li {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--blanc);
  box-shadow: 0 14px 30px -24px rgba(31, 54, 99, .55);
}

.chiffres li {
  min-width: 0;
}

.chiffres strong {
  font-size: clamp(1rem, 5vw, 1.25rem); /* 18 px à 360 px de large, 20 px dès 400 px */
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.chiffres span {
  color: var(--texte-4);
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .temoignage__citation { gap: 22px; }
  .temoignage blockquote svg { display: block; }
  .temoignage blockquote p { font-size: 1.3125rem; line-height: 1.5; }
  .temoignage figcaption { gap: 3px; }
  .temoignage figcaption strong { font-size: 1rem; }
  .temoignage figcaption span { font-size: 0.875rem; }

  .chiffres { gap: 14px; }

  .chiffres li {
    gap: 6px;
    padding: 22px 24px;
    border-radius: 18px;
    box-shadow: var(--ombre-carte);
  }

  .chiffres strong { font-size: 2.125rem; }
  .chiffres span { font-size: 0.875rem; line-height: 1.45; }
}

@media (min-width: 1240px) {
  .temoignage__interieur {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 56px;
  }

  .chiffres { flex-direction: column; }
}

/* Tarif */
.tarif {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarif__texte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarif__texte .intro {
  font-size: 0.97rem;
}

.tarif__note {
  color: var(--texte-4);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tarif__carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.tarif__prix {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--filet-menu);
}

.tarif__des {
  color: var(--texte-4);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tarif__montant {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tarif__montant strong {
  flex: none;
  font-size: 2.875rem;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.tarif__montant > span {
  padding-bottom: 3px; /* dernière ligne alignée sur la ligne de base du prix (46 px) */
  color: var(--texte-4);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.tarif__precision {
  padding-top: 4px;
  color: var(--texte-4);
  font-size: 0.906rem;
  line-height: 1.6;
}

.tarif__liste { order: 2; }

.tarif__offre {
  display: flex;
  align-items: center;
  order: 3;
  gap: 9px;
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--creme);
  color: var(--orange-fonce);
  font-size: 0.844rem;
  font-weight: 600;
  line-height: 1.35;
}

.tarif__action {
  order: 4;
  padding-top: 6px;
}

.tarif__bouton {
  background: var(--bouton);
  color: var(--blanc);
}

.tarif__bouton:hover {
  background: var(--bouton-survol);
  color: var(--blanc);
}

@media (min-width: 768px) {
  .tarif {
    align-items: center;
    gap: 40px;
  }

  .tarif__texte .intro { font-size: 1.0625rem; }

  .tarif__carte {
    gap: 0;
    width: 440px;
    max-width: 100%;
    padding: 0;
    border-radius: 22px;
    box-shadow: 0 30px 60px -40px rgba(31, 54, 99, .55);
  }

  .tarif__prix {
    gap: 8px;
    padding: 30px 28px 24px;
    border-bottom: 0;
    background: #FAF9F6;
  }

  .tarif__des {
    font-size: 0.875rem;
    letter-spacing: .06em;
  }

  .tarif__montant { gap: 10px; }
  .tarif__montant strong { font-size: 4rem; }
  .tarif__montant > span { padding-bottom: 5px; font-size: 0.9375rem; } /* prix de 64 px */

  .tarif__offre {
    order: 2;
    gap: 10px;
    margin: 0;
    padding: 14px 28px;
    border-radius: 0;
    font-size: 0.906rem;
    line-height: 1.4;
  }

  .tarif__offre .badge {
    padding: 5px 11px;
    font-size: 0.72rem;
  }

  /* .tarif__carte devant : sinon « ul[class] { padding: 0 } » (remise à zéro) l'emporte
     et les coches se collent au bord gauche de la carte */
  .tarif__carte .tarif__liste {
    order: 3;
    gap: 12px;
    padding: 22px 28px 0;
  }

  .tarif__action { padding: 22px 28px 26px; }

  .tarif__bouton {
    min-height: 52px;
    border-radius: 13px;
    background: var(--marine);
    font-size: 0.9375rem;
  }

  .tarif__bouton:hover { background: var(--marine-survol); }
}

@media (min-width: 1240px) {
  .tarif {
    flex-direction: row;
    justify-content: center;
    gap: 72px;
  }

  .tarif__texte { max-width: 460px; }
  .tarif__carte { flex: none; }
}

/* Ce que dit la loi + livre blanc */
.loi {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loi__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.loi__texte .intro { font-size: 0.97rem; }

.livre {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--creme);
}

/* Couverture du livre blanc dessinée en CSS (tailles en em pour la réduire d'un coup) */
.couverture {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 15em;
  height: 21.2em;
  overflow: hidden;
  padding: 1.4em 1.2em;
  border-radius: 2px;
  background: var(--marine);
  box-shadow: 0 30px 50px -24px rgba(10, 20, 40, .55), inset 6px 0 0 rgba(0, 0, 0, .14);
  color: var(--blanc);
  font-size: 5.6px;
  transform: rotate(-3deg);
}

.couverture::after {
  content: "";
  position: absolute;
  right: -3.8em;
  bottom: -3.8em;
  width: 12.5em;
  height: 12.5em;
  border: 1.6em solid rgba(235, 148, 56, .18);
  border-radius: 50%;
}

.couverture__logo {
  display: flex;
  align-items: center;
  gap: .4em;
}

.couverture__logo .img-pin { width: auto; height: 1.5em; }
.couverture__logo .img-nom { width: auto; height: .8em; }

.couverture__titre {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .6em;
}

.couverture__filet {
  width: 1.6em;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.couverture__type {
  color: var(--orange-sur-marine);
  font-size: .6em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.couverture strong {
  font-size: 1.1em;
  line-height: 1.2;
}

.couverture__edition {
  color: var(--pied-texte);
  font-size: .6em;
  font-weight: 500;
  line-height: 1.3;
}

.livre__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.livre__surtitre {
  color: var(--orange-fonce);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.livre__titre {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.livre .lien-fleche {
  min-height: 32px;
  font-size: 0.906rem;
}

.livre__description {
  color: var(--texte-3);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .loi { gap: 40px; }
  .loi__texte { gap: 18px; }
  .loi__texte .intro { font-size: 1.0625rem; }

  .livre {
    gap: 28px;
    margin-top: 0;
    padding: 32px;
    border-radius: 22px;
  }

  .couverture {
    border-radius: 4px;
    font-size: 10px;
  }

  .livre__texte { gap: 14px; }

  .livre__surtitre {
    font-size: 0.75rem;
    letter-spacing: .1em;
  }

  .livre__titre {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .livre .bouton {
    min-height: 52px;
    padding: 0 26px;
    font-size: 0.9375rem;
  }
}

@media (min-width: 1240px) {
  .loi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
  }
}

/* Questions fréquentes + appel à la démo */
.faq-accueil {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.faq-accueil__questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.questions {
  margin: 0;
}

.questions > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 0;
  border-top: 1px solid var(--filet);
}

.questions dt {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.questions dd {
  margin: 0;
  color: var(--texte-2);
  font-size: 0.906rem;
  line-height: 1.6;
}

.faq-accueil .lien-fleche {
  font-size: 0.9375rem;
}

/* Sur mobile, l'appel à la démo prend toute la largeur jusqu'au pied de page */
.section--faq {
  padding-bottom: 0;
}

.appel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline: calc(var(--marge) * -1);
  padding: 40px var(--marge);
}

.appel__titre {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.appel__texte {
  color: #C9D3E6;
  font-size: 0.97rem;
  line-height: 1.6;
}

.appel__boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.appel__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  font-size: 0.875rem;
  line-height: 1.6;
}

.appel__contact strong {
  font-size: 1rem;
  line-height: 1.2;
}

.appel__contact > span:not(.appel__filet) {
  color: #C9D3E6;
}

.appel__filet {
  width: 30px;
  height: 3px;
  margin: 8px 0;
  border-radius: 2px;
  background: var(--orange);
}

.appel__contact a {
  color: var(--blanc);
  text-decoration: none;
}

.appel__contact a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .section--faq {
    padding-bottom: var(--espace-section);
  }

  .faq-accueil__questions { gap: 22px; }

  .questions > div {
    gap: 8px;
    padding: 20px 0;
  }

  .questions dt { font-size: 1.0625rem; }

  .questions dd {
    color: var(--texte-3);
    font-size: 0.97rem;
  }

  .faq-accueil .lien-fleche { font-size: 1rem; }

  .appel {
    margin-inline: 0;
    padding: 34px;
    border-radius: 22px;
  }

  .appel__titre { font-size: 2rem; }
  .appel__texte { font-size: 1rem; }
  .appel__boutons { padding-top: 6px; }

  .appel__contact {
    gap: 4px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0;
    background: none;
    color: #C9D3E6;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .appel__contact strong {
    color: var(--blanc);
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .appel__contact a { color: #C9D3E6; }
}

@media (min-width: 1240px) {
  .faq-accueil {
    display: grid;
    grid-template-columns: 1fr 440px;
    align-items: start;
    gap: 64px;
  }
}


/* 10. Pages intérieures (Législation, FAQ, Livre blanc, Contact, Mentions, 404)
   ========================================================================== */

/* Tailles de la couverture du livre blanc (voir includes/composants.php) */
.couverture.couverture--grande { font-size: 10.67px; border-radius: 4px; }
.couverture.couverture--mini { font-size: 4.27px; transform: none; }

@media (min-width: 768px) {
  .couverture.couverture--grande { font-size: 14.67px; border-radius: 6px; }
}

/* En-tête de page (surtitre, H1, introduction) */
.page-entete {
  padding-block: 30px 26px;
}

.page-entete .conteneur {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-entete .titre-page {
  max-width: 900px;
}

.page-entete .intro {
  max-width: 760px;
}

@media (min-width: 768px) {
  .page-entete { padding-block: 64px 48px; }
  .page-entete .conteneur { gap: 20px; }
}

@media (min-width: 1240px) {
  .page-entete { padding-block: 88px 56px; }
}

/* Petit filet orange seul, au-dessus d'un titre */
.filet {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

/* Encadré crème avec filet orange à gauche */
.encadre {
  padding: 16px 18px;
  border-left: 4px solid var(--orange);
  border-radius: 14px;
  background: var(--creme);
  font-size: 0.906rem;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .encadre {
    padding: 20px 24px;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Liste à puces rondes orange */
.liste-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.liste-points li {
  position: relative;
  padding-left: 19px;
  color: var(--texte-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

@media (min-width: 768px) {
  .liste-points { gap: 12px; }

  .liste-points li {
    padding-left: 22px;
    font-size: 1.03rem;
    line-height: 1.6;
  }

  .liste-points li::before {
    top: 10px;
    width: 8px;
    height: 8px;
  }
}

/* Liste de liens pleine largeur avec chevron (sommaire mobile, 404 mobile) */
.liste-liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-top: 1px solid var(--filet-menu);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.liste-liens__titre,
.sommaire__titre {
  color: var(--texte-4);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .liste-liens__titre,
  .sommaire__titre { font-size: 0.8125rem; }
}

/* Cartes d'appoint (colonne de droite) */
.carte-appoint {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
}

.carte-appoint__titre {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.carte-appoint p:not([class]) {
  color: var(--texte-3);
  font-size: 0.906rem;
  line-height: 1.55;
}

.fond-marine.carte-appoint p:not([class]) {
  color: #C9D3E6;
}

.carte-appoint--blanche {
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.carte-appoint--creme { background: var(--creme); }
.carte-appoint--grise { background: var(--fond); }

@media (min-width: 768px) {
  .carte-appoint {
    gap: 14px;
    padding: 26px;
  }
}

/* Contact « Votre contact » */
.carte-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 18px;
}

.carte-contact__surtitre {
  color: var(--orange-sur-marine);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.carte-contact__nom {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.carte-contact__fonction {
  color: #C9D3E6;
  font-size: 0.844rem;
  line-height: 1;
}

.carte-contact__filet {
  width: 30px;
  height: 3px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--orange);
}

.carte-contact__coordonnees {
  font-size: 0.906rem;
  line-height: 1.7;
}

.carte-contact__coordonnees a {
  color: var(--blanc);
  text-decoration: none;
}

.carte-contact__coordonnees a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carte-contact__coordonnees span {
  color: #C9D3E6;
}

@media (min-width: 768px) {
  .carte-contact {
    gap: 10px;
    padding: 28px;
    border-radius: 20px;
  }

  .carte-contact__surtitre { font-size: 0.75rem; }
  .carte-contact__nom { font-size: 1.25rem; }
  .carte-contact__fonction { font-size: 0.906rem; }
  .carte-contact__filet { width: 34px; margin: 6px 0; }
  .carte-contact__coordonnees { font-size: 0.9375rem; }
}

/* Message de confirmation après envoi d'un formulaire */
.confirmation {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
}

.confirmation__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bouton);
}

.confirmation__icone .icone-coche {
  width: 20px;
  height: 20px;
  stroke: var(--blanc);
}

.confirmation__texte {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.confirmation__titre {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.confirmation__texte p:last-child {
  color: #C9D3E6;
  font-size: 0.844rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .confirmation { padding: 22px 24px; }
  .confirmation__titre { font-size: 1.0625rem; }
  .confirmation__texte p:last-child { font-size: 0.875rem; }
}

/* Formulaires */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.champ label {
  font-size: 0.844rem;
  font-weight: 600;
  line-height: 1.2;
}

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

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--blanc);
  color: var(--marine);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--texte-pale);
}

.champ select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B7E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.champ textarea {
  height: 110px;
  padding: 12px 14px;
  resize: vertical;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--marine);
  outline-offset: 1px;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--texte-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  cursor: pointer;
}

.case input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--marine);
}

.formulaire__mention {
  color: var(--texte-4);
  font-size: 0.75rem;
  line-height: 1.55;
}

.formulaire__mention a {
  font-weight: 600;
}

@media (min-width: 768px) {
  .formulaire {
    gap: 18px;
    padding: 32px;
    border: 1px solid var(--filet-clair);
    border-radius: 22px;
    box-shadow: 0 30px 60px -36px rgba(31, 54, 99, .55);
  }

  .champ { gap: 8px; }
  .champ label { font-size: 0.875rem; }

  .champ input,
  .champ select,
  .champ textarea {
    height: 52px;
    padding: 0 16px;
  }

  .champ textarea {
    height: 140px;
    padding: 14px 16px;
  }

  .case {
    gap: 12px;
    font-size: 0.875rem;
  }

  .formulaire__mention { font-size: 0.78rem; }
}

/* Erreurs de saisie (rouge foncé : contraste AA sur blanc) */
:root {
  --erreur: #B42318;
  --erreur-fond: #FEF3F2;
}

.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--erreur);
  box-shadow: 0 0 0 1px var(--erreur);
}

.champ__erreur {
  color: var(--erreur);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.resume-erreurs {
  padding: 14px 16px;
  border-left: 4px solid var(--erreur);
  border-radius: 12px;
  background: var(--erreur-fond);
  color: var(--texte-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.resume-erreurs:focus-visible {
  outline-offset: 2px;
}

.resume-erreurs p {
  color: var(--erreur);
  font-weight: 600;
}

.resume-erreurs ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.resume-erreurs a {
  font-weight: 600;
}

.contact-formulaire .resume-erreurs {
  grid-column: 1 / -1;
}

/* Champ piège anti-spam : hors de l'écran, jamais vu ni atteint au clavier */
.piege {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Législation : sommaire « Sur cette page » */
.sommaire {
  padding-block: 20px 8px;
  border-bottom: 1px solid var(--filet-clair);
  background: var(--blanc);
}

.sommaire .conteneur {
  display: flex;
  flex-direction: column;
}

.sommaire__titre {
  padding-bottom: 10px;
}

@media (min-width: 768px) {
  .sommaire { padding-block: 24px; }

  .sommaire .conteneur {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .sommaire__titre {
    margin-right: 10px;
    padding: 0;
  }

  .sommaire ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .sommaire .liste-liens a {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-pilule);
    font-size: 0.906rem;
    line-height: 1;
  }

  .sommaire .liste-liens a:hover {
    border-color: var(--marine);
  }

  .sommaire .icone-fleche { display: none; }
}

/* Législation : avertissement (chevauche le sommaire sur écran large) */
.avertissement {
  padding-block: 26px 0;
}

.avertissement__boite {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--creme);
}

.avertissement__icone {
  display: none;
}

.avertissement__boite p {
  color: var(--texte-2);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .avertissement {
    position: relative;
    z-index: 1;
    margin-bottom: -20px;
    padding: 0;
    transform: translateY(-20px); /* chevauche le trait du sommaire, sans toucher ses boutons (24 px d'espace) */
  }

  .avertissement__boite {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    border-radius: 18px;
    box-shadow: 0 20px 40px -30px rgba(31, 54, 99, .5);
  }

  .avertissement__icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--orange);
    color: var(--blanc);
  }

  .avertissement__icone svg { stroke-width: 2.2; }

  .avertissement__boite p {
    flex: 1;
    font-size: 0.97rem;
    line-height: 1.6;
  }

  .avertissement__boite .bouton {
    flex: none;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 13px;
    background: var(--marine);
    font-size: 0.906rem;
  }

  .avertissement__boite .bouton:hover { background: var(--marine-survol); }
}

/* Législation : blocs thématiques (titre à gauche, texte à droite sur ordinateur) */
.bloc-loi {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bloc-loi__titre {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bloc-loi__titre h2 {
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.bloc-loi__contenu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}

.bloc-loi__contenu > p {
  color: var(--texte-2);
  font-size: 0.97rem;
  line-height: 1.6;
}

.etiquette-texte {
  display: inline-block;
  padding: 7px 12px;
  border-radius: var(--rayon-pilule);
  background: #E7ECF3;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.bloc-loi .puces-texte { gap: 8px; }

.bloc-loi .puces-texte li {
  padding: 7px 12px;
  font-size: 0.78rem;
}

@media (min-width: 768px) {
  .section.bloc-loi-section { padding-block: 72px; }

  .bloc-loi__titre { gap: 14px; }
  .bloc-loi__titre h2 { font-size: 2rem; }
  .bloc-loi__contenu { gap: 18px; }
  .bloc-loi__contenu > p { font-size: 1.0625rem; }

  .etiquette-texte {
    padding: 8px 14px;
    font-size: 0.844rem;
  }

  .bloc-loi .puces-texte { gap: 10px; }

  .bloc-loi .puces-texte li {
    padding: 8px 14px;
    font-size: 0.844rem;
  }

  .fond-ivoire { background: #FAF9F6; }
}

@media (min-width: 1240px) {
  .bloc-loi {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 64px;
  }

  .bloc-loi--pleine {
    display: flex;
    gap: 32px;
  }
}

/* Législation : les cinq exigences */
.exigences {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exigence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.exigence__numero {
  color: var(--orange-chiffres);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
}

.exigence h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.exigence p {
  color: var(--texte-3);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .exigences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .exigence {
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--filet);
    box-shadow: none;
  }

  .exigence__numero { font-size: 2.125rem; }
  .exigence h3 { font-size: 1.125rem; }
  .exigence p { font-size: 0.906rem; }
}

@media (min-width: 1240px) {
  .exigences { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Législation : ce que GeoPrest apporte (fond marine) */
.apport {
  padding-block: 40px;
}

.apport__grille {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apport__texte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apport__texte h2 {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.apport .liste-coches li {
  font-size: 0.97rem;
}

.apport__panneau {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apport__panneau p {
  color: #C9D3E6;
  font-size: 0.906rem;
  line-height: 1.6;
}

.apport__boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

@media (min-width: 768px) {
  .apport { padding-block: 80px; }

  .apport__grille { gap: 40px; }
  .apport__texte { gap: 18px; }
  .apport__texte h2 { font-size: 2.375rem; }
  .apport .liste-coches { gap: 12px; padding-top: 6px; }

  .apport__panneau {
    gap: 24px;
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
  }

  .apport__panneau p { font-size: 1.0625rem; }

  .apport__boutons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
  }

  .apport__boutons .bouton {
    min-height: 52px;
    font-size: 0.9375rem;
  }
}

@media (min-width: 1240px) {
  .apport__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 64px;
  }
}

/* Mise en page à deux colonnes : contenu + colonne de droite */
.deux-colonnes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.colonne-droite {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .section.section--page { padding-block: 64px 96px; }
}

@media (min-width: 1240px) {
  .deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 64px;
  }

  .deux-colonnes--large { grid-template-columns: 1fr 400px; gap: 56px; }
}

/* FAQ : colonne de droite en bande grise pleine largeur sur mobile */
@media (max-width: 767.98px) {
  .faq-page .colonne-droite {
    margin: 10px calc(var(--marge) * -1) calc(var(--espace-section) * -1);
    padding: 26px var(--marge);
    background: var(--fond);
  }
}

@media (min-width: 768px) {
  .faq-page .carte-appoint--question {
    background: var(--marine);
    box-shadow: none;
    color: var(--blanc);
  }

  .faq-page .carte-appoint--question p:not([class]) { color: #C9D3E6; }
  .faq-page .carte-appoint--question .carte-appoint__titre { font-size: 1.1875rem; }
}

/* FAQ : accordéon */
.accordeon {
  border-bottom: 1px solid var(--filet);
}

.accordeon__item {
  border-top: 1px solid var(--filet);
}

.accordeon__question {
  margin: 0;
  font-size: inherit;
}

.accordeon__question button {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: 0 10px;
  width: 100%;
  min-height: 44px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--marine);
  text-align: left;
  cursor: pointer;
}

.accordeon__numero {
  color: var(--orange-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.accordeon__intitule {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.accordeon__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E7ECF3;
  color: var(--marine);
  transition: background-color .15s ease;
}

.accordeon__icone svg { stroke-width: 2.4; }

.accordeon__question button[aria-expanded="true"] .accordeon__icone {
  background: var(--marine);
  color: var(--blanc);
}

.accordeon__question button[aria-expanded="true"] .vertical {
  display: none;
}

.accordeon__question button:hover .accordeon__intitule {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accordeon__reponse {
  padding: 0 0 16px 38px;
  color: var(--texte-2);
  font-size: 0.906rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .accordeon__question button {
    grid-template-columns: 44px 1fr 36px;
    gap: 0 12px;
    padding: 24px 0;
  }

  .accordeon__numero {
    font-size: 0.9375rem;
    line-height: 1;
  }

  .accordeon__intitule {
    font-size: 1.1875rem;
    line-height: 1.4;
  }

  .accordeon__icone {
    width: 36px;
    height: 36px;
  }

  .accordeon__reponse {
    padding: 0 64px 28px 56px;
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Livre blanc */
.lb {
  display: grid;
  grid-template-areas:
    "intro"
    "guide"
    "formulaire";
}

.lb__intro {
  display: flex;
  flex-direction: column;
  grid-area: intro;
  gap: 16px;
  padding-bottom: 26px;
}

.lb__presentation {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb__presentation .couverture {
  align-self: center;
  margin: 6px 0;
}

.lb__textes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb__textes p {
  color: var(--texte-3);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* Bandes pleine largeur sur mobile (blanche puis grise) */
.lb__guide,
.lb__formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 26px;
}

.lb__guide {
  grid-area: guide;
  background: var(--blanc);
  box-shadow: 0 0 0 100vmax var(--blanc);
  clip-path: inset(0 -100vmax);
}

.lb__formulaire {
  grid-area: formulaire;
}

.guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.guide__titre {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.guide .liste-coches { gap: 9px; }

.formulaire__entete {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formulaire__titre {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.formulaire__sous-titre {
  color: var(--texte-4);
  font-size: 0.844rem;
  line-height: 1.5;
}

.confirmation__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--blanc);
  color: var(--marine);
  font-size: 0.906rem;
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 768px) {
  .lb__intro { gap: 28px; }

  .lb__presentation {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding-top: 8px;
  }

  .lb__presentation .couverture { align-self: flex-start; margin: 0; }
  .lb__textes p { color: var(--texte-2); font-size: 1.03rem; }

  .lb__guide {
    padding-top: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }

  .guide {
    gap: 14px;
    padding: 28px;
    border: 1px solid var(--filet);
    border-radius: 20px;
    box-shadow: none;
  }

  .guide__titre { font-size: 1.125rem; }

  .guide .liste-coches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
  }

  .formulaire__titre { font-size: 1.375rem; }
  .formulaire__sous-titre { font-size: 0.906rem; }
}

@media (min-width: 1240px) {
  .lb {
    grid-template-columns: 1fr 480px;
    grid-template-areas:
      "intro formulaire"
      "guide formulaire";
    align-items: start;
    column-gap: 72px;
  }

  .lb__formulaire { padding-top: 0; }
}

/* Contact */
.contact-formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-formulaire__bas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .contact-formulaire .formulaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding: 36px;
    box-shadow: 0 30px 60px -40px rgba(31, 54, 99, .5);
  }

  .contact-formulaire .champ--large,
  .contact-formulaire__bas {
    grid-column: 1 / -1;
  }

  .contact-formulaire__bas {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .contact-formulaire__bas .bouton {
    flex: none;
    padding: 0 34px;
  }

  .contact-formulaire__bas .formulaire__mention { font-size: 0.8125rem; }
}

.carte-livre {
  display: flex;
  align-items: center;
  gap: 18px;
}

.carte-livre > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte-livre p {
  color: var(--texte-3);
  font-size: 0.906rem;
  line-height: 1.55;
}

/* Mentions légales */
.mentions__article {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 0;
  border-top: 1px solid var(--filet);
}

.mentions__article h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
}

.mentions__article p {
  color: var(--texte-2);
  font-size: 0.906rem;
  line-height: 1.7;
}

.mentions__article a { font-weight: 600; }

.a-completer {
  padding: 1px 6px;
  border-radius: 5px;
  background: #FDEBD6;
  color: var(--orange-fonce);
  font-weight: 600;
}

@media (min-width: 768px) {
  .section.mentions { padding-block: 48px 96px; }

  .mentions__contenu { max-width: 860px; }

  .mentions__article {
    gap: 12px;
    padding: 30px 0;
  }

  .mentions__article h2 { font-size: 1.5rem; }
  .mentions__article p { font-size: 1rem; }
}

.carte-appoint__surtitre {
  color: var(--orange-fonce);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Page 404 */
.erreur {
  padding-block: 26px;
}

.erreur__grille {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.erreur__texte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.erreur__boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.erreur__liens {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.erreur__liens .liste-liens__titre {
  padding-bottom: 10px;
}

.erreur__liens .liste-liens a {
  border-top-color: var(--filet-clair);
}

.erreur__illustration {
  position: relative;
  align-self: center;
  order: -1;
  width: 240px;
  height: 240px;
  margin: 6px 0 4px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--blanc);
  box-shadow: 0 30px 60px -40px rgba(31, 54, 99, .5);
}

.erreur__illustration svg {
  width: 100%;
  height: 100%;
}

.erreur__illustration span {
  position: absolute;
  left: 50%;
  bottom: 19px;
  padding: 5px 8px;
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  box-shadow: 0 10px 24px -16px rgba(31, 54, 99, .6);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .erreur { padding-block: 72px 96px; }
  .erreur__texte { gap: 22px; }
  .erreur .intro { max-width: 620px; }

  .erreur__boutons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
  }

  .erreur__liens {
    gap: 4px;
    max-width: 620px;
    padding-top: 22px;
    border-top: 1px solid var(--filet);
  }

  .erreur__liens .liste-liens__titre { padding-bottom: 6px; }

  .erreur__liens .liste-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
  }

  .erreur__liens .liste-liens a {
    min-height: 44px;
    border: 0;
    font-size: 1rem;
  }

  .erreur__liens .liste-liens a::after {
    content: "→";
  }

  .erreur__liens .icone-fleche { display: none; }

  .erreur__illustration {
    order: 0;
    width: 360px;
    height: 360px;
    border-radius: 24px;
  }

  .erreur__illustration span {
    bottom: 28px;
    padding: 9px 14px;
    font-size: 0.875rem;
  }
}

@media (min-width: 1240px) {
  .erreur { padding-block: 96px 110px; }

  .erreur__grille {
    display: grid;
    grid-template-columns: 1fr 440px;
    align-items: center;
    gap: 72px;
  }

  .erreur .titre-page { max-width: 700px; }

  .erreur__illustration {
    width: 440px;
    height: 440px;
    margin: 0;
    border-radius: 28px;
  }

  .erreur__illustration span { bottom: 34px; }
}


/* 11. Animations (discrètes : survol, apparition, téléphone, compteurs, en-tête)
   Toutes coupées si l'appareil demande moins d'animations (section 12).
   ========================================================================== */
:root {
  --courbe-douce: cubic-bezier(.22, .61, .36, 1);
  --ombre-survol: 0 26px 44px -26px rgba(31, 54, 99, .45);
}

/* 1. Réactions au survol (souris uniquement : pas d'effet collé sur écran tactile) */
.bouton {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .25s var(--courbe-douce), box-shadow .25s var(--courbe-douce);
}

.etape,
.fonction,
.chiffres li,
.carte-appoint,
.exigence,
.guide,
.livre,
.tarif__carte,
.references__logo {
  transition: transform .3s var(--courbe-douce), box-shadow .3s var(--courbe-douce),
              border-color .3s ease, background-color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bouton:hover {
    transform: translateY(-2px);
  }

  .bouton--action:hover {
    box-shadow: 0 14px 26px -14px rgba(180, 95, 10, .75);
  }

  .bouton--marine:hover,
  .tarif__bouton:hover {
    box-shadow: 0 14px 26px -14px rgba(31, 54, 99, .7);
  }

  .bouton--contour:hover {
    box-shadow: 0 12px 24px -16px rgba(31, 54, 99, .45);
  }

  .bouton:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .etape:hover,
  .chiffres li:hover,
  .carte-appoint--blanche:hover,
  .exigence:hover,
  .guide:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-survol);
  }

  .etape:hover,
  .exigence:hover {
    border-color: transparent;
  }

  .livre:hover,
  .tarif__carte:hover {
    transform: translateY(-4px);
  }

  .fonction:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .24);
    background-color: rgba(255, 255, 255, .09);
  }

  .livre:hover .couverture {
    transform: rotate(-1deg) translateY(-3px);
  }

  .references__logo:hover {
    border-color: var(--chevron);
  }

  .lien-fleche::after {
    transition: transform .25s var(--courbe-douce);
  }

  .lien-fleche:hover::after {
    transform: translateX(5px);
  }

  .nav-principale a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--courbe-douce);
  }

  .nav-principale a:not([aria-current]):hover::before {
    transform: scaleX(1);
  }
}

.couverture {
  transition: transform .4s var(--courbe-douce);
}

/* 2. Apparition au défilement (classes posées par site.js, jamais sans JavaScript) */
.a-apparaitre {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--courbe-douce), transform .7s var(--courbe-douce);
  transition-delay: var(--delai, 0s);
}

.a-apparaitre.apparu {
  opacity: 1;
  transform: none;
}

/* Une fois apparu, l'élément retrouve ses transitions de survol sans délai */
.a-apparaitre.apparu.fini {
  transition-delay: 0s;
}

/* 3. Le téléphone de l'accueil flotte, le bouton Start « respire » */
@keyframes flotter {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes respirer {
  0% { box-shadow: 0 0 0 0 rgba(31, 54, 99, .4); }
  70% { box-shadow: 0 0 0 16px rgba(31, 54, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 54, 99, 0); }
}

@media (min-width: 768px) {
  .demo .telephone {
    animation: flotter 6s ease-in-out infinite;
  }

  .demo__tuile--logo {
    animation: flotter 7s ease-in-out -2s infinite;
  }

  .demo__tuile--broche {
    animation: flotter 5.5s ease-in-out -1s infinite;
  }

  .demo[data-phase="repos"] .pointage--start {
    animation: respirer 2.4s ease-out infinite;
  }

  .demo__carte {
    animation: apparition-carte .45s var(--courbe-douce);
  }
}

@keyframes apparition-carte {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

/* 6. Illustration « En images » : le technicien lève son téléphone, la broche tombe sur la maison.
   site.js pose .video--pret (position de départ) puis .video--anime quand l'illustration est visible.
   Sans ces classes (sans JavaScript, ou mouvement réduit), on voit simplement le dessin final. */
.illu-bras,
.illu-ecran-start,
.illu-broche,
.illu-onde {
  transform-box: fill-box;
}

.illu-bras { transform-origin: 10% 92%; }            /* l'épaule */
.illu-ecran-start { transform-origin: center; }
.illu-broche { transform-origin: 50% 100%; }          /* la pointe de la broche */
.illu-onde { transform-origin: center; opacity: 0; }

.video--pret .illu-bras { transform: rotate(40deg); }
.video--pret .illu-broche { opacity: 0; transform: translateY(-90px); }
.video--pret .video__releve { opacity: 0; transform: translateY(-8px); }

.video--anime .illu-bras {
  animation: illu-lever .9s var(--courbe-douce) .3s both;
}

.video--anime .illu-ecran-start {
  animation: illu-pulsation .7s ease-out 1.15s both;
}

.video--anime .illu-broche {
  animation: illu-tomber .75s cubic-bezier(.34, 1.45, .55, 1) 1.55s both;
}

.video--anime .illu-onde {
  animation: illu-onde 1.1s ease-out 2.15s both;
}

.video--anime .video__releve {
  animation: illu-releve .5s var(--courbe-douce) 2.4s both;
}

.video--anime .illu-nuage {
  animation: illu-nuage 16s ease-in-out infinite alternate;
}

.video--anime .illu-nuage--lent {
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

@keyframes illu-lever {
  from { transform: rotate(40deg); }
  to { transform: none; }
}

@keyframes illu-pulsation {
  0%, 100% { transform: none; }
  40% { transform: scale(1.18); }
}

@keyframes illu-tomber {
  from { opacity: 0; transform: translateY(-90px); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes illu-onde {
  from { opacity: .7; transform: scale(.3); }
  to { opacity: 0; transform: scale(1.8); }
}

@keyframes illu-releve {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes illu-nuage {
  from { transform: translateX(-24px); }
  to { transform: translateX(24px); }
}

/* 5. En-tête collé en haut, translucide, plus compact quand on fait défiler */
.entete {
  position: sticky;
  top: 0;
  transition: box-shadow .3s ease, background-color .3s ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }

  /* Menu ouvert : fond plein pour la lisibilité */
  .entete:has(.burger[aria-expanded="true"]) {
    background: var(--blanc);
  }
}

.entete__barre {
  transition: height .3s var(--courbe-douce);
}

.entete .logo__pin,
.entete .logo__nom {
  transition: height .3s var(--courbe-douce);
}

.entete--compacte {
  box-shadow: 0 10px 30px -18px rgba(31, 54, 99, .35);
}

.entete--compacte .entete__barre {
  height: 56px;
}

@media (min-width: 1440px) {
  .entete--compacte .entete__barre { height: 68px; }
  .entete--compacte .logo__pin { height: 36px; }
  .entete--compacte .logo__nom { height: 18px; }
}

/* Les ancres (#facilite, #europe…) ne se cachent pas sous l'en-tête collé */
html {
  scroll-padding-top: calc(var(--hauteur-entete) + 16px);
}


/* 12. Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}