/* ============================================================
   PGACOMPTA — Feuille de style principale
   Palette extraite du logo :
   vert principal #04A258 · vert clair #7DBE9F · mint #CAEDDF
   bleu-pétrole #17383A · bleu accent #2C6E8C
   ============================================================ */

/* ============================================================
   Police Inter — hébergée en local (RGPD)
   Fichiers dans assets/fonts/. Aucun appel n'est fait aux serveurs
   de Google : l'adresse IP des visiteurs ne sort pas du site.
   Inter est une police variable sous licence SIL Open Font License :
   un seul fichier couvre toutes les graisses de 100 à 900.
   Source : https://fonts.google.com/specimen/Inter
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ----------------------------------------------------------------
     LE VERT A TROIS RÔLES, ET UN SEUL TON NE PEUT PAS LES TENIR.
     La règle d'accessibilité (WCAG AA) exige un contraste de 4,5:1
     pour du texte courant, 3:1 seulement pour les grands caractères
     (18,66 px en gras ou plus) et les éléments graphiques.

       --green        #04A258  contraste 3,33 avec le blanc
                      → RÉSERVÉ au décoratif et aux grands caractères :
                        logo, titre du hero, grands chiffres, bordures,
                        dégradés, aplats sans texte par-dessus.
                        NE JAMAIS l'utiliser sous un texte courant blanc.

       --green-action #048346  contraste 4,84 avec le blanc
                      → fond des boutons et pastilles portant du texte
                        blanc de taille normale.

       --green-dark   #036B39  contraste 6,63 sur blanc, 5,98 sur mint
                      → vert écrit sur fond clair (liens, étiquettes,
                        survols) et survol des boutons.

     Ces valeurs ont été mesurées, pas estimées. Si vous changez le vert,
     revérifiez les ratios avant de publier.
     ---------------------------------------------------------------- */
  --green: #04A258;
  --green-action: #048346;
  --green-dark: #036B39;
  --green-light: #7DBE9F;
  /* Vert clair réservé au PETIT TEXTE sur fond sombre.
     C'est le vert du logo (#04A258, relevé au pixel sur le fichier)
     éclairci de 55 % avec du blanc : la teinte est rigoureusement
     conservée, seule la clarté change.
     Mesuré : --green-light n'atteignait que 3,67:1 sur fond sombre, sous
     le seuil de 4,5 exigé pour du texte normal. Celui-ci monte à 4,65 sur
     le point le plus clair du dégradé, et 7,42 sur le pied de page.
     --green-light reste valable pour les icônes et les filets, qui ne
     demandent que 3:1. */
  --green-clair-texte: #8ED5B4;
  --mint: #CAEDDF;
  --mint-soft: #EAF6F0;
  --teal: #17383A;
  --teal-2: #1E4B48;
  --blue: #2C6E8C;
  --bg: #F7FAF8;
  --white: #FFFFFF;
  --text: #1C2B2A;
  --text-muted: #556864;
  --border: #DDEAE3;
  --shadow-sm: 0 1px 3px rgba(23, 56, 58, 0.08);
  --shadow-md: 0 6px 24px rgba(23, 56, 58, 0.10);
  --shadow-lg: 0 16px 48px rgba(23, 56, 58, 0.14);
  --radius: 12px;
  --radius-lg: 20px;
  --container: 1180px;
  --header-h: 78px;

  /* ----------------------------------------------------------------
     TYPOGRAPHIE
     Tout le site est en Inter, titres compris — le choix d'origine,
     rétabli à la demande du cabinet après un essai en serif.

     POUR RETENTER LA SERIF : remplacez la valeur de --font-titres par
       'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif
     et, dans le bloc h1..h4 plus bas, repassez font-weight à 600,
     line-height à 1.2 et l'interlettrage des titres à ~0 : une serif
     porte plus de graisse optique qu'une sans, sans ces réglages elle
     paraît lourde et compressée.
     Cette pile n'utilise que des polices déjà présentes sur les
     appareils : rien à télécharger, donc rien à changer côté RGPD.
     ---------------------------------------------------------------- */
  --font-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-titres: var(--font-texte);
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Verrou de défilement : posé par JS pendant qu'un panneau plein écran est
   ouvert (menu mobile, fenêtre de téléchargement d'un guide).

   ⚠ La classe DOIT s'appliquer à <html> et pas seulement à <body>.
   L'overflow-x:hidden de la ligne au-dessus fait de <html> l'élément qui
   défile réellement : mesuré, document.scrollingElement vaut HTML et son
   overflow-y calculé restait à « auto » tant que le verrou ne visait que
   <body>. Résultat, menu ouvert, la page défilait toujours dessous et la
   croix de fermeture disparaissait vers le haut.

   Le défilement du panneau lui-même n'est pas touché : il a son propre
   overflow-y:auto et reste parcourable. */
html.defilement-bloque,
body.defilement-bloque { overflow: hidden; }

body {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-dark); }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  line-height: 1.25;
  color: var(--teal);
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }

/* Conservé : sans effet tant que les titres sont en Inter, mais évite de
   voir les boutons et le menu basculer en serif si --font-titres change. */
.btn, .section-tag, .nav-link, .brand-name, .video-facade__titre {
  font-family: var(--font-texte);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

section { padding: 84px 0; }

/* ---------- Rythme des fonds ----------
   Les pages alternaient entre #FFFFFF et #F7FAF8 : un écart si faible
   qu'aucun visiteur ne le percevait, d'où des pages uniformément
   blanches où rien ne paraissait plus important qu'autre chose.
   Trois niveaux nettement distincts, à alterner :
     (défaut)        fond de page, le plus courant
     .section-claire surface blanche franche, pour les grilles de cartes
     .section-mint   teinte verte douce, pour les sections de repères
     .section-dark   bloc sombre, réservé aux appels à l'action        */
.section-claire {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-mint {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(4, 162, 88, .07), transparent 55%),
    var(--mint-soft);
  border-top: 1px solid var(--mint);
  border-bottom: 1px solid var(--mint);
}

.section-tag {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--green-dark);
  background: var(--mint-soft);
  border: 1px solid var(--mint);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--text-muted); margin-top: 14px; font-size: 1.05rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 26px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--green-action); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal); color: #fff; }
