/* Feuille de style du site n-gage.fr, charte V4 (13/10/2026).
   Règles : projets/01-assistant-ngage/branding/refonte-v4-2026-10/DESIGN.md.
   Nommée v4.css et non style.css : trois pages de /ressources/ chargent encore /style.css
   (ancienne charte), la remplacer les casserait. */

@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-It.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-BoldIt.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("/fonts/SourceCodePro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ngage-bleu: #265170; --ngage-ciel: #C4DAEB; --ngage-encre: #0F1E2C; --ngage-texte: #34465A;
  --ngage-blanc: #FFFFFF; --ngage-brume: #E4ECF3; --ngage-voile: #EAF0F6; --ngage-citation: #F3F7FA;
  --ngage-ia: #4F5F70; --ngage-pointille: #9DB0C2; --ngage-ponctuation: #F18925;
  --ngage-police: "Source Sans 3", Arial, sans-serif;
  --ngage-voix-ia: "Source Code Pro", Consolas, Menlo, monospace;
  --largeur: 1120px;
  --ngage-arrondi: 6px; /* exception du 15/10/2026 : boutons, badges et photos (DESIGN.md) */
  --entete-h: 77px;      /* hauteur de l'en-tête, remesurée par site.js ; 65 px sur téléphone (plus bas) */
  color-scheme: light; /* jamais de thème sombre automatique */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ngage-blanc); color: var(--ngage-texte); font: 400 18px/1.55 var(--ngage-police); }
img, video, svg { max-width: 100%; display: block; }
a { color: var(--ngage-bleu); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ngage-bleu); outline-offset: 3px; }
.bandeau-bleu :focus-visible { outline-color: var(--ngage-blanc); } /* bleu sur bleu serait invisible ; le pied est blanc, il garde le contour bleu */
h1, h2, h3 { color: var(--ngage-encre); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 68ch; }
.valeur { color: var(--ngage-bleu); font-weight: 700; } /* mise en valeur : bleu ET gras */
.point { color: var(--ngage-ponctuation); }            /* la seule place de l'orange */
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 16px; top: 16px; z-index: 100; background: var(--ngage-blanc); padding: 8px 12px; }

/* En-tête : blanc sur les pages ordinaires. Sur une page qui commence par un « .hero » (l'accueil),
   site.js (bloc 8) le rend transparent par-dessus le bleu, puis blanc net dès qu'on défile.
   Deux logos dans le lien d'accueil : l'un est caché selon l'état. */
.entete { position: sticky; top: 0; z-index: 50; background-color: var(--ngage-blanc); border-bottom: 1px solid var(--ngage-brume); }
/* La transition ne part qu'après la première image (classe « anime » posée par site.js) : pas de fondu au chargement */
.entete.anime { transition: background-color .3s ease, border-color .3s ease; }
.entete .conteneur { max-width: 1440px; } /* plus large que le contenu : le nom et le métier y tiennent (1400 px jusqu'au 17/10/2026, voir plus bas) */
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.entete-marque { display: flex; align-items: center; gap: 14px; min-width: 0; }
.entete-logo { flex: none; }
.entete-logo img { height: 40px; width: auto; }
.entete-logo .logo-blanc { display: none; }
.entete-identite { display: flex; flex-direction: column; margin: 0; padding-left: 14px; border-left: 1px solid var(--ngage-brume); line-height: 1.25; max-width: none; }
.entete-nom { font-weight: 700; color: var(--ngage-encre); font-size: 1rem; white-space: nowrap; }
.entete-metier { color: var(--ngage-ia); font-size: .82rem; white-space: nowrap; }
.entete-nav { display: flex; align-items: center; gap: 16px; } /* 20 px jusqu'au 17/10/2026 : « Conseil et accompagnement » est plus long que « Être accompagné » */
.entete-nav a { color: var(--ngage-encre); text-decoration: none; font-size: .98rem; white-space: nowrap; }
/* Soulignement qui glisse depuis la gauche au survol */
.entete-nav a:not(.bouton) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding: 4px 0; transition: background-size .25s ease, color .2s ease; }
.entete-nav a:not(.bouton):hover { background-size: 100% 2px; color: var(--ngage-bleu); }
/* Page en cours : bleu et soulignée, sans gras (le gras élargirait le lien et ferait bouger le menu) */
.entete-nav a:not(.bouton)[aria-current="page"] { color: var(--ngage-bleu); background-size: 100% 2px; }
.entete-linkedin { display: inline-flex; align-items: center; gap: 10px; }
.entete-nav a.entete-linkedin { background: none; }
.entete-linkedin svg { width: 22px; height: 22px; fill: currentColor; transition: transform .2s ease; }
.entete-linkedin:hover svg { transform: translateY(-2px); }
.entete-linkedin-texte { display: none; }
.entete-menu { display: none; font: inherit; color: var(--ngage-encre); background: none; border: 1.5px solid var(--ngage-brume); border-radius: var(--ngage-arrondi); padding: 8px 14px; cursor: pointer; }
/* État transparent, par-dessus le hero bleu (classes posées par site.js) */
.a-hero .entete { margin-bottom: calc(-1 * var(--entete-h)); }
.a-hero .entete:not(.pleine) { background-color: transparent; border-bottom-color: rgba(255, 255, 255, .18); }
.a-hero .entete:not(.pleine) .logo-couleur { display: none; }
.a-hero .entete:not(.pleine) .logo-blanc { display: block; }
.a-hero .entete:not(.pleine) .entete-identite { border-left-color: rgba(255, 255, 255, .3); }
.a-hero .entete:not(.pleine) .entete-nom,
.a-hero .entete:not(.pleine) .entete-nav a:not(.bouton),
.a-hero .entete:not(.pleine) .entete-menu { color: var(--ngage-blanc); }
.a-hero .entete:not(.pleine) .entete-metier { color: var(--ngage-ciel); }
.a-hero .entete:not(.pleine) .entete-menu { border-color: rgba(255, 255, 255, .5); }
.a-hero .entete:not(.pleine) .entete-nav a.bouton { background: var(--ngage-blanc); border-color: var(--ngage-blanc); color: var(--ngage-bleu) !important; }
.a-hero .entete:not(.pleine) .entete-nav a.bouton:hover { background: var(--ngage-ciel); border-color: var(--ngage-ciel); }
.a-hero .entete:not(.pleine) :focus-visible { outline-color: var(--ngage-blanc); }

