/* ==========================================================================
   SOCLE GRAPHIQUE COMMUN — Groupe HECATE GLOBAL · charte web « Veille » (v3)
   Partagé par : Sérénité 24H24 · Intégral 24H24 · HECATE GLOBAL
   (accueil, pages légales, actualités, page 404, mesure d'audience)

   Chaque structure ne surcharge que ses variables dans son theme.css :
     --accent, --accent-clair      couleur d'accent de la structure
     --nuit, --nuit-rgb            teinte des bandes sombres
     --halo                        couleur (r,v,b) des halos lumineux
     --lueur, --silhouette, --point  couleurs (r,v,b) de la carte de nuit
     --picto-jour, --picto-nuit    départ du dégradé des icônes en pointillés
   L'orangé #DB5A29 est commun à tout le groupe.

   Principes : typographie retenue (Public Sans, police du groupe, poids 600,
   titres en deux tons), alternance blanc / nuit / blanc cassé / photo plein
   écran, filets fins, carte de France en points, icônes en pointillés.

   SOMMAIRE
     1. Polices et variables          12. Pour qui (blanc cassé)
     2. Base                          13. Photo plein écran
     3. Boutons, étiquettes           14. Engagements, agréments
     4. Barre du groupe, en-tête      15. Actualités
     5. Haut de page (hero)           16. Le groupe, recrutement
     6. Bande nuit : carte vivante    17. Clients
     7. Métiers                       18. Contact et formulaire
     8. À propos et chiffres          19. Appel à l'action et pied de page
     9. Scénario                      20. Pages simples : légal, actualités, 404
    10. Apparitions                   21. Mesure d'audience (page cookies)
    11. Barre d'action mobile         22. Adaptatif, mouvement réduit, impression
   ========================================================================== */

/* 1. POLICES ET VARIABLES --------------------------------------------------- */
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: optional; src: url("../polices/PublicSans-Regular.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2248, U+2264-2265, U+25CF; }
@font-face { font-family: "Public Sans"; font-weight: 500; font-display: optional; src: url("../polices/PublicSans-Medium.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2248, U+2264-2265, U+25CF; }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: optional; src: url("../polices/PublicSans-SemiBold.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2248, U+2264-2265, U+25CF; }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: optional; src: url("../polices/PublicSans-Bold.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2199, U+2212, U+2248, U+2264-2265, U+25CF; }

:root {
  --accent: #0058A3; --accent-clair: #4C9BE0; --orange: #DB5A29;
  --nuit: #060D18; --nuit-rgb: 6,13,24; --halo: 0,88,163; --braise: 219,90,41;
  --lueur: 76,155,224; --silhouette: 7,22,44; --point: 84,146,232;
  --picto-jour: #0058A3; --picto-nuit: #96CCFA;
  --encre: #0A1524; --texte: #49525F; --discret: #5F6A78; --gris: #6B7583;
  --filet: #E6E8EC; --creme: #F5F3EF; --doux: #F3F4F6; --vert: #1FA971;
  --police: "Public Sans", Arial, Helvetica, sans-serif;
  --entete-h: 72px; --section-y: 120px; --rayon: 16px; --rayon-petit: 10px;
  --ombre: 0 24px 44px -28px rgba(10,21,36,.4);
  --orange-pale: #FCEDE6;
  /* --accent-texte : variante de l'accent assez foncée pour du texte sur fond clair (le thème la redéfinit si l'accent ne contraste pas assez) */
  --accent-texte: var(--accent);
  color-scheme: light;
}

/* 2. BASE ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15.5px/1.62 var(--police); color: var(--texte); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[class] { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; } img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; }
h1, h2, h3, h4 { font-weight: 600; color: var(--encre); letter-spacing: -.028em; line-height: 1.1; }
h1 i, h2 i { font-style: normal; color: var(--gris); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px #fff; } .nuit :focus-visible, .sombre :focus-visible, .pied :focus-visible, .entete--nuit :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--accent); }
[id] { scroll-margin-top: calc(var(--entete-h) + 24px); }
.c { width: min(100% - 96px, 1240px); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.trait-haut { padding-top: 28px; border-top: 1px solid var(--filet); }
.invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 500; padding: 10px 18px; border-radius: 999px; font-weight: 600; color: #fff; background: var(--encre); transition: top .2s; } .lien-evitement:focus { top: 12px; }
.fleche { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.picto { display: block; fill: var(--picto-jour); }

/* 3. BOUTONS, ÉTIQUETTES ---------------------------------------------------- */
.etiq { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--encre); }
.etiq::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid #D5D9DF; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--encre); background: #fff; white-space: nowrap; transition: border-color .25s, transform .25s, box-shadow .25s, background .25s; }
.btn:hover { border-color: var(--encre); transform: translateY(-1px); } .btn:hover .fleche { transform: translate(2px, -2px); }
.btn--nuit, .btn--plein { color: #fff; border: 0; background: radial-gradient(120% 160% at 100% 100%, rgba(var(--braise),.78) 0%, rgba(var(--braise),0) 45%), linear-gradient(100deg, rgba(var(--halo),0) 20%, rgba(var(--halo),.72) 100%), var(--nuit); box-shadow: 0 10px 24px -12px rgba(var(--nuit-rgb),.7); }
.btn--nuit:hover, .btn--plein:hover { box-shadow: 0 16px 30px -12px rgba(var(--nuit-rgb),.8); }
.btn--clair { color: var(--encre); border: 0; background: #fff; }
.btn--verre { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .btn--verre:hover { border-color: rgba(255,255,255,.5); }
.btn--petit { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* 4. BARRE DU GROUPE, EN-TÊTE ---------------------------------------------- */
.groupe { font-size: 12.5px; color: var(--gris); border-bottom: 1px solid var(--filet); background: #fff; }
.groupe .c { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 36px; }
.groupe b { font-weight: 600; letter-spacing: .08em; color: var(--encre); }
.groupe ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; } .groupe li a { transition: color .2s; } .groupe li a:hover { color: var(--encre); }
.groupe .court { display: none; }
.groupe .ici { font-weight: 600; color: var(--encre); } .groupe .ici::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--orange); vertical-align: 2px; }
.groupe .bientot { opacity: .6; }

.entete { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid transparent; transition: border-color .3s; }
.entete.defile { border-color: var(--filet); }
.entete .c { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: var(--entete-h); }
.entete__logo img { width: auto; height: 44px; }
.entete__nav { display: flex; align-items: center; gap: 28px; }
.entete__menu { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; color: var(--encre); }
.entete__menu a { position: relative; padding-block: 6px; white-space: nowrap; } .entete__menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--encre); transition: right .3s cubic-bezier(.2,.7,.2,1); } .entete__menu a:hover::after, .entete__menu a.actif::after, .entete__menu a[aria-current="page"]::after { right: 0; }
/* sous-menus déroulants : au survol, au clavier (focus) ou par le bouton (écrans tactiles) */
.entete__menu > li { position: relative; } .a-sous-menu > a { margin-right: 14px; }
.sous-menu__bouton { position: absolute; right: -10px; top: 50%; width: 28px; height: 28px; padding: 0; border: 0; color: var(--encre); background: none; transform: translateY(-50%); } .sous-menu__bouton::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
.a-sous-menu:hover > .sous-menu__bouton::before, .a-sous-menu.ouvert > .sous-menu__bouton::before { transform: translateY(3px) rotate(-135deg); }
.sous-menu { position: absolute; left: -18px; top: 100%; z-index: 60; min-width: 250px; margin-top: 12px; padding: 10px; border: 1px solid var(--filet); border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -24px rgba(10,21,36,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu, .a-sous-menu.ouvert > .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu ul { margin: 0; padding: 0; list-style: none; } .sous-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 500; } .sous-menu a::after { display: none; } .sous-menu a:hover, .sous-menu a:focus-visible { background: var(--doux); }
.sous-menu--2 { display: grid; grid-template-columns: auto auto; gap: 0 14px; } .sous-menu__titre { padding: 8px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.entete__actions { display: flex; align-items: center; gap: 10px; padding-left: 28px; border-left: 1px solid var(--filet); } .entete__actions .btn { min-height: 40px; font-size: 13.5px; }
.entete__progression { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent-clair), var(--orange)); }
.burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--filet); border-radius: 50%; background: #fff; } .burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--encre); transition: transform .3s, opacity .3s; } .burger span { position: relative; } .burger span::before { position: absolute; top: -6px; } .burger span::after { position: absolute; top: 6px; }
.menu-ouvert .burger span { background: transparent; } .menu-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); } .menu-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* 5. HAUT DE PAGE ------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; }
.hero .c { position: relative; display: grid; grid-template-columns: minmax(0, 560px) 1fr; min-height: 680px; align-items: center; padding-block: 72px 88px; }
.hero__texte { position: relative; z-index: 2; }
.direct { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 5px 14px 5px 6px; border: 1px solid var(--filet); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--encre); background: #fff; }
.direct em { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 600; color: #0E6B45; background: #E2F5EB; } .direct em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); animation: pouls 1.8s ease-out infinite; }
.direct time { font-variant-numeric: tabular-nums; color: var(--gris); }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(31,169,113,.6); } 100% { box-shadow: 0 0 0 8px rgba(31,169,113,0); } }
@keyframes pouls-o { 0% { box-shadow: 0 0 0 0 rgba(var(--braise),.7); } 100% { box-shadow: 0 0 0 8px rgba(var(--braise),0); } }
.hero h1 { width: max-content; max-width: min(700px, 100%); font-size: 46px; }
.rot { display: inline-grid; vertical-align: top; color: var(--gris); } .rot__fixe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rot > span { grid-area: 1 / 1; white-space: normal; opacity: 0; transform: translateY(.4em); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); } .rot > span.on { opacity: 1; transform: none; } .rot > span.sort { transform: translateY(-.4em); }
.chapo { max-width: 47ch; margin-top: 24px; } .chapo b, .chapo strong { font-weight: 600; color: var(--encre); }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; max-width: 540px; margin-top: 32px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--encre); background: var(--doux); transition: background .25s; } .pastille::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--encre); } .pastille:hover { background: #E7E9ED; }
.pastilles .btn { min-height: 40px; }

.carte-jour { position: absolute; right: max(12px, calc(50% - 650px)); top: 49%; width: 630px; transform: translateY(-50%); }
.carte-jour svg { display: block; width: 100%; height: auto; overflow: visible; }
.carte-jour .pt { fill: #C9CED6; } .carte-jour .zone { fill: var(--accent); opacity: .55; }
.carte-jour .halo { fill: var(--accent); opacity: .35; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; } @keyframes halo { to { transform: scale(4.5); opacity: 0; } }
.carte-jour .site { fill: var(--accent); stroke: #fff; stroke-width: 2.5; } .carte-jour .siege { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.implantations li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: baseline; gap: 7px; padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; font-size: 12px; line-height: 1.3; white-space: nowrap; color: var(--discret); background: rgba(255,255,255,.94); box-shadow: 0 8px 20px -12px rgba(10,21,36,.35); } .implantations b { font-size: 12.5px; font-weight: 600; color: var(--encre); }
.implantations [data-place="g"] { transform: translate(calc(-100% - 16px), -50%); } .implantations [data-place="d"] { transform: translate(16px, -50%); } .implantations [data-place="hg"] { transform: translate(calc(-100% + 14px), calc(-100% - 14px)); } .implantations [data-place="bg"] { transform: translate(calc(-100% + 14px), 14px); }
.sans-js .carte-jour { display: none; }
/* visuels signature (commun/js/visuels.js) : même emplacement que la carte, une toile et des étiquettes placées en pourcentage */
.carte-jour--visuel canvas { display: block; width: 100%; aspect-ratio: 630 / 580; }

/* 6. BANDE NUIT : LA CARTE VIVANTE ------------------------------------------- */
.nuit { position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.66); background: var(--nuit); }
.nuit h2, .nuit h3 { color: #fff; } .nuit h2 i { color: rgba(255,255,255,.62); } .nuit .etiq { color: #fff; }
.vivante { position: relative; height: 760px; } .vivante canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vivante::after { content: ""; position: absolute; inset: auto 0 0; height: 130px; background: linear-gradient(180deg, rgba(var(--nuit-rgb),0), var(--nuit)); pointer-events: none; }
.accroche { position: absolute; left: max(48px, calc(50% - 620px)); top: 96px; z-index: 2; width: 380px; } .accroche h2 { margin-top: 16px; font-size: 32px; line-height: 1.16; }
.fil { position: absolute; left: max(48px, calc(50% - 620px)); bottom: 190px; z-index: 2; width: 340px; } .fil h3 { margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.6); }
.fil__liste li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: rgba(255,255,255,.55); animation: glisse .6s cubic-bezier(.2,.7,.2,1); } @keyframes glisse { from { opacity: 0; transform: translateY(-10px); } }
.fil__liste li:first-child { color: #fff; } .fil__liste time { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.66); } .fil__liste b { display: block; font-weight: 600; } .fil__liste li:first-child b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--orange); vertical-align: 2px; animation: pouls-o 1.4s ease-out infinite; }
.fil__note { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.62); }
.legende { position: absolute; right: max(48px, calc(50% - 620px)); bottom: 190px; z-index: 2; text-align: right; font-size: 12.5px; color: rgba(255,255,255,.5); } .legende b { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; } .legende span { display: block; max-width: 250px; margin: 8px 0 0 auto; } .legende b.legende__mot { font-size: 34px; letter-spacing: -.03em; line-height: 1.1; }

/* 7. MÉTIERS ------------------------------------------------------------------ */
.metiers { position: relative; z-index: 2; margin-top: -40px; padding-bottom: 104px; text-align: center; } .metiers h2 { margin: 14px 0 52px; font-size: 40px; }
.metiers__grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: left; }
.metiers__grille--6 { grid-template-columns: repeat(3, 1fr); } .metiers__grille--6 .metier { min-height: 232px; }
.metier { display: flex; flex-direction: column; min-height: 268px; padding: 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.055); transition: background .35s, transform .35s, border-color .35s; } a.metier:hover, .metier:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); transform: translateY(-4px); }
.metier .picto { width: 64px; height: 64px; margin-bottom: auto; } .metier__logo { display: flex; align-items: flex-end; height: 64px; margin-bottom: auto; } .metier__logo img { display: block; height: auto; } .metier h3 { display: flex; align-items: center; gap: 8px; margin-top: 40px; font-size: 15.5px; letter-spacing: -.01em; } .metier h3 .fleche { opacity: .6; } .metier p { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.nuit .picto, .carte-halo .picto, .actu--une .picto, .sombre .picto { fill: var(--picto-nuit); }
.experts { display: flex; align-items: center; gap: 16px; width: max-content; max-width: 100%; margin: 36px auto 0; padding: 8px 8px 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #fff; background: rgba(255,255,255,.06); }
.experts__rond { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(var(--halo),.9), rgba(var(--halo),.25)); } .experts__rond .picto { width: 24px; height: 24px; }
.experts a.tel { font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(255,255,255,.35); }

/* 8. À PROPOS ET CHIFFRES --------------------------------------------------- */
.apropos { display: grid; grid-template-columns: 1fr 1.35fr; gap: 96px; }
.apropos .lead { margin-top: 44px; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--encre); } .apropos .suite { margin-top: 18px; font-size: 14px; color: var(--discret); }
.reperes { margin-top: 36px; border-top: 1px solid var(--filet); } .reperes li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 14px; } .reperes b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); } .reperes--fiche li { grid-template-columns: 128px 1fr; }
.apropos .btn { margin-top: 28px; } .apropos__liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .apropos__liens .btn { margin-top: 0; } .apropos h2 { font-size: 30px; }
.bloc-chiffres { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 36px; }
.liste-chiffres { padding: 12px 28px; border: 1px solid var(--filet); border-radius: var(--rayon); } .liste-chiffres li { padding: 20px 0; border-bottom: 1px solid var(--filet); } .liste-chiffres li:last-child { border: 0; }
.liste-chiffres .etiq { font-size: 12.5px; font-weight: 400; color: var(--discret); } .liste-chiffres b { display: block; margin-top: 6px; font-size: 34px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--encre); } .liste-chiffres b small { margin-left: 4px; font-size: .55em; color: var(--gris); }
.carte-halo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 28px; border-radius: var(--rayon); color: #fff; background: radial-gradient(90% 70% at 50% 35%, rgba(var(--halo),.85), transparent 70%), radial-gradient(60% 50% at 80% 0%, rgba(var(--braise),.45), transparent 70%), var(--nuit); }
.carte-halo .picto { position: absolute; left: 26px; top: 26px; width: 92px; height: 92px; }
/* l'emblème de la structure, en points qui se rassemblent (commun/js/visuels.js) ; sans JavaScript, l'icône reste en place */
.carte-halo__toile { position: relative; flex: 1 1 auto; min-height: 170px; margin: -28px -28px 14px; } .carte-halo__toile canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .carte-halo.a-embleme .picto { display: none; } .carte-halo[data-visuel] { cursor: pointer; } .carte-halo h3 { font-size: 21px; color: #fff; } .carte-halo p { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.7); }

/* 9. SCÉNARIO ----------------------------------------------------------------- */
.declaration { position: relative; isolation: isolate; overflow: hidden; padding-block: 128px 120px; color: rgba(255,255,255,.6); background: var(--nuit); }
.declaration::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 78% 48%, rgba(var(--halo),.55), transparent 70%), radial-gradient(30% 40% at 96% 88%, rgba(var(--braise),.32), transparent 70%); }
.declaration h2, .declaration h3 { color: #fff; } .declaration h2 i { color: rgba(255,255,255,.62); } .declaration .etiq { color: #fff; }
.declaration__tete { max-width: 900px; margin: 0 auto 64px; text-align: center; } .declaration__tete h2 { margin-top: 18px; font-size: 36px; line-height: 1.2; }
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 44px; } .onglets button { min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); transition: all .25s; } .onglets button:hover { color: #fff; border-color: rgba(255,255,255,.4); } .onglets button[aria-selected="true"] { color: var(--encre); background: #fff; border-color: #fff; }
.piste { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding-top: 40px; } .piste::before, .piste__avance { content: ""; position: absolute; left: 0; top: 13px; height: 2px; } .piste::before { right: 0; background: rgba(255,255,255,.12); } .piste__avance { width: 0; background: linear-gradient(90deg, var(--accent-clair), var(--orange)); box-shadow: 0 0 14px rgba(var(--braise),.7); transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.pas { position: relative; min-height: 190px; padding: 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.04); transition: opacity .6s, background .6s, border-color .6s, transform .6s; }
.pas::before { content: ""; position: absolute; left: 22px; top: -33px; width: 12px; height: 12px; border-radius: 50%; background: #2A3547; box-shadow: 0 0 0 4px var(--nuit); transition: background .5s, box-shadow .5s; }
.js .piste.joue .pas { opacity: .4; } .js .piste.joue .pas.fait, .js .piste.joue .pas.actif { opacity: 1; }
.pas.fait::before { background: var(--accent-clair); } .pas.actif { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); transform: translateY(-4px); } .pas.actif::before { background: var(--orange); box-shadow: 0 0 0 4px var(--nuit), 0 0 18px 4px rgba(var(--braise),.8); }
.pas time { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-clair); } .pas.actif time { color: #F4946A; } .pas h3 { margin-top: 14px; font-size: 16px; } .pas p { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.declaration__note { margin-top: 28px; text-align: center; font-size: 12px; color: rgba(255,255,255,.62); }

/* 10. APPARITIONS AU DÉFILEMENT ---------------------------------------------- */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); animation: apparait-repli 0s 3s forwards; } .js .apparait.vu { opacity: 1; transform: none; animation: none; } @keyframes apparait-repli { to { opacity: 1; transform: none; } }