.btn-light { background: #fff; color: var(--teal); }
.btn-light:hover { background: var(--mint); color: var(--teal); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ---------- Header ---------- */
/* ⚠ NE PAS remettre de fond translucide ni de backdrop-filter ici.
   Deux raisons, chacune suffisante :

   1. Accessibilité. Avec background:rgba(255,255,255,.92), les outils
      d'audit ne peuvent pas calculer le contraste du texte : le fond réel
      dépend du contenu qui défile dessous. axe signalait tout le
      header.site-header comme non conforme, faute de pouvoir trancher.

   2. Mise en page. Un élément portant backdrop-filter devient le BLOC
      CONTENEUR de ses descendants en position:fixed. Le panneau du menu
      mobile se calait alors sur le header (79 px) au lieu de l'écran :
      il n'en restait qu'un bandeau de 48 px.

   Un blanc opaque donne le même effet visuel, coûte moins cher à composer
   et ne pose aucun de ces deux problèmes. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Le logo ne se comprime jamais : sinon le menu vient le chevaucher */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.brand-name { font-size: 1.25rem; font-weight: 800; color: var(--teal); letter-spacing: -0.01em; }
/* ⚠ Vert d'action et non --green pour le « COMPTA ».
   À 1,25 rem en gras, ce mot compte comme grand texte et 3:1 suffirait —
   --green passe alors tout juste (3,33). Mais la marque descend à 1,1 rem
   puis 1,05 rem sur petit écran : sous 18,66 px, le seuil remonte à 4,5 et
   --green échoue. Signalé par axe sur le rapport mobile.
   --green-action donne 4,84 et reste dans la teinte du logo. */
.brand-name span { color: var(--green-action); }

/* Pas de min-width:0 ici : le menu ne doit jamais se réduire sous sa taille
   de contenu, sinon il déborde par-dessus les boutons Contact et téléphone. */
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav a { color: var(--teal); font-weight: 500; font-size: .95rem; }

/* Les boutons Contact et téléphone gardent toujours leur place :
   c'est au menu de céder, jamais l'inverse. */
.header-cta { flex-shrink: 0; }

/* Le conteneur est plafonné à 1180 px : la place disponible dans le header ne
   change plus au-delà. Ces valeurs resserrées sont donc la règle par défaut. */
.header-inner { gap: 18px; }
.main-nav a { font-size: .9rem; }
.btn-contact-header { padding: 9px 17px; font-size: .85rem; }
.btn-tel-header { padding: 9px 16px; font-size: .85rem; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Espacement calibré pour que les 5 entrées tiennent dans le conteneur
     de 1180 px avec le logo et les deux boutons. */
  padding: 10px 10px;
  border-radius: 8px;
  transition: background .2s, color .2s;
  /* Chaque entrée du menu tient sur une seule ligne */
  white-space: nowrap;
}
.nav-link:hover, .nav-item.open > .nav-link { background: var(--mint-soft); color: var(--green-dark); }
.nav-link .caret { transition: transform .2s; }
.nav-item.open > .nav-link .caret { transform: rotate(180deg); }

.nav-item { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .22s ease;
}
.nav-item.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Accès clavier : à la souris, le survol ouvre le sous-menu. Depuis que le
   clic mène à la page de la rubrique (voir js/main.js), le focus doit jouer
   ce rôle — sinon les sous-entrées deviennent inaccessibles au clavier.
   La règle ne pose ni display ni position : dans le panneau mobile, où le
   sous-menu est en display:none, elle reste donc sans effet. */
.nav-item.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: .92rem;
}
.dropdown a:hover { background: var(--mint-soft); color: var(--green-dark); }
.dropdown a strong { display: block; color: inherit; font-weight: 600; }
.dropdown a small { color: var(--text-muted); font-weight: 400; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.btn-espace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .88rem;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--teal);
  color: #fff;
  transition: background .2s;
}
.btn-espace:hover { background: var(--teal-2); color: #fff; }
.btn-contact-header { padding: 10px 20px; font-size: .88rem; }

/* Bouton téléphone du header */
.btn-tel-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  background: var(--green-action);
  border: 1px solid var(--green-action);
  border-radius: 100px;
  white-space: nowrap;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn-tel-header:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-tel-header svg { width: 16px; height: 16px; flex-shrink: 0; stroke: #fff; }

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span { display: block; height: 2px; background: var(--teal); border-radius: 2px; transition: all .3s; }
.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  padding: 90px 0;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(4,162,88,.10), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(44,110,140,.08), transparent 50%),
    linear-gradient(180deg, #FDFEFD, var(--bg));
  overflow: hidden;
  position: relative;
}
/* Filet dégradé en haut de l'accueil, identique à celui des pages
   intérieures (.page-hero::before). Il manquait ici : la première page
   vue était la seule à ne pas porter la signature chromatique du site.
   z-index 2 pour passer au-dessus du conteneur, qui est à 1. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg,
    var(--green) 0%,
    var(--green) 38%,
    var(--green-light) 72%,
    var(--blue) 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.hero h1 span { color: var(--green); }
.hero-lead { font-size: 1.12rem; color: var(--text-muted); margin: 22px 0 34px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; }
.hero-trust div strong { display: block; font-size: 1.55rem; color: var(--teal); font-weight: 800; }
.hero-trust div small { color: var(--text-muted); font-size: .86rem; }

.hero-visual { position: relative; }
/* ⚠ NE PAS écrire « .hero-visual svg { width:100% } ». La colonne
   contient désormais des icônes de 18 px dans les liens d'accès et la
   courbe de trésorerie : un sélecteur non ancré les étirerait toutes à
   la largeur de la colonne. Chaque bloc dimensionne son propre SVG. */

/* ---------- Tableau de bord manipulable ----------
   Ce bloc vivait sur l'accueil ; il est désormais en en-tête de
   pilotage-augmenter-chiffre-affaires.html (balisage dans
   _source/gabarits/visuel-tableau-interactif.html).
   Les barres se saisissent à la souris, au doigt ou aux flèches.
   touch-action:none sur les poignées : sans cela, un glissement vertical
   au doigt fait défiler la page au lieu de déplacer la barre. */
.hero-barre { transition: height .12s ease, y .12s ease; }
.hero-barre:focus { outline: none; }
.hero-barre:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-poignee { cursor: ns-resize; touch-action: none; }
.hero-tableau.en-cours .hero-barre { transition: none; }
.hero-tableau.en-cours { cursor: ns-resize; }

.hero-tableau__aide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  min-height: 26px;
}
.hero-tableau__indice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-dark);
  transition: opacity .3s ease;
}
.hero-tableau__indice svg { width: 15px; height: 15px; }
.hero-tableau__indice.efface { opacity: 0; }
.hero-tableau__reinit {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.hero-tableau__reinit:hover { border-color: var(--green-action); color: var(--green-dark); }
.hero-tableau__mention { margin-top: 4px; font-size: .74rem; color: var(--text-muted); }

/* =====================================================================
   APERÇU DU TABLEAU DE BORD (accueil)
   Reprise du tableau de bord de démonstration, animée seule.

   CONTRASTES — attention au piège de calcul.
   Le fond de référence n'est PAS le dégradé (#17383A → #245A50) : les
   cartes internes posent par-dessus un rgba(255,255,255,.07), ce qui
   ÉCLAIRCIT le fond et fait donc BAISSER le contraste du texte clair.
   Le fond réel sous les libellés est rgb(51, 102, 92), et c'est lui
   qu'il faut prendre. Calculé contre le dégradé nu, on se croit large
   alors qu'on est sous le seuil — trois valeurs échouaient ainsi ici.

   Deux colonnes ci-dessous : la BORNE (contre rgb(51,102,92), soit le
   point le plus clair du dégradé, que ne touche aucune carte en pratique)
   et la valeur RELEVÉE AU PIXEL sur la page rendue, où le fond des cartes
   mesure rgb(42,77,76) et rgb(44,84,81). C'est la borne qui décide.
                                          borne    relevé
     blanc #FFFFFF ....................... 6,57  /  9,27
     libellés rgba(255,255,255,.82) ...... 5,03  /  6,88   (.72 : 4,30 — refusé)
     vert des hausses #BCEBD6 ............ 5,00  /  7,06   (#8ED5B4 : 3,86 — refusé)
     tracé de courbe #8ED5B4 (≥ 3 suffit)  3,86  /  4,94
   Le vert de marque #04A258 tombe à 1,98:1 sur ce fond : il ne sert
   QUE d'aplat et de tracé, jamais de couleur de texte ici. Le bouton
   est pour la même raison blanc à texte #036B39 (6,63:1) et non vert à
   texte blanc (#04A258 n'aurait donné que 3,33:1).
   ===================================================================== */
.tdb-apercu {
  position: relative;
  padding: 20px 20px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #17383A, #245A50);
  box-shadow: var(--shadow-lg);
  color: #fff;
  overflow: hidden;
}
/* Reflet qui balaie la carte : le seul mouvement permanent du bloc.
   Posé en ::after avec pointer-events:none pour ne rien intercepter. */
.tdb-apercu::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: tdbReflet 9s ease-in-out infinite;
}
@keyframes tdbReflet {
  0%, 62% { left: -60%; }
  92%, 100% { left: 115%; }
}