/* Boutons : coins de 6 px (exception du 15/10/2026), jamais d'orange */
.bouton { position: relative; display: inline-block; font: 700 1rem/1.3 var(--ngage-police); cursor: pointer; background: var(--ngage-bleu); color: var(--ngage-blanc) !important; text-decoration: none; padding: 12px 22px; border: 2px solid var(--ngage-bleu); border-radius: var(--ngage-arrondi); transition: background-color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
/* Un seul effet pour tout le site, au survol et au focus clavier : le bouton se soulève de 2 px et un
   reflet clair le traverse une fois. Rien ne bouge en continu ; rien du tout si animations réduites.
   Le reflet est un dégradé qui glisse DANS un calque immobile de la taille du bouton : il n'a pas besoin
   que le bouton coupe ce qui dépasse (overflow), ce qui laisse le laser se poser sur la vraie bordure. */
.bouton::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--ngage-arrondi) - 2px); background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .32) 50%, transparent 60%) no-repeat 100% 0 / 300% 100%; pointer-events: none; } /* 300 % : au repos, la bande penchée reste entièrement hors du bouton (à 250 %, son coin dépassait en haut à gauche) */
.bouton-clair::after, .a-hero .entete:not(.pleine) .entete-nav a.bouton::after { background-image: linear-gradient(105deg, transparent 40%, rgba(38, 81, 112, .14) 50%, transparent 60%); } /* sur un bouton blanc, un reflet bleuté */
.bouton:hover, .bouton:focus-visible { transform: translateY(-2px); }
.bouton:hover::after, .bouton:focus-visible::after { background-position: 0 0; transition: background-position .6s ease; }
.bouton:hover { background: var(--ngage-encre); border-color: var(--ngage-encre); }
.bouton-clair { background: var(--ngage-blanc); color: var(--ngage-bleu) !important; border-color: var(--ngage-blanc); }
.bouton-clair:hover { background: var(--ngage-ciel); border-color: var(--ngage-ciel); }
.bouton-contour { background: transparent; color: var(--ngage-blanc) !important; border-color: var(--ngage-ciel); }
.bouton-contour:hover { background: rgba(255, 255, 255, .1); border-color: var(--ngage-blanc); }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Laser orange autour des boutons à fond BLANC (demande de Nicolas, 15/10/2026 ; repris le 16/10 :
   variante C « Passage » choisie sur la page d'essai). Un trait orange de 2 px avec un léger halo court
   SUR la bordure blanche (bord extérieur du trait = bord extérieur du bouton), à vitesse constante, fait
   un tour, s'efface, puis revient quelques secondes plus tard. La traîne est un vrai dégradé continu.
   Technique : un <canvas> que site.js glisse dans chaque bouton concerné et redessine pendant le tour,
   halo compris (détail dans site.js, bloc 10). Les deux versions précédentes (dégradé tournant, puis tirets SVG)
   accéléraient dans les coins ou laissaient voir des marches dans la traîne.
   N'apparaît que si site.js a posé la classe « laser » sur <html> (animations permises). Sinon, rien. */
.laser-toile { display: none; position: absolute; pointer-events: none; max-width: none; } /* le halo est dessiné dans la toile : un filter CSS laissait un carré parasite sous Safari */
.laser .bouton-clair > .laser-toile,
.laser.a-hero .entete:not(.pleine) .entete-nav a.bouton > .laser-toile { display: block; }

/* Bandeau bleu : tête de page, accroche, appel final */
.bandeau-bleu { position: relative; overflow: hidden; background: var(--ngage-bleu); color: var(--ngage-blanc); padding: 88px 0 80px; }
.bandeau-bleu h1, .bandeau-bleu h2 { color: var(--ngage-blanc); max-width: 20ch; } /* reste à gauche de l'hexagone, à toute largeur */
.bandeau-bleu .sous-titre { color: var(--ngage-ciel); font-size: 1.3rem; max-width: 46ch; }
.bandeau-bleu a:not(.bouton) { color: var(--ngage-blanc); }
.bandeau-accueil .conteneur { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hexagone { position: absolute; right: -70px; top: -80px; width: 300px; height: auto; fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 2; pointer-events: none; }

/* Sections */
.section { padding: 80px 0; }
.section-voile { background: var(--ngage-voile); }
.intro { font-size: 1.2rem; }

/* Familles de l'accueil : des blocs séparés par un filet, pas des cartes à icônes */
.familles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 40px; margin-top: 40px; }
.famille { border-top: 2px solid var(--ngage-brume); padding-top: 22px; }
.famille .video-boucle { margin-bottom: 18px; }
.suite { font-weight: 700; text-decoration: none; }
.suite::after { content: " \2192"; }

/* Vidéos */
.video-boucle { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ngage-voile); }
.declencheur-presentation { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: none; border-radius: var(--ngage-arrondi); overflow: hidden; }
.declencheur-presentation img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* height:auto : sans lui, l'attribut height="720" de la page étire l'image */
.declencheur-presentation span { position: absolute; left: 0; bottom: 0; background: var(--ngage-blanc); color: var(--ngage-bleu); font: 700 1rem var(--ngage-police); padding: 10px 16px; }
.video-presentation { width: 100%; aspect-ratio: 16 / 9; background: var(--ngage-encre); border-radius: var(--ngage-arrondi); }
.video-methode { margin-top: 32px; max-width: 820px; } /* boucle seule sous les trois textes de la méthode (accueil) */

/* Icônes (jeu Phosphor, images/v4/icones/) : le SVG sert de masque, la couleur vient de la feuille.
   Usage : <span class="icone" style="--icone: url('/images/v4/icones/users-three.svg')" aria-hidden="true"></span> */
.icone { display: inline-block; flex: none; width: 28px; height: 28px; color: var(--ngage-bleu); background-color: currentColor;
  -webkit-mask-image: var(--icone); mask-image: var(--icone);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.famille h3 { display: flex; align-items: center; gap: 12px; }
.serie .icone { display: block; width: 40px; height: 40px; margin-bottom: 14px; }

/* Listes à filets, fiches, encadrés */
.liste-filets { list-style: none; padding: 0; margin: 0 0 1.2em; }
.liste-filets li { border-top: 1.5px solid var(--ngage-brume); padding: 12px 0; }
.liste-filets li:last-child { border-bottom: 1.5px solid var(--ngage-brume); }
.fiche-infos { display: grid; grid-template-columns: 210px 1fr; margin: 32px 0; border-top: 1.5px solid var(--ngage-bleu); }
.fiche-infos dt, .fiche-infos dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--ngage-brume); }
.fiche-infos dt { font-weight: 700; color: var(--ngage-encre); padding-right: 16px; }
.fiche-infos dd p:last-child { margin-bottom: 0; }
.encadre-resume { background: var(--ngage-voile); color: var(--ngage-encre); font-weight: 700; padding: 22px 26px; margin: 28px 0; }
.liste-filets li b { color: var(--ngage-encre); }
.note-source { font-size: .9rem; color: var(--ngage-ia); }
.contenu-texte > * { max-width: 820px; }  /* les enfants sont limités : la colonne garde l'alignement du conteneur */
.contenu-texte > p { max-width: 68ch; }   /* les paragraphes gardent leur longueur de ligne */
.contenu-texte h2 { margin-top: 1.6em; font-size: 1.6rem; }
.tableau-defilant { overflow-x: auto; }
.contenu-texte table { border-collapse: collapse; width: 100%; }
.contenu-texte th { text-align: left; color: var(--ngage-encre); border-bottom: 1.5px solid var(--ngage-bleu); padding: 8px 10px; }
.contenu-texte td { border-bottom: 1px solid var(--ngage-brume); padding: 8px 10px; }
.logos-outils { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 16px 0; }
.logos-outils img { height: 32px; width: auto; }

/* Qui je suis, méthode */
.qui { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.qui img { width: 100%; height: auto; border-radius: var(--ngage-arrondi); }
.serie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.serie h3 { font-size: 1.8rem; }

/* Formulaire */
form label { display: block; font-weight: 700; color: var(--ngage-encre); margin: 16px 0 6px; }
form input, form textarea, form select { width: 100%; font: inherit; color: var(--ngage-encre); padding: 10px 12px; border: 1.5px solid var(--ngage-pointille); border-radius: 0; background: var(--ngage-blanc); }
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--ngage-bleu); border-color: var(--ngage-bleu); }

