@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/outfit-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/inter-600.woff2") format("woff2"); }
:root {
  --nuit: #0B1F3A; --nuit-2: #071426; --nuit-carte: #1A2C45; --nuit-trait: #2F405A;
  --acc: #D9A93A; --acc-survol: #BB9132; --sur-acc: #071426; --acc-clair: #8D6E26; --acc-sombre: #D9A93A;
  --acc-doux: #FBF6EB; --acc-bord: rgba(217,169,58,.4); --acc-voile: rgba(217,169,58,.28);
  --alerte: #F2B544; --sur-alerte: #071426;
  --surface: #F5F7FA; --teinte: #E9EEF3; --trait: #D8DEE6; --trait-doux: #E3E8EE;
  --encre: #0B1728; --texte: #2E3B4D; --gris: #566476; --gris-clair: #C1CAD7; --gris-moyen: #8796AB;
  --rouge: #A3262A; --vert: #1E6B45;
  --r: 12px;
  --r-bouton: 8px;
  --ombre: 0 30px 60px -30px rgba(7, 20, 38, .45);
  --titres: "Outfit", "Inter", system-ui, sans-serif;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.65;
  color: var(--encre); background: #fff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--acc-clair); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
h1, h2, h3 { font-family: var(--titres); line-height: 1.06; letter-spacing: -.012em; margin: 0; font-weight: 700; color: var(--encre); }
h1 { font-size: clamp(40px, 5.4vw, 68px); }
h2 { font-size: clamp(32px, 3.8vw, 50px); }
h3 { font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--acc-sombre); outline-offset: 2px; border-radius: 2px; }
.conteneur { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 16px; z-index: 100; }
.saut:focus { left: 12px; top: 12px; }
.discret { color: var(--gris); font-size: 15px; }
.facultatif { font-weight: 400; color: var(--gris); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html:not(.js) .js-seulement { display: none !important; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1.2 var(--police); text-decoration: none; cursor: pointer;
  padding: 16px 26px; border-radius: var(--r-bouton); border: 1.5px solid var(--acc);
  background: var(--acc); color: var(--sur-acc); transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.bouton:hover { background: var(--acc-survol); border-color: var(--acc-survol); color: var(--sur-acc); }
.bouton--blanc { background: var(--acc); color: var(--sur-acc); border-color: var(--acc); }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: #fff; border-color: var(--encre); }
.bouton--petit { padding: 11px 16px; font-size: 14px; }
.bouton--plein { width: 100%; }
.lien-fleche { font-weight: 600; font-size: 15px; color: var(--acc-clair); }
.lien-fleche::after { content: " →"; transition: margin .15s; }
a:hover .lien-fleche::after, .lien-fleche:hover::after { margin-left: 4px; }
.sombre .bouton--contour, .accroche .bouton--contour, .bandeau .bouton--contour, .section--bleue .bouton--contour, .expert .bouton--contour, .ia .bouton--contour {
  color: #fff; border-color: rgba(255,255,255,.45); }
.sombre .bouton--contour:hover, .accroche .bouton--contour:hover, .bandeau .bouton--contour:hover, .section--bleue .bouton--contour:hover, .expert .bouton--contour:hover, .ia .bouton--contour:hover {
  background: #fff; color: var(--nuit); border-color: #fff; }
.annonce { margin: 0; background: var(--alerte); color: var(--sur-alerte); text-align: center; padding: 10px 16px; font-size: 15px; font-weight: 600; }
.annonce a { color: var(--sur-alerte); margin-left: 10px; }
.utilitaire { background: var(--nuit-2); color: var(--gris-clair); font-size: 13px; }
.utilitaire__inner { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utilitaire__liens { display: flex; gap: 24px; align-items: center; }
.utilitaire a { color: var(--gris-clair); text-decoration: none; }
.utilitaire a:hover { color: #fff; }
.utilitaire__urgence { color: #fff !important; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-sombre); }
.entete { background: var(--nuit); position: relative; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.08); }
.entete__inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { width: 280px; height: auto; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu__lien { color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 0;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.menu__lien:hover, .menu__lien.actif { color: #fff; border-bottom-color: var(--acc-sombre); }
.menu__lien--mobile { display: none; }
.menu__fleche { transition: transform .15s; opacity: .7; }
.menu__groupe { position: relative; }
.menu__tiroir {
  position: absolute; top: 100%; left: -20px; min-width: 310px; padding: 10px; margin-top: 12px;
  background: #fff; border-radius: var(--r); box-shadow: 0 24px 60px -20px rgba(7,20,38,.5);
  display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.menu__tiroir::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.menu__tiroir a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px;
  color: var(--encre); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu__tiroir a:hover { background: var(--surface); }
.menu__tiroir svg { color: var(--acc-clair); flex-shrink: 0; }
.menu__groupe:hover .menu__tiroir, .menu__groupe:focus-within .menu__tiroir { opacity: 1; visibility: visible; transform: none; }
.menu__groupe:hover .menu__fleche { transform: rotate(180deg); }
.menu-bascule { position: absolute; left: -9999px; }
.menu-bouton { display: none; }
.fil { background: var(--nuit); font-size: 14px; color: var(--gris-moyen); padding-top: 28px; }
.fil .conteneur { display: flex; flex-wrap: wrap; gap: 10px; }
.fil a { color: var(--gris-clair); text-decoration: none; }
.fil a:hover { color: #fff; text-decoration: underline; }
.fil [aria-current] { color: #fff; }
.section { padding: 112px 0; }
.section--serree { padding-top: 0; }
.section--grise { background: var(--surface); border-top: 1px solid var(--trait-doux); border-bottom: 1px solid var(--trait-doux); }
.section--bleue { background: var(--nuit); color: #fff; }
.section--bleue h2, .section--bleue h3 { color: #fff; }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-clair); margin: 0 0 14px; }
.section--bleue .surtitre, .entete-section--clair .surtitre, .sombre .surtitre { color: var(--acc-sombre); }
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; }
.entete-section__texte { max-width: 480px; margin: 0; color: var(--gris); }
.section--bleue .entete-section__texte { color: var(--gris-clair); }
.titre-section { font-size: 34px; margin-bottom: 32px; }
.chapeau { font-size: 20px; line-height: 1.6; color: var(--gris); max-width: 660px; margin: 0; }
.pastille { display: inline-block; font-size: 13px; font-weight: 600; color: var(--acc-clair); background: var(--acc-doux); padding: 5px 11px; border-radius: 999px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pastilles span { font-size: 12px; font-weight: 600; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-doux); padding: 5px 10px; border-radius: 999px; }
.capsule { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--acc-sombre); border: 1px solid var(--acc-bord); padding: 7px 13px; border-radius: 999px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.accroche { background: var(--nuit); color: #fff; padding: 88px 0 112px; position: relative; overflow: hidden; }
.accroche::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.accroche__trame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.accroche.trame-active::before { display: none; }
.accroche.trame-active .accroche__trame { display: block; }
.accroche__grille { position: relative; display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; }
.accroche h1 { color: #fff; font-size: clamp(44px, 6vw, 82px); line-height: 1; letter-spacing: -.02em; }
.accroche h1 .h1-mots { display: block; width: fit-content; margin-bottom: 28px; font-family: var(--police); font-size: 13px; line-height: 1.3;
  letter-spacing: .04em; font-weight: 600; color: var(--acc-sombre); border: 1px solid var(--acc-bord); padding: 7px 13px; border-radius: 999px; }
.accroche .chapeau { margin: 28px 0 32px; color: var(--gris-clair); font-size: 19px; }
.accroche__boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.accroche__boutons .bouton { font-size: 17px; padding: 17px 28px; }
.accroche__plus { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; font-size: 15px; color: var(--gris-clair); }
.accroche__plus span { display: inline-flex; align-items: center; gap: 8px; }
.accroche__plus span::before { content: ""; width: 14px; height: 8px; border-left: 2.4px solid var(--acc-sombre); border-bottom: 2.4px solid var(--acc-sombre); transform: rotate(-45deg) translateY(-2px); }
.console { background: var(--nuit-2); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.console__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.console__station { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--gris-moyen); }
.console__etat { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #fff; }
.console__heure { color: var(--gris-moyen); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pulsation { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-sombre); flex-shrink: 0; }
.pulsation::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acc-sombre); animation: onde 1.8s ease-out infinite; }
.console__corps { padding: 24px 26px 10px; display: flex; flex-direction: column; gap: 18px; }
.console__alerte { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.console__petit { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--gris-moyen); margin-bottom: 4px; }
.console__titre { font-family: var(--titres); font-size: 22px; font-weight: 600; color: #fff; line-height: 1.25; }
.console__badge { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--acc-sombre); border: 1px solid currentColor; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.console__barre { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.console__barre span { display: block; height: 100%; width: 100%; background: var(--acc-sombre); border-radius: 4px; transition: width .8s ease; }
html.js .console__barre span { width: 0; }
.console__etapes { list-style: none; margin: 0; padding: 0; }
.console__etape { display: flex; gap: 18px; align-items: flex-start; padding: 11px 0; transition: opacity .5s; }
.console__num { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; border: 1.5px solid var(--acc-sombre); background: var(--acc-sombre); color: var(--nuit-2); transition: background .4s, color .4s, border-color .4s; }
.console__texte { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.console__texte strong { font-size: 16px; font-weight: 600; color: #fff; }
.console__texte span { font-size: 14px; line-height: 1.5; color: var(--gris-moyen); }
.console__statut { margin-left: auto; padding-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--gris-moyen); white-space: nowrap; }
html.js .console__etape { opacity: .45; }
html.js .console__etape .console__num { background: transparent; color: var(--gris-moyen); border-color: rgba(255,255,255,.2); }
html.js .console__etape.est-fait, html.js .console__etape.est-en-cours { opacity: 1; }
html.js .console__etape.est-fait .console__num { background: var(--acc-sombre); color: var(--nuit-2); border-color: var(--acc-sombre); }
html.js .console__etape.est-en-cours .console__num { background: transparent; color: var(--acc-sombre); border-color: var(--acc-sombre); }
html.js .console__etape.est-en-cours .console__num::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--acc-sombre); animation: onde-large 1.4s ease-out infinite; }
html.js .console__etape.est-en-cours .console__statut { color: var(--acc-sombre); }
.console__pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 26px 22px; border-top: 1px solid rgba(255,255,255,.08); }
.console__pied span, .console__pied a { font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); padding: 7px 12px; border-radius: 6px; text-decoration: none; }
.console__pied a:hover { background: rgba(255,255,255,.12); color: #fff; }
@keyframes onde { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@keyframes onde-large { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.chiffres { background: #fff; border-bottom: 1px solid var(--trait-doux); padding: 64px 0; }
.chiffres .conteneur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.chiffre { display: flex; flex-direction: column; gap: 10px; }
.chiffre::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--acc); }
.chiffre strong { display: block; font-family: var(--titres); font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--encre); }
.chiffre span { font-size: 15px; color: var(--gris); }
.tuile { display: flex; flex-direction: column; gap: 12px; padding: 26px; min-height: 180px; border: 1px solid var(--trait);
  border-radius: var(--r); color: var(--encre); text-decoration: none; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tuile:hover { border-color: var(--acc); color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre); }
.tuile svg { color: var(--acc-clair); }
.tuile__titre { font-family: var(--titres); font-size: 20px; font-weight: 600; line-height: 1.25; }
.tuile__texte { font-size: 14px; line-height: 1.55; color: var(--gris); }
.tuile--pleine { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.tuile--pleine:hover { color: #fff; background: var(--nuit-2); border-color: var(--acc-sombre); }
.tuile--pleine svg { color: var(--acc-sombre); }
.tuile--pleine .tuile__texte { color: var(--gris-clair); }
.carte-solution { display: flex; flex-direction: column; gap: 16px; padding: 32px; min-height: 260px; background: var(--surface);
  border: 1px solid transparent; border-radius: var(--r); color: var(--encre); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.carte-solution--blanche { background: #fff; border-color: var(--trait); }
.carte-solution:hover { border-color: var(--acc); color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-solution__icone { width: 52px; height: 52px; border-radius: 10px; background: var(--acc-doux);
  display: flex; align-items: center; justify-content: center; color: var(--acc-clair); }
.carte-solution__titre { font-family: var(--titres); font-size: 23px; font-weight: 600; line-height: 1.2; }
.carte-solution__texte { font-size: 16px; line-height: 1.65; color: var(--gris); flex-grow: 1; }
.expert { background: var(--nuit-2); color: #fff; border-radius: 16px; padding: 64px; display: grid; grid-template-columns: 4fr 7fr; gap: 56px; align-items: center; }
.expert--sans-photo { grid-template-columns: 1fr; }
.expert h2 { color: #fff; font-size: clamp(30px, 3.2vw, 44px); }
.expert .surtitre { color: var(--acc-sombre); }
.expert p { color: var(--gris-clair); }
.expert__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.expert__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.expert__faits div { border: 1px solid var(--nuit-trait); border-radius: var(--r); padding: 20px; }
.expert__faits strong { display: block; font-family: var(--titres); font-size: 28px; font-weight: 600; color: var(--acc-sombre); }
.expert__faits span { font-size: 14px; line-height: 1.45; color: var(--gris-clair); }
.expert__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.expert__bas span { color: var(--gris-clair); font-size: 15px; }
.entete-section--clair h2 { color: #fff; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.etapes li { background: var(--nuit-carte); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--gris-clair); }
.etapes__num { width: 40px; height: 40px; border-radius: 50%; background: var(--acc-sombre); color: var(--nuit-2); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.etapes__titre { font-family: var(--titres); font-size: 20px; font-weight: 600; color: #fff; }
.duo { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.duo--inverse { grid-template-columns: 6fr 5fr; }
.duo h2 { margin-bottom: 20px; }
.duo .chapeau { font-size: 17px; margin-bottom: 20px; }
.coches { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.coches li { display: flex; gap: 12px; align-items: flex-start; }
.coches svg { color: var(--acc-clair); flex-shrink: 0; margin-top: 4px; }
.ia { background: var(--nuit-2); color: #fff; }
.ia .duo { grid-template-columns: 5fr 7fr; }
.ia h2 { color: #fff; }
.ia .chapeau { color: var(--gris-clair); }
.ia .coches li { color: #fff; }
.ia .coches svg { color: var(--acc-sombre); }
.ia .capsule { margin-bottom: 22px; }
.ia + .section--serree, .section--bleue + .section--serree { padding-top: 112px; }
.camera { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #060E1C; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); margin: 0; }
.camera__image { position: relative; aspect-ratio: 700 / 380; overflow: hidden; background: #0A1322; }
.camera__image > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.camera__balayage { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--acc-voile); animation: balayage 6s linear infinite; }
.camera__coin { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255,255,255,.5); }
.camera__coin--hg { left: 16px; top: 16px; border-left-width: 2px; border-top-width: 2px; }
.camera__coin--hd { right: 16px; top: 16px; border-right-width: 2px; border-top-width: 2px; }
.camera__coin--bg { left: 16px; bottom: 16px; border-left-width: 2px; border-bottom-width: 2px; }
.camera__coin--bd { right: 16px; bottom: 16px; border-right-width: 2px; border-bottom-width: 2px; }
.camera__rec, .camera__horodatage { position: absolute; top: 22px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.camera__rec { gap: 0; } .camera__rec i { margin-right: 10px; }
.camera__rec { left: 44px; }
.camera__horodatage { right: 44px; font-variant-numeric: tabular-nums; }
.camera__rec i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: clignote 1.2s steps(2, start) infinite; }
.camera__rgpd { position: absolute; left: 44px; bottom: 22px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(6,14,28,.78); padding: 6px 10px; border-radius: 6px; }
.camera__rgpd svg { color: var(--acc-sombre); }
.camera__journal { padding: 16px 22px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.camera__journal p { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--gris-moyen); }
.camera__journal ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.camera__journal li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #fff; transition: opacity .4s; }
.camera__journal li:nth-child(2) { opacity: .7; }
.camera__journal li:nth-child(3) { opacity: .45; }
.camera__journal time { width: 64px; flex-shrink: 0; color: var(--gris-moyen); font-variant-numeric: tabular-nums; }
.camera__journal b { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--acc-sombre); }
.camera__journal b.alerte { background: #fff; }
.camera__journal b.neutre { background: var(--gris-moyen); }
.cam-marche { animation: cam-marche 15s linear infinite; }
.cam-vehicule { animation: cam-vehicule 15s ease-in-out infinite; }
.cam-animal { animation: cam-animal 21s linear infinite; }
.cam-cadre { stroke: var(--acc-sombre); }
.cam-etiquette { fill: var(--acc-sombre); }
.cam-etiquette-texte { fill: var(--nuit-2); font: 600 12px var(--police); }
@keyframes cam-marche { 0% { transform: translateX(-90px); } 100% { transform: translateX(720px); } }
@keyframes cam-vehicule { 0%, 28% { transform: translateX(430px); opacity: 1; } 58%, 90% { transform: translateX(0); opacity: 1; } 97% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(430px); opacity: 0; } }
@keyframes cam-animal { 0% { transform: translateX(720px); } 100% { transform: translateX(-140px); } }
@keyframes balayage { 0% { transform: translateY(-4px); } 100% { transform: translateY(400px); } }
@keyframes clignote { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .pulsation::after, .console__etape .console__num::after, .camera__balayage, .camera__rec i, .cam-marche, .cam-vehicule, .cam-animal { animation: none !important; }
  .cam-marche { transform: translateX(230px); }
}
.encadre-teinte { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: 16px; padding: 64px; display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.petites-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.petite-carte { background: #fff; border: 1px solid var(--trait-doux); border-radius: var(--r); padding: 24px; }
.petite-carte strong { display: block; font-family: var(--titres); font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.petite-carte span { font-size: 15px; line-height: 1.5; color: var(--gris); }
.encadre-teinte .petite-carte { background: #fff; }
.section--grise .petite-carte, .corps .petite-carte { background: var(--surface); }
.cadre { border: 1px solid var(--trait); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.mini-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-chiffres div { background: var(--surface); border-radius: var(--r); padding: 20px; }
.mini-chiffres strong { display: block; font-family: var(--titres); font-size: 34px; font-weight: 700; color: var(--encre); line-height: 1.1; margin-bottom: 4px; }
.mini-chiffres span { font-size: 14px; line-height: 1.45; color: var(--gris); }
.partenaire { padding: 0 0 88px; }
.partenaire + .partenaire { margin-top: -56px; }
.section--grise + .partenaire, .section--bleue + .partenaire, .ia + .partenaire { padding-top: 88px; }
.partenaire__carte { display: grid; grid-template-columns: 5fr 7fr; gap: 0; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--ombre); }
.partenaire__carte--sans-photo { grid-template-columns: 1fr; }
.partenaire__texte { padding: 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.partenaire__texte .surtitre { margin: 0; }
.partenaire__logo { width: auto; max-width: 220px; max-height: 72px; object-fit: contain; object-position: left center; }
.partenaire__nom { font-size: 30px; }
.partenaire__description p { color: var(--texte); margin: 0 0 .8em; }
.partenaire__description p:last-child { margin-bottom: 0; }
.partenaire__lien { margin: 6px 0 0; }
.galerie { position: relative; min-height: 340px; background: var(--nuit-2); overflow: hidden; }
.galerie__piste { position: absolute; inset: 0; }
.galerie__vue { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.03); transition: opacity .7s ease, transform 1.2s ease; }
.galerie__vue.est-active { opacity: 1; transform: none; }
.galerie__vue img { width: 100%; height: 100%; object-fit: cover; }
.galerie__fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: var(--encre); font: 600 26px/1 var(--titres); display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
  opacity: 0; transition: opacity .2s, background .15s; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); }
.galerie__fleche--avant { left: 14px; } .galerie__fleche--apres { right: 14px; }
.galerie:hover .galerie__fleche, .galerie:focus-within .galerie__fleche { opacity: 1; }
.galerie__fleche:hover { background: #fff; }
.galerie__points { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.galerie__point { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s, background .25s; }
.galerie__point.est-actif { width: 22px; background: #fff; }
@media (hover: none) { .galerie__fleche { opacity: .9; } }
@media (max-width: 1060px) { .partenaire__carte { grid-template-columns: 1fr; } .galerie { min-height: 0; aspect-ratio: 4 / 3; } }
@media (max-width: 760px) { .partenaire { padding-bottom: 64px; } .partenaire__texte { padding: 26px 22px; } .partenaire__nom { font-size: 24px; } }
.documents { display: flex; flex-direction: column; gap: 12px; }
.document { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid var(--trait); border-radius: var(--r); color: var(--encre); text-decoration: none; background: #fff; transition: border-color .15s; }
.document:hover { border-color: var(--acc); color: var(--encre); }
.document__type { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-bouton); background: var(--acc-doux); color: var(--acc-clair); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.document__texte { flex-grow: 1; display: flex; flex-direction: column; }
.document__titre { font-weight: 600; }
.document__detail { font-size: 14px; color: var(--gris); }
.document__action { font-weight: 600; color: var(--acc-clair); white-space: nowrap; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--nuit-2); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__lancer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #fff; text-decoration: none; text-align: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, var(--nuit) 0%, var(--nuit-2) 75%); }
.video__lancer:hover { color: #fff; }
.video__bouton { width: 72px; height: 72px; border-radius: 50%; background: var(--acc); color: var(--sur-acc); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.video__bouton svg { fill: currentColor; margin-left: 4px; }
.video__lancer:hover .video__bouton { transform: scale(1.06); }
.video__titre { font-family: var(--titres); font-weight: 600; font-size: 19px; }
.video__mention { font-size: 13px; color: var(--gris-clair); }
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--r); aspect-ratio: 16 / 9; object-fit: cover; }
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); padding: 24px 0; }
.faq summary { font-family: var(--titres); font-weight: 600; font-size: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--acc-clair); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 14px 0 0; color: var(--gris); }
.colonnes-faq { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; }
.bandeau { background: var(--nuit); color: #fff; padding: 40px 0 80px; }
.bandeau h1 { color: #fff; }
.bandeau .chapeau { color: var(--gris-clair); }
.bandeau__grille { display: grid; grid-template-columns: 7fr 4fr; gap: 64px; align-items: end; }
.bandeau__texte { display: flex; flex-direction: column; gap: 22px; }
.bandeau__icone { width: 56px; height: 56px; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid var(--acc-bord); display: flex; align-items: center; justify-content: center; color: var(--acc-sombre); }
.chiffres-carte { margin: 0; background: #fff; border: 1px solid var(--trait); border-radius: var(--r); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chiffres-carte div { padding: 20px 22px; display: flex; flex-direction: column-reverse; gap: 2px; }
.chiffres-carte div:nth-child(odd) { border-right: 1px solid var(--trait-doux); }
.chiffres-carte div:nth-child(-n+2) { border-bottom: 1px solid var(--trait-doux); }
.chiffres-carte dd { margin: 0; font-family: var(--titres); font-size: 26px; font-weight: 700; color: var(--encre); line-height: 1.2; }
.chiffres-carte dt { font-size: 14px; color: var(--gris); }
.bandeau .chiffres-carte { background: var(--nuit-2); border-color: rgba(255,255,255,.09); }
.bandeau .chiffres-carte div:nth-child(odd) { border-right-color: rgba(255,255,255,.08); }
.bandeau .chiffres-carte div:nth-child(-n+2) { border-bottom-color: rgba(255,255,255,.08); }
.bandeau .chiffres-carte dd { color: var(--acc-sombre); }
.bandeau .chiffres-carte dt { color: var(--gris-clair); }
.carte-bleue { background: var(--nuit); color: #fff; border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.bandeau .carte-bleue { background: var(--nuit-2); border: 1px solid rgba(255,255,255,.09); }
.carte-bleue p { margin: 0; }
.carte-bleue__petit { font-size: 14px; color: var(--gris-clair); }
.carte-bleue__grand { font-family: var(--titres); font-size: 26px; font-weight: 600; line-height: 1.2; }
.corps { padding: 88px 0 112px; }
.corps__grille { display: grid; grid-template-columns: 7fr 1fr 4fr; }
.corps__texte { grid-column: 1; display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.corps__cote { grid-column: 3; align-self: start; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.corps--large .corps__texte { grid-column: 1 / -1; }
.bloc h2 { font-size: 34px; line-height: 1.12; margin-bottom: 18px; }
.bloc p { color: var(--texte); line-height: 1.75; }
.bloc p:last-child { margin-bottom: 0; }
.note { padding: 22px 26px; background: var(--acc-doux); border-radius: var(--r); font-size: 16px; line-height: 1.6; position: relative; padding-left: 30px; }
.note::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: var(--acc); }
.note p { margin: 0; }
.cartes-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.cartes-lignes li { list-style: none; display: flex; gap: 12px; align-items: center; padding: 18px 20px; border: 1px solid var(--trait); border-radius: var(--r); font-weight: 600; }
.cartes-lignes svg { color: var(--acc-clair); flex-shrink: 0; }
.appel-bleu { background: var(--nuit); color: #fff; border-radius: var(--r); padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.appel-bleu p { margin: 0; font-size: 17px; }
.liste-risques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.risque { border: 1px solid var(--trait); border-radius: var(--r); padding: 26px; }
.risque strong { display: block; font-family: var(--titres); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.risque span { font-size: 15px; line-height: 1.6; color: var(--gris); }
.reponses { border-bottom: 1px solid var(--trait-doux); }
.reponse { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--trait-doux); color: var(--encre); text-decoration: none; }
.reponse:hover { color: var(--encre); }
.reponse:hover .reponse__titre { color: var(--acc-clair); }
.reponse__titre { font-family: var(--titres); font-size: 19px; font-weight: 600; }
.reponse__texte { font-size: 15px; line-height: 1.6; color: var(--gris); }
.reponse__fleche { color: var(--acc-clair); font-weight: 700; }
.navigation-secteurs { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation-secteurs a, .navigation-secteurs span { font-size: 14px; font-weight: 600; color: var(--gris-clair); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); padding: 7px 13px; border-radius: 999px; text-decoration: none; }
.navigation-secteurs a:hover { color: #fff; border-color: var(--acc-bord); }
.navigation-secteurs span { background: var(--acc); color: var(--sur-acc); border-color: var(--acc); }
.stats-lignes { border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.stats-lignes div { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--trait-doux); }
.stats-lignes div:last-child { border-bottom: 0; }
.stats-lignes strong { width: 100px; flex-shrink: 0; font-family: var(--titres); font-size: 36px; font-weight: 700; color: var(--encre); line-height: 1.1; }
.carte-grise { background: var(--surface); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.carte-grise h3 { font-size: 21px; }
.carte-grise ul { margin: 0; }
.expert-fiche { background: var(--nuit-2); color: #fff; border-radius: 16px; padding: 38px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.expert-fiche--sans-photo { grid-template-columns: 1fr; }
.expert-fiche img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.expert-fiche p { color: var(--gris-clair); margin: 0 0 12px; }
.expert-fiche .surtitre { color: var(--acc-sombre); margin: 0 0 8px; }
.expert-fiche h3 { color: #fff; font-size: 28px; margin-bottom: 14px; }
.expert-fiche a { color: var(--acc-sombre); font-weight: 600; }
.numerotee { list-style: none; margin: 0; padding: 0; counter-reset: n; border-bottom: 1px solid var(--trait-doux); }
.numerotee li { counter-increment: n; display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--trait-doux); line-height: 1.65; }
.numerotee li::before { content: counter(n); width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--acc); color: var(--sur-acc); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.encart { border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; background: #fff; }
.encart__tete { background: var(--nuit); color: #fff; padding: 24px 26px; }
.encart__tete p { margin: 0; color: var(--gris-clair); font-size: 15px; }
.encart__tete .encart__titre { color: #fff; font-family: var(--titres); font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.encart__corps { padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.encart__corps p { margin: 0; }
.encart hr { border: 0; border-top: 1px solid var(--trait-doux); margin: 6px 0; width: 100%; }
.encart__tel { font-family: var(--titres); font-size: 30px; font-weight: 700; color: var(--encre); text-decoration: none; }
.sommaire { border: 1px solid var(--trait); border-radius: var(--r); padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.itineraire { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.itineraire__bouton { align-self: flex-start; gap: 8px; }
.itineraire__autres { font-size: 13px; color: var(--gris); }
.itineraire__autres a { color: var(--acc-clair); }
.sommaire p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.villes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ville { border: 1px solid var(--trait); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 10px; color: var(--encre); text-decoration: none; transition: border-color .15s, transform .15s; }
.ville:hover { border-color: var(--acc); color: var(--encre); transform: translateY(-2px); }
.ville__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ville__nom { font-family: var(--titres); font-size: 22px; font-weight: 600; }
.ville__texte { font-size: 15px; line-height: 1.6; color: var(--gris); }
.puces-villes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.puces-villes a { display: inline-block; font-size: 14px; font-weight: 600; color: var(--encre); border: 1px solid var(--trait); padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.puces-villes a:hover { border-color: var(--acc); }
.carte-france { margin: 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--trait-doux); padding: 32px; }
.carte-france img { width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.carte-france__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; justify-content: center; margin-top: 16px; font-size: 14px; color: var(--gris); text-align: center; }
.carte-france__legende > span { display: inline-flex; align-items: center; gap: 8px; }
.carte-france__pastille { width: 14px; height: 14px; border-radius: 3px; background: var(--nuit); flex-shrink: 0; }
.carte-france__pastille--station { background: var(--acc); }
.carte-anim__cadre { position: relative; }
.carte-anim svg { width: 100%; height: auto; max-width: 600px; margin: 0 auto; display: block; overflow: visible; }
.carte-anim .dep { fill: var(--trait); stroke: #fff; stroke-width: .8; stroke-linejoin: round; }
.carte-anim .dep--couvert { fill: var(--nuit); }
.carte-anim .dep--station { fill: var(--acc); }
.carte-anim .liaison--station { stroke-dasharray: none; stroke-width: 1.4; opacity: .8; }
.carte-anim .onde--station { stroke: var(--acc-clair); }
.carte-anim .station__point { fill: var(--nuit-2); stroke: var(--acc); stroke-width: 2.5; }
.carte-anim .station__etiquette rect { fill: var(--nuit-2); }
.carte-anim .station__etiquette text { fill: #fff; font: 600 14px var(--titres); }
.carte-anim .station__etiquette .station__petit { font: 500 11.5px var(--police); fill: var(--gris-clair); }
.carte-anim .station__etiquette path { stroke: var(--nuit-2); stroke-width: 1.5; }
.carte-anim .liaison { fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; }
.carte-anim .impulsion { fill: #fff; stroke: var(--acc); stroke-width: 1.5; }
.carte-anim .ville-trait { fill: none; stroke: var(--gris-moyen); stroke-width: .8; stroke-dasharray: 2 3; }
.carte-anim .ville-point { fill: #fff; stroke: var(--acc); stroke-width: 2.5; transition: fill .15s; }
.carte-anim .ville-nom { font: 600 11.5px var(--police); fill: var(--encre); paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.carte-anim .ville-lien--siege .ville-nom { font-weight: 700; font-size: 12.5px; }
.carte-anim .ville-lien--siege .ville-nom tspan { fill: var(--acc-clair); font-weight: 600; }
.carte-anim .ville-nom tspan { font-weight: 500; fill: var(--gris); }
.carte-anim .ville-lien:hover .ville-nom, .carte-anim .ville-lien:focus .ville-nom { fill: var(--acc-clair); }
.carte-anim .ville-lien:hover .ville-point, .carte-anim .ville-lien:focus .ville-point { fill: var(--acc); }
.carte-anim .onde { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: onde-carte 3s ease-out infinite; }
.carte-anim .onde--2 { animation-delay: 1s; }
.carte-anim .onde--3 { animation-delay: 2s; }
.carte-anim .siege__point { fill: var(--acc); stroke: var(--nuit-2); stroke-width: 2.5; }
.carte-anim .siege__etiquette rect { fill: var(--nuit-2); }
.carte-anim .siege__etiquette text { fill: #fff; font: 600 14px var(--titres); }
.carte-anim__chiffres { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 10px; }
.carte-anim__chiffres p { margin: 0; background: #fff; border: 1px solid var(--trait-doux); border-radius: 10px; padding: 10px 16px 11px; box-shadow: 0 16px 32px -20px rgba(7,20,38,.35);
  font-family: var(--titres); font-size: 20px; font-weight: 700; color: var(--acc-clair); line-height: 1.1; }
.carte-anim__chiffres strong { font-size: 30px; color: var(--encre); font-variant-numeric: tabular-nums; }
.carte-anim__chiffres span { display: block; margin-top: 3px; font: 500 12px var(--police); color: var(--gris); }
@keyframes onde-carte { from { transform: scale(1); opacity: .85; } to { transform: scale(7); opacity: 0; } }
@keyframes allume-station { 0% { fill: var(--trait); } 45% { fill: var(--nuit); } 100% { fill: var(--acc); } }
@keyframes allume { 0% { fill: var(--trait); } 45% { fill: var(--acc); } 100% { fill: var(--nuit); } }
html.js .carte-anim .dep { opacity: 0; transition: opacity .45s ease var(--d); }
html.js .carte-anim .dep--couvert { fill: var(--trait); }
html.js .carte-anim .liaison { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-out var(--a); }
html.js .carte-anim .impulsions { opacity: 0; transition: opacity 1s ease 2.8s; }
html.js .carte-anim .ville-lien { opacity: 0; transition: opacity .5s ease var(--a); }
html.js .carte-anim .siege { opacity: 0; transition: opacity .5s ease .5s; }
html.js .carte-anim .station { opacity: 0; transition: opacity .6s ease 3.7s; }
html.js .carte-anim .dep--station { fill: var(--trait); }
html.js .carte-anim.est-visible .dep--station { animation: allume-station 1s ease var(--c) forwards; }
html.js .carte-anim.sans-mouvement .dep--station { fill: var(--acc); }
html.js .carte-anim__chiffres p { opacity: 0; transform: translateY(8px); transition: opacity .6s ease 2.2s, transform .6s ease 2.2s; }
html.js .carte-anim__chiffres p + p { transition-delay: 2.4s; }
html.js .carte-anim.est-visible .dep, html.js .carte-anim.est-visible .impulsions, html.js .carte-anim.est-visible .station,
html.js .carte-anim.est-visible .ville-lien, html.js .carte-anim.est-visible .siege { opacity: 1; }
html.js .carte-anim.est-visible .dep--couvert { animation: allume 1s ease var(--c) forwards; }
html.js .carte-anim.est-visible .liaison { stroke-dashoffset: 0; }
html.js .carte-anim.est-visible .carte-anim__chiffres p { opacity: 1; transform: none; }
html.js .carte-anim.sans-mouvement *, html.js .carte-anim.sans-mouvement { transition: none !important; animation: none !important; }
html.js .carte-anim.sans-mouvement .dep--couvert { fill: var(--nuit); }
html.js .carte-anim.sans-mouvement .onde, html.js .carte-anim.sans-mouvement .impulsions { display: none; }
.offre { border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.offre + .offre { margin-top: 16px; }
.offre summary { list-style: none; padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; }
.offre summary::-webkit-details-marker { display: none; }
.offre__titre { font-family: var(--titres); font-size: 24px; font-weight: 600; display: block; margin-bottom: 10px; }
.offre__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.offre__etiquettes span { font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait-doux); color: var(--encre); }
.offre__etiquettes span:first-child { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.offre__voir { font-weight: 600; color: var(--acc-clair); white-space: nowrap; }
.offre[open] .offre__voir { visibility: hidden; }
.offre__corps { padding: 24px 28px 28px; border-top: 1px solid var(--trait-doux); display: flex; flex-direction: column; gap: 22px; }
.offre__corps h3 { font-size: 18px; margin: 0 0 8px; }
.offre__corps > div > :last-child { margin-bottom: 0; }
.offre__corps p, .offre__corps li { color: var(--texte); line-height: 1.7; }
.offre__corps ul { margin: 0; padding-left: 20px; }
.formulaire { border: 1px solid var(--trait); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 20px; background: #fff; }
.formulaire h2 { font-size: 30px; }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.champs-2__large { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--encre); }
input[type=text], input[type=tel], input[type=email], select, textarea {
  font: 400 16px/1.4 var(--police); color: var(--encre); background: #fff;
  border: 1.5px solid var(--trait); border-radius: var(--r-bouton); padding: 13px 14px; width: 100%; }
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--acc-clair); outline: 3px solid var(--acc-bord); outline-offset: 0; }
.case { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; color: var(--gris); line-height: 1.5; }
.case input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--acc-clair); }
.message { padding: 16px 20px; border-radius: var(--r); border: 1px solid; margin: 0; }
.message--ok { background: #EEF7F1; border-color: #BFDFCB; color: var(--vert); }
.message--erreur { background: #FCEEEE; border-color: #EDC4C4; color: var(--rouge); }
.urgence { background: var(--nuit-2); color: #fff; border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.urgence p { margin: 0; color: var(--gris-clair); }
.urgence__titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--acc-sombre) !important; }
.urgence a { color: #fff; font-family: var(--titres); font-size: 34px; font-weight: 700; text-decoration: none; }
.diagnostic { background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 26px; min-height: 420px; align-self: start; box-shadow: var(--ombre); }
.diagnostic fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.diagnostic legend { font-family: var(--titres); font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; padding: 0; }
.diagnostic__haut { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--gris); }
.diagnostic__progression { height: 6px; background: var(--trait-doux); border-radius: 3px; overflow: hidden; }
.diagnostic__progression span { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .3s; }
.diagnostic__choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choix-bouton { position: relative; }
.choix-bouton input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-bouton span { display: flex; align-items: center; min-height: 64px; padding: 16px 18px; font-size: 16px; font-weight: 600;
  border: 1.5px solid var(--trait); border-radius: var(--r-bouton); cursor: pointer; transition: border-color .15s, background .15s; }
.choix-bouton input:hover + span { border-color: var(--acc); }
.choix-bouton input:checked + span { border-color: var(--acc); background: var(--acc-doux); }
.choix-bouton input:focus-visible + span { outline: 3px solid var(--acc-bord); outline-offset: 2px; }
.diagnostic__etape + .diagnostic__etape { margin-top: 12px; }
html.js .diagnostic__etape { display: none; }
html.js .diagnostic__etape.est-visible { display: block; }
.diagnostic__retour { background: none; border: 0; padding: 12px 0; font: 600 15px var(--police); color: var(--acc-clair); cursor: pointer; margin-top: 12px; }
.diagnostic__offre { margin: -6px 0 18px; }
.diagnostic__offre strong { display: inline-block; background: var(--acc-doux); color: var(--encre); font-size: 14px; padding: 8px 12px; border-radius: var(--r-bouton); }
.diagnostic__recap { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.diagnostic__recap:empty { display: none; }
.diagnostic__recap span { font-size: 13px; background: var(--surface); border: 1px solid var(--trait); padding: 5px 10px; border-radius: 999px; }
.diagnostic__etape--fin .case { margin: 18px 0; }
.diagnostic__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.diagnostic__actions .bouton { width: auto; }
.diagnostic--fini { align-items: flex-start; justify-content: center; }
.diagnostic__ok { width: 56px; height: 56px; border-radius: 50%; background: var(--acc-doux); color: var(--acc-clair); display: flex; align-items: center; justify-content: center; }
.diagnostic--fini h3 { font-size: 30px; }
.bloc-diagnostic { display: grid; grid-template-columns: 4fr 1fr 7fr; }
.bloc-diagnostic > :first-child { grid-column: 1; }
.bloc-diagnostic > :last-child { grid-column: 3; }
.pied { background: var(--nuit-2); color: var(--gris-clair); padding: 72px 0 32px; font-size: 14px; }
.pied a { color: var(--gris-clair); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr 3fr; gap: 32px; }
.pied__marque img { width: 180px; margin-bottom: 16px; }
.pied__marque p { line-height: 1.6; }
.pied__titre { font-weight: 600; color: #fff; margin: 0 0 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pied__tel { font-family: var(--titres); font-size: 30px; font-weight: 600; color: var(--acc-sombre) !important; }
.pied__contact .bouton { color: var(--sur-acc); }
.pied__contact .bouton:hover { text-decoration: none; color: var(--sur-acc); }
.pied__bas { border-top: 1px solid var(--nuit-trait); margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--gris-moyen); }
.barre-mobile { display: none; }
.texte-legal { max-width: 820px; }
.texte-legal h2 { font-size: 26px; margin: 40px 0 12px; }
.texte-legal p, .texte-legal li { color: var(--texte); }
.langue { position: relative; display: inline-flex; }
.langue__bouton { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 6px;
  color: #fff; font: 600 12px/1 var(--police); letter-spacing: .06em; padding: 5px 8px; cursor: pointer; }
.langue__bouton:hover, .langue__bouton[aria-expanded="true"] { border-color: var(--acc-sombre); }
.langue__liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 150px;
  background: #fff; border-radius: 10px; box-shadow: 0 20px 50px -20px rgba(7,20,38,.5); }
.langue__liste button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px;
  font: 500 14px var(--police); color: var(--encre); cursor: pointer; }
.langue__liste button:hover { background: var(--surface); }
.langue__liste button[aria-current="true"] { font-weight: 700; color: var(--acc-clair); }
.menu__langues { display: none; }
.traduction-note { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 12px;
  background: var(--nuit-2); color: #fff; font: 500 13px var(--police); padding: 8px 8px 8px 14px; border-radius: 999px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.6); }
.traduction-note[hidden] { display: none; }
.traduction-note button { background: var(--acc); color: var(--sur-acc); border: 0; border-radius: 999px; padding: 6px 12px; font: 600 12px var(--police); cursor: pointer; }
@media (max-width: 1060px) {
  .menu__langues { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 0 4px; }
  .menu__langues span { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
  .menu__langues button { background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 7px 10px; font: 600 13px var(--police); color: var(--encre); cursor: pointer; }
  .menu__langues button[aria-current="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
}
@media (max-width: 760px) { .traduction-note { bottom: 88px; left: 12px; right: 12px; justify-content: space-between; } }
@media (max-width: 1180px) {
  .menu { gap: 20px; }
  .logo img { width: 240px; }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accroche__grille { grid-template-columns: 1fr; gap: 48px; }
  .console { max-width: 640px; }
}
@media (max-width: 1060px) {
  .menu-bouton { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px;
    border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-bouton); cursor: pointer; order: 3; }
  .menu-bouton span { height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .menu-bascule:focus-visible + .menu-bouton { outline: 3px solid var(--acc-sombre); outline-offset: 2px; }
  .menu-bascule:checked + .menu-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-bascule:checked + .menu-bouton span:nth-child(2) { opacity: 0; }
  .menu-bascule:checked + .menu-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .entete__cta { margin-left: auto; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 24px 24px; box-shadow: 0 30px 40px -20px rgba(7,20,38,.45); max-height: calc(100vh - 92px); overflow-y: auto; }
  .menu-bascule:checked ~ .menu { display: flex; position: fixed; top: var(--menu-haut, 92px); bottom: 0; max-height: none; overscroll-behavior: contain; padding-bottom: 120px; }
  html:has(.menu-bascule:checked), html:has(.menu-bascule:checked) body { overflow: hidden; }
  .menu__lien { color: var(--encre); padding: 14px 0; border-bottom: 1px solid var(--trait-doux); font-size: 17px; font-weight: 600; justify-content: space-between; }
  .menu__lien:hover, .menu__lien.actif { color: var(--acc-clair); border-bottom-color: var(--trait-doux); }
  .menu__lien--mobile { display: flex; }
  .menu__fleche { display: none; }
  .menu__tiroir { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 6px 0 10px; margin: 0; min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__tiroir a { font-size: 15px; padding: 9px 8px; }
  .duo, .duo--inverse, .ia .duo, .encadre-teinte, .expert, .colonnes-faq, .bandeau__grille { grid-template-columns: 1fr; gap: 40px; }
  .corps__grille, .bloc-diagnostic { grid-template-columns: 1fr; gap: 40px; }
  .corps__texte, .corps__cote, .bloc-diagnostic > :first-child, .bloc-diagnostic > :last-child { grid-column: 1; }
  .corps__cote { position: static; }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expert, .encadre-teinte { padding: 40px; }
  .utilitaire__texte { display: none; }
  .utilitaire__inner { justify-content: flex-end; }
}
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .conteneur { padding: 0 16px; }
  .section { padding: 72px 0; }
  .utilitaire { display: none; }
  .entete__inner { min-height: 72px; }
  .logo img { width: 190px; }
  .entete__cta { display: none; }
  .menu { max-height: calc(100vh - 72px); padding: 8px 16px 24px; }
  .menu__tiroir { grid-template-columns: 1fr; }
  .accroche { padding: 48px 0 64px; }
  .accroche .chapeau, .chapeau { font-size: 17px; }
  .accroche__boutons .bouton { width: 100%; }
  .accroche__plus { flex-direction: column; gap: 8px; }
  .console__tete { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
  .console__corps { padding: 20px 18px 6px; }
  .console__alerte { flex-direction: column; gap: 10px; }
  .console__titre { font-size: 19px; }
  .console__statut { display: none; }
  .console__pied { padding: 14px 18px 18px; }
  .camera__rec, .camera__horodatage { top: 12px; font-size: 10px; }
  .camera__rec { left: 30px; } .camera__horodatage { right: 30px; }
  .camera__rgpd { left: 12px; bottom: 12px; font-size: 11px; }
  .camera__coin { display: none; }
  .camera__lieu, .camera__jour { display: none; }
  .carte-france { padding: 20px 14px; }
  .carte-anim__chiffres { position: static; flex-direction: row; margin-top: 14px; }
  .carte-anim__chiffres p { flex: 1; }
  .camera__journal li { font-size: 13px; gap: 10px; }
  .camera__journal time { width: 58px; }
  .chiffres { padding: 44px 0; }
  .chiffres .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .grille-2, .grille-3, .petites-cartes, .liste-risques, .villes, .cartes-lignes, .champs-2, .expert__faits, .mini-chiffres { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: 1fr; }
  .tuile { min-height: 0; }
  .etapes { grid-template-columns: 1fr; }
  .entete-section { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .expert, .encadre-teinte, .cadre, .formulaire, .diagnostic { padding: 24px; }
  .expert-fiche { grid-template-columns: 1fr; padding: 24px; }
  .expert-fiche img { max-width: 220px; }
  .diagnostic__choix { grid-template-columns: 1fr; }
  .diagnostic legend { font-size: 23px; }
  .diagnostic__actions { flex-direction: column-reverse; align-items: stretch; }
  .diagnostic__actions .bouton { width: 100%; }
  .reponse { grid-template-columns: 1fr auto; }
  .reponse__texte { grid-column: 1 / -1; grid-row: 2; }
  .appel-bleu { flex-direction: column; align-items: flex-start; }
  .bandeau { padding: 24px 0 52px; }
  .fil { padding-top: 20px; }
  .corps { padding: 56px 0 72px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque, .pied__contact { grid-column: 1 / -1; }
  .offre summary { flex-direction: column; align-items: flex-start; padding: 22px; }
  .offre__corps { padding: 20px 22px 22px; }
  .document { flex-wrap: wrap; }
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--trait); box-shadow: 0 -12px 24px -16px rgba(7,20,38,.35); }
  .barre-mobile .bouton { padding: 14px 10px; }
}
@media print {
  .utilitaire, .entete, .barre-mobile, .pied, .encart, .fil { display: none !important; }
  body { padding: 0; }
  .accroche, .bandeau, .ia, .section--bleue { background: #fff !important; color: #000 !important; }
  .accroche h1, .bandeau h1, .ia h2 { color: #000 !important; }
}