/*
Theme Name: Johann Lebel
Theme URI: https://johann-lebel.fr
Author: Johann Lebel
Description: Thème bloc sur mesure — consultant GRC & Security AI. Bleu Windows, mode clair / sombre, Calendly, lead magnets, blog.
Version: 1.0.4
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johann-lebel
Tags: block-theme, full-site-editing, blog, one-column, dark-mode
*/

/* ==========================================================================
   Johann Lebel — Consultant GRC & Security AI
   Maquette phase 2 · registre relevé sur la référence « Secur »
   ========================================================================== */

:root {
  /* Sombre (défaut, = référence) */
  --fond: #020916;
  --bande: #01162f;
  --nuit: #003078;
  --nuit-2: #001a4a;
  --carte: #0a1530;
  --carte-2: #0e1d3d;
  --trait: rgba(120, 150, 255, .16);
  --texte: #ffffff;
  --doux: #9aa6c4;
  --bleu: #4cc2ff;
  --azur: #0078d4;
  --degrade: linear-gradient(100deg, #0050b3 0%, #0078d4 50%, #2b9cf2 100%);
  --degrade-texte: linear-gradient(90deg, #2b9cf2 0%, #4cc2ff 50%, #9be3ff 100%);
  --halo: 0 18px 50px -18px rgba(0, 120, 212, .55);
  --ombre: 0 30px 60px -30px rgba(0, 0, 0, .8);
  --rayon: 10px;
  --large: 1180px;
  --police: "Outfit", system-ui, sans-serif;
  color-scheme: dark;
}

/* Clair — ajout demandé par le client (« dark/light mode ») */
:root[data-theme="light"] {
  --fond: #f4f7ff;
  --bande: #e9efff;
  --nuit: #d6e9ff;
  --nuit-2: #eaf4ff;
  --bleu: #0067c0;
  --degrade-texte: linear-gradient(90deg, #0050b3 0%, #0078d4 50%, #2b9cf2 100%);
  --carte: #ffffff;
  --carte-2: #f6f8ff;
  --trait: rgba(40, 70, 170, .14);
  --texte: #0b1430;
  --doux: #55607e;
  --halo: 0 18px 50px -20px rgba(0, 120, 212, .45);
  --ombre: 0 30px 60px -34px rgba(20, 40, 110, .35);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.65 var(--police);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; hyphens: none; text-wrap: balance; }
p { margin: 0; }
.enveloppe { width: min(var(--large), 100% - 40px); margin-inline: auto; }

/* --------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; border: 0;
  font: 500 15px/1 var(--police); color: #fff; cursor: pointer;
  background: var(--degrade); box-shadow: var(--halo);
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn svg { width: 16px; height: 16px; }
.btn-fantome {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 15px/1 var(--police); color: var(--texte);
}
.btn-fantome .rond {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--bleu); box-shadow: 0 0 0 8px rgba(255,255,255,.12);
}
.btn-fantome .rond svg { width: 18px; height: 18px; }
.lien-pilule {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--trait); color: var(--texte); transition: .25s;
}
.lien-pilule svg { width: 14px; height: 14px; }
.lien-pilule:hover, .ligne.active .lien-pilule { background: var(--degrade); border-color: transparent; color: #fff; }

/* ------------------------------------------------------------- Étiquettes */
.surtitre {
  display: inline-block; font-size: 14px; font-weight: 500; color: var(--bleu);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  margin-bottom: 12px;
}
.titre-section { font-size: clamp(28px, 3.4vw, 42px); }
.chapo { color: var(--doux); max-width: 640px; }
.centre { text-align: center; }
.centre .chapo { margin-inline: auto; }

/* --------------------------------------------------------------- Barre haute */
.barre-haute { background: var(--degrade); color: #fff; font-size: 13px; }
.barre-haute .enveloppe { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; }
.barre-haute span, .barre-haute a { display: inline-flex; align-items: center; gap: 8px; }
.barre-haute svg { width: 14px; height: 14px; }
.barre-haute .droite { display: flex; gap: 26px; }

/* ------------------------------------------------------------------ En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--trait);
}
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; }
.logo .ecusson {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4;
}
.logo small { display: block; font-size: 11px; font-weight: 400; color: var(--doux); letter-spacing: .02em; margin-top: 2px; }
.menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.menu > li { position: relative; }
.menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; transition: .2s; }
.menu > li > a svg { width: 14px; height: 14px; }
.menu > li > a:hover { color: var(--bleu); }
.menu > li.courant > a { background: var(--degrade); color: #fff; }
.sous-menu {
  position: absolute; top: calc(100% + 12px); left: 0; width: 330px; padding: 10px;
  list-style: none; margin: 0; border-radius: var(--rayon);
  background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s;
}
.menu > li:hover .sous-menu, .menu > li:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu a { display: block; padding: 12px 14px; border-radius: 8px; }
.sous-menu a:hover { background: var(--carte-2); }
.sous-menu strong { display: block; font-weight: 500; }
.sous-menu span { font-size: 13px; color: var(--doux); }
.outils { display: flex; align-items: center; gap: 14px; }
.bascule-theme {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--trait);
  background: transparent; color: var(--texte); cursor: pointer; display: grid; place-items: center; transition: .25s;
}
.bascule-theme:hover { border-color: var(--bleu); color: var(--bleu); }
.bascule-theme svg { width: 18px; height: 18px; }
.bascule-theme .soleil { display: none; }
:root[data-theme="light"] .bascule-theme .lune { display: none; }
:root[data-theme="light"] .bascule-theme .soleil { display: block; }
:root[data-theme="light"] .appel .btn-fantome .rond { background: var(--degrade); color: #fff; box-shadow: 0 0 0 8px rgba(0,120,212,.12); }
.burger { display: none; }

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 120px 0 230px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,120,212,.55), transparent 70%),
    linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 55%, var(--fond) 100%);
}
.hero canvas.vague { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); }
.hero .enveloppe { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(38px, 5.6vw, 72px); font-weight: 600; letter-spacing: -.02em; max-width: 960px; margin: 0 auto 22px; }
.hero h1 .accent { background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .chapo { font-size: 17px; margin: 0 auto 36px; max-width: 620px; color: color-mix(in srgb, var(--texte) 78%, transparent); }
.hero .actions { display: flex; justify-content: center; align-items: center; gap: 34px; flex-wrap: wrap; }
.hero .lieu {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  padding: 7px 16px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--trait); background: color-mix(in srgb, var(--carte) 60%, transparent);
}
.hero .lieu i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }

/* Cartes atouts qui chevauchent le hero */
.atouts { position: relative; z-index: 3; margin-top: -150px; }
.atouts .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.atout {
  padding: 30px 28px; border-radius: var(--rayon);
  background: color-mix(in srgb, var(--carte) 88%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .3s;
}
.atout:hover { transform: translateY(-6px); }
.atout .icone {
  width: 54px; height: 54px; border-radius: 12px; margin-bottom: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(0,120,212,.25), rgba(76,194,255,.25)); color: var(--bleu);
  border: 1px solid var(--trait);
}
.atout .icone svg { width: 26px; height: 26px; }
.atout h3 { font-size: 19px; margin-bottom: 10px; }
.atout p { font-size: 15px; color: var(--doux); }

/* ------------------------------------------------------------------ À propos */
.apropos { padding: 120px 0 110px; }
.apropos .grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.apropos .visuel { position: relative; }
.apropos .visuel img.shot {
  width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--rayon);
  border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.apropos .visuel::before {
  content: ""; position: absolute; inset: -18px auto auto -18px; width: 62%; height: 70%; z-index: -1;
  border-radius: var(--rayon); background: var(--degrade); opacity: .55; filter: blur(2px);
}
.pastille {
  position: absolute; left: -34px; bottom: 36px; width: 150px; padding: 22px 16px; text-align: center;
  border-radius: var(--rayon); background: var(--degrade); color: #fff; box-shadow: var(--halo);
}
.pastille svg { width: 34px; height: 34px; margin: 0 auto 10px; }
.pastille strong { display: block; font-size: 26px; line-height: 1; }
.pastille span { font-size: 13px; opacity: .9; }
.apropos h2 { margin-bottom: 20px; }
.apropos .chapo { margin-bottom: 26px; }
.coches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; list-style: none; margin: 0 0 34px; padding: 0; font-size: 15px; }
.coches li { display: flex; align-items: center; gap: 10px; }
.coches li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--degrade) center/10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"), var(--degrade);
}
.signature { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.signature .qui { display: flex; align-items: center; gap: 12px; }
.signature .avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4;
}
.signature strong { display: block; font-weight: 500; }
.signature span { font-size: 13px; color: var(--doux); }

/* ------------------------------------------------------------------ Offres */
.offres { padding: 110px 0; background: var(--bande); position: relative; }
.offres .tete { margin-bottom: 56px; }
.lignes { position: relative; }
.ligne {
  position: relative; display: grid; grid-template-columns: 60px 1fr auto; gap: 26px; align-items: center;
  padding: 30px 0; border-bottom: 1px solid var(--trait);
}
.ligne:first-child { border-top: 1px solid var(--trait); }
.ligne .num { font-size: 15px; color: var(--doux); }
.ligne h3 { font-size: 23px; margin-bottom: 6px; transition: color .25s; }
.ligne p { color: var(--doux); font-size: 15px; max-width: 520px; }
.ligne.active h3, .ligne:hover h3 { color: var(--bleu); }
.ligne .flottant {
  position: absolute; right: 190px; top: 50%; width: 220px; aspect-ratio: 1; object-fit: cover;
  border-radius: 18px; transform: translateY(-50%) rotate(-8deg) scale(.85);
  border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre);
  opacity: 0; transition: .4s; pointer-events: none; z-index: 2;
}
.ligne.active .flottant { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); }