/* 11. BARRE D'ACTION MOBILE ---------------------------------------------------- */
.barre-action { display: none; }

/* 12. POUR QUI (BLANC CASSÉ) --------------------------------------------------- */
.creme { padding-block: 112px; background: var(--creme); }
.creme__tete { display: flex; justify-content: center; max-width: 320px; margin: 0 auto 44px; padding-bottom: 14px; border-bottom: 1px solid #DEDAD3; } .creme__tete--suite { margin-top: 64px; }
.cibles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cible { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 14px; background: #fff; transition: transform .3s, box-shadow .3s; } .cible:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(10,21,36,.35); }
.cible .picto { width: 54px; height: 54px; } .cible b { display: block; font-weight: 600; color: var(--encre); } .cible span { font-size: 13.5px; color: var(--discret); }

/* 13. PHOTO PLEIN ÉCRAN ---------------------------------------------------------- */
.plein { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 600px; padding-block: 72px; color: rgba(255,255,255,.85); }
.plein > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: var(--filtre-photo, none); animation: derive 30s ease-in-out infinite alternate; } @keyframes derive { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.plein::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--nuit-rgb),.1) 25%, rgba(var(--nuit-rgb),.82)); }
.plein h2 { max-width: 640px; font-size: 38px; color: #fff; } .plein p { max-width: 640px; margin: 18px 0 22px; } .plein a { font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
.plein__credit { position: absolute; right: 16px; bottom: 10px; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: rgba(255,255,255,.85); background: rgba(6,13,24,.55); }

/* 14. ENGAGEMENTS, AGRÉMENTS -------------------------------------------------- */
.engagements { display: grid; grid-template-columns: 1fr 2.2fr; gap: 64px; } .engagements > .etiq { align-self: start; } .engagements h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.015em; }
.engagements__texte { max-width: 70ch; margin-top: 16px; }
.agrements { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 52px; } .agrements li { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px; border: 1px solid var(--filet); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--encre); } .agrements small { font-size: 12px; font-weight: 400; color: var(--discret); }
.quatre { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; } .quatre li { padding: 26px 0; border-bottom: 1px solid var(--filet); } .quatre .picto { width: 54px; height: 54px; margin-bottom: 18px; } .quatre b { display: block; font-weight: 600; color: var(--encre); } .quatre span { display: block; margin-top: 6px; font-size: 14px; }

/* 15. ACTUALITÉS ------------------------------------------------------------------ */
.actus { padding-top: 0; } .actus__tete { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .actus__tete h2 { margin-top: 14px; font-size: 30px; }
.grille-actus { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 40px; }
.actu { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 26px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s; } .actu:hover { transform: translateY(-4px); border-color: #CBD1DA; box-shadow: var(--ombre); }
.actu .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--discret); } .actu .meta em { padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 600; color: var(--encre); background: var(--doux); }
.actu h3 { margin-top: auto; padding-top: 40px; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; } .actu p:not(.meta) { margin-top: 10px; font-size: 13.5px; } .actu .lire { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--encre); } .actu:hover .fleche { transform: translate(2px, -2px); }
.actu--une { overflow: hidden; border: 0; color: rgba(255,255,255,.7); background: radial-gradient(80% 70% at 30% 20%, rgba(var(--halo),.85), transparent 70%), radial-gradient(50% 50% at 95% 0%, rgba(var(--braise),.5), transparent 70%), var(--nuit); } .actu--une .picto { position: absolute; right: 22px; top: 22px; width: 110px; height: 110px; opacity: .9; }
.actu--une .meta { color: rgba(255,255,255,.6); } .actu--une .meta em { color: #fff; background: rgba(255,255,255,.14); } .actu--une h3 { max-width: 22ch; font-size: 25px; color: #fff; } .actu--une .lire { color: #fff; }
.grille-actus--liste { grid-template-columns: repeat(3, 1fr); }
/* carte avec vignette (image d'en-tête de l'article) : l'image occupe le haut de la carte, le titre suit aussitôt */
.actu__image { width: calc(100% + 52px); max-width: none; margin: -26px -26px 20px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon) var(--rayon) 0 0; } .actu--image { overflow: hidden; } .actu--image h3 { margin-top: 14px; padding-top: 0; } .actu--image .lire { margin-top: auto; padding-top: 20px; } .actu--une.actu--image h3 { max-width: none; font-size: 23px; } .actu--une.actu--image .picto { display: none; }

/* 16. LE GROUPE, RECRUTEMENT -------------------------------------------------------- */
.famille { display: grid; grid-template-columns: 1fr 2.2fr; gap: 64px; } .famille > div:first-child p:not(.etiq) { margin-top: 20px; max-width: 34ch; font-size: 14px; color: var(--discret); } .famille h2 { margin-top: 18px; font-size: 26px; line-height: 1.2; }
.famille__liste li { border-bottom: 1px solid var(--filet); } .famille__liste li:first-child { border-top: 1px solid var(--filet); }
.famille__liste a, .famille__liste .bientot { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 20px; align-items: center; padding: 20px 4px; transition: padding .3s, background .3s; } .famille__liste a:hover { padding-inline: 16px 12px; background: var(--doux); } .famille__liste a:hover .fleche { transform: translate(2px, -2px); }
.famille__liste b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--encre); } .famille__liste span { font-size: 14px; color: var(--discret); } .famille__liste .bientot { color: var(--gris); } .famille__liste .bientot b { color: var(--gris); } .famille__liste .ici b::after { content: "Vous êtes ici"; margin-left: 12px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: 2px; color: var(--encre); background: var(--doux); }
.famille__liste .ici .bientot b { color: var(--encre); }
.recrutement--seul { margin-top: 0 !important; }
.recrutement { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 72px; padding: 32px 36px; border-radius: var(--rayon); background: var(--creme); } .recrutement h3 { font-size: 21px; } .recrutement p { margin-top: 8px; max-width: 62ch; font-size: 14px; }

