/* ==========================================================================
   MY UNIVERSE ODE — FEUILLE DE STYLE PRINCIPALE
   --------------------------------------------------------------------------
   Ce fichier gère la MISE EN PAGE (positions, tailles, espaces).
   Les COULEURS et les POLICES sont dans css/variables.css.

   ⚠️  Pour changer une couleur, allez dans variables.css, PAS ici.

   SOMMAIRE
   01. Réinitialisation et bases
   02. Accessibilité (focus, lien d'évitement)
   03. Titres et textes
   04. Conteneurs et sections
   05. Boutons et flèches
   06. Barre de navigation
   07. Hero (bandeau d'accueil)
   08. Bloc anti-outil
   09. (libre)
   10. Cartes profils — réservé aux pages à venir
   11. Section méthode 4 étapes
   12. Section "Comment on s'y prend, concrètement"
   13. Les 4 questions · Incarnation · Schéma · Photos · FAQ
   14. Section offres et tarifs
   15. CTA diagnostic + formulaire
   16. Pied de page
   17. Animations à l'apparition
   18. Adaptations mobile et tablette
   19. Impression
   ========================================================================== */


/* ==========================================================================
   01. RÉINITIALISATION ET BASES
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Décalage pour que les ancres ne passent pas sous la barre de nav fixe */
  scroll-padding-top: calc(var(--hauteur-nav) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--fond-page);
  color: var(--texte-principal);
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  font-weight: var(--graisse-normale);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Empêche le contenu de sauter pendant le chargement des polices */
.fonts-en-chargement body {
  opacity: 1;
}


/* ==========================================================================
   02. ACCESSIBILITÉ
   ========================================================================== */

/* Lien "Aller au contenu" : invisible, apparaît à la tabulation clavier */
.lien-evitement {
  position: absolute;
  top: -100px;
  left: var(--espace-s);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--couleur-noir-profond);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: var(--rayon-moyen);
  font-weight: var(--graisse-semi);
  transition: top var(--transition-rapide);
}

.lien-evitement:focus {
  top: var(--espace-s);
}

/* Contour de focus visible pour la navigation au clavier (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-couleur);
  outline-offset: 3px;
  border-radius: var(--rayon-petit);
}

/* Sur fond noir, le contour passe en magenta clair pour rester visible */
.section--sombre a:focus-visible,
.section--sombre button:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible {
  outline-color: var(--couleur-magenta-clair);
}

/* Texte réservé aux lecteurs d'écran (invisible à l'œil) */
.lecteur-ecran-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03. TITRES ET TEXTES
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-titre);
  letter-spacing: var(--lettrage-titre);
  margin: 0 0 var(--espace-m);
  color: var(--texte-principal);
  text-wrap: balance;
}

h1 { font-size: var(--taille-hero); }
h2 { font-size: var(--taille-titre-1); }
h3 { font-size: var(--taille-titre-2); }
h4 { font-size: var(--taille-titre-3); }

p {
  margin: 0 0 var(--espace-m);
  max-width: var(--largeur-texte);
  text-wrap: pretty;
}

a {
  color: var(--lien-couleur);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-rapide);
}

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

strong, b {
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

/* Texte mis en valeur avec le dégradé signature (élément visuel unique) */
.accent-degrade {
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Sécurité : si le navigateur ne gère pas le dégradé sur texte */
  -webkit-text-fill-color: transparent;
}

/* Sur fond noir, le dégradé passe en version claire pour rester lisible */
.section--sombre .accent-degrade,
.hero .accent-degrade,
.lecture .accent-degrade {
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Petit label en capitales au-dessus des titres de section */
.sur-titre {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-s);
}

.section--sombre .sur-titre {
  color: var(--couleur-magenta-clair);
}

/* Paragraphe d'introduction, un peu plus gros */
.chapeau {
  font-size: var(--taille-chapeau);
  line-height: 1.65;
  color: var(--texte-secondaire);
}

.section--sombre .chapeau {
  color: var(--texte-sur-sombre-doux);
}

.note {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}


/* ==========================================================================
   04. CONTENEURS ET SECTIONS
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur-site);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* Colonne de lecture étroite, centrée */
.conteneur--texte {
  max-width: calc(var(--largeur-texte) + (var(--marge-laterale) * 2));
}

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

/* Fonds alternés */
.section--blanc  { background-color: var(--couleur-blanc); }
.section--creme  { background-color: var(--fond-alterne); }

.section--sombre {
  background-color: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}

/* Sur fond sombre, les titres passent en clair.
   ⚠️  Cette règle couvre AUSSI le hero : sans elle, les titres hériteraient
       de la couleur anthracite et deviendraient illisibles sur le noir. */
.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--sombre h4,
.hero h1,
.hero h2,
.hero h3,
.hero h4 {
  color: var(--texte-sur-sombre);
}

.section--sombre p {
  color: var(--texte-sur-sombre-doux);
}

/* En-tête de section : sur-titre + h2 + chapeau */
.section-entete {
  max-width: var(--largeur-texte);
  margin-bottom: var(--espace-xl);
}

.section-entete--centre {
  margin-inline: auto;
  text-align: center;
}

.section-entete--centre p {
  margin-inline: auto;
}

/* Filet fin de séparation */
.filet {
  height: 1px;
  border: 0;
  background: var(--couleur-bordure);
  margin-block: var(--espace-l);
}


/* ==========================================================================
   05. BOUTONS
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-semi);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-moyen);
  cursor: pointer;
  transition: transform var(--transition-rapide),
              box-shadow var(--transition-rapide),
              background-color var(--transition-rapide),
              color var(--transition-rapide),
              border-color var(--transition-rapide);
  /* Zone de clic confortable au doigt (WCAG 2.5.5) */
  min-height: 48px;
}

.bouton:hover {
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(0);
}

/* Bouton primaire : dégradé signature */
.bouton--primaire {
  background: var(--degrade-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(204, 0, 204, 0.22);
}

.bouton--primaire:hover {
  color: #FFFFFF;
  box-shadow: 0 8px 26px rgba(204, 0, 204, 0.34);
}

/* Bouton fantôme (ghost) sur fond sombre */
.bouton--fantome {
  background: transparent;
  color: var(--texte-sur-sombre);
  border-color: rgba(241, 240, 236, 0.32);
}

.bouton--fantome:hover {
  color: #FFFFFF;
  border-color: var(--couleur-magenta-clair);
  background: rgba(204, 0, 204, 0.10);
}

/* Bouton contour sur fond clair */
.bouton--contour {
  background: transparent;
  color: var(--texte-principal);
  border-color: var(--couleur-anthracite);
}

.bouton--contour:hover {
  color: #FFFFFF;
  background: var(--couleur-anthracite);
  border-color: var(--couleur-anthracite);
}

/* Bouton noir plein */
.bouton--noir {
  background: var(--couleur-noir-profond);
  color: #FFFFFF;
}

.bouton--noir:hover {
  color: #FFFFFF;
  background: #232323;
}

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

.bouton--petit {
  padding: 0.6rem 1.1rem;
  font-size: var(--taille-petit);
  min-height: 42px;
}

/* --------------------------------------------------------------------------
   LA FLÈCHE
   Dessinée en CSS plutôt qu'avec le caractère « → » : la police
   auto-hébergée est allégée au strict nécessaire et ne contient pas ce
   symbole. La flèche reste ainsi nette, colorable et alignée partout.
   -------------------------------------------------------------------------- */
.fleche {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-rapide);
}

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

/* Lien texte avec flèche, pour renvoyer vers une page dédiée */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--graisse-semi);
  font-size: var(--taille-petit);
  text-decoration-color: rgba(163, 0, 158, 0.35);
}

/* Groupe de boutons côte à côte */
.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin-top: var(--espace-l);
}


/* ==========================================================================
   06. BARRE DE NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--hauteur-nav);
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-douce),
              border-color var(--transition-douce);
}

/* État "déroulé" : la classe est ajoutée par le JavaScript au défilement */
.nav.est-deroulee {
  background: rgba(13, 13, 13, 0.97);
  border-bottom-color: var(--couleur-bordure-sombre);
}

.nav__interieur {
  width: 100%;
  max-width: var(--largeur-site);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--police-titres);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--texte-sur-sombre);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo:hover {
  color: #FFFFFF;
}

.logo__marque {
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Liens du menu --- */
.nav__liens {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-sur-sombre-doux);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
}

.nav__lien:hover,
.nav__lien[aria-current="page"] {
  color: #FFFFFF;
}

/* Petit trait dégradé sous le lien au survol */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--degrade-accent-clair);
  transition: width var(--transition-douce);
}

.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after {
  width: 100%;
}

.nav__cta {
  flex-shrink: 0;
}

/* --- Bouton menu mobile (burger) --- */
.nav__burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(241, 240, 236, 0.28);
  border-radius: var(--rayon-moyen);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav__burger-trait {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--texte-sur-sombre);
  transition: transform var(--transition-douce), opacity var(--transition-rapide);
}

/* Transformation du burger en croix quand le menu est ouvert */
.nav__burger[aria-expanded="true"] .nav__burger-trait:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-trait:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-trait:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   07. HERO (BANDEAU D'ACCUEIL)
   Fond noir profond. Aucune image, aucune capture d'écran.
   ========================================================================== */

.hero {
  background-color: var(--fond-sombre);
  color: var(--texte-sur-sombre);
  padding-top: calc(var(--hauteur-nav) + clamp(4rem, 9vw, 7.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

/* Halo très discret en haut à droite — pur CSS, aucune image chargée */
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(680px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(204, 0, 204, 0.16) 0%,
              rgba(107, 0, 128, 0.07) 42%,
              transparent 68%);
  pointer-events: none;
}

.hero__contenu {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero__accroche {
  margin-bottom: var(--espace-m);
}

.hero__sous-titre {
  font-family: var(--police-corps);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: var(--graisse-normale);
  line-height: 1.5;
  color: var(--texte-sur-sombre);
  max-width: 620px;
  margin-bottom: var(--espace-s);
}

.hero__tagline {
  font-size: var(--taille-corps);
  color: var(--texte-sur-sombre-doux);
  max-width: 560px;
}

/* --- Bandeau de 4 chiffres clés --- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-m);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--espace-l);
  border-top: 1px solid var(--couleur-bordure-sombre);
  position: relative;
  z-index: 1;
  list-style: none;
  padding-inline: 0;
}

.stat__valeur {
  display: block;
  font-family: var(--police-titres);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 0.35rem;
}

.stat__libelle {
  display: block;
  font-size: var(--taille-petit);
  line-height: 1.4;
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   08. BLOC ANTI-OUTIL
   Déclaration forte, texte large, peu d'éléments.
   ========================================================================== */

.anti-outil {
  border-top: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
  border-image-slice: 1;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.anti-outil__declaration {
  font-family: var(--police-titres);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: var(--lettrage-titre);
  margin: 0 0 var(--espace-l);
  max-width: 900px;
}

.anti-outil__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-l);
  margin-top: var(--espace-l);
}

.anti-outil__item {
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
}

.anti-outil__item h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.anti-outil__item p {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: 0;
}

/* Marqueur "ce n'est pas" / "c'est" */
.marqueur {
  display: inline-block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--rayon-petit);
  margin-bottom: var(--espace-s);
}

.marqueur--non {
  /* Gris renforcé : le gris secondaire tombait à 4,39 sur fond crème,
     juste sous le seuil WCAG AA de 4,5. */
  color: var(--couleur-gris-fonce);
  background: rgba(107, 105, 102, 0.09);
}

.marqueur--oui {
  color: var(--couleur-magenta-fonce);
  background: rgba(204, 0, 204, 0.08);
}


/* ==========================================================================
   09. (LIBRE)
   L'ancienne section « médecin » a été fusionnée dans la section
   « Qui vous parle » (voir 13 bis), où la métaphore est dite à la
   première personne et signée. Ses styles ont été retirés.
   ========================================================================== */


/* ==========================================================================
   10. CARTES PROFILS
   Ces styles ne servent plus sur la page d'accueil : les trois profils
   de dirigeants sont partis vers cas-clients.html / a-propos.html.
   Ils sont conservés ici, prêts à l'emploi pour ces pages.
   ========================================================================== */

.grille-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espace-m);
}

.profil {
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce),
              border-color var(--transition-douce);
}

.profil:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
  border-color: rgba(204, 0, 204, 0.28);
}

/* Numéro en haut de carte */
.profil__numero {
  font-family: var(--police-titres);
  font-size: 2.4rem;
  line-height: 1;
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: var(--espace-s);
}

.profil h3 {
  font-size: var(--taille-titre-3);
  font-family: var(--police-corps);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-s);
}

.profil__citation {
  font-family: var(--police-titres);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--texte-principal);
  margin-bottom: var(--espace-m);
  padding-left: var(--espace-s);
  border-left: 2px solid var(--couleur-magenta);
}

.profil p {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-s);
}

.profil__reponse {
  margin-top: auto;
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
  font-size: var(--taille-petit);
  color: var(--texte-principal);
}

.profil__reponse strong {
  color: var(--couleur-magenta-fonce);
}


/* ==========================================================================
   11. SECTION MÉTHODE 4 ÉTAPES
   ========================================================================== */

.methode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  counter-reset: etape;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etape {
  padding: var(--espace-l) var(--espace-m) var(--espace-l) 0;
  border-top: 2px solid var(--couleur-bordure);
  position: relative;
  counter-increment: etape;
}

/* Trait dégradé qui se remplit au survol */
.etape::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--degrade-accent);
  transition: width var(--transition-douce);
}

.etape:hover::before {
  width: 100%;
}

.etape__numero {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-s);
}

.etape h3 {
  font-size: var(--taille-titre-2);
  margin-bottom: var(--espace-xs);
}

.etape p {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: 0;
}


/* ==========================================================================
   12. SECTION "COMMENT ON S'Y PREND, CONCRÈTEMENT"
   Registre factuel : liste de faits, pas de promesses.
   ========================================================================== */

.concret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.concret__colonne-fixe {
  position: sticky;
  top: calc(var(--hauteur-nav) + 2rem);
}

/* Liste des faits concrets */
.faits {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fait;
}

.fait {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-m);
  padding-block: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
  counter-increment: fait;
}

.fait:first-child {
  border-top: 1px solid var(--couleur-bordure);
}

.fait__marqueur {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.08em;
  color: var(--couleur-magenta-fonce);
  padding-top: 0.35rem;
  white-space: nowrap;
  min-width: 4.5rem;
}

.fait__contenu h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.fait__contenu p {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: 0;
}

.section--sombre .fait,
.section--sombre .fait:first-child {
  border-color: var(--couleur-bordure-sombre);
}

.section--sombre .fait__marqueur {
  color: var(--couleur-magenta-clair);
}

/* Sur fond noir, les textes secondaires des listes doivent s'éclaircir,
   sinon le contraste tombe sous le seuil d'accessibilité WCAG AA. */
.section--sombre .fait__contenu p,
.section--sombre .profil p,
.section--sombre .etape p,
.section--sombre .anti-outil__item p,
.section--sombre .note {
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   13. LES QUATRE QUESTIONS (registre entretien)
   Remplace l'ancien simulateur à curseurs : on pose des questions
   écrites, on rend une lecture signée. Aucune manipulation d'outil.
   ========================================================================== */

.entretien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* --- Une question --- */
/* Attention : dans un <fieldset>, la légende s'affiche AU-DESSUS du contenu.
   Un padding-top sur le fieldset creuse donc un vide entre le titre et les
   réponses. On utilise un margin-top, qui pousse le bloc entier. */
.question {
  border: 0;
  border-top: 1px solid var(--couleur-bordure);
  margin: var(--espace-l) 0 0;
  padding: 0;
}

.question:first-of-type {
  border-top: 0;
  margin-top: 0;
}

.question:not(:first-of-type) .question__intitule {
  padding-top: var(--espace-l);
}

.question__intitule {
  padding: 0;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-2);
  line-height: var(--interligne-titre);
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin-bottom: var(--espace-m);
}

.question__numero {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: 0.6rem;
}

.question__reponses {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--espace-l);
}

/* Chaque réponse est une étiquette qui CONTIENT son bouton radio.
   Le bouton lui-même est invisible mais reste au bon endroit dans la page :
   la navigation au clavier fonctionne normalement, et les lecteurs d'écran
   annoncent bien un groupe de boutons radio. */
.question__reponse {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem;
  font-size: var(--taille-petit);
  line-height: 1.55;
  color: var(--texte-principal);
  background: var(--couleur-blanc);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon-moyen);
  cursor: pointer;
  transition: border-color var(--transition-rapide),
              background-color var(--transition-rapide);
  /* Zone de clic confortable au doigt (WCAG 2.5.5) */
  min-height: 48px;
}

.question__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* La petite pastille ronde à gauche de chaque réponse */
.question__reponse::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.22rem;
  border: 1.5px solid var(--couleur-gris-secondaire);
  border-radius: 50%;
  background: transparent;
  transition: border-color var(--transition-rapide),
              background var(--transition-rapide),
              box-shadow var(--transition-rapide);
}

.question__reponse:hover {
  border-color: var(--couleur-gris-secondaire);
  background: var(--fond-alterne);
}

/* Réponse choisie */
.question__reponse.est-choisie {
  border-color: var(--couleur-magenta);
  background: rgba(204, 0, 204, 0.045);
  font-weight: var(--graisse-moyenne);
}

.question__reponse.est-choisie::before {
  border-color: var(--couleur-magenta);
  background: var(--degrade-accent);
  box-shadow: inset 0 0 0 3px var(--couleur-blanc);
}

/* Contour de focus quand on navigue au clavier */
.question__reponse:has(.question__radio:focus-visible) {
  outline: 3px solid var(--focus-couleur);
  outline-offset: 3px;
}

/* Le texte de la réponse passe au-dessus du bouton radio invisible */
.question__texte {
  position: relative;
  z-index: 1;
}

.entretien__progression {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin: 0;
}