/* ------------------------------------------------------------------ Cadres */
.cadres { padding: 54px 0; border-bottom: 1px solid var(--trait); }
.cadres .rangee { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cadre { display: inline-flex; align-items: center; gap: 10px; color: var(--doux); font-weight: 600; font-size: 17px; letter-spacing: .02em; transition: color .25s; }
.cadre svg { width: 28px; height: 28px; color: var(--bleu); }
.cadre small { display: block; font-size: 11px; font-weight: 400; letter-spacing: .06em; }
.cadre:hover { color: var(--texte); }

/* ------------------------------------------------------------- Méthodologie */
.methode { padding: 110px 0; }
.methode .tete { margin-bottom: 70px; }
.frise { position: relative; max-width: 940px; margin: 0 auto; }
.frise::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--bleu), var(--azur), transparent); }
.etape { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; margin-bottom: 30px; }
.etape .bloc { padding: 4px 0; }
.etape:nth-child(odd) .bloc { grid-column: 2; }
.etape:nth-child(even) .bloc { grid-column: 1; text-align: right; }
.etape::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  transform: translateX(-50%); background: var(--fond); border: 3px solid var(--bleu); box-shadow: 0 0 0 6px rgba(0,120,212,.15);
}
.etape .etiquette { font-size: 13px; color: var(--bleu); font-weight: 500; }
.etape h3 { font-size: 19px; margin: 4px 0 8px; }
.etape p { color: var(--doux); font-size: 15px; }

/* ------------------------------------------------------------- Orientation */
.orientation { padding: 110px 0; background: var(--bande); overflow: hidden; }
.orientation .grille { display: grid; grid-template-columns: .8fr 1.6fr; gap: 50px; align-items: center; }
.orientation h2 { margin-bottom: 18px; }
.orientation .chapo { margin-bottom: 30px; }
.onglets { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.onglet {
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font: 500 14px/1 var(--police);
  color: var(--texte); background: var(--carte); border: 1px solid var(--trait); transition: .25s;
}
.onglet.actif { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: var(--halo); }
.panneau { display: none; grid-template-columns: 240px 1fr; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.panneau.actif { display: grid; }
.panneau img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.panneau .texte { padding: 34px; }
.panneau .texte .etiquette { font-size: 13px; color: var(--bleu); font-weight: 500; }
.panneau h3 { font-size: 24px; margin: 6px 0 12px; }
.panneau p { color: var(--doux); font-size: 15px; margin-bottom: 18px; }
.panneau ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-size: 14px; }
.panneau li::before { content: "→ "; color: var(--bleu); }

/* ---------------------------------------------------------------- Synergie */
.synergie { padding: 110px 0 90px; position: relative; overflow: hidden; }
.synergie .tete { margin-bottom: 40px; }
.reseau {
  position: relative; max-width: 980px; height: 420px; margin: 0 auto;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--doux) 45%, transparent) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 75%);
}
.reseau-noeuds { position: absolute; inset: 0; max-width: 980px; height: 420px; margin: 0 auto; }
.reseau-noeuds svg.liens { position: absolute; inset: 0; width: 100%; height: 100%; }
.noeud {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.noeud::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); margin-right: 8px; vertical-align: middle; }
.noeud.coeur { padding: 14px 20px; font-size: 15px; background: var(--degrade); color: #fff; border: 0; box-shadow: var(--halo); }
.noeud.coeur::before { background: #fff; }
.noeud.ia::before { background: var(--azur); }

/* ------------------------------------------------------------------ Chiffres */
.chiffres { padding: 100px 0 110px; background: var(--bande); }
.chiffres .tete { margin-bottom: 56px; }
.chiffres .grille { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 50px; align-items: center; }
.chiffres .col { display: grid; gap: 70px; }
.chiffre { text-align: center; }
.chiffre strong { display: block; font-size: clamp(46px, 5vw, 64px); font-weight: 600; line-height: 1; margin-bottom: 14px; }
.chiffre span { display: inline-block; font-size: 13px; padding: 5px 14px; border-radius: 999px; background: rgba(0,120,212,.14); color: var(--bleu); }
.chiffre.v span { background: rgba(76,194,255,.16); color: #9be3ff; }
:root[data-theme="light"] .chiffre.v span { color: #0050b3; }
.chiffres .centre-visuel { position: relative; }
.chiffres .centre-visuel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }
.chiffres .centre-visuel::after { content: ""; position: absolute; inset: 14px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.35); pointer-events: none; }

/* ---------------------------------------------------------------- Appel RDV */
.appel { position: relative; overflow: hidden; background: linear-gradient(110deg, var(--fond) 30%, var(--nuit-2) 100%); }
.appel .grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 440px; }
.appel .texte { padding: 80px 0; }
.appel h2 { margin-bottom: 18px; }
.appel .chapo { margin-bottom: 32px; }
.appel .actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.appel .visuel { position: relative; align-self: stretch; }
.appel .visuel img { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 480px; max-width: none; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 120px rgba(0,120,212,.6); }
.appel .visuel .badge-rdv {
  position: absolute; left: 0; bottom: 60px; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.badge-rdv .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--degrade); color: #fff; }
.badge-rdv .ico svg { width: 20px; height: 20px; }
.badge-rdv strong { display: block; font-weight: 500; }
.badge-rdv span { font-size: 13px; color: var(--doux); }

/* ------------------------------------------------------------ Études de cas */
.cas { padding: 110px 0; }
.cas .tete { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; }
.cas .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.carte-cas { border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); transition: transform .3s; }
.carte-cas:hover { transform: translateY(-6px); }
.carte-cas img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.carte-cas .texte { padding: 26px 28px 30px; }
.carte-cas .secteur { font-size: 13px; color: var(--doux); }
.carte-cas h3 { font-size: 21px; margin: 8px 0 10px; }
.carte-cas .resultat { font-size: 14px; color: var(--bleu); margin-bottom: 18px; font-weight: 500; }

/* ------------------------------------------------------------------ Contact */
.contact { padding: 110px 0; background: var(--bande); }
.contact .grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; }
.contact h2 { margin-bottom: 18px; }
.contact .chapo { margin-bottom: 34px; }
.coordonnees { display: grid; gap: 18px; }
.coordonnee { display: flex; align-items: center; gap: 14px; }
.coordonnee .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: #fff; flex: none; }
.coordonnee .ico svg { width: 20px; height: 20px; }
.coordonnee strong { display: block; font-weight: 500; }
.coordonnee span, .coordonnee a { font-size: 14px; color: var(--doux); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; padding: 15px 18px; border-radius: 8px; font: 400 15px/1.4 var(--police);
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); outline: none; transition: border-color .2s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--bleu); }
.formulaire textarea { grid-column: 1 / -1; min-height: 150px; resize: vertical; }
.formulaire .plein { grid-column: 1 / -1; }
.formulaire .btn { justify-content: center; width: 100%; border-radius: 8px; padding: 16px; }
.formulaire .mention { grid-column: 1 / -1; font-size: 12px; color: var(--doux); }

