/* ═══════════════════════════════════════════════════════════════════
   CHARTE LÉON RH — sol crème, titres à empattements, couleurs unifiées
   ═══════════════════════════════════════════════════════════════════
   Chargée APRÈS style.css sur toutes les pages. Elle ne remplace pas
   style.css : elle en redéfinit les jetons et corrige les règles qui
   dataient du design marine-sur-blanc.

   À terme son contenu doit remonter dans style.css. Tant qu'on itère,
   la garder à part permet de comparer avant/après en retirant une
   seule ligne de <link>.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CHARTE A — « Réchauffer » — FEUILLE D'APERÇU, PAS ENCORE LA CHARTE
   ═══════════════════════════════════════════════════════════════════════
   Ce fichier est une SURCOUCHE temporaire, chargée APRÈS style.css par la
   page _apercu-charte-A.html uniquement. Il ne touche à aucune page en
   ligne. Son rôle : montrer ce que devient l'accueil existant quand on
   change le sol et rien d'autre.

   Une fois la charte validée, son contenu part dans style.css (dans le
   bloc :root et dans les règles concernées) et ce fichier disparaît. Tant
   qu'il vit à part, on peut comparer avant/après en une seconde.

   Principe : on garde marine, vert et corail. On change le SOL (blanc →
   crème) et on ajoute deux couleurs chaudes qui manquaient (or, menthe).
   Le logo n'est pas touché, l'outil non plus.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La police à empattements, auto-hébergée comme Inter ──────────────
   Aucun appel à Google : la politique de confidentialité reste vraie.
   Fichier « full » = tous les axes variables (opsz, wght, SOFT, WONK).
   Pour la mise en production on pourra descendre au fichier « wght »
   (36 Ko au lieu de 121) si on renonce à régler SOFT et WONK. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2-variations');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2-variations');
  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;
}

/* ── Les jetons ────────────────────────────────────────────────────── */
:root {
  /* Nouveaux */
  --color-cream:      #F6F1E8;   /* le sol — remplace le blanc et le marine */
  --color-cream-2:    #FBF8F2;   /* crème clair, pour les surfaces posées dessus */
  --color-gold:       #E0A83C;   /* la couleur chaude qui manquait */
  --color-mint:       #5FC79E;   /* réservée aux chiffres */
  --color-charcoal:   #2C2A26;
  --color-charcoal-deep: #2C2A26;   /* pastilles et pied de page */   /* charbon chaud — remplace le noir bleuté */
  --color-line-warm:  #E4DCCC;   /* filet sur crème */

  /* Conservés tels quels : marine, vert, corail — le logo ne bouge pas. */

  /* Le gris de texte tire vers le chaud pour ne pas jurer sur le crème. */
  --color-gray-600:   #5A6472;
  --color-gray-900:   #1F2933;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body { background: var(--color-cream); }

/* ── Titres : Fraunces partout où Inter faisait du gras ──────────────
   L'axe WONK donne l'inclinaison légèrement manuscrite ; SOFT arrondit
   les terminaisons. C'est ce couple qui fait la chaleur, pas la police
   seule — réglée à plat, Fraunces est une serif banale. */
.hero-h1,
.section-title,
.dashboard-band__title,
.method-intro .section-title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 110, 'SOFT' 26, 'WONK' 1;
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* ═══ LE HERO ═══════════════════════════════════════════════════════ */

#hero {
  background: var(--color-cream);
  padding-bottom: 52px;
}

/* La grille de points était dessinée pour le fond marine ; sur crème
   elle salit. Les formes organiques la remplacent. */
.hero-bg-grid { display: none; }

/* Les deux pseudo-éléments portaient les halos du fond sombre. On les
   réemploie tels quels pour les formes organiques : aucun élément
   ajouté au HTML, donc rien à défaire si on revient en arrière. */
#hero::before {
  top: -150px; right: -110px;
  width: 380px; height: 330px;
  background: var(--color-accent);
  border-radius: 58% 42% 38% 62% / 48% 38% 62% 52%;
  opacity: 0.9;
}
/* Pas de seconde forme dans le hero : posée en bas à gauche, elle tombe
   pile sous les puces de réassurance et les rend pénibles à lire. Une
   forme par section, c'est aussi la règle qu'applique Eurécia — les
   suivantes sont sur le bandeau LMS et sur la bande dashboard. */
#hero::after { display: none; }

/* Sur mobile, la colonne texte remonte sous la forme : à 390 px, celle-ci
   arrivait derrière le surtitre et le rendait illisible. On la réduit et
   on la remonte pour qu'elle reste au-dessus du contenu. */
@media (max-width: 900px) {
  #hero::before {
    top: -212px; right: -120px;
    width: 320px; height: 272px;
    opacity: 0.75;
  }
}

/* Le contenu repasse devant les formes. Sans ça, la forme est peinte
   par-dessus le texte en flux — elle est en position absolue. */
.hero-grid { z-index: 2; }

.hero-eyebrow {
  background: rgba(232,112,90,0.10);
  color: #C2513A;
  border: 1px solid rgba(232,112,90,0.22);
}
.hero-eyebrow-dot { background: var(--color-accent); }

.hero-h1 { color: var(--color-primary); }
.hero-h1 em {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #2F6355 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  color: var(--color-gray-600);
  /* Le justifié creusait des rivières blanches dans un paragraphe
     étroit et non césuré. En drapeau, la même phrase se lit mieux. */
  text-align: left;
}
.hero-subtitle strong { color: var(--color-gray-900); }

.btn-secondary-link { color: var(--color-primary); opacity: 0.72; }
.btn-secondary-link:hover { color: var(--color-primary); opacity: 1; }

.hero-trust-item { color: var(--color-gray-600); }
.hero-trust-item .check {
  background: rgba(61,122,106,0.12);
  border-color: rgba(61,122,106,0.28);
}
.hero-trust-item .check svg { stroke: var(--color-secondary); }

/* Les deux badges flottants : ils étaient translucides sur fond marine.
   Sur crème il leur faut un fond plein, sinon ils disparaissent. Le
   flottement (animation float-badge) est conservé tel quel. */
/* Les deux pastilles étaient le dernier aplat marine de la page. Le
   charbon profond les rattache à la famille sombre (ruban LMS en haut,
   socle en bas) et laisse le marine à son rôle d'encre. Contraste du
   chiffre : 14,3:1. Le pictogramme reste en menthe — c'est la seule
   couleur vive de la page, et elle est réservée aux chiffres. */
.hero-float {
  background: var(--color-charcoal-deep);
  box-shadow: 0 10px 30px rgba(26, 40, 60, 0.22);
}
.hero-float .float-label { color: rgba(244, 241, 234, 0.62); }
.hero-float .float-value { color: #fff; }
.float-icon-green { background: rgba(95, 199, 158, 0.14); color: var(--color-mint); }
.float-icon-blue  { background: rgba(255, 255, 255, 0.10); color: var(--color-mint); }

/* ═══ LE BANDEAU LMS ════════════════════════════════════════════════ */

#logos {
  position: relative;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line-warm);
  /* Le raccord sombre servait à souder le bandeau au hero marine.
     Les deux sont crème maintenant : il ne raccorde plus rien. */
  box-shadow: none;
  padding: 34px 0 26px;
}
/* Pas de forme organique ici non plus : le défilé de logos occupe toute
   la largeur, une forme posée derrière voile forcément un logo. Sur ce
   haut de page l'or est porté par le bouton « Consulter votre futur
   dashboard » — il n'a pas besoin d'y être deux fois. */