/* 17. CLIENTS ---------------------------------------------------------------------- */
.clients { padding-block: 8px 72px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.clients__piste { display: flex; align-items: center; gap: 84px; width: max-content; animation: defiler 36s linear infinite; } .clients:hover .clients__piste, .clients:focus-within .clients__piste, .clients.en-pause .clients__piste { animation-play-state: paused; } .reduit .clients__piste, .clients__piste.piste--fixe { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 40px; row-gap: 32px; } .reduit .clients__piste [aria-hidden] { display: none; } @keyframes defiler { to { transform: translateX(-50%); } }
.clients li { flex: none; } .sans-js .clients__piste { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 32px; animation: none; }
.clients img { max-height: 40px; max-width: 124px; width: auto; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .6; }

/* 18. CONTACT ET FORMULAIRE ---------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.contact h2 { margin-top: 18px; font-size: 34px; line-height: 1.15; } .contact__intro { margin-top: 18px; max-width: 44ch; }
.contact__tel { display: block; margin-top: 36px; font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--encre); } .contact__tel small { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--discret); }
.coordonnees { margin-top: 36px; border-top: 1px solid var(--filet); } .coordonnees li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 14px; } .coordonnees small { font-size: 12.5px; color: var(--discret); } .coordonnees a, .coordonnees span { color: var(--encre); } .coordonnees a:hover { color: var(--accent-texte); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 36px; border: 1px solid var(--filet); border-radius: 22px; background: #fff; box-shadow: var(--ombre); }
.champ { display: grid; gap: 7px; align-content: start; } .champ--large { grid-column: 1 / -1; } .champ label { font-size: 13px; font-weight: 600; color: var(--encre); } .champ label .obligatoire { color: var(--orange); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #8A94A3; border-radius: var(--rayon-petit); background: #fff; transition: border-color .2s, box-shadow .2s; } .champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--focus, var(--accent)); box-shadow: 0 0 0 4px rgba(var(--halo),.14); } .champ [aria-invalid="true"] { border-color: #B23A0E; box-shadow: 0 0 0 1px #B23A0E; } .champ__erreur { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #9A2F08; }
.champ--piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.champ--case { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--texte); } .champ--case input { width: 24px; min-height: 0; height: 24px; margin-top: 0; flex: none; accent-color: var(--accent-texte); } .champ--case > span { padding-top: 3px; }
.formulaire__info { grid-column: 1 / -1; font-size: 12px; line-height: 1.55; color: var(--discret); } .formulaire__info a { text-decoration: underline; text-underline-offset: 2px; color: var(--encre); }
.formulaire__pied { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.formulaire__cible { display: none; margin: 0; padding: 14px 18px; border-radius: var(--rayon-petit); font-size: 14px; font-weight: 500; color: #0E5B3C; background: #DDF3E8; } .formulaire__cible:target { display: block; } .formulaire__cible--erreur { color: #8A2A12; background: var(--orange-pale); }
.formulaire__retour { grid-column: 1 / -1; display: none; padding: 14px 18px; border-radius: var(--rayon-petit); font-size: 14px; font-weight: 500; color: #0E5B3C; background: #DDF3E8; } .formulaire__retour.visible { display: block; } .formulaire__retour.erreur { color: #8A2A12; background: var(--orange-pale); }

/* 19. APPEL À L'ACTION ET PIED DE PAGE ------------------------------------------------ */
.appel-zone { position: relative; z-index: 1; margin-bottom: -150px; }
.appel { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; min-height: 250px; padding: 44px 48px; border: 3px solid #fff; border-radius: 22px; color: #fff; background: radial-gradient(60% 120% at 40% 0%, rgba(var(--halo),.9), transparent 70%), radial-gradient(40% 90% at 70% 10%, rgba(var(--braise),.5), transparent 70%), var(--nuit); }
.appel h2 { font-size: 27px; line-height: 1.22; color: #fff; } .appel h2 i { color: rgba(255,255,255,.55); }
.pied { margin: 0 16px 16px; padding: 56px 0 36px; border-radius: 22px; font-size: 13.5px; color: rgba(255,255,255,.6); background: var(--nuit); } .avec-appel + .pied { padding-top: 206px; }
.pied__tete { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 44px; } .pied__marque { display: flex; align-items: center; gap: 28px; } .pied__marque img { width: auto; height: 64px; } .pied__slogan { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.16); font-size: 15px; font-weight: 600; color: #fff; }
.pied__numero { text-align: right; font-size: 12px; } .pied__numero a { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.pied__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 48px; } .pied h2 { margin-bottom: 16px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.62); }
.pied__liens li { margin-bottom: 9px; font-weight: 500; color: #fff; } .pied__liens a { transition: opacity .2s; } .pied__liens a:hover { opacity: .7; } .pied__liens a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; } .pied__liens .bientot { color: rgba(255,255,255,.62); } .pied__liens small { margin-left: 6px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4); } .pied__liens button { padding: 0; border: 0; font-weight: 500; color: #fff; background: none; } .pied__reseau { margin-top: 16px; } .pied__reseau a { display: inline-flex; align-items: center; gap: 9px; } .ico-linkedin { width: 16px; height: 16px; fill: currentColor; }
.pied__legal { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.62); } .pied__legal p + p { margin-top: 6px; }
/* lettre d'information : inscription depuis le pied de page (toutes les pages) */
.abonnement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px 48px; align-items: center; margin-bottom: 40px; padding: 30px 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.05); }
.abonnement h2 { margin-bottom: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: #fff; } .abonnement__texte p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.68); }
.abonnement__form { display: grid; gap: 12px; } .abonnement__ligne { display: flex; flex-wrap: wrap; gap: 10px; } .abonnement__etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abonnement__ligne input { flex: 1 1 220px; min-height: 48px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--rayon-petit); font-size: 15px; color: #fff; background: rgba(255,255,255,.08); } .abonnement__ligne input::placeholder { color: rgba(255,255,255,.5); }
.abonnement__ligne input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.16); } .abonnement__ligne .btn { flex: none; }
.abonnement__accord { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.68); cursor: pointer; } .abonnement__accord input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--orange); } .abonnement__accord a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.abonnement .formulaire__retour { margin: 0; }

/* 20. PAGES SIMPLES : LÉGAL, ACTUALITÉS, 404 -------------------------------------------- */
.page-simple { padding-bottom: var(--section-y); }
.page-legale__tete, .page-simple__tete { padding-block: 72px 36px; } .page-legale__tete h1, .page-simple__tete h1 { margin-top: 16px; font-size: 44px; } .page-simple__tete p:not(.etiq) { max-width: 60ch; margin-top: 18px; font-size: 17px; }
.page-legale__maj { margin-top: 12px; font-size: 14px; color: var(--discret); }
.page-legale__onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .page-legale__onglets a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--filet); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--encre); background: #fff; transition: border-color .2s; } .page-legale__onglets a:hover { border-color: var(--encre); } .page-legale__onglets a[aria-current="page"] { color: #fff; background: var(--encre); border-color: var(--encre); }
.page-legale__corps { display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr); gap: 80px; align-items: start; padding-top: 28px; padding-bottom: var(--section-y); border-top: 1px solid var(--filet); }
.page-legale__sommaire { position: sticky; top: calc(var(--entete-h) + 28px); padding-left: 20px; border-left: 1px solid var(--filet); font-size: 13.5px; } .page-legale__sommaire p { margin-bottom: 12px; font-size: 12px; color: var(--discret); } .page-legale__sommaire ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .page-legale__sommaire a:hover { color: var(--accent-texte); }
.prose { font-size: 15.5px; } .prose > :first-child { margin-top: 0; } .prose h2 { margin: 2.4em 0 .7em; font-size: 23px; line-height: 1.2; } .prose h3 { margin: 1.8em 0 .5em; font-size: 17px; letter-spacing: -.015em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .45em; } .prose strong, .prose b { font-weight: 600; color: var(--encre); }
.prose a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--gris); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--encre); }
.prose blockquote { margin: 0 0 1em; padding: 14px 22px; border-left: 2px solid var(--orange); font-size: 17px; font-weight: 500; color: var(--encre); } .prose code { padding: 1px 6px; border-radius: 6px; font-size: .88em; background: var(--doux); } .prose figure { margin: 2em 0; } .prose figure img { border-radius: var(--rayon); } .prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--discret); }
.fiche { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; margin: 0 0 1.2em; border-top: 1px solid var(--filet); } .fiche dt, .fiche dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--filet); } .fiche dt { padding-right: 16px; font-weight: 600; color: var(--encre); }
.tableau-defilant { margin: 0 0 1.2em; overflow-x: auto; border: 1px solid var(--filet); border-radius: 14px; } .tableau { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; } .tableau th, .tableau td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); } .tableau thead th { font-size: 12px; font-weight: 600; color: var(--discret); background: var(--doux); } .tableau tbody tr:last-child td { border-bottom: 0; }
.encadre { margin: 0 0 1.2em; padding: 18px 22px; border-radius: 14px; background: var(--orange-pale); } .encadre > :last-child { margin-bottom: 0; } .encadre--info { background: var(--doux); }
.article { max-width: 760px; margin-inline: auto; } .article__tete { padding-block: 72px 36px; } .article__tete .meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--discret); } .article__tete .meta em { padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 600; color: var(--encre); background: var(--doux); }
.article__tete h1 { margin-top: 20px; font-size: 42px; line-height: 1.12; } .article__chapo { margin-top: 22px; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--encre); } .article__image { margin: 0 0 40px; } .article__image img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; } .article__retour { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--filet); }
.page-vide { padding-block: 40px 20px; font-size: 17px; color: var(--discret); }
.erreur-404 { display: grid; justify-items: start; gap: 22px; padding-block: 120px 60px; } .erreur-404 > b { font-size: 120px; font-weight: 600; letter-spacing: -.06em; line-height: .9; color: var(--filet); } .erreur-404 h1 { font-size: 40px; }
/* relecture : éléments encore à confirmer (uniquement avec ?relecture) */
.relecture [data-a-confirmer] { outline: 2px dashed var(--orange); outline-offset: 4px; border-radius: 6px; }

/* 20 bis. PAGES « ACTIVITÉ » (une page par métier) ------------------------------------------ */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 13px; color: var(--discret); } .fil-ariane a:hover { color: var(--encre); } .fil-ariane [aria-current] { font-weight: 500; color: var(--encre); }
.activite-hero { padding-block: 56px 104px; } .activite-hero .c { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 72px; align-items: center; }
.activite-hero h1 { font-size: 44px; line-height: 1.12; } .activite-hero .chapo { max-width: 56ch; }
.activite-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .activite-hero__actions .icone { width: 16px; height: 16px; }
.points-cles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--filet); } .points-cles b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--encre); } .points-cles span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--discret); }