/* --------------------------------------------------------------- Pied de page */
.pied { padding: 80px 0 0; border-top: 1px solid var(--trait); }
.pied .grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; }
.pied p { color: var(--doux); font-size: 14px; margin: 18px 0 22px; max-width: 300px; }
.pied h4 { font-size: 17px; margin-bottom: 20px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; color: var(--doux); }
.pied ul a:hover { color: var(--bleu); }
.pied ul li::before { content: "› "; color: var(--bleu); }
.reseaux { display: flex; gap: 10px; }
.reseaux a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--trait); transition: .25s; }
.reseaux a:hover { background: var(--degrade); border-color: transparent; color: #fff; }
.reseaux svg { width: 16px; height: 16px; }
.bas-pied { border-top: 1px solid var(--trait); padding: 22px 0; font-size: 13px; color: var(--doux); }
.bas-pied .enveloppe { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bas-pied a:hover { color: var(--bleu); }

/* --------------------------------------------------------------- Cookies */
.cookies {
  position: fixed; left: 50%; bottom: 20px; z-index: 80; width: min(760px, 100% - 32px);
  transform: translate(-50%, 140%); transition: transform .4s;
  display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 12px;
  background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); font-size: 14px;
}
.cookies.visible { transform: translate(-50%, 0); }
.cookies p { flex: 1; color: var(--doux); }
.cookies p a { color: var(--bleu); }
.cookies .choix { display: flex; gap: 10px; }
.cookies button { padding: 10px 18px; border-radius: 999px; font: 500 14px/1 var(--police); cursor: pointer; border: 1px solid var(--trait); background: transparent; color: var(--texte); }
.cookies button.ok { background: var(--degrade); color: #fff; border: 0; }

/* --------------------------------------------------------------- Apparition */
.revele { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; }
.revele.vu { opacity: 1; transform: none; }

/* ==========================================================================
   Pages internes
   ========================================================================== */

/* Hero interne */
.hero.interne { padding: 96px 0 190px; }
.hero.interne h1 { font-size: clamp(34px, 4.6vw, 58px); max-width: 900px; }
.hero.interne canvas.vague { height: 70%; }
.fil-ariane { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: color-mix(in srgb, var(--texte) 65%, transparent); margin-bottom: 22px; }
.fil-ariane a:hover { color: var(--bleu); }
.btn-contour {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px;
  font: 500 15px/1 var(--police); color: var(--texte); border: 1px solid color-mix(in srgb, var(--texte) 30%, transparent);
  transition: .25s;
}
.btn-contour svg { width: 16px; height: 16px; }
.btn-contour:hover { border-color: var(--bleu); color: var(--bleu); }

/* Bandeau de chiffres qui chevauche le hero */
.kpi { position: relative; z-index: 3; margin-top: -110px; }
.kpi .grille {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--carte) 92%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.kpi .item { padding: 34px 26px; text-align: center; }
.kpi .item + .item { border-left: 1px solid var(--trait); }
.kpi strong {
  display: block; font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; line-height: 1; margin-bottom: 10px; white-space: nowrap;
  background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi span { font-size: 14px; color: var(--doux); }

/* Section générique */
.bloc-section { padding: 110px 0; }
.bloc-section.bande { background: var(--bande); }
.bloc-section .tete { margin-bottom: 56px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.atout .num { float: right; font-size: 13px; color: var(--doux); }

/* Différenciateur : arguments + projet phare */
.differenciateur .grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.differenciateur h2 { margin-bottom: 18px; }
.differenciateur .chapo { margin-bottom: 34px; }
.points { display: grid; gap: 22px; }
.point { display: grid; grid-template-columns: 46px 1fr; gap: 16px; }
.point .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--degrade); color: #fff; box-shadow: var(--halo); }
.point .ico svg { width: 20px; height: 20px; }
.point h4 { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.point p { font-size: 15px; color: var(--doux); }
.phare { position: relative; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }
.phare img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.phare .texte { padding: 28px 30px 32px; }
.phare .etiquette { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bleu); font-weight: 500; }
.phare .etiquette svg { width: 16px; height: 16px; }
.phare h3 { font-size: 21px; margin: 8px 0 12px; }
.phare p { color: var(--doux); font-size: 15px; margin-bottom: 18px; }
.phare .coches { grid-template-columns: 1fr; margin-bottom: 24px; }
.phare::before {
  content: ""; position: absolute; top: 16px; right: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: #fff; background: var(--degrade); content: "Projet phare";
}

/* Témoignage */
.temoignage { padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.temoignage .guillemets { width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: #fff; font-size: 44px; line-height: 1; padding-top: 18px; box-shadow: var(--halo); }
.temoignage blockquote { margin: 0 auto 26px; max-width: 860px; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.5; font-weight: 400; }
.temoignage .auteur strong { display: block; font-weight: 500; }
.temoignage .auteur span { font-size: 14px; color: var(--doux); }

/* Étiquettes de techno */
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes span { padding: 5px 12px; border-radius: 999px; font-size: 12px; background: rgba(0,120,212,.12); color: var(--bleu); border: 1px solid var(--trait); }

/* Études de cas — liste filtrable (toutes les études sont dans la page) */
.filtres { justify-content: center; margin-bottom: 46px; }
.etudes { display: grid; gap: 34px; }
.etude { display: grid; grid-template-columns: 380px 1fr; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.etude.masque { display: none; }
.etude > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.etude .texte { padding: 36px 40px 40px; }
.etude .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--doux); margin-bottom: 12px; }
.etude .meta b { font-weight: 500; color: var(--bleu); }
.etude h2 { font-size: 26px; margin-bottom: 10px; }
.etude .resultat { font-weight: 500; color: var(--bleu); margin-bottom: 16px; }
.etude .contexte { color: var(--doux); font-size: 15px; margin-bottom: 26px; }
.etude .trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 26px; }
.etude h4 { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: none; margin-bottom: 10px; }
.etude ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--doux); }
.etude ul li { padding-left: 16px; position: relative; }
.etude ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
.etude .resultats li { color: var(--texte); }

/* À propos */
.portrait-hero { position: relative; width: 150px; height: 150px; margin: 0 auto 26px; }
.portrait-hero img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--nuit), 0 0 0 7px #0078d4, 0 0 60px rgba(76,194,255,.45); }
.portrait-hero .statut { position: absolute; right: 6px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; background: #34d399; border: 4px solid var(--nuit-2); }
.coord-pilules { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.coord-pilules a, .coord-pilules span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--carte) 70%, transparent); border: 1px solid var(--trait); transition: .25s;
}
.coord-pilules svg { width: 15px; height: 15px; color: var(--bleu); }
.coord-pilules a:hover { border-color: var(--bleu); }
.intro-texte { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; text-align: center; color: var(--doux); font-size: 17px; }
.intro-texte strong { color: var(--texte); font-weight: 500; }

.projet { padding: 34px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.projet .haut { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 13px; }
.projet .haut .badge { display: inline-flex; align-items: center; gap: 8px; color: var(--bleu); font-weight: 500; }
.projet .haut .badge svg { width: 16px; height: 16px; }
.projet .haut .encours { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(52,211,153,.12); color: #34d399; }
.projet h3 { font-size: 22px; margin-bottom: 6px; }
.projet .sous-titre { color: var(--bleu); font-size: 15px; margin-bottom: 14px; }
.projet p { color: var(--doux); font-size: 15px; margin-bottom: 18px; }
.projet .coches { grid-template-columns: 1fr; margin-bottom: 22px; }
.projet .coches li { align-items: flex-start; }
.projet .coches li::before { margin-top: 4px; }

.parcours { position: relative; max-width: 1000px; margin: 0 auto; display: grid; gap: 30px; }
.parcours::before { content: ""; position: absolute; left: 190px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--bleu), var(--azur), transparent); }
.poste { display: grid; grid-template-columns: 190px 1fr; gap: 0; position: relative; }
.poste .quand { padding: 26px 34px 0 0; text-align: right; font-size: 14px; color: var(--doux); }
.poste .quand strong { display: block; font-size: 16px; color: var(--texte); font-weight: 500; }
.poste::after { content: ""; position: absolute; left: 190px; top: 30px; width: 15px; height: 15px; border-radius: 50%; transform: translateX(-50%); background: var(--fond); border: 3px solid var(--bleu); box-shadow: 0 0 0 6px rgba(0,120,212,.15); }
.poste .carte { margin-left: 34px; padding: 28px 30px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.poste h3 { font-size: 20px; margin-bottom: 4px; }
.poste .societe { color: var(--bleu); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.poste .lieu-poste { font-size: 13px; color: var(--doux); margin-bottom: 14px; }
.poste .desc { color: var(--doux); font-size: 15px; margin-bottom: 18px; }
.poste .coches { grid-template-columns: 1fr; gap: 9px; margin-bottom: 20px; font-size: 14px; }
.poste .coches li { align-items: flex-start; }
.poste .coches li::before { margin-top: 3px; }
.poste .encours { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; vertical-align: middle; background: rgba(52,211,153,.12); color: #34d399; }
.pistes { display: grid; gap: 14px; margin-bottom: 20px; }
.piste { padding: 16px 18px; border-radius: 10px; background: var(--carte-2); border: 1px solid var(--trait); }
.piste h4 { font-size: 15px; font-weight: 500; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.piste h4 span { font-size: 12px; color: var(--bleu); font-weight: 400; white-space: nowrap; }
.piste ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--doux); display: grid; gap: 4px; }

.certif { text-align: center; }
.certif .icone { margin: 0 auto 20px; }
.certif .date { display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 12px; background: rgba(0,120,212,.12); color: var(--bleu); }

/* Contact */
.rdv .grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.rdv h2 { margin-bottom: 16px; }
.rdv .chapo { margin-bottom: 30px; }
.deroule { display: grid; gap: 20px; counter-reset: etape; list-style: none; padding: 0; margin: 0 0 30px; }
.deroule li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; counter-increment: etape; }
.deroule li::before { content: "0" counter(etape); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; background: var(--degrade); box-shadow: var(--halo); }
.deroule strong { display: block; font-weight: 500; margin-top: 2px; }
.deroule span { font-size: 14px; color: var(--doux); }
.cadre-calendly { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }
.cadre-calendly .calendly-inline-widget { min-width: 300px; height: 700px; }
.formulaire label { display: block; font-size: 13px; color: var(--doux); margin-bottom: 6px; }
.formulaire .champ.plein { grid-column: 1 / -1; }

/* Mentions légales */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { font-size: 24px; margin: 46px 0 14px; padding-top: 30px; border-top: 1px solid var(--trait); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { color: var(--doux); margin-bottom: 12px; }
.legal a { color: var(--bleu); }

/* ==========================================================================
   Lead magnets, blog, articles
   ========================================================================== */

/* Bloc lead magnet */
.aimant { padding: 110px 0; position: relative; overflow: hidden; }
.aimant.bande { background: var(--bande); }
.aimant .grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.couverture-pdf { position: relative; perspective: 1400px; padding: 20px 30px; }
.couverture-pdf::before {
  content: ""; position: absolute; inset: 12% 8% 6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(0,120,212,.55), transparent 70%); filter: blur(30px);
}
.couverture-pdf img {
  position: relative; z-index: 1; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 210/297; object-fit: cover;
  border-radius: 6px 12px 12px 6px; transform: rotateY(-16deg) rotateX(5deg) rotateZ(-1deg);
  box-shadow: -18px 30px 60px -20px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08), 8px 0 0 -2px #dfe9ff, 14px 4px 0 -4px #c4d6f5;
  transition: transform .6s;
}
.couverture-pdf:hover img { transform: rotateY(-6deg) rotateX(2deg); }
.couverture-pdf .ruban {
  position: absolute; z-index: 2; right: 8%; top: 8%; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; background: var(--degrade); box-shadow: var(--halo);
}
.aimant h2 { margin-bottom: 16px; }
.aimant .chapo { margin-bottom: 22px; }
.aimant .coches { grid-template-columns: 1fr; margin-bottom: 28px; }
.form-aimant {
  display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; padding: 10px; border-radius: 14px;
  background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.form-aimant input { width: 100%; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--trait); background: var(--fond); color: var(--texte); font: 400 15px/1.4 var(--police); outline: none; }
.form-aimant input:focus { border-color: var(--bleu); }
.form-aimant .btn { border-radius: 9px; white-space: nowrap; }
.aimant .mention { font-size: 12px; color: var(--doux); margin-top: 12px; }