/* Pied de page : blanc, compact, trois lignes (reprise du 15/10/2026) */
.pied { background: var(--ngage-blanc); color: var(--ngage-texte); padding: 36px 0 28px; font-size: .92rem; border-top: 1px solid var(--ngage-brume); }
.pied a { color: var(--ngage-bleu); }
.pied-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.pied-ligne img { height: 30px; width: auto; }
.pied-liens { margin-top: 14px; }
.pied-ligne p, .pied-mentions p { margin: 0; max-width: none; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; flex-direction: row; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { text-decoration: underline; }
.pied-mentions { border-top: 1px solid var(--ngage-brume); margin-top: 22px; padding-top: 16px; color: var(--ngage-ia); font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.pied-mentions p:first-child { max-width: 72ch; }
/* cookies.js ajoute « Gérer les cookies » en fin de ligne, sans séparateur : on le rend ici */
#cookieFooterLink::before { content: " · "; display: inline-block; white-space: pre; text-decoration: none; color: var(--ngage-ia); }

/* Bannière de cookies : angles droits et aucune ombre (charte V4). cookies.css est partagé avec /ressources/,
   qui garde son apparence : la surcharge vit ici, dans la feuille que seules les pages V4 chargent.
   Le préfixe body fait gagner ces règles sur celles de cookies.css, chargé après. L'interrupteur garde sa forme ronde. */
body .cookie-banner, body .cookie-modal-content, body .cookie-category, body .cookie-btn, body .cookie-close { border-radius: 0; box-shadow: none; }
body .cookie-btn { border-radius: var(--ngage-arrondi); } /* un bouton : coins de 6 px comme les autres */
body .cookie-btn:hover, body .cookie-category:hover, body .cookie-toggle.active, body .cookie-toggle::after { box-shadow: none; }
body .cookie-btn-accept.pulse { animation: none; }
body .cookie-banner { border-color: var(--ngage-pointille); } /* sans ombre, un filet plus net détache la bannière d'un fond blanc */
/* Téléphone : cookies.css colle la bannière à 24 px du bord gauche avec une largeur maximale, si bien qu'elle
   touchait le bord droit de l'écran (relecture du 16/10). Ici : 16 px de chaque côté, et des boutons qui
   peuvent rétrécir (le min-width de cookies.css faisait toucher « Personnaliser » à son propre bord). */
@media (max-width: 480px) {
  body .cookie-banner { left: 16px; right: 16px; max-width: none; }
  body .cookie-buttons .cookie-btn { min-width: 0; max-width: none; padding-left: 10px; padding-right: 10px; } /* cookies.css plafonnait chaque bouton à 150 px */
  body .cookie-buttons .cookie-btn-accept { flex: 1 1 100%; } /* Accepter sur sa ligne, Refuser et Personnaliser en dessous */
}

/* ===== Accueil V4, reprise du 15/10/2026 ===== */

/* --- Hero : qui et quoi tout de suite, fond animé (hero.js), cadre de mes formations --- */
.bandeau-bleu.bandeau-accueil { padding: 0; } /* double classe : gagne sur le padding des bandeaux bleus sur téléphone */
.bandeau-accueil .conteneur { position: relative; z-index: 1; min-height: min(84vh, 720px); padding-top: 72px; padding-bottom: 56px; grid-template-columns: 1.05fr .95fr; gap: 44px 56px; align-content: center; }
.a-hero .bandeau-accueil .conteneur { padding-top: calc(56px + var(--entete-h)); min-height: calc(min(84vh, 720px) + var(--entete-h)); }
.bandeau-accueil h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; max-width: 13ch; }
.bandeau-accueil .sous-titre { font-size: 1.35rem; }
.hero-identite { color: var(--ngage-ciel); font-size: 1.15rem; margin: 0 0 18px; }
.hero-identite b { color: var(--ngage-blanc); }
.reseau { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* Badges : liseré blanc fin, fond bleu plein (le réseau ne passe jamais sous leur texte), coins de 6 px.
   Des informations, pas des boutons : aucun effet au survol, curseur normal (choix de Nicolas, 15/10/2026). */
.badges { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.badges li { display: flex; align-items: center; gap: 10px; background: var(--ngage-bleu); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--ngage-arrondi); padding: 8px 14px; color: var(--ngage-blanc); font-size: .95rem; line-height: 1.3; cursor: default; }
.badges .icone { width: 20px; height: 20px; color: var(--ngage-ciel); }
/* Arrivée orchestrée : les éléments du hero montent l'un après l'autre (rien si animations réduites) */
@media (prefers-reduced-motion: no-preference) {
  .hero-texte > *, .bandeau-accueil .declencheur-presentation, .badges li { animation: monter .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-texte > :nth-child(2) { animation-delay: .08s; }
  .hero-texte > :nth-child(3) { animation-delay: .16s; }
  .hero-texte > :nth-child(4) { animation-delay: .24s; }
  .bandeau-accueil .declencheur-presentation { animation-delay: .2s; }
  .badges li:nth-child(1) { animation-delay: .34s; }
  .badges li:nth-child(2) { animation-delay: .42s; }
  .badges li:nth-child(3) { animation-delay: .5s; }
}
@keyframes monter { from { opacity: 0; transform: translateY(14px); } }
/* Vignette de la présentation : bouton « lecture » en bas à droite, pour laisser les six outils de l'image nets */
.declencheur-presentation .lecture { position: absolute; left: auto; right: 12px; bottom: 12px; padding: 0; width: 56px; height: 56px; background: var(--ngage-blanc); border-radius: var(--ngage-arrondi); display: grid; place-items: center; transition: transform .2s; }
.declencheur-presentation .lecture svg { width: 24px; height: 24px; fill: var(--ngage-bleu); margin-left: 3px; }
.declencheur-presentation:hover .lecture, .declencheur-presentation:focus-visible .lecture { transform: scale(1.08); }

/* --- Bandeaux qui défilent : logique commune --- */
.defile { display: flex; overflow: hidden; width: 100%; }
.defile-piste { display: flex; align-items: center; flex: none; gap: var(--ecart, 56px); padding: 0 calc(var(--ecart, 56px) / 2); margin: 0; list-style: none; }
.defile.actif .defile-piste { animation: defiler var(--duree, 80s) linear infinite; }
.defile.inverse.actif .defile-piste { animation-direction: reverse; }
/* Survol : seulement sur un appareil qui survole vraiment (sur téléphone, le « survol » reste collé
   après un toucher et empêcherait de relancer la bande ; là, c'est le toucher qui arrête, site.js) */
@media (hover: hover) { .defile:hover .defile-piste, .defile-logos:hover li { animation-play-state: paused !important; } }
/* Pause au clavier par :has(:focus-visible) et non :focus-within : après un toucher ou un clic, le focus
   resté dans la bande la gardait arrêtée (défaut I-1). Toucher une bande l'arrête (classe posée par site.js). */
.defile:has(:focus-visible) .defile-piste, .defile-logos:has(:focus-visible) li,
.defile.en-pause .defile-piste, .defile-logos.en-pause li { animation-play-state: paused !important; }
@keyframes defiler { to { transform: translateX(-100%); } }
/* Focus clavier dans une bande : elle revient à sa place de départ et le navigateur montre le lien
   atteint (sinon le focus tombe hors de l'écran, WCAG 2.4.7). :focus-visible évite le saut au clic. */
.defile:has(:focus-visible) .defile-piste { animation: none !important; }
/* Sans script ou animations réduites : liste immobile, renvoyée à la ligne et centrée */
.defile:not(.actif) .defile-piste { flex-wrap: wrap; justify-content: center; flex: 1; row-gap: 20px; }

/* --- Bande de confiance : logos (avec liens) et secteurs --- */
.confiance { padding: 56px 0 40px; border-bottom: 1px solid var(--ngage-brume); }
.confiance-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 28px; }
.confiance h2 { margin-bottom: 0; }
/* Chiffres (composant de la charte) : nombre en gras bleu, légende dessous, filet au-dessus */
.chiffres { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ngage-brume); }
.chiffres li { color: var(--ngage-texte); font-size: .98rem; line-height: 1.3; }
.chiffres b { display: block; color: var(--ngage-bleu); font-size: 1.5rem; line-height: 1.1; }
.defile-logos { --ecart: 64px; padding: 16px 0; } /* 6 px de plus en haut et en bas que la ligne plate : place de la vague */
.defile-logos li { animation: flotter 5.5s ease-in-out infinite alternate; }
/* Vague : un logo sur deux 6 px plus haut, l'autre 6 px plus bas (12 px d'écart), en plus du flottement.
   Seulement quand la bande défile : immobile, la liste reste alignée. */
.defile-logos.actif li:nth-child(odd) { --vague: -6px; }
.defile-logos.actif li:nth-child(even) { --vague: 6px; }
.defile-logos li:nth-child(3n+1) { animation-duration: 4.6s; animation-delay: -1.2s; }
.defile-logos li:nth-child(3n+2) { animation-duration: 6.2s; animation-delay: -3.1s; }
.defile-logos li:nth-child(4n)   { animation-duration: 5.1s; animation-delay: -2.4s; }
@keyframes flotter { from { transform: translateY(calc(var(--vague, 0px) - 4px)); } to { transform: translateY(calc(var(--vague, 0px) + 4px)); } }
.defile-logos a { display: block; padding: 6px; }
.defile-logos img { height: 46px; width: auto; max-width: none; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); } /* couleurs d'origine, jamais de filtre */
.defile-logos a:hover img, .defile-logos a:focus-visible img { transform: scale(1.1); } /* petit rebond, sans déformer */
.defile-logos .logo-carre img { height: 64px; }       /* ratio proche de 1 : DMC, Crédit Agricole, Confidence */
.defile-logos .logo-large img { height: 34px; }       /* ratio de 4 à 4,5 : InFamily, SAFTI, Matchers, L'Apéro.shop */
.defile-logos .logo-tres-large img { height: 26px; }  /* Novadial (7,3) */
.defile-secteurs { --ecart: 0px; margin-top: 22px; }
.defile-secteurs li { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ngage-encre); font-size: 1.05rem; padding: 0 22px; }
.defile-secteurs li::after { content: ""; width: 5px; height: 5px; background: var(--ngage-pointille); margin-left: 34px; }
/* Secteurs immobiles (animations réduites ou sans script) : plus serrés, sinon quinze lignes sur téléphone */
.defile-secteurs:not(.actif) .defile-piste { row-gap: 6px; }
.defile-secteurs:not(.actif) li { padding: 0 8px; }
.defile-secteurs:not(.actif) li::after { margin-left: 16px; }
.defile-secteurs:not(.actif) li:last-child::after { display: none; }