/* La scène : une grande icône en pointillés dans un carré de nuit, animée selon le métier */
.scene { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; margin-left: auto; border-radius: 28px; background: radial-gradient(70% 60% at 50% 42%, rgba(var(--halo),.9), transparent 72%), radial-gradient(45% 40% at 88% 6%, rgba(var(--braise),.5), transparent 70%), var(--nuit); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.6px); background-size: 15px 15px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 78%); mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 78%); }
.scene .picto { position: relative; z-index: 2; width: 44%; height: 44%; filter: drop-shadow(0 0 22px rgba(var(--lueur),.55)); animation: respire 5s ease-in-out infinite; } @keyframes respire { 50% { transform: scale(1.045); } }
.scene__anim { position: absolute; inset: 0; z-index: 1; } .scene__anim i { position: absolute; display: block; }
/* ondes : des cercles qui s'élargissent depuis le centre (alarme, réseau mobile, alerte) */
[data-animation="ondes"] .scene__anim i { left: 50%; top: 50%; width: 36%; height: 36%; margin: -18% 0 0 -18%; border: 1.5px solid rgba(var(--lueur),.75); border-radius: 50%; opacity: 0; animation: onde 4.2s cubic-bezier(.2,.6,.3,1) infinite; } [data-animation="ondes"] .scene__anim i:nth-child(2) { animation-delay: 1.05s; } [data-animation="ondes"] .scene__anim i:nth-child(3) { animation-delay: 2.1s; } [data-animation="ondes"] .scene__anim i:nth-child(4) { animation-delay: 3.15s; }
@keyframes onde { 0% { transform: scale(.7); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(2.9); opacity: 0; } }
/* radar : un faisceau qui balaie, deux cercles de portée (surveillance, rondes) */
[data-animation="radar"] .scene__anim i:nth-child(1) { inset: 9%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--lueur),.55), rgba(var(--lueur),0) 28%, rgba(var(--lueur),0)); animation: balaye 5.5s linear infinite; -webkit-mask-image: radial-gradient(circle, transparent 23%, #000 24%); mask-image: radial-gradient(circle, transparent 23%, #000 24%); }
[data-animation="radar"] .scene__anim i:nth-child(2) { inset: 9%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; } [data-animation="radar"] .scene__anim i:nth-child(3) { inset: 24%; border: 1px dashed rgba(255,255,255,.22); border-radius: 50%; }
[data-animation="radar"] .scene__anim i:nth-child(4) { left: 72%; top: 27%; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(var(--braise),.7); animation: pouls-o 1.6s ease-out infinite; }
@keyframes balaye { to { transform: rotate(360deg); } }
/* flux : des signaux qui filent sur des lignes (appels, données, logiciels) */
[data-animation="flux"] .scene__anim i { left: -30%; width: 30%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--lueur),0), rgba(var(--lueur),.95)); animation: file 3.4s linear infinite; } [data-animation="flux"] .scene__anim i:nth-child(1) { top: 20%; } [data-animation="flux"] .scene__anim i:nth-child(2) { top: 36%; animation-delay: 1.3s; animation-duration: 2.8s; } [data-animation="flux"] .scene__anim i:nth-child(3) { top: 66%; animation-delay: .6s; animation-duration: 3.9s; background: linear-gradient(90deg, rgba(var(--braise),0), rgba(var(--braise),.95)); } [data-animation="flux"] .scene__anim i:nth-child(4) { top: 82%; animation-delay: 2s; }
@keyframes file { to { transform: translateX(440%); } }
/* grille : une trame de points qui scintille (systèmes, installations, formation) */
[data-animation="grille"] .scene__anim i { inset: 0; background-image: radial-gradient(rgba(var(--lueur),.9) 1.6px, transparent 2.2px); background-size: 45px 45px; animation: scintille 3.6s ease-in-out infinite; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 31%, transparent 80%); mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 31%, transparent 80%); } [data-animation="grille"] .scene__anim i:nth-child(2) { background-position: 22px 22px; animation-delay: 1.2s; } [data-animation="grille"] .scene__anim i:nth-child(3) { background-position: 0 22px; animation-delay: 2.4s; background-image: radial-gradient(rgba(var(--braise),.9) 1.6px, transparent 2.2px); background-size: 90px 90px; } [data-animation="grille"] .scene__anim i:nth-child(4) { display: none; }
@keyframes scintille { 0%, 100% { opacity: .08; } 50% { opacity: .75; } }
/* trois mots-clés qui s'allument tour à tour */
.scene__puces { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-inline: 20px; } .scene__puces li { padding: 6px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); animation: allume 6s ease-in-out infinite; } .scene__puces li:nth-child(2) { animation-delay: 2s; } .scene__puces li:nth-child(3) { animation-delay: 4s; }
@keyframes allume { 0%, 28%, 100% { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); } 8%, 20% { color: var(--encre); border-color: #fff; background: #fff; } }

.prestations__tete h2 { margin-top: 14px; font-size: 30px; } .portails__texte { max-width: 64ch; margin-top: 14px; }
.portail { display: flex; flex-direction: column; } .portail .picto { margin-bottom: 22px; } .portail__societe { margin: 0 0 4px !important; font-size: 12.5px !important; color: var(--discret); } .portail h3 { font-size: 21px; } .portail .btn { align-self: flex-start; margin-top: auto; } .portail > p:not(.portail__societe) { margin-bottom: 24px; } .portail { position: relative; } .etat { position: absolute; right: 22px; top: 26px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--discret); } .etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B8BEC8; } .etat--ok::before { background: var(--vert); box-shadow: 0 0 0 3px rgba(31,169,113,.16); } .etat--ko::before { background: var(--orange); } .cible { position: relative; } .cible .etat { right: 14px; top: 12px; font-size: 0; }
.offre__contrat { align-self: flex-start; margin: 0 0 22px !important; padding: 3px 10px; border-radius: 999px; font-size: 12px !important; font-weight: 600; color: var(--encre); background: var(--doux); } .offre__contrat:empty { display: none; }
[data-si-liste]:has([data-liste]:empty) { display: none; }   /* aperçu sans serveur : une rubrique dont la liste est vide ne s'affiche pas */
.champ small { font-size: 12px; } /* textes d'aide lisibles sur téléphone (audit mobile du 27/09/2026) */ .champ--piece small { font-weight: 400; color: var(--discret); } .champ--piece input { padding: 10px 12px; } .sans-js .champ--piece { display: none; } .champ--piece-sans-js { display: none; } .sans-js .champ--piece-sans-js { display: block; }
.portail__bientot { color: var(--gris); border-style: dashed; cursor: default; } .portail__bientot:hover { transform: none; border-color: #D5D9DF; }
.prestations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; } .prestations--4 { grid-template-columns: repeat(4, 1fr); }
.prestation { padding: 28px 26px 30px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s; } .prestation:hover { transform: translateY(-4px); border-color: #CBD1DA; box-shadow: var(--ombre); }
.prestation .picto { width: 54px; height: 54px; margin-bottom: 26px; } .prestation h3 { font-size: 17px; letter-spacing: -.015em; line-height: 1.25; } .prestation p { margin-top: 10px; font-size: 14px; }
/* carte d'un partenaire : son logo tient la place de l'icône, dans une boîte de même hauteur — les cartes restent alignées, quel que soit le format du logo */
.prestation__logo { display: flex; align-items: center; height: 54px; margin-bottom: 26px; } .prestation__logo img { flex: none; max-width: 100%; height: auto; }   /* largeur et hauteur : attributs de la balise, calculés à la construction */
.faq { margin-top: 28px; border-top: 1px solid var(--filet); } .faq details { border-bottom: 1px solid var(--filet); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--encre); cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 1.8px solid var(--encre); border-bottom: 1.8px solid var(--encre); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .faq details p { max-width: 72ch; padding: 0 4px 24px; }
.engagements__lien { margin: 0 0 40px; } a.cible { color: inherit; } a.cible span { display: inline-flex; align-items: center; gap: 6px; }
a.metier h3 .fleche { margin-left: auto; }

/* 20 ter. PAGES DU SITE DU GROUPE : frise, organigramme, sociétés, portails --------------------- */
.section__suite { display: flex; justify-content: center; margin-top: 40px; } .section--suite { padding-top: 0; }
.activite-hero--court { padding-block: 56px 8px; } .activite-hero--court .c { grid-template-columns: 1fr; } .activite-hero--court .chapo { max-width: 64ch; }
.hero--carte .fil-ariane { margin-bottom: 24px; } .hero--carte h1 { width: auto; max-width: 560px; font-size: 44px; line-height: 1.12; }
.cibles--4 { grid-template-columns: repeat(4, 1fr); } .cibles--4 .cible { grid-template-columns: 44px 1fr; gap: 14px; height: 100%; align-items: start; } .cibles--4 .picto { width: 44px; height: 44px; }

/* L'organigramme : la holding, un trait, les cinq sociétés */
.organigramme { margin-top: 48px; }
.organigramme__tete { position: relative; display: grid; grid-template-columns: 56px auto; column-gap: 18px; align-items: center; width: max-content; max-width: 100%; margin-inline: auto; padding: 20px 30px 20px 22px; border-radius: var(--rayon); color: rgba(255,255,255,.7); background: radial-gradient(90% 120% at 100% 100%, rgba(var(--braise),.5), transparent 60%), radial-gradient(80% 100% at 20% 0%, rgba(var(--halo),.8), transparent 70%), var(--nuit); }
.organigramme__tete .picto { grid-row: span 2; width: 56px; height: 56px; } .organigramme__tete b { align-self: end; font-size: 19px; font-weight: 600; letter-spacing: .04em; color: #fff; } .organigramme__tete span { align-self: start; font-size: 13.5px; }
.organigramme__tete::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 36px; background: var(--filet-fort, #CBD1DA); }
/* logos officiels : l'emblème de la holding dans la case du pictogramme, le logo de chaque société à hauteur fixe (largeurs très différentes) */
.organigramme__tete .organigramme__marque { grid-row: span 2; width: 56px; height: auto; }
.organigramme__logo { display: block; height: 56px; width: auto; max-width: 180px; margin: 0 auto 22px; object-fit: contain; object-position: center; }
/* logos dans « Nos sociétés » (en tête de chaque société) et dans les listes de sociétés (pages Portails et Contact) */
.societe__tete:has(.societe__logo) { grid-template-columns: auto 1fr; } .societe__logo { display: block; width: auto; height: 64px; max-width: 190px; object-fit: contain; object-position: left center; }
.cible:has(.cible__logo) { grid-template-columns: 78px 1fr; } .cible__logo { display: block; width: 78px; height: 48px; object-fit: contain; object-position: left center; }
.organigramme__filiales { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 36px; padding-top: 28px; }
.organigramme__filiales::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: #CBD1DA; }
.organigramme__filiales li { position: relative; } .organigramme__filiales li::before { content: ""; position: absolute; left: 50%; top: -28px; width: 1px; height: 28px; background: #CBD1DA; }
.organigramme__filiales a, .organigramme__filiales div { display: flex; flex-direction: column; height: 100%; padding: 22px 20px 24px; border: 1px solid var(--filet); border-radius: 14px; background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s; } .organigramme__filiales a:hover { transform: translateY(-4px); border-color: #CBD1DA; box-shadow: var(--ombre); }
.organigramme__filiales .picto { width: 48px; height: 48px; margin-bottom: 22px; } .organigramme__filiales b { font-weight: 600; color: var(--encre); } .organigramme__filiales span { margin-top: 4px; font-size: 13px; color: var(--discret); }

/* Les sociétés, une par une */
.societes { display: grid; gap: 72px; }
.societe { display: grid; grid-template-columns: 1fr 1.7fr; gap: 64px; } .societe__tete { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; } .societe__tete .picto { width: 64px; height: 64px; } .societe__tete h2 { margin-top: 10px; font-size: 30px; }
.societe__texte { max-width: 66ch; font-size: 16px; line-height: 1.6; color: var(--encre); } .societe .points-cles { margin-top: 32px; } .societe__corps .btn { margin-top: 32px; }

/* La frise chronologique : une ligne centrale, les dates en quinconce, l'avancée suit la lecture */
.frise__filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -20px 0 56px; }
.filtre { min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); transition: all .25s; } .filtre:hover { color: #fff; border-color: rgba(255,255,255,.4); } .filtre[aria-pressed="true"] { color: var(--encre); background: #fff; border-color: #fff; }
.frise { --avance: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 112px; max-width: 1040px; margin-inline: auto; }
/* une seule pseudo-ligne : le trait gris et, par-dessus, l'avancée en dégradé ; ::after est une cale qui décale la colonne de droite d'un cran (dates en quinconce, sans style ni classe par élément : la liste peut être régénérée par le serveur) */
.frise::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--accent-clair), var(--orange)) 0 0 / 100% calc(var(--avance) * 100%) no-repeat, rgba(255,255,255,.12); }
.frise::after { content: ""; grid-column: 2; grid-row: 1; height: 72px; }
.evenement { position: relative; grid-row-end: span 2; padding-block: 10px; } .evenement:nth-child(odd) { grid-column: 1; } .evenement:nth-child(even) { grid-column: 2; } .frise .evenement--g { grid-column: 1; } .frise .evenement--d { grid-column: 2; }
.evenement article { position: relative; padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.04); transition: opacity .6s, background .6s, border-color .6s, transform .6s; }
.evenement::before { content: ""; position: absolute; top: 36px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #2A3547; box-shadow: 0 0 0 4px var(--nuit); transition: background .5s, box-shadow .5s; } .evenement:nth-child(odd)::before { right: -62px; } .evenement:nth-child(even)::before { left: -62px; } .frise .evenement--g::before { right: -62px; left: auto; } .frise .evenement--d::before { left: -62px; right: auto; }
.evenement::after { content: ""; position: absolute; top: 41px; width: 44px; height: 1px; background: rgba(255,255,255,.14); } .evenement:nth-child(odd)::after { right: -48px; } .evenement:nth-child(even)::after { left: -48px; } .frise .evenement--g::after { right: -48px; left: auto; } .frise .evenement--d::after { left: -48px; right: auto; }
.evenement time { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-clair); } .evenement h3 { margin-top: 10px; font-size: 18px; line-height: 1.25; letter-spacing: -.015em; } .evenement p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.evenement__genre { position: absolute; right: 18px; top: 20px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.62); background: rgba(255,255,255,.08); }
.js .frise.suivie .evenement article { opacity: .38; } .js .frise.suivie .evenement.fait article { opacity: 1; }
.evenement.fait::before { background: var(--accent-clair); } .evenement.actif article { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); transform: translateY(-3px); } .evenement.actif::before { background: var(--orange); box-shadow: 0 0 0 4px var(--nuit), 0 0 18px 4px rgba(var(--braise),.8); } .evenement.actif time { color: #F4946A; }
.frise-zone .declaration__note { margin-top: 56px; font-size: 14px; color: rgba(255,255,255,.6); }

/* 21. MESURE D'AUDIENCE (page cookies.html : interrupteur d'opposition) ---------------------------------------- */
.interrupteur { position: relative; width: 52px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 999px; background: #5F6A78; transition: background .2s; } .interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s; }
.interrupteur[aria-checked="true"] { background: #1A7F4E; } .interrupteur[aria-checked="true"]::after { transform: translateX(22px); }
.choix-mesure { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 1.2em; padding: 18px 22px; border: 1px solid var(--filet); border-radius: 14px; } .choix-mesure p { margin: 0; font-size: 14px; } .choix-mesure strong { display: block; color: var(--encre); }

/* 22. ADAPTATIF ------------------------------------------------------------------------------ */
/* entre 1181 et 1460 px : le menu se resserre et le second bouton s'efface, pour que sept rubriques tiennent sur une ligne */
@media (max-width: 1460px) and (min-width: 1181px) {
  .entete .c { gap: 20px; } .entete__nav { gap: 20px; } .entete__menu { gap: 20px; font-size: 13.5px; } .entete__actions { padding-left: 20px; gap: 8px; } .entete__actions .btn { padding-inline: 14px; }
}
@media (max-width: 1300px) and (min-width: 1181px) {
  .entete__nav, .entete__menu { gap: 16px; } .entete__menu { font-size: 13px; } .entete__actions { padding-left: 16px; } .entete__actions .btn { padding-inline: 16px; }
}
@media (max-width: 1180px) {
  .c { width: min(100% - 64px, 1240px); }
  .burger { display: grid; }
  .entete__nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - var(--entete-h)); overflow-y: auto; overscroll-behavior: contain; padding: 12px 32px 28px; border-bottom: 1px solid var(--filet); background: #fff; box-shadow: 0 30px 40px -30px rgba(10,21,36,.3); } .menu-ouvert .entete__nav { display: flex; }
  .entete__menu { flex-direction: column; align-items: stretch; gap: 0; font-size: 17px; } .entete__menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--filet); } .entete__menu a::after { display: none; }
  /* sous-menus repliables (accordéon) : chevron à droite de la rubrique, fermés par défaut (demande de la direction, 27/09/2026) */
  .a-sous-menu { position: relative; border-bottom: 1px solid var(--filet); } .a-sous-menu > a { margin-right: 0; padding-right: 56px; }
  .sous-menu__bouton { display: block; right: -8px; top: 4px; width: 44px; height: 44px; transform: none; } .sous-menu__bouton::before { width: 8px; height: 8px; }
  .sous-menu, .sous-menu--2 { position: static; display: none; min-width: 0; margin: 0; padding: 0 0 10px 16px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .a-sous-menu.ouvert > .sous-menu, .a-sous-menu.ouvert > .sous-menu--2 { display: block; } .sous-menu::before { display: none; } .entete__menu .sous-menu a { padding: 9px 0; border: 0; font-size: 15px; color: var(--discret); white-space: normal; } .a-sous-menu > a { border-bottom: 0 !important; } .sous-menu__titre { padding: 10px 0 2px; }
  .entete__actions { padding: 20px 0 0; border: 0; flex-wrap: wrap; } .entete__actions .btn { flex: 1; min-height: 46px; }
  .hero { display: flex; flex-direction: column; } .hero .c { display: block; min-height: 0; padding-block: 56px 0; }
  .carte-jour { order: 2; position: relative; right: auto; top: auto; transform: none; width: min(100% - 48px, 560px); margin: 28px auto 44px; }
  .hero h1 { width: auto; max-width: none; font-size: clamp(31px, 5.4vw, 46px); }
  .metiers__grille { grid-template-columns: repeat(3, 1fr); } .metier { min-height: 220px; }
  .apropos, .engagements, .famille { grid-template-columns: 1fr; gap: 40px; } .apropos { gap: 56px; }
  .cibles { grid-template-columns: repeat(2, 1fr); }
  .grille-actus { grid-template-columns: 1fr 1fr; } .actu--une { grid-column: 1 / -1; min-height: 280px; } .grille-actus--liste .actu--une { grid-column: auto; }
  .contact { grid-template-columns: 1fr; gap: 48px; }
  .organigramme__filiales { grid-template-columns: repeat(3, 1fr); padding-top: 0; margin-top: 48px; } .organigramme__filiales::before, .organigramme__filiales li::before { display: none; } .societe { grid-template-columns: 1fr; gap: 32px; } .cibles--4 { grid-template-columns: repeat(2, 1fr); }
  .activite-hero .c { grid-template-columns: 1fr; gap: 48px; } .activite-hero { padding-block: 40px 80px; } .scene { max-width: 460px; margin-inline: auto; } .prestations { grid-template-columns: repeat(2, 1fr); }
  .page-legale__corps { grid-template-columns: minmax(0, 1fr); } .page-legale__sommaire { display: none; }
}
@media (max-width: 900px) {
  :root { --section-y: 80px; }
  /* barre du groupe sur deux lignes : mention, puis les sites en noms courts (demande de la direction, 27/09/2026) */
  .groupe .c { flex-wrap: wrap; gap: 2px 16px; padding-block: 7px; } .groupe ul { flex-wrap: wrap; gap: 2px 14px; width: 100%; font-size: 12px; }
  .groupe .long { display: none; } .groupe .court { display: inline; } .groupe .ici { display: none; } /* le site courant n'est pas répété : une seule ligne de liens */
  .creme { padding-block: 80px; } .actus { padding-top: 0; } .declaration { padding-block: 88px 80px; }
  .vivante { display: flex; flex-direction: column; height: auto; padding: 64px 32px 0; }
  .accroche, .fil, .legende { position: static; width: auto; } .accroche { order: 1; }
  .vivante canvas { order: 2; position: relative; inset: auto; width: calc(100% + 64px); height: 440px; margin: 12px -32px 0; }
  .fil { order: 3; } .legende { order: 4; margin-top: 32px; text-align: left; } .legende span { margin-left: 0; max-width: none; }
  .vivante::after { display: none; } .metiers { margin-top: 80px; }
  .metiers h2, .declaration__tete h2, .plein h2, .contact h2 { font-size: clamp(25px, 4.6vw, 36px); } .accroche h2 { font-size: 28px; } .apropos h2, .actus__tete h2 { font-size: 26px; }
  .page-legale__tete h1, .page-simple__tete h1, .article__tete h1 { font-size: clamp(30px, 6vw, 42px); }
  .piste { grid-template-columns: 1fr; padding-top: 0; } .piste::before, .piste__avance, .pas::before { display: none; } .pas { min-height: 0; } .pas.actif { transform: none; }
  .appel { flex-direction: column; align-items: flex-start; min-height: 0; padding: 36px 28px; } .appel-zone { margin-bottom: -120px; } .avec-appel + .pied { padding-top: 170px; }
  .pied__tete { flex-direction: column; align-items: flex-start; } .pied__numero { text-align: left; } .pied__cols { grid-template-columns: 1fr 1fr; } .abonnement { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .plein { min-height: 480px; } .recrutement { flex-direction: column; align-items: flex-start; }
  .frise { grid-template-columns: 1fr; column-gap: 0; padding-left: 34px; } .frise::before { left: 6px; } .frise::after { display: none; } .frise .evenement { grid-column: 1 !important; } .frise .evenement::before { left: -34px !important; right: auto !important; } .frise .evenement::after { left: -20px !important; right: auto !important; width: 18px; }
  .hero--carte h1 { font-size: clamp(30px, 6vw, 44px); } .societe__tete h2 { font-size: 26px; } .societes { gap: 56px; }
  .activite-hero h1 { font-size: clamp(30px, 6vw, 44px); } .prestations__tete h2 { font-size: 26px; }
  .famille__liste a, .famille__liste .bientot { grid-template-columns: 1fr auto; } .famille__liste span { grid-column: 1; grid-row: 2; margin-top: -14px; }
  /* barre d'action : appeler / être rappelé, toujours sous le pouce */
  .barre-action { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(var(--nuit-rgb),.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.7,.2,1); } .barre-action.visible { transform: none; } .barre-action .btn { min-height: 46px; }
  body.avec-barre-action { padding-bottom: 76px; }
}
@media (max-width: 620px) {
  .c { width: min(100% - 40px, 1240px); }
  .entete .c { min-height: 64px; } .entete__logo img { height: 38px; } .entete__nav { padding-inline: 20px; }
  .metiers__grille, .cibles, .grille-actus, .grille-actus--liste, .bloc-chiffres, .quatre, .formulaire { grid-template-columns: 1fr; } .metier { min-height: 0; } .metier h3 { margin-top: 28px; }
  .organigramme__filiales, .cibles--4 { grid-template-columns: 1fr; } .organigramme__tete { width: 100%; } .evenement__genre { position: static; display: inline-block; margin-top: 14px; }
  .prestations, .points-cles { grid-template-columns: 1fr; } .points-cles { gap: 16px; } .faq summary { font-size: 15px; }
  .rot > span { white-space: normal; } .carte-halo { min-height: 260px; } .carte-halo[data-visuel] { min-height: 350px; } .carte-jour { width: min(100% - 24px, 560px); }
  .experts { flex-wrap: wrap; justify-content: center; width: auto; padding: 16px; border-radius: 20px; text-align: center; }
  .actus__tete { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pied { margin: 0; border-radius: 22px 22px 0 0; } .pied__marque { flex-direction: column; align-items: flex-start; gap: 16px; } .pied__slogan { padding-left: 0; border-left: 0; }
  .implantations li { gap: 0; padding: 4px 9px; font-size: 0; } .implantations b { font-size: 12px; }
  .vivante { padding-inline: 20px; } .vivante canvas { width: calc(100% + 40px); height: 360px; margin-inline: -20px; }
  .formulaire { padding: 24px 20px; } .contact__tel { font-size: 32px; } .fiche { grid-template-columns: 1fr; } .fiche dt { padding-bottom: 0; border-bottom: 0; } .fiche dd { padding-top: 4px; }
  .choix-mesure { flex-direction: column; align-items: flex-start; }
  .erreur-404 b { font-size: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait { opacity: 1; transform: none; }
}
.reduit, .reduit *, .reduit *::before, .reduit *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.reduit .apparait { opacity: 1 !important; transform: none !important; }
.reduit .rot > span[aria-hidden] { display: none; }
html:not(.js) .implantations { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; } html:not(.js) .implantations li { position: static; }
/* Dégradés des pictogrammes : couleurs des arrêts définies ici (aucun attribut style dans le SVG, CSP stricte). */
#degrade-jour stop:first-child { stop-color: var(--picto-jour); } #degrade-jour stop:last-child { stop-color: var(--orange); }
#degrade-nuit stop:first-child { stop-color: var(--picto-nuit); } #degrade-nuit stop:last-child { stop-color: #FF9A73; }
/* Indication « nouvelle fenêtre » pour les liens ouverts dans un nouvel onglet. */
a[target="_blank"] .nouvelle-fenetre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } }

/* ==========================================================================
   20 quater. RESSOURCES — sommaire des guides, guide, lexique, guides associés (outils/pages-ressources.mjs)
   ========================================================================== */
.ressources, .lexique { padding-top: 40px; } .ressources__tete { max-width: 780px; margin-top: 28px; } .ressources__tete h1 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; } .ressources__tete .lead { margin-top: 20px; }
.grille-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; } .grille-guides--petite { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.guide-carte { display: flex; flex-direction: column; overflow: hidden; padding: 0 26px 26px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s; } .guide-carte:hover { transform: translateY(-4px); border-color: #CBD1DA; box-shadow: var(--ombre); }
.guide-carte img { width: calc(100% + 52px); max-width: none; margin: 0 -26px 20px; aspect-ratio: 16 / 9; object-fit: cover; }
.guide-carte .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--discret); } .guide-carte .meta em, .guide__tete .meta em { padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 600; color: var(--encre); background: var(--doux); }
.guide-carte h2, .guide-carte h3 { margin-top: 14px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; } .guide-carte h3 { font-size: 18px; } .guide-carte p:not(.meta) { margin-top: 10px; font-size: 14px; } .guide-carte .lire { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--encre); } .guide-carte:hover .fleche { transform: translate(2px, -2px); }
.ressources__suite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .ressource-lien { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--doux); transition: border-color .3s; } .ressource-lien:hover { border-color: #CBD1DA; } .ressource-lien .picto { width: 52px; height: 52px; flex: none; } .ressource-lien div { flex: 1; } .ressource-lien b { display: block; font-size: 17px; color: var(--encre); } .ressource-lien span { font-size: 13.5px; }
.guide { padding-block: 40px 72px; } .guide__tete { max-width: 880px; margin-top: 28px; } .guide__tete .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--discret); } .guide__tete h1 { margin-top: 20px; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; } .guide__chapo { margin-top: 22px; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--encre); }
.guide__image { margin: 40px 0 0; } .guide__image img { width: 100%; border-radius: 22px; }
.guide__corps { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 64px; align-items: start; margin-top: 56px; }
.guide__sommaire { position: sticky; top: 110px; padding: 22px 22px 18px 24px; border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13.5px; } .guide__sommaire p { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .guide__sommaire ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: sommaire; } .guide__sommaire li { counter-increment: sommaire; } .guide__sommaire a { display: flex; gap: 10px; padding: 6px 0; line-height: 1.35; color: var(--discret); } .guide__sommaire a::before { content: counter(sommaire, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--gris); } .guide__sommaire a:hover { color: var(--encre); }
.guide__texte { min-width: 0; font-size: 16.5px; } .guide__sommaire { min-width: 0; } .guide__texte > section { scroll-margin-top: 110px; } .guide__texte > section > h2 { margin: 2.2em 0 .7em; font-size: 27px; } .guide__texte > section:first-child > h2 { margin-top: 0; } .guide__texte .faq { margin-top: 8px; }
.figure-schema img { width: 100%; border: 1px solid var(--filet); }
.tableau-guide { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--filet); border-radius: 14px; } .tableau-guide table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tableau-guide th, .tableau-guide td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); } .tableau-guide thead th { font-size: 12.5px; font-weight: 600; color: var(--encre); background: var(--doux); } .tableau-guide tbody tr:last-child td { border-bottom: 0; } .tableau-guide table { min-width: 560px; }
.guide__sources ul { padding-left: 1.2em; font-size: 14.5px; } .guide__liees { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--filet); } .guide__liees p { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .guide__liees ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.lexique__lettres { position: sticky; top: 84px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; padding: 12px 0; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lexique__lettres a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--filet); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--encre); } .lexique__lettres a:hover { background: var(--doux); }
.lexique__groupe { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 24px; padding-block: 32px; border-top: 1px solid var(--filet); scroll-margin-top: 150px; } .lexique__groupe h2 { font-size: 44px; line-height: 1; color: var(--gris); } .lexique__groupe dl { display: grid; gap: 22px; margin: 0; } .lexique__groupe dl > div { scroll-margin-top: 150px; } .lexique__groupe dt { font-size: 17px; font-weight: 600; color: var(--encre); } .lexique__groupe dd { max-width: 760px; margin: 6px 0 0; font-size: 15px; } .lexique__voir { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--encre); white-space: nowrap; } .lexique__groupe dl > div:target { margin: -14px -18px; padding: 14px 18px; border-radius: 14px; background: var(--doux); }
.guides-associes { padding-block: 0 72px; }
@media (max-width: 1180px) { .guide__corps { grid-template-columns: minmax(0, 1fr); gap: 32px; } .guide__sommaire { position: static; } .grille-guides--petite { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grille-guides, .grille-guides--petite, .ressources__suite { grid-template-columns: 1fr; } .lexique__groupe { grid-template-columns: minmax(0, 1fr); gap: 8px; } .lexique__voir { margin-left: 0; white-space: normal; } .lexique__groupe dl > div:target { margin: -10px -12px; padding: 10px 12px; } .lexique__lettres { top: 64px; } .guide__texte { font-size: 16px; } .guide__texte > section > h2 { font-size: 23px; } }

/* ==========================================================================
   20 quinquies. Bandeau d'information, lien « Être rappelé », autodiagnostic, maquette de portail, tableau de compatibilité
   ========================================================================== */
.bandeau-info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 0; padding: 11px 20px; font-size: 13.5px; text-align: center; color: var(--encre); background: var(--doux); border-bottom: 1px solid var(--filet); } .bandeau-info i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(var(--braise),.18); } .bandeau-info a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; border-bottom: 1px solid currentColor; } .bandeau-info .fleche { width: 14px; height: 14px; }
.entete__rappel { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; } .entete__rappel .icone { width: 16px; height: 16px; } .entete__rappel:hover { color: var(--accent); }
@media (min-width: 1181px) and (max-width: 1560px) { .entete__rappel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .entete__rappel { padding: 0; } }
/* autodiagnostic */
.autodiag ol { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: question; } .autodiag li { counter-increment: question; padding: 18px 22px; border: 1px solid var(--filet); border-radius: 16px; background: #fff; transition: border-color .3s, background .3s; } .autodiag li.repondu { border-color: transparent; background: var(--doux); }
.autodiag fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .autodiag legend { padding: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--encre); } .autodiag legend::before { content: counter(question, decimal-leading-zero); margin-right: 12px; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gris); }
.autodiag__choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .autodiag__choix label { position: relative; cursor: pointer; } .autodiag__choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .autodiag__choix span { display: block; padding: 8px 18px; border: 1px solid var(--filet); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--encre); background: #fff; transition: background .2s, color .2s, border-color .2s; } .autodiag__choix label:hover span { border-color: #CBD1DA; } .autodiag__choix input:checked + span { color: #fff; border-color: var(--nuit); background: var(--nuit); } .autodiag__choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.autodiag__avance { margin-top: 18px; font-size: 13.5px; color: var(--discret); } .sans-js .autodiag__avance, .sans-js .autodiag__choix { display: none; }
.autodiag__resultat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; margin-top: 28px; padding: 34px; border-radius: var(--rayon); color: rgba(255,255,255,.78); background: radial-gradient(80% 90% at 15% 10%, rgba(var(--halo),.85), transparent 70%), radial-gradient(50% 60% at 100% 0%, rgba(var(--braise),.45), transparent 70%), var(--nuit); outline: 0; } .autodiag__resultat[hidden] { display: none; }
.autodiag__note { display: flex; align-items: baseline; gap: 6px; color: #fff; } .autodiag__note b { font-size: 84px; font-weight: 600; line-height: 1; letter-spacing: -.04em; } .autodiag__note span { font-size: 22px; color: rgba(255,255,255,.6); }
.autodiag__resultat h3 { font-size: 24px; color: #fff; } .autodiag__resultat h3 + p { margin-top: 10px; } .autodiag__titre-priorites { margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.55); } .autodiag__resultat ul { margin: 10px 0 0; padding-left: 1.1em; font-size: 14.5px; } .autodiag__resultat li + li { margin-top: 6px; }
.autodiag__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .autodiag__mention { margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,.5); }
/* maquette illustrative d'un portail */
.maquette { margin: 36px 0 0; } .maquette figcaption { margin-top: 12px; font-size: 12.5px; color: var(--discret); }
.maquette__barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border: 1px solid var(--filet); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--doux); } .maquette__barre i { width: 10px; height: 10px; border-radius: 50%; background: #CBD1DA; } .maquette__barre span { margin-left: 10px; font-size: 12.5px; color: var(--discret); }
.maquette__corps { display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--filet); border-radius: 0 0 16px 16px; background: #fff; }
.maquette__menu { margin: 0; padding: 18px 12px; list-style: none; border-right: 1px solid var(--filet); background: #FBFBFC; } .maquette__menu li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--discret); } .maquette__menu li.actif { color: var(--encre); background: var(--doux); } .maquette__menu .picto { width: 22px; height: 22px; flex: none; }
.maquette__contenu { min-width: 0; padding: 22px; } .maquette__compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } .maquette__compteurs li { padding: 16px 18px; border: 1px solid var(--filet); border-radius: 14px; } .maquette__compteurs b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--encre); } .maquette__compteurs span { font-size: 12.5px; }
.maquette__graphe { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--filet); border-radius: 14px; } .maquette__graphe p { font-size: 12.5px; color: var(--discret); } .maquette__graphe div { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-top: 12px; } .maquette__graphe i { flex: 1; height: var(--h); min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), rgba(var(--halo),.35)); transform-origin: bottom; }
.js .maquette__graphe i { transform: scaleY(0); transition: transform 1s cubic-bezier(.2,.7,.2,1); } .js .maquette.vu .maquette__graphe i { transform: none; }
.maquette__liste { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13px; } .maquette__liste th, .maquette__liste td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--filet); } .maquette__liste th { font-size: 11.5px; font-weight: 600; color: var(--gris); } .maquette__liste tr:last-child td { border-bottom: 0; } .maquette__liste td:first-child { font-variant-numeric: tabular-nums; color: var(--encre); }
.maquette__etat { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; } .maquette__etat--ok { color: #0F6B3C; background: #E3F4EA; } .maquette__etat--attente { color: #7A5A00; background: #FFF3D1; } .maquette__etat--alerte { color: #A33A12; background: #FDE7DE; }
.maquette[data-maquette] .maquette__menu [data-vue] { cursor: pointer; } .maquette__vue[hidden] { display: none; }
.maquette__alertes { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .maquette__alerte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--filet); border-radius: 12px; font-size: 13px; } .maquette__alerte i { width: 10px; height: 10px; border-radius: 50%; background: var(--gris); } .maquette__alerte--alerte i { background: var(--orange); } .maquette__alerte--attente i { background: #E0A400; } .maquette__alerte--ok i { background: var(--vert); } .maquette__alerte b { display: block; color: var(--encre); } .maquette__alerte span { color: var(--discret); } .maquette__alerte small { font-size: 12px; color: var(--discret); white-space: nowrap; }
.maquette__lot { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--filet); border-radius: 14px; } .maquette__lot b { display: block; color: var(--encre); } .maquette__lot span { font-size: 12.5px; color: var(--discret); } .maquette__lot p { margin-top: 8px; font-size: 12.5px; color: var(--discret); }
.maquette__progression { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: var(--doux); } .maquette__progression i { display: block; width: var(--p); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.js .maquette__progression i { width: 0; } .js .maquette__vue.joue .maquette__progression i { width: var(--p); }
/* tableau de compatibilité par marque */
.compat { margin-top: 36px; } .compat td:first-child { font-weight: 600; color: var(--encre); white-space: nowrap; } .compat ul { margin: 0; padding: 0; list-style: none; } .compat li + li { margin-top: 6px; } .compat a { border-bottom: 1px solid var(--filet); } .compat a:hover { border-color: currentColor; } .compat__vide { color: var(--gris); }
.compat__note { max-width: 820px; margin-top: 16px; font-size: 13px; color: var(--discret); }
.compat__universels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; padding: 0; list-style: none; } .compat__universels > li { padding: 24px; border: 1px solid var(--filet); border-radius: var(--rayon); } .compat__universels .picto { width: 48px; height: 48px; } .compat__universels h3 { margin-top: 16px; font-size: 17px; } .compat__universels ul { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; } .compat__universels ul li + li { margin-top: 6px; } .compat__universels .btn { margin-top: 18px; }
@media (max-width: 1180px) { .compat__universels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .maquette__corps { grid-template-columns: 1fr; } .maquette__menu { display: flex; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--filet); } .maquette__menu li { white-space: nowrap; } .maquette__compteurs { grid-template-columns: 1fr; } .maquette__liste th:nth-child(3), .maquette__liste td:nth-child(3) { display: none; } .autodiag__resultat { grid-template-columns: 1fr; gap: 18px; padding: 26px; } .compat__universels { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .maquette__graphe i { transform: none; transition: none; } .js .maquette__progression i { width: var(--p); transition: none; } }