.logos-label { color: #8A8272; }
.logo-placeholder {
  background: var(--color-cream-2);
  border: 1px solid var(--color-line-warm);
  color: #8A8272;
}

/* ═══ LA BANDE « VOIR LE DASHBOARD » ════════════════════════════════ */

#dashboard-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
}
/* La menthe, troisième et dernière forme du haut de page. Discrète :
   à 0.42 elle se lit comme une ombre colorée, pas comme un aplat. */
#dashboard-cta::before {
  content: '';
  position: absolute;
  top: -96px; right: -70px;
  width: 230px; height: 200px;
  background: var(--color-mint);
  border-radius: 52% 48% 42% 58% / 58% 42% 58% 42%;
  opacity: 0.42;
  pointer-events: none;
}
#dashboard-cta .container { position: relative; z-index: 1; }
.dashboard-band {
  background: var(--color-cream-2);
  border: 1px solid var(--color-line-warm);
  box-shadow: 0 4px 24px rgba(26,40,60,0.05);
  /* Elle ne suit PAS le couloir fluide, et c'est délibéré.
     Sa mise en page interne est « texte à gauche, bouton à droite » en
     `space-between` : le texte est borné par la mesure de lecture (658 px),
     le bouton fait 277 px, donc tout ce que la carte gagne en largeur part
     dans le vide entre les deux. Mesuré : 117 px de vide à 1280, 551 px à
     1920 — le titre et son bouton finissaient aux deux bouts d'un désert.
     72 rem = les 1152 px qu'elle faisait avant que le couloir devienne
     fluide, c'est-à-dire la largeur pour laquelle cette mise en page a été
     dessinée. */
  max-width: 72rem;
  margin-inline: auto;
}
.dashboard-band__title { color: var(--color-primary); }

/* Le bouton passe à l'or : c'est le second bouton de la page après
   « Demander une démo », et deux corails d'affilée aplatissent la
   hiérarchie. L'or fait la même chose que chez Eurécia — l'action
   secondaire est chaude, pas rouge. */
/* Sa sous-ligne sort de la mesure de lecture : c'est une phrase unique de
   bandeau, pas de la prose. Bornée à 55ch elle se cassait en deux lignes
   alors que la place existait, ce qui creusait le vide jusqu'au bouton. La
   mesure protège l'œil qui doit retrouver le début de la LIGNE SUIVANTE —
   sur une seule ligne, elle ne protège rien. */
.dashboard-band__sub { max-width: none; }

.dashboard-band__cta.btn-primary {
  background: var(--color-gold);
  color: #3A2A08;
  box-shadow: 0 4px 14px rgba(224,168,60,0.35);
}
.dashboard-band__cta.btn-primary:hover {
  background: #D19B2E;
  color: #3A2A08;
}

/* ═══ L'EN-TÊTE ═════════════════════════════════════════════════════ */

#header {
  background: rgba(246,241,232,0.88);
  border-bottom: 1px solid var(--color-line-warm);
}
.logo { color: var(--color-primary); }
.nav-links a { color: var(--color-gray-600); }
.nav-links a:hover { color: var(--color-primary); }


/* ═══════════════════════════════════════════════════════════════════════
   REFONTE DE L'ACCUEIL — surcouche d'aperçu
   ═══════════════════════════════════════════════════════════════════════
   Chargée après style.css et _charte-a.css, par _apercu-accueil.html
   uniquement. Aucune page en ligne n'est touchée.

   Contient : le méga-menu, la bande charbon qu'on rallume, et les trois
   sections neuves (#restitution, #apres, les groupes de questions).
   Une fois validée, tout part dans style.css et ce fichier disparaît.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ancres héritées ──────────────────────────────────────────────────
   #solution, #securite, #fonctionnement et #faq existaient avant la
   refonte et sont pointés depuis les pieds de page des 8 pages. On les
   garde comme repères invisibles plutôt que de casser 8 liens. */
/* Les trois id sont répétés avec la classe pour porter la spécificité à
   (1,1,0) : `#securite { … }` de style.css est un sélecteur d'ID, il bat
   une simple classe quel que soit l'ordre des feuilles. Écrire
   `.ancre-heritee { border: 0 }` ne suffisait pas — c'est ce qui laissait
   le trait en place après une première tentative.
   La règle de style.css n'est pas supprimée : `#securite` désigne encore
   une vraie section dans politique-confidentialite.html. */
#solution.ancre-heritee,
#securite.ancre-heritee,
#fonctionnement.ancre-heritee,
.ancre-heritee {
  display: block;
  height: 0;
  scroll-margin-top: 90px;
  /* Ces id désignaient des SECTIONS avant la refonte, et leurs anciennes
     règles s'appliquent toujours : `#securite { background: #fff;
     border-top: 1px; border-bottom: 1px }` vit encore dans style.css.
     Posées sur un <span> de hauteur nulle, ces deux bordures dessinaient
     un trait qui traversait la page sans rien séparer.
     On neutralise tout ce qui peint, pour les trois ancres d'un coup —
     #solution et #fonctionnement sont exposés au même piège. */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* ═══ EN-TÊTE ET MÉGA-MENU ═══════════════════════════════════════════ */

#header .header-inner { gap: 28px; }

.nav-refonte {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Le panneau est positionné par rapport à l'en-tête entier, pas au
     bouton : il doit pouvoir occuper toute la largeur utile. */
  position: static;
}

.nav-menu-bt,
.nav-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--color-gray-600);
  background: none;
  border: 0;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.nav-menu-bt:hover,
.nav-lien:hover { color: var(--color-primary); }
.nav-menu-bt[aria-expanded="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}
.nav-menu-bt:focus-visible,
.nav-lien:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.nav-menu-bt svg { width: 10px; height: 10px; transition: transform var(--transition); }
.nav-menu-bt[aria-expanded="true"] svg { transform: rotate(180deg); }


/* ── Le panneau ───────────────────────────────────────────────────── */
/* La largeur du panneau est ce qui décidait de tout le reste.
   Étalé sur 1408 px, il donnait des colonnes de 470 px pour des libellés
   de 250 : d'où les bulles à moitié vides. Les rétrécir une par une
   (`fit-content`) réglait le vide mais produisait trois boîtes de trois
   largeurs différentes, ce qui est pire — ça se lit comme un accident.
   On corrige la cause : le panneau se cale sur la largeur dont son
   contenu a besoin, et les bulles reprennent toute leur colonne. */
.mega {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 100% - 32px);
  top: calc(100% + 6px);
  background: var(--color-cream-2);
  border: 1px solid var(--color-line-warm);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 24px 60px rgba(26, 40, 60, 0.16);
  z-index: 60;
  display: none;
}
.mega[data-ouvert="true"] { display: block; }

/* Le panneau est ancré à un en-tête `fixed` : ce qui dépasse du bas de la
   fenêtre ne se rattrape PAS en faisant défiler la page, ça reste hors
   d'atteinte. Replié en une colonne, il mesure 1576 px — deux tiers du
   menu étaient inaccessibles, et personne ne s'en apercevait puisque le
   haut, lui, s'affichait très bien.
   Il défile donc dans sa propre boîte quand la fenêtre est trop courte.
   `overscroll-behavior: contain` évite que la page se mette à défiler
   derrière lui une fois le bas atteint. */