.tdb-apercu__barre { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.tdb-apercu__logo {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #04A258, #7DBE9F);
  color: #17383A;
  font-size: .78rem; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tdb-apercu__titre { font-size: .84rem; font-weight: 700; letter-spacing: .01em; }
.tdb-apercu__etat {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255, 255, 255, .82);
}
.tdb-apercu__etat i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8ED5B4;
  animation: tdbPouls 2.4s ease-in-out infinite;
}
@keyframes tdbPouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Les trois indicateurs --- */
.tdb-apercu__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tdb-kpi {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  padding: 11px 12px 12px;
  min-width: 0;
}
.tdb-kpi__label {
  display: block;
  font-size: .66rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  min-height: 2.7em;
}
.tdb-kpi__valeur {
  display: block;
  margin-top: 4px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  /* Chiffres de largeur fixe : sans cela, le compteur qui défile fait
     danser la mise en page à chaque image. */
  font-variant-numeric: tabular-nums;
}
.tdb-kpi__delta { display: block; margin-top: 2px; font-size: .66rem; font-weight: 700; color: #BCEBD6; }
.tdb-kpi__delta small { font-weight: 500; color: rgba(255, 255, 255, .82); }

/* --- Histogramme et courbe --- */
.tdb-apercu__graphes {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.tdb-bloc {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
.tdb-bloc__label { display: block; font-size: .66rem; color: rgba(255, 255, 255, .82); margin-bottom: 9px; }

.tdb-barres { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.tdb-groupe { display: flex; align-items: flex-end; gap: 2px; flex: 1; height: 100%; }
.tdb-barre {
  flex: 1;
  border-radius: 3px 3px 0 0;
  /* État de repos = état final. L'animation ne fait que partir de plus
     bas : sans JavaScript, l'histogramme s'affiche donc complet. */
  height: var(--h);
  transform-origin: bottom;
  /* Le script réécrit --h à chaque changement de scène ; la transition
     fait glisser la hauteur au lieu de la faire sauter. Un peu plus
     longue que l'interpolation des chiffres (1,2 s), pour que les
     barres finissent juste après eux plutôt qu'en même temps. */
  transition: height 1.3s cubic-bezier(.33, .8, .35, 1);
}
.tdb-barre--n  { background: linear-gradient(180deg, #7DBE9F, #04A258); }
.tdb-barre--n1 { background: rgba(255, 255, 255, .22); }
.anime-tdb .tdb-barre { animation: tdbPousse .85s cubic-bezier(.22, .61, .36, 1) backwards; }
@keyframes tdbPousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.tdb-mois {
  display: flex; gap: 6px;
  margin-top: 6px;
  font-size: .58rem;
  color: rgba(255, 255, 255, .82);
}
.tdb-mois span { flex: 1; text-align: center; }
.tdb-legende { display: flex; gap: 12px; margin-top: 8px; font-size: .62rem; color: rgba(255, 255, 255, .82); }
.tdb-legende span { display: inline-flex; align-items: center; gap: 5px; }
.tdb-puce { width: 8px; height: 8px; border-radius: 2px; }
.tdb-puce--n  { background: #04A258; }
.tdb-puce--n1 { background: rgba(255, 255, 255, .32); }

.tdb-bloc--treso { display: flex; flex-direction: column; }
.tdb-treso__valeur { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tdb-treso__delta { font-size: .64rem; font-weight: 700; color: #BCEBD6; margin-top: 1px; }
.tdb-courbe { display: block; width: 100%; height: auto; margin-top: auto; }
/* Le trait se dessine de gauche à droite. La longueur (240) est un peu
   supérieure au tracé réel : un dash trop court laisserait un trou. */
.anime-tdb .tdb-courbe__trait {
  stroke-dasharray: 240;
  animation: tdbTrace 1.5s ease-out backwards;
}
@keyframes tdbTrace { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
.anime-tdb .tdb-courbe__aire  { animation: tdbApparait 1.4s ease-out .35s backwards; }
.anime-tdb .tdb-courbe__point { animation: tdbApparait .5s ease-out 1.4s backwards; }
@keyframes tdbApparait { from { opacity: 0; } to { opacity: 1; } }

.tdb-apercu__lien {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  padding: 9px 15px;
  min-height: 40px;
  border-radius: 999px;
  background: #fff;
  color: #036B39;               /* 6,63:1 sur blanc */
  font-size: .8rem; font-weight: 700;
}
.tdb-apercu__lien svg { width: 15px; height: 15px; transition: transform .25s ease; }
.tdb-apercu__lien:hover { background: #EAF6F0; color: #036B39; }
.tdb-apercu__lien:hover svg { transform: translateX(3px); }

/* --- Les trois vues de détail, sous la carte --- */
.tdb-acces { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tdb-acces a {
  display: flex; align-items: center; gap: 9px;
  height: 100%;
  min-height: 48px;               /* WCAG 2.5.8 : cible d'au moins 24 px */
  padding: 10px 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tdb-acces a:hover {
  border-color: var(--green-action);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text);
}
.tdb-acces svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--green-dark); }
.tdb-acces strong { display: block; font-size: .77rem; line-height: 1.3; }
.tdb-acces small { display: block; font-size: .66rem; color: var(--text-muted); line-height: 1.3; margin-top: 1px; }

@media (max-width: 560px) {
  .tdb-apercu__kpis { grid-template-columns: 1fr 1fr; }
  .tdb-kpi:last-child { grid-column: 1 / -1; }
  .tdb-kpi__label { min-height: 0; }
  .tdb-apercu__graphes { grid-template-columns: 1fr; }
  .tdb-acces { grid-template-columns: 1fr; }
}

/* Visible des seuls lecteurs d'écran : sert aux annonces de mise à jour. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-barre { transition: none; }
  /* Aperçu du tableau de bord : tout se fige sur l'état final, qui est
     aussi l'état de repos. Rien n'est perdu, seul le mouvement disparaît.
     Le script lit la même préférence et n'anime pas les compteurs. */
  .tdb-apercu::after,
  .tdb-apercu__etat i { animation: none; }
  .tdb-apercu::after { display: none; }
  .anime-tdb .tdb-barre,
  .anime-tdb .tdb-courbe__trait,
  .anime-tdb .tdb-courbe__aire,
  .anime-tdb .tdb-courbe__point { animation: none; }
  .anime-tdb .tdb-courbe__trait { stroke-dasharray: none; }
}
/* Cartes de données posées sur les photos des sections */
.equipe-badge { left: -28px; bottom: -22px; max-width: 300px; }
.competences-badge { right: -24px; bottom: -20px; max-width: 300px; }

/* ---------- Cartes / grilles génériques ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Survol : la carte se soulève et son icône s'anime légèrement */
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.card:hover .icon-badge { transform: scale(1.08) rotate(-4deg); }
.icon-badge { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card h3 { margin: 18px 0 10px; }
.card p { color: var(--text-muted); font-size: .95rem; }
.card .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; font-size: .9rem; color: var(--green-dark); }
.card .card-link:hover { gap: 10px; }

/* ============================================================
   CARTES « MISSIONS » — page Le cabinet
   ------------------------------------------------------------
   Carte claire, dans le même langage que .card et .sim-card : fond
   blanc, filet coloré en haut, pastille d'icône teintée. Une première
   version posait ce contenu sur un fond sombre façon « verre » — trop
   éloignée de la charte du site, revenue en arrière le 14/08/2026.
   Les trois missions gardent leur code couleur, déjà utilisé sur la
   page Simulateurs (.sim-card--fiscal / --statut / --social) :
     comptable et fiscale → vert   #036B39
     juridique            → terre  #9C4718
     paie                 → bleu   #1F5A75 */
.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Filet coloré en haut de carte, en ::before plutôt qu'en border-top :
   un border-top aurait décalé le contenu de son épaisseur au changement
   de couleur au survol. */
.mission-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--mc-accent);
}
.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--mc-accent);
}

.mission-card--fiscal    { --mc-accent: #036B39; --mc-teinte: #E4F2EA; }
.mission-card--juridique { --mc-accent: #9C4718; --mc-teinte: #FAEBE1; }
.mission-card--paie      { --mc-accent: #1F5A75; --mc-teinte: #E6F0F5; }

.mission-card__icone {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-teinte);
  color: var(--mc-accent);
}
.mission-card__icone svg { width: 23px; height: 23px; }

.mission-card h3 { color: var(--teal); font-size: 1.18rem; margin: 0; }
.mission-card__accroche { color: var(--text-muted); font-size: .95rem; font-weight: 600; margin: -6px 0 0; }
.mission-card__liste {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}
.mission-card__liste li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-muted);
}
/* La pastille est dessinée en CSS plutôt qu'en SVG répété dans la page :
   trois cartes × quatre lignes, cela ferait douze fois le même chemin. */
.mission-card__liste li::before {
  content: "";
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--mc-teinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036B39' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
/* Le crochet reprend --mc-accent, mais un data-URI ne lit pas les
   variables CSS : on le repeint donc par famille plutôt qu'une seule
   fois dans la règle générique ci-dessus. */
.mission-card--fiscal .mission-card__liste li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036B39' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mission-card--juridique .mission-card__liste li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C4718' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mission-card--paie .mission-card__liste li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5A75' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mission-card__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--mc-accent);
  background: transparent;
  color: var(--mc-accent);
  font-weight: 700;
  font-size: .92rem;
  transition: background .2s ease, color .2s ease, gap .2s ease;
}
.mission-card__cta:hover { background: var(--mc-accent); color: #fff; gap: 13px; }
.mission-card__cta svg { width: 16px; height: 16px; }

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mint-soft), var(--mint));
  color: var(--green-dark);
}
.icon-badge svg { width: 28px; height: 28px; }
/* Trois tons, appliqués en rotation par le générateur. Les pastilles
   alternaient jusqu'ici sans règle : une carte sur deux changeait de
   couleur au hasard des pages. */
.icon-badge.teal { background: linear-gradient(135deg, #E8F0F4, #D2E4EC); color: var(--blue); }
.icon-badge.profond { background: linear-gradient(135deg, #DDEDE6, #BFDFD2); color: #10514A; }

/* ---------- Étapes création d'entreprise ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  transition: transform .25s, box-shadow .25s;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-num {
  position: absolute;
  top: -14px;
  left: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-action);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 1rem; margin: 14px 0 8px; }
.step p { font-size: .87rem; color: var(--text-muted); }

/* ---------- Listes à puces custom ---------- */
.check-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  font-size: 1.02rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.check-list li strong { color: var(--teal); }

/* ---------- Section sombre (équipe / CTA) ---------- */
.section-dark {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 60%, #245A50 100%);
  color: #E8F3EE;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(232,243,238,.85); }
/* Étiquette sur fond sombre : petit texte en capitales, donc 4,5:1 exigé.
   --green-light n'y atteignait que 3,67. */
.section-dark .section-tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--green-clair-texte); }

/* ---------- Actualités ---------- */
.news-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.news-cover { height: 170px; display: flex; align-items: center; justify-content: center; }
.news-cover svg { width: 64px; height: 64px; opacity: .9; }
.news-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.news-date { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.news-body h3 { margin: 10px 0 8px; font-size: 1.08rem; }
.news-body p { flex: 1; }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .88rem; color: var(--teal); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: .95rem;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(4,162,88,.14);
}
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--text-muted); }
.form-consent input { margin-top: 3px; accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.form-note { font-size: .8rem; color: var(--text-muted); }
.form-success {
  display: none;
  background: var(--mint-soft);
  border: 1px solid var(--green-light);
  color: var(--green-dark);
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 10px;
}
.form-success.visible { display: block; }
.form-error {
  display: none;
  background: #FDF1F0;
  border: 1px solid #E8AFA8;
  color: #A03B30;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 10px;
}
.form-error.visible { display: block; }
.form-error a { color: inherit; text-decoration: underline; }

/* ---------- Cartes logiciels partenaires (Pennylane, Silae) ---------- */
.softwares { display: flex; flex-wrap: wrap; gap: 24px; }
.software-card {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.software-card img { flex-shrink: 0; }
/* Deux causes distinctes faisaient déborder cette carte de ~1,5 px sous
   375 px de large, et il fallait traiter les deux :
   1. la colonne de texte est un élément flex, dont la min-width vaut
      « auto » — soit la largeur de son mot le plus long. Elle refusait
      de rétrécir ; min-width:0 lève ce plancher.
   2. le bouton porte white-space:nowrap et un padding posé en style
      inline (donc non surchargeable depuis ici). On lui rend la place
      en resserrant la carte elle-même, plutôt qu'en se battant avec la
      spécificité. */
.software-card > div { min-width: 0; }
@media (max-width: 420px) {
  .software-card { padding: 18px 14px; gap: 14px; }
}
.software-card strong { display: block; color: var(--teal); }
.software-card small { color: var(--text-muted); line-height: 1.5; display: block; margin-top: 3px; font-size: .86rem; }

/* ---------- Cartes Pennylane / Silae, aux couleurs de chaque éditeur ----------
   Les deux logos sont utilisés avec l'autorisation des partenaires ; les
   couleurs ci-dessous sont relevées SUR LES FICHIERS EUX-MÊMES, pas au
   jugé — assets/logo-pennylane.png (bleu marine #2D4663 dominant, vert
   fluo #00F872 en accent) et assets/logo-silae.svg (fill="#D93914",
   vermillon, valeur unique du tracé).

   Les deux cartes reçoivent un traitement DIFFÉRENT plutôt qu'un même
   gabarit reteinté : Pennylane est l'outil du quotidien (facturation,
   trésorerie, tableaux de bord — c'est lui qui porte la carte "hero"
   sombre, dans l'esprit de .card-hero-blue déjà en usage sur le
   tableau de bord démo) ; Silae ne sert qu'à la paie, traitement plus
   sobre. Un même gabarit sur les deux aurait fait ressembler ça à un
   reskin plutôt qu'à une vraie identité de marque.

   CONTRASTES MESURÉS :
     blanc sur #2D4663 (fond de carte) ............ 9,69:1
     vert fluo #00F872 sur #1B2E44 (angle sombre) .. 9,65:1  (accent seul, jamais du texte : 1,43:1 sur blanc)
     vermillon #D93914 sur blanc ................... 4,62:1  (texte, seuil 4,5 — tout juste au-dessus)
     blanc sur #D93914 (bouton) .................... 4,62:1 */
.software-card--pennylane {
  background: linear-gradient(135deg, #1B2E44, #2D4663);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
/* Halo décoratif, dans le vert de marque : purement cosmétique, comme
   les halos déjà utilisés sur .card-hero-blue et le hero de l'accueil. */
.software-card--pennylane::after {
  content: "";
  position: absolute;
  top: -40%; right: -15%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: #00F872;
  opacity: .10;
  pointer-events: none;
}
.software-card--pennylane strong { color: #fff; }
.software-card--pennylane small { color: rgba(255, 255, 255, .78); }  /* 6,63:1 sur #2D4663 */
.software-card--pennylane .btn-secondary {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  position: relative;
  z-index: 1;
}
.software-card--pennylane .btn-secondary:hover {
  border-color: #00F872;
  background: rgba(0, 248, 114, .12);
  color: #fff;
}
/* Le logo Pennylane est lui-même bleu marine (voir capture ci-dessus) :
   posé tel quel sur une carte bleu marine, il disparaîtrait. Même
   principe que .video-facade__pastille, déjà en usage sur cette page
   pour ce même fichier. */
.software-card--pennylane .software-card__chip {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}
.software-card--pennylane .software-card__chip img { height: 40px; width: auto; }

.software-card--silae {
  border-top: 3px solid #D93914;
  padding-top: 22px;   /* compense l'épaisseur du filet */
}
.software-card--silae strong { color: #B02C0F; }  /* 6,54:1 sur blanc — plus sûr que le vermillon du logo (4,62:1) pour du texte */
.software-card--silae .btn-secondary:hover {
  border-color: #D93914;
  color: #B02C0F;
}

/* ---------- Cartes « À qui nous parlons » (photo + texte) ---------- */
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.persona {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  display: flex;
  flex-direction: column;
}
.persona:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-light); }
.persona-figure {
  aspect-ratio: 62 / 38;
  overflow: hidden;
  background: var(--mint-soft);
  flex-shrink: 0;
}
.persona-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.persona:hover .persona-figure img { transform: scale(1.06); }
.persona-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.persona h3 { font-size: 1.12rem; }
.persona p { color: var(--text-muted); font-size: .93rem; margin-top: 10px; flex: 1; }
.persona .card-link { margin-top: 18px; display: inline-block; }

/* ---------- Photos encadrées (hero, sections) ---------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.photo-frame img { display: block; width: 100%; height: auto; }
/* Voile très léger : lie la photo à la charte sans dénaturer les couleurs */
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(4,162,88,.05), rgba(23,56,58,.10));
  pointer-events: none;
}
/* Conteneur d'une photo + ses cartes flottantes */
.photo-block { position: relative; }

/* Carte de données flottante posée sur la photo */
.photo-badge {
  position: absolute;
  z-index: 2;
  /* Fond opaque : à 97 % d'opacité l'effet était déjà invisible, mais les
     outils d'audit ne peuvent pas calculer le contraste d'un texte posé
     sur un fond semi-transparent — ils signalent le bloc sans trancher. */
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.photo-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.photo-badge strong { display: block; font-size: .92rem; color: var(--teal); line-height: 1.3; }
.photo-badge small { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.photo-badge .big { font-size: 1.5rem; font-weight: 800; color: var(--teal); line-height: 1; }

/* Formes vertes floutées qui respirent derrière le hero */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .3;
  pointer-events: none;
  animation: float 14s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -22px) scale(1.06); }
}

/* ---------- Avis clients ---------- */
/* Filet de sécurité : un élément marqué « hidden » ne s'affiche jamais */
[hidden] { display: none !important; }

.avis-section {
  background: linear-gradient(180deg, var(--white), var(--mint-soft));
  border-top: 1px solid var(--border);
}
/* En-tête : titre à gauche, bloc note à droite */
.avis-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 52px;
}
.avis-entete h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  max-width: 660px;
}
.avis-entete h2 span { color: var(--green); }

.avis-note {
  flex-shrink: 0;
  text-align: right;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 26px;
}
.avis-note-source {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.01em;
}
.avis-note-source a { color: inherit; }
.avis-etoiles { display: flex; justify-content: flex-end; gap: 3px; margin: 8px 0 6px; }
.avis-etoiles svg { width: 18px; height: 18px; display: block; }
.avis-etoiles .plein svg { fill: var(--green); }
.avis-etoiles .vide svg  { fill: var(--border); }
.avis-note-detail { font-size: .84rem; color: var(--text-muted); }

/* Cartes de témoignages */
.avis-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.avis-carte {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.avis-carte:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.avis-quote { width: 34px; height: 34px; fill: var(--green); margin-bottom: 18px; flex-shrink: 0; }
.avis-carte blockquote {
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  font-size: .97rem;
  flex: 1;
}
.avis-carte figcaption {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.avis-nom { display: block; font-weight: 700; color: var(--teal); }
.avis-role,
.avis-entreprise { display: block; font-size: .87rem; color: var(--text-muted); margin-top: 2px; }

/* Boutons Google sous les témoignages */
.avis-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 44px; }
.avis-actions:empty { display: none; }

@media (max-width: 900px) {
  .avis-entete { flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 40px; }
  .avis-note { text-align: left; align-self: stretch; }
  .avis-etoiles { justify-content: flex-start; }
  .avis-grille { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .avis-grille { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Pages segment client ---------- */
/* Chiffre clé mis en avant dans le bloc « Repères du secteur » */
.ratio-valeur {
  display: block;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.ratio-source {
  display: block;
  margin-top: 14px;
  font-size: .74rem;
  color: var(--text-muted);
  font-style: italic;
}
/* Placeholder visible tant que le contenu n'est pas fourni */
.todo-contenu {
  grid-column: 1 / -1;
  background: #FDF6E7;
  border: 1px dashed #D9A441;
  border-radius: var(--radius);
  padding: 22px 26px;
  color: #8A6420;
  font-size: .92rem;
  line-height: 1.6;
}

/* ---------- Volet Conseil (pages missions) ---------- */
.conseil-section { background: linear-gradient(180deg, var(--white), var(--mint-soft)); }
.conseil-card { border-left: 4px solid var(--green); }
.conseil-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--white);
  background: var(--green-action);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ---------- Cartes de la page Nos Guides ---------- */
.guide-carte {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Repli neutre : une carte sans couleur déclarée reste cohérente. */
  --guide-accent: var(--green-dark);
  --guide-teinte: var(--mint-soft);
}
.guide-carte p { flex: 1; }
.guide-carte .btn { margin-top: 20px; align-self: flex-start; }

/* Filet coloré en tête de carte, un par secteur — reprend les teintes
   déjà en usage sur les pages segment (--accent de chaque page client),
   plutôt qu'une nouvelle palette : le lecteur qui a déjà visité
   « Informatique » ou « Hôtellerie & Restauration » retrouve la même
   couleur ici. CONTRASTES MESURÉS (icône sur sa pastille à 13 % de
   la couleur, seuil graphique 3:1) :
     Créer son entreprise   #048346 sur pastille .... 4,06
     Prestataire indép.     #036B39 .................. 5,44
     Hôtellerie & Resto     #8F4A22 .................. 5,44
     Informatique           #1A5A7A .................. 6,17
     Investisseur immo.     #10514A .................. 7,34
     Profession libérale    #5B4A7A .................. 6,34
     Holding patrimoniale   #3D4F63 .................. 6,85
   #04A258 (vert du logo) avait été le premier choix pour « Créer son
   entreprise » mais ne passait pas (2,87) : remplacé par #048346,
   déjà en usage ailleurs sur le site (boutons). */
.guide-carte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--guide-accent);
}
.guide-carte--creation      { --guide-accent: #048346; --guide-teinte: #E3F3EA; }
.guide-carte--independant   { --guide-accent: #036B39; --guide-teinte: #E1F0E7; }
.guide-carte--hotellerie    { --guide-accent: #8F4A22; --guide-teinte: #F5E9E1; }
.guide-carte--informatique  { --guide-accent: #1A5A7A; --guide-teinte: #E4EEF3; }
.guide-carte--immobilier    { --guide-accent: #10514A; --guide-teinte: #E1EEEC; }
.guide-carte--liberale      { --guide-accent: #5B4A7A; --guide-teinte: #ECE7F1; }
.guide-carte--holding       { --guide-accent: #3D4F63; --guide-teinte: #E5E9EE; }

.guide-carte__icone {
  position: absolute;
  top: 18px; left: 18px;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--guide-teinte);
  color: var(--guide-accent);
  display: grid;
  place-items: center;
  z-index: 1;
}
.guide-carte__icone svg { width: 18px; height: 18px; }

/* Carte seule sur sa dernière ligne (7 cartes dans une grille à 3
   colonnes → la 7e se retrouve seule, plaquée à gauche par défaut).
   :nth-child(3n+1) ne vaut QUE pour le premier élément d'une ligne ;
   combiné à :last-child, la règle ne peut matcher que si CE premier
   élément est aussi le dernier de la liste — donc seul quand le total
   vaut 3n+1 (7, 10, 13…). Si un 8e guide s'ajoute un jour, la règle
   cesse de s'appliquer d'elle-même : rien à recalculer à la main. */
#liste-guides .guide-carte:last-child:nth-child(3n+1) {
  grid-column: 2;
}
@media (max-width: 900px) {
  /* La grille repasse à une colonne : la règle ci-dessus n'a alors
     plus de deuxième colonne où se placer. On la neutralise pour
     éviter tout comportement de repli imprévisible du moteur. */
  #liste-guides .guide-carte:last-child:nth-child(3n+1) { grid-column: auto; }
}

/* Couverture du guide, présentée comme un livre légèrement incliné —
   même traitement que le bloc « guide » de l'accueil, dont ces cartes
   reprennent le principe.

   Les images sont produites par outils\generer-couvertures.ps1 : ce sont
   les vraies pages 1 des PDF, photographiées. Une couverture redessinée
   à la main aurait divergé du document dès la première correction.

   Le rapport 660/933 est celui du fichier : en le fixant ici, la carte
   réserve la bonne hauteur avant même que l'image arrive, et la page ne
   sursaute pas au chargement. */
.guide-carte__cover {
  width: 62%;
  max-width: 220px;
  margin: 2px auto 20px;
  perspective: 700px;
}
.guide-carte__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 660 / 933;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(23, 56, 58, .22);
  transform: rotate(-2.5deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.guide-carte:hover .guide-carte__cover img,
.guide-carte:focus-within .guide-carte__cover img {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 40px rgba(23, 56, 58, .3);
}
@media (prefers-reduced-motion: reduce) {
  .guide-carte__cover img,
  .guide-carte:hover .guide-carte__cover img,
  .guide-carte:focus-within .guide-carte__cover img { transform: none; transition: none; }
}
.guide-format {
  display: inline-block;
  /* ⚠ .guide-carte est un flex en colonne sans align-items : ses enfants
     s'étirent donc sur toute la largeur, et « inline-block » n'y change
     rien. Sans ce align-self, la pastille s'affichait en bandeau d'un
     bord à l'autre de la carte. Le bouton, lui, avait déjà le sien. */
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue);
  background: #E8F0F4;
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.guide-bientot {
  display: inline-block;
  margin-top: 20px;
  font-size: .84rem;
  font-style: italic;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 100px;
  padding: 8px 16px;
}

/* ---------- Bloc « Téléchargez notre guide » (composant unique) ---------- */
.guide-cta { background: linear-gradient(160deg, var(--mint-soft), var(--mint)); border-top: 1px solid var(--border); }
.guide-cta-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.guide-cta-visuel { flex: 0 0 90px; }
.guide-cta-visuel svg {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  transform: rotate(-3deg);
  transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}
.guide-cta-inner:hover .guide-cta-visuel svg { transform: rotate(0) translateY(-4px); }
.guide-cta-texte { flex: 1; min-width: 0; }
.guide-cta-texte h2 { font-size: 1.35rem; }
.guide-cta-texte p { color: var(--text-muted); margin-top: 10px; font-size: .95rem; }
.guide-cta-action { flex-shrink: 0; text-align: center; }
.guide-cta-action .card-link { display: block; margin-top: 14px; font-size: .86rem; }

@media (max-width: 900px) {
  .guide-cta-inner { flex-direction: column; text-align: center; gap: 24px; padding: 32px 24px; }
  .guide-cta-action { width: 100%; }
  .guide-cta-action .btn { width: 100%; justify-content: center; }
}

/* ---------- Fenêtre d'accès aux simulateurs ---------- */
.sim-modal {
  position: fixed;
  inset: 0;
  /* Au-dessus de tout, bandeau cookies compris (999) */
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 56, 58, .62);
  backdrop-filter: blur(4px);
}
.sim-modal.open { display: flex; }
.sim-modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px 38px 34px;
  position: relative;
  text-align: center;
  animation: simIn .28s cubic-bezier(.22,.9,.36,1);
}
@keyframes simIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.sim-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  transition: background .2s, color .2s;
}
.sim-modal-close:hover { background: var(--mint-soft); color: var(--teal); }
.sim-modal-icon {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--green), var(--green-light));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(4,162,88,.28);
}
.sim-modal-icon svg { width: 27px; height: 27px; stroke: #fff; }
.sim-modal-box h2 { font-size: 1.4rem; line-height: 1.3; }
.sim-modal-sim {
  display: block;
  margin-top: 10px;
  font-size: .92rem;
  color: var(--text-muted);
}
.sim-modal-sim strong { color: var(--green-dark); }
.sim-modal form { margin-top: 26px; text-align: left; }
.sim-modal .form-field { margin-bottom: 18px; }
.sim-modal .rgpd-note {
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 4px 0 20px;
}
.sim-modal .btn { width: 100%; justify-content: center; }
.sim-modal-skip {
  display: block;
  margin-top: 16px;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-decoration: underline;
}
.sim-modal-skip:hover { color: var(--green-dark); }

@media (max-width: 560px) {
  .sim-modal-box { padding: 34px 24px 28px; }
  .sim-modal-box h2 { font-size: 1.2rem; }
}

/* ---------- Page simulateurs ----------
   Les douze cartes étaient rigoureusement identiques : même fond blanc,
   même pastille bleue, même bouton. La page se lisait comme une liste
   sans relief. La couleur y sert donc à quelque chose — elle classe.

   QUATRE FAMILLES, quatre accents. Le filet du haut et la pastille de
   l'icône portent la couleur ; l'étiquette de source, elle, reste grise
   car elle dit AUTRE CHOSE (qui édite le simulateur, pas de quoi il
   parle). Mélanger les deux sur la même couleur brouillerait le sens.

   CONTRASTES MESURÉS (icône sur sa pastille, seuil graphique 3:1 ;
   accent sur la carte blanche, seuil 4,5:1) :
     fiscal      #036B39 sur #E4F2EA .... 5,74  /  6,63 sur blanc
     social      #1F5A75 sur #E6F0F5 .... 6,53  /  7,56
     statut      #9C4718 sur #FAEBE1 .... 5,42  /  6,31
     patrimoine  #3A4A8C sur #EBEDF8 .... 7,09  /  8,27
   Ces valeurs sont calculées, pas estimées : si vous changez un accent,
   recalculez avant de publier. */
.sim-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  /* Accent par défaut : une carte sans famille reste lisible. */
  --sim-accent: var(--green-dark);
  --sim-teinte: var(--mint-soft);
}
/* Filet coloré en haut de carte. En ::before plutôt qu'en border-top :
   une bordure décalerait le contenu de 3 px sur ces seules cartes. */
.sim-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sim-accent);
}
.sim-card--fiscal     { --sim-accent: #036B39; --sim-teinte: #E4F2EA; }
.sim-card--social     { --sim-accent: #1F5A75; --sim-teinte: #E6F0F5; }
.sim-card--statut     { --sim-accent: #9C4718; --sim-teinte: #FAEBE1; }
.sim-card--patrimoine { --sim-accent: #3A4A8C; --sim-teinte: #EBEDF8; }

.sim-icone {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--sim-teinte);
  color: var(--sim-accent);
  display: grid; place-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sim-icone svg { width: 21px; height: 21px; }

.sim-source {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #55655F;                 /* 5,45:1 sur la teinte ci-dessous */
  background: #EEF2F0;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.sim-card h3 { font-size: 1.05rem; }
.sim-card p { flex: 1; font-size: .9rem; }
.sim-card .btn { margin-top: 18px; padding: 10px 18px; font-size: .86rem; }
/* Le bouton prend l'accent de sa famille au survol et au focus.
   Le focus est inclus volontairement : au clavier, rien ne signalerait
   sinon quelle carte est active. */
.sim-card .btn-secondary:hover,
.sim-card .btn-secondary:focus-visible {
  border-color: var(--sim-accent);
  color: var(--sim-accent);
}
.sim-card:hover { border-color: var(--sim-accent); }

/* ---------- FAQ (accordéon) ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 600;
  color: var(--teal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green-dark); }
.faq-item .faq-body { padding: 0 24px 20px; color: var(--text-muted); line-height: 1.65; font-size: .95rem; }

/* Bloc capture guide */
.lead-magnet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  overflow: hidden;
}
.lead-magnet-info {
  background: linear-gradient(150deg, var(--teal), var(--teal-2));
  color: #E8F3EE;
  padding: 48px 42px;
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0; /* sans quoi le contenu élargit la colonne de grille sur mobile */
}
.lead-magnet-info > div { min-width: 0; }

.lead-magnet-info .section-tag { white-space: nowrap; }

/* Couverture du guide, présentée comme un livre légèrement incliné */
.lm-cover { flex: 0 0 152px; }
.lm-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(0,0,0,.42);
  transform: rotate(-3deg);
  transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}
.lead-magnet:hover .lm-cover img { transform: rotate(0deg) translateY(-6px); }
.lead-magnet-info h2 { color: #fff; font-size: 1.6rem; }
.lead-magnet-info p { color: rgba(232,243,238,.85); margin-top: 14px; }
.lead-magnet-info ul { margin-top: 20px; }
.lead-magnet-info li { padding-left: 30px; position: relative; margin-bottom: 10px; font-size: .93rem; }
.lead-magnet-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.lead-magnet-form { padding: 48px 42px; min-width: 0; }
.lead-magnet-form h3 { margin-bottom: 20px; }

/* ---------- Coordonnées ---------- */
.contact-band { background: var(--mint-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card { text-align: center; padding: 36px 24px; }
.contact-card .icon-badge { margin: 0 auto 4px; }
.contact-card a { font-weight: 600; color: var(--teal); font-size: 1.02rem; }
.contact-card a:hover { color: var(--green-dark); }
.contact-card p { font-size: .88rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal); color: rgba(232,243,238,.75); font-size: .92rem; }

/* Coordonnées : le pied de page ne portait que des liens de navigation.
   Un visiteur décidé y cherche pourtant le téléphone, et les moteurs
   l'adresse de l'établissement. */
/* Coordonnées : une seule ligne horizontale, en dehors des colonnes.
   Placées dans la colonne de marque, elles la rendaient bien plus haute
   que les trois autres et déséquilibraient tout le pied de page. */
.footer-coords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .87rem;
}
.footer-coords li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(232, 243, 238, .82);
}
.footer-coords svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--green-light);
}
.footer-coords a { color: #fff; font-weight: 600; }
.footer-coords a:hover { color: var(--green-clair-texte); }

/* Pied de page resserré : les quatre colonnes ont désormais des hauteurs
   comparables, l'espacement peut donc être réduit sans paraître tassé. */
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0 34px;
}
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 12px; }
.footer-brand p { margin-top: 8px; max-width: 280px; font-size: .88rem; line-height: 1.55; }
.site-footer h4 { color: #fff; font-size: .85rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.footer-main li { margin-bottom: 8px; font-size: .88rem; }
.site-footer a { color: rgba(232,243,238,.75); }
.site-footer a:hover { color: var(--green-clair-texte); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .84rem;
}
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Bandeau cookies ---------- */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  z-index: 300;
  display: none;
}
.cookie-banner.visible { display: block; }
.cookie-banner p { font-size: .88rem; color: var(--text-muted); margin-bottom: 16px; }
.cookie-banner p strong { color: var(--teal); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 10px 20px; font-size: .86rem; }

/* ---------- Page interne : bannière ---------- */
/* ---------- En-tête des pages intérieures ----------
   L'ancienne version était un bandeau quasi blanc : propre, mais qui
   n'annonçait rien. On lui donne de la matière — une teinte franche, un
   filet vert en haut, un motif discret — sans alourdir la lecture.     */
.page-hero {
  position: relative;
  padding: 78px 0 70px;
  background:
    radial-gradient(ellipse at 88% 10%, rgba(4, 162, 88, .16), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(44, 110, 140, .10), transparent 55%),
    linear-gradient(180deg, #F2F9F5, var(--bg));
  border-bottom: 1px solid var(--mint);
  overflow: hidden;
}
/* ---------- Accent propre à chaque secteur ----------
   Chaque page client pose son accent sur <main> :   style="--accent:#1A5A7A"
   Il colore le filet du haut, les étiquettes de section et les grands
   chiffres. Les six pages deviennent une famille d'individus au lieu de
   six pages interchangeables. Partout ailleurs, --accent n'existe pas et
   la valeur de repli (le vert du cabinet) s'applique.
   Les six teintes ont été vérifiées : toutes au-dessus de 5,9 sur les
   fonds clairs du site, largement au-delà des 4,5 exigés. */
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--accent, var(--green)) 0%,
    var(--accent, var(--green)) 38%,
    var(--green-light) 72%,
    var(--blue) 100%);
}
/* Le halo de l'en-tête reprend l'accent, très dilué. */
.page-hero--illustre { background-image:
    radial-gradient(ellipse at 88% 10%, rgba(4, 162, 88, .16), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(44, 110, 140, .10), transparent 55%),
    linear-gradient(180deg, #F2F9F5, var(--bg)); }

main[style*="--accent"] .section-tag { color: var(--accent); border-color: currentColor; }
main[style*="--accent"] .ratio-valeur { color: var(--accent); }
/* Les pastilles numérotées du déroulé suivent l'accent de la page.
   Fond coloré sous du blanc : c'est un contraste de texte, donc 4,5:1
   minimum — vérifié pour les cinq accents en service. */
main[style*="--accent"] .step-num { background: var(--accent); }
main[style*="--accent"] .page-hero__photo::after {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0) 40%, var(--accent) 190%);
  opacity: .5;
}
/* Trame discrète, purement décorative */
.page-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 44px solid rgba(4, 162, 88, .06);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .breadcrumb { font-size: .85rem; color: var(--text-muted); margin-bottom: 18px; }

/* En-tête illustré : le texte à gauche, une photo du secteur à droite.
   Chaque page client gagne ainsi une identité immédiate, là où toutes
   ouvraient sur le même bandeau de texte. */
.page-hero__grille {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}
.page-hero__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(23, 56, 58, .22);
  /* Le rapport est impose ici : les photos n'ont pas toutes le meme
     cadrage d'origine, object-fit se charge du recadrage. */
  aspect-ratio: 4 / 3;
  background: var(--mint);
}
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Voile vert très léger : rattache la photo à la palette du site. */
.page-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(4, 162, 88, .12), rgba(23, 56, 58, .18));
  pointer-events: none;
}
/* ---------- Visuel interactif en en-tête de page ----------
   Variante de .page-hero__photo qui accueille le tableau de bord
   manipulable (voir _source/gabarits/visuel-tableau-interactif.html).

   Volontairement SANS les trois réglages de .page-hero__photo :
   - pas d'aspect-ratio 4/3 : le graphique a ses propres proportions et
     un recadrage lui couperait des barres ;
   - pas de voile coloré : il passerait par-dessus les valeurs à lire, et
     un ::after en inset:0 avale les clics — or ce bloc se manipule ;
   - pas d'overflow:hidden : l'anneau de focus des barres, posé en
     outline-offset, serait rogné au bord du cadre. */