/* ==========================================================================
   21. ARTICLE D'ACTUALITÉ — barre de partage, sommaire suivi au défilement, « À lire également »
   (page rendue par le serveur : application/src/pages.js ; script : socle.js → article())
   ========================================================================== */
.article__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; max-width: 760px; padding-top: 28px; }
.article__barre + .article__tete { padding-top: 40px; }
.article__retour-haut { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--discret); transition: color .2s; } .article__retour-haut:hover { color: var(--encre); } .article__retour-haut:hover .fleche { transform: translateX(-2px); }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.partage__titre { margin-right: 4px; font-size: 14px; font-weight: 600; color: var(--encre); }
.partage__lien { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--filet); border-radius: 999px; color: var(--encre); background: #fff; transition: border-color .25s, transform .25s; }
.partage__lien:hover { border-color: var(--encre); transform: translateY(-1px); }
.partage__icone { width: 18px; height: 18px; fill: currentColor; } .partage__icone--trait { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.partage__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.partage__retour { flex-basis: 100%; font-size: 13px; color: var(--discret); overflow-wrap: anywhere; } .partage__retour:empty { display: none; }
.article--large { max-width: 1124px; } .article--large .article__tete { max-width: 760px; }
.article__grille { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 64px; align-items: start; }
.article__principal { min-width: 0; }
.article__aside { position: sticky; top: calc(var(--entete-h) + 28px); display: grid; gap: 28px; max-height: calc(100vh - var(--entete-h) - 40px); overflow: auto; overscroll-behavior: contain; }
.article__sommaire { padding: 20px 22px 16px 24px; border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13.5px; } .article__sommaire p { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .article__sommaire ol { margin: 10px 0 0; padding: 0; list-style: none; }
.article__sommaire a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid transparent; line-height: 1.35; color: var(--discret); transition: color .2s, border-color .2s; } .article__sommaire a:hover, .article__sommaire a.actif { color: var(--encre); } .article__sommaire a.actif { border-left-color: var(--orange); font-weight: 600; }
.article__corps h2[id] { scroll-margin-top: calc(var(--entete-h) + 24px); }
.a-lire h2 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .a-lire ul { display: grid; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.a-lire__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.a-lire__vignette { width: 96px; height: 60px; object-fit: cover; border-radius: var(--rayon-petit); background: var(--doux); } .a-lire__vignette--picto { display: grid; place-items: center; } .a-lire__vignette--picto .picto { width: 30px; height: 30px; }
.a-lire__texte { display: grid; gap: 4px; font-size: 14px; } .a-lire__texte time { font-size: 12px; color: var(--discret); } .a-lire__texte strong { font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--encre); }
.a-lire .lire { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--encre); } .a-lire__item:hover strong { text-decoration: underline; text-decoration-color: var(--gris); text-underline-offset: 3px; } .a-lire__item:hover .fleche { transform: translate(2px, -2px); }
@media (max-width: 1180px) {
  .article--large { max-width: 760px; } .article__grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .article__aside { display: contents; } .article__sommaire { order: -1; }
  .a-lire ul { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 24px; }
}
@media (max-width: 620px) { .article__barre { padding-top: 20px; } .partage__titre { flex-basis: 100%; margin: 0; } }