/* --- Méthode et portrait réunis (retirés de l'accueil le 15/10/2026, gardés pour la page À propos) --- */
.methode-tete { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; margin-bottom: 40px; }
.methode-tete img { width: 100%; height: auto; border-radius: var(--ngage-arrondi); }
.methode-tete p { font-size: 1.2rem; }
.methode-corps { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.methode-corps .serie { grid-template-columns: 1fr; gap: 22px; margin-top: 0; }
.methode-corps .serie > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
.methode-corps .serie .icone { margin: 2px 0 0; grid-row: span 2; }
.methode-corps .serie h3 { font-size: 1.35rem; margin-bottom: .2em; }
.methode-corps .serie p { margin: 0; }
.methode-corps .video-methode { margin: 0; max-width: none; }
.relance { margin: 40px 0 0; font-size: 1.1rem; }

/* --- Avis : les mots qui reviennent (variante C, choisie le 15/10/2026) ---
   Deux rangées d'extraits en grand, qui filent en sens contraire. Les extraits sont des passages exacts
   des avis Google (« … » quand la phrase est coupée) ; les 8 avis complets sont dans le dépliant dessous,
   et c'est lui que lisent les lecteurs d'écran et le clavier (les rangées sont aria-hidden).
   Essai d'origine, hors site : _essais-avis.html. */
.avis { padding: 64px 0 48px; overflow: hidden; }
.avis-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 48px; margin-bottom: 26px; } /* comme la bande de confiance : titre à gauche, lien Google à droite */
.avis-tete h2 { margin: 0; }
.avis-rangs { display: grid; gap: 4px; }
.defile-extraits { --ecart: 0px; }
.defile-extraits li { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; padding: 6px 0; cursor: pointer; }
.defile-extraits li::after { content: ""; align-self: center; width: 7px; height: 7px; background: var(--ngage-ciel); margin: 0 44px 0 30px; transform: rotate(45deg); }
.defile-extraits .extrait { font-weight: 700; font-style: italic; font-size: clamp(1.6rem, 3.1vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.15; color: var(--ngage-encre); transition: color .2s ease; }
.defile-extraits.inverse .extrait { color: var(--ngage-bleu); }
.defile-extraits .guill { color: var(--ngage-ciel); font-style: normal; }
.defile-extraits .auteur { font-size: 1rem; color: var(--ngage-ia); }
.defile-extraits li:hover .extrait { color: var(--ngage-bleu); }
.defile-extraits.inverse li:hover .extrait { color: var(--ngage-encre); }
/* Sans défilement (animations réduites, sans script) : chaque rangée reste une ligne immobile calée sur
   le texte ; la fin est coupée par le bord, les avis entiers sont dans le dépliant */
.defile:not(.actif).defile-extraits .defile-piste { flex-wrap: nowrap; justify-content: flex-start; padding-left: max(24px, calc((100vw - var(--largeur)) / 2 + 24px)); }
.avis-complet { margin-top: 22px; }
.avis-complet summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: var(--ngage-bleu); list-style: none;
  padding: 10px 16px; border: 1.5px solid var(--ngage-brume); border-radius: var(--ngage-arrondi); transition: border-color .2s ease; }