.page-hero__visuel { position: relative; margin: 0; }
.page-hero__visuel .hero-tableau {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 50px rgba(23, 56, 58, .22);
}

.page-hero--illustre .lead { max-width: none; }

/* Exemple chiffré (dashboard) inséré dans une grille grid-2 : contrairement
   à .page-hero__photo, on ne recadre pas — le contenu est du texte à lire
   en entier. On élargit sa colonne (au lieu du 1fr/1fr par défaut) pour
   lui donner plus de place qu'à une simple photo. */
.grid-2--exemple { grid-template-columns: .8fr 1.2fr; }
.exemple-dashboard-col { display: flex; justify-content: center; }
.exemple-dashboard {
  margin: 0;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.exemple-dashboard img { display: block; width: 100%; height: auto; }
.exemple-dashboard figcaption {
  padding: 14px 22px;
  background: var(--teal);
  color: var(--mint);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
/* En dessous de 900px, .grid-2 repasse déjà en une colonne (règle plus bas) :
   .grid-2--exemple hérite du même comportement, rien à ajouter ici. */

@media (max-width: 900px) {
  .page-hero__grille { grid-template-columns: 1fr; gap: 32px; }
  .page-hero__photo { aspect-ratio: 16 / 9; }
}
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--green-dark); }
.page-hero p.lead { font-size: 1.1rem; color: var(--text-muted); max-width: 680px; margin-top: 18px; }