/* Ressources : deux lead magnets alternés */
.aimant.inverse .grille { grid-template-columns: 1.15fr .85fr; }
.aimant.inverse .couverture-pdf { order: 2; }
.aimant.inverse .couverture-pdf img { transform: rotateY(16deg) rotateX(5deg) rotateZ(1deg); }

/* Blog — catégories */
.categories { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
.categories a { padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--carte); border: 1px solid var(--trait); transition: .25s; }
.categories a:hover { border-color: var(--bleu); color: var(--bleu); }
.categories a.actif { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: var(--halo); }

/* Blog — carte à la une */
.une { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 16px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); margin-bottom: 30px; transition: transform .3s; }
.une:hover { transform: translateY(-4px); }
.une img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.une .texte { padding: 44px 44px 46px; display: flex; flex-direction: column; justify-content: center; }
.une h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 12px 0 14px; }
.une .extrait { color: var(--doux); margin-bottom: 24px; }
.meta-article { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--doux); }
.meta-article .cat { padding: 4px 12px; border-radius: 999px; font-weight: 500; color: var(--bleu); background: rgba(0,120,212,.12); border: 1px solid var(--trait); }
.badge-une { align-self: flex-start; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: var(--degrade); }

/* Blog — grille de cartes */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.carte-article { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); transition: transform .3s, box-shadow .3s; }
.carte-article:hover { transform: translateY(-6px); box-shadow: var(--halo); }
.carte-article img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.carte-article .texte { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.carte-article h3 { font-size: 20px; margin: 12px 0 10px; }
.carte-article .extrait { color: var(--doux); font-size: 15px; margin-bottom: 20px; flex: 1; }
.carte-article .lien-pilule { align-self: flex-start; }

/* Article */
.hero.article { padding-bottom: 210px; }
.hero.article h1 { font-size: clamp(32px, 4vw, 52px); max-width: 920px; }
.hero.article .meta-article { justify-content: center; margin-top: 8px; }
.hero.article .meta-article img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #0078d4; }
.hero.article .meta-article .auteur-nom { color: var(--texte); font-weight: 500; }
.image-une { position: relative; z-index: 3; margin-top: -160px; }
.image-une img { width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 21/9; object-fit: cover; border-radius: 16px; border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }
.corps-article { padding: 80px 0 110px; }
.corps-article .grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 70px; align-items: start; max-width: 1080px; margin: 0 auto; }
.prose { font-size: 17.5px; line-height: 1.75; }
.prose > * + * { margin-top: 22px; }
.prose p { color: color-mix(in srgb, var(--texte) 84%, transparent); }
.prose > p:first-child { font-size: 20px; line-height: 1.65; color: var(--texte); }
.prose h2 { font-size: 27px; margin-top: 52px; scroll-margin-top: 110px; }
.prose h3 { font-size: 21px; margin-top: 36px; }
.prose strong { color: var(--texte); font-weight: 600; }
.prose a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 12px; color: color-mix(in srgb, var(--texte) 84%, transparent); }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--degrade); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 44px; counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--degrade); }
.prose .encadre { padding: 22px 26px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid #0078d4; }
.prose .encadre .encadre-titre { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); margin-bottom: 6px; }
.prose .encadre p { color: var(--texte); }
.prose blockquote { margin: 40px 0; padding: 0 0 0 28px; border-left: 3px solid; border-image: var(--degrade) 1; font-size: 23px; line-height: 1.5; color: var(--texte); }
.prose blockquote p { color: var(--texte); }
.colonne { position: sticky; top: 110px; display: grid; gap: 22px; }
.carte-auteur, .carte-aimant { padding: 26px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.carte-auteur img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px; box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4; }
.carte-auteur h4 { font-size: 18px; margin-bottom: 2px; }
.carte-auteur .role { font-size: 13px; color: var(--bleu); margin-bottom: 10px; }
.carte-auteur p { font-size: 14px; color: var(--doux); margin-bottom: 16px; }
.carte-aimant { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--nuit) 0%, var(--carte) 70%); }
.carte-aimant img { width: 120px; margin: 0 auto 16px; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.carte-aimant .surtitre { margin-bottom: 6px; }
.carte-aimant h4 { font-size: 19px; margin-bottom: 8px; }
.carte-aimant p { font-size: 14px; color: var(--doux); margin-bottom: 16px; }
.carte-aimant .btn { width: 100%; justify-content: center; }
.sommaire { padding: 22px 24px; border-radius: 14px; border: 1px solid var(--trait); }
.sommaire h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); margin-bottom: 12px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.sommaire a { color: var(--doux); display: block; padding-left: 12px; border-left: 2px solid var(--trait); transition: .2s; }
.sommaire a:hover, .sommaire a.actif { color: var(--bleu); border-color: #0078d4; }
.partage { display: flex; align-items: center; gap: 10px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--doux); }
.partage a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--trait); color: var(--texte); transition: .25s; }
.partage a:hover { background: var(--degrade); border-color: transparent; color: #fff; }
.partage svg { width: 16px; height: 16px; }

/* ================================================================ Responsive */
@media (max-width: 1080px) {
  .menu, .barre-haute .gauche { display: none; }
  .burger { display: grid; }
  .differenciateur .grille, .rdv .grille { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: 1fr 1fr; }
  .etude { grid-template-columns: 1fr; }
  .etude > img { min-height: 0; aspect-ratio: 16/7; }
  .kpi .grille { grid-template-columns: repeat(2, 1fr); }
  .aimant .grille, .aimant.inverse .grille, .une, .corps-article .grille { grid-template-columns: 1fr; }
  .aimant.inverse .couverture-pdf { order: 0; }
  .couverture-pdf img { max-width: 300px; }
  .articles { grid-template-columns: 1fr 1fr; }
  .une img { min-height: 0; aspect-ratio: 16/8; }
  .colonne { position: static; grid-template-columns: 1fr 1fr; }
  .sommaire { display: none; }
  .kpi .item:nth-child(odd) { border-left: 0; }
  .kpi .item:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .entete.ouvert .menu {
    display: flex; flex-direction: column; gap: 2px; position: absolute; top: 78px; left: 0; right: 0;
    padding: 14px 20px 22px; background: var(--fond); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre);
  }
  .entete.ouvert .sous-menu { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 0 12px; }
  .ligne .flottant { display: none; }
  .orientation .grille, .apropos .grille, .contact .grille, .appel .grille { grid-template-columns: 1fr; }
  .appel .visuel { min-height: 380px; }
  .appel .visuel img { right: 50%; transform: translate(50%, -50%); width: 340px; }
  .pied .grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .barre-haute { display: none; }
  .grille-2, .grille-3, .grille-4, .etude .trois { grid-template-columns: 1fr; }
  .articles, .colonne { grid-template-columns: 1fr; }
  .form-aimant { grid-template-columns: 1fr; }
  .une .texte { padding: 28px 22px 30px; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 23px; }
  .image-une { margin-top: -130px; }
  .image-une img { aspect-ratio: 16/10; }
  .hero.article { padding-bottom: 170px; }
  .etude .texte { padding: 26px 22px 28px; }
  .kpi .item { padding: 24px 14px; }
  .parcours::before { left: 8px; }
  .poste { grid-template-columns: 1fr; padding-left: 30px; }
  .poste::after { left: 8px; top: 4px; }
  .poste .quand { text-align: left; padding: 0 0 10px; }
  .poste .carte { margin-left: 0; padding: 22px 20px; }
  .hero.interne { padding: 70px 0 160px; }
  .entete .btn { display: none; }
  .hero { padding: 80px 0 200px; }
  .atouts .grille, .cas .grille, .coches, .formulaire { grid-template-columns: 1fr; }
  .pastille { left: 12px; bottom: 12px; width: 130px; }
  .ligne { grid-template-columns: 40px 1fr; }
  .ligne .lien-pilule { grid-column: 2; justify-self: start; }
  .frise::before { left: 8px; }
  .etape { grid-template-columns: 1fr; gap: 0; padding-left: 36px; }
  .etape:nth-child(n) .bloc { grid-column: 1; text-align: left; }
  .etape::after { left: 8px; }
  .panneau { grid-template-columns: 1fr; }
  .panneau img { min-height: 180px; max-height: 200px; }
  .chiffres .grille { grid-template-columns: 1fr 1fr; }
  .chiffres .col { gap: 40px; }
  .chiffres .centre-visuel { grid-column: 1 / -1; order: -1; max-width: 300px; margin: 0 auto; }
  .reseau { height: 360px; }
  .reseau-noeuds { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; height: 360px; padding: 0 16px; }
  .reseau-noeuds svg.liens { display: none; }
  .noeud { position: static; transform: none; }
  .noeud.coeur { flex-basis: 100%; text-align: center; order: -1; }
  .cas .tete { flex-direction: column; align-items: start; }
  .pied .grille { grid-template-columns: 1fr; }
  .cookies { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revele { opacity: 1; transform: none; }
}

/* Lead magnet : case facultative de consentement */
.form-aimant .consentement { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 2px 6px 4px; font-size: 13px; line-height: 1.5; color: var(--doux); cursor: pointer; }
.form-aimant .consentement input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: #0078d4; padding: 0; }


/* Icônes du sprite, en masques */
:root {
  --ico-bouclier: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  --ico-puce: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%226%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M9%201v3M15%201v3M9%2020v3M15%2020v3M20%209h3M20%2014h3M1%209h3M1%2014h3%22%2F%3E%3C%2Fsvg%3E");
  --ico-cible: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --ico-fleche: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  --ico-bas: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M6%2013l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  --ico-agenda: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18M8%2015h2M14%2015h2%22%2F%3E%3C%2Fsvg%3E");
  --ico-lune: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203a7%207%200%200%200%209.8%209.8z%22%2F%3E%3C%2Fsvg%3E");
  --ico-soleil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%206L2%207%22%2F%3E%3C%2Fsvg%3E");
  --ico-tel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E");
  --ico-lieu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2012h16M4%2017h16%22%2F%3E%3C%2Fsvg%3E");
  --ico-badge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M8.2%2013.8%207%2022l5-3%205%203-1.2-8.2%22%2F%3E%3C%2Fsvg%3E");
  --ico-loupe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E");
  --ico-doc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6M9%2015l2%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  --ico-cadenas: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%3C%2Fsvg%3E");
  --ico-telecharger: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4M7%2010l5%205%205-5M12%2015V3%22%2F%3E%3C%2Fsvg%3E");
  --ico-eclair: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%203%2014h9l-1%208%2010-12h-9z%22%2F%3E%3C%2Fsvg%3E");
  --ico-alerte: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200zM12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-horloge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");
  --ico-terminal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2017%206-6-6-6M12%2019h8%22%2F%3E%3C%2Fsvg%3E");
  --ico-diplome: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2010%2012%205%202%2010l10%205%2010-5z%22%2F%3E%3Cpath%20d%3D%22M6%2012v5c3%203%209%203%2012%200v-5%22%2F%3E%3C%2Fsvg%3E");
  --ico-langue: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20M12%202a15%2015%200%200%201%200%2020M12%202a15%2015%200%200%200%200%2020%22%2F%3E%3C%2Fsvg%3E");
  --ico-engrenage: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22%2F%3E%3C%2Fsvg%3E");
  --ico-in: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M4.98%203.5a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5zM3%209h4v12H3zM9%209h3.8v1.7h.1c.5-1%201.8-2%203.7-2%204%200%204.7%202.6%204.7%206V21h-4v-5.6c0-1.3%200-3-1.9-3s-2.1%201.4-2.1%202.9V21H9z%22%2F%3E%3C%2Fsvg%3E");
  --ico-git: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%20.5A11.5%2011.5%200%200%200%208.4%2022.9c.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7%201.2.1%201.8%201.2%201.8%201.2%201%201.8%202.8%201.3%203.5%201%20.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7%200-1.3.5-2.3%201.2-3.1-.1-.3-.5-1.5.1-3.1%200%200%201-.3%203.2%201.2a11%2011%200%200%201%205.8%200c2.2-1.5%203.2-1.2%203.2-1.2.6%201.6.2%202.8.1%203.1.8.8%201.2%201.9%201.2%203.1%200%204.4-2.7%205.4-5.3%205.7.4.4.8%201.1.8%202.2v3.2c0%20.4.2.7.8.6A11.5%2011.5%200%200%200%2012%20.5z%22%2F%3E%3C%2Fsvg%3E");
}
.ico-bouclier { --ico: var(--ico-bouclier); }
.ico-puce { --ico: var(--ico-puce); }
.ico-cible { --ico: var(--ico-cible); }
.ico-fleche { --ico: var(--ico-fleche); }
.ico-bas { --ico: var(--ico-bas); }
.ico-chevron { --ico: var(--ico-chevron); }
.ico-agenda { --ico: var(--ico-agenda); }
.ico-lune { --ico: var(--ico-lune); }
.ico-soleil { --ico: var(--ico-soleil); }
.ico-mail { --ico: var(--ico-mail); }
.ico-tel { --ico: var(--ico-tel); }
.ico-lieu { --ico: var(--ico-lieu); }
.ico-menu { --ico: var(--ico-menu); }
.ico-badge { --ico: var(--ico-badge); }
.ico-loupe { --ico: var(--ico-loupe); }
.ico-doc { --ico: var(--ico-doc); }
.ico-cadenas { --ico: var(--ico-cadenas); }
.ico-telecharger { --ico: var(--ico-telecharger); }
.ico-eclair { --ico: var(--ico-eclair); }
.ico-alerte { --ico: var(--ico-alerte); }
.ico-horloge { --ico: var(--ico-horloge); }
.ico-terminal { --ico: var(--ico-terminal); }
.ico-diplome { --ico: var(--ico-diplome); }
.ico-langue { --ico: var(--ico-langue); }
.ico-engrenage { --ico: var(--ico-engrenage); }
.ico-in { --ico: var(--ico-in); }
.ico-git { --ico: var(--ico-git); }

/* ==========================================================================
   ADAPTATIONS WORDPRESS
   Le CSS de la maquette est repris tel quel au-dessus ; ce qui suit l'adapte
   au DOM produit par les blocs natifs (figure autour des images, conteneur
   div.wp-block-button autour des liens, paragraphes à la place des spans,
   icônes en masques CSS à la place des SVG en ligne).
   ========================================================================== */

/* ---------------------------------------------------------------- Socle */
img { height: auto; }
figure.wp-block-image { margin: 0; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
.wp-site-blocks { overflow-x: clip; }
.wp-block-group.enveloppe { width: min(var(--large), 100% - 40px); margin-inline: auto; }
.has-global-padding { padding-inline: 0; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #4cc2ff; outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* -------------------------------------------------------------- Icônes */
/* Chaque .ico-* fournit --ico ; les composants l'utilisent en masque. */
.ico-glyphe, [class*="ico-"] { --ico-taille: 18px; }

/* ------------------------------------------------------- En-tête collant */
header.wp-block-template-part { position: sticky; top: -37px; z-index: 50; }
.admin-bar header.wp-block-template-part { top: -5px; }
.entete { position: relative; top: auto; }
.barre-haute p { display: inline-flex; align-items: center; gap: 8px; }
.barre-haute p::before, .coord-pilules .pilule::before, .phare .etiquette::before, .projet .badge::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.barre-haute .droite { display: flex; gap: 26px; }

/* Logo : site-logo + nom */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo .wp-block-site-logo, .logo .wp-block-site-logo a { display: block; line-height: 0; }
.logo .wp-block-site-logo img { width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4; }
.logo-nom { font-size: 22px; font-weight: 600; line-height: 1.1; }
.logo-sous { font-size: 11px; color: var(--doux); letter-spacing: .02em; margin-top: 2px; }

/* Navigation core/navigation */
.wp-block-navigation.menu { font-size: 15px; gap: 6px; }
.wp-block-navigation.menu .wp-block-navigation__container { gap: 6px; }
.wp-block-navigation.menu .wp-block-navigation-item__content { padding: 8px 16px; border-radius: 999px; transition: .2s; }
.wp-block-navigation.menu .wp-block-navigation-item__content:hover { color: var(--bleu); }
.wp-block-navigation.menu .courant > .wp-block-navigation-item__content { background: var(--degrade); color: #fff; }
.wp-block-navigation.menu .wp-block-navigation__submenu-icon { margin-left: -10px; width: 12px; height: 12px; color: currentColor; }
.wp-block-navigation.menu .has-child .wp-block-navigation__submenu-container {
  min-width: 300px !important; padding: 10px; margin-top: 12px; border-radius: var(--rayon);
  background: var(--carte) !important; color: var(--texte) !important; border: 1px solid var(--trait) !important; box-shadow: var(--ombre);
}
.wp-block-navigation.menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 12px 14px; border-radius: 8px; }
.wp-block-navigation.menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--carte-2); color: var(--texte); }
/* Panneau mobile : sinon blanc sur blanc (CSS du bloc imprimé après le thème) */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--fond) !important; color: var(--texte) !important; padding: 90px 28px 40px;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 4px; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content { font-size: 20px; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; background: transparent !important; padding: 0 0 0 16px; margin: 0; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open,
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { color: var(--texte); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--trait); place-items: center;
}