.avis-complet summary::-webkit-details-marker { display: none; }
.avis-complet summary:hover { border-color: var(--ngage-bleu); }
.avis-complet summary:focus-visible { outline: 2px solid var(--ngage-bleu); outline-offset: 3px; }
.avis-complet summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.avis-complet[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.avis-liste { list-style: none; margin: 20px 0 0; padding: 0; columns: 2 380px; column-gap: 32px; }
.avis-liste li { break-inside: avoid; margin: 0 0 14px; }
.avis-liste figure { margin: 0; background: var(--ngage-citation); padding: 14px 18px; transition: background-color .6s ease; }
.avis-liste figure.eclaire { background: var(--ngage-ciel); transition-duration: .15s; } /* l'avis complet appelé par un clic sur son extrait */
.avis-liste blockquote { margin: 0; font-style: italic; font-size: 1rem; line-height: 1.5; }
.avis-liste figcaption { margin-top: 8px; font-weight: 700; color: var(--ngage-encre); font-size: .98rem; }
/* Lien Google bien en vue, à côté du titre : 5 étoiles bleues */
.avis-google { margin: 0 0 4px; }
.avis-google .etoiles { vertical-align: -1px; margin-right: 10px; }
.avis-google a { font-weight: 700; }
.etoiles { display: inline-block; flex: none; width: 76px; height: 14px; background: var(--ngage-bleu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.2 6L10 14.9l-5.5 2.9 1.2-6L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") 0 0 / 15.2px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.2 6L10 14.9l-5.5 2.9 1.2-6L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") 0 0 / 15.2px 14px repeat-x; }

/* --- Appel final : portrait en vignette, une voix humaine --- */
.appel-final .conteneur { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.appel-final img { width: 150px; height: auto; border-radius: var(--ngage-arrondi); }

/* --- Petits écrans (cet accueil) --- */
@media (max-width: 760px) {
  .bandeau-accueil .conteneur { grid-template-columns: 1fr; min-height: 0; padding-top: 44px; padding-bottom: 44px; gap: 32px; }
  .a-hero .bandeau-accueil .conteneur { padding-top: calc(32px + var(--entete-h)); padding-bottom: 36px; min-height: 0; }
  .bandeau-accueil h1 { font-size: 2.5rem; }
  .hero-identite { font-size: 1rem; margin-bottom: 14px; }
  .badges { padding-top: 20px; }
  .badges li { width: 100%; }
  .chiffres { gap: 12px 28px; }
  .chiffres b { font-size: 1.35rem; }
  .defile-logos { --ecart: 40px; }
  .defile-logos img { height: 38px; }
  .defile-logos .logo-carre img { height: 52px; }
  .defile-logos .logo-large img { height: 28px; }
  .defile-logos .logo-tres-large img { height: 22px; }
  .methode-tete, .methode-corps, .appel-final .conteneur { grid-template-columns: 1fr; }
  .methode-tete img { max-width: 140px; }
  .appel-final img { display: none; }
  .avis { padding: 48px 0 40px; }
  .defile-extraits li::after { margin: 0 28px 0 20px; }
  .defile-extraits .auteur { font-size: .92rem; }
  .avis-liste { columns: 1; }
}

/* « Le point, après la décision » : à l'arrivée d'un titre de section à l'écran, son point orange
   tombe de quelques pixels et se pose, une seule fois (site.js, bloc 7). Animé par « top » et non
   par « transform » : le point reste en ligne avec le texte, sans point de coupure qui pourrait
   l'envoyer seul à la ligne. Sans script ou animations réduites : le point est déjà là. */
.titre-vivant .point { position: relative; top: -.7em; opacity: 0; }
.titre-vivant.vu .point { animation: poser .45s cubic-bezier(.34, 1.56, .64, 1) .15s forwards; }
.titre-vivant.vu .point:nth-of-type(2) { animation-delay: .35s; }
.titre-vivant.vu .point:nth-of-type(3) { animation-delay: .55s; }
@keyframes poser { to { opacity: 1; top: 0; } }

/* --- Animations réduites : rien ne bouge, nulle part --- */
@media (prefers-reduced-motion: reduce) {
  .defile .defile-piste, .defile-logos li { animation: none !important; }
  .defile-logos img, .declencheur-presentation .lecture, .defile-extraits .extrait, .avis-liste figure, .avis-complet summary, .avis-complet summary::after { transition: none; }
  .titre-vivant .point { top: 0; opacity: 1; animation: none !important; }
  .entete.anime, .entete-nav a, .entete-linkedin svg, .bouton { transition: none; }
  .bouton:hover, .bouton:focus-visible { transform: none; }
  .bouton::after { display: none; }
}
@media print { .titre-vivant .point { top: 0; opacity: 1; } }

/* Petits écrans. En-tête mesuré le 15/10/2026 : logo, nom et métier (453 px) + menu complet (852 px)
   tiennent à partir de 1400 px ; de 1200 à 1399 px, le métier se retire (le nom reste) ;
   sous 1200 px, menu repliable, et la place revient au métier. */
/* Remesuré le 17/10/2026, menu « Conseil et accompagnement », plus long que « Être accompagné » : le menu complet
   demande 905 px, le logo avec le nom et le métier 453 px. Avec un écart de 16 px entre les liens et un en-tête
   plafonné à 1440 px, tout tient à partir de 1440 px (10 px de marge, Chromium et WebKit) ; de 1240 à 1439 px, le métier se retire ;
   sous 1240 px, menu repliable (à 1200 px, le menu complet débordait de 27 px). */
@media (min-width: 1240px) and (max-width: 1439px) { .entete-metier { display: none; } }
@media (max-width: 1239px) {
  .entete-menu { display: block; }
  .entete-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--ngage-blanc); border-bottom: 1px solid var(--ngage-brume); padding: 8px 24px 20px; }
  .entete-nav.ouverte { display: flex; }
  .entete-nav a { padding: 12px 0; width: 100%; border-top: 1px solid var(--ngage-brume); }
  .entete-nav a.bouton { width: auto; margin-top: 12px; padding: 12px 22px; }
  .entete-nav a:not(.bouton) { padding: 12px 0; background-size: 0 2px; }
  .entete-linkedin-texte { display: inline; }
}
/* Téléphone : le nom reste à côté du logo, le métier se retire (le hero le dit juste dessous) */
@media (max-width: 600px) {
  :root { --entete-h: 65px; }
  .entete-ligne { gap: 12px; min-height: 64px; }
  .entete-marque { gap: 10px; }
  .entete-logo img { height: 34px; }
  .entete-identite { padding-left: 10px; }
  .entete-nom { font-size: .88rem; }
  .entete-metier { display: none; }
}
@media (max-width: 359px) { .entete-identite { display: none; } }
@media (max-width: 760px) {
  body { font-size: 17px; }
  .section { padding: 56px 0; }
  .bandeau-bleu { padding: 56px 0; }
  .familles, .serie, .qui, .bandeau-accueil .conteneur, .fiche-infos { grid-template-columns: 1fr; }
  .fiche-infos dt { border-bottom: 0; padding-bottom: 0; }
  .hexagone { display: none; } /* sur un téléphone, il passerait derrière le titre */
  .qui img { max-width: 220px; }
}

/* ===== Pages intérieures : catalogue et Embarquer vos équipes (tâche 6, 16/10/2026) =====
   Règles AJOUTÉES ici, sans rien changer à celles de l'accueil. Elles servent aussi aux pages des
   tâches 7 à 9 (fiches de formation, services, À propos). */

/* --- Bandeau de tête d'une page intérieure : même bleu que l'accueil, plus court, sans fond animé.
   Classe « hero » : l'en-tête reste transparent par-dessus (site.js, bloc 8) ; la page recopie la
   « parade de l'éclair » de l'accueil dans son <head>. Le haut du bandeau laisse la place de l'en-tête. */
.a-hero main > .hero.bandeau-page { padding-top: calc(72px + var(--entete-h)); }
.bandeau-page { padding-bottom: 64px; }
.bandeau-page .sous-titre { max-width: 52ch; }
.bandeau-page h1 { max-width: 26ch; } /* « Catalogue des formations » tient sur une ligne (pas d'hexagone à éviter) */
.bandeau-page .badges { margin-top: 36px; }
.bandeau-page .boutons + .badges { margin-top: 40px; }
/* Pas d'hexagone dans ce bandeau : en haut il passe derrière le menu, en bas derrière les badges (essayé le 16/10). */