/* ---------- Divers ---------- */
.prose h2 { margin: 40px 0 16px; }
.prose h3 { margin: 28px 0 12px; }
.prose p { margin-bottom: 16px; color: var(--text-muted); }
.prose ul { margin: 0 0 16px; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--text-muted); }
.prose li::before { content: "•"; position: absolute; left: 8px; color: var(--green-dark); font-weight: 700; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ---------- Bandeau vidéo pleine largeur (accueil) ----------
   Grand bandeau sombre : surtitre, titre, sous-titre, vidéo, boutons.
   La vidéo n'est PAS en arrière-plan : elle porte déjà son propre texte,
   qui percuterait celui posé par-dessus. Elle reste donc nette et
   centrée, dans son cadre.                                            */
.video-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--teal);
}

/* Halo coloré tiré de l'image d'attente : donne de la profondeur au
   fond sans faire tourner un second décodage vidéo. */
.video-hero__halo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(170deg, rgba(23, 56, 58, .88) 0%, rgba(23, 56, 58, .96) 100%),
    url('../assets/video/pgacompta-presentation-poster.jpg') center / cover no-repeat;
  filter: blur(26px);
  transform: scale(1.2);   /* repousse hors cadre les bords délavés par le flou */
}

.video-hero__contenu {
  position: relative;   /* passe au-dessus du halo */
  width: 100%;
  padding: 88px 0;
  text-align: center;
  color: #fff;
}