.mega {
  max-height: calc(100vh - var(--entete-h) - 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega__inner { padding: 24px 26px 22px; }

.mega__promesse {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'SOFT' 20;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-primary);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
/* L'accroche suit le même axe que les trois titres : à gauche, elle
   ouvrait le panneau sur une diagonale — texte calé à gauche en haut,
   titres centrés en dessous. Un seul axe pour tout ce qui n'est pas une
   carte. */
.mega__promesse,
.mega__sous { text-align: center; }

.mega__sous {
  font-size: 0.86rem;
  color: var(--color-gray-600);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-warm);
}

.mega__grille {
  display: grid;
  gap: 24px;
  /* Un seul design : la grille se replie, elle ne change pas de nature. */
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  /* Trois colonnes égales depuis le retrait de l'encart : la place qu'il
     occupait revient aux colonnes, qui gagnent chacune ~90 px. */
  .mega__grille { grid-template-columns: repeat(3, 1fr); }
}

.mega__col h4 {
  /* Ce n'est plus une étiquette mais le tiers d'une phrase qui se lit de
     gauche à droite : « Commencer par mesurer · pour comprendre et décider
     · afin d'agir et d'avancer ». D'où le retrait des capitales et de
     l'interlettrage — une phrase en petites capitales espacées ne se lit
     pas, elle se déchiffre. Seul le verbe de la colonne reste appuyé :
     mesurer / comprendre / agir restent repérables d'un coup d'œil. */
  font-size: 0.97rem;
  font-weight: 550;
  /* #B84A33 : le corail assombri, seul à passer AA sur le crème. */
  color: #B84A33;
  line-height: 1.35;
  margin: 0 0 13px;
  /* Centré sur sa colonne : posé à gauche, chaque fragment démarrait au
     bord de sa carte mais s'arrêtait où le texte s'arrêtait — trois
     longueurs différentes qui donnaient trois bords droits en escalier.
     Centré, c'est la colonne qui tient l'alignement, pas la longueur du
     texte. */
  text-align: center;
}
.mega__col h4 b { font-weight: 750; }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega__col a { text-decoration: none; display: block; }
.mega__col a b {
  display: block;
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.3;
}
.mega__col a i {
  display: block;
  font-style: normal;
  font-size: 0.755rem;
  /* 3,59:1 avec l'ancien #8A8272 — sous le seuil AA de 4,5. */
  color: #6E675A;
  line-height: 1.4;
  margin-top: 2px;
}
.mega__col a:hover b {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Ce qui est une porte, et ce qui est une information ──────────────
   Le menu affichait dix-huit entrées cliquables pour quatre destinations
   réelles : quinze d'entre elles menaient au même endroit que la première
   ligne de leur colonne. Un menu qui montre quinze liens laisse attendre
   quinze pages ; celui qui clique sur « Lire les verbatims » et atterrit
   sur la démo du dashboard n'y voit pas une richesse, il y voit une porte
   qui ne s'ouvre pas.

   Elles sont donc redevenues du texte. Restait à le FAIRE VOIR. Trois
   signaux, cumulés, parce qu'aucun ne suffit seul :

   · la taille et la couleur — la porte est grosse et bleue ;
   · une flèche permanente sur la porte, pas seulement au survol : une
     affordance qui n'apparaît qu'au survol n'existe pas au premier coup
     d'œil, et pas du tout au doigt sur un écran tactile ;
   · un PUITS pour l'information — un fond légèrement plus foncé que le
     panneau. Une surface creusée se lit comme du contenu, une surface qui
     ressort comme une commande. C'est le signal qui porte le plus loin,
     parce qu'il se voit avant même qu'on ait lu quoi que ce soit.

   Écarté : ne distinguer qu'au survol, ou grimer les informations en gris
   clair. Le gris clair dit « désactivé », pas « information » — et il
   coûte le contraste. */
/* La porte est une CARTE QUI RESSORT : fond blanc — plus clair que le
   crème du panneau —, filet, ombre portée. Le puits, lui, est plus foncé
   que le panneau : il s'enfonce. Les deux polarités sont opposées, et
   c'est ce qui se voit de loin, avant même la lecture. Un simple écart de
   taille ne suffisait pas : côte à côte, deux listes de texte restent
   deux listes de texte. */
.mega__portes { margin-bottom: 9px; display: grid; gap: 9px; }
.mega__tete {
  background: #fff;
  border: 1px solid var(--color-line-warm);
  border-radius: 12px;
  padding: 15px 17px 16px;
  box-shadow: 0 1px 2px rgba(26, 40, 60, 0.05);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.mega__tete:hover {
  border-color: rgba(20, 48, 79, 0.45);
  box-shadow: 0 8px 20px rgba(26, 40, 60, 0.13);
  transform: translateY(-1px);
}
.mega__tete b {
  font-size: 1.24rem;
  font-weight: 680;
  color: var(--color-primary) !important;
  letter-spacing: -0.014em;
  line-height: 1.24;
}
.mega__tete i { font-size: 0.865rem; margin-top: 4px; }
/* La flèche est toujours là, en retrait ; elle s'anime au survol. */
.mega__tete b::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  font-weight: 500;
  opacity: 0.42;
  transform: translateX(0);
  transition: opacity var(--transition), transform var(--transition);
}
.mega__tete:hover b::after,
.mega__tete:focus-visible b::after { opacity: 1; transform: translateX(4px); }
/* La carte entière est le repère du clavier, pas seulement le texte. */
.mega__tete:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══ EN RÉSERVE — les bulles d'informations ═════════════════════════
   Antoine, le 10/08/2026 : « et si on sort les bulles avec les infos dans
   un premier temps ? ». Le HTML est retiré des cinq pages ; ce bloc de
   style reste, sans rien à styler pour l'instant.

   Pourquoi le garder : « dans un premier temps » est un essai, pas une
   suppression. Supprimer aussi le style rendrait le retour arrière
   coûteux, alors qu'il tient aujourd'hui en une commande :

       git show fbabfc4 -- index.html   (le menu avec ses bulles)

   S'il est toujours inutilisé à la passe suivante, il part. Un style que
   plus aucun HTML ne porte finit par mentir sur ce que fait la page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Le puits ─────────────────────────────────────────────────────────
   Fond plus foncé que le panneau (1,14:1 — assez pour se voir, trop peu
   pour crier), coins arrondis, et un intitulé qui dit ce que le bloc
   contient. C'est l'intitulé qui achève le travail : sans lui, un cadre
   reste ambigu, puisqu'une carte aussi peut être cliquable. Avec lui, la
   liste devient « voici ce qu'il y a dedans », rattachée au lien du
   dessus. */
.mega__puits {
  background: #F0E9DC;
  border-radius: 11px;
  /* Pleine largeur de colonne, donc alignée sur la carte du dessus. Le
     vide qu'on lui reprochait ne venait pas d'elle mais du panneau, trop
     large : c'est là-haut qu'il est corrigé. */
  padding: 13px 15px 14px;
}
/* Elle sert un objectif, elle ne récite pas un catalogue : la note fermait
   la première colonne sur « ce que ça prépare » plutôt que sur une liste. */
.mega__puits-note {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(110, 103, 90, 0.18);
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6E675A;
}
.mega__puits-titre {
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E675A;
  margin: 0 0 9px;
}
.mega__puits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mega__puits b {
  display: block;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--color-gray-900);
  line-height: 1.3;
}
.mega__puits i {
  display: block;
  font-style: normal;
  font-size: 0.79rem;
  /* #8A8272 ne donnait que 3,24:1 sur ce fond — sous le seuil AA de 4,5
     pour du petit texte. #6E675A passe à 4,64:1 sans changer le ton. */
  color: #6E675A;
  line-height: 1.4;
  margin-top: 1px;
}


/* ═══ #restitution — « Ça donne quoi, concrètement ? » ═══════════════ */

#restitution { background: var(--color-cream-2); position: relative; overflow: hidden; }
/* Elle héritait du rythme vertical d'une grande section : 74,6 px de
   respiration au-dessus ET en dessous, pour une carte de 107 px de haut.
   Ce n'est pas une section, c'est une passerelle entre le ruban LMS et
   « Comment ça marche » — elle se resserre en conséquence. */
#restitution { padding-block: clamp(1.5rem, 0.9rem + 1.3vw, 2.5rem); }
/* La forme verte : deuxième et avant-dernière forme organique de la page.
   Trois sur toute la page, pas une par section — une forme partout devient
   un motif, et le procédé perd son effet. */
#restitution::before {
  content: '';
  position: absolute;
  top: -110px; right: -80px;
  width: 260px; height: 224px;
  background: var(--color-secondary);
  border-radius: 52% 48% 42% 58% / 58% 42% 58% 42%;
  opacity: 0.14;
  pointer-events: none;
}
#restitution .container { position: relative; z-index: 1; }