/* --- Accroche d'une page : texte à gauche, boucle vidéo à droite --- */
.intro-video { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.intro-video .intro { margin: 0; }

/* --- Fiche tirée de l'offre (offre_site.py) : icônes des rubriques, listes dans les définitions --- */
.fiche-infos dt { display: flex; align-items: flex-start; gap: 10px; }
.fiche-infos dt .icone { width: 22px; height: 22px; margin-top: 2px; }
.fiche-infos dd .liste-filets { margin: 0; }
.fiche-infos dd .liste-filets li:first-child { border-top: 0; padding-top: 0; }
.fiche-infos dd .liste-filets li:last-child { border-bottom: 0; padding-bottom: 0; }
.intertitre { margin-top: 1.4em; color: var(--ngage-encre); font-size: 1.15rem; } /* intertitres du programme : classe posée par offre_site.py */
.telecharger { margin: 40px 0 0; }
/* Sur fond voile, le filet brume ne se voit presque plus : filets en ciel */
.section-voile .liste-filets li, .section-voile .fiche-infos dt, .section-voile .fiche-infos dd { border-color: var(--ngage-ciel); }

/* --- Catalogue : sommaire, une section par formation, logos des outils en couleurs d'origine --- */
.sommaire { border-bottom: 1px solid var(--ngage-brume); }
.sommaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; padding: 20px 0; }
.sommaire a { font-weight: 700; text-decoration: none; }
/* Flèche vers le bas (un lien vers plus bas dans la page). Décorative : texte de remplacement vide
   (« / "" ») pour qu'un lecteur d'écran ne l'annonce pas ; la première ligne sert de repli aux
   navigateurs qui ne connaissent pas cette écriture et ignorent alors la seconde. */
.sommaire a::after { content: " \2193"; content: " \2193" / ""; }
.sommaire a:hover { text-decoration: underline; }
.catalogue-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.catalogue-tete h2 { margin: 0; }
.catalogue-tete .logos-outils { margin: 0; } /* logos : règle .logos-outils plus haut, jamais de filtre */
.catalogue-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.catalogue-corps .intro { color: var(--ngage-encre); }
.catalogue-corps .fiche-infos { grid-template-columns: 180px 1fr; margin: 24px 0 0; }
.catalogue-corps h3 { margin-top: 0; }
.liens-suite { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; }
.sommaire ~ .section[id] { scroll-margin-top: calc(var(--entete-h) + 8px); } /* ancre du sommaire : le titre n'arrive pas sous l'en-tête collant */

@media (max-width: 760px) {
  .a-hero main > .hero.bandeau-page { padding-top: calc(40px + var(--entete-h)); }
  .bandeau-page { padding-bottom: 44px; }
  .intro-video, .catalogue-corps { grid-template-columns: 1fr; gap: 28px; }
  .catalogue-corps .fiche-infos { grid-template-columns: 1fr; }
  .sommaire ul { gap: 6px 24px; padding: 16px 0; }
}

/* ===== Pages outil : Fondamentaux, Copilot 365, Claude, ChatGPT (tâche 7, 16/10/2026) =====
   Logos des outils dans le bandeau bleu, chacun sur une pastille blanche de 4 px : sur le bleu, le logo
   noir de ChatGPT disparaissait et ceux de Word et d'Outlook pâlissaient. La pastille garde les couleurs
   officielles telles quelles (règle des marques des autres) ; coins de 6 px comme les badges. */
.logos-bandeau { margin: 28px 0 0; gap: 10px; }
.logos-bandeau img { box-sizing: content-box; padding: 4px; background: var(--ngage-blanc); border-radius: var(--ngage-arrondi); }
.intro-video .liens-suite { margin-top: 20px; }
/* Ronde 1 de relecture (16/10/2026) : pastilles de même taille (les logos vont de 30 à 35 px de large ;
   le logo est contenu dans un carré de 32 px, sans être déformé ni recoloré). */
.logos-bandeau img { width: 32px; height: 32px; object-fit: contain; }
/* Section voile des fiches : premier bloc de la fiche (formats, public, prérequis) à côté de la vidéo */
.intro-fiche { align-items: start; }
.intro-fiche .fiche-infos { grid-template-columns: 170px 1fr; margin: 0; }
.intro-fiche .intro + .fiche-infos, .intro-fiche .liens-suite + .fiche-infos { margin-top: 28px; }
@media (max-width: 760px) { .intro-fiche .fiche-infos { grid-template-columns: 1fr; } }

/* ===== Pages de service : Automatiser ou outiller, Être accompagné (tâche 8, 16/10/2026) =====
   Déroulé numéroté (<ol class="liste-filets">) : la liste à filets retire les puces (list-style: none),
   ce qui effaçait aussi les numéros. Ils sont redessinés par un compteur, en bleu et gras, dans une
   colonne fixe à gauche, jamais en orange. */
ol.liste-filets { counter-reset: etape; }
ol.liste-filets > li { counter-increment: etape; position: relative; padding-left: 2.2em; }
ol.liste-filets > li::before { content: counter(etape); position: absolute; left: 0; top: 12px; min-width: 1.4em;
  color: var(--ngage-bleu); font-weight: 700; }
/* Outils de l'automatisation, sur fond blanc : n8n en avant, plus grand que les autres */
.logos-service { margin: 4px 0 20px; gap: 22px; align-items: flex-end; }
.logos-outils img.logo-principal { height: 48px; }
.logos-service .outil { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: .85rem; line-height: 1.2; color: var(--ngage-ia); text-align: center; }
/* Très petit écran (320 px) : les trois outils restent sur une ligne, noms sur deux lignes, n8n un peu réduit */
@media (max-width: 359px) {
  .logos-service { gap: 14px; }
  .logos-service .outil { max-width: 5.2em; }
  .logos-outils img.logo-principal { height: 40px; }
}

/* Ronde 1 de la tâche 8 (16/10/2026) : une icône par prestation (« Ce que je fais ») et par étape
   (« Déroulé ») sur les pages de service. L'icône occupe une colonne fixe, le texte la suivante ; dans le
   Déroulé, le numéro garde sa colonne à gauche, l'icône vient après lui. Classe posée par offre_site.py. */
.liste-filets li.avec-icone { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; align-items: start; }
.liste-filets li.avec-icone .icone { width: 24px; height: 24px; margin-top: 1px; }

/* Pied de page : mention des marques citées (décision de Nicolas du 16/10/2026), discrète, en dernier */
.pied-mentions .pied-marques { flex-basis: 100%; font-size: .8rem; }

/* ===== Pages secondaires : À propos, Contact, Association, pages légales, 404 et 401 (tâche 9, 16/10/2026) =====
   Règles AJOUTÉES ici, sans rien changer à celles des pages déjà validées. */

/* À propos : le bandeau passe en deux colonnes, la présentation « Mayday » à droite
   (même déclencheur au clic que l'accueil : rien n'est chargé avant le clic, site.js bloc 4). */
.bandeau-presentation .conteneur { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px 56px; align-items: center; }
.bandeau-presentation .boutons { margin-top: 8px; }
/* Illustration du parcours, du phare au réseau d'IA (À propos seulement, choix de Nicolas du 15/10) */
.illustration-parcours { margin: 8px 0 36px; }
.illustration-parcours img { width: 100%; height: auto; border-radius: var(--ngage-arrondi); }