/* Cadre de la vidéo : centré, format 16/9 préservé. */
.video-hero__cadre {
  max-width: 1000px;
  margin: 44px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4);
  background: #0d2426;
  line-height: 0;   /* supprime l'espace sous les éléments en ligne */
}
.video-hero__cadre video { display: block; width: 100%; height: 100%; border: 0; }

/* ⚠ NE PAS remettre height:100% sur l'iframe. Un <iframe> n'a aucun rapport
   d'image intrinsèque, et le cadre n'a pas de hauteur propre : c'est la
   façade et son aspect-ratio qui la lui donnaient. Une fois la façade
   remplacée par le lecteur, le 100% ne se rapportait plus à rien et l'iframe
   retombait sur la hauteur par défaut des éléments remplacés — 150 px.
   La vidéo s'affichait alors en timbre-poste au centre d'une bande plate.
   aspect-ratio rend au lecteur le 16/9 de la façade qu'il remplace. */
.video-hero__cadre iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- Façade de vidéo YouTube (chargement au clic) ----------
   Ce bloc REMPLACE le lecteur tant que le visiteur n'a pas cliqué.
   Il n'émet aucune requête vers Google : logo et styles sont locaux.
   aspect-ratio réserve la place exacte du futur lecteur, pour que la
   page ne saute pas à l'instant où l'iframe prend sa place.          */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 38%, rgba(4, 162, 88, .22) 0%, rgba(4, 162, 88, 0) 62%),
    linear-gradient(160deg, #17383a 0%, #0d2426 100%);
}