/* Outils : bascule de thème (paragraphe éditable) + bouton RDV */
.outils { display: flex; align-items: center; gap: 14px; }
.bascule-theme { font-size: 0 !important; cursor: pointer; flex: none; position: relative; }
.bascule-theme::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico-lune) center / contain no-repeat; mask: var(--ico-lune) center / contain no-repeat;
}
:root[data-theme="light"] .bascule-theme::before { -webkit-mask-image: var(--ico-soleil); mask-image: var(--ico-soleil); }

/* ---------------------------------------------------------------- Boutons */
/* La classe de core/button atterrit sur le conteneur : on le neutralise. */
.wp-block-button.btn, .wp-block-button.lien-pilule, .wp-block-button.btn-fantome, .wp-block-button.btn-contour {
  display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; filter: none; transform: none;
}
.wp-block-button.btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; border: 0;
  font: 500 15px/1 var(--police); color: #fff; background: var(--degrade); box-shadow: var(--halo);
  transition: transform .25s, filter .25s;
}
.wp-block-button.btn .wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wp-block-button.lien-pilule .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font: 500 13px/1.2 var(--police); color: var(--texte); background: transparent; border: 1px solid var(--trait); transition: .25s;
}
.wp-block-button.lien-pilule .wp-block-button__link:hover, .ligne.active .wp-block-button.lien-pilule .wp-block-button__link {
  background: var(--degrade); border-color: transparent; color: #fff;
}
.wp-block-button.btn-contour .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: transparent;
  font: 500 15px/1 var(--police); color: var(--texte); border: 1px solid color-mix(in srgb, var(--texte) 30%, transparent);
}
.wp-block-button.btn-contour .wp-block-button__link:hover { border-color: var(--bleu); color: var(--bleu); }
.wp-block-button.btn-fantome .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 14px; padding: 0; background: transparent; border: 0;
  font: 500 15px/1 var(--police); color: var(--texte);
}
/* Rond blanc + glyphe bleu */
.wp-block-button.btn-fantome .wp-block-button__link::before {
  content: ""; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.12);
}
.wp-block-button.btn-fantome .wp-block-button__link { position: relative; }
.wp-block-button.btn-fantome .wp-block-button__link::after {
  content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: #0078d4;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
:root[data-theme="light"] .wp-block-button.btn-fantome .wp-block-button__link::before { background: var(--degrade); box-shadow: 0 0 0 8px rgba(0,120,212,.12); }
:root[data-theme="light"] .wp-block-button.btn-fantome .wp-block-button__link::after { background: #fff; }
/* Icône avant (ico-*) et flèche après (fleche) */
.wp-block-button.btn[class*="ico-"] .wp-block-button__link::before,
.wp-block-button.btn-contour[class*="ico-"] .wp-block-button__link::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.wp-block-button.fleche .wp-block-button__link::after {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--ico-fleche) center / contain no-repeat; mask: var(--ico-fleche) center / contain no-repeat;
}
.wp-block-buttons.actions { display: flex; justify-content: center; align-items: center; gap: 34px; flex-wrap: wrap; }
.appel .wp-block-buttons.actions, .orientation .wp-block-buttons { justify-content: flex-start; gap: 24px; }

/* ------------------------------------------------------------------- Hero */
.hero h1 em { font-style: normal; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lieu { display: inline-flex; }
.hero .lieu::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; align-self: center; }
.hero .enveloppe > .lieu { margin-inline: auto; }
.hero .enveloppe { display: flex; flex-direction: column; align-items: center; }
.fil-ariane { display: flex; justify-content: center; align-items: center; gap: 8px; }
.fil-ariane a:hover { color: var(--bleu); }
.fil-ariane .wp-block-post-terms { font-size: 13px; }
.hero .wp-block-post-title { font-size: clamp(32px, 4vw, 52px); max-width: 920px; margin: 0 auto 22px; font-weight: 600; letter-spacing: -.02em; }

/* -------------------------------------------- Cartes à icône (atout, etc.) */
.atout { position: relative; padding-top: 104px; }
.atout::before {
  content: ""; position: absolute; left: 28px; top: 30px; width: 54px; height: 54px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,120,212,.25), rgba(76,194,255,.25)); border: 1px solid var(--trait);
}
.atout::after {
  content: ""; position: absolute; left: 42px; top: 44px; width: 26px; height: 26px; background: var(--bleu);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.atout .num { position: absolute; right: 28px; top: 30px; font-size: 13px; color: var(--doux); float: none; }
.certif.atout::before { left: 50%; margin-left: -27px; }
.certif.atout::after { left: 50%; margin-left: -13px; }
.certif .date { display: inline-block; }

/* Point / coordonnée / badge : pastille ronde dégradée + glyphe blanc */
.point, .coordonnee, .badge-rdv { position: relative; }
.point { display: block; padding-left: 62px; min-height: 46px; }
.point::before, .coordonnee::before, .badge-rdv::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--degrade); box-shadow: var(--halo);
}
.point::after, .coordonnee::after, .badge-rdv::after {
  content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.coordonnee { display: block; padding-left: 62px; min-height: 48px; }
.coordonnee::before { width: 48px; height: 48px; border-radius: 50%; box-shadow: none; }
.coordonnee::after { left: 15px; top: 15px; }
.coord-titre { font-weight: 500; padding-top: 2px; }
.coord-valeur { font-size: 14px; color: var(--doux); }
.coord-valeur a:hover { color: var(--bleu); }
.appel .visuel .badge-rdv { display: block; padding: 14px 18px 14px 70px; }
.badge-rdv::before { left: 18px; top: 50%; margin-top: -20px; width: 40px; height: 40px; border-radius: 10px; box-shadow: none; }
.badge-rdv::after { left: 29px; top: 50%; margin-top: -9px; }
.badge-titre { font-weight: 500; }
.badge-sous { font-size: 13px; color: var(--doux); }

/* --------------------------------------------------------------- À propos */
.apropos .visuel .shot img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.pastille { padding-top: 66px; }
.pastille::before {
  content: ""; position: absolute; left: 50%; top: 22px; width: 34px; height: 34px; margin-left: -17px; background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pastille-chiffre { font-size: 26px; line-height: 1; font-weight: 600; }
.pastille-libelle { font-size: 13px; opacity: .9; }
.signature .wp-block-buttons { display: inline-flex; }
.qui { display: flex; align-items: center; gap: 12px; }
.qui .avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4; }
.qui-nom { font-weight: 500; }
.qui-role { font-size: 13px; color: var(--doux); }

/* ----------------------------------------------------------------- Offres */
.ligne .flottant { overflow: hidden; }
.ligne .flottant img { width: 100%; height: 100%; object-fit: cover; }
.ligne:hover h3 { color: var(--bleu); }

/* ----------------------------------------------------------------- Cadres */
.cadre::before {
  content: ""; flex: none; width: 28px; height: 28px; background: var(--bleu);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.cadre-nom { font-size: 17px; font-weight: 600; line-height: 1.2; }
.cadre-sous { font-size: 11px; font-weight: 400; letter-spacing: .06em; }

/* ----------------------------------------------------------- Orientation */
.onglet { display: inline-block; user-select: none; }
.onglets { align-items: center; }
.panneau .wp-block-image { height: 100%; }
.panneau .wp-block-image img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.panneau .wp-block-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-size: 14px; }

/* --------------------------------------------------------------- Synergie */
.reseau-zone { position: relative; height: 420px; max-width: 980px; margin: 0 auto; }
.reseau-zone::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--doux) 45%, transparent) 1.2px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 75%);
}
.reseau-noeuds { position: absolute; inset: 0; height: auto; max-width: none; }
.reseau-noeuds::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 420' preserveAspectRatio='none'%3E%3Cg stroke='%230078d4' stroke-width='1' stroke-dasharray='4 5' fill='none'%3E%3Cpath d='M490 210 L180 110M490 210 L230 300M490 210 L420 70M490 210 L780 95M490 210 L820 250M490 210 L610 345M490 210 L360 360'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.noeud.coeur { left: 50%; top: 50%; }
.noeud.n1 { left: 18.4%; top: 26%; } .noeud.n2 { left: 23.5%; top: 71%; } .noeud.n3 { left: 42.9%; top: 16.7%; }
.noeud.n4 { left: 79.6%; top: 22.6%; } .noeud.n5 { left: 83.7%; top: 59.5%; } .noeud.n6 { left: 62.2%; top: 82%; } .noeud.n7 { left: 36.7%; top: 85.7%; }