/* --- La lecture rendue en retour --- */
.lecture {
  background: var(--couleur-noir-profond);
  color: var(--texte-sur-sombre);
  border-radius: var(--rayon-grand);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  position: sticky;
  top: calc(var(--hauteur-nav) + 1.5rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.lecture.est-visible {
  opacity: 1;
  transform: none;
}

.lecture[hidden] {
  display: none;
}

/* Panneau affiché avant que les questions soient répondues */
.lecture--attente {
  opacity: 1;
  transform: none;
  background: var(--fond-alterne);
  border: 1px solid var(--couleur-bordure);
}

/* Le panneau d'attente est sur fond clair : les couleurs de texte doivent
   repasser en version foncée, sinon le contraste tombe sous le seuil WCAG AA.
   La double classe donne la priorité sur les règles génériques de .lecture. */
.lecture.lecture--attente .sur-titre {
  color: var(--couleur-magenta-fonce);
}

.lecture.lecture--attente .lecture__texte {
  color: var(--texte-principal);
  font-size: var(--taille-corps);
}

.lecture__rassurance {
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
  display: grid;
  gap: 0.7rem;
}

.lecture__rassurance li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  line-height: 1.5;
}

.lecture__rassurance li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  border-radius: 50%;
  background: var(--degrade-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

.lecture .sur-titre {
  color: var(--couleur-magenta-clair);
}

.lecture__titre {
  font-size: var(--taille-titre-2);
  color: var(--texte-sur-sombre);
  margin-bottom: var(--espace-s);
}

.lecture__texte {
  font-size: var(--taille-corps);
  line-height: 1.7;
  color: var(--texte-sur-sombre-doux);
  max-width: none;
}

.lecture__reco {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-sur-sombre-doux);
  padding-top: var(--espace-m);
  margin-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
  max-width: none;
}

.lecture__reco strong {
  color: var(--texte-sur-sombre);
}

.lecture .note {
  color: var(--texte-sur-sombre-doux);
  margin-bottom: 0;
}


/* ==========================================================================
   13 bis. INCARNATION — LA SECTION « QUI VOUS PARLE »
   La plus importante du site : elle met un visage sur la promesse.
   ========================================================================== */

.incarnation {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* --- Le portrait --- */
.incarnation__portrait {
  margin: 0;
  position: sticky;
  top: calc(var(--hauteur-nav) + 2rem);
}

.incarnation__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon-grand);
  background: var(--couleur-noir-profond);
}

.incarnation__portrait figcaption {
  display: block;
  margin-top: var(--espace-m);
  padding-left: var(--espace-s);
  border-left: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
}

.incarnation__portrait figcaption strong {
  display: block;
  font-family: var(--police-titres);
  font-weight: var(--graisse-normale);
  font-size: var(--taille-titre-3);
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
}

.incarnation__portrait figcaption span {
  display: block;
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  line-height: 1.5;
  margin-top: 0.2rem;
}

/* --- La citation dite à la première personne --- */
.citation-incarnee {
  margin: var(--espace-l) 0;
  padding: var(--espace-m) 0 var(--espace-m) var(--espace-m);
  border-left: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
  font-family: var(--police-titres);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
}

.citation-incarnee p {
  margin-bottom: var(--espace-s);
  max-width: none;
  color: var(--texte-principal);
}

.citation-incarnee p:last-child {
  margin-bottom: 0;
}

.citation-incarnee strong {
  font-weight: var(--graisse-normale);
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Les trois engagements --- */
.engagements {
  list-style: none;
  margin: var(--espace-l) 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.engagements li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-principal);
}

/* Coche dessinée en CSS, aucun fichier image chargé */
.engagements li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  border-radius: 50%;
  background: var(--degrade-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

/* --- La signature --- */
.signature {
  display: grid;
  gap: 0.15rem;
  margin: var(--espace-l) 0 0;
  max-width: none;
}

.signature__trait {
  display: block;
  width: 54px;
  height: 3px;
  background: var(--degrade-accent);
  border-radius: 2px;
  margin-bottom: var(--espace-s);
}

.signature__nom {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-3);
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
}

.signature__role {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

/* Version sur fond noir */
.signature--claire .signature__trait {
  background: var(--degrade-accent-clair);
}

.signature--claire .signature__nom {
  color: var(--texte-sur-sombre);
}

.signature--claire .signature__role {
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   13 ter. LE SCHÉMA DU PARCOURS CLIENT
   Deux panneaux côte à côte, dessinés en SVG dans la page.
   ========================================================================== */

.schema {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.schema__panneau {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  background: var(--couleur-blanc);
}

/* Le panneau de droite porte le dégradé signature en bordure */
.schema__panneau--phare {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--couleur-blanc), var(--couleur-blanc)) padding-box,
    var(--degrade-accent) border-box;
}

.schema__panneau h3 {
  font-size: var(--taille-titre-3);
  margin-bottom: 0.35rem;
}

.schema__sous-titre {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-m);
  max-width: none;
}

.schema__dessin {
  width: 100%;
  height: auto;
  font-family: var(--police-corps);
}

.schema__note {
  max-width: var(--largeur-texte);
  margin: var(--espace-l) auto 0;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
  text-align: center;
}


/* ==========================================================================
   13 quater. PHOTOS D'AMBIANCE
   Emplacements prévus pour vos photos. Tant que ce sont les images de
   réservation, elles restent sobres et ne cassent pas la mise en page.
   ========================================================================== */

.photo-ambiance {
  margin: var(--espace-l) 0 0;
}

.photo-ambiance img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon-moyen);
  background: var(--couleur-noir-profond);
}

.photo-ambiance figcaption {
  margin-top: 0.7rem;
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: var(--texte-secondaire);
}

.section--sombre .photo-ambiance figcaption {
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   13 quinquies. QUESTIONS FRÉQUENTES
   ========================================================================== */

.faq__item {
  padding-block: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
}

.faq__item:first-child {
  border-top: 1px solid var(--couleur-bordure);
}

.faq__item h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.faq__item p {
  margin-bottom: 0;
  color: var(--texte-principal);
  max-width: none;
}



/* ==========================================================================
   14. SECTION OFFRES ET TARIFS
   ========================================================================== */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--espace-m);
  align-items: stretch;
}

.offre {
  display: flex;
  flex-direction: column;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce);
}

.offre:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
}

/* Offre mise en avant (celle du milieu) */
.offre--phare {
  border-color: transparent;
  background:
    linear-gradient(var(--couleur-blanc), var(--couleur-blanc)) padding-box,
    var(--degrade-accent) border-box;
  border: 2px solid transparent;
  box-shadow: var(--ombre-carte);
  position: relative;
}

.offre__etiquette {
  position: absolute;
  top: -13px;
  left: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--degrade-accent);
  color: #FFFFFF;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--rayon-petit);
}

.offre__nom {
  font-size: var(--taille-titre-2);
  margin-bottom: var(--espace-xs);
}

.offre__pour {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-m);
  min-height: 3em;
}

/* Bloc prix */
.offre__prix {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-bottom: var(--espace-m);
  margin-bottom: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
}

.offre__montant {
  font-family: var(--police-titres);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--texte-principal);
}

.offre--phare .offre__montant {
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.offre__periode {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

/* Liste des prestations incluses */
.offre__inclus {
  list-style: none;
  margin: 0 0 var(--espace-l);
  padding: 0;
  display: grid;
  gap: 0.7rem;
  flex: 1;
}

.offre__inclus li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.65rem;
  font-size: var(--taille-petit);
  line-height: 1.55;
  color: var(--texte-principal);
}

/* Coche dessinée en CSS (aucune image chargée) */
.offre__inclus li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--degrade-accent);
  /* La coche blanche est un masque SVG en ligne, poids négligeable */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask-composite: exclude;
  flex-shrink: 0;
}

/* Mentions sous les offres */
.offres__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
  justify-content: center;
  margin-top: var(--espace-l);
  padding-top: var(--espace-l);
  border-top: 1px solid var(--couleur-bordure);
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

.offres__mentions span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}


/* ==========================================================================
   15. CTA DIAGNOSTIC + FORMULAIRE
   ========================================================================== */

.diagnostic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Encart prix du diagnostic */
.diagnostic__prix {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--espace-m);
}

.diagnostic__montant {
  font-family: var(--police-titres);
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  line-height: 1;
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.diagnostic__mention {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
}

/* --- Formulaire --- */
.formulaire {
  background: rgba(241, 240, 236, 0.05);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-grand);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: var(--espace-m);
}

.formulaire__ligne {
  display: grid;
  gap: 0.4rem;
}

.formulaire label {
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--texte-sur-sombre);
}

.formulaire .obligatoire {
  color: var(--couleur-magenta-clair);
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte-sur-sombre);
  background: rgba(13, 13, 13, 0.6);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-moyen);
  transition: border-color var(--transition-rapide);
  min-height: 48px;
}

.formulaire textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.formulaire input:hover,
.formulaire select:hover,
.formulaire textarea:hover {
  border-color: rgba(241, 240, 236, 0.32);
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  border-color: var(--couleur-magenta-clair);
}

.formulaire input::placeholder,
.formulaire textarea::placeholder {
  color: rgba(168, 166, 162, 0.7);
}

/* Case à cocher RGPD */
.formulaire__consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.formulaire__consentement input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
  accent-color: var(--couleur-magenta);
  cursor: pointer;
}

.formulaire__consentement label {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-normale);
  color: var(--texte-sur-sombre-doux);
  line-height: 1.55;
  cursor: pointer;
}

.formulaire__consentement a {
  color: var(--couleur-magenta-clair);
}

/* Message d'erreur sous un champ */
.erreur-champ {
  font-size: var(--taille-micro);
  color: #FF8FB0;
  min-height: 1.2em;
}

/* Message de confirmation après envoi */
.formulaire__message {
  padding: var(--espace-s) var(--espace-m);
  border-radius: var(--rayon-moyen);
  font-size: var(--taille-petit);
  line-height: 1.6;
}

.formulaire__message--succes {
  background: rgba(204, 0, 204, 0.14);
  border: 1px solid var(--couleur-magenta);
  color: var(--texte-sur-sombre);
}

.formulaire__message[hidden] {
  display: none;
}

/* Séparateur "ou" entre formulaire et prise de RDV */
.ou-separateur {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  font-size: var(--taille-micro);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-sur-sombre-doux);
}

.ou-separateur::before,
.ou-separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--couleur-bordure-sombre);
}


/* ==========================================================================
   16. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--couleur-noir-profond);
  color: var(--texte-sur-sombre-doux);
  padding-block: var(--espace-xl) var(--espace-l);
  border-top: 1px solid var(--couleur-bordure-sombre);
}

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--espace-l);
  padding-bottom: var(--espace-l);
  border-bottom: 1px solid var(--couleur-bordure-sombre);
}

.pied__marque p {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
  max-width: 34ch;
  margin-top: var(--espace-s);
}

.pied h2 {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-sur-sombre);
  margin-bottom: var(--espace-s);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pied a {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
  text-decoration: none;
}

.pied a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s) var(--espace-m);
  justify-content: space-between;
  align-items: center;
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
}

/* La double sélection l'emporte sur « .pied ul { display: grid } » */
.pied .pied__legaux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   17. ANIMATIONS À L'APPARITION
   Les éléments montent doucement quand ils entrent dans l'écran.
   Géré par le JavaScript (js/main.js).
   ========================================================================== */

.apparait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.apparait.est-visible {
  opacity: 1;
  transform: none;
}

/* Si l'utilisateur a désactivé les animations : tout est visible d'emblée */
@media (prefers-reduced-motion: reduce) {
  .apparait,
  .apparait.est-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sécurité : si le JavaScript est désactivé, tout reste visible */
.no-js .apparait {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   18. ADAPTATIONS MOBILE ET TABLETTE
   ========================================================================== */

/* --- Tablette (jusqu'à 980px) --- */
@media (max-width: 980px) {

  .concret,
  .diagnostic,
  .entretien,
  .incarnation {
    grid-template-columns: 1fr;
  }

  .concret__colonne-fixe,
  .lecture,
  .incarnation__portrait {
    position: static;
  }

  /* Le portrait ne doit pas occuper tout l'écran une fois seul sur sa ligne */
  .incarnation__portrait {
    max-width: 380px;
  }

  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-l) var(--espace-m);
  }

  .etape {
    padding-right: 0;
  }
}


/* --- Mobile (jusqu'à 780px) : menu déroulant --- */
@media (max-width: 780px) {

  .nav__burger {
    display: flex;
  }

  /* Le menu se transforme en panneau déroulant sous la barre */
  .nav__liens {
    position: fixed;
    top: var(--hauteur-nav);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(13, 13, 13, 0.99);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--couleur-bordure-sombre);
    padding: var(--espace-s) var(--marge-laterale) var(--espace-m);
    /* Caché par défaut */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--transition-douce),
                opacity var(--transition-rapide),
                visibility var(--transition-rapide);
  }

  .nav__liens.est-ouvert {
    max-height: calc(100vh - var(--hauteur-nav));
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }

  .nav__lien {
    display: block;
    font-size: var(--taille-corps);
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--couleur-bordure-sombre);
  }

  .nav__lien::after {
    display: none;
  }

  /* Le CTA de la nav rejoint le menu déroulant */
  .nav__cta {
    display: none;
  }

  .nav__liens .nav__cta-mobile {
    display: block;
    margin-top: var(--espace-m);
  }

  .nav__liens .nav__cta-mobile .bouton {
    width: 100%;
  }
}

/* Le CTA mobile est masqué sur grand écran */
.nav__cta-mobile {
  display: none;
}


/* --- Petit mobile (jusqu'à 560px) --- */
@media (max-width: 560px) {

  .hero__stats {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }

  .stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--espace-s);
  }

  .stat__valeur {
    font-size: 1.9rem;
    margin-bottom: 0;
  }

  .groupe-boutons {
    flex-direction: column;
    align-items: stretch;
  }

  .groupe-boutons .bouton {
    width: 100%;
  }

  .fait {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .offres__mentions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-s);
  }

  .detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}


/* ==========================================================================
   19. IMPRESSION
   Version sobre, sans fonds sombres (économie d'encre).
   ========================================================================== */

@media print {
  .nav,
  .nav__burger,
  .groupe-boutons,
  .lecture,
  .formulaire,
  .lien-evitement {
    display: none !important;
  }

  body,
  .section--sombre,
  .hero,
  .pied {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .accent-degrade,
  .stat__valeur,
  .offre__montant,
  .diagnostic__montant,
  .signature__nom,
  .citation-incarnee strong {
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
    background: none !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}


/* ==========================================================================
   20. PETITS UTILITAIRES
   ========================================================================== */

/* Conteneur légèrement plus large que la colonne de lecture */
.conteneur--large {
  max-width: 1000px;
}

/* Centrer un paragraphe court (lien « voir le détail », etc.) */
.centre-texte {
  text-align: center;
  max-width: none;
  margin-top: var(--espace-l);
  margin-bottom: 0;
}

/* Liste de faits resserrée, quand elle sert de rappel dans une colonne */
.faits--serres {
  margin-top: var(--espace-l);
}

.faits--serres .fait {
  padding-block: 0.9rem;
}

/* Titre et intro du formulaire */
.formulaire__titre {
  font-size: var(--taille-titre-2);
  margin-bottom: 0;
}

.formulaire__intro {
  margin: 0;
  color: var(--texte-sur-sombre-doux);
}

/* Le pied de page reprend la couleur claire pour ses notes */
.pied .note {
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   21. DERNIERS AJUSTEMENTS MOBILE
   ========================================================================== */

@media (max-width: 700px) {

  /* Le schéma passe en une seule colonne : on garde les deux panneaux
     l'un sous l'autre pour que la comparaison reste lisible. */
  .schema {
    grid-template-columns: 1fr;
  }

  /* Les réponses aux questions gagnent en confort tactile */
  .question__reponse {
    padding: 1.05rem 1.15rem;
  }

  .incarnation__portrait {
    max-width: none;
  }
}


/* ==========================================================================
   22. BOUTON D'ACTION FLOTTANT
   Le petit bouton rond en bas à droite, présent sur toutes les pages.
   Il s'ouvre au clic et propose les moyens de vous joindre.

   ⚠️  Pour changer les canaux proposés, modifiez le bloc correspondant
       dans le fichier HTML (cherchez « BOUTON FLOTTANT »).
   ========================================================================== */

.flottant {
  position: fixed;
  /* Collé au bord droit de la fenêtre : c'est là qu'on cherche ce genre de
     bouton, sur tous les sites. Il ne suit plus la colonne de contenu.

     ⚠️  CENTRÉ EN HAUTEUR, et non plus en bas de l'écran. Le groupe reste
         à mi-hauteur quel que soit l'endroit où l'on se trouve dans la page.
         « top: 50 % » place le HAUT du bloc au milieu, la translation de
         moitié le recentre vraiment : les deux lignes vont ensemble. */
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;

  /* Le groupe ne dépasse jamais de l'écran, même quand le panneau est
     déplié sur un petit écran : il défile à l'intérieur si besoin. */
  max-height: calc(100vh - 2rem);
}

/* --- Le panneau qui se déplie ---
   ⚠️  Depuis que le groupe est centré en hauteur, le panneau peut être plus
       haut que l'écran sur un petit appareil. Il défile alors à l'intérieur
       plutôt que de sortir de la fenêtre. */
.flottant__panneau {
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem;
  width: min(280px, calc(100vw - 2.5rem));
  background: var(--couleur-noir-profond);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-grand);
  box-shadow: 0 12px 40px rgba(13, 13, 13, 0.32);
  transform-origin: bottom right;
  transition: opacity var(--transition-douce),
              transform var(--transition-douce),
              visibility var(--transition-douce);
}

.flottant__panneau[hidden] {
  display: grid;          /* on garde la grille pour pouvoir animer */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
}

.flottant__titre {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-clair);
  margin: 0.25rem 0 0.5rem 0.6rem;
}

/* --- Une ligne du panneau --- */
.flottant__lien {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.75rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-sur-sombre);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--rayon-moyen);
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 48px;
  transition: background-color var(--transition-rapide);
  font-family: var(--police-corps);
}

.flottant__lien:hover {
  background: rgba(241, 240, 236, 0.08);
  color: #FFFFFF;
}

/* La ligne principale (diagnostic) porte le dégradé signature */
.flottant__lien--phare {
  background: var(--degrade-accent);
  color: #FFFFFF;
  font-weight: var(--graisse-semi);
}

.flottant__lien--phare:hover {
  background: var(--degrade-accent);
  filter: brightness(1.12);
}

/* Pictogrammes dessinés en CSS, aucun fichier image chargé */
.flottant__icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icone--diagnostic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 4 5-7 4 5'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 4 5-7 4 5'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

.icone--visio {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M15 11l7-4v10l-7-4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M15 11l7-4v10l-7-4z'/%3E%3C/svg%3E");
}