/* Pastille claire : le logo Pennylane est bleu nuit et vert, illisible
   tel quel sur ce fond sombre. On lui donne un support clair plutôt que
   de le recolorer, ce qui dénaturerait la marque de notre partenaire. */
.video-facade__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.video-facade__logo {
  width: auto;
  height: 54px;   /* ratio d'origine 500×574 conservé */
  display: block;
}

.video-facade__lecture {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--green-action);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(4, 162, 88, .5);
  transition: transform .22s ease, background .22s ease;
}
.video-facade__lecture svg { width: 32px; height: 32px; margin-left: 4px; }
.video-facade:hover .video-facade__lecture { transform: scale(1.08); background: var(--green-dark); }

.video-facade__titre { color: #fff; font-size: 1.12rem; font-weight: 600; }

.video-facade__mention {
  max-width: 430px;
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
  line-height: 1.5;
}

.video-hero__surtitre {
  display: inline-block;
  margin-bottom: 20px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-clair-texte);
}

.video-hero__contenu h2 {
  margin: 0 auto 20px;
  max-width: 860px;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.video-hero__contenu > .container > p {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(255, 255, 255, .88);
  font-size: 1.06rem;
  line-height: 1.65;
}

.video-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* Bouton clair sur fond sombre : le .btn-secondary du site est prévu
   pour les fonds clairs et deviendrait illisible ici. */
.video-hero__btn-clair {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(4px);
}
.video-hero__btn-clair:hover {
  background: #fff;
  color: var(--teal);
  border-color: #fff;
}

@media (max-width: 720px) {
  .video-hero__contenu { padding: 60px 0; }
  .video-hero__cadre { margin-top: 30px; }
  .video-hero__actions .btn { width: 100%; max-width: 300px; }
  .video-facade { gap: 12px; padding: 18px; }
  .video-facade__pastille { width: 58px; height: 58px; border-radius: 15px; }
  .video-facade__logo { height: 40px; }
  .video-facade__lecture { width: 58px; height: 58px; }
  .video-facade__lecture svg { width: 25px; height: 25px; }
  .video-facade__titre { font-size: .98rem; }
  .video-facade__mention { font-size: .72rem; }
}

/* ============================================================
   CARTES OBJECTIF QUI SE RETOURNENT (Accompagnement & Pilotage)
   ------------------------------------------------------------
   Recto : le mot-clé sur une image. Verso : ce qu'on met derrière.

   La carte entière est un <a> : le survol ET le focus clavier
   déclenchent la bascule, et un clic n'importe où mène à la page.
   Le verso ne contient donc aucun lien propre — sans quoi il serait
   inatteignable au clavier tant que la carte n'est pas retournée.
   ============================================================ */
.objectifs-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.objectif {
  perspective: 1400px;
  display: block;
  color: inherit;
  border-radius: var(--radius-lg);
}
.objectif:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 4px; }

.objectif__inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}

.objectif__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* backface-visibility masque la face qui tourne le dos au visiteur.
     Sans elle, les deux textes se superposeraient en transparence. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(23, 56, 58, .16);
}

/* ---------- Recto ---------- */
.objectif__face--recto {
  justify-content: flex-end;
  padding: 26px;
  /* Repli quand aucune photo n'est fournie : la carte reste présentable. */
  background: linear-gradient(150deg, var(--accent, var(--teal)), var(--teal) 130%);
}
.objectif__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile sombre : le mot-clé doit rester lisible quelle que soit la photo.
   Les opacités sont calculées sur l'hypothèse la plus défavorable — une
   photo entièrement blanche sous le voile. Dans ce cas de pire :
     — à hauteur du numéro (~70 % de la carte), voile à .76 → ~7:1
     — à hauteur du titre  (~80 % de la carte), voile à .81 → ~8:1
   Sur une photo réelle, toujours plus sombre que du blanc, le contraste
   ne peut être que meilleur. Ne pas alléger ces valeurs sans refaire
   le calcul : le titre passerait sous le seuil AA. */
.objectif__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 32, 33, .20) 0%, rgba(11, 32, 33, .62) 45%, rgba(11, 32, 33, .92) 100%),
    linear-gradient(150deg, transparent 30%, var(--accent, var(--teal)) 165%);
}
.objectif__contenu { position: relative; z-index: 1; }
.objectif__numero {
  display: inline-block;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.objectif__titre {
  display: block;
  color: #fff;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.objectif__invite {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-light);
}
.objectif__invite svg { width: 15px; height: 15px; }

/* ---------- Verso ---------- */
.objectif__face--verso {
  transform: rotateY(180deg);
  justify-content: center;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent, var(--green));
}
.objectif__verso-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, var(--green-dark));
  margin-bottom: 12px;
}
.objectif__verso-titre { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.objectif__texte { font-size: .93rem; line-height: 1.6; color: var(--text-muted); }
.objectif__lien {
  margin-top: 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent, var(--green-dark));
}

/* ---------- Variante sans photo ----------
   Le bloc « Ce que nous mettons en place » n'a pas d'image par carte :
   le recto est un aplat de l'accent de la page, avec l'icône et le titre.
   Ces cartes ne sont pas des liens — elles portent tabindex="0" pour que
   le clavier puisse les retourner comme la souris. */