/* --------------------------------------------------------------- Chiffres */
.chiffre-nombre { display: block; font-size: clamp(46px, 5vw, 64px); font-weight: 600; line-height: 1; margin-bottom: 14px; }
.chiffre-libelle { display: inline-block; font-size: 13px; padding: 5px 14px; border-radius: 999px; background: rgba(0,120,212,.14); color: var(--bleu); }
.chiffre.v .chiffre-libelle { background: rgba(76,194,255,.16); color: #9be3ff; }
:root[data-theme="light"] .chiffre.v .chiffre-libelle { color: #0050b3; }
.chiffres .centre-visuel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }

/* ------------------------------------------------------- Appel / études */
.appel .visuel .appel-image { position: static; }
.cas .tete { display: flex; }
.carte-cas .wp-block-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* -------------------------------------------------------------------- KPI */
.kpi-chiffre {
  display: block; font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; line-height: 1; margin-bottom: 10px; white-space: nowrap;
  background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi-libelle { font-size: 14px; color: var(--doux); }
.kpi .grille.n5 { --n: 5; }

/* ------------------------------------------------------ Différenciateur */
.phare .wp-block-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.phare .etiquette { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ Témoignage */
.temoin { margin: 0 auto; max-width: 860px; border: 0; padding: 0; }
.temoin::before {
  content: "“"; display: block; width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%; background: var(--degrade); color: #fff;
  font-size: 44px; line-height: 1; padding-top: 18px; box-shadow: var(--halo);
}
.temoin p { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.5; margin-bottom: 26px; }
.temoin cite { font-style: normal; font-size: 14px; color: var(--doux); }
.temoin cite strong { display: block; font-size: 16px; font-weight: 500; color: var(--texte); }

/* ---------------------------------------------------------- Étiquettes */
.wp-block-list.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.wp-block-list.etiquettes li { padding: 5px 12px; border-radius: 999px; font-size: 12px; background: rgba(0,120,212,.12); color: var(--bleu); border: 1px solid var(--trait); }

/* --------------------------------------------------------- Études de cas */
.filtres .onglet { cursor: pointer; }
.etude > .etude-image { height: 100%; }
.etude > .etude-image img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.etude .meta strong { font-weight: 500; color: var(--bleu); }
.etude .trois .wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--doux); }
.etude .trois .wp-block-list li { padding-left: 16px; position: relative; }
.etude .trois .wp-block-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
.etude .trois .resultats li { color: var(--texte); }
.etude .texte > .wp-block-list.etiquettes { margin-top: 0; }

/* ------------------------------------------------------------- À propos */
.portrait-hero { position: relative; width: 150px; height: 150px; margin: 0 auto 26px; }
.portrait-hero img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--nuit), 0 0 0 7px #0078d4, 0 0 60px rgba(76,194,255,.45); }
.portrait-hero::after { content: ""; position: absolute; right: 6px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; background: #34d399; border: 4px solid var(--nuit-2); }
.coord-pilules .pilule {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--carte) 70%, transparent); border: 1px solid var(--trait); transition: .25s;
}
.coord-pilules .pilule::before { width: 15px; height: 15px; background: var(--bleu); }
.coord-pilules .pilule:hover { border-color: var(--bleu); }
.projet .haut { display: flex; justify-content: space-between; gap: 12px; }
.projet .badge { display: inline-flex; align-items: center; gap: 8px; color: var(--bleu); font-weight: 500; font-size: 13px; }
.projet .badge::before { width: 16px; height: 16px; }
.projet .encours { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: rgba(52,211,153,.12); color: #34d399; font-size: 13px; }
.projet .coches li, .poste .coches li { align-items: flex-start; }
.projet .wp-block-list.etiquettes { margin-top: 0; }
.poste .quand strong { display: block; font-size: 16px; color: var(--texte); font-weight: 500; }
.poste .encours-badge { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: rgba(52,211,153,.12); color: #34d399; }
.piste h4 { margin-bottom: 2px; }
.piste-date { font-size: 12px; color: var(--bleu); margin-bottom: 8px; }
.piste .wp-block-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--doux); display: grid; gap: 4px; }
.espace-bas { margin-bottom: 26px; }