/* Contact : le formulaire à gauche, les coordonnées à droite */
.contact-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.contact-grille h2 { margin-top: 0; font-size: 1.6rem; }
.contact-grille form .bouton { margin-top: 24px; }
form textarea { min-height: 9em; resize: vertical; }
/* Piège à robots (champ « siteweb ») : hors de l'écran pour les humains, rempli par les robots,
   écarté par envoyer.php. Ni display:none ni visibility:hidden : certains robots les repèrent. */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note-rgpd { font-size: .9rem; color: var(--ngage-ia); margin: 20px 0 0; }
/* Message après l'envoi (adresse « ?status=success » ou « error », posée par envoyer.php) */
.message-formulaire { display: flex; gap: 12px; align-items: flex-start; color: var(--ngage-encre); font-weight: 700; padding: 16px 22px; margin: 0 0 32px; }
.message-formulaire:empty { display: none; }
.message-formulaire .icone { width: 24px; height: 24px; margin-top: 1px; }
/* Succès et échec se distinguent sans couleur d'alerte (charte) : fond voile et coche pour le succès,
   fond blanc encadré d'encre et triangle d'avertissement pour l'échec (ronde 1 du 16/10/2026) */
.message-formulaire.ok { background: var(--ngage-voile); }
.message-formulaire.erreur { background: var(--ngage-blanc); border: 2px solid var(--ngage-encre); }
.message-formulaire.erreur .icone { color: var(--ngage-encre); }
.message-formulaire:focus { outline: none; } /* focus posé par le script pour la lecture d'écran, pas par le visiteur */
.coordonnees h3 { font-size: 1.05rem; margin: 0 0 4px; }
.coordonnees p { margin: 0 0 20px; }

/* Association : les deux membres du bureau, les soutiens */
.equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 40px 56px; margin-top: 32px; }
.equipe img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--ngage-arrondi); margin-bottom: 16px; }
.equipe h3 { margin-bottom: .2em; }
.equipe .role { color: var(--ngage-bleu); font-weight: 700; margin: 0 0 .6em; }
.soutiens { gap: 24px 48px; }
.soutiens img { height: 28px; width: auto; } /* couleurs d'origine, jamais de filtre */
.soutiens img.logo-canva { height: 38px; }

/* Pages légales et pages d'erreur : rien de plus que le texte (contenu-texte) et les boutons du bandeau */

/* Encadré sur fond voile : il passe en blanc, sinon il disparaît dans le fond */
.section-voile .encadre-resume { background: var(--ngage-blanc); }
/* Un intertitre qui suit une rangée de liens garde de l'air au-dessus */
.contenu-texte .liens-suite + h3 { margin-top: 48px; }
/* Chiffres dans une colonne de texte (Association) : toute la largeur, pour tenir sur une ligne */
.contenu-texte > .chiffres { max-width: none; }

@media (max-width: 760px) {
  .bandeau-presentation .conteneur, .contact-grille, .equipe { grid-template-columns: 1fr; }
  .contact-grille { gap: 40px; }
  /* Présentation d'À propos sur téléphone : la légende passe sous l'image et le bouton lecture en haut
     à droite, sinon ils cachent la phrase « Mais d'abord, d'où je viens. » de l'image d'attente */
  .bandeau-presentation .declencheur-presentation > span:not(.lecture) { position: static; display: block; }
  .bandeau-presentation .declencheur-presentation .lecture { top: 12px; bottom: auto; }
}

/* ===== Nom « N-Gage » (tâche 9, ronde 2, 16/10/2026) =====
   Le nom ne doit pas se couper au trait d'union en fin de ligne (« N- / Gage »). On garde le trait
   d'union ORDINAIRE, pour que le nom reste intact : la recherche dans la page (Cmd+F « N-Gage ») et les
   moteurs le trouvent tel quel (consigne de Nicolas : « ne pas dénaturer mon nom »). C'est la feuille
   qui empêche la coupure, sur le <span class="nom-marque"> posé autour du nom dans le texte. */
.nom-marque { white-space: nowrap; }

/* ===== Ressources : pages d'accueil (tâche R, 16/10/2026) =====
   Page d'accueil de /ressources/ (pilote), puis capsules/, guides/ et conformite/ (phase B).
   Règles AJOUTÉES ici, sans rien changer à celles des pages déjà validées.
   - Encadré d'information : la famille de l'encadré de résumé (fond voile, angles droits), mais seule la
     première phrase est en gras ; une icône bleue à gauche. Jamais d'orange, ni en texte ni en lien.
   - Cartes : un lien entier par carte, image d'origine en tête (pleine largeur, sans voile ni dégradé
     par-dessus), titre en encre avec son point, filet brume, coins de 6 px (comme les photos et les
     boutons), aucune ombre. Au survol : filet et titre en bleu, la carte se soulève de 2 px, comme un bouton. */