.objectif--icone .objectif__inner { aspect-ratio: 4 / 3; }
.objectif--icone .objectif__face--recto {
  justify-content: center;
  padding: 28px 26px;
}
.objectif--icone .objectif__icone {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.objectif--icone .objectif__icone svg { width: 24px; height: 24px; stroke: #fff; }
.objectif--icone .objectif__titre { font-size: 1.1rem; }
.objectif--icone .objectif__face--verso { justify-content: center; }
.objectif--icone .objectif__texte { font-size: .95rem; }
/* Repère discret : quelque chose se cache au dos. */
.objectif--icone .objectif__face--recto::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- La bascule ----------
   Réservée aux appareils qui savent vraiment survoler. Sur un écran
   tactile, :hover se déclenche au premier appui et reste collé : la carte
   resterait retournée jusqu'au prochain appui ailleurs. */
@media (hover: hover) and (pointer: fine) {
  .objectif:hover .objectif__inner,
  .objectif:focus-visible .objectif__inner { transform: rotateY(180deg); }
  .objectif:hover .objectif__face { box-shadow: 0 22px 48px rgba(23, 56, 58, .24); }
}

/* Sans survol (tactile) : pas de rotation. Les deux faces s'empilent,
   l'image au-dessus du texte — une carte classique, entièrement lisible
   sans interaction. */
@media not all and (hover: hover) {
  .objectif__inner { aspect-ratio: auto; transform: none; }
  .objectif__face {
    position: static;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
  }
  .objectif__face--recto {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .objectif__face--verso {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none;
    padding: 22px 24px 26px;
  }
  .objectif__invite { display: none; }
  .objectif {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(23, 56, 58, .14);
    border: 1px solid var(--border);
  }
}

/* Mouvement réduit : on garde la bascule, on retire l'animation. */
@media (prefers-reduced-motion: reduce) {
  .objectif__inner { transition: none; }
}

@media (max-width: 980px) {
  .objectifs-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .objectifs-grille { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   INVITE VERS L'ASSISTANT DE DISCUSSION (accueil uniquement)
   ------------------------------------------------------------
   Le bouton rond appartient à Botpress : il est rendu dans son
   propre conteneur et nous ne pouvons pas le styler. On pose donc
   une bulle À CÔTÉ, qui pointe vers lui.
   z-index 280 : au-dessus de la page, sous le bandeau de
   consentement (300) qui doit rester prioritaire.
   ============================================================ */
/* Conteneur NEUTRE : ni rôle, ni gestionnaire de clic. Il ne contient que
   deux vrais boutons, côte à côte et sans recouvrement.
   ⚠ Ne pas le rendre cliquable : deux zones tactiles imbriquées violent
   la règle de taille des cibles, l'exception d'espacement ne s'appliquant
   qu'à des cibles distinctes. */
.invite-chat {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 280;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 280px;
  padding: 12px 12px 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-action);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(23, 56, 58, .22);
  /* Masquée tant que le script ne l'a pas révélée */
  opacity: 0;
  transform: translateY(10px) scale(.96);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.invite-chat.visible { opacity: 1; transform: none; pointer-events: auto; }
.invite-chat:hover { box-shadow: 0 20px 46px rgba(23, 56, 58, .28); }

/* Bouton d'ouverture : occupe tout le texte, sans mordre sur la croix. */
.invite-chat__ouvrir {
  flex: 1;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.invite-chat__ouvrir strong { display: block; margin-bottom: 2px; color: var(--teal); }
.invite-chat__ouvrir span { color: var(--text-muted); font-size: .84rem; }
.invite-chat__ouvrir:focus-visible,
.invite-chat__fermer:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; border-radius: 8px; }

/* Croix de fermeture : 30 px, au-dessus du minimum de 24 exigé pour une
   zone tactile. Elle en faisait 22, ce que l'audit signalait. */
.invite-chat__fermer {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.invite-chat__fermer:hover { background: var(--mint); color: var(--teal); }

/* Petite flèche qui désigne le bouton de discussion, en bas à droite. */
.invite-chat::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

/* Respiration discrète, pour attirer l'œil sans agiter la page. */
@keyframes invite-respire {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-4px); }
}
.invite-chat.visible { animation: invite-respire 3.2s ease-in-out 1.2s 3; }

@media (max-width: 620px) {
  /* On resserre la bulle, jamais la croix : sa taille est un minimum
     d'accessibilité, pas une variable de mise en page. */
  .invite-chat { right: 16px; bottom: 88px; max-width: 232px; padding: 10px 10px 10px 14px; }
  .invite-chat__ouvrir { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-chat { transition: none; animation: none; }
}

/* Animations d'apparition */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Apparition en cascade : chaque enfant arrive légèrement après le précédent */
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .20s; }
.stagger.in > *:nth-child(4) { transition-delay: .28s; }
.stagger.in > *:nth-child(5) { transition-delay: .36s; }
.stagger.in > *:nth-child(6) { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  .card:hover, .card:hover .icon-badge, .persona:hover { transform: none; }
  .blob { animation: none; }
  html { scroll-behavior: auto; }
}

/* Accessibilité : focus visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(4,162,88,.5);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .steps, .steps.steps-4 { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* ---------- Menu burger : dès 1250 px ----------
   En dessous de cette largeur, les 5 entrées du menu ne tiennent plus sur
   une ligne sans chevaucher les boutons Contact et téléphone.

   ⚠ Seuil relevé de 1150 à 1250 px le 11/08/2026, quand « Missions &
   Conseils » est devenu « Accompagnement & Pilotage ». Mesuré à 1160 px
   avec l'ancien seuil : le header débordait de 25 px et la page défilait
   de 10 px horizontalement. L'entrée la plus large fait à elle seule
   236 px, et le menu complet 666 px.
   Si un libellé de menu s'allonge encore, remesurer et relever d'autant —
   et penser à ajuster window.matchMedia dans js/main.js, qui doit rester
   le complément exact de cette requête. */
@media (max-width: 1250px) {
  .burger { display: flex; }

  /* ⚠ NE PAS repasser cette barre en position:sticky.
     Mesuré sur cette page, à 375 px de large et 1200 px de défilement :
       — sticky seul .................... header collé à 0 px  ✔
       — sticky + verrou de défilement ... header retombé à −1200 px ✘
     Le verrou met overflow:hidden sur <html>, ce qui supprime le conteneur
     de défilement dont sticky a besoin : la barre décrochait, emportant la
     croix de fermeture hors de l'écran. Menu ouvert, plus rien pour refermer.
     Le même overflow-x:hidden casse d'ailleurs sticky en permanence sous iOS.
     position:fixed ne dépend d'aucun conteneur : la barre — donc la croix —
     reste à l'écran quel que soit le défilement. Le padding sur <body>
     rend la hauteur que la barre ne prend plus dans le flux. */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  /* +1px : --header-h est la hauteur de .header-inner, à laquelle s'ajoute
     le filet inférieur de la barre. Mesuré : barre 79 px. Sans ce pixel,
     la première ligne de contenu passait dessous. */
  body { padding-top: calc(var(--header-h) + 1px); }

  /* La barre couvre désormais le haut de l'écran : sans cette marge, une
     ancre (#main du lien d'évitement, notamment) se calerait dessous. */
  :target { scroll-margin-top: calc(var(--header-h) + 12px); }

  /* La surcharge qui neutralisait ici le backdrop-filter a été retirée :
     la règle de base n'en pose plus du tout. L'avertissement complet est
     désormais sur .site-header, là où la tentation de le remettre existe. */

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    padding: 24px;
    margin-left: 0;
    /* ⚠ NE PAS revenir à un translateX(100%) pour masquer ce panneau.
       Mesuré : poussé hors de l'écran, il ajoutait 375 px de défilement
       horizontal à la page — on pouvait faire glisser le site vers la
       droite et apercevoir le menu, « Le Cabinet » en tête.
       Un fondu ne déplace rien : aucun débordement n'est possible.
       Le léger mouvement vertical reste, lui, dans le cadre. */
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; }
  .dropdown {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--mint);
    border-radius: 0;
    margin: 4px 0 8px 12px;
    padding: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    display: none;
  }
  .nav-item.open > .dropdown { display: block; visibility: visible; }
  /* Les sous-entrées reprennent la mise en page verticale du panneau :
     sans cela elles gardent la grille pensée pour le menu déroulant du
     bureau et débordent de la colonne. */
  .dropdown a { padding: 12px 14px; }
  .dropdown a small { white-space: normal; }
  /* Contact et téléphone restent visibles : ce sont les deux appels à l'action */
  .btn-contact-header { padding: 9px 16px; }
}

/* ---------- Petits écrans : la barre du haut doit tenir ----------
   Mesuré à 375 px : le logo, le bouton Contact, le numéro écrit en
   toutes lettres et le burger réclamaient 8 px de plus que l'écran.
   D'où une page qui se décalait vers la droite.
   Le numéro passe donc en pictogramme seul : le bouton appelle
   toujours, et son aria-label continue d'annoncer le numéro complet. */
@media (max-width: 620px) {
  .header-inner { gap: 10px; }
  .header-cta { gap: 8px; }
  .btn-tel-header { padding: 9px; border-radius: 50%; }
  .btn-tel-header span { display: none; }
  .btn-contact-header { padding: 9px 14px; }
  .brand img { width: 40px; height: 40px; }
  .brand-name { font-size: 1.1rem; }
}

@media (max-width: 380px) {
  /* Sur les plus petits téléphones, le nom du cabinet cède la place :
     le logo seul reste identifiable et ramène à l'accueil. */
  .brand-name { display: none; }
}

@media (max-width: 900px) {
  section { padding: 60px 0; }

  .hero { padding: 56px 0; }
  .hero-grid, .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .grid-3 { grid-template-columns: 1fr; }
  .personas { grid-template-columns: 1fr; gap: 42px; }
  .contact-cards { grid-template-columns: 1fr; }
  .lead-magnet { grid-template-columns: 1fr; }
  .lead-magnet-info, .lead-magnet-form { padding: 36px 26px; }
  /* Les cartes de données reviennent sous la photo : pas de débordement sur petit écran.

     ⚠ « position: relative » et NON « static ». La marge négative fait
     remonter la carte de 30 px sur la photo, à dessein. Mais z-index n'a
     aucun effet sur un élément statique : le « z-index: 2 » de la règle
     de base devenait lettre morte, et .photo-frame — qui est en
     position: relative — se peignait PAR-DESSUS la carte. Résultat sur
     téléphone : les 30 px du haut de la carte disparaissaient derrière
     la photo, et le titre « Bilan présenté et expliqué » était coupé.
     En relative la carte reste au même endroit dans le flux, mais son
     z-index redevient actif et elle repasse au premier plan. */
  .photo-badge {
    position: relative;
    max-width: none;
    margin: -30px 18px 0;
  }
  .lead-magnet-info { flex-direction: column; gap: 28px; text-align: center; }
  .lm-cover { flex: 0 0 auto; width: 168px; }
  .lead-magnet-info ul { text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .steps, .steps.steps-4 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; }
  .hero-trust { gap: 22px; }
  .brand-name { font-size: 1.05rem; }
  .btn-espace span { display: none; }
  .btn-contact-header { padding: 8px 12px; font-size: .82rem; }
  .header-inner { gap: 14px; }
  /* Petit écran : le bouton téléphone se réduit à son icône, mais reste
     accessible — appeler en un geste vaut plus qu'un numéro affiché. */
  .btn-tel-header { padding: 9px; }
  .btn-tel-header span { display: none; }
}
/* ==========================================================================
   BLOC PREUVE SOCIALE (HERO) - PGACOMPTA
   ========================================================================== */
.hero-social-proof {
  margin-top: 24px;
  display: flex;
  align-items: center;
}

.social-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(4, 162, 88, 0.08); /* Fond vert menthe très doux */
  border: 1px solid rgba(4, 162, 88, 0.25);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.92rem;
  color: var(--text-dark, #111827);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-proof-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(4, 162, 88, 0.12);
}

.social-proof-text strong {
  color: var(--color-mint, #04A258);
  font-weight: 700;
}

.social-proof-text .highlight-green {
  color: var(--color-mint, #04A258);
  font-weight: 800;
}

/* Petit point vert clignotant style "Live" */
.dot-online {
  width: 8px;
  height: 8px;
  background-color: var(--color-mint, #04A258);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(4, 162, 88, 0.4);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(4, 162, 88, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(4, 162, 88, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(4, 162, 88, 0);
  }
}
/* =========================================================
   CORRECTION : TITRE BLANC & DESCRIPTION EN VERT
   ========================================================= */

/* 1. On remet le grand titre principal en blanc */
.video-hero h1,
.video-hero h2,
.video-hero h3,
.video-hero__titre {
  color: #ffffff !important; 
}
/* Si 'Pourquoi pas vous ?' est le dernier span du badge */
.hero-badge span:last-child {
  color: #10b981 !important;
}