/* ---------------------------------------------------------------- Contact */
.deroule.wp-block-list { list-style: none; }
.deroule li { color: var(--doux); font-size: 14px; }
.deroule li strong { color: var(--texte); font-size: 16px; font-weight: 500; }
.calendly-inline { min-width: 300px; height: 700px; display: grid; place-items: center; }
.calendly-inline .calendly-lien a { color: #0050b3; font-weight: 500; text-decoration: underline; }
.calendly-inline.est-charge .calendly-lien { display: none; }
.calendly-inline .calendly-inline-widget, .calendly-inline iframe { width: 100%; height: 700px; }

/* --------------------------------------------- Formulaires Contact Form 7 */
.wpcf7 form { margin: 0; }
.wpcf7-form-control-wrap { display: block; }
.formulaire .champ.plein, .formulaire .plein { grid-column: 1 / -1; }
.formulaire .wpcf7-submit, .form-aimant .wpcf7-submit {
  width: 100%; border: 0; cursor: pointer; padding: 16px; border-radius: 8px; font: 500 15px/1 var(--police); color: #fff;
  background: var(--degrade); box-shadow: var(--halo); transition: filter .25s;
}
.form-aimant .wpcf7-submit { padding: 15px 22px; border-radius: 9px; white-space: nowrap; }
.formulaire .wpcf7-submit:hover, .form-aimant .wpcf7-submit:hover { filter: brightness(1.1); }
.wpcf7-not-valid-tip { font-size: 12px; color: #ff8a8a; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); }
.wpcf7 form.sent .wpcf7-response-output { border-color: #34d399; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #ff8a8a; }
/* Le spinner de CF7 casserait la grille : il reste masqué, et c'est le bouton qui signale l'envoi */
.wpcf7-spinner { display: none; }
.wpcf7 form.submitting .wpcf7-submit { opacity: .7; cursor: progress; animation: jl-envoi 1s ease-in-out infinite alternate; }
@keyframes jl-envoi { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.form-aimant .wpcf7-form-control-wrap input { margin: 0; }
.formulaire .mention a, .aimant .mention a { color: var(--bleu); }

/* ------------------------------------------------------------ Pied de page */
.pied .grille > .wp-block-group > .wp-block-heading { font-size: 17px; margin-bottom: 20px; }
.pied-desc { color: var(--doux); font-size: 14px; margin: 18px 0 22px; max-width: 300px; }
.pied .wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; color: var(--doux); }
.wp-block-social-links.reseaux { display: flex; gap: 10px; padding: 0; margin: 0; }
.wp-block-social-links.reseaux .wp-social-link { background: transparent !important; color: var(--texte) !important; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--trait); display: grid; place-items: center; margin: 0; transition: .25s; }
.wp-block-social-links.reseaux .wp-social-link:hover { background: var(--degrade) !important; border-color: transparent; color: #fff !important; transform: none; }
.wp-block-social-links.reseaux .wp-social-link a { padding: 0; display: grid; place-items: center; }
.wp-block-social-links.reseaux .wp-social-link svg { width: 16px; height: 16px; }
.bas-pied .enveloppe { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Bandeau cookies (paragraphes éditables, rôle bouton posé par le script) */
.cookies .cookies-texte { flex: 1; color: var(--doux); }
.cookies .cookies-texte a { color: var(--bleu); }
.cookies .choix { display: flex; gap: 10px; }
.cookies .choix p { padding: 10px 18px; border-radius: 999px; font: 500 14px/1 var(--police); cursor: pointer; border: 1px solid var(--trait); color: var(--texte); flex: none; }
.cookies .choix p.ok { background: var(--degrade); color: #fff; border: 0; }

/* -------------------------------------------------------------- Blog */
.categories { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
.wp-block-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.boucle-une .wp-block-post-template > li { margin: 0; }
.articles .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.articles.wp-block-query { display: block; }
.carte-article { height: 100%; }
.carte-article .wp-block-post-featured-image { margin: 0; }
.carte-article .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.carte-article .wp-block-post-title { font-size: 20px; margin: 12px 0 10px; }
.carte-article .wp-block-post-title a:hover, .une .wp-block-post-title a:hover { color: var(--bleu); }
.carte-article .wp-block-post-excerpt { margin: 0 0 20px; flex: 1; }
.carte-article .wp-block-post-excerpt__excerpt, .une .wp-block-post-excerpt__excerpt { color: var(--doux); font-size: 15px; margin: 0; }
.une .wp-block-post-featured-image { margin: 0; height: 100%; }
.une .wp-block-post-featured-image a { display: block; height: 100%; }
.une .wp-block-post-featured-image img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.une .wp-block-post-title { font-size: clamp(24px, 2.4vw, 32px); margin: 12px 0 14px; }
.une .wp-block-post-excerpt { margin: 0 0 24px; }
.une .badge-une { align-self: flex-start; }
.meta-article .wp-block-post-terms a, .meta-article.wp-block-group .cat a { color: var(--bleu); }
.meta-article .wp-block-post-terms.cat { padding: 4px 12px; border-radius: 999px; font-weight: 500; background: rgba(0,120,212,.12); border: 1px solid var(--trait); }
.meta-article .wp-block-post-date { color: var(--doux); }
.wp-block-read-more.lien-pilule {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font: 500 13px/1.2 var(--police); color: var(--texte); border: 1px solid var(--trait); transition: .25s; width: auto;
}
.wp-block-read-more.lien-pilule::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico-fleche) center / contain no-repeat; mask: var(--ico-fleche) center / contain no-repeat;
}
.wp-block-read-more.lien-pilule:hover { background: var(--degrade); border-color: transparent; color: #fff; }
.wp-block-query-pagination { margin-top: 40px; justify-content: center; gap: 10px; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait); }
.wp-block-query-pagination .current { background: var(--degrade); color: #fff; border-color: transparent; }
.wp-block-query-title { font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.02em; margin: 0 auto 22px; }

/* Article seul */
.image-une .wp-block-post-featured-image { margin: 0; }
.image-une .wp-block-post-featured-image img { width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 21/9; object-fit: cover; border-radius: 16px; border: 1px solid var(--trait); box-shadow: var(--halo), var(--ombre); }
.meta-article .meta-avatar img { width: 34px !important; height: 34px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0078d4; }
.meta-article .meta-avatar, .meta-article .meta-avatar a { line-height: 0; }
.hero.article .meta-article { justify-content: center; margin-top: 8px; }
.hero .fil-ariane .wp-block-post-terms a { color: inherit; }
.prose.wp-block-post-content > p:first-child { font-size: 20px; line-height: 1.65; color: var(--texte); }
.prose .wp-block-list { padding-left: 0; list-style: none; display: grid; gap: 12px; }
.prose .encadre { padding: 22px 26px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid #0078d4; }
.prose .wp-block-quote { margin: 40px 0; padding: 0 0 0 28px; border-left: 3px solid; border-image: var(--degrade) 1; font-size: 23px; line-height: 1.5; }
.partage { display: flex; align-items: center; gap: 10px; }
.partage p:first-child { margin-right: 4px; }
.partage .partage-in a, .partage .partage-mail a {
  font-size: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--trait); position: relative; transition: .25s;
}
.partage .partage-in a::before, .partage .partage-mail a::before {
  content: ""; width: 16px; height: 16px; background: var(--texte);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.partage .partage-in { --ico: var(--ico-in); } .partage .partage-mail { --ico: var(--ico-mail); }
.partage a:hover { background: var(--degrade); border-color: transparent; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.sommaire:not(.est-rempli) { display: none; }
.carte-auteur .wp-block-image img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px; box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px #0078d4; }
.carte-aimant .wp-block-image img { width: 120px; margin: 0 auto 16px; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.carte-aimant .wp-block-buttons, .carte-aimant .wp-block-button, .carte-aimant .wp-block-button__link { width: 100%; justify-content: center; }
/* Ressource affichée selon la catégorie de l'article (classe posée sur le body) */
body.single .pour-grc, body.single .pour-security-ai { display: none; }
body.single.cat-grc-conformite .pour-grc, body.single.cat-security-ai .pour-security-ai { display: block; }
body.single.cat-grc-conformite section.pour-grc, body.single.cat-security-ai section.pour-security-ai { display: block; }

/* Lead magnet : couverture */
.couverture-pdf .wp-block-image img { position: relative; z-index: 1; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  /* Menu en panneau jusqu'à 1080 px (le bloc ne bascule qu'à 600 px) */
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: block; }
  .entete .menu { display: flex; }
  .entete .enveloppe { gap: 12px; }
  .entete .outils { margin-left: auto; }
}
@media (max-width: 760px) {
  header.wp-block-template-part { top: 0; }
  .entete .wp-block-buttons.entete-cta { display: none; }
  .wp-block-buttons.actions { gap: 22px; }
  .point { padding-left: 58px; }
  .reseau-zone { height: 360px; }
  .reseau-noeuds { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; padding: 0 16px; }
  .reseau-noeuds::before { display: none; }
  .noeud.noeud { position: static; transform: none; }
  .noeud.coeur { flex-basis: 100%; text-align: center; order: -1; }
  .etude > .etude-image img { min-height: 0; aspect-ratio: 16/7; }
  .une .wp-block-post-featured-image img { min-height: 0; aspect-ratio: 16/8; }
  .cookies .choix { justify-content: stretch; }
  .cookies .choix p { flex: 1; text-align: center; }
}

/* ------------------------------------------------- Porte 4 : rythme vertical */
/* Les spans en ligne de la maquette héritaient de la ligne de leur parent (16 px × 1,65) ;
   devenus paragraphes, ils reprennent cette hauteur de ligne. */
.etape .etiquette, .carte-cas .secteur, .panneau .etiquette { line-height: 26.4px; }
.cadre-nom, .cadre-sous { line-height: 1.65; }
.hero h1 { width: 100%; }
/* Accueil : formulaire compact comme la maquette (libellés gardés pour les lecteurs d'écran) */
.home .formulaire label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.formulaire textarea { height: 150px; }
/* WordPress annule la marge du dernier enfant d'un groupe (:root :where(.is-layout-flow) > :last-child) */
.frise > .etape:last-child { margin-bottom: 30px; }
.panneau .texte .etiquette { margin-bottom: 0; }
.wp-block-button.lien-pilule .wp-block-button__link { line-height: 1.65; }
.bas-pied p { margin: 0; }
/* La maquette étire le formulaire à la hauteur de la colonne voisine (grille) :
   on laisse l'étirement traverser les enveloppes de Contact Form 7. */
.formulaire-zone, .formulaire-zone .wpcf7, .formulaire-zone .wpcf7 form, .formulaire-zone .formulaire { height: 100%; }
.formulaire-zone .formulaire .champ, .formulaire-zone .formulaire > .plein { display: flex; flex-direction: column; }
.formulaire-zone .formulaire .wpcf7-form-control-wrap { flex: 1; display: flex; }
.formulaire-zone .formulaire .wpcf7-form-control-wrap > *, .formulaire-zone .formulaire > .plein > .wpcf7-submit { flex: 1; }
.formulaire-zone .formulaire textarea { height: auto; min-height: 150px; }
/* Conteneurs de boutons en flex : pas d'espace de ligne de base sous le lien */
.wp-block-button.btn, .wp-block-button.lien-pilule, .wp-block-button.btn-fantome, .wp-block-button.btn-contour { display: inline-flex; }
/* Coordonnées : la valeur héritait de la ligne du parent (16 px × 1,65) dans la maquette */
.coord-titre { padding-top: 0; }
.coord-valeur { line-height: 26.4px; }
/* Porte 4 — pages internes */
.kpi-libelle { line-height: 26.4px; }
.temoin cite { display: block; line-height: 26.4px; }
.temoin cite br { display: none; }
.poste .carte { position: relative; }
.poste .encours-badge { position: absolute; top: 30px; right: 30px; margin: 0; }
.piste { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
.piste h4 { grid-column: 1; margin-bottom: 8px; }
.piste .piste-date { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; line-height: 24px; }
.piste .wp-block-list { grid-column: 1 / -1; }
.projet .haut p { margin: 0; }
.phare .texte .etiquette { margin-bottom: 0; }
.meta-article .wp-block-post-time-to-read { color: var(--doux); }
.meta-article .wp-block-post-time-to-read::after { content: " de lecture"; }
/* Déroulé : contenu en ligne (gras + saut + texte), donc pas de grille sur le li */
.deroule.wp-block-list li { display: block; position: relative; padding-left: 60px; min-height: 46px; line-height: 23.1px; }
.deroule.wp-block-list li::before { position: absolute; left: 0; top: 0; }
.deroule.wp-block-list li strong { display: inline-block; margin-top: 2px; line-height: 26.4px; }
.deroule.wp-block-list li br { display: block; }

.hero.article .meta-article { margin-top: 0; }
.wp-block-image.portrait-hero { margin: 0 auto 26px; }
.coord-pilules { width: 100%; }
.coord-pilules .pilule { flex: none; }
.poste .carte:has(.encours-badge) h3 { padding-right: 96px; }
.wp-block-read-more.lien-pilule { line-height: 1.65; }
.tete-ligne { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; }
/* La maquette stylait les <a> en pastilles ; ici la pastille est le paragraphe */
.coord-pilules .pilule a { display: inline; padding: 0; border: 0; background: none; border-radius: 0; }
.legal > p:last-child { margin-bottom: 12px; }
.bloc-section .tete.tete-ligne { margin-bottom: 46px; }

/* Lead magnet : case facultative de consentement (FluentCRM) */
.form-aimant .consentement { grid-column: 1 / -1; padding: 2px 6px 4px; font-size: 13px; line-height: 1.5; color: var(--doux); }
.form-aimant .consentement .wpcf7-list-item { margin: 0; }
.form-aimant .consentement label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-aimant .consentement input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: #0078d4; padding: 0; }

/* Message d'erreur sous le champ, jamais à côté */
.formulaire-zone .formulaire .wpcf7-form-control-wrap { flex-direction: column; }

/* ==========================================================================
   Fluent Forms — mêmes rendus que les formulaires de la maquette
   ========================================================================== */
.fluentform .frm-fluent-form fieldset { min-inline-size: 0 !important; }
.fluentform .ff-el-group { margin: 0; }
.fluentform .ff-el-input--label { margin-bottom: 6px; }
.fluentform .ff-el-input--label label { font-size: 13px; font-weight: 400; color: var(--doux); }
.fluentform .ff-el-input--label.ff-el-is-required label::after { content: none; }
.fluentform .frm-fluent-form .ff-el-form-control {
  width: 100%; padding: 15px 18px; border-radius: 8px; font: 400 15px/1.4 var(--police); height: auto;
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); box-shadow: none; outline: none; transition: border-color .2s;
}
.fluentform .frm-fluent-form .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--doux) 80%, transparent); }
.fluentform .frm-fluent-form .ff-el-form-control:focus { border-color: var(--bleu); background: var(--carte); color: var(--texte); }
.fluentform .frm-fluent-form textarea.ff-el-form-control { min-height: 150px; resize: vertical; }
.fluentform .frm-fluent-form select.ff-el-form-control { appearance: auto; }
.fluentform .frm-fluent-form .ff-btn-submit,
.fluentform .frm-fluent-form .ff-btn-submit.wpf_has_custom_css {
  width: 100%; border: 0 !important; cursor: pointer; padding: 16px; border-radius: 8px; font: 500 15px/1 var(--police);
  color: #fff !important; background: var(--degrade) !important; box-shadow: var(--halo); transition: filter .25s; opacity: 1;
}
.fluentform .frm-fluent-form .ff-btn-submit:hover { filter: brightness(1.1); }
.fluentform .frm-fluent-form.ff-form-loading .ff-btn-submit,
.fluentform .frm-fluent-form .ff-btn-submit:disabled { opacity: .7; cursor: progress; animation: jl-envoi 1s ease-in-out infinite alternate; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #ff8a8a; }
.fluentform .error.text-danger, .fluentform .ff-el-is-error .text-danger { font-size: 12px; color: #ff8a8a; margin-top: 4px; }
.fluentform .ff-message-success, .ff-message-success {
  margin: 14px 0 0; padding: 14px 18px; border-radius: 10px; font-size: 15px; box-shadow: none;
  border: 1px solid #34d399; background: var(--carte); color: var(--texte);
}
.fluentform .ff-errors-in-stack { margin-top: 10px; color: #ff8a8a; font-size: 14px; }
.fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--doux); cursor: pointer; }
.fluentform .ff-el-form-check-input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: #0078d4; }

/* Contact : grille sur deux colonnes, message et bouton en pleine largeur */
.formulaire-zone .fluentform .frm-fluent-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire-zone .fluentform .jl-plein, .formulaire-zone .fluentform .jl-envoi { grid-column: 1 / -1; }
.home .formulaire-zone .fluentform .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Lead magnets : prénom + e-mail + bouton sur une ligne, case en dessous, dans une carte */
.aimant .fluentform .frm-fluent-form {
  padding: 10px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.aimant .fluentform .frm-fluent-form fieldset { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; }
.aimant .fluentform .frm-fluent-form .ff-el-form-control { padding: 14px 16px; border-radius: 9px; background: var(--fond); }
.aimant .fluentform .jl-envoi { grid-column: 3; grid-row: 1; }
.aimant .fluentform .jl-envoi .ff-btn-submit { padding: 15px 22px; border-radius: 9px; white-space: nowrap; height: 100%; }
.aimant .fluentform .jl-consentement { grid-column: 1 / -1; padding: 2px 6px 4px; }
@media (max-width: 760px) {
  .formulaire-zone .fluentform .frm-fluent-form fieldset,
  .aimant .fluentform .frm-fluent-form fieldset { grid-template-columns: 1fr; }
  .aimant .fluentform .jl-envoi { grid-column: auto; grid-row: auto; }
}

/* Pied de page : une seule bulle par réseau (le lien), sans flèche « › » */
.pied .wp-block-social-links li::before { content: none; }
.wp-block-social-links.reseaux .wp-social-link { width: auto; height: auto; border: 0; display: block; background: transparent !important; }
.wp-block-social-links.reseaux .wp-social-link:hover { background: transparent !important; }
.wp-block-social-links.reseaux .wp-social-link a {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--trait); display: grid; place-items: center; color: var(--texte); transition: .25s;
}
.wp-block-social-links.reseaux .wp-social-link a:hover { background: var(--degrade); border-color: transparent; color: #fff; }
/* Logo du pied : pas les marges de la description */
.pied .logo p { margin: 0; max-width: none; }