.encadre-info { display: flex; gap: 16px; align-items: flex-start; width: fit-content; max-width: 100%; background: var(--ngage-voile); color: var(--ngage-encre); padding: 20px 24px; margin: 0 0 48px; } /* calé sur son texte : pas de grand vide à droite */
.encadre-info .icone { width: 28px; height: 28px; margin-top: 1px; }
.encadre-info p { margin: 0; max-width: 84ch; }
.encadre-info a { white-space: nowrap; } /* l'adresse ne se coupe pas à son trait d'union */
.cartes-ressources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.carte-ressource { display: flex; flex-direction: column; text-decoration: none; color: var(--ngage-texte); background: var(--ngage-blanc);
  border: 1.5px solid var(--ngage-brume); border-radius: var(--ngage-arrondi); overflow: hidden;
  transition: border-color .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.carte-ressource img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.carte-ressource-corps { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 20px; }
.carte-ressource h2 { font-size: 1.45rem; line-height: 1.15; margin: 0 0 10px; transition: color .2s ease; }
.carte-ressource-format { font-size: .92rem; line-height: 1.4; color: var(--ngage-ia); margin: 0 0 14px; }
.carte-ressource-format b { color: var(--ngage-bleu); }
.carte-ressource-texte { font-size: 1rem; margin: 0 0 20px; }
/* Pied de carte : la phrase, puis le lien dessous, sur toutes les cartes (côte à côte, la plus longue phrase renvoyait seule son lien à la ligne) */
.carte-ressource-pied { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--ngage-brume); font-size: .95rem; color: var(--ngage-ia); max-width: none; }
.carte-ressource .suite { color: var(--ngage-bleu); }
/* Survol seulement sur un appareil qui survole vraiment : sur téléphone, il restait collé après un toucher */
@media (hover: hover) {
  .carte-ressource:hover { border-color: var(--ngage-bleu); transform: translateY(-2px); }
  .carte-ressource:hover h2 { color: var(--ngage-bleu); }
}
.carte-ressource:focus-visible { border-color: var(--ngage-bleu); transform: translateY(-2px); }
.carte-ressource:focus-visible h2 { color: var(--ngage-bleu); }
/* Tablette (640 à 960 px) : une carte par ligne, image à gauche ; téléphone : image au-dessus, pleine largeur */
@media (max-width: 960px) { .cartes-ressources { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (min-width: 640px) and (max-width: 960px) {
  .carte-ressource { flex-direction: row; }
  .carte-ressource img { flex: 0 0 38%; width: 38%; height: auto; aspect-ratio: auto; align-self: stretch; object-position: 75% 50%; } /* le sujet des trois images est à droite */
}
@media (max-width: 760px) { .encadre-info { padding: 18px 18px; margin-bottom: 36px; } .carte-ressource-corps { padding: 20px 18px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .carte-ressource, .carte-ressource h2 { transition: none; }
  .carte-ressource:hover, .carte-ressource:focus-visible { transform: none; }
}

/* ===== Ressources : pages de rubrique, capsules/, guides/, conformite/ (tâche R, phase B1, 16/10/2026) =====
   Mêmes briques que la page d'accueil de /ressources/ (bloc précédent), plus :
   - un fil d'Ariane sous le bandeau, sur le modèle du sommaire du catalogue (filet brume, liens bleus en gras) ;
     séparateur « / » en pointillé, jamais en orange ; la page en cours en encre, sans lien ;
   - l'encadré d'information avec un titre (« À qui s'adressent… ») et plusieurs paragraphes ;
   - des titres de rubrique (capsules : « Comprendre l'IA. », etc.), avec leur point ;
   - des vignettes au format 16/9 (les images de ces pages sont en 16/10 ou 16/9, pas en 21/9 comme la page
     d'accueil) et une grille à deux colonnes quand il n'y a que deux cartes. */
/* Fil d'Ariane : depuis le 17/10/2026 (demande de Nicolas : « un retour à l'accueil sur toutes les pages »), il est
   sur TOUTES les pages intérieures, en tête du bandeau bleu, au-dessus du titre : « Accueil › rubrique › page ».
   Discret : petit texte ciel, liens blancs en gras, séparateur « › » ciel, jamais d'orange. Il était sous le bandeau
   sur les rubriques de /ressources/ : il remonte dans le bandeau, partout pareil. La page en cours n'est pas un lien. */
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; margin: 0 0 32px; padding: 0; font-size: .95rem; line-height: 1.4; color: var(--ngage-ciel); }
.fil-ariane li + li::before { content: "\203A"; content: "\203A" / ""; margin: 0 10px; color: var(--ngage-ciel); }
.fil-ariane a { color: var(--ngage-blanc); font-weight: 700; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--ngage-ciel); }
/* Le fil prend la place du haut du bandeau : moins de marge au-dessus du titre (le bandeau garde sa hauteur, à peu près) */
.a-hero main > .hero.bandeau-page:has(.fil-ariane) { padding-top: calc(32px + var(--entete-h)); }
.bandeau-presentation .fil-ariane { grid-column: 1 / -1; }          /* À propos : bandeau en deux colonnes */
.bandeau-presentation .fil-ariane ol { margin-bottom: 0; }         /* l'écart de la grille suffit */
@media (max-width: 760px) {
  .a-hero main > .hero.bandeau-page:has(.fil-ariane) { padding-top: calc(20px + var(--entete-h)); }
  .fil-ariane ol { margin-bottom: 24px; font-size: .9rem; }
  .fil-ariane li + li::before { margin: 0 8px; }
}
.encadre-info-titre { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .5em; }
.encadre-info > div > p + p { margin-top: .7em; }
.titre-rubrique { font-size: 1.7rem; margin: 64px 0 24px; }
.titre-rubrique:first-of-type { margin-top: 0; }
.cartes-detail .carte-ressource img { aspect-ratio: 16 / 9; }
.carte-ressource h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 10px; transition: color .2s ease; }
@media (hover: hover) { .carte-ressource:hover h3 { color: var(--ngage-bleu); } }
.carte-ressource:focus-visible h3 { color: var(--ngage-bleu); }
.cartes-ressources.deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) and (max-width: 960px) { .cartes-detail .carte-ressource img { aspect-ratio: auto; } }
@media (max-width: 960px) { .cartes-ressources.deux-colonnes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .titre-rubrique { font-size: 1.45rem; margin-top: 48px; } }
/* Téléphone : l'icône de l'encadré passe au-dessus du texte, qui reprend toute la largeur (sinon une colonne
   étroite sous une icône, pour des encadrés de trois paragraphes) */
@media (max-width: 600px) { .encadre-info { flex-direction: column; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .carte-ressource h3 { transition: none; } }

/* Pied commun : le numéro de téléphone ne se coupe plus (il passait sur deux lignes à 320 px, phase B1) */
.pied a[href^="tel:"] { white-space: nowrap; }

/* ===== Accueil : bloc « Coaching individuel IA » (17/10/2026) =====
   Priorité commerciale de Nicolas, trop difficile à trouver : un bandeau bleu (accroche au milieu de la page) juste
   après « Ce que je fais pour vous ». Variante A de _essais-coaching-accueil.html. Titre, phrase et bouton blanc (avec
   le laser des boutons blancs, site.js bloc 10) à gauche ; trois repères à droite, icônes ciel, filets blancs légers.
   Textes repris de l'offre (OFFRE-NGAGE.md, « Service : Coaching individuel IA »), jamais de tarif. */
.coaching-accueil { padding: 72px 0; }
.coaching-accueil-grille { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 64px; align-items: center; }
.coaching-accueil .boutons { margin-top: 24px; }
.coaching-accueil-points { list-style: none; margin: 0; padding: 0; }
.coaching-accueil-points li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .25); color: var(--ngage-ciel); }
.coaching-accueil-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.coaching-accueil-points b { color: var(--ngage-blanc); }
.coaching-accueil-points .icone { width: 26px; height: 26px; color: var(--ngage-ciel); }
@media (max-width: 760px) {
  .coaching-accueil { padding: 56px 0; }
  .coaching-accueil-grille { grid-template-columns: 1fr; }
}

/* ===== Page « Formation IA à Toulouse » (17/10/2026) : questions fréquentes =====
   Une question par <details>, filet léger entre deux, chevron repris du dépliant des avis (.avis-complet).
   Le texte des réponses est recopié tel quel dans le JSON-LD FAQPage de la page : changer les deux ensemble. */
.questions { max-width: 820px; margin-top: 28px; }
.questions details { border-top: 1px solid var(--ngage-brume); }
.questions details:last-child { border-bottom: 1px solid var(--ngage-brume); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer;
  font-weight: 700; font-size: 1.15rem; color: var(--ngage-encre); list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { color: var(--ngage-bleu); }
.questions summary:focus-visible { outline: 2px solid var(--ngage-bleu); outline-offset: 3px; }
.questions summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ngage-bleu); border-bottom: 2px solid var(--ngage-bleu);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.questions details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.questions details p { margin: 0 0 20px; }
@media (prefers-reduced-motion: reduce) { .questions summary::after { transition: none; } }

/* ===== À propos : photo d'intervention à côté de « Ce qui me définit » (17/10/2026, variante B choisie par Nicolas) =====
   Seule vraie photo de Nicolas au micro devant une salle (MY JEP de Nîmes, photographe de l'événement). Grille .qui élargie
   à 300 px pour une photo en pied, coins de 6 px (exception DESIGN.md), légende factuelle : c'est un pitch, pas une formation.
   Essais : _essais-photo-myjep.html. */
.qui-photo { grid-template-columns: 300px 1fr; margin-top: 24px; }
.qui-photo .liste-filets { margin-top: 0; }
.photo-intervention { margin: 0; }
.photo-intervention img { display: block; width: 100%; height: auto; border-radius: var(--ngage-arrondi); }
.photo-intervention figcaption { margin-top: 10px; font-size: .95rem; color: var(--ngage-ia); }
@media (max-width: 760px) { .qui-photo { grid-template-columns: 1fr; } .qui-photo .photo-intervention { max-width: 320px; } }