/* ==========================================================================
   22. ILLUSTRATIONS DES PAGES MÉTIER ET SECTEUR (bande de déclaration dessinée dans la charte, chiffre clé en texte)
       et INFOGRAPHIES PERMANENTES (figure centrée, image dessinée par illustrer.mjs)
   ========================================================================== */
.plein--illustre > img { filter: none; animation-duration: 40s; }
.plein--illustre::before { background: linear-gradient(90deg, rgba(var(--nuit-rgb),.5), rgba(var(--nuit-rgb),.04) 60%), linear-gradient(180deg, rgba(var(--nuit-rgb),0) 45%, rgba(var(--nuit-rgb),.55)); }
.plein__contenu { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; align-self: stretch; }
.plein__chiffre { max-width: 520px; } .plein__chiffre b { display: block; font-size: 84px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #fff; } .plein__chiffre span { display: block; margin-top: 12px; font-size: 17px; font-weight: 500; color: rgba(255,255,255,.78); }
.infographie { max-width: 820px; margin: 36px auto 0; } .infographie img { width: 100%; height: auto; border: 1px solid var(--filet); border-radius: var(--rayon); background: #F6F7F9; } .infographie figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--discret); }
@media (max-width: 900px) { .plein__chiffre b { font-size: 56px; } .plein__contenu { gap: 40px; } }

@media print {
  .groupe, .burger, .barre-action, .vivante canvas, .clients, .appel-zone, .entete__nav, .entete__recherche, .recherche, .abonnement { display: none !important; }
  .entete { position: static; } .nuit, .declaration, .pied { color: #000; background: #fff !important; } .nuit h2, .nuit h3, .pied a, .pied__slogan, .pied__liens li { color: #000; } .js .apparait { opacity: 1; transform: none; }
  /* guides imprimés en PDF : outils/generer_pdf_guides.mjs pose la classe « impression » sur <html> (Ctrl+P d'un visiteur garde les règles générales) */
  html.impression .entete, html.impression .pied, html.impression .fil-ariane, html.impression .guide__sommaire, html.impression .guide__liees, html.impression .guide__telecharger, html.impression .guide__recevoir { display: none !important; }
  html.impression body { background: #fff; } html.impression .guide { padding: 0; } html.impression .guide .c { width: auto; } html.impression .guide__tete { max-width: none; margin-top: 0; } html.impression .guide__tete h1 { font-size: 24pt; line-height: 1.12; } html.impression .guide__chapo { font-size: 12pt; }
  html.impression .guide__image { margin: 16px 0 0; } html.impression .guide__image img { border-radius: 6px; } html.impression .guide__corps { display: block; margin-top: 20px; } html.impression .guide__texte { font-size: 10.5pt; line-height: 1.55; }
  html.impression .guide__texte > section > h2 { margin-top: 1.5em; font-size: 16pt; break-after: avoid; } html.impression .guide__texte h3 { break-after: avoid; } html.impression figure, html.impression table, html.impression details, html.impression .figure-schema, html.impression .tableau-guide { break-inside: avoid; }
  html.impression details > summary { list-style: none; font-weight: 600; } html.impression details > summary::-webkit-details-marker { display: none; } html.impression details > summary::after { display: none; }
  html.impression .guide__sources a::after { content: " — " attr(href); font-size: 8.5pt; color: #6B7583; word-break: break-all; }
  html.impression .impression-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #E6E8EC; font-size: 9.5pt; color: #5F6A78; } html.impression .impression-tete img { width: auto; height: 30px; }
}

/* 23. RECHERCHE DANS LE SITE (bouton de l'en-tête, fenêtre modale, résultats) ------------------------ */
.entete__recherche { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--filet); border-radius: 50%; color: var(--encre); background: #fff; transition: border-color .2s; } .entete__recherche:hover, .entete__recherche:focus-visible { border-color: var(--encre); } .entete__recherche svg { width: 18px; height: 18px; } .entete__recherche--mobile { display: none; }
.recherche { width: min(100% - 32px, 720px); max-height: min(100dvh - 32px, 760px); margin: auto; padding: 0; border: 1px solid var(--filet); border-radius: 22px; color: var(--texte); background: #fff; box-shadow: 0 40px 80px -32px rgba(10,21,36,.45); } .recherche::backdrop { background: rgba(10,21,36,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body:has(.recherche[open]) { overflow: hidden; }
.recherche[open] { display: flex; flex-direction: column; } .recherche__form { display: flex; flex-direction: column; min-height: 0; } .recherche__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recherche__champ { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px 12px 22px; border-bottom: 1px solid var(--filet); } .recherche__champ > svg { flex: none; width: 20px; height: 20px; color: var(--gris); } .recherche__champ input { flex: 1; min-width: 0; padding: 8px 0; border: 0; font-size: 18px; color: var(--encre); background: none; } .recherche__champ input:focus { outline: none; } .recherche__champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche__fermer { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--filet); border-radius: 50%; color: var(--encre); background: #fff; } .recherche__fermer:hover { border-color: var(--encre); } .recherche__fermer svg { width: 14px; height: 14px; }
.recherche__aide { padding: 10px 22px 0; font-size: 12.5px; color: var(--discret); } .recherche__aide kbd { padding: 1px 6px; border: 1px solid var(--filet); border-radius: 5px; font-family: inherit; font-size: 11px; }
.recherche__resultats { overflow-y: auto; padding: 10px 12px 16px; } .recherche__nombre, .recherche__vide { padding: 6px 10px; font-size: 13px; color: var(--discret); } .recherche__vide { padding: 16px 10px 8px; font-size: 14.5px; color: var(--texte); } .recherche__vide a { text-decoration: underline; text-underline-offset: 2px; }
.recherche__liste { margin: 0; padding: 0; list-style: none; } .recherche__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 3px 14px; align-items: start; padding: 12px 10px; border-radius: 12px; transition: background .15s; } .recherche__item:hover, .recherche__item:focus-visible { background: var(--doux); outline: none; }
.recherche__type { grid-row: 1 / span 3; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); } .recherche__item b { font-weight: 600; line-height: 1.3; color: var(--encre); } .recherche__item small { display: block; font-size: 13px; line-height: 1.5; color: var(--discret); } .recherche__item em { font-size: 12px; font-style: normal; color: var(--gris); } .recherche__item mark { padding: 0 1px; border-radius: 3px; color: inherit; background: rgba(var(--halo), .18); }
@media (max-width: 1180px) { .entete__recherche--mobile { display: grid; margin-left: auto; } .entete__actions .entete__recherche { display: none; } }
@media (max-width: 620px) { .recherche { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; } .recherche__champ { padding: 12px 12px 10px 16px; } .recherche__champ input { font-size: 16px; } .recherche__item { grid-template-columns: 1fr; gap: 2px; } .recherche__type { grid-row: auto; } }

/* 28. FORMULAIRE : précisions pour un devis (affichées quand la demande est un devis) ------------------- */
.devis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--filet); border-radius: 14px; background: var(--creme); } .devis legend { padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--encre); } .devis legend small { font-weight: 400; color: var(--discret); }
.devis__cases { display: grid; gap: 10px; } .devis__legende { font-size: 13px; font-weight: 600; color: var(--encre); } .devis__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .devis__options .champ--case { font-size: 13.5px; } .devis .champ input, .devis .champ select { background: #fff; }
@media (max-width: 620px) { .devis, .devis__options { grid-template-columns: 1fr; } }

/* 27. LISTE DES ACTUALITÉS : filtres, cartes d'un autre site du groupe ---------------------------- */
.actus__filtres { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -16px 0 32px; } .actus__filtre { display: flex; flex-wrap: wrap; gap: 8px; }
.actus__filtres .filtre { min-height: 36px; padding: 0 14px; border-color: var(--filet); font-size: 13px; color: var(--texte); background: #fff; } .actus__filtres .filtre:hover { border-color: var(--encre); color: var(--encre); } .actus__filtres .filtre[aria-pressed="true"] { border-color: var(--encre); color: #fff; background: var(--encre); }
.actu[hidden] { display: none; } .actus__vide { padding: 24px 0; color: var(--discret); } .actu__site { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--encre); background: var(--doux); }

/* 26. QUESTIONS FRÉQUENTES (toutes les questions du site, par thème) --------------------------- */
.faq-page { padding-bottom: 72px; } .faq-page__themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .faq-page__themes a { padding: 8px 14px; border: 1px solid var(--filet); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--encre); background: #fff; transition: border-color .2s, background .2s; } .faq-page__themes a:hover { border-color: var(--encre); }
.faq-page__theme { max-width: 880px; margin-top: 48px; scroll-margin-top: 110px; } .faq-page__theme h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; font-size: 24px; letter-spacing: -.02em; } .faq-page__theme h2 a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--discret); } .faq-page__theme h2 a:hover { color: var(--encre); } .faq-page__theme h2 a .fleche { width: 14px; height: 14px; }
@media (max-width: 620px) { .faq-page__theme { margin-top: 36px; } .faq-page__theme h2 { font-size: 20px; } }