.icone--telephone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.2a2 2 0 012.1-.5c.9.3 1.8.6 2.8.7a2 2 0 011.7 2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.2a2 2 0 012.1-.5c.9.3 1.8.6 2.8.7a2 2 0 011.7 2z'/%3E%3C/svg%3E");
}

.icone--whatsapp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15L2 22l5.2-1.4A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1112 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 01-3.3-2.9c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5v-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3a2.9 2.9 0 00-.9 2.1 5 5 0 001 2.6 11.4 11.4 0 004.4 3.9c1.6.6 2.2.7 3 .6a2.5 2.5 0 001.7-1.2c.2-.5.2-.9.1-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15L2 22l5.2-1.4A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1112 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 01-3.3-2.9c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5v-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3a2.9 2.9 0 00-.9 2.1 5 5 0 001 2.6 11.4 11.4 0 004.4 3.9c1.6.6 2.2.7 3 .6a2.5 2.5 0 001.7-1.2c.2-.5.2-.9.1-1z'/%3E%3C/svg%3E");
}

.icone--linkedin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.75-1.95C20.4 8.75 21 11 21 14v7h-4v-6.2c0-1.5-.03-3.4-2.1-3.4-2.1 0-2.4 1.6-2.4 3.3V21H9z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.75-1.95C20.4 8.75 21 11 21 14v7h-4v-6.2c0-1.5-.03-3.4-2.1-3.4-2.1 0-2.4 1.6-2.4 3.3V21H9z'/%3E%3C/svg%3E");
}

.icone--chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-9 8.4 9 9 0 01-4-.9L3 20.5l1.5-4.5a8.4 8.4 0 01-.9-4 8.4 8.4 0 018.4-8.4h.5a8.4 8.4 0 018.5 8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-9 8.4 9 9 0 01-4-.9L3 20.5l1.5-4.5a8.4 8.4 0 01-.9-4 8.4 8.4 0 018.4-8.4h.5a8.4 8.4 0 018.5 8z'/%3E%3C/svg%3E");
}

/* Numéro affiché sous le libellé */
.flottant__precision {
  display: block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-normale);
  color: var(--texte-sur-sombre-doux);
  margin-top: 0.1rem;
}

.flottant__lien--phare .flottant__precision {
  color: rgba(255, 255, 255, 0.82);
}

/* --- Le bouton rond --- */
.flottant__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.35rem;
  min-height: 56px;
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: #FFFFFF;
  background: var(--degrade-accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(204, 0, 204, 0.34);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.flottant__bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(204, 0, 204, 0.44);
}

/* Le pictogramme du bouton devient une croix quand le panneau est ouvert */
.flottant__bouton-icone {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.flottant__bouton-icone::before,
.flottant__bouton-icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
  transition: transform var(--transition-douce);
}

.flottant__bouton-icone::before { transform: translate(-50%, -50%) rotate(0deg); }
.flottant__bouton-icone::after  { transform: translate(-50%, -50%) rotate(90deg); }

.flottant__bouton[aria-expanded="true"] .flottant__bouton-icone::before { transform: translate(-50%, -50%) rotate(45deg); }
.flottant__bouton[aria-expanded="true"] .flottant__bouton-icone::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Sur petit écran, le bouton se réduit au pictogramme seul */
@media (max-width: 560px) {
  .flottant__bouton-texte {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .flottant__bouton {
    padding: 1rem;
    width: 56px;
    justify-content: center;
  }
}

/* À l'impression, le bouton disparaît */
@media print {
  .flottant { display: none !important; }
}


/* ==========================================================================
   23. SÉLECTEUR « QUEL PROFIL ÊTES-VOUS ? »
   Le premier aiguillage de la page d'accueil : quatre portes d'entrée
   vers l'endroit précis du site qui répond à chaque situation.
   ========================================================================== */

.aiguillage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--espace-m);
}

.porte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  text-decoration: none;
  color: var(--texte-principal);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce),
              border-color var(--transition-douce);
}

.porte:hover {
  color: var(--texte-principal);
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
  border-color: rgba(204, 0, 204, 0.3);
}

/* La phrase que le dirigeant se dit à lui-même */
.porte__phrase {
  font-family: var(--police-titres);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: var(--lettrage-titre);
  margin-bottom: var(--espace-s);
}

.porte__reponse {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  line-height: 1.6;
  margin-bottom: var(--espace-m);
  flex: 1;
}

/* Le renvoi, en bas de carte */
.porte__destination {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.04em;
  color: var(--couleur-magenta-fonce);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
  margin-top: auto;
}

.porte:hover .porte__destination .fleche {
  transform: translateX(3px);
}


/* ==========================================================================
   24. APERÇUS DE PAGE
   Blocs courts qui résument une page et renvoient vers elle.
   C'est ce qui permet à l'accueil de rester une page d'aiguillage.
   ========================================================================== */

.apercu {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.apercu--inverse .apercu__texte {
  order: 2;
}

.apercu__texte p {
  max-width: 46ch;
}

/* Liste courte de points, sans être une liste à puces classique */
.apercu__points {
  list-style: none;
  margin: var(--espace-m) 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.apercu__points li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  font-size: var(--taille-petit);
  line-height: 1.6;
}

.apercu__points li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--degrade-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

.section--sombre .apercu__points li {
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   25. PÉDAGOGIE — « LE MOT EN CLAIR »
   Encadrés qui traduisent le jargon digital. C'est le fil rouge de la
   marque : rendre simple ce qui est complexe.
   ========================================================================== */

.en-clair {
  margin: var(--espace-m) 0;
  padding: var(--espace-m);
  background: var(--fond-alterne);
  border-left: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
  border-radius: 0 var(--rayon-moyen) var(--rayon-moyen) 0;
  max-width: var(--largeur-texte);
}

.en-clair__label {
  display: block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: 0.5rem;
}

.en-clair__terme {
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

.en-clair p {
  margin-bottom: 0;
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-principal);
  max-width: none;
}

/* Version sur fond sombre */
.section--sombre .en-clair {
  background: rgba(241, 240, 236, 0.05);
}

.section--sombre .en-clair p,
.section--sombre .en-clair__terme {
  color: var(--texte-sur-sombre);
}

.section--sombre .en-clair__label {
  color: var(--couleur-magenta-clair);
}


/* ==========================================================================
   26. L'ENTONNOIR DU PARCOURS CLIENT
   Le visuel central de la page « Votre parcours client 360 ».
   Quatre étapes, les volumes qui passent, et surtout où ça fuit.
   ========================================================================== */

.entonnoir {
  display: grid;
  gap: 0;
  margin-block: var(--espace-l);
}

/* --- Une étape --- */
.etape-parcours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
}

.etape-parcours:first-child {
  border-top: 0;
}

.etape-parcours__nom {
  display: block;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-3);
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-sur-sombre);
  margin-bottom: 0.2rem;
}

.etape-parcours__question {
  display: block;
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: var(--texte-sur-sombre-doux);
}

/* La barre proportionnelle au volume */
.etape-parcours__mesure {
  display: grid;
  gap: 0.5rem;
}

.barre {
  height: 34px;
  border-radius: var(--rayon-petit);
  background: rgba(241, 240, 236, 0.07);
  overflow: hidden;
  position: relative;
}

.barre__remplissage {
  height: 100%;
  background: var(--degrade-accent-clair);
  border-radius: var(--rayon-petit);
  /* La largeur est fixée par l'attribut style dans le HTML,
     pour rester lisible et modifiable à la main. */
}

.etape-parcours__chiffres {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.etape-parcours__volume {
  font-family: var(--police-titres);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  color: var(--texte-sur-sombre);
}

.etape-parcours__unite {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
}

/* --- Le marqueur de fuite entre deux étapes --- */
.fuite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: var(--espace-s);
}

.fuite__contenu {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: rgba(204, 0, 204, 0.10);
  border: 1px solid rgba(240, 107, 240, 0.34);
  border-radius: var(--rayon-moyen);
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-sur-sombre);
}

/* Le petit triangle d'alerte, dessiné en CSS */
.fuite__signe {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 0.15rem;
  background: var(--couleur-magenta-clair);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.6a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.6a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fuite__taux {
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-clair);
  white-space: nowrap;
}

/* Mention légale sous l'entonnoir */
.entonnoir__mention {
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
  max-width: none;
}


/* ==========================================================================
   27. TÉMOIGNAGES
   Bloc conçu pour être DUPLIQUÉ : copiez un <article class="temoignage">
   entier, collez-le à la suite, remplacez le texte et la photo.
   ========================================================================== */

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--espace-m);
  align-items: start;
}

.temoignage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
}

/* Le guillemet ouvrant, dessiné en typographie */
.temoignage__verbatim {
  font-family: var(--police-titres);
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin: 0 0 var(--espace-m);
  max-width: none;
  flex: 1;
}

/* Chiffre mis en avant dans un témoignage (facultatif) */
.temoignage__chiffre {
  display: block;
  font-family: var(--police-titres);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1;
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 0.25rem;
}

.temoignage__chiffre-libelle {
  display: block;
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: var(--texte-secondaire);
  padding-bottom: var(--espace-m);
  margin-bottom: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
}

/* La signature du témoin */
.temoignage__auteur {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
}

.temoignage__portrait {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fond-alterne);
}

/* Si aucune photo n'est disponible : initiales dans un rond dégradé */
.temoignage__initiales {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--degrade-accent);
  color: #FFFFFF;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.04em;
}

.temoignage__identite {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.temoignage__nom {
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

.temoignage__role {
  font-size: var(--taille-micro);
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* Étiquette « bêta-testeur » */
.temoignage__etiquette {
  align-self: flex-start;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  background: rgba(204, 0, 204, 0.08);
  padding: 0.25rem 0.6rem;
  border-radius: var(--rayon-petit);
  margin-bottom: var(--espace-m);
}

/* Signale visuellement un bloc encore à remplir.
   ⚠️  SUPPRIMEZ la classe « a-remplir » une fois le vrai texte en place. */
.a-remplir {
  border-style: dashed;
  border-color: var(--couleur-magenta);
  background: rgba(204, 0, 204, 0.02);
}

.a-remplir::before {
  content: "À remplacer par un vrai témoignage";
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-s);
}


/* ==========================================================================
   28. TABLEAU DE COMPARAISON
   Sert à situer MyUO face aux autres catégories du marché.
   ========================================================================== */

.comparaison {
  overflow-x: auto;
  margin-block: var(--espace-l);
  /* Le tableau reste lisible sur mobile en défilant horizontalement */
  -webkit-overflow-scrolling: touch;
  /* Indispensable : sans cette ligne, les textes réservés aux lecteurs
     d'écran (positionnés en absolu) s'échappent du tableau et provoquent
     un défilement horizontal de toute la page sur mobile. */
  position: relative;
}

/* Le cadre reçoit le focus au clavier : sans cela, une personne qui navigue
   sans souris ne peut pas faire défiler le tableau (critère WCAG 2.1.1). */
.comparaison:focus-visible {
  outline: 2px solid var(--focus-couleur);
  outline-offset: 3px;
}

.comparaison table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--taille-petit);
}

.comparaison caption {
  text-align: left;
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  padding-bottom: var(--espace-s);
}

.comparaison th,
.comparaison td {
  padding: 0.9rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--couleur-bordure);
  line-height: 1.55;
}

.comparaison thead th {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-secondaire);
  border-bottom-width: 2px;
  border-bottom-color: var(--couleur-anthracite);
}

.comparaison tbody th {
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
  width: 22%;
}

/* La colonne MyUO est mise en valeur */
.comparaison .colonne-myuo {
  background: rgba(204, 0, 204, 0.045);
  color: var(--texte-principal);
  font-weight: var(--graisse-moyenne);
}

.comparaison thead .colonne-myuo {
  color: var(--couleur-magenta-fonce);
  border-bottom-color: var(--couleur-magenta);
}


/* ==========================================================================
   29. LETTRE D'INFORMATIONS (pied de page)
   ========================================================================== */

.lettre {
  padding-block: var(--espace-l);
  border-bottom: 1px solid var(--couleur-bordure-sombre);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.lettre__nom {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-2);
  color: var(--texte-sur-sombre);
  margin-bottom: 0.35rem;
}

.lettre__promesse {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
  margin-bottom: 0;
  max-width: 42ch;
}

/* min-width: 0 sur les deux blocs : sans cela, le champ e-mail impose sa
   largeur naturelle et fait déborder le pied de page sur un écran de 320 px. */
.lettre__form {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.lettre__ligne {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}

.lettre__ligne input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.85rem 1rem;
  min-height: 50px;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte-sur-sombre);
  background: rgba(13, 13, 13, 0.55);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-moyen);
  transition: border-color var(--transition-rapide);
}

.lettre__ligne input[type="email"]:focus {
  border-color: var(--couleur-magenta-clair);
}

.lettre__ligne input[type="email"]::placeholder {
  color: rgba(168, 166, 162, 0.75);
}

.lettre__ligne .bouton {
  flex: 0 0 auto;
}

.lettre__mention {
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-sur-sombre-doux);
  margin: 0;
  max-width: none;
}

.lettre__mention a {
  color: var(--couleur-magenta-clair);
}


/* ==========================================================================
   30. PAGE DE BIENVENUE (après inscription à la lettre)
   ========================================================================== */

.bienvenue__accuse {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-clair);
  margin-bottom: var(--espace-m);
}

.bienvenue__accuse::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--degrade-accent-clair);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Choix des thématiques suivies */
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.7rem;
  margin-block: var(--espace-l);
}

.theme {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  min-height: 48px;
  background: var(--couleur-blanc);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon-moyen);
  cursor: pointer;
  transition: border-color var(--transition-rapide), background-color var(--transition-rapide);
}

.theme:hover {
  border-color: var(--couleur-gris-secondaire);
  background: var(--fond-alterne);
}

.theme input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.theme__case {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--couleur-gris-secondaire);
  border-radius: var(--rayon-petit);
  transition: background var(--transition-rapide), border-color var(--transition-rapide);
}

.theme.est-choisi {
  border-color: var(--couleur-magenta);
  background: rgba(204, 0, 204, 0.045);
}

.theme.est-choisi .theme__case {
  border-color: var(--couleur-magenta);
  background: var(--degrade-accent);
  -webkit-mask: none;
  mask: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--degrade-accent);
  background-size: 86%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.theme:has(input:focus-visible) {
  outline: 3px solid var(--focus-couleur);
  outline-offset: 3px;
}

.theme__texte {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.15rem;
}

.theme__nom {
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

.theme__detail {
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: var(--texte-secondaire);
}


/* ==========================================================================
   31. DERNIÈRES ADAPTATIONS MOBILE
   ========================================================================== */

@media (max-width: 900px) {

  /* minmax(0, 1fr) et non 1fr : sans le 0, la colonne refuse de descendre
     sous la largeur de son contenu et déborde sur les très petits écrans. */
  .apercu,
  .lettre {
    grid-template-columns: minmax(0, 1fr);
  }

  .apercu--inverse .apercu__texte {
    order: 0;
  }

  .etape-parcours,
  .fuite {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .fuite__contenu {
    grid-column: 1;
  }
}


/* ==========================================================================
   32. FIL D'ARIANE
   Le petit chemin de navigation en haut des pages intérieures.
   ========================================================================== */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
  margin-bottom: var(--espace-m);
}

.fil-ariane a {
  color: var(--texte-sur-sombre-doux);
  text-decoration-color: rgba(168, 166, 162, 0.4);
}

.fil-ariane a:hover {
  color: var(--couleur-magenta-clair);
}


/* ==========================================================================
   33. LIENS ET ACCENTS SUR FOND SOMBRE
   Le magenta foncé sert de couleur de lien sur fond clair. Sur fond noir,
   il tombe à 2,8 de contraste : il faut repasser en magenta clair.
   Ces règles évitent d'avoir à y penser section par section.
   ========================================================================== */

.section--sombre a:not(.bouton):not(.logo),
.hero a:not(.bouton):not(.logo) {
  color: var(--couleur-magenta-clair);
}

/* Dans le pied de page, les liens de navigation restent discrets : ce sont
   des repères, pas des appels à l'action. Seuls les liens en pleine phrase
   (politique de confidentialité, par exemple) prennent la couleur d'accent. */
.pied nav a,
.pied__legaux a {
  color: var(--texte-sur-sombre-doux);
}

.pied nav a:hover,
.pied__legaux a:hover {
  color: #FFFFFF;
}

.section--sombre a:not(.bouton):not(.logo):hover,
.hero a:not(.bouton):not(.logo):hover {
  color: #FFFFFF;
}

/* Les petits labels magenta doivent aussi s'éclaircir sur fond noir */
.section--sombre .etape__numero,
.section--sombre .porte__destination,
.section--sombre .en-clair__label,
.hero .etape__numero {
  color: var(--couleur-magenta-clair);
}

/* Les cartes posées sur une section sombre gardent un fond clair :
   leurs liens internes doivent donc rester en magenta foncé. */
.section--sombre .porte a,
.section--sombre .schema__panneau a,
.section--sombre .temoignage a,
.section--sombre .lecture--attente a {
  color: var(--couleur-magenta-fonce);
}


/* ==========================================================================
   34. MARQUEURS DE CONFIANCE
   Les cinq engagements techniques du site, présentés en cartes avec un
   pictogramme dessiné sur mesure. Ils remplacent les anciennes pastilles.

   Les pictogrammes partagent un même motif — un point plein, écho de
   l'icône du site — pour former une famille reconnaissable.
   ========================================================================== */

/* --- Le bandeau « Le site MyUO est optimisé pour » ---
   Fond clair, cartes centrées, petit filet dégradé sous chaque titre.
   Il se place juste avant le pied de page, sur toutes les pages. */
.optimise {
  background-color: var(--couleur-blanc);
  border-top: 1px solid var(--couleur-bordure);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.optimise__titre {
  font-family: var(--police-titres);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: var(--lettrage-titre);
  text-align: center;
  margin-bottom: var(--espace-l);
}

/* Cinq cartes : une grille laisserait une carte orpheline en bout de ligne.
   Le flex centré répartit proprement quel que soit le nombre de cartes. */
.marqueurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.marqueur-confiance {
  flex: 1 1 195px;
  max-width: 260px;
}

.marqueur-confiance {
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: clamp(1.5rem, 2.6vw, 2rem) var(--espace-m);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  align-content: start;
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce);
}

.marqueur-confiance:hover {
  border-color: rgba(204, 0, 204, 0.28);
  box-shadow: var(--ombre-carte);
}

/* Le pictogramme */
.marqueur-confiance svg {
  width: 34px;
  height: 34px;
  overflow: visible;
}

/* Traits du pictogramme : le dégradé signature */
.marqueur-confiance .picto-trait {
  fill: none;
  stroke: url(#degrade-picto);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marqueur-confiance .picto-point {
  fill: url(#degrade-picto);
  stroke: none;
}

.marqueur-confiance .picto-faible {
  fill: none;
  stroke: rgba(13, 13, 13, 0.22);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le titre, en capitales, avec le petit filet dégradé en dessous */
.marqueur-confiance__titre {
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-principal);
  margin: 0.6rem 0 0;
  padding-bottom: 0.85rem;
  position: relative;
}

.marqueur-confiance__titre::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2px;
  background-image: var(--degrade-accent);
}

.marqueur-confiance__preuve {
  font-size: var(--taille-micro);
  line-height: 1.6;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}

/* --- Le pied de page : titre de colonne et réseaux sociaux --- */
.pied__titre-marque {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-sur-sombre);
  margin: var(--espace-m) 0 var(--espace-xs);
}

.pied__reseaux {
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pied .pied__reseaux {
  display: flex;
}

.pied__reseaux a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 999px;
  font-size: var(--taille-micro);
  min-height: 40px;
  transition: border-color var(--transition-rapide);
}

.pied__reseaux a:hover {
  border-color: var(--couleur-magenta-clair);
}

.pied__reseau-icone svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.pied__engagements a {
  line-height: 1.5;
}



/* ==========================================================================
   35. BLOC ÉDITORIAL — TROIS ARTICLES DU BLOG
   Placé sur toutes les pages, entre la section finale et le pied de page.

   ⚠️  POUR CHANGER UN ARTICLE : voir le commentaire « TROIS ARTICLES »
       dans le fichier HTML. Chaque carte est un bloc <a> complet, à
       dupliquer ou remplacer.
   ========================================================================== */

.editorial {
  background: var(--fond-alterne);
  padding-block: var(--section-padding);
  border-top: 1px solid var(--couleur-bordure);
}

.editorial__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-m);
  margin-bottom: var(--espace-l);
}