.section-cta { margin-top: 22px; display: inline-flex; }

/* ═══ #confiance ═════════════════════════════════════════════════════ */

#confiance { background: var(--color-cream); }

/* ── Chasse au pixel avant le prix ────────────────────────────────────
   « Comment ça marche » restant au-dessus des tarifs, chaque pixel gagné
   plus haut fait remonter le prix d'autant. Ces réductions ne retirent
   aucun contenu : elles resserrent des respirations trop généreuses. */
/* ═══ #lms — le défilé de logos, en charbon ══════════════════════════
   La couleur vient de la bande sombre qu'Antoine a fait dégager : « on
   garde la couleur du bandeau qui dégage pour le bandeau avec les LMS ».
   Elle tombe bien ici — c'est un ruban bas et large, juste sous le hero
   crème : il pose une ligne d'horizon sombre au lieu d'occuper un écran.

   Le bandeau annulait le fond sombre du hero d'origine avec un
   box-shadow de raccord ; il n'a plus lieu d'être, les deux blocs ne se
   soudent plus, ils se contrastent. */
/* Éclairci d'un cran et demi à la demande d'Antoine : #2C2A26 était le
   charbon de la bande supprimée, un peu dur en ruban plein. #44403A garde
   la même chaleur, laisse respirer le crème au-dessus, et conserve un
   contraste de 5,85:1 sur le texte des pastilles — au-delà du seuil AA. */
#lms {
  background: #514C44;
  border-bottom: 0;
  box-shadow: none;
  /* Le ruban respire un peu plus : à 118 px de haut pour des pastilles de
     30 px, il était surtout un filet sombre. Il porte la seule preuve de
     compatibilité du site — autant qu'elle se lise. */
  padding: 34px 0 30px;
}
#lms .logos-label {
  /* 0,68 d'opacité tombait pile sur 4,50:1, le seuil AA au centième près.
     Un texte qui passe « de justesse » ne passe pas : la moindre retouche
     du fond le fait basculer. 0,80 donne 5,4:1 et laisse de la marge. */
  color: rgba(244, 241, 234, 0.80);
  font-size: 0.8rem;
  margin-bottom: 24px;
}
/* Les pastilles suivent : 30 → 36 px de haut, texte de 0,72 à 0,8 rem. */
#lms .logo-placeholder {
  height: 36px;
  padding: 0 22px;
  font-size: 0.8rem;
}
/* Le fond s'étant éclairci, les pastilles doivent l'être aussi, sinon
   elles se fondent dedans et le ruban devient une bande de texte. */
#lms .logo-placeholder {
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(244, 241, 234, 0.80);
}
#preuves { padding-block: 44px; }
#preuves .stats-grid { margin-top: 26px; }
#restitution .questions-section__titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  text-align: center;
  margin: 0 0 18px;
}

/* ═══ #compatibilite — « Comment ça marche » ════════════════════════ */
/* Reste AVANT les tarifs (décision d'Antoine). Allégée en conséquence :
   le triptyque et le panneau sombre en sont sortis. */

#compatibilite { background: var(--color-cream); }
/* Elle colle à la carte du dashboard au lieu de repartir de zéro.
   Depuis que les deux partagent le même crème, elles forment un seul bloc :
   la carte annonce le dashboard, la section explique la campagne. Or
   `.method-section` posait encore 48 px de respiration au-dessus, qui
   s'ajoutaient aux 33 px de #restitution — 81 px de vide entre deux choses
   qui vont ensemble.
   On vise #compatibilite et pas `.method-section` : cette classe sert aussi
   sur trois autres pages, où elle ouvre bien une section à part entière. */
#compatibilite { padding-top: 0; }
#compatibilite .method-intro { margin-bottom: 40px; }

/* ═══ #tarifs ═══════════════════════════════════════════════════════ */

#tarifs { background: var(--color-cream-2); }

/* ═══ Corrections de la règle « un seul design » ════════════════════ */

/* style.css:2969 masquait les deux badges flottants sous 767 px — c'est
   très exactement le « bloc qui n'existe pas en petit écran » désormais
   interdit. On les rétablit, et on les rentre dans la carte plutôt que
   de les laisser déborder. */
@media (max-width: 767px) {
  .hero-float-tl,
  .hero-float-br { display: flex; }
  .hero-float-tl { top: 6px; left: 6px; }
  .hero-float-br { bottom: 6px; right: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HARMONISATION DES COULEURS
   ═══════════════════════════════════════════════════════════════════════
   Audit : 53 teintes distinctes écrites en dur dans style.css,
   calculateur.css et index.html, dont 43 sans jeton correspondant.
   Héritage de plusieurs générations de design empilées.

   Le levier n'est pas de chasser les 43 une par une : c'est que la RAMPE
   DE GRIS est bleutée. --color-gray-50/100/200 sont des gris à ~210° de
   teinte. Sur fond blanc ça ne se voyait pas ; sur crème, chaque surface
   qui les emploie tire au gris sale — le panneau du calculateur, le
   bandeau « Plus de 2 000 salariés », les cartes de FAQ, tous les filets.

   On redéfinit donc la rampe à luminosité égale, en biaisant la teinte
   vers le crème. Une ligne par jeton répare des centaines de règles.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Rampe de gris réchauffée — mêmes luminosités, teinte crème */
  --color-gray-50:  #F7F4EE;   /* était #F8F9FA (bleuté) */
  --color-gray-100: #EFEAE1;   /* était #F1F3F5 */
  --color-gray-200: #E4DCCC;   /* était #E5E7EB — rejoint --color-line-warm */
  --color-gray-600: #5F5A52;   /* était #4B5563 (bleuté) — texte courant */
  --color-gray-900: #2B2A26;   /* était #111827 — noir chaud */

  /* Les déclinaisons qui manquaient, et que les couleurs en dur
     remplaçaient à l'aveugle */
  --color-primary-deep: #14304F;   /* remplace #0d1b35, #0f2447, #1a2d4a */
  --color-accent-deep:  #C2513A;   /* remplace #d4614d, #b83c2c, #dc4030 */
  --color-secondary-deep: #2F6355;
}

/* ── Les verts égarés ─────────────────────────────────────────────────
   Cinq verts moyens cohabitaient sans raison : #52d9b8, #7dd3c8, #a5f3e0,
   #52a88e, #10b981. Deux suffisent — le vert de marque et la menthe. */
.hero-eyebrow-dot { background: var(--color-accent); }
.hero-trust-item .check svg { stroke: var(--color-secondary); }
.hero-h1 em {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Les ors égarés ───────────────────────────────────────────────────
   #ff8c00, #ffaa00, #fbbf24, #febc2e, #fbbf77 : cinq jaunes pour un seul
   rôle. Celui du calculateur est le seul visible sur cette page. */
.calc-tooltip b { color: var(--color-gold); }

/* ═══ HIÉRARCHIE DES BOUTONS ══════════════════════════════════════════
   Quatre niveaux, quatre traitements, et jamais deux niveaux identiques
   dans le même écran. Aujourd'hui le corail sert à la fois au CTA d'en-tête
   et au curseur du calculateur, et le marine plein sert à la fois au
   bouton « Télécharger » et à la formule sélectionnée : rien ne dit plus
   ce qui est une action et ce qui est un état.

     1 · action principale du site   → corail plein   (Demander une démo)
     2 · action principale de section → or plein      (dashboard, estimation)
     3 · action secondaire            → contour marine
     4 · lien                         → marine fléché
   ═══════════════════════════════════════════════════════════════════ */

/* Niveau 2 — l'or. « Télécharger votre estimation » était en dégradé marine
   (#1A3A6B → #2d5ba3) : le bloc le plus froid de la section tarifs, et il
   entrait en concurrence visuelle avec la formule sélectionnée, elle aussi
   en marine plein. L'or sépare l'action de l'état. */
.pricing-cta-filled {
  background: var(--color-gold);
  color: #3A2A08;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(224, 168, 60, 0.32);
}
.pricing-cta-filled:hover { background: #D19B2E; color: #3A2A08; }

/* Niveau 3 — contour, réchauffé : la bordure tirait au bleu translucide. */
.pricing-cta-outline { border-color: rgba(26, 58, 107, 0.22); }

/* Niveau 3 — contour. Le devis reste une action secondaire. */
.pricing-enterprise-banner .btn-primary,
.pricing-enterprise-banner .btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: none;
}
.pricing-enterprise-banner .btn-primary:hover { background: rgba(26, 58, 107, 0.06); }

/* ═══ #cta-final — le seul dégradé marine restant ════════════════════
   Il datait du hero sombre, qui n'existe plus. Le vert de marque est la
   couleur la moins employée du site alors qu'elle porte le sens le plus
   proche de l'offre : il prend le bloc de conclusion. */
#cta-final {
  background: var(--color-secondary);
  color: #fff;
}
#cta-final .section-title,
#cta-final .cta-final-subtitle { color: #fff; }
#cta-final .cta-final-subtitle { opacity: 0.86; }
#cta-final .btn-white {
  background: #fff;
  color: var(--color-secondary-deep);
}
#cta-final .cta-final-reassurance { color: rgba(255, 255, 255, 0.78); }


/* ── Le remplissage du graphe tarifaire ───────────────────────────────
   Le dégradé #calcGrad est déclaré EN DUR dans index.html (deux <stop>
   en #1A3A6B) : il ne peut pas être atteint par une variable CSS. On
   surcharge donc la couleur des arrêts depuis la feuille, ce que le SVG
   inline permet. Sur crème, un voile bleu sous la courbe salissait tout
   le quart droit de la section. */
#calcGrad stop { stop-color: var(--color-secondary); }
.calc-area { opacity: 0.13; }

/* La courbe elle-même reste marine : c'est une donnée, pas un ornement,
   et le marine est la couleur la plus lisible sur crème. */

/* ── Le pied de page ──────────────────────────────────────────────────
   Il était resté en #0D1B35, un marine très froid hérité du hero sombre.
   Sous un CTA vert et au bas d'une page crème, c'était le dernier bloc
   qui n'appartenait à aucune famille.

   Il passe au charbon PROFOND #2C2A26 — celui de la bande supprimée. La
   page est donc bornée par deux blocs de la même famille à deux
   profondeurs : le ruban LMS clair en haut (#514C44), le socle sombre en
   bas. Le vert du CTA final s'intercale entre les deux sans heurt. */
footer {
  background: #2C2A26;
  color: rgba(244, 241, 234, 0.62);
}
.footer-tagline { color: rgba(244, 241, 234, 0.55); }
.footer-col-title { color: rgba(244, 241, 234, 0.92); }
footer .footer-col a,
.footer-social a { color: rgba(244, 241, 234, 0.66); }
footer .footer-col a:hover,
.footer-social a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.09); }
.footer-bottom,
.footer-bottom a { color: rgba(244, 241, 234, 0.42); }
.footer-bottom a:hover { color: rgba(244, 241, 234, 0.78); }

/* ═══ Pages secondaires — les derniers fonds froids ═══════════════════
   Trouvés par balayage automatique du rendu, pas à l'œil : sur les quatre
   pages sans en-tête complet, des couleurs étaient posées en style inline
   ou dans un <style> local, donc invisibles à un grep des feuilles.

   La charte étant chargée après ces blocs, elle les emporte — sauf les
   styles inline du pied de page légal, corrigés dans le HTML.           */

/* demo.html et merci.html avaient leur fond en #F3F6FB dans un <style>
   local, chargé après cette feuille : impossible de l'emporter d'ici sans
   !important. Corrigé à la source, dans les deux fichiers. */

/* mentions-legales.html et politique-confidentialite.html :
   les encadrés d'attention étaient en #EFF6FF, un bleu très clair */
.legal-highlight {
  background: var(--color-cream) !important;
  border-color: var(--color-line-warm) !important;
}

/* ── Taille optique des titres à empattements ─────────────────────────
   Fraunces a une hauteur d'x plus basse qu'Inter : à taille en rem égale,
   elle paraît plus petite. Le titre de la bande dashboard, qui était en
   Inter 800 / 1.4rem, s'est visiblement rétréci en passant en Fraunces.
   On compense en rem pour retrouver la MÊME présence optique, pas la même
   valeur numérique. */
.dashboard-band__title {
  font-size: 1.54rem;   /* capitale 17px, comme l’ancien Inter 800 / 1.4rem */
  line-height: 1.2;
}

/* ── Réserve de contenu (nous-connaitre.html) ─────────────────────────
   Placeholder VISIBLE, conformément à la règle du projet. Ni les noms des
   fondateurs, ni leur parcours, ni l'histoire de la société ne figurent
   nulle part sur le site — et les mentions légales portent encore six
   « À compléter ». Écrire cette section reviendrait à inventer.
   Le bloc doit donc se voir : c'est une demande de contenu, pas un
   habillage qu'on pourrait oublier en production. */
.reserve-contenu {
  margin-top: 36px;
  border: 2px dashed var(--color-line-warm);
  border-radius: var(--border-radius-xl);
  background: var(--color-cream);
  padding: 32px 34px;
  text-align: center;
}
.reserve-contenu__etiquette {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: rgba(232, 112, 90, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.reserve-contenu__texte {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  max-width: 52ch;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.reserve-contenu__cartes {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .reserve-contenu__cartes { grid-template-columns: repeat(3, 1fr); } }
.reserve-contenu__carte {
  background: var(--color-cream-2);
  border: 1px solid var(--color-line-warm);
  border-radius: var(--border-radius-lg);
  padding: 22px 18px;
}
.reserve-contenu__carte span {
  display: block;
  width: 62px; height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-gray-100);
  border: 1px dashed var(--color-line-warm);
}
.reserve-contenu__carte b { display: block; font-size: 0.9rem; color: var(--color-gray-900); }
.reserve-contenu__carte i {
  display: block; font-style: normal; font-size: 0.8rem;
  color: var(--color-gray-600); margin-top: 3px;
}

/* La page « Nous connaître » n'a pas de hero sombre : son premier bloc
   doit dégager sous l'en-tête fixe. */
#hero-connaitre { padding-top: 132px; }
#partis-pris { background: var(--color-cream-2); }
#equipe { background: var(--color-cream); }

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE DESIGN — la matière, pas le contenu
   ═══════════════════════════════════════════════════════════════════════
   Aucun texte, aucun bloc, aucun ordre n'est touché ici. On travaille
   uniquement la matière : le grain du papier, la façon dont les sections
   se raccordent, la profondeur des cartes.

   Le pari : ce qui sépare « un fond crème » d'« une page chaleureuse »
   n'est pas la teinte, c'est la TEXTURE et les RACCORDS. Un aplat parfait
   se lit comme un écran ; un aplat qui grène se lit comme du papier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le grain ─────────────────────────────────────────────────────────
   Bruit fractal généré en SVG, inline en data-URI : aucun fichier, aucune
   requête, aucun hôte externe. Posé en voile fixe sur toute la fenêtre à
   3,5 % — assez pour qu'on le sente, pas assez pour qu'on le voie. C'est
   le procédé qui fait la différence de qualité perçue chez Eurécia, et
   il tient en dix lignes.

   `pointer-events:none` est vital : sans lui, ce voile intercepte TOUS
   les clics de la page. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Le hero : une chaleur derrière la maquette ───────────────────────
   La maquette flottait sur un aplat. Un halo très doux, centré sur elle,
   lui donne un sol sans ajouter de boîte. */
#hero { position: relative; }
#hero .hero-visual { position: relative; }
#hero .hero-visual::before {
  content: '';
  position: absolute;
  inset: -18% -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 45%,
              rgba(224, 168, 60, 0.16) 0%,
              rgba(232, 112, 90, 0.07) 42%,
              transparent 70%);
}
#hero .hero-mockup-wrap { position: relative; z-index: 1; }

/* ── Les raccords entre sections ──────────────────────────────────────
   C'est ici que se joue le « fini ». Les sections s'empilaient comme des
   rectangles posés bout à bout ; on fait déborder une forme de chaque
   côté d'une frontière, pour que le regard passe au lieu de buter.

   Une forme par frontière, et seulement sur trois frontières : la page
   compte neuf sections, en décorer chacune ferait un motif. */

/* Frontière hero → ruban LMS : une menthe qui plonge dans le sombre. */
#lms { position: relative; overflow: hidden; }
#lms::after {
  content: '';
  position: absolute;
  top: -62px; left: 6%;
  width: 190px; height: 120px;
  z-index: 0;
  pointer-events: none;
  background: var(--color-mint);
  opacity: 0.10;
  border-radius: 52% 48% 44% 56% / 62% 58% 42% 38%;
}
#lms .logos-label, #lms .logos-track-wrapper { position: relative; z-index: 1; }

/* Frontière restitution → compatibilité : l'or, à gauche cette fois.
   L'alternance des côtés évite que les formes s'alignent en colonne. */
#compatibilite { position: relative; overflow: hidden; }
#compatibilite::before {
  content: '';
  position: absolute;
  /* Était à droite : elle tombait pile derrière la troisième étape de la
     frise. À gauche, la colonne d'intro s'arrête à mi-largeur. */
  top: 34%; left: -15rem;
  width: 24rem; height: 21rem;
  z-index: 0;
  pointer-events: none;
  background: var(--color-gold);
  opacity: 0.18;
  border-radius: 58% 42% 38% 62% / 48% 38% 62% 52%;
}
#compatibilite .container { position: relative; z-index: 1; }

/* Frontière FAQ → CTA final : une forme corail qui mord sur le vert. */
#cta-final { position: relative; overflow: hidden; }
#cta-final::before {
  content: '';
  position: absolute;
  top: -110px; left: -90px;
  width: 320px; height: 260px;
  z-index: 0;
  pointer-events: none;
  background: var(--color-accent);
  opacity: 0.20;
  border-radius: 50% 42% 58% 40% / 45% 55% 42% 58%;
}
#cta-final::after {
  content: '';
  position: absolute;
  bottom: -130px; right: -80px;
  width: 280px; height: 230px;
  z-index: 0;
  pointer-events: none;
  background: var(--color-gold);
  opacity: 0.14;
  border-radius: 52% 48% 42% 58% / 58% 42% 58% 42%;
}
#cta-final .container { position: relative; z-index: 1; }

/* ── La profondeur des cartes ─────────────────────────────────────────
   Un filet de 1 px pose une carte à plat sur la page. Une ombre CHAUDE et
   étagée la décolle. Les ombres de style.css sont neutres et bleutées
   (rgba(0,0,0,…)) : sur crème elles grisent. On les refait dans la teinte
   du sol. */
.security-item,
.dashboard-band,
.faq-item,
.calc-card {
  box-shadow: 0 1px 2px rgba(90, 74, 46, 0.05),
              0 6px 18px rgba(90, 74, 46, 0.055);
}
.security-item {
  transition: transform var(--transition), box-shadow var(--transition);
}
.security-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(90, 74, 46, 0.06),
              0 14px 34px rgba(90, 74, 46, 0.10);
}

/* La maquette du hero mérite une ombre plus ample : c'est l'objet le plus
   important de la page, et elle doit flotter franchement. */
.dashboard-mockup {
  box-shadow: 0 2px 6px rgba(60, 48, 30, 0.06),
              0 18px 44px rgba(60, 48, 30, 0.10),
              0 42px 90px rgba(60, 48, 30, 0.08);
}

/* ── Le prix, en Fraunces ─────────────────────────────────────────────
   C'est le seul très grand nombre de la page. En Inter il ressemble à une
   donnée ; en Fraunces il devient une annonce. Les chiffres tabulaires
   évitent que la largeur saute pendant que le curseur bouge. */
.calc-price,
#calcPrice {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 120, 'SOFT' 22, 'WONK' 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Les surtitres ────────────────────────────────────────────────────
   La pastille corail était pleine et un peu criarde. Un fond très dilué
   et un filet lui donnent le même rôle en moins fort. */
.section-label {
  background: rgba(232, 112, 90, 0.09);
  border: 1px solid rgba(232, 112, 90, 0.18);
  color: var(--color-accent-deep);
}

/* ── Le mouvement ─────────────────────────────────────────────────────
   Rien d'automatique, rien qui bouge tout seul en dehors de ce qui
   existait déjà (le défilé de logos et les deux pastilles). Les seules
   transitions ajoutées répondent au survol. */
@media (prefers-reduced-motion: reduce) {
  .security-item:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE FOND — une feuille de papier, pas un aplat
   ═══════════════════════════════════════════════════════════════════════
   Le crème était une seule couleur, posée à plat, répétée sur toute la
   hauteur. Techniquement irréprochable, visuellement inerte : aucune
   surface réelle n'a exactement la même teinte d'un bout à l'autre.

   On pose donc quatre nappes de lumière très diluées (7 à 10 %) dans les
   couleurs de la charte, ancrées à la FENÊTRE et non à la page. Le contenu
   défile, la lumière reste : c'est le comportement d'une feuille posée
   sous une source fixe, et ça évite que les dégradés s'étirent sur les
   5 000 px de l'accueil.

   Conséquence assumée : les sections claires deviennent transparentes pour
   laisser passer ces nappes. L'alternance crème / crème2 disparaît — elle
   opposait de toute façon deux teintes que personne ne distinguait
   (#F6F1E8 contre #FBF8F2). Le rythme est repris plus bas, par un voile
   blanc translucide qui laisse la lumière traverser.
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--color-cream);
}

/* ── Les formes : ancrées aux SECTIONS, pas au document ───────────────
   Première version fausse, et pas seulement dans ses valeurs : les cinq
   formes étaient posées en fond de `body`, à des distances fixes du haut
   du document (« top 62rem »). Trois défauts qui en découlent tous :

     · elles atterrissaient à une profondeur en pixels, donc n'importe où
       par rapport aux sections — la moindre variation de contenu les
       décalait sur un titre ou un paragraphe ;
     · à 30 rem sur une fenêtre de 1280 px, ce qui dépassait faisait près
       de 300 px de large : un disque plein en plein milieu, pas un bord ;
     · deux d'entre elles tombaient dans la même bande horizontale et se
       superposaient en double rond.

   Elles sont maintenant accrochées chacune à une section, ce qui garantit
   trois choses : la composition tient quelle que soit la hauteur du
   contenu, une seule forme par bande horizontale, et jamais derrière une
   zone dense — elles vivent dans les gouttières, là où la colonne de
   texte laisse de la place.

   Règle de dimension : au plus un tiers visible. Ce qu'on voit doit se
   lire comme le BORD de quelque chose de plus grand. Une forme entière au
   milieu d'une page est une illustration ; une forme coupée est une
   matière. */

/* Les gouttières exploitables, mesurées : la FAQ est en colonne de 800 px
   dans un conteneur de 1200 — c'est le plus large espace libre de la page,
   donc celle qui peut accueillir la forme la plus généreuse. */

#confiance { position: relative; overflow: hidden; }
#confiance::before {
  content: '';
  position: absolute;
  top: 12%; right: -17rem;
  width: 26rem; height: 23rem;
  z-index: 0;
  pointer-events: none;
  background: var(--color-secondary);
  opacity: 0.13;
  border-radius: 58% 42% 38% 62% / 48% 38% 62% 52%;
}
#confiance .container { position: relative; z-index: 1; }

#faq { position: relative; overflow: hidden; }
#faq::before {
  content: '';
  position: absolute;
  top: 28%; left: -18rem;
  width: 30rem; height: 26rem;
  z-index: 0;
  pointer-events: none;
  background: var(--color-mint);
  opacity: 0.16;
  border-radius: 52% 48% 42% 58% / 58% 42% 58% 42%;
}
#faq .container { position: relative; z-index: 1; }


/* Les sections claires s'effacent pour laisser passer la lumière. Les
   sections SOMBRES (ruban LMS, CTA final, pied de page) gardent leur
   aplat : ce sont elles qui donnent le rythme, et une nappe qui les
   traverserait les salirait. */
#hero,
#restitution,
#compatibilite,
#tarifs,
#confiance,
#faq,
#hero-connaitre,
#partis-pris,
#equipe,
#sujets,
#solutions,
#dashboard-cta,
#principe,
#retribution,
#profil,
#espace,
#parcours,
#candidature {
  background: transparent;
}

/* Le rythme, repris sans opacité pleine : un voile blanc à 38 % éclaircit
   une section sur deux tout en laissant les nappes la traverser.

   #restitution en est SORTIE : la bande dashboard fait 174 px de haut, et
   un voile sur 174 px entre le ruban LMS sombre et « Comment ça marche »
   ne se lisait pas comme une alternance mais comme un liseré clair — une
   bande trop fine pour valoir une couleur à elle. Sans le voile, elle
   partage le crème de « Comment ça marche » et les deux ne font plus
   qu'un seul bloc, ce qui est le bon découpage : la carte annonce le
   dashboard, la section explique la campagne. */
#tarifs,
#partis-pris {
  background: rgba(255, 255, 255, 0.38);
}

/* Le hero portait déjà sa forme corail ; on la garde, elle est plus
   franche que les nappes et joue un autre rôle. */

/* ═══════════════════════════════════════════════════════════════════════
   FLUIDITÉ — le couloir, le texte et les espaces suivent la fenêtre
   ═══════════════════════════════════════════════════════════════════════
   Constat mesuré : le couloir de contenu était figé à 1152 px, quelle que
   soit la largeur de l'écran. Il occupait 90 % d'une fenêtre de 1280 px,
   mais 60 % d'un 1920 et 45 % d'un 2560 — le contenu se recroquevillait au
   milieu pendant que les marges gonflaient. Le titre du hero, lui, restait
   à 57,6 px du plus petit au plus grand écran.

   La cause est la même partout : des VALEURS FIXES, corrigées de loin en
   loin par des points de rupture. Entre deux ruptures, rien ne bouge ; à
   la rupture, tout saute d'un coup. C'est l'inverse de la fluidité.

   Le remède tient en une fonction : clamp(minimum, valeur-qui-suit-la-
   fenêtre, maximum). La valeur du milieu contient un `vw`, donc elle varie
   en continu avec la largeur ; les deux bornes empêchent qu'elle devienne
   illisible aux extrêmes. Aucun point de rupture, aucun saut.

   C'est aussi ce que demande la règle « un seul design » : moins de
   ruptures, une seule mise en page qui se déforme proprement.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Le couloir grandit avec l'écran, jusqu'à un plafond. 88vw laisse
     respirer les bords ; 1560px est la limite au-delà de laquelle une
     grille de trois cartes devient une bande trop étirée. */
  --container-max: clamp(20rem, 88vw, 97.5rem);

  /* La gouttière suit aussi : 20px sur un téléphone, 64px sur un grand
     écran. C'est elle qui empêche le texte de coller au bord. */
  --container-px: clamp(1.25rem, 3.2vw, 4rem);

  /* Le rythme vertical grandit avec la page : des sections à 60px de
     respiration sur un 2560 paraissent tassées. */
  --section-py: clamp(3.25rem, 1.6rem + 3.4vw, 6rem);
  --section-py-sm: clamp(3rem, 1.5rem + 3vw, 5.25rem);

  /* Mesure de lecture : la longueur de ligne au-delà de laquelle l'œil, en
     revenant à gauche, ne retrouve plus le début de la ligne suivante.
     C'est LA limite qui ne doit pas suivre la fenêtre — un couloir large
     ne veut pas dire des lignes longues.

     ATTENTION AU PIÈGE DU `ch`. L'unité `ch` n'est pas « un caractère » :
     c'est la largeur du glyphe « 0 ». Mesuré sur notre Inter, le zéro fait
     0,631 em quand un caractère moyen de prose française en fait 0,483 —
     soit 1 ch = 1,31 caractère réel. Le `68ch` qui figurait ici donnait
     donc des lignes de 89 caractères : le plafond était posé, et il ne
     plafonnait rien. 55ch ≈ 72 caractères, ce qu'on visait. */
  --mesure: 55ch;
}

/* ── Le couloir ───────────────────────────────────────────────────────
   `min()` plutôt que `max-width` : la largeur est le plus petit des deux,
   donc le conteneur ne dépasse jamais la fenêtre moins ses gouttières,
   même à l'intérieur d'une grille contrainte. */
.container,
.header-inner {
  width: min(100% - 2 * var(--container-px), var(--container-max));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* ── La typographie ───────────────────────────────────────────────────
   Le terme central de chaque clamp mélange un `rem` et un `vw` : le rem
   fixe le point de départ, le vw donne la pente. Sans le rem, le texte
   deviendrait minuscule sur les petites fenêtres. */
.hero-h1 {
  font-size: clamp(2.35rem, 1.55rem + 2.6vw, 4.15rem);
  line-height: 1.06;
}
.section-title {
  font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.9rem);
}
.section-title--xl {
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.35rem);
}
.hero-subtitle {
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.2rem);
}
.section-subtitle {
  font-size: clamp(0.97rem, 0.93rem + 0.2vw, 1.14rem);
}

/* ── La mesure de lecture ─────────────────────────────────────────────
   Élargir le couloir sans borner les paragraphes produirait des lignes de
   150 caractères, illisibles. Le couloir sert la MISE EN PAGE (grilles,
   cartes, maquettes) ; le texte courant reste dans sa mesure. */
.hero-subtitle { max-width: min(46ch, 100%); }
.section-subtitle,
.method-intro p,
.text-center > p { max-width: min(var(--mesure), 100%); margin-inline: auto; }

/* ── La maquette du hero ──────────────────────────────────────────────
   Elle était plafonnée à 500 px : dans un hero devenu plus large, elle
   restait une vignette au milieu du vide. Elle grandit maintenant avec sa
   colonne, sans jamais dépasser sa définition utile. */
.hero-mockup-wrap { max-width: min(100%, 46rem); }
/* La maquette du dashboard grossit POUR DE VRAI.
   Élargir le cadre n'aurait pas suffi : ses 38 tailles de police sont en
   `rem`, donc relatives à la racine — le cadre se serait étiré autour d'un
   texte resté minuscule. `zoom` met tout à l'échelle d'un coup, texte
   compris, et participe à la mise en page (contrairement à `transform:
   scale`, qui déborderait sans réserver sa place). */
.hero-mockup { zoom: 1.16; }

/* ── La grille du hero ────────────────────────────────────────────────
   Deux colonnes dès qu'il y a la place, et des proportions qui suivent :
   le texte garde la main sur les écrans moyens, la maquette gagne du
   terrain quand l'écran s'élargit. */
@media (min-width: 1024px) {
  .hero-grid {
    flex-direction: row;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 5rem);
  }
  .hero-content { flex: 1 1 46%; min-width: 0; }
  .hero-visual  { flex: 1 1 54%; min-width: 0; }
}

/* ── Élargir sans allonger les lignes ─────────────────────────────────
   Effet de bord mesuré du couloir fluide : à 1920 px, la grille sécurité
   étirait ses deux colonnes à 760 px chacune, soit des lignes de plus de
   100 caractères. Au-delà de ~75, l'œil perd le début de la ligne
   suivante — on gagnait de la largeur en perdant de la lisibilité.

   Le bon réflexe n'est pas de brider la grille : c'est de lui laisser
   GAGNER DES COLONNES. `auto-fit` + `minmax` fait exactement ça — la
   grille place autant de colonnes que la largeur le permet, chacune ne
   descendant jamais sous son minimum. Deux colonnes à 1280, trois à 1600,
   sans un seul point de rupture. */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1rem, 1.4vw, 1.5rem);
}

/* La liste des prestations incluses gagne elle aussi une colonne quand la
   place le permet. La règle est dans calculateur.css et pas ici : cette
   feuille-là est chargée APRÈS la charte, elle aurait gagné de toute façon. */

/* Les textes de prose qui restent en pleine largeur sont bornés à la
   mesure de lecture. Les notes de bas de bloc aussi : elles sont en petits
   caractères, donc encore plus vite illisibles sur une longue ligne. */
.faq-answer p,
.security-item p,
.calc-note,
.form-legal,
.leon-flow__footnote,
.rate-card__levers span {
  max-width: min(var(--mesure), 100%);
}
/* La note centrée garde son centrage une fois bornée. */
.calc-note { margin-inline: auto; }

/* ── L'en-tête tient dans une fenêtre étroite ─────────────────────────
   Il est en `space-between` sur une hauteur figée de 68 px. En dessous
   d'environ 820 px, le logo, les deux onglets et le bouton ne tenaient
   plus sur la ligne : le bouton « Demander une démo » sortait du cadre et
   disparaissait purement et simplement. Perdre le CTA principal, c'est
   perdre la page.

   La réponse n'est PAS un menu à part — la règle « un seul design »
   l'interdit, et un tiroir hamburger serait exactement le composant
   propre au mobile qu'on s'est promis de ne pas écrire. C'est la même
   barre, avec le même contenu dans le même ordre, qui se replie sur deux
   lignes quand elle n'a plus la place. Sa hauteur devient libre ; c'est
   megamenu.js qui la mesure et la publie dans --entete-h. */
:root {
  --entete-h: 68px;
  /* Publiées par megamenu.js ; ces valeurs de repli servent si le script
     ne s'exécute pas. `--sous-hero: 0` fait alors un hero d'une hauteur
     d'écran : plus haut que voulu, mais jamais cassé. */
  --sous-hero: 0px;
}

#header .header-inner {
  flex-wrap: wrap;
  height: auto;
  min-height: 68px;
  align-content: center;
  row-gap: 8px;
  /* Pas de padding vertical : sur une seule ligne, min-height suffit et la
     barre reste à ses 68 px d'origine. */
  padding-block: 0;
}
.nav-refonte { flex-wrap: wrap; row-gap: 6px; }

/* Une fois repliée, la barre a besoin d'un peu d'air en haut et en bas, et
   le logo peut rendre quelques pixels. On ne retire RIEN : le sous-titre
   « ENQUÊTES QVCT & RPS » reste, il rétrécit. */
@media (max-width: 819px) {
  #header .header-inner { padding-block: 8px; }
  .logo { font-size: 1.35rem; }
}

/* Le contenu réserve la place réelle de l'en-tête fixe, pas une place
   supposée. Les 40 px sont la respiration qui existait déjà (108 − 68).
   La règle vise le premier bloc du <main> plutôt que `#hero` : la page
   « Nous connaître » nomme le sien `#hero-connaitre` et passait dessous. */
#header ~ main > :first-child { padding-top: calc(var(--entete-h) + 40px); }

/* ── Le premier écran est un bloc entier ──────────────────────────────
   Le hero, le ruban LMS et la carte du dashboard forment un seul premier
   écran : « Comment ça marche » ne doit se découvrir qu'en déroulant.
   Le hero prend donc toute la place qui reste une fois les deux bandes
   déduites — leur hauteur est mesurée, pas devinée (elles se replient
   quand la fenêtre rétrécit).

   `min-height` et non `height` : si le contenu du hero dépasse cette
   hauteur — fenêtre courte, texte agrandi par le visiteur — il pousse,
   il ne se fait pas couper.

   `body:has(#restitution)` limite la règle à l'accueil : les quatre
   autres pages à `#hero` n'ont ni ruban ni carte, et leur hero n'a aucune
   raison de faire un écran de haut. */
body:has(#restitution) #hero {
  min-height: calc(100svh - var(--sous-hero));
  display: grid;
  align-content: center;
}

/* ── Un rythme qui suit la HAUTEUR de la fenêtre ──────────────────────
   Le hero doit tenir dans ce qui reste d'un écran. Toutes ses respirations
   étaient réglées en rem ou en vw : elles ne savaient rien de la place
   verticale disponible, et sur un portable de 900 px la carte du dashboard
   se faisait couper par le pli.

   Les `vh` règlent ça sans point de rupture ni contenu retiré : sur un
   grand écran les valeurs restent celles d'avant, sur un écran court elles
   se resserrent d'elles-mêmes. C'est la seule dimension du site qui a le
   droit de dépendre de la hauteur — parce que c'est la seule qui doit
   tenir dans un écran. */
body:has(#restitution) #hero {
  padding-top: calc(var(--entete-h) + clamp(1rem, 3vh, 2.5rem));
  padding-bottom: clamp(1.5rem, 4vh, 3.25rem);
}
body:has(#restitution) .hero-eyebrow { margin-bottom: clamp(0.7rem, 2vh, 1.25rem); }
body:has(#restitution) .hero-h1      { margin-bottom: clamp(0.7rem, 2vh, 1.25rem); }
body:has(#restitution) .hero-subtitle{ margin-bottom: clamp(1rem, 3.2vh, 2rem); }
body:has(#restitution) .hero-ctas    { margin-bottom: clamp(0.9rem, 2.8vh, 1.75rem); }
/* Une ancre visée depuis le sommaire ne doit pas atterrir sous la barre. */
[id] { scroll-margin-top: calc(var(--entete-h) + 22px); }

/* Sept réponses de la FAQ portaient leur texte à nu, sans <p> : elles
   échappaient au plafond ci-dessus. Elles sont maintenant enveloppées, ce
   qui leur donne la marge basse de `.faq-answer p`. On la retire sur le
   dernier paragraphe, sinon chaque réponse gagne 16 px de vide en bas. */
.faq-answer > p:last-child { margin-bottom: 0; }