/* 29. ESPACE PRESSE (site du groupe) ------------------------------------------------------- */
.presse__texte { max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--encre); } .presse .trait-haut + .trait-haut { margin-top: 56px; } .presse__chiffres { margin-top: 32px; } .presse__note { margin-top: 16px; font-size: 13px; color: var(--discret); }
.presse__societes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 32px; margin-top: 24px; } .presse__societes li { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; } .presse__societes b { font-size: 17px; color: var(--encre); } .presse__societes span { font-size: 14px; line-height: 1.5; color: var(--texte); } .presse__societes a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--encre); } .presse__societes a .fleche { width: 14px; height: 14px; }
.presse__logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 28px; } .presse__logo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; padding: 18px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; } .presse__apercu { display: grid; place-items: center; min-height: 110px; margin: 0; padding: 14px; border: 1px solid var(--filet); border-radius: 12px; background: #fff; } .presse__apercu--nuit { background: var(--nuit); border-color: var(--nuit); } .presse__apercu img { max-width: 100%; max-height: 80px; width: auto; height: auto; }
.presse__logo h3 { grid-column: 1 / -1; margin-top: 4px; font-size: 16px; } .presse__liens { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .presse__liens a { padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--encre); background: #fff; transition: border-color .2s; } .presse__liens a:hover { border-color: var(--encre); }
.presse__visuels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; } .presse__visuels a { display: grid; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--encre); } .presse__visuels img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--filet); }
.presse__regles ul { display: grid; gap: 10px; margin-top: 18px; max-width: 76ch; font-size: 14.5px; line-height: 1.55; color: var(--texte); } .presse__regles li { padding-left: 18px; position: relative; } .presse__regles li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
@media (max-width: 620px) { .presse__logo { grid-template-columns: 1fr; } }