.editorial__entete h2 {
  margin-bottom: 0;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espace-m);
}

/* --- Une carte article --- */
.decryptage {
  display: flex;
  flex-direction: column;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  overflow: hidden;
  text-decoration: none;
  color: var(--texte-principal);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce),
              border-color var(--transition-douce);
}

.article:hover {
  color: var(--texte-principal);
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
  border-color: rgba(204, 0, 204, 0.28);
}

/* La couverture : motif géométrique dessiné en SVG, aucune photo à charger */
.article__couverture {
  aspect-ratio: 16 / 9;
  background: var(--couleur-noir-profond);
  position: relative;
  overflow: hidden;
}

.article__couverture svg {
  width: 100%;
  height: 100%;
  display: block;
}

.article__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
}

/* Étiquette de rubrique */
.article__rubrique {
  align-self: flex-start;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  background: rgba(204, 0, 204, 0.08);
  padding: 0.25rem 0.6rem;
  border-radius: var(--rayon-petit);
  margin-bottom: 0.85rem;
}

.article__titre {
  font-family: var(--police-titres);
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: var(--lettrage-titre);
  margin: 0 0 0.6rem;
}

.article__chapeau {
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-secondaire);
  margin: 0 0 var(--espace-m);
  flex: 1;
  max-width: none;
}

.article__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
}

.article__lire {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-fonce);
}

.article:hover .article__lire .fleche {
  transform: translateX(3px);
}

/* Marque un article encore fictif.
   ⚠️  SUPPRIMEZ la classe « a-publier » quand l'article existe vraiment. */
.article.a-publier .article__couverture::after {
  content: "Article à publier";
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-sur-sombre);
  background: rgba(13, 13, 13, 0.72);
  border: 1px dashed var(--couleur-magenta-clair);
  padding: 0.2rem 0.55rem;
  border-radius: var(--rayon-petit);
}


/* ==========================================================================
   36. SECTION FINALE ET SÉPARATION DU PIED DE PAGE
   La section « La suite » doit se détacher nettement de ce qui la précède
   et de ce qui la suit, sinon tout le bas de page se confond.
   ========================================================================== */

.section--final {
  position: relative;
  border-top: 1px solid var(--couleur-bordure-sombre);
}

/* Un trait dégradé court, centré, qui ouvre la section */
.section--final::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: var(--degrade-accent-clair);
}

/* Le pied de page se démarque par un filet net.
   L'espace supplémentaire en bas évite que le bouton flottant ne recouvre
   les mentions légales quand on est arrivé tout en bas de la page. */
.pied {
  border-top: 1px solid var(--couleur-bordure-sombre);
  padding-bottom: calc(var(--espace-l) + 56px);
}

/* Bloc d'inscription : encadré, pour ne plus se confondre avec les colonnes */
.lettre {
  background: rgba(241, 240, 236, 0.04);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-grand);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: var(--espace-xl);
  border-bottom: 1px solid var(--couleur-bordure-sombre);
}

.lettre__periodicite {
  display: inline-block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-clair);
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   37. DERNIÈRES ADAPTATIONS MOBILE
   ========================================================================== */

@media (max-width: 700px) {

  .editorial__entete {
    flex-direction: column;
    align-items: flex-start;
  }

  .marqueurs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .marqueurs {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   38. PILIERS — « BASÉE SUR VOUS »
   Quatre fondations numérotées, pour la page MyUO.
   ========================================================================== */

.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--couleur-bordure);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pilier {
  background: var(--couleur-blanc);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: background-color var(--transition-douce);
}

.pilier:hover {
  background: var(--fond-alterne);
}

.pilier__rang {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
}

.pilier h3 {
  font-size: var(--taille-titre-2);
  margin: 0;
}

.pilier p {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}

/* Le dernier pilier — vos clients — est celui qui compte le plus */
.pilier--essentiel {
  background:
    linear-gradient(var(--couleur-blanc), var(--couleur-blanc)) padding-box,
    var(--degrade-accent) border-box;
  border-left: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
}

.pilier--essentiel h3 {
  background: var(--degrade-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ==========================================================================
   39. LISTE « CE QUE NOUS NE FERONS PAS »
   Dire ses limites vaut mieux que promettre trop.
   ========================================================================== */

.limites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: var(--largeur-texte);
}

.limites li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.8rem;
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-sur-sombre-doux);
}

/* Une croix fine, dessinée en CSS */
.limites li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background: var(--texte-sur-sombre-doux);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 88% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 88% no-repeat;
}

.limites strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}


/* ==========================================================================
   40. LES QUESTIONS QUE NOUS SAVONS TRAITER
   Bloc de la page MyUO : l'expertise se prouve par les questions qu'on
   sait résoudre, jamais par un curriculum.
   ========================================================================== */

.traitees {
  display: grid;
  /* min(320px, 100%) : la carte ne descend pas sous 320 px tant qu'il y a
     la place, mais elle s'y résout plutôt que de déborder de l'écran. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--espace-m);
}

.traitee {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce);
}

.traitee:hover {
  border-color: rgba(204, 0, 204, 0.28);
  box-shadow: var(--ombre-carte);
}

/* La question, telle qu'un dirigeant se la pose */
.traitee__question {
  font-family: var(--police-titres);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin: 0 0 var(--espace-s);
  padding-left: var(--espace-s);
  border-left: 3px solid transparent;
  border-image: var(--degrade-accent) 1;
  max-width: none;
}

.traitee__reponse {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0 0 var(--espace-m);
  flex: 1;
  max-width: none;
}

/* Pourquoi personne d'autre ne peut y répondre */
.traitee__angle {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-principal);
  margin: 0;
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
  max-width: none;
}

/* Un petit œil barré : ce que personne ne voit depuis son poste */
.traitee__angle::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  background: var(--couleur-magenta-fonce);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.1A9.6 9.6 0 0 1 12 4.9c5 0 9 4.1 10 7.1a13 13 0 0 1-2.3 3.5M6.3 6.4A13.5 13.5 0 0 0 2 12c1 3 5 7.1 10 7.1 1.9 0 3.6-.6 5-1.4M3 3l18 18M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.1A9.6 9.6 0 0 1 12 4.9c5 0 9 4.1 10 7.1a13 13 0 0 1-2.3 3.5M6.3 6.4A13.5 13.5 0 0 0 2 12c1 3 5 7.1 10 7.1 1.9 0 3.6-.6 5-1.4M3 3l18 18M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La phrase de conclusion sous les six questions */
.traitees__chute {
  max-width: var(--largeur-texte);
  margin: var(--espace-l) auto 0;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
  text-align: center;
  font-family: var(--police-titres);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
}


/* ==========================================================================
   41. PROMESSES ET LIMITES — LES DEUX FACES
   « Ce que nous ferons pour vous » et « Ce que nous ne ferons pas » sont
   deux blocs jumeaux, volontairement construits de la même manière.
   L'un coche, l'autre barre.
   ========================================================================== */

.engagements-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: var(--largeur-texte);
}

.engagements-liste li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.85rem;
  font-size: var(--taille-petit);
  line-height: 1.65;
}

.engagements-liste li::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
}

/* --- Version positive : la promesse --- */
.engagements-liste--oui li {
  color: var(--texte-secondaire);
}

.engagements-liste--oui li::before {
  border-radius: 50%;
  background: var(--degrade-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

.engagements-liste--oui strong {
  display: block;
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
  margin-bottom: 0.15rem;
}

/* --- Version négative : la limite. Reprend .limites, sur fond sombre --- */
.engagements-liste--non li {
  color: var(--texte-sur-sombre-doux);
}

.engagements-liste--non li::before {
  background: var(--texte-sur-sombre-doux);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 86% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 86% no-repeat;
}

.engagements-liste--non strong {
  display: block;
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
  margin-bottom: 0.15rem;
}


/* ==========================================================================
   42. FAQ EN ACCORDÉON
   Une seule question ouverte à la fois. Repose sur les balises natives
   <details> et <summary> : cela fonctionne même sans JavaScript, et les
   lecteurs d'écran annoncent correctement l'état ouvert ou fermé.
   ========================================================================== */

.faq__item {
  border-bottom: 1px solid var(--couleur-bordure);
  padding: 0;
}

.faq__item:first-child {
  border-top: 1px solid var(--couleur-bordure);
}

/* La question cliquable */
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-m);
  padding-block: var(--espace-m);
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  line-height: 1.4;
  color: var(--texte-principal);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  transition: color var(--transition-rapide);
}

/* On retire le triangle par défaut des navigateurs */
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ""; }

.faq__item > summary:hover {
  color: var(--couleur-magenta-fonce);
}

/* L'indicateur plus / moins, dessiné en CSS */
.faq__signe {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.3rem;
  border: 1.5px solid var(--couleur-bordure);
  border-radius: 50%;
  transition: border-color var(--transition-rapide),
              background var(--transition-rapide),
              transform var(--transition-douce);
}

.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--texte-principal);
  border-radius: 1px;
  transition: transform var(--transition-douce), background var(--transition-rapide);
}

.faq__signe::before {
  width: 10px; height: 1.6px;
  transform: translate(-50%, -50%);
}

.faq__signe::after {
  width: 1.6px; height: 10px;
  transform: translate(-50%, -50%);
}

.faq__item > summary:hover .faq__signe {
  border-color: var(--couleur-magenta);
}

/* Ouvert : la croix devient un trait, le rond se remplit du dégradé */
.faq__item[open] > summary {
  color: var(--couleur-magenta-fonce);
}

.faq__item[open] .faq__signe {
  border-color: transparent;
  background: var(--degrade-accent);
  transform: rotate(180deg);
}

.faq__item[open] .faq__signe::before,
.faq__item[open] .faq__signe::after {
  background: #FFFFFF;
}

.faq__item[open] .faq__signe::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* La réponse */
.faq__reponse {
  padding-bottom: var(--espace-m);
  margin: 0;
  color: var(--texte-principal);
  max-width: none;
  animation: faq-apparition var(--transition-douce) ease;
}

@keyframes faq-apparition {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__reponse { animation: none; }
  .faq__signe { transition: none; }
}

/* Contour de focus au clavier */
.faq__item > summary:focus-visible {
  outline: 3px solid var(--focus-couleur);
  outline-offset: -3px;
  border-radius: var(--rayon-petit);
}


/* ==========================================================================
   43. BOUTON DE NAVIGATION INTERNE
   Volontairement différent des appels à l'action de conversion : pas de
   dégradé, pas d'ombre. Il déplace dans le site, il ne vend rien.
   ========================================================================== */

.bouton--discret {
  background: transparent;
  color: var(--texte-principal);
  border: 1px solid var(--couleur-bordure);
  font-weight: var(--graisse-moyenne);
  box-shadow: none;
}

.bouton--discret:hover {
  color: var(--texte-principal);
  background: var(--fond-alterne);
  border-color: var(--couleur-gris-secondaire);
  transform: none;
}

.bouton--discret .fleche {
  opacity: 0.55;
}

.bouton--discret:hover .fleche {
  opacity: 1;
}

/* Version sur fond sombre */
.section--sombre .bouton--discret,
.hero .bouton--discret {
  color: var(--texte-sur-sombre);
  border-color: var(--couleur-bordure-sombre);
}

.section--sombre .bouton--discret:hover,
.hero .bouton--discret:hover {
  color: #FFFFFF;
  background: rgba(241, 240, 236, 0.06);
  border-color: rgba(241, 240, 236, 0.28);
}




/* ==========================================================================
   44. LE RENVOI CONTEXTUEL
   Un encadré posé À CÔTÉ d'un bloc de texte, jamais dedans, qui emmène
   vers la page où le sujet est traité en entier.

   Il se distingue des boutons :
     • bouton--primaire  → conversion (dégradé plein, ombre)
     • bouton--discret   → action secondaire, ancre dans la page
     • renvoi            → changement de page, avec sa destination nommée

   ⚠️  Le titre du renvoi utilise --degrade-accent-lisible, et non le
       dégradé de marque : le magenta pur ne passe pas le contraste WCAG
       AA en petit texte sur fond clair.
   ========================================================================== */

.renvoi {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--espace-m);
  max-width: min(100%, 420px);
  margin-block: var(--espace-m) 0;
  padding: 0.95rem 1.25rem;
  min-height: 56px;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-moyen);
  text-decoration: none;
  color: var(--texte-principal);
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce),
              transform var(--transition-douce);
}

.renvoi:hover {
  color: var(--texte-principal);
  transform: translateY(-2px);
  border-color: rgba(204, 0, 204, 0.4);
  box-shadow: 0 2px 4px rgba(13, 13, 13, 0.03),
              0 10px 26px rgba(13, 13, 13, 0.07);
}

.renvoi__intitule {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

/* Le petit label du dessus : ce qu'on va y trouver */
.renvoi__quoi {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-moyenne);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

/* Le titre, en rose violet */
.renvoi__ou {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-3);
  line-height: 1.3;
  letter-spacing: var(--lettrage-titre);
  background: var(--degrade-accent-lisible);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.renvoi .fleche {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--couleur-magenta-fonce);
  opacity: 0.7;
}

.renvoi:hover .fleche {
  opacity: 1;
  transform: translateX(3px);
}

/* --- Version sur fond crème --- */
.section--creme .renvoi {
  background: var(--couleur-blanc);
}

/* --- Version sur fond sombre --- */
.section--sombre .renvoi,
.hero .renvoi {
  background: rgba(241, 240, 236, 0.05);
  border-color: var(--couleur-bordure-sombre);
}

.section--sombre .renvoi:hover,
.hero .renvoi:hover {
  border-color: rgba(240, 107, 240, 0.5);
  box-shadow: none;
}

.section--sombre .renvoi__quoi,
.hero .renvoi__quoi {
  color: var(--texte-sur-sombre-doux);
}

.section--sombre .renvoi__ou,
.hero .renvoi__ou {
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
}

.section--sombre .renvoi .fleche,
.hero .renvoi .fleche {
  color: var(--couleur-magenta-clair);
}

/* --- Placements ---
   RÈGLE D'ALIGNEMENT : le renvoi suit toujours la ligne du texte auquel il
   se rattache. Trois cas seulement.

   1. Par défaut       → aligné à gauche, sur la marge du texte
   2. .renvoi--large   → aligné à gauche ET étiré jusqu'au bord droit, quand
                         le bloc au-dessus est une grille pleine largeur
                         (les fondations, les cartes, les listes)
   3. .renvoi--centre  → centré, UNIQUEMENT quand le contenu au-dessus est
                         lui-même centré. Sinon il a l'air de flotter. */

/* Étiré sur toute la largeur : le bord gauche suit le texte, le bord droit
   s'aligne sur la dernière carte de la grille au-dessus. */
.renvoi--large {
  display: grid;
  width: 100%;
  max-width: 100%;
  margin-top: var(--espace-l);
}

/* Centré, à réserver aux sections dont le contenu est déjà centré */
.renvoi--centre {
  margin-inline: auto;
  margin-top: var(--espace-l);
  display: grid;
}

/* Deux renvois côte à côte */
.renvois {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin-top: var(--espace-m);
}

.renvois .renvoi {
  margin-block: 0;
  flex: 1 1 280px;
}

/* Sur petit écran, tous les renvois occupent la largeur disponible :
   les variantes de placement n'ont plus d'objet. */
@media (max-width: 620px) {
  .renvoi,
  .renvoi--large,
  .renvoi--centre {
    display: grid;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}


/* ==========================================================================
   45. LES QUATRE ÉTAPES, EN DÉTAIL
   Version développée de la méthode, pour la page du protocole.
   Chaque étape dit : ce que nous faisons, ce que vous faites, ce que ça produit.
   ========================================================================== */

.etape-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: var(--espace-xl);
  border-top: 1px solid var(--couleur-bordure);
}

.etape-detail:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.etape-detail__titre {
  position: sticky;
  top: calc(var(--hauteur-nav) + 2rem);
  align-self: start;
}

.etape-detail__rang {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: 0.6rem;
}

.etape-detail__titre h3 {
  font-size: var(--taille-titre-1);
  margin-bottom: var(--espace-s);
}

.etape-detail__resume {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
  margin: 0;
  max-width: 32ch;
}

/* Les trois volets de chaque étape */
.volets {
  display: grid;
  gap: var(--espace-m);
}

.volet {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--espace-m);
  align-items: start;
  padding-bottom: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
}

.volet:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.volet__qui {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  padding-top: 0.25rem;
}

.volet__quoi {
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: var(--texte-principal);
  margin: 0;
  max-width: none;
}

/* Le volet « ce que vous faites » est le plus rassurant : on le distingue */
.volet--vous .volet__qui {
  color: var(--couleur-magenta-fonce);
}


/* ==========================================================================
   46. MARQUEURS DANS LES TABLEAUX
   Une coche ou un tiret dans une cellule, plutôt qu'un « oui » / « non »
   qui alourdit la lecture.
   ========================================================================== */

.oui,
.non {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -0.2rem;
}

.oui {
  border-radius: 50%;
  background: var(--degrade-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

.non {
  background: var(--couleur-bordure);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 88% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 88% no-repeat;
}

/* Indication de défilement, sur mobile */
.comparaison__astuce {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-s);
}

@media (min-width: 800px) {
  .comparaison__astuce { display: none; }
}


/* ==========================================================================
   47. CATÉGORIES DU MARCHÉ
   Le comparatif avec les autres options : agence, logiciel, IA, recrutement.
   Chaque carte dit d'abord ce que l'autre fait MIEUX que nous. C'est ce qui
   rend le reste crédible.
   ========================================================================== */

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--espace-m);
}

/* Sur grand écran, deux colonnes plutôt que trois : les quatre cartes
   forment alors un carré équilibré au lieu d'une rangée de trois et
   d'une orpheline. Chaque carte gagne aussi en largeur, ce qui évite
   que les lignes « coût » ne se cassent en petits blocs. */
@media (min-width: 900px) {
  .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .categorie__ligne {
    grid-template-columns: 5.5rem 1fr;
  }
}

.categorie {
  display: flex;
  flex-direction: column;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.categorie__nom {
  font-size: var(--taille-titre-2);
  margin-bottom: 0.35rem;
}

.categorie__exemples {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-m);
  padding-bottom: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
  max-width: none;
}

/* Les deux volets : ce qu'elle fait mieux, ce qu'elle ne peut pas faire */
.categorie__volet {
  margin-bottom: var(--espace-m);
}

.categorie__label {
  display: block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.categorie__label--mieux {
  color: var(--couleur-magenta-fonce);
}

.categorie__label--limite {
  color: var(--texte-secondaire);
}

.categorie__volet p {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-principal);
  margin: 0;
  max-width: none;
}

.categorie__volet--limite p {
  color: var(--texte-secondaire);
}

/* Le pied de carte : coût et moment où la choisir */
.categorie__pied {
  margin-top: auto;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
  display: grid;
  gap: 0.6rem;
}

.categorie__ligne {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  font-size: var(--taille-micro);
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

.categorie__ligne dt {
  font-weight: var(--graisse-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.categorie__ligne dd {
  margin: 0;
  color: var(--texte-principal);
}

/* La carte MyUO, en fin de série */
.categorie--nous {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--couleur-blanc), var(--couleur-blanc)) padding-box,
    var(--degrade-accent) border-box;
}

.categorie--nous .categorie__nom {
  background: var(--degrade-accent-lisible);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ==========================================================================
   48. POURQUOI MAINTENANT
   Trois faits extérieurs, numérotés. L'urgence vient du marché, pas du
   cabinet : c'est ce qui la rend acceptable.
   ========================================================================== */

.deplacements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--espace-m);
  counter-reset: deplacement;
}

.deplacement {
  padding-top: var(--espace-m);
  border-top: 2px solid transparent;
  border-image: var(--degrade-accent-clair) 1;
  counter-increment: deplacement;
}

.deplacement__rang {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-clair);
  margin-bottom: var(--espace-s);
}

.deplacement h3 {
  font-size: var(--taille-titre-3);
  font-family: var(--police-corps);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.deplacement p {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-sur-sombre-doux);
  margin: 0;
  max-width: none;
}


/* ==========================================================================
   49. ADAPTATIONS MOBILE DE LA PAGE PROTOCOLE
   ========================================================================== */

@media (max-width: 900px) {

  .etape-detail {
    grid-template-columns: 1fr;
    gap: var(--espace-l);
    padding-block: var(--espace-l);
  }

  .etape-detail__titre {
    position: static;
  }

  .etape-detail__resume {
    max-width: none;
  }
}

@media (max-width: 560px) {

  .volet,
  .categorie__ligne {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}


/* ==========================================================================
   50. LA FRISE HORIZONTALE DU CALENDRIER (page Le protocole)
   Se lit de gauche à droite au-dessus de 1000 px de large, et de haut en bas
   en dessous. Le trait qui relie les étapes est dessiné en CSS : il n'y a
   aucune image à téléverser.

   Pour élargir ou resserrer la frise, il suffit de changer le nombre 6 dans
   « repeat(6, ...) » si vous ajoutez ou retirez une étape.
   ========================================================================== */

/* --- Introduction : le texte à gauche, la photo à droite --- */
.frise-intro {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
  margin-bottom: var(--espace-xl);
}

.frise-intro__texte p {
  max-width: 52ch;
  margin-bottom: 0;
}

.frise-intro .photo-ambiance {
  margin: 0;
}

@media (min-width: 900px) {
  .frise-intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* --- La frise elle-même --- */
.frise {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frise__marqueur {
  position: relative;
  display: flex;
  align-items: center;
}

/* La pastille ronde qui porte le pictogramme.
   Son fond opaque « perce » le trait horizontal qui passe derrière. */
.frise__picto {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid var(--couleur-bordure-sombre);
  background-color: var(--couleur-noir-profond);
  color: var(--texte-sur-sombre);
}

.frise__picto svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* L'étape « jalon » : celle où le retour concret arrive.
   C'est le seul endroit de la frise où le dégradé signature apparaît. */
.frise__etape--jalon .frise__picto {
  border-color: transparent;
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
}

.frise__badge {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-clair);
  white-space: nowrap;
}

.frise__moment {
  display: block;
  margin-top: var(--espace-s);
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.08em;
  color: var(--couleur-magenta-clair);
}

.frise__titre {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0.4rem 0 0;
}

.section--sombre .frise__texte {
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-sur-sombre-doux);
  margin: 0.5rem 0 0;
  max-width: none;
}

/* --- Version horizontale (ordinateur et grande tablette) --- */
@media (min-width: 1000px) {

  .frise {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    column-gap: var(--espace-s);
    padding-top: 2.75rem;   /* place réservée au badge du jalon */
  }

  /* subgrid aligne les pastilles, les dates et les titres sur une même ligne,
     quelle que soit la longueur des textes. */
  .frise__etape {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  /* Le trait qui relie une pastille à la suivante */
  .frise__marqueur::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(100% + var(--espace-s));
    height: 1px;
    background-color: var(--couleur-bordure-sombre);
  }

  .frise__etape:last-child .frise__marqueur::before {
    display: none;
  }

  /* Le badge se pose au-dessus de la pastille, sans décaler les autres */
  .frise__badge {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.6rem);
  }
}

/* --- Version verticale (mobile et petite tablette) --- */
@media (max-width: 999px) {

  .frise__etape {
    padding-block: var(--espace-m);
    border-bottom: 1px solid var(--couleur-bordure-sombre);
  }

  .frise__etape:first-child {
    border-top: 1px solid var(--couleur-bordure-sombre);
  }

  /* La pastille reste collée à gauche, le badge se place à sa droite.
     (row-reverse inverse l'ordre d'affichage sans toucher au code HTML,
     qui doit garder le badge en premier pour la version horizontale.) */
  .frise__marqueur {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--espace-s);
  }
}

/* --- L'éclairage : la phrase qui explique le jalon --- */
.frise__eclairage {
  margin-top: var(--espace-xl);
  padding-left: var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-clair) 1;
  max-width: var(--largeur-texte);
}

.section--sombre .frise__eclairage {
  color: var(--texte-sur-sombre-doux);
}

.section--sombre .frise__eclairage strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}

/* --- La constante : ce qui est vrai à tout moment --- */
.frise__constante {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-s);
  margin-top: var(--espace-l);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
  max-width: var(--largeur-texte);
}

.frise__constante-picto {
  flex: none;
  color: var(--couleur-magenta-clair);
}

.frise__constante-picto svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.section--sombre .frise__constante {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
}

.section--sombre .frise__constante strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}


/* ==========================================================================
   51. CE QUE VOUS Y GAGNEZ (page Le protocole)
   Quatre cartes en deux temps : « aujourd'hui » puis « ce qui change ».
   Le trait dégradé à gauche marque toujours le second temps.
   ========================================================================== */

.gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espace-m);
}

@media (min-width: 900px) {
  .gains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-l);
  }
}

.gain {
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: var(--espace-l) clamp(1.5rem, 3vw, 2.5rem);
}

.gain__picto {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rayon-moyen);
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
  margin-bottom: var(--espace-m);
}

.gain__picto svg {
  width: 1.5rem;
  height: 1.5rem;
}

.gain__titre {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin: 0 0 var(--espace-xs);
}

/* L'indicateur mis en avant : c'est la phrase qu'on retient de la carte. */
.gain__phrase {
  font-family: var(--police-titres);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin: 0 0 var(--espace-m);
  max-width: 20ch;
}

.gain__bascule {
  display: grid;
  gap: var(--espace-s);
  margin: 0;
}

.gain__bascule dt {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin-bottom: 0.35rem;
}

.gain__bascule dd {
  margin: 0;
  padding-left: var(--espace-s);
  border-left: 2px solid var(--couleur-bordure);
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
}

/* Le second temps : trait dégradé et texte à pleine intensité. */
.gain__bascule .gain__apres {
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
  color: var(--texte-principal);
}

/* Le paragraphe d'honnêteté sur l'absence de pourcentages */
.gain__honnetete {
  margin-top: var(--espace-l);
  padding: var(--espace-xs) 0 var(--espace-xs) var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: var(--texte-secondaire);
  max-width: 68ch;
}

.gain__honnetete strong {
  display: block;
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
  margin-bottom: 0.35rem;
}

/* --- Les KPI que la structuration fait bouger --- */
.kpi {
  margin-top: var(--espace-xl);
  padding-top: var(--espace-l);
  border-top: 1px solid var(--couleur-bordure);
}

.kpi__titre {
  font-size: var(--taille-titre-2);
  margin-bottom: var(--espace-xs);
}

.kpi__intro {
  max-width: var(--largeur-texte);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-l);
}

.kpi__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espace-m);
}

.kpi__item {
  padding-top: var(--espace-m);
  border-top: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
}

.kpi__item h4 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.kpi__item p {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}

.kpi__inutiles {
  margin-top: var(--espace-l);
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: var(--texte-secondaire);
  max-width: 68ch;
}

.kpi__inutiles strong {
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
}


/* ==========================================================================
   52. LA BARRE D'APPEL EN BAS DE PAGE
   Elle n'apparaît qu'après 45 % de lecture (réglage dans js/main.js,
   partie 4) et se referme pour 30 jours. Pendant qu'elle est visible, le
   bouton flottant s'efface : les deux se disputeraient le même coin.
   ========================================================================== */

.barre-appel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background-color: var(--couleur-noir-profond);
  border-top: 1px solid var(--couleur-bordure-sombre);
  padding-block: var(--espace-s);
  /* Marge de sécurité pour les téléphones à encoche */
  padding-bottom: calc(var(--espace-s) + env(safe-area-inset-bottom, 0px));
  animation: barre-monte var(--transition-douce) both;
}

@keyframes barre-monte {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .barre-appel { animation: none; }
}

.barre-appel__contenu {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
}

.barre-appel__texte {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  max-width: none;
  font-size: var(--taille-petit);
  line-height: 1.5;
  color: var(--texte-sur-sombre-doux);
}

.barre-appel__texte strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}

.barre-appel__bouton {
  flex: none;
}

.barre-appel__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 50%;
  background: transparent;
  color: var(--texte-sur-sombre-doux);
  cursor: pointer;
  transition: color var(--transition-rapide),
              border-color var(--transition-rapide);
}

.barre-appel__fermer svg {
  width: 1rem;
  height: 1rem;
}

.barre-appel__fermer:hover {
  color: var(--texte-sur-sombre);
  border-color: var(--texte-sur-sombre-doux);
}

/* Le bouton flottant s'efface pendant que la barre est là */
.flottant--efface {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-rapide),
              visibility var(--transition-rapide);
}

/* --- Sur téléphone : le texte passe au-dessus, le bouton prend la largeur --- */
@media (max-width: 720px) {

  .barre-appel__contenu {
    flex-wrap: wrap;
    gap: var(--espace-s);
    row-gap: 0.75rem;
  }

  .barre-appel__texte {
    flex: 1 1 100%;
    order: 1;
    font-size: var(--taille-micro);
  }

  .barre-appel__bouton {
    flex: 1 1 auto;
    order: 2;
    justify-content: center;
  }

  .barre-appel__fermer {
    order: 3;
  }
}


/* ==========================================================================
   53. PAGE CONTACT
   Trois voies d'entrée, le déroulé de ce qui suit, le formulaire à objet,
   la prise de rendez-vous et les disponibilités.
   ========================================================================== */

/* Le hero de la page contact est plus court : on veut voir les trois
   voies sans avoir à faire défiler. */
.hero--court {
  padding-bottom: var(--espace-l);
}

/* --- Les trois voies d'entrée --- */
.voies {
  list-style: none;
  margin: var(--espace-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--espace-m);
}

.voie {
  display: flex;
  flex-direction: column;
  padding: var(--espace-m);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-grand);
  background-color: rgba(241, 240, 236, 0.03);
}

/* Une seule voie est mise en avant : celle qui demande le moins d'effort. */
.voie--phare {
  border-color: transparent;
  background-image: linear-gradient(rgba(204, 0, 204, 0.10), rgba(107, 0, 128, 0.10));
  box-shadow: inset 0 0 0 1px rgba(240, 107, 240, 0.45);
}

.voie__picto {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon-moyen);
  border: 1px solid var(--couleur-bordure-sombre);
  color: var(--couleur-magenta-clair);
  margin-bottom: var(--espace-s);
}

.voie--phare .voie__picto {
  border-color: transparent;
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
}

.voie__picto svg {
  width: 1.4rem;
  height: 1.4rem;
}

.voie__titre {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
  color: var(--texte-sur-sombre);
}

.voie__quoi {
  flex: 1 1 auto;
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-sur-sombre-doux);
  margin-bottom: var(--espace-s);
  max-width: none;
}

.voie__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-clair);
  text-decoration: none;
}

.voie__lien:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Ce qui se passe après --- */
.apres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--espace-l);
}

.apres__temps {
  padding-top: var(--espace-m);
  border-top: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
}

.apres__quand {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-xs);
}

.apres__temps h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.apres__temps p {
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}

.apres__promesse {
  margin-top: var(--espace-l);
  padding-left: var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: var(--texte-secondaire);
  max-width: 68ch;
}

.apres__promesse strong {
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
}

/* --- Le formulaire et sa colonne de texte --- */
.contact-grille {
  display: grid;
  gap: var(--espace-l);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grille {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.contact-grille__texte p {
  max-width: 46ch;
}

.contact-direct {
  list-style: none;
  margin: var(--espace-l) 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.contact-direct li {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--couleur-bordure-sombre);
}

.contact-direct__quoi {
  font-size: var(--taille-micro);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-sur-sombre-doux);
}

.contact-direct a {
  font-size: var(--taille-corps);
  color: var(--couleur-magenta-clair);
}

/* Précision qui change selon l'objet choisi */
.formulaire__precision {
  margin: 0;
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-sur-sombre-doux);
  min-height: 1.2em;
}

.formulaire .facultatif {
  font-weight: var(--graisse-normale);
  color: var(--texte-sur-sombre-doux);
}

.formulaire__pied {
  margin: 0;
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-sur-sombre-doux);
  max-width: none;
}

/* Le piège anti-robot : invisible à l'écran, invisible aux lecteurs d'écran,
   mais bien présent dans la page pour les programmes automatiques. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- La prise de rendez-vous --- */
.rdv {
  margin-top: var(--espace-xl);
  display: grid;
  gap: var(--espace-m);
}

.rdv__carte {
  display: grid;
  gap: var(--espace-m);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-grand);
  background-color: rgba(241, 240, 236, 0.04);
}

@media (min-width: 820px) {
  .rdv__carte {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--espace-l);
  }
}

.rdv__texte h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-bottom: var(--espace-xs);
}

.rdv__texte p {
  font-size: var(--taille-petit);
  margin-bottom: var(--espace-s);
}

.rdv__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
}

.rdv__points li {
  padding-left: 1.1rem;
  position: relative;
}

.rdv__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-image: var(--degrade-accent-clair);
}

/* --- Disponibilités : horaires, zones, délais --- */
.dispos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--espace-m);
}

.dispo {
  padding: var(--espace-m);
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
}

.dispo h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin-bottom: var(--espace-s);
}

.dispo__liste {
  margin: 0 0 var(--espace-s);
  display: grid;
  gap: 0;
}

.dispo__liste > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--couleur-bordure);
}

.dispo__liste > div:last-child {
  border-bottom: none;
}

.dispo__liste dt {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

.dispo__liste dd {
  margin: 0;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

.dispo__note {
  font-size: var(--taille-micro);
  line-height: 1.6;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}


/* ==========================================================================
   54. LE BLOG « DÉCRYPTAGES » — PAGE D'ACCUEIL
   L'article à la une, les filtres par catégorie, la grille de cartes.
   ========================================================================== */

/* Titre présent pour les lecteurs d'écran, masqué à l'œil */
.lecture-titre-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- L'étiquette de catégorie --- */
.etiquette {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  background-color: rgba(204, 0, 204, 0.07);
  border: 1px solid rgba(204, 0, 204, 0.16);
}

.etiquette--claire {
  color: var(--couleur-magenta-clair);
  background-color: rgba(240, 107, 240, 0.10);
  border-color: rgba(240, 107, 240, 0.28);
}

/* --- L'article à la une --- */
.une {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce);
}

.une:hover {
  border-color: rgba(204, 0, 204, 0.3);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 860px) {
  .une {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.une__visuel svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon-moyen);
}

.une__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: var(--espace-s);
}

.une__date {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
}

.une__titre {
  display: block;
  font-family: var(--police-titres);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin-bottom: var(--espace-s);
}

.une__chapeau {
  display: block;
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-m);
}

.une__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-fonce);
}

.une:hover .une__lien {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Les filtres par catégorie --- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--espace-s);
}

.filtre {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure);
  background-color: var(--couleur-blanc);
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-secondaire);
  cursor: pointer;
  min-height: 44px;   /* cible tactile confortable */
  transition: border-color var(--transition-rapide),
              color var(--transition-rapide);
}

.filtre:hover {
  border-color: rgba(204, 0, 204, 0.35);
  color: var(--texte-principal);
}

.filtre.est-actif {
  border-color: transparent;
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
  font-weight: var(--graisse-semi);
}

.filtres__resultat {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-l);
  min-height: 1.2em;
}

/* --- La grille d'articles --- */
.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: var(--espace-m);
}

.carte-article {
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce);
}

.carte-article:hover {
  border-color: rgba(204, 0, 204, 0.28);
  box-shadow: var(--ombre-carte);
}

.carte-article__lien {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--espace-m);
  text-decoration: none;
  color: inherit;
}

.carte-article__titre {
  font-family: var(--police-titres);
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin: var(--espace-s) 0 var(--espace-xs);
}

.carte-article__chapeau {
  flex: 1 1 auto;
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-s);
  max-width: none;
}

.carte-article__pied {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure);
}

/* Emplacement en attente : visiblement différent d'un vrai article,
   pour qu'on ne le confonde jamais avec du contenu publié. */
.carte-article--attente {
  padding: var(--espace-m);
  border-style: dashed;
  background-color: transparent;
  box-shadow: none;
}

.carte-article--attente:hover {
  border-color: var(--couleur-bordure);
  box-shadow: none;
}

.carte-article--attente .carte-article__titre {
  color: var(--texte-secondaire);
}

.grille-articles__vide {
  margin-top: var(--espace-l);
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

.lien-texte {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--couleur-magenta-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Une carte masquée par un filtre */
.carte-article[hidden] {
  display: none;
}


/* ==========================================================================
   55. UN ARTICLE DE DÉCRYPTAGE
   Colonne de lecture étroite, rythme lent, aucun élément décoratif.
   ========================================================================== */

/* L'en-tete d'article est sombre, comme le hero des autres pages :
   c'est ce qui donne au site son rythme noir puis clair. */
.decryptage__entete {
  padding-top: calc(var(--hauteur-nav) + var(--espace-xl));
  padding-bottom: var(--espace-xl);
  background-color: var(--fond-sombre);
}

.decryptage__titre {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  margin: var(--espace-s) 0 var(--espace-m);
  color: var(--texte-sur-sombre);
}

.decryptage__chapeau {
  font-size: var(--taille-chapeau);
  line-height: 1.6;
  color: var(--texte-sur-sombre-doux);
}

.decryptage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--taille-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-sur-sombre-doux);
  margin: var(--espace-m) 0 0;
}

.decryptage__entete .fil-ariane,
.decryptage__entete .fil-ariane a {
  color: var(--texte-sur-sombre-doux);
}

.decryptage__entete .fil-ariane a:hover {
  color: var(--texte-sur-sombre);
}

/* --- Le sommaire --- */
.sommaire {
  margin-top: var(--espace-xl);
  padding: var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
  background-color: var(--fond-alterne);
}

.sommaire__titre {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin-bottom: var(--espace-s);
}

.sommaire ol {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
  font-size: var(--taille-petit);
}

/* --- Le corps --- */
.decryptage__corps {
  padding-top: var(--espace-xl);
  padding-bottom: var(--espace-l);
}

.decryptage__corps h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-top: var(--espace-xl);
  margin-bottom: var(--espace-s);
  scroll-margin-top: calc(var(--hauteur-nav) + 1.5rem);
}

.decryptage__corps h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  margin-top: var(--espace-l);
  margin-bottom: var(--espace-xs);
}

.decryptage__corps p {
  margin-bottom: var(--espace-m);
}

/* Citation détachée */
.citation-article {
  margin: var(--espace-l) 0;
  padding-left: var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
}

.citation-article p {
  font-family: var(--police-titres);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
  margin: 0;
}

/* Encadré « en clair » : la définition d'un mot de métier */
.encadre-article {
  margin: var(--espace-l) 0;
  padding: var(--espace-m);
  background-color: var(--fond-alterne);
  border-radius: var(--rayon-moyen);
}

.encadre-article__label {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-xs);
}

.encadre-article p:last-child {
  margin-bottom: 0;
  font-size: var(--taille-petit);
  line-height: 1.7;
}

.decryptage__fin {
  text-align: center;
  color: var(--couleur-magenta-fonce);
  letter-spacing: 0.5em;
  margin: var(--espace-l) 0 0;
}

/* Le bloc de partage et le renvoi de fin d'article, avant « La suite ». */
.decryptage__pied {
  margin-top: var(--espace-l);
  padding-top: var(--espace-l);
  padding-bottom: var(--espace-xl);
  border-top: 1px solid var(--couleur-bordure);
}

.partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--espace-l);
}

.partage__label {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  margin: 0 0.35rem 0 0;
}

.partage a,
.partage button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-moyen);
  background-color: var(--couleur-blanc);
  color: var(--couleur-magenta-fonce);
  cursor: pointer;
  transition: border-color var(--transition-rapide);
}

.partage a:hover,
.partage button:hover {
  border-color: var(--couleur-magenta-fonce);
}

.partage svg {
  width: 1.05rem;
  height: 1.05rem;
}


/* ==========================================================================
   56. LES QUATRE TEMPS DE LA DÉCISION
   Quatre portes selon la maturité du visiteur. Bloc généré par
   construire.py, fonction cycle().
   ========================================================================== */

.temps-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--espace-m);
  counter-reset: temps;
}

.temps {
  display: flex;
  flex-direction: column;
  padding: var(--espace-m);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  background-color: var(--couleur-blanc);
  counter-increment: temps;
  transition: border-color var(--transition-douce),
              box-shadow var(--transition-douce);
}

.temps:hover {
  border-color: rgba(204, 0, 204, 0.28);
  box-shadow: var(--ombre-carte);
}

.temps::before {
  content: "0" counter(temps);
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  color: var(--couleur-magenta-fonce);
  margin-bottom: var(--espace-s);
}

.temps__quand {
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
}

.temps__titre {
  font-family: var(--police-titres);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: var(--lettrage-titre);
  margin: 0.2rem 0 var(--espace-xs);
}

.temps__quoi {
  flex: 1 1 auto;
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-s);
  max-width: none;
}

.temps__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--couleur-magenta-fonce);
  text-decoration: none;
}

.temps__lien:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section--sombre .temps {
  background-color: rgba(241, 240, 236, 0.03);
  border-color: var(--couleur-bordure-sombre);
}

.section--sombre .temps::before,
.section--sombre .temps__lien {
  color: var(--couleur-magenta-clair);
}


/* ==========================================================================
   57. LA PAGE EXPLORER ET L'ESPACE CLIENT
   Hero à deux colonnes avec vidéo, schéma du parcours fictif.
   ========================================================================== */

.hero--demo {
  padding-bottom: var(--espace-xl);
}

.demo-hero {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}

@media (min-width: 960px) {
  .demo-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.demo-hero__preuves {
  list-style: none;
  margin: var(--espace-l) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
}

.demo-hero__preuves li {
  padding-left: 1.1rem;
  position: relative;
}

.demo-hero__preuves li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-image: var(--degrade-accent-clair);
}

/* --- La vidéo --- */
.demo-video {
  margin: 0;
}

.demo-video__lecteur {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon-grand);
  background-color: #151515;
  border: 1px solid var(--couleur-bordure-sombre);
}

.demo-video figcaption {
  margin-top: 0.8rem;
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-sur-sombre-doux);
}

/* --- Le parcours fictif --- */
.parcours-demo {
  margin-bottom: var(--espace-l);
}

.parcours-demo__etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--espace-s);
}

.parcours-demo__etape {
  position: relative;
  padding: var(--espace-m) var(--espace-s);
  border-radius: var(--rayon-moyen);
  background-color: var(--fond-alterne);
  border: 1px solid var(--couleur-bordure);
}

.parcours-demo__volume {
  display: block;
  font-family: var(--police-titres);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  color: var(--texte-principal);
}

.parcours-demo__nom {
  display: block;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin: 0.5rem 0 0.4rem;
}

.parcours-demo__etape p {
  font-size: var(--taille-petit);
  line-height: 1.55;
  color: var(--texte-secondaire);
  margin: 0;
  max-width: none;
}

/* L'étape où le parcours se rompt : le seul endroit coloré du schéma */
.parcours-demo__etape--fuite {
  border-color: transparent;
  background-color: var(--couleur-blanc);
  box-shadow: inset 0 0 0 2px rgba(163, 0, 158, 0.55);
}

.parcours-demo__etape--fuite .parcours-demo__volume {
  color: var(--couleur-magenta-fonce);
}

.parcours-demo__alerte {
  position: absolute;
  top: -0.7rem;
  left: var(--espace-s);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parcours-demo__note {
  margin-top: var(--espace-m);
  font-size: var(--taille-micro);
  line-height: 1.6;
  color: var(--texte-secondaire);
  max-width: 68ch;
}

.demo-revelation {
  padding: var(--espace-m);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-lisible) 1;
  max-width: var(--largeur-texte);
}

.demo-revelation p {
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-s);
}

.demo-revelation p:last-child {
  margin-bottom: 0;
}

.demo-revelation strong {
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
}

/* Les trois voies, version fond clair */
.voies--claires .voie {
  background-color: var(--couleur-blanc);
  border-color: var(--couleur-bordure);
}

.voies--claires .voie__titre {
  color: var(--texte-principal);
}

.voies--claires .voie__quoi {
  color: var(--texte-secondaire);
}

.voies--claires .voie__picto {
  border-color: var(--couleur-bordure);
  color: var(--couleur-magenta-fonce);
}

.voies--claires .voie__lien {
  color: var(--couleur-magenta-fonce);
}


/* ==========================================================================
   58. LE CARROUSEL DES ARTICLES À LA UNE
   Sans JavaScript, les diapositives restent empilées et toutes lisibles.
   ========================================================================== */

.carrousel__cadre {
  overflow: hidden;
}

.carrousel__piste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espace-m);
}

.carrousel__commandes {
  display: none;
}

/* À partir d'ici, c'est le JavaScript qui a pris la main */
.carrousel--actif .carrousel__piste {
  display: flex;
  gap: 0;
  transition: transform var(--transition-douce);
}

.carrousel--actif .carrousel__vue {
  flex: 0 0 100%;
  min-width: 0;
}

.carrousel--actif .carrousel__commandes {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin-top: var(--espace-m);
  flex-wrap: wrap;
}

.carrousel__fleche {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure);
  border-radius: 50%;
  background-color: var(--couleur-blanc);
  color: var(--texte-principal);
  cursor: pointer;
  transition: border-color var(--transition-rapide);
}

.carrousel__fleche:hover {
  border-color: var(--couleur-magenta-fonce);
}

.carrousel__fleche svg {
  width: 1.1rem;
  height: 1.1rem;
}

.carrousel__points {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carrousel__point {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 1px solid var(--couleur-gris-secondaire);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* La cible tactile reste confortable même si le point est petit */
  position: relative;
}

.carrousel__point::after {
  content: "";
  position: absolute;
  inset: -0.6rem;
}

.carrousel__point.est-actif {
  border-color: transparent;
  background-image: var(--degrade-accent);
}

.carrousel__pause {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  background-color: var(--couleur-blanc);
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
  cursor: pointer;
  min-height: 44px;
}

.carrousel__pause-icone {
  width: 0.6rem;
  height: 0.7rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.carrousel__pause.est-en-pause .carrousel__pause-icone {
  border: none;
  width: 0;
  height: 0;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  border-left: 0.6rem solid currentColor;
}

/* Une diapositive en attente d'article */
.une--attente {
  border-style: dashed;
  cursor: default;
}

.une--attente:hover {
  border-color: var(--couleur-bordure);
  box-shadow: none;
}

.une--attente .une__titre,
.une--attente .une__lien {
  color: var(--texte-secondaire);
}


/* ==========================================================================
   59. ENVOI DE LA LECTURE PAR E-MAIL (quatre questions)
   ========================================================================== */

.lecture__envoi {
  margin-top: var(--espace-m);
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure);
  display: grid;
  gap: var(--espace-s);
}

.lecture__envoi-titre {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-gris-fonce);
  margin: 0;
}

.lecture__envoi-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 0;
}

.lecture__envoi-ligne input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-moyen);
  min-height: 46px;
}

.lecture__envoi .formulaire__consentement label {
  color: var(--texte-secondaire);
}

.lecture__envoi .formulaire__consentement a {
  color: var(--couleur-magenta-fonce);
}


/* ==========================================================================
   60. ADAPTATIONS SUR FOND SOMBRE
   Les blocs « ce qui se passe après », la note du hero et l'envoi de la
   lecture par e-mail existent aussi sur fond noir : leurs couleurs de
   texte doivent alors s'éclaircir, sinon le contraste tombe sous le seuil
   d'accessibilité WCAG AA.
   ========================================================================== */

.section--sombre .apres__quand {
  color: var(--couleur-magenta-clair);
}

.section--sombre .apres__temps {
  border-image: var(--degrade-accent-clair) 1;
}

.section--sombre .apres__temps p {
  color: var(--texte-sur-sombre-doux);
}

.section--sombre .apres__promesse {
  border-image: var(--degrade-accent-clair) 1;
  color: var(--texte-sur-sombre-doux);
}

.section--sombre .apres__promesse strong {
  color: var(--texte-sur-sombre);
}

.hero .note,
.section--sombre .note {
  color: var(--texte-sur-sombre-doux);
}

/* L'envoi de la lecture par e-mail vit dans une carte sombre */
.lecture .lecture__envoi {
  border-top-color: var(--couleur-bordure-sombre);
}

.lecture .lecture__envoi-titre {
  color: var(--texte-sur-sombre-doux);
}

.lecture .lecture__envoi-ligne input[type="email"] {
  color: var(--texte-sur-sombre);
  background-color: rgba(13, 13, 13, 0.55);
  border-color: var(--couleur-bordure-sombre);
}

.lecture .lecture__envoi-ligne input[type="email"]::placeholder {
  color: rgba(168, 166, 162, 0.75);
}

.lecture .lecture__envoi .formulaire__consentement label {
  color: var(--texte-sur-sombre-doux);
}

.lecture .lecture__envoi .formulaire__consentement a {
  color: var(--couleur-magenta-clair);
}

/* Une image insérée dans un article */
.decryptage__image {
  margin: var(--espace-l) 0;
}

.decryptage__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon-moyen);
  background-color: var(--fond-alterne);
}

.decryptage__image figcaption {
  margin-top: 0.7rem;
  font-size: var(--taille-micro);
  line-height: 1.55;
  color: var(--texte-secondaire);
}

/* La mention « vous contrôlez votre timing », sous le chapeau du hero */
.hero__mention-rdv {
  margin-top: var(--espace-m);
  padding-left: var(--espace-s);
  border-left: 2px solid transparent;
  border-image: var(--degrade-accent-clair) 1;
  font-size: var(--taille-petit);
  line-height: 1.65;
  color: var(--texte-sur-sombre-doux);
  max-width: 58ch;
}

.hero__mention-rdv strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}


/* ==========================================================================
   61. LE PANNEAU FLOTTANT — EN-TÊTE, RAPPEL ET MINI-FORMULAIRE
   ========================================================================== */

.flottant__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s);
  margin-bottom: var(--espace-xs);
}

.flottant__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 50%;
  background: transparent;
  color: var(--texte-sur-sombre-doux);
  cursor: pointer;
}

.flottant__fermer:hover {
  color: var(--texte-sur-sombre);
}

.flottant__fermer svg {
  width: 0.85rem;
  height: 0.85rem;
}

.flottant__formulaire {
  display: grid;
  gap: 0.5rem;
  padding: var(--espace-s);
  margin-top: 0.35rem;
  border-radius: var(--rayon-moyen);
  background-color: rgba(241, 240, 236, 0.05);
  border: 1px solid var(--couleur-bordure-sombre);
}

.flottant__formulaire[hidden] {
  display: none;
}

.flottant__formulaire-intro {
  margin: 0 0 0.25rem;
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: var(--texte-sur-sombre-doux);
}

.flottant__formulaire input[type="text"],
.flottant__formulaire input[type="email"],
.flottant__formulaire input[type="tel"] {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre);
  background-color: rgba(13, 13, 13, 0.6);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-petit);
  min-height: 42px;
}

.flottant__formulaire input::placeholder {
  color: rgba(168, 166, 162, 0.75);
}

.flottant__formulaire input:focus {
  border-color: var(--couleur-magenta-clair);
}

.flottant__formulaire .formulaire__consentement label {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--texte-sur-sombre-doux);
}

.flottant__formulaire .formulaire__consentement a {
  color: var(--couleur-magenta-clair);
}

.flottant__formulaire .bouton {
  width: 100%;
  justify-content: center;
}

.flottant__pied-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--espace-xs);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--couleur-bordure-sombre);
  font-size: var(--taille-micro);
  color: var(--couleur-magenta-clair);
  text-decoration: none;
}

.flottant__pied-lien:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sur téléphone, le panneau prend toute la largeur utile */
@media (max-width: 560px) {
  .flottant__panneau {
    width: calc(100vw - 1.5rem);
    max-width: 22rem;
  }
}


/* ==========================================================================
   62. PAR OÙ COMMENCER — TROIS PORTES PAR LIGNE + ENCART PARTENARIATS
   ========================================================================== */

/* Trois cartes par ligne : elles respirent mieux, et cinq portes donnent
   naturellement 3 + 2. */
@media (min-width: 900px) {
  .aiguillage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* L'encart partenariats : le seul bloc du site en dégradé plein. */
.porte-partenaire {
  display: block;
  margin-top: var(--espace-m);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--rayon-grand);
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
  text-decoration: none;
  transition: box-shadow var(--transition-douce),
              transform var(--transition-douce);
}

.porte-partenaire:hover {
  box-shadow: var(--ombre-survol);
  transform: translateY(-2px);
}

.porte-partenaire__label {
  display: inline-block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--espace-s);
}

.porte-partenaire__phrase {
  font-family: var(--police-titres);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: var(--lettrage-titre);
  color: var(--couleur-blanc);
  margin: 0 0 var(--espace-s);
  max-width: 30ch;
}

.porte-partenaire__reponse {
  font-size: var(--taille-petit);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--espace-m);
  max-width: 74ch;
}

.porte-partenaire__destination {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  color: var(--couleur-blanc);
}

.porte-partenaire .fleche {
  transition: transform var(--transition-rapide);
}

.porte-partenaire:hover .fleche {
  transform: translateX(4px);
}


/* ==========================================================================
   63. AJUSTEMENTS DU PIED DE PAGE ET DU MENU
   ========================================================================== */

/* Colonnes plus compactes : texte plus petit, interligne resserré */
.pied nav h2 {
  font-size: var(--taille-micro);
  margin-bottom: 0.85rem;
}

.pied nav ul {
  gap: 0.55rem;
}

.pied nav a,
.pied__engagements a {
  font-size: var(--taille-petit);
  line-height: 1.45;
}

.pied__marque p {
  font-size: var(--taille-petit);
  line-height: 1.65;
}

/* La ligne légale prend exactement le style du copyright */
.pied .pied__legaux a {
  font-size: inherit;
  color: inherit;
}

.pied .pied__legaux a:hover {
  color: var(--texte-sur-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le cadenas du bouton « Espace client » */
.nav__cadenas svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Le bouton « remonter au début », sous le bouton flottant */
.flottant__haut {
  order: 3;                     /* toujours sous « Parlons-en » */
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 50%;
  background-color: var(--couleur-noir-profond);
  color: var(--texte-sur-sombre);
  cursor: pointer;
  transition: border-color var(--transition-rapide),
              transform var(--transition-rapide);
}

.flottant__haut:hover {
  border-color: var(--couleur-magenta-clair);
  transform: translateY(-2px);
}

.flottant__haut[hidden] {
  display: none;
}

.flottant__haut svg {
  width: 1.05rem;
  height: 1.05rem;
}


/* ==========================================================================
   64. L'ENCART DE CONNEXION À L'ESPACE CLIENT
   Il s'ouvre par-dessus la page, sans la quitter.
   ========================================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(3px);
}

.voile[hidden] {
  display: none;
}

.connexion {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 2rem);
  max-width: 25rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--rayon-grand);
  background-color: var(--couleur-noir-profond);
  border: 1px solid var(--couleur-bordure-sombre);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.connexion[hidden] {
  display: none;
}

.connexion__fermer {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 50%;
  background: transparent;
  color: var(--texte-sur-sombre-doux);
  cursor: pointer;
}

.connexion__fermer:hover {
  color: var(--texte-sur-sombre);
}

.connexion__fermer svg {
  width: 0.9rem;
  height: 0.9rem;
}

.connexion__cadenas {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon-moyen);
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
  margin-bottom: var(--espace-s);
}

.connexion__cadenas svg {
  width: 1.35rem;
  height: 1.35rem;
}

.connexion__titre {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  color: var(--texte-sur-sombre);
  margin-bottom: 0.35rem;
}

.connexion__intro {
  font-size: var(--taille-micro);
  line-height: 1.6;
  color: var(--texte-sur-sombre-doux);
  margin-bottom: var(--espace-m);
  max-width: none;
}

.connexion__form {
  display: grid;
  gap: var(--espace-s);
}

.connexion__ligne {
  display: grid;
  gap: 0.35rem;
}

.connexion__ligne label {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  color: var(--texte-sur-sombre);
}

.connexion__ligne input {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte-sur-sombre);
  background-color: rgba(13, 13, 13, 0.75);
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-moyen);
  min-height: 48px;
}

.connexion__ligne input:focus {
  border-color: var(--couleur-magenta-clair);
}

/* Le champ mot de passe et son œil */
.connexion__secret {
  position: relative;
}

.connexion__secret input {
  padding-right: 3rem;
}

.connexion__oeil {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte-sur-sombre-doux);
  cursor: pointer;
}

.connexion__oeil:hover {
  color: var(--texte-sur-sombre);
}

.connexion__oeil svg {
  width: 1.1rem;
  height: 1.1rem;
}

.connexion__robot label {
  font-size: var(--taille-petit);
  color: var(--texte-sur-sombre-doux);
}

.connexion__valider {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.connexion__oubli {
  margin: 0;
  text-align: center;
  font-size: var(--taille-micro);
}

.connexion__oubli a {
  color: var(--couleur-magenta-clair);
}

.connexion__ouverture {
  margin: var(--espace-m) 0 0;
  padding-top: var(--espace-m);
  border-top: 1px solid var(--couleur-bordure-sombre);
  font-size: var(--taille-micro);
  line-height: 1.6;
  color: var(--texte-sur-sombre-doux);
  max-width: none;
}

.connexion__ouverture strong {
  display: block;
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
  margin-bottom: 0.2rem;
}

.connexion__ouverture a {
  color: var(--couleur-magenta-clair);
}

.connexion__note {
  margin: var(--espace-s) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texte-sur-sombre-doux);
  max-width: none;
}


/* ==========================================================================
   65. LE BANDEAU « OPTIMISÉ POUR », VERSION PIED DE PAGE
   Il vit maintenant DANS le pied de page, sous les colonnes et au-dessus
   de la ligne de copyright : même fond, mêmes filets.
   ========================================================================== */

.pied .optimise {
  background-color: transparent;
  border-top: 1px solid var(--couleur-bordure-sombre);
  padding: var(--espace-xl) 0 var(--espace-l);
}

.pied .optimise__titre {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--texte-sur-sombre);
  margin-bottom: var(--espace-l);
}

.pied .marqueur-confiance {
  background-color: rgba(241, 240, 236, 0.03);
  border-color: var(--couleur-bordure-sombre);
  padding: var(--espace-m) var(--espace-s);
}

.pied .marqueur-confiance:hover {
  border-color: rgba(240, 107, 240, 0.4);
  box-shadow: none;
}

.pied .marqueur-confiance__titre {
  color: var(--texte-sur-sombre);
}

.pied .marqueur-confiance__titre::after {
  background-image: var(--degrade-accent-clair);
}

.pied .marqueur-confiance__preuve {
  color: var(--texte-sur-sombre-doux);
}

.pied .marqueur-confiance .picto-faible {
  stroke: rgba(241, 240, 236, 0.28);
}

/* La règle .pied ul l'emportait et empilait les cartes : on rétablit. */
.pied .marqueurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-s);
}


/* ==========================================================================
   66. LES RÉSEAUX SOCIAUX — PIED DE PAGE ET MENU
   Un compte non renseigné reste visible mais grisé et non cliquable :
   c'est le repère de ce qu'il reste à remplir avant la mise en ligne.
   ========================================================================== */

.pied .pied__reseaux,
.nav__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied .pied__reseaux {
  margin-top: var(--espace-s);
}

.pied__reseaux a,
.nav__reseaux a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: 50%;
  color: var(--texte-sur-sombre-doux);
  text-decoration: none;
  transition: color var(--transition-rapide),
              border-color var(--transition-rapide),
              background-color var(--transition-rapide);
}

.pied__reseaux a:hover,
.nav__reseaux a:hover {
  color: var(--couleur-blanc);
  border-color: transparent;
  background-image: var(--degrade-accent);
}

.reseau__icone svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

/* Compte pas encore renseigné */
.pied__reseaux a[aria-disabled="true"],
.nav__reseaux a[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* Dans le menu, un peu plus petits, et masqués sous 1100 px
   (la barre est déjà chargée : le pied de page les porte aussi). */
.nav__reseaux {
  margin-left: 0.35rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--couleur-bordure-sombre);
}

.nav__reseaux a {
  width: 2.1rem;
  height: 2.1rem;
}

.nav__reseaux .reseau__icone svg {
  width: 0.95rem;
  height: 0.95rem;
}

@media (max-width: 1200px) {
  .nav__reseaux { display: none; }
}

/* --- La ligne du bas, correctement alignée --- */
.pied .pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s) var(--espace-m);
}

.pied .pied__bas p {
  margin: 0;
  line-height: 1.5;
}

.pied .pied__legaux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-m);
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}

/* --- L'encart partenariat : même gabarit que les autres portes, dégradé --- */
.porte--partenaire {
  border-color: transparent;
  background-image: var(--degrade-accent);
  color: var(--couleur-blanc);
}

.porte--partenaire:hover {
  border-color: transparent;
  box-shadow: var(--ombre-survol);
}

.porte--partenaire .porte__label {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--espace-s);
}

.porte--partenaire .porte__phrase {
  color: var(--couleur-blanc);
}

.porte--partenaire .porte__reponse {
  color: rgba(255, 255, 255, 0.92);
}

.porte--partenaire .porte__destination {
  color: var(--couleur-blanc);
  border-top-color: rgba(255, 255, 255, 0.28);
}


/* ==========================================================================
   67. LE LOGO, EN IMAGE
   ⚠️  POUR CHANGER DE LOGO : remplacez le fichier img/logo.svg en gardant
       le même nom. Vous n'avez rien à modifier ici.
       Pour l'agrandir ou le réduire, changez la valeur « height » ci-dessous.
   ========================================================================== */

.logo__image {
  display: block;
  width: auto;
  height: 2.4rem;
  max-width: 12rem;
}

.pied .logo__image {
  height: 2.8rem;
}

/* Sur les petits écrans, le logo se réduit pour laisser la place au menu */
@media (max-width: 560px) {
  .logo__image { height: 2rem; }
}

/* ==========================================================================
   68. LES MOTS EN GRAS SUR FOND NOIR
   Un <strong> hérite sinon de la couleur du texte courant (anthracite),
   qui devient illisible sur le noir du hero.
   ========================================================================== */

.hero strong,
.section--sombre .hero__tagline strong,
.hero__sous-titre strong,
.hero__tagline strong {
  color: var(--texte-sur-sombre);
  font-weight: var(--graisse-semi);
}


/* ==========================================================================
   69. LA VIDÉO DE FOND DU HERO (page d'accueil)
   Ce bloc fait deux choses :
     1. il place la vidéo DERRIÈRE le texte (et non au-dessus) ;
     2. il pose un voile noir par-dessus la vidéo, pour que le texte
        reste lisible quelle que soit l'image qui passe.
   POUR RÉGLER LE VOILE : une seule valeur à changer (--voile-hero).
   0 = pas de voile du tout, 1 = noir complet.
   ========================================================================== */

.hero--video {
  /* ⬇ LA SEULE VALEUR À MODIFIER. Actuellement : 0,4 comme demandé. */
  --voile-hero: 0.9;

  position: relative;   /* sert de repère : la vidéo se cale sur ce cadre */
  overflow: hidden;     /* la vidéo ne déborde jamais de la section */

  /* Fond noir de secours : c'est ce qu'on voit tant que le fichier vidéo
     n'existe pas, ou si le visiteur a coupé le chargement des médias. */
  background-color: var(--couleur-noir-profond);
}

/* Le cadre qui contient la vidéo + le voile.
   « inset: 0 » = il occupe exactement toute la section hero.
   « z-index: 0 » = il reste au fond, sous le texte. */
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* la vidéo remplit le cadre sans se déformer */
  display: block;
}

/* LE VOILE NOIR — posé par-dessus la vidéo, sous le texte. */
.hero__voile {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 13, 13, var(--voile-hero));
}

/* LE TEXTE REPASSE AU-DESSUS DE LA VIDÉO.
   Sans cette règle, la vidéo recouvrirait le texte : c'est elle qui
   corrige ce que vous voyiez. */
.hero--video .conteneur {
  position: relative;
  z-index: 1;
}

/* Sur téléphone, le texte se superpose à toute l'image (écran étroit) :
   le voile est renforcé, sinon la lecture devient difficile. */
@media (max-width: 760px) {
  .hero--video {
    --voile-hero: 0.55;
  }
}

/* Deux paragraphes qui se suivent dans un volet : il leur faut de l'air,
   sinon ils se lisent comme un seul bloc. */
.categorie__volet p + p {
  margin-top: 0.85em;
}

/* Une carte qui prend toute la largeur de la grille.
   Sert à la plateforme d'expérience client : elle ne joue pas dans le même
   ordre de grandeur que les autres, et la mise en page le dit d'elle-même. */
@media (min-width: 900px) {
  .categorie--large {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   69 bis. IMAGE DE FOND DU HERO
   --------------------------------------------------------------------------
   Complète le bloc 69 (la vidéo). Même principe, même voile : l'image passe
   derrière le texte. Les deux peuvent coexister sur des pages différentes.
   ========================================================================== */

.hero--image {
  /* ⬇ Le voile, comme pour la vidéo. 0 = aucun voile, 1 = noir complet. */
  --voile-hero: 0.9;

  position: relative;   /* sert de repère : l'image se cale sur ce cadre */
  overflow: hidden;     /* l'image ne déborde jamais de la section */

  /* Fond noir de secours : c'est ce qu'on voit tant que le fichier image
     n'existe pas. */
  background-color: var(--couleur-noir-profond);
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* l'image remplit le cadre sans se déformer */
  display: block;
}

/* LE TEXTE REPASSE AU-DESSUS DE L'IMAGE.
   Sans cette règle, l'image recouvrirait le texte. */
.hero--image .conteneur {
  position: relative;
  z-index: 1;
}

/* Sur téléphone, le texte se superpose à toute l'image : voile renforcé. */
@media (max-width: 760px) {
  .hero--image {
    --voile-hero: 0.55;
  }
}

/* ==========================================================================
   70. L'ENCART DE CONTACT RAPIDE DU PIED DE PAGE
   --------------------------------------------------------------------------
   Quatre façons de nous joindre, alignées sous les colonnes du pied.
   Les liens sont remplis par js/main.js à partir de la PARTIE 0 : un canal
   non renseigné disparaît, il ne reste jamais de lien mort.
   ========================================================================== */

.pied-joindre {
  padding: var(--espace-l) 0;
  border-bottom: 1px solid var(--couleur-bordure-sombre);
}

.pied-joindre__titre {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-sur-sombre);
  margin: 0 0 var(--espace-s);
}

/* Quatre colonnes qui se replient toutes seules : deux sur tablette,
   une seule sur téléphone. Aucune media query à écrire. */
.pied-joindre__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0.75rem;
}

/* Les quatre cartes gardent la même hauteur, même quand une adresse
   longue passe sur deux lignes. */
.pied-joindre__liste > li {
  display: flex;
}

.pied-joindre__liste a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--couleur-bordure-sombre);
  border-radius: var(--rayon-m);
  text-decoration: none;
  color: var(--texte-sur-sombre);
  transition: border-color var(--transition-rapide),
              background-color var(--transition-rapide);
}

.pied-joindre__liste a:hover,
.pied-joindre__liste a:focus-visible {
  border-color: var(--couleur-magenta);
  background-color: rgba(204, 0, 204, 0.08);
}

.pied-joindre__picto {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--couleur-bordure-sombre);
  color: var(--couleur-magenta);
}

.pied-joindre__picto svg { width: 1.15rem; height: 1.15rem; }

.pied-joindre__quoi {
  display: grid;
  gap: 0.1rem;
  min-width: 0;   /* sans cela, une adresse longue déborde de sa carte */
}

/* ⚠️  La couleur est OBLIGATOIRE ici : sans elle, <strong> hérite de
   l'anthracite du texte courant, et devient illisible sur le fond noir
   du pied de page. C'est le piège classique de ce site. */
.pied-joindre__quoi strong {
  color: var(--texte-sur-sombre);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  overflow-wrap: anywhere;
}

.pied-joindre__quoi span {
  font-size: var(--taille-micro);
  color: var(--texte-sur-sombre-doux);
}

/* ==========================================================================
   71. LE NUMÉRO DE TÉLÉPHONE, À CÔTÉ DE « PARLONS-EN »
   --------------------------------------------------------------------------
   Une pastille sombre posée au-dessus du bouton magenta. Elle reste lisible
   sans lui voler la vedette : « Parlons-en » garde le dégradé plein, le
   téléphone se contente d'un contour.
   ========================================================================== */

.flottant__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  min-height: 48px;
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.01em;
  color: var(--texte-sur-sombre);
  background-color: var(--couleur-noir-profond);
  border: 1px solid var(--couleur-magenta);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(13, 13, 13, 0.45);
  transition: background-color var(--transition-rapide),
              transform var(--transition-rapide);
}

.flottant__tel:hover,
.flottant__tel:focus-visible {
  background-color: var(--couleur-violet);
  transform: translateY(-2px);
}

.flottant__tel-picto {
  display: grid;
  place-items: center;
  color: var(--couleur-magenta);
}

.flottant__tel:hover .flottant__tel-picto,
.flottant__tel:focus-visible .flottant__tel-picto {
  color: var(--texte-sur-sombre);
}

.flottant__tel-picto svg { width: 1.05rem; height: 1.05rem; }

/* Sur les écrans étroits, le numéro reste affiché : c'est précisément là
   qu'un appel est le plus probable, puisque le visiteur tient un téléphone.
   On resserre seulement les marges. */
@media (max-width: 460px) {
  .flottant__tel {
    padding: 0.6rem 0.9rem;
    font-size: var(--taille-micro);
  }
}

/* ==========================================================================
   §72 : PROTECTION ANTI-ROBOTS (Cloudflare Turnstile)
   --------------------------------------------------------------------------
   La zone est ajoutée par js/main.js, partie 16, à la fin de chaque
   formulaire. Vide la plupart du temps : Turnstile ne s'affiche que si
   Cloudflare demande une action au visiteur. Elle ne prend alors aucune
   place, pour que le formulaire reste exactement le même.
   ========================================================================== */

/* La zone elle-même ne crée pas de boîte : certains formulaires sont en
   flex ou en grille avec un espacement entre les éléments, et une boîte
   vide suffirait à ajouter cet espacement. */
.anti-robot {
  display: contents;
}

.anti-robot__widget:empty,
.anti-robot__statut:empty {
  display: none;
}

.anti-robot__widget {
  margin-top: 0.75rem;
  max-width: 100%;
  overflow: hidden;
}

.anti-robot__statut {
  margin: 0.5rem 0 0;
  font-size: var(--taille-micro);
  line-height: 1.5;
  color: inherit;
}


/* ==========================================================================
   §73 : SOMMAIRE DE LA PAGE, EN PARCOURS NUMÉROTÉ (ajout du 1er octobre 2026)
   --------------------------------------------------------------------------
   Placé juste après le hero. Une pastille numérotée par partie de la page,
   reliées par une ligne au dégradé de la marque, comme les étapes d'un
   parcours. Un clic descend directement à la partie.
     • Grand écran : le parcours est horizontal.
     • Tablette et téléphone : il devient vertical, sinon les intitulés
       seraient illisibles.
   La taille des pastilles se règle avec --sp-pastille ci-dessous.
   ========================================================================== */

.sommaire-parcours {
  --sp-pastille: 3.2rem;          /* diamètre des pastilles */
  --sp-trait: 2px;                /* épaisseur de la ligne */
  --sp-ecart: 0.75rem;            /* espace entre deux étapes (grand écran) */
  background-color: var(--fond-alterne);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--couleur-bordure);
}

.sommaire-parcours__entete {
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  margin: 0 0 var(--espace-m);
}

.sommaire-parcours__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sommaire-parcours__etape {
  position: relative;
  min-width: 0;
}

/* Le trait qui relie une pastille à la suivante (vertical par défaut) */
.sommaire-parcours__etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-pastille) / 2 - var(--sp-trait) / 2);
  top: var(--sp-pastille);
  bottom: 0;
  width: var(--sp-trait);
  background: var(--degrade-accent);
}

.sommaire-parcours__etape a {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-s);
  padding-bottom: var(--espace-s);
  color: var(--texte-principal);
  text-decoration: none;
  border-radius: var(--rayon-petit);
}

.sommaire-parcours__etape:last-child a { padding-bottom: 0; }

.sommaire-parcours__numero {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-pastille);
  height: var(--sp-pastille);
  border-radius: 50%;
  background-color: var(--couleur-blanc);
  border: 2px solid var(--couleur-magenta-fonce);
  color: var(--couleur-magenta-fonce);
  font-family: var(--police-titres);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition-rapide), color var(--transition-rapide),
              border-color var(--transition-rapide), transform var(--transition-rapide);
}

.sommaire-parcours__label {
  /* centré sur la pastille quand l'intitulé tient sur une ligne */
  padding-top: calc(var(--sp-pastille) / 2 - 0.7em);
  font-family: var(--police-corps);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-semi);
  line-height: 1.4;
  color: var(--texte-principal);
}

.sommaire-parcours__etape a:hover .sommaire-parcours__numero,
.sommaire-parcours__etape a:focus-visible .sommaire-parcours__numero {
  background: var(--degrade-accent);
  border-color: transparent;
  color: var(--couleur-blanc);
  transform: scale(1.06);
}

.sommaire-parcours__etape a:hover .sommaire-parcours__label {
  color: var(--couleur-magenta-fonce);
}

.sommaire-parcours__etape a:focus-visible {
  outline: 3px solid var(--focus-couleur);
  outline-offset: 4px;
}

/* Grand écran : le parcours se déroule à l'horizontale */
@media (min-width: 900px) {
  .sommaire-parcours__liste {
    flex-direction: row;
    gap: var(--sp-ecart);
  }
  .sommaire-parcours__etape { flex: 1 1 0; }
  .sommaire-parcours__etape:not(:last-child)::after {
    left: calc(50% + var(--sp-pastille) / 2);
    top: calc(var(--sp-pastille) / 2 - var(--sp-trait) / 2);
    bottom: auto;
    width: calc(100% + var(--sp-ecart) - var(--sp-pastille));
    height: var(--sp-trait);
  }
  .sommaire-parcours__etape a {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 0;
  }
  .sommaire-parcours__label {
    padding-top: 0;
    padding-inline: 0.25rem;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire-parcours__numero { transition: none; }
  .sommaire-parcours__etape a:hover .sommaire-parcours__numero,
  .sommaire-parcours__etape a:focus-visible .sommaire-parcours__numero { transform: none; }
}


/* ==========================================================================
   §74 : ABONNEMENTS, AJOUTS DU 1er OCTOBRE 2026
   Le public de chaque offre (« Idéal TPE »…), la ligne du premier mois sous
   le prix, et la définition d'un canal sous les cartes.
   ========================================================================== */

.offre__public {
  align-self: flex-start;
  margin-bottom: var(--espace-s);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--couleur-magenta-fonce);
  border-radius: 999px;
  color: var(--couleur-magenta-fonce);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.04em;
}

/* Sur l'offre mise en avant, le public passe sous l'étiquette « Le plus choisi » */
.offre--phare .offre__public { margin-top: 0.4rem; }

.offre__premier-mois {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: var(--taille-petit);
  line-height: 1.45;
  color: var(--texte-secondaire);
}

.offres__definition {
  max-width: var(--largeur-texte);
  margin: var(--espace-l) auto 0;
  text-align: center;
  font-size: var(--taille-petit);
  line-height: 1.6;
  color: var(--texte-secondaire);
}

.offres__definition strong { color: var(--texte-principal); }

/* Tableau des abonnements : le temps total, puis son détail en sous-lignes */
.comparaison .comparaison__total th,
.comparaison .comparaison__total td { border-bottom: 0; }
.comparaison .comparaison__detail th,
.comparaison .comparaison__detail td {
  font-style: italic;
  font-weight: var(--graisse-normale);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 0;
}
.comparaison .comparaison__detail th { padding-left: 2.25rem; position: relative; }
.comparaison .comparaison__detail th::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--couleur-magenta-fonce);
  transform: translateY(-50%);
}
/* La dernière sous-ligne referme le groupe avec le trait habituel */
.comparaison .comparaison__detail + tr:not(.comparaison__detail) th,
.comparaison .comparaison__detail + tr:not(.comparaison__detail) td {
  border-top: 1px solid var(--couleur-bordure);
}

/* --- Tableau des abonnements : les trois groupes -------------------------
   Inclus (coche), En option (plus, fond rayé), Contrat et sécurité
   (bouclier). Les pastilles sont dessinées en CSS, aucune image. */
.comparaison .comparaison__groupe th {
  padding-top: var(--espace-m);
  padding-bottom: 0.7rem;
  font-family: var(--police-corps);
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--couleur-magenta-fonce);
  background: var(--fond-alterne);
  border-bottom: 2px solid var(--couleur-magenta-fonce);
  white-space: nowrap;
}
.comparaison__pastille {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.5rem;
  vertical-align: -0.35rem;
  border-radius: 50%;
  background: var(--degrade-accent);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0;
}
.comparaison__groupe--inclus .comparaison__pastille::before { content: "\2713"; }
.comparaison__groupe--option .comparaison__pastille::before { content: "+"; font-size: 1.05rem; line-height: 1; }
.comparaison__groupe--contrat .comparaison__pastille {
  border-radius: 0.3rem 0.3rem 50% 50%;   /* forme de bouclier */
}
.comparaison__groupe--contrat .comparaison__pastille::before { content: "\2713"; }

/* Les options : fond légèrement rayé, montants en couleur */
.comparaison .comparaison__option th,
.comparaison .comparaison__option td {
  background-image: repeating-linear-gradient(135deg,
    rgba(163, 0, 158, 0.035) 0 8px, transparent 8px 16px);
}
.comparaison .comparaison__option td { color: var(--couleur-magenta-fonce); font-weight: var(--graisse-semi); }

/* Contrat et sécurité : les lignes communes aux trois offres */
.comparaison .comparaison__commun td { color: var(--texte-principal); }

/* Les cartes d'options sous le tableau */
.categorie--option {
  position: relative;
  border-style: dashed;
  border-color: var(--couleur-magenta-fonce);
}
.categorie__badge-option {
  align-self: flex-start;
  margin-bottom: var(--espace-s);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--degrade-accent-lisible);
  color: #fff;
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.04em;
}
.categorie__badge-option::before { content: "+ "; }


/* ==========================================================================
   §75 : LE MENU (octobre 2026)
   Ordre : Cabinet, Expertise, Votre parcours client, puis le bouton
   « Commencer votre diagnostic ». Contact est à droite, à côté de LinkedIn.
   Dans le menu mobile, Contact rejoint la liste et le bouton passe en bas,
   sur toute la largeur.
   ========================================================================== */

.nav__bouton {
  white-space: nowrap;
  min-height: 40px;
  padding: 0.5rem 1.05rem;
}

/* Le bouton actif (page diagnostic) garde son aspect de bouton */
.nav__bouton[aria-current="page"] {
  box-shadow: 0 0 0 2px rgba(241, 240, 236, 0.35);
}

/* Contact dans la liste : seulement sur mobile */
.nav__item-mobile {
  display: none;
}

/* Contact à droite, juste avant LinkedIn */
.nav__cta .nav__lien--contact {
  margin-right: 0.15rem;
}

/* Barre un peu juste entre 781 et 1100 px : on resserre */
@media (max-width: 1100px) and (min-width: 781px) {
  .nav__liens { gap: var(--espace-s); }
  .nav__bouton { padding: 0.5rem 0.85rem; }
}

@media (max-width: 780px) {
  /* Contact passe dans le menu déroulant (voir plus bas) */
  .nav__cta {
    display: none;
  }
  .nav__item-mobile {
    display: block;
  }
  .nav__item-bouton {
    order: 10;
    margin-top: var(--espace-m);
  }
  .nav__item-bouton .nav__bouton {
    width: 100%;
    min-height: 48px;
    font-size: var(--taille-corps);
  }
}


/* ==========================================================================
   §76 : LA PAGE DIAGNOSTIC (octobre 2026)
   Deux champs côte à côte (prénom / nom, téléphone / e-mail) sur grand
   écran, l'un sous l'autre sur mobile.
   ========================================================================== */

.formulaire__duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-m);
}

@media (min-width: 640px) {
  .formulaire__duo {
    grid-template-columns: 1fr 1fr;
  }
}

.formulaire__duo .formulaire__ligne {
  min-width: 0;
}

/* Le prix du diagnostic dans le hero (fond sombre) */
.hero .diagnostic__prix {
  margin-top: var(--espace-m);
}

/* Le gras reste lisible sur fond sombre */
.section--sombre .contact-grille__texte strong {
  color: var(--texte-sur-sombre);
}

/* Formulaire diagnostic : espacement régulier entre les champs, que le
   champ ait ou non une ligne d'erreur sous lui. */
#form-diagnostic .formulaire__ligne > .erreur-champ {
  margin: 0;
}
#form-diagnostic .formulaire__ligne > .erreur-champ:empty {
  min-height: 0;
  margin-top: -0.4rem;
}


/* ==========================================================================
   §77 : PAGE CONTACT, BLOC « UN ÉCHANGE DE 20 MINUTES » : agenda et
   téléphone ; CASE « LETTRE DÉCRYPTAGES » DES FORMULAIRES (octobre 2026)
   ========================================================================== */

.apres__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-top: var(--espace-s);
}

.apres__telephone {
  font-weight: var(--graisse-semi);
  white-space: nowrap;
}

/* La case de la lettre, un peu détachée de la case de consentement */
.formulaire__lettre label {
  color: var(--texte-sur-sombre);
}

.formulaire__lettre .formulaire__lettre-precision {
  display: block;
  color: var(--texte-sur-sombre-doux);
  font-weight: normal;
}

/* Page bienvenue : rappel de confirmer l'inscription à la lettre */
.bienvenue__lettre {
  margin-top: var(--espace-s);
  color: var(--texte-sur-sombre-doux);
}


/* ==========================================================================
   §78 : ACCUEIL, « L'ORIGINE DU CONCEPT » : la fondatrice
   Portrait, puis le parcours en quatre cases (bento), puis le profil
   LinkedIn. Volontairement discret : le portrait reste l'élément fort.
   ========================================================================== */

.origine__fondatrice {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.origine__fondatrice .incarnation__portrait {
  position: static;
}

.origine__fondatrice figcaption {
  margin-bottom: 0.25rem;
}

.origine__bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.origine__case {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-petit);
}

.origine__case--phare,
.origine__case--large {
  grid-column: 1 / -1;
}

.origine__case--phare {
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.45rem;
  background: var(--couleur-noir-profond);
  border-color: transparent;
}

.origine__valeur {
  font-family: var(--police-titres);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--texte-principal);
}

.origine__valeur--texte {
  font-size: 1rem;
}

.origine__libelle {
  font-size: 0.68rem;
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.origine__case--phare .origine__valeur {
  font-size: 1.35rem;
  background: var(--degrade-accent-clair);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.origine__case--phare .origine__libelle {
  font-size: var(--taille-micro);
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte-sur-sombre);
}

/* Le lien vers le profil LinkedIn */
.origine__profil {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-petit);
  background: var(--couleur-blanc);
  color: var(--texte-principal);
  text-decoration: none;
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}

.origine__profil:hover {
  border-color: var(--couleur-magenta);
  box-shadow: var(--ombre-carte);
}

.origine__profil-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 4px;
  background: #0A66C2;          /* le bleu LinkedIn */
  color: #FFFFFF;
}

.origine__profil-logo svg {
  width: 0.9rem;
  height: 0.9rem;
}

.origine__profil-texte {
  display: grid;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}

.origine__profil-texte strong {
  font-size: var(--taille-micro);
}

.origine__profil-texte span {
  font-size: 0.72rem;
  color: var(--texte-secondaire);
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .origine__fondatrice {
    max-width: 440px;
  }
}

@media (max-width: 560px) {
  .origine__fondatrice {
    max-width: none;
  }
}


/* ==========================================================================
   §79 : LE SOMMAIRE QUI S'ACCROCHE SOUS LE MENU (octobre 2026)
   Quand on a dépassé le sommaire « Sur cette page », une version compacte
   apparaît juste sous la barre de menu et reste visible pendant la
   lecture. La partie en cours de lecture est mise en avant.
   Fabriquée par js/main.js, PARTIE 17 (copie du sommaire de la page) :
   rien à ajouter dans les pages.
   ========================================================================== */

/* Les ancres ne doivent pas passer sous le menu + le sommaire accroché */
html.a-sommaire-accroche {
  scroll-padding-top: calc(var(--hauteur-nav) + 4.25rem);
}
html.a-sommaire-accroche .decryptage__corps h2 {
  scroll-margin-top: 0;
}

.sommaire-accroche {
  position: fixed;
  top: var(--hauteur-nav);
  left: 0;
  right: 0;
  z-index: 95;                       /* sous le menu (100) */
  background: rgba(245, 243, 238, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--couleur-bordure);
  box-shadow: 0 6px 18px rgba(13, 13, 13, 0.06);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform var(--transition-douce), visibility 0s linear 0.3s;
}

.sommaire-accroche.est-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--transition-douce), visibility 0s;
}

.sommaire-accroche__interieur {
  max-width: var(--largeur-site);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* La liste : une ligne, qui défile à l'horizontale si elle est trop longue */
.sommaire-accroche .sommaire-parcours__liste {
  --sp-pastille: 1.65rem;
  --sp-trait: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.6rem;
}
.sommaire-accroche .sommaire-parcours__liste::-webkit-scrollbar { display: none; }

.sommaire-accroche .sommaire-parcours__etape {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Le trait entre deux étapes, à l'horizontale */
.sommaire-accroche .sommaire-parcours__etape:not(:last-child)::after {
  content: "";
  position: static;
  display: block;
  flex: none;
  width: clamp(0.9rem, 2.2vw, 2rem);
  height: var(--sp-trait);
  margin-inline: 0.5rem;
  background: var(--degrade-accent);
  opacity: 0.55;
}

.sommaire-accroche .sommaire-parcours__etape a {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.2rem;
  text-align: left;
}

.sommaire-accroche .sommaire-parcours__numero {
  font-size: 0.72rem;
  border-width: 1.5px;
}

.sommaire-accroche .sommaire-parcours__label {
  padding: 0;
  font-size: 0.8rem;
  font-weight: var(--graisse-moyenne);
  color: var(--texte-secondaire);
  white-space: nowrap;
}

/* La partie en cours de lecture (dans les deux sommaires) */
.sommaire-parcours__etape.est-active .sommaire-parcours__numero {
  background: var(--degrade-accent);
  border-color: transparent;
  color: var(--couleur-blanc);
}
.sommaire-parcours__etape.est-active .sommaire-parcours__label {
  color: var(--texte-principal);
  font-weight: var(--graisse-semi);
}

/* Petit écran : on ne garde l'intitulé que pour la partie en cours */
@media (max-width: 640px) {
  .sommaire-accroche .sommaire-parcours__etape:not(.est-active) .sommaire-parcours__label {
    display: none;
  }
  .sommaire-accroche .sommaire-parcours__etape:not(:last-child)::after {
    width: 0.8rem;
    margin-inline: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire-accroche,
  .sommaire-accroche.est-visible { transition: none; }
}

@media print {
  .sommaire-accroche { display: none; }
}


/* ==========================================================================
   §80 : LE BLOG DÉCRYPTAGES, RETOUR EN LIGNE (octobre 2026)
   Pied d'article : résumer avec une IA, partager, articles liés.
   Carrousel « À la une » avec un seul article : pas de commandes.
   ========================================================================== */

/* Un seul article dans le carrousel : flèches et pastilles inutiles */
.carrousel:not(.carrousel--actif) .carrousel__commandes {
  display: none;
}

.decryptage__pied .renvoi {
  margin-bottom: var(--espace-l);
}

.resumer {
  margin-bottom: var(--espace-l);
}

.resumer__label {
  font-size: var(--taille-micro);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin: 0 0 0.6rem;
}

.resumer__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.resumer__lien {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  background-color: var(--couleur-blanc);
  color: var(--texte-principal);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  transition: border-color var(--transition-rapide), color var(--transition-rapide);
}

.resumer__lien:hover {
  border-color: var(--couleur-magenta-fonce);
  color: var(--couleur-magenta-fonce);
}

.resumer__note {
  margin: 0.5rem 0 0;
  font-size: var(--taille-micro);
  color: var(--texte-secondaire);
}

.partage__label {
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-label);
  text-transform: uppercase;
}

.partage__confirmation {
  font-size: var(--taille-micro);
  color: var(--couleur-magenta-fonce);
}

.decryptage__pied-titre {
  font-size: var(--taille-titre-2);
  margin: var(--espace-l) 0 var(--espace-m);
}

.grille-articles--pied {
  grid-template-columns: 1fr;
}

/* Menu à 4 liens + bouton : entre 781 et 980 px, tout se resserre pour
   tenir sur une ligne (en dessous, c'est le menu mobile). */
@media (max-width: 980px) and (min-width: 781px) {
  .nav__interieur { gap: 0.6rem; }
  .nav__liens { gap: 0.8rem; }
  .nav__lien { font-size: 0.8rem; }
  .nav__bouton { padding: 0.45rem 0.7rem; font-size: 0.78rem; min-height: 36px; }
  .logo__image { width: 38px; height: 38px; }
}

/* Le sommaire accroché : bords en fondu, pour signaler qu'il défile */
.sommaire-accroche .sommaire-parcours__liste {
  padding-inline: 1.25rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}
.sommaire-accroche__interieur {
  padding-inline: calc(var(--marge-laterale) - 1.25rem);
}