/* 25. PLAN DU SITE ---------------------------------------------------------------------- */
.plan { padding-bottom: 72px; } .plan__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px 40px; margin-top: 8px; }
.plan__rubrique h2 { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); } .plan__rubrique li { margin-bottom: 9px; font-weight: 500; line-height: 1.4; } .plan__rubrique a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 24. GUIDES : téléchargement en PDF, réception par e-mail (bloc clair, même formulaire que le pied de page) ------- */
.impression-tete { display: none; }
.guide__telecharger { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .guide__telecharger .btn svg { width: 18px; height: 18px; }
.guide__recevoir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 40px; align-items: center; margin-top: 56px; padding: 28px 30px; border: 1px solid var(--filet); border-radius: 18px; background: var(--creme); }
.guide__recevoir-texte h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; } .guide__recevoir-texte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texte); }
.guide__recevoir .abonnement__ligne input { color: var(--encre); background: #fff; border-color: #8A94A3; } .guide__recevoir .abonnement__ligne input::placeholder { color: var(--gris); } .guide__recevoir .abonnement__ligne input:focus { border-color: var(--focus, var(--accent)); box-shadow: 0 0 0 4px rgba(var(--halo), .14); }
.guide__recevoir .abonnement__accord { color: var(--texte); } .guide__recevoir .abonnement__accord a { color: var(--encre); } .guide__recevoir .abonnement__accord input { accent-color: var(--accent-texte); }
.formulaire__retour a { margin-left: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .guide__recevoir { grid-template-columns: 1fr; padding: 22px 20px; } }
/* (1.2) page 404 utile : actions et pages de repère ; raccourcis de la fenêtre de recherche vide */
.erreur-404__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .erreur-404__reperes { width: 100%; margin-top: 12px; } .erreur-404 .cible { border: 1px solid var(--filet); }
.recherche__liste--raccourcis .recherche__item b { font-weight: 600; }
/* (1.2) recherches fréquentes (pastilles) dans la fenêtre vide ; « poser la question » quand rien n'est trouvé */
.recherche__frequentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 2px 10px 12px; } .recherche__frequente { padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; font: 500 13px/1.3 var(--police); color: var(--encre); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; } .recherche__frequente:hover, .recherche__frequente:focus-visible { border-color: var(--encre); background: var(--doux); }
.recherche__question { margin: 0; padding: 0 10px 12px; } .recherche__question .btn { min-height: 38px; }
/* (1.2) lexique relié aux pages : terme souligné en pointillé, définition en info-bulle (data-def), lien vers le lexique ; renvois « Sur les pages » */
.terme { position: relative; color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-clair); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
.terme:hover, .terme:focus-visible { text-decoration-style: solid; text-decoration-color: var(--accent-texte); }
.terme::after { content: attr(data-def); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; width: max-content; max-width: min(340px, 80vw); padding: 10px 13px; border-radius: 10px; font: 400 13px/1.45 var(--police); letter-spacing: 0; text-align: left; text-transform: none; color: #fff; background: var(--nuit); box-shadow: 0 16px 34px -14px rgba(10,21,36,.6); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; white-space: normal; }
.terme:hover::after, .terme:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .terme::after { display: none; } } @media print { .terme { text-decoration: none; } .terme::after { display: none; } }
.lexique__pages { margin: 8px 0 0; font-size: 13px; color: var(--discret); } .lexique__pages a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet); } .lexique__pages a:hover { text-decoration-color: var(--encre); }
/* (1.2) bandeau d'annonce (Réglages → Bandeau d'annonce) : au-dessus de l'en-tête, deux niveaux, masquable */
.bandeau { background: var(--nuit); color: #fff; font-size: 14px; line-height: 1.45; } .bandeau .c { display: flex; align-items: center; gap: 16px; padding: 10px 0; } .bandeau p { flex: 1; margin: 0; } .bandeau a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .bandeau--alerte { background: var(--orange); } .bandeau__fermer { flex: none; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; color: #fff; cursor: pointer; } .bandeau__fermer:hover { background: rgba(255,255,255,.14); } .bandeau[hidden] { display: none; }
@media print { .bandeau { display: none; } }
/* (27/09/2026) page « Nos sociétés » du groupe : quand faire appel à chaque société, pages clés */
.societe__quand { margin-top: 16px; font-weight: 500; color: var(--encre); } .societe__pages { margin: 14px 0 22px; }
/* tableau « quel besoin, quelle équipe » (page Implantations du groupe) : fiches empilées sur téléphone, tout reste lisible sans défilement horizontal */
@media (max-width: 760px) { .tableau-besoins table { min-width: 0; width: 100%; } .tableau-besoins thead { display: none; } .tableau-besoins table, .tableau-besoins tbody, .tableau-besoins tr, .tableau-besoins th, .tableau-besoins td { display: block; } .tableau-besoins tr { padding: 14px 16px; border-bottom: 1px solid var(--filet); } .tableau-besoins tr:last-child { border-bottom: 0; } .tableau-besoins tbody th, .tableau-besoins tbody td { padding: 0; border: 0; background: none; } .tableau-besoins tbody td { margin-top: 4px; font-size: 14px; } .tableau-besoins tbody td:last-child { color: var(--gris); } }
/* 30. CHARGEMENT : barre de progression entre deux pages, entrée en scène du haut de page (28/09/2026) ------------- */
html::before { content: ""; position: fixed; left: 0; top: 0; z-index: 3000; width: 0; height: 3px; background-color: var(--accent-clair); background-image: linear-gradient(90deg, var(--accent-clair), var(--orange)); box-shadow: 0 0 12px rgba(var(--braise),.55); opacity: 0; pointer-events: none; }
html.charge::before { opacity: 1; animation: barre-depart 4s cubic-bezier(.1,.7,.2,1) forwards; }
html.arrive::before { width: 85%; opacity: 1; animation: barre-arrivee .7s ease-out forwards; }
@keyframes barre-depart { 0% { width: 0; } 30% { width: 45%; } 100% { width: 85%; } }
@keyframes barre-arrivee { 0% { width: 85%; opacity: 1; } 55% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
/* « translate » et « scale », jamais « transform » : l'animation ne doit pas remplacer la transformation propre à l'élément (centrage du visuel, survol des boutons) */
@keyframes entree { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes entree-visuel { from { opacity: 0; scale: .975; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.fige) .hero__texte > *, html.js:not(.fige) .activite-hero__texte > *, html.js:not(.fige) .page-legale__tete > *, html.js:not(.fige) .page-simple__tete > * { animation: entree .7s cubic-bezier(.2,.7,.2,1) both; }
  html.js:not(.fige) .hero__texte > :nth-child(2), html.js:not(.fige) .activite-hero__texte > :nth-child(2), html.js:not(.fige) .page-legale__tete > :nth-child(2), html.js:not(.fige) .page-simple__tete > :nth-child(2) { animation-delay: .08s; }
  html.js:not(.fige) .hero__texte > :nth-child(3), html.js:not(.fige) .activite-hero__texte > :nth-child(3), html.js:not(.fige) .page-legale__tete > :nth-child(3), html.js:not(.fige) .page-simple__tete > :nth-child(3) { animation-delay: .16s; }
  html.js:not(.fige) .hero__texte > :nth-child(4), html.js:not(.fige) .activite-hero__texte > :nth-child(4), html.js:not(.fige) .page-legale__tete > :nth-child(4), html.js:not(.fige) .page-simple__tete > :nth-child(4) { animation-delay: .24s; }
  html.js:not(.fige) .hero__texte > :nth-child(n+5), html.js:not(.fige) .activite-hero__texte > :nth-child(n+5), html.js:not(.fige) .page-legale__tete > :nth-child(n+5), html.js:not(.fige) .page-simple__tete > :nth-child(n+5) { animation-delay: .32s; }
  html.js:not(.fige) .hero .carte-jour, html.js:not(.fige) .activite-hero .scene { animation: entree-visuel .9s .1s cubic-bezier(.2,.7,.2,1) both; }
}
@media print { html::before { display: none; } }
/* 31. FINITIONS (28/09/2026) : titres équilibrés, sélection, retour en haut, sommaire suivi des guides, images en fondu, champs vérifiés */
h1, h2, h3, .chapo, .lead { text-wrap: balance; }
p, li, dd, figcaption, summary { text-wrap: pretty; }
::selection { color: var(--encre); background: rgba(var(--halo),.22); }
.nuit ::selection, .declaration ::selection, .pied ::selection, .sombre ::selection, .appel ::selection { color: #fff; background: rgba(var(--lueur),.45); }
.haut { position: fixed; right: 20px; bottom: 24px; z-index: 190; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--filet); border-radius: 50%; color: var(--encre); background: #fff; box-shadow: 0 14px 30px -14px rgba(10,21,36,.45); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, border-color .2s; cursor: pointer; }
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { border-color: var(--accent); } .haut:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
.haut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guide__sommaire a.actif { color: var(--encre); font-weight: 600; } .guide__sommaire a.actif::before { color: var(--orange); }
html.js:not(.fige) img.fondu { opacity: 0; transition: opacity .6s ease; animation: apparait-repli 0s 4s forwards; } html.js img.fondu.chargee { opacity: 1; animation: none; }
.champ__erreur { display: block; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: #B23A0E; }
@media (max-width: 760px) { .haut { right: 14px; bottom: 18px; } .avec-barre-action .haut { bottom: 92px; } }
@media print { .haut { display: none !important; } }
/* 32. LISTES D'ACTUALITÉS ET DE GUIDES (28/09/2026) : « Afficher plus », aperçu du contenu des guides */
.actus__plus { margin-top: 36px; text-align: center; } .actus__plus[hidden] { display: none; }
.ressources__apercu { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--filet); } .ressources__apercu h2 { font-size: 30px; } .ressources__apercu .lead { max-width: 760px; margin-top: 14px; color: var(--discret); }
.ressources__apercu-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 48px; margin-top: 36px; }
.ressources__apercu-liste article { padding-top: 20px; border-top: 1px solid var(--filet); } .ressources__apercu-liste h3 { font-size: 18px; line-height: 1.3; } .ressources__apercu-liste h3 a:hover { color: var(--accent-texte, var(--accent)); }
.ressources__apercu-liste .meta { margin-top: 6px; font-size: 12.5px; color: var(--gris); } .ressources__apercu-liste ul { margin: 12px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--discret); }
@media (max-width: 900px) { .ressources__apercu { margin-top: 56px; padding-top: 40px; } .ressources__apercu h2 { font-size: 26px; } .ressources__apercu-liste { grid-template-columns: 1fr; } }
/* 33. CARTES D'ACTUALITÉ (28/09/2026) : la société, la catégorie et la date ne se coupent plus en deux lignes ; trop à l'étroit, elles passent à la ligne entières */
.actu .meta { flex-wrap: wrap; gap: 6px 10px; } .actu .meta em, .actu .meta time, .actu__site { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 34. SOCIÉTÉ « EN CONSTRUCTION », LOGO EN HAUTEUR (28/09/2026) : mention près du nom ; le logo Hecate Protection, en hauteur, est affiché plus grand que les logos en largeur */
.mention-etat { display: inline-block; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: .02em; white-space: nowrap; opacity: .78; }
.metier__logo--haut { height: 92px; } .metier h3:has(.mention-etat) { flex-wrap: wrap; row-gap: 6px; } .organigramme__logo { box-sizing: border-box; height: 88px; padding-block: 16px; } .organigramme__logo--haut { padding-block: 0; } .organigramme__filiales .mention-etat { align-self: flex-start; margin-top: 10px; font-size: 11px; color: var(--encre); } .societe__logo--haut { height: 100px; } .societe__tete .mention-etat { margin-top: 8px; }
/* 35. AFFICHAGE (28/09/2026). Définitions du lexique : une bulle unique, posée par socle.js au-dessus de tout (elle passait derrière l'en-tête) ;
   sans script, la bulle de la feuille de style n'existe qu'au survol (invisible, elle élargissait les pages : défilement horizontal).
   Titre tournant et changement de page : l'ancien contenu s'efface avant que le nouveau n'apparaisse, les deux ne se superposent plus. */
.terme::after { display: none; } .terme:hover::after, .terme:focus-visible::after { display: block; } .bulles .terme::after, .bulles .terme:hover::after, .bulles .terme:focus-visible::after { display: none; }
.bulle-terme { position: fixed; left: 0; top: 0; z-index: 450; box-sizing: border-box; width: max-content; max-width: 340px; padding: 10px 13px; border-radius: 10px; font: 400 13px/1.45 var(--police); letter-spacing: 0; text-align: left; color: #fff; background: var(--nuit); box-shadow: 0 16px 34px -14px rgba(10,21,36,.6); pointer-events: none; } .bulle-terme[hidden] { display: none; }
.rot > span { transition: opacity .26s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .rot > span.on { transition-delay: .28s; }
@media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: page-sort .14s ease both; } ::view-transition-new(root) { animation: page-entre .22s ease .14s both; } }
@keyframes page-sort { to { opacity: 0; } } @keyframes page-entre { from { opacity: 0; } }
@media print { .bulle-terme { display: none; } }