/* Standby Atlas. Plan : une brochure de bureau d'études. Photos pleine largeur et pages blanches nettes ;
   un seul geste fort, le dessin axonométrique du campus ; les données présentées comme une plaque signalétique
   de groupe électrogène et comme des nomenclatures. Une couleur vive : l'ambre, réservée aux groupes et aux actions. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0E1A24;        /* texte */
  --steel: #4C5E6E;      /* texte secondaire */
  --line: #D3DBE1;       /* filets */
  --paper: #FFFFFF;      /* fond */
  --concrete: #EDF1F3;   /* bandes claires */
  --navy: #0B2236;       /* bandes sombres, voiles des photos */
  --navy-2: #12304A;     /* surfaces sur le bleu nuit */
  --navy-3: #081A2A;     /* pied de page */
  --on-navy: #E7EEF5;
  --on-navy-2: #A9BBCB;
  --rule-navy: rgba(231, 238, 245, 0.16);
  --amber: #F2A900;      /* groupes électrogènes et actions */
  --amber-hover: #FFC23D;
  --amber-ink: #1D1304;
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}
* { 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; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; font-weight: 400; font-stretch: 100%; font-variant-numeric: tabular-nums; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.cadre { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h2 { font-weight: 740; font-stretch: 116%; font-size: clamp(1.75rem, 3.3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.012em; }
h3 { font-weight: 700; font-stretch: 108%; font-size: 1.12rem; line-height: 1.25; }
.intro { color: var(--steel); font-size: 1.06rem; max-width: 40rem; margin: 14px 0 0; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px 11px; border-radius: 6px; border: 1.5px solid transparent;
  font-weight: 700; font-stretch: 105%; font-size: 1rem; line-height: 1.2; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn.petit { min-height: 40px; padding: 8px 16px 7px; font-size: 0.95rem; }
.btn.ambre { background: var(--amber); color: var(--amber-ink); }
.btn.ambre:hover { background: var(--amber-hover); }
.btn.contour { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.btn.contour:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* en-tête posé sur la photo */
.tete { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #fff; padding-top: env(safe-area-inset-top, 0px); }
.tete .cadre { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.logo { display: inline-block; text-decoration: none; }
.tete .logo svg { height: 38px; width: auto; display: block; }
.tete nav { display: flex; gap: 24px; margin-left: auto; font-size: 0.95rem; font-weight: 500; }
.tete nav a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.tete nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--amber); }

/* ouverture : texte sur le bleu nuit à gauche, photo à droite jusqu'au bord */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--navy); }
.hero-haut { position: relative; min-height: min(84vh, 780px); display: flex; align-items: center; padding-block: 112px 56px; }
.hero-photo { position: absolute; top: 0; bottom: 0; left: 47%; right: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-photo.etroit { display: none; }
.hero-fondu { position: absolute; top: 0; bottom: 0; left: 47%; right: 0; pointer-events: none; background:
  linear-gradient(90deg, var(--navy) 0%, rgba(11, 34, 54, 0.55) 9%, rgba(11, 34, 54, 0) 30%),
  linear-gradient(180deg, rgba(11, 34, 54, 0.6) 0%, rgba(11, 34, 54, 0) 22%),
  linear-gradient(0deg, rgba(11, 34, 54, 0.85) 0%, rgba(11, 34, 54, 0) 26%); }
.hero-texte { position: relative; width: 100%; }
.hero-col { max-width: min(36rem, 43%); }
h1 { font-weight: 780; font-stretch: 120%; font-size: clamp(2.3rem, 4.3vw, 3.9rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 24px; }
.chapeau { font-size: clamp(1.04rem, 1.3vw, 1.18rem); line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0 0 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.chiffres { position: relative; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.24); }
.chiffres > div { padding: 22px 20px 26px 0; display: flex; flex-direction: column; }
.chiffres > div + div { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.24); }
.chiffres dt { order: 2; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.chiffres dd { margin: 0 0 2px; font-weight: 720; font-stretch: 112%; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; }
.chiffres .u { font-size: 0.5em; margin-left: 5px; color: var(--amber); font-weight: 700; }
.credit { position: relative; margin: 0; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); text-align: right; font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); }

/* sources */
.sources { background: var(--concrete); border-bottom: 1px solid var(--line); }
.sources .cadre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding-block: 22px; }
.sources p { margin: 0; color: var(--steel); font-size: 0.9rem; }
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; font-weight: 650; font-stretch: 92%; font-size: 0.98rem; }

/* bandes */
.bande { padding-block: clamp(56px, 8vw, 104px); }
.bande.beton { background: var(--concrete); }
.bande.nuit { background: var(--navy); color: var(--on-navy); }
.bande.nuit .intro { color: var(--on-navy-2); }
.bande.nuit h2, .bande.nuit h3 { color: #fff; }
.entete { margin-bottom: clamp(28px, 4vw, 46px); }
.entete.large { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px 56px; align-items: end; }
.entete.large .intro { margin: 0; }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.deux.dessin { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; }
.deux.fiche { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.deux.etroit-gauche { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }

/* ce que révèle un dépôt */
ol.legende { list-style: none; counter-reset: n; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
ol.legende li { counter-increment: n; position: relative; padding-top: 42px; color: var(--steel); font-size: 0.96rem; border-top: 1px solid var(--line); }
ol.legende li::before { content: counter(n); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; }
ol.legende li:first-child::before { background: var(--amber); color: var(--amber-ink); }
ol.legende b { display: block; color: var(--ink); font-weight: 700; font-stretch: 105%; font-size: 1.02rem; margin-bottom: 4px; }
.figure-campus { margin: 0 auto; max-width: 1080px; }
.figure-campus svg { width: 100%; height: auto; display: block; }
.figure-campus figcaption { font-size: 0.85rem; color: var(--steel); margin-top: 6px; }
svg .repere circle { fill: var(--navy); stroke: #fff; stroke-width: 2; }
svg .repere text { fill: #fff; font-family: var(--font); font-weight: 700; font-size: 12px; text-anchor: middle; }
svg .repere:first-of-type circle { fill: var(--amber); }
svg .repere:first-of-type text { fill: var(--amber-ink); }

/* bande photo */
.photo-bande { position: relative; isolation: isolate; color: #fff; background: var(--navy); min-height: clamp(400px, 44vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.photo-bande .fond, .photo-bande .fond img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-bande .fond img { object-fit: cover; object-position: 50% 60%; }
.photo-voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 34, 54, 0.94) 0%, rgba(11, 34, 54, 0.6) 45%, rgba(11, 34, 54, 0.12) 100%); }
.photo-texte { position: relative; width: 100%; padding-block: 56px 26px; }
.photo-texte .titre { font-weight: 760; font-stretch: 118%; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 0 0 14px; }
.photo-texte p { max-width: 42rem; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 1.06rem; }

/* une fiche */
ol.etapes { list-style: none; counter-reset: e; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; position: relative; }
ol.etapes::before { content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; border-left: 1.5px solid #B9C5CE; }
ol.etapes li { counter-increment: e; padding-left: 46px; position: relative; color: var(--steel); }
ol.etapes li::before { content: counter(e); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--concrete); color: var(--ink); font-weight: 700; font-size: 0.88rem; display: grid; place-items: center; }
ol.etapes li:last-child::before { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
ol.etapes b { display: block; color: var(--ink); font-weight: 700; }
.plaque { margin: 0; border: 1px solid #B8C4CD; border-radius: 10px; padding: 26px 28px 20px; position: relative;
  background-color: #EEF2F5;
  background-image: radial-gradient(circle at 13px 13px, #8C9AA7 0 3.2px, #DCE3E8 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 13px) 13px, #8C9AA7 0 3.2px, #DCE3E8 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at 13px calc(100% - 13px), #8C9AA7 0 3.2px, #DCE3E8 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #8C9AA7 0 3.2px, #DCE3E8 3.6px 5px, transparent 5.4px),
    linear-gradient(180deg, #F8FAFB 0%, #E7EDF1 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 22px 44px -28px rgba(14, 26, 36, 0.55); }
.plaque-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 0 4px 12px; border-bottom: 2px solid var(--ink); }
.plaque-tete span:first-child { font-weight: 760; font-stretch: 118%; font-size: 1.05rem; }
.plaque-tete span:last-child { font-weight: 500; font-stretch: 88%; font-size: 0.8rem; color: var(--steel); overflow-wrap: anywhere; }
.plaque dl { margin: 0; }
.plaque dl > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 14px; padding: 9px 4px; border-bottom: 1px solid #C9D3DA; }
.plaque dl > div.cle { background: rgba(242, 169, 0, 0.13); }
.plaque dl > div.cle dd { font-weight: 700; }
.plaque dt { color: var(--steel); font-size: 0.86rem; font-weight: 600; font-stretch: 94%; padding-top: 1px; }
.plaque dd { margin: 0; font-size: 0.96rem; font-weight: 500; }
.plaque-source { margin: 12px 4px 0; font-size: 0.85rem; color: var(--steel); }

/* carte */
.carte-bloc { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.figure-carte { margin: 0; }
.figure-carte svg { width: 100%; height: auto; display: block; }
.carte .terre path { fill: rgba(231, 238, 245, 0.05); stroke: rgba(231, 238, 245, 0.38); stroke-width: 0.7; stroke-linejoin: round; }
.carte .noyau { fill: var(--amber); stroke: var(--navy); stroke-width: 1.1; }
.carte .halo { fill: var(--amber); opacity: 0.3; filter: url(#lueur); }
.appel rect { fill: var(--navy); opacity: 0.86; }
.appel path { fill: none; stroke: var(--on-navy); stroke-width: 1; }
.appel circle { fill: var(--on-navy); }
.appel .nom { fill: #fff; font-family: var(--font); font-weight: 760; font-stretch: 112%; font-size: 19px; }
.appel .det { fill: var(--on-navy-2); font-family: var(--font); font-weight: 500; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .carte .halo { animation: allumage 1.6s ease-out var(--d) 1 both; transform-box: fill-box; transform-origin: center; }
  @keyframes allumage { 0% { opacity: 0.3; transform: scale(1); } 35% { opacity: 0.85; transform: scale(2.3); } 100% { opacity: 0.3; transform: scale(1); } }
}
ul.poles { display: none; list-style: none; margin: 12px 0 0; padding: 0; color: var(--on-navy-2); font-size: 0.94rem; }
ul.poles li { padding: 5px 0; border-bottom: 1px solid var(--rule-navy); }
ul.poles b { color: #fff; margin-right: 4px; }
.pays-bloc h3 { margin-bottom: 16px; }
.entete-barres, ul.barres li { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 4.6rem 3.6rem; gap: 12px; align-items: center; }
.entete-barres { font-size: 0.8rem; color: var(--on-navy-2); padding-bottom: 6px; }
.entete-barres span:nth-child(n+3) { text-align: right; }
ul.barres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-navy); }
ul.barres li { padding: 7px 0; border-bottom: 1px solid var(--rule-navy); font-size: 0.95rem; }
ul.barres .barre { height: 8px; background: rgba(231, 238, 245, 0.08); }
ul.barres .barre span { display: block; height: 100%; background: var(--amber); }
ul.barres .v { text-align: right; font-weight: 700; }
ul.barres .dim { color: var(--on-navy-2); font-weight: 400; }

/* derniers dépôts */
ol.journal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
ol.journal li { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) auto; grid-template-areas: "date ou src" "date qui src" "date quoi src"; column-gap: 20px; row-gap: 1px; padding: 14px 0; border-bottom: 1px solid var(--line); }
ol.journal time { grid-area: date; font-weight: 700; }
ol.journal .ou { grid-area: ou; font-weight: 700; }
ol.journal .qui { grid-area: qui; color: var(--steel); }
ol.journal .quoi { grid-area: quoi; font-size: 0.95rem; }
ol.journal .src { grid-area: src; font-size: 0.92rem; }

/* plus grosses flottes */
.tableau { overflow-x: auto; border-top: 1px solid #B9C5CE; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 680px; }
th, td { text-align: left; padding: 11px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; font-weight: 600; color: var(--steel); white-space: nowrap; }
td.n, th.n { text-align: right; white-space: nowrap; }
td.n { font-weight: 700; }
.sous { display: block; color: var(--steel); font-size: 0.86rem; }
.moteurs-bloc { margin-top: clamp(40px, 6vw, 72px); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
.photo-carree { margin: 0; }
.photo-carree img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.photo-carree figcaption { font-size: 0.78rem; color: var(--steel); margin-top: 6px; }
.moteurs p { color: var(--steel); margin: 10px 0 18px; max-width: 36rem; }
.moteurs .entete-barres, .moteurs ul.barres li { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) 2.6rem; }
.moteurs ul.barres { border-top-color: #B9C5CE; }
.moteurs ul.barres li { border-bottom-color: var(--line); }
.moteurs ul.barres .barre { background: #DCE3E8; }

/* pour qui */
ul.pour-qui { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
ul.pour-qui li { display: flex; flex-direction: column; gap: 10px; }
ul.pour-qui img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
ul.pour-qui h3 { margin-top: 8px; }
ul.pour-qui p { margin: 0; color: var(--steel); font-size: 0.97rem; }

/* offres */
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); border-bottom: 1px solid var(--rule-navy); }
.offre { padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.offre + .offre { border-left: 1px solid var(--rule-navy); }
.offre.mise { background: var(--navy-2); }
.offre .prix { font-weight: 760; font-stretch: 116%; font-size: 2.1rem; color: var(--amber); margin: 0; line-height: 1.1; }
.offre p { margin: 0; color: var(--on-navy-2); }
.offre .btn { margin-top: auto; align-self: flex-start; }
.offre p + .btn { margin-top: 18px; }

/* méthode, à propos */
ul.regles { margin: 0; padding-left: 1.1em; display: grid; gap: 12px; color: var(--steel); max-width: 44rem; }
ul.regles b { color: var(--ink); }
.apropos p { margin: 0 0 16px; max-width: 42rem; }
.apropos .contact { color: var(--steel); }
.selection { user-select: all; color: var(--ink); font-weight: 700; }

/* pied */
.pied { background: var(--navy-3); color: var(--on-navy-2); padding-block: 48px 44px; font-size: 0.9rem; }
.pied .logo svg { height: 34px; width: auto; display: block; }
.pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-navy); }
.pied-haut p { margin: 0; color: var(--on-navy); }
.pied-bas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; padding-top: 26px; }
.pied h4 { color: var(--on-navy); font-size: 0.95rem; font-weight: 700; margin: 0 0 10px; }
ul.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied a { color: var(--on-navy); }

@media (max-width: 1000px) {
  .tete nav { display: none; }
  .tete .btn { margin-left: auto; }
  .deux, .deux.dessin, .deux.fiche, .deux.etroit-gauche, .carte-bloc, .moteurs-bloc, .entete.large { grid-template-columns: minmax(0, 1fr); }
  ol.legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-haut { display: block; min-height: 0; padding: 0; }
  .hero-photo { position: relative; left: auto; display: block; height: auto; }
  .hero-photo.large { display: none; }
  .hero-photo.etroit { display: block; }
  .hero-photo img { height: auto; aspect-ratio: 4 / 3; }
  .hero-fondu { left: 0; bottom: auto; height: 0; padding-bottom: 75%; background:
    linear-gradient(180deg, rgba(11, 34, 54, 0.65) 0%, rgba(11, 34, 54, 0) 30%),
    linear-gradient(0deg, var(--navy) 0%, rgba(11, 34, 54, 0) 28%); }
  .hero-col { max-width: 40rem; }
  .hero-texte { padding-block: 8px 36px; }
  ul.pour-qui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offres { grid-template-columns: minmax(0, 1fr); }
  .offre + .offre { border-left: 0; border-top: 1px solid var(--rule-navy); }
  .pied-bas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  ol.legende { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tete .btn { display: none; }
  .tete .logo svg { height: 32px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div { padding: 16px 14px 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
  .chiffres > div + div { padding-left: 0; border-left: 0; }
  .chiffres > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.24); }
  .chiffres > div:nth-last-child(-n+2) { border-bottom: 0; }
  .credit { padding-top: 6px; text-align: left; }
  ul.pour-qui { grid-template-columns: minmax(0, 1fr); }
  .appels { display: none; }
  ul.poles { display: block; }
  .plaque { padding: 22px 18px 16px; }
  .plaque dl > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  /* barres : nom et chiffres sur une ligne, la barre dessous */
  .entete-barres, ul.barres li { grid-template-columns: minmax(0, 1fr) 5.6rem 4.4rem; grid-template-areas: "nom v p" "barre barre barre"; gap: 5px 10px; }
  .moteurs .entete-barres, .moteurs ul.barres li { grid-template-columns: minmax(0, 1fr) 3rem; grid-template-areas: "nom v" "barre barre"; }
  ul.barres .nom, .entete-barres > span:nth-child(1) { grid-area: nom; }
  ul.barres .barre { grid-area: barre; height: 6px; }
  ul.barres .v, .entete-barres > span:nth-child(3) { grid-area: v; }
  ul.barres .v.dim, .entete-barres > span:nth-child(4) { grid-area: p; }
  .entete-barres > span:nth-child(2) { display: none; }
  ol.journal li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date src" "ou ou" "qui qui" "quoi quoi"; }
  /* tableau en fiches */
  #fleets .tableau { overflow: visible; }
  #fleets table, #fleets tbody { display: block; min-width: 0; }
  #fleets thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #fleets tbody tr { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "qui qui qui" "ou ou src" "ge mw mw" "etape etape etape"; gap: 3px 18px; padding: 13px 0 12px; border-bottom: 1px solid var(--line); }
  #fleets tbody td { padding: 0; border: 0; }
  #fleets tbody td:nth-child(1) { grid-area: qui; font-weight: 700; }
  #fleets tbody td:nth-child(2) { grid-area: ou; color: var(--steel); }
  #fleets tbody td:nth-child(2) .sous { display: inline; font-size: inherit; }
  #fleets tbody td:nth-child(2) .sous::before { content: ", "; }
  #fleets tbody td:nth-child(3) { grid-area: ge; text-align: left; }
  #fleets tbody td:nth-child(4) { grid-area: mw; text-align: left; }
  #fleets tbody td.n[data-u]::after { content: " " attr(data-u); font-weight: 400; color: var(--steel); }
  #fleets tbody td.vide { display: none; }
  #fleets tbody td:nth-child(5) { grid-area: etape; font-size: 0.92rem; }
  #fleets tbody td:nth-child(6) { grid-area: src; justify-self: end; font-size: 0.92rem; }
}

/* pages intérieures, liste des projets, prix, méthode */
[hidden] { display: none !important; }
.tete.pleine { position: relative; background: var(--navy); }
.bande-titre { background: var(--navy); color: #fff; padding-block: 30px 46px; border-top: 1px solid var(--rule-navy); }
.bande-titre .intro { color: var(--on-navy-2); max-width: 46rem; }
.bande-titre .intro a { color: #fff; }
.fil { font-size: 0.88rem; color: var(--on-navy-2); margin-bottom: 14px; }
.fil a { color: var(--on-navy); }
.h1-page { font-weight: 760; font-stretch: 116%; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.06; letter-spacing: -0.012em; max-width: 26ch; margin: 0; }
.h3 { font-size: 1.15rem; font-weight: 700; font-stretch: 108%; line-height: 1.25; margin: 0 0 8px; }
.fraicheur { margin: 18px 0 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); }
.lien-suite { margin: 16px 0 0; font-weight: 600; }
.nom-depot { margin: 0 0 22px; }
.nom-depot span { display: block; font-size: 0.82rem; color: var(--steel); font-weight: 600; }
.achat { background: var(--concrete); border-radius: 10px; padding: 20px 22px 22px; margin-bottom: 28px; }
.achat p { color: var(--steel); margin: 0 0 16px; }
.btn.clair { border-color: var(--ink); color: var(--ink); }
.btn.clair:hover { background: rgba(14, 26, 36, 0.06); }
.voisins ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.voisins li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.voisins li a { font-weight: 600; }
.voisins li span { color: var(--steel); font-size: 0.88rem; }

/* liste des projets */
.filtres { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 0 0 18px; }
.filtres label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--steel); font-weight: 600; }
.filtres input, .filtres select { font: inherit; font-size: 1rem; color: var(--ink); padding: 9px 12px; border: 1px solid #B9C5CE; border-radius: 6px; background: #fff; min-width: 13rem; }
.compte { margin: 0 0 6px auto; font-weight: 700; }
#projets th button { all: unset; cursor: pointer; font: inherit; color: inherit; }
#projets th button:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 2px; }
#projets th button[aria-sort="descending"]::after { content: " \2193"; }
#projets th button[aria-sort="ascending"]::after { content: " \2191"; }
#projets td a { font-weight: 600; }

/* offres à quatre colonnes */
.offres.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offre .prix span { font-size: 0.5em; font-weight: 600; margin-left: 3px; color: var(--on-navy-2); }
.sous-prix { font-size: 0.88rem; color: var(--on-navy-2); margin: -4px 0 4px; }

/* méthode et données */
.prose p { margin: 0 0 14px; max-width: 44rem; }
.definitions { margin: 0; display: grid; gap: 16px; }
.definitions dt { font-weight: 700; }
.definitions dd { margin: 2px 0 0; color: var(--steel); max-width: 44rem; }
.colonnes-listes { margin-top: 40px; }
.liste-compte { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.liste-compte li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.liste-compte li b { font-weight: 600; }
.liste-compte li span { color: var(--steel); }
.dico code { font-size: 0.88rem; background: var(--concrete); padding: 1px 6px; border-radius: 4px; }
table.dico { min-width: 520px; }
.note-bas { color: var(--steel); font-size: 0.92rem; margin-top: 14px; max-width: 44rem; }
.pied-bas { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* carte : chaque point mène à sa fiche */
.carte a.pt { cursor: pointer; }
.carte a.pt:hover .noyau, .carte a.pt:focus-visible .noyau { stroke: #FFFFFF; stroke-width: 2.4; }
.carte a.pt:focus { outline: none; }

@media (max-width: 1200px) {
  .offres.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offres.quatre .offre { border-left: 0; border-top: 1px solid var(--rule-navy); }
  .offres.quatre .offre:nth-child(2n) { border-left: 1px solid var(--rule-navy); }
  .offres.quatre .offre:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 1000px) {
  .accueil .hero-fondu { background:
    linear-gradient(180deg, rgba(11, 34, 54, 0.88) 0%, rgba(11, 34, 54, 0.55) 34%, rgba(11, 34, 54, 0) 56%),
    linear-gradient(0deg, var(--navy) 0%, rgba(11, 34, 54, 0) 28%); }
  .tete .cadre { flex-wrap: wrap; row-gap: 8px; }
  .tete nav { display: flex; order: 3; width: 100%; margin-left: 0; gap: 20px; font-size: 0.92rem; overflow-x: auto; }
  .pied-bas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .offres.quatre { grid-template-columns: minmax(0, 1fr); }
  .offres.quatre .offre, .offres.quatre .offre:nth-child(2n) { border-left: 0; border-top: 1px solid var(--rule-navy); padding-inline: 0; }
  .offres.quatre .offre:first-child { border-top: 0; }
  .filtres input, .filtres select { min-width: 0; width: 100%; }
  .filtres label { flex: 1 1 100%; }
  /* liste des projets en fiches */
  #projets, #projets tbody { display: block; min-width: 0; }
  #projets thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #projets tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "p d" "e e" "g m"; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  #projets tbody tr[hidden] { display: none; }
  #projets td { padding: 0; border: 0; }
  #projets td:nth-child(1) { grid-area: t; }
  #projets td:nth-child(2) { grid-area: p; color: var(--steel); }
  #projets td:nth-child(3) { grid-area: e; font-size: 0.92rem; }
  #projets td:nth-child(4) { grid-area: g; text-align: left; }
  #projets td:nth-child(4)::after { content: " groupes"; font-weight: 400; color: var(--steel); }
  #projets td:nth-child(5) { grid-area: m; text-align: right; }
  #projets td:nth-child(5)::after { content: " thermique"; font-weight: 400; color: var(--steel); }
  #projets td:nth-child(6) { grid-area: d; text-align: right; color: var(--steel); }
  #projets td.vide { display: none; }
}

/* langues */
.langues { display: flex; gap: 2px; font-size: 0.85rem; font-weight: 600; }
.langues a { color: rgba(255, 255, 255, 0.75); text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.langues a:hover { color: #fff; }
.langues a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 700px) { .langues { margin-left: auto; } }

/* Accueil, version 2. Plan : une console de nuit et un plan au cyanotype.
   Deux largeurs d'Archivo portent le sens : étendue pour les affirmations, étroite pour les mesures.
   L'ambre ne sert qu'aux groupes de secours (les voyants « standby ») et aux actions.
   Un seul mouvement orchestré : le pipeline s'allume dans l'ordre des dépôts. */
:root {
  --console: #061A2C;
  --console-2: #04121F;
  --cyano: #0B2B48;
  --plan-trait: #A9D6F5;
  --plan-filet: rgba(143, 198, 234, 0.24);
  --lampe: #FFB625;
}

/* ouverture */
.console { position: relative; isolation: isolate; color: var(--on-navy); padding-top: calc(84px + env(safe-area-inset-top, 0px));
  background: radial-gradient(56% 62% at 74% 40%, rgba(25, 82, 128, 0.5) 0%, rgba(6, 26, 44, 0) 72%), var(--console); }
.console-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 40px; align-items: center; min-height: min(76vh, 740px); }
.console-texte { padding-block: 28px 36px; }
.console h1 { font-weight: 760; font-stretch: 125%; font-size: clamp(2.1rem, 3.4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.022em; margin: 0 0 26px; max-width: 19ch; }
.console h1:lang(de) { font-size: clamp(2rem, 3.1vw, 2.9rem); }
.console .chapeau { font-size: clamp(1.02rem, 1.22vw, 1.14rem); line-height: 1.58; color: rgba(231, 238, 245, 0.86); max-width: 35rem; margin: 0 0 30px; }
.console-carte { margin: 0; position: relative; }
.console-carte svg { width: 100%; height: auto; max-height: 76vh; display: block; margin-inline: auto;
  -webkit-mask-image: radial-gradient(125% 105% at 55% 48%, #000 58%, transparent 86%); mask-image: radial-gradient(125% 105% at 55% 48%, #000 58%, transparent 86%); }
.console-carte figcaption { font-size: 0.82rem; line-height: 1.45; color: var(--on-navy-2); max-width: 31rem; margin: 4px 0 18px auto; text-align: right; }
.releve { position: absolute; top: 3%; left: 0; margin: 0; display: grid; gap: 1px; font-stretch: 80%; font-size: 0.92rem; color: var(--on-navy-2); pointer-events: none; z-index: 1; }
.releve-date { font-weight: 680; font-size: 1.55rem; line-height: 1.1; color: #fff; }
.releve b { color: var(--lampe); font-weight: 700; }

.console .carte .grille { fill: none; stroke: #8FC6EA; stroke-opacity: 0.14; stroke-width: 0.6; }
.console .carte .terre path { fill: rgba(143, 198, 234, 0.055); stroke: rgba(143, 198, 234, 0.42); stroke-width: 0.6; stroke-linejoin: round; }
.console .carte .coeur { fill: var(--lampe); stroke: var(--console); stroke-width: 1; }
.console .carte .aura { fill: var(--lampe); opacity: 0.26; filter: url(#lueur2); }
.console .carte a.pt:hover .coeur, .console .carte a.pt:focus-visible .coeur { stroke: #fff; stroke-width: 2.2; }
.console .appel rect { fill: var(--console); opacity: 0.8; }
.console .appel path { fill: none; stroke: rgba(231, 238, 245, 0.72); stroke-width: 1; }
.console .appel circle { fill: rgba(231, 238, 245, 0.9); }
.console .appel .nom { fill: #fff; font-family: var(--font); font-weight: 740; font-stretch: 112%; font-size: 19px; }
.console .appel .det { fill: var(--lampe); font-family: var(--font); font-weight: 620; font-stretch: 82%; font-size: 15px; }
.lampe { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .console.anime .lampe { animation: allume 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both; }
  @keyframes allume { 0% { opacity: 0; transform: scale(0.3); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
  .console .lampe.recent .aura { animation: veille 2.6s ease-in-out calc(var(--d) + 900ms) infinite; }
  @keyframes veille { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } }
}

/* relevé des chiffres */
.lecture { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
.lecture > div { display: flex; flex-direction: column; padding: 18px 16px 24px 0; }
.lecture > div + div { padding-left: 18px; border-left: 1px solid var(--rule-navy); }
.lecture dt { order: 2; color: var(--on-navy-2); font-size: 0.9rem; margin-top: 6px; }
.lecture dd { margin: 0; font-weight: 640; font-stretch: 74%; font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1; color: #fff; white-space: nowrap; }
.lecture dd .u { font-size: 0.5em; margin-left: 5px; color: var(--lampe); font-weight: 700; font-stretch: 90%; }
.lecture dd.date { font-size: clamp(1.35rem, 2.1vw, 1.9rem); padding-top: 0.42em; }

/* derniers dossiers, en défilement */
.annonce { display: flex; align-items: stretch; background: var(--console-2); border-top: 1px solid var(--rule-navy); font-size: 0.92rem; }
.annonce-titre { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 20px 0 max(20px, env(safe-area-inset-left, 0px));
  font-weight: 700; font-stretch: 92%; color: #fff; border-right: 1px solid var(--rule-navy); }
.annonce-titre::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 10px 2px rgba(255, 182, 37, 0.55); }
.annonce-fenetre { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.defile { display: flex; width: max-content; }
.defile ul { display: flex; list-style: none; margin: 0; padding: 0; }
.defile li { display: flex; align-items: baseline; gap: 12px; padding: 13px 24px; border-right: 1px solid var(--rule-navy); white-space: nowrap; color: var(--on-navy-2); }
.defile time { font-weight: 650; font-stretch: 78%; color: var(--lampe); }
.defile a { color: #fff; font-weight: 650; text-decoration: none; }
.defile a:hover, .defile a:focus-visible { text-decoration: underline; text-decoration-color: var(--lampe); }
.defile .ge { color: #fff; font-weight: 600; font-stretch: 84%; }
@media (prefers-reduced-motion: no-preference) {
  .defile { animation: defile 80s linear infinite; }
  .annonce:hover .defile, .annonce:focus-within .defile { animation-play-state: paused; }
  @keyframes defile { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .annonce-fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .defile ul + ul { display: none; }
}

/* le dossier de Lübbenau, en plan */
.plan { background-color: var(--cyano); color: var(--on-navy);
  background-image: linear-gradient(rgba(143, 198, 234, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 198, 234, 0.07) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
.plan h2 { color: #fff; }
.plan .intro { color: var(--on-navy-2); }
.plan-grille { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); grid-template-areas: "fig specs" "plus specs"; grid-template-rows: auto 1fr; gap: 0 52px; align-items: start; }
.plan-figure { grid-area: fig; }
ol.specs { grid-area: specs; }
dl.specs-plus { grid-area: plus; }
.plan-figure { margin: 0; }
.plan-dessin { width: 100%; height: auto; display: block; }
.plan .repere circle { fill: var(--cyano); stroke: #DCEFFB; stroke-width: 1.5; }
.plan .repere text { fill: #fff; }
.plan .repere:first-of-type circle { fill: var(--lampe); stroke: var(--lampe); }
.plan .repere:first-of-type text { fill: var(--amber-ink); }
ol.specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--plan-filet); }
ol.specs li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--plan-filet); }
ol.specs .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #DCEFFB; display: grid; place-items: center; font-weight: 700; font-size: 0.84rem; color: #fff; margin-top: 1px; }
ol.specs li:first-child .n { background: var(--lampe); border-color: var(--lampe); color: var(--amber-ink); }
ol.specs b { color: #fff; font-weight: 700; }
ol.specs div span { color: var(--on-navy-2); }
dl.specs-plus { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
dl.specs-plus dt { color: #CFE6F6; font-size: 0.82rem; font-weight: 600; font-stretch: 90%; }
dl.specs-plus dd { margin: 2px 0 0; color: #fff; font-size: 0.95rem; }
.cartouche { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.8fr) auto; border: 1.5px solid #CFE6F6; font-size: 0.84rem; }
.cartouche > div { padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cartouche > div + div { border-left: 1px solid rgba(207, 230, 246, 0.6); }
.cartouche span { color: #CFE6F6; font-size: 0.78rem; font-stretch: 90%; }
.cartouche b { font-weight: 650; font-stretch: 86%; color: #fff; overflow-wrap: anywhere; }
.cartouche a { color: #fff; }
.cartouche .c-lien { justify-content: center; font-weight: 700; }

/* fenêtre de publication : barres de durée en ligne, sur 12 mois */
.fenetre-tete h2 { max-width: 22ch; }
.fenetre-tete .intro { max-width: 46rem; }
.legende-fenetre { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.88rem; color: var(--steel); }
.legende-fenetre li { display: flex; align-items: center; gap: 8px; }
.legende-fenetre li::before { content: ""; width: 18px; height: 10px; border-radius: 0 4px 4px 0; }
.legende-fenetre .retire::before { background: #B97C00; }
.legende-fenetre .reste::before { background: #2F6EA3; }
table.fenetres { min-width: 0; width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.fenetres thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table.fenetres th, table.fenetres td { border-bottom: 1px solid #D3DBE1; padding: 12px 0; vertical-align: middle; }
table.fenetres th { width: 34%; padding-right: 24px; font-size: 0.95rem; color: var(--ink); white-space: normal; }
table.fenetres th b { display: block; font-weight: 700; }
table.fenetres th span { color: var(--steel); font-weight: 400; }
table.fenetres td { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.piste { position: relative; display: block; height: 12px;
  background: linear-gradient(90deg, #D3DBE1 1px, transparent 1px) 0 0 / 25% 100% repeat-x; }
.piste::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: #D3DBE1; }
.piste .trait { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--m) / 12 * 100%); min-width: 6px; border-radius: 0 4px 4px 0; }
tr.retire .trait { background: #B97C00; }
tr.reste .trait { background: #2F6EA3; }
table.fenetres .val { font-size: 0.88rem; color: var(--steel); }
tr.retire .val { color: var(--ink); font-weight: 600; }
.axe-fenetre { margin-left: 34%; display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--steel); padding-top: 6px; }
.axe-fenetre span:first-child { transform: translateX(-2px); }

/* couches d'une fiche */
.couches-bloc { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 32px 64px; align-items: start; }
.pile { width: 100%; max-width: 400px; height: auto; position: sticky; top: 40px; }
ol.couches { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
ol.couches li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
ol.couches h3 { grid-column: 1; font-size: 1.22rem; font-stretch: 114%; }
ol.couches .statut { grid-column: 2; grid-row: 1; margin: 0; align-self: center; white-space: nowrap; font-weight: 650; font-stretch: 86%; font-size: 0.84rem;
  padding: 3px 11px 2px; border-radius: 999px; border: 1px solid #B9C5CE; color: var(--steel); }
ol.couches .statut.actif { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
ol.couches .q { grid-column: 1 / -1; margin: 6px 0 0; font-size: 1.06rem; font-weight: 520; color: var(--ink); }
ol.couches .champs { grid-column: 1 / -1; margin: 4px 0 0; color: var(--steel); font-size: 0.95rem; max-width: 46rem; }

/* photos virées au cyanotype, comme le plan */
.filtres-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.accueil ul.pour-qui img { filter: url(#cyanotype); }

/* pipeline par pays, sur le bleu nuit */
.pipeline-bloc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.moteurs.sombre p { color: var(--on-navy-2); }
.moteurs.sombre ul.barres { border-top-color: var(--rule-navy); }
.moteurs.sombre ul.barres li { border-bottom-color: var(--rule-navy); }
.moteurs.sombre ul.barres .barre { background: rgba(231, 238, 245, 0.08); }

/* méthode : les autorités lues */
.sources-ligne { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.sources-ligne p { margin: 0 0 8px; color: var(--steel); font-size: 0.9rem; }
.sources-ligne ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 650; font-stretch: 92%; font-size: 0.97rem; }

@media (max-width: 1000px) {
  .console { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
  .console-grille, .plan-grille, .couches-bloc, .pipeline-bloc { grid-template-columns: minmax(0, 1fr); }
  .plan-grille { grid-template-areas: "fig" "specs" "plus"; grid-template-rows: auto; row-gap: 28px; }
  .console-grille { min-height: 0; }
  .console-texte { padding-block: 8px 4px; }
  .console-carte svg { max-height: none; }
  .console-carte figcaption { margin: 4px 0 18px; text-align: left; }
  .lecture { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lecture > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .lecture > div:nth-child(-n+3) { border-bottom: 1px solid var(--rule-navy); }
  .pile { position: static; max-width: 300px; }
}
@media (max-width: 700px) {
  .console h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .lecture { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lecture > div { padding: 14px 12px 16px 0; border-bottom: 1px solid var(--rule-navy); }
  .lecture > div + div { padding-left: 0; border-left: 0; }
  .lecture > div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--rule-navy); }
  .lecture > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .releve { position: static; grid-auto-flow: column; justify-content: start; gap: 14px; align-items: baseline; margin: 6px 0 4px; }
  .releve-date { font-size: 1.15rem; }
  .annonce-titre { padding-inline: 14px; font-size: 0.86rem; }
  .defile li { padding: 12px 18px; }
  .cartouche { grid-template-columns: minmax(0, 1fr); }
  .cartouche > div + div { border-left: 0; border-top: 1px solid rgba(207, 230, 246, 0.6); }
  dl.specs-plus { grid-template-columns: minmax(0, 1fr); }
  .pile { display: none; }
  table.fenetres th { width: auto; display: block; padding: 12px 0 4px; border-bottom: 0; }
  table.fenetres tr { display: block; border-bottom: 1px solid #D3DBE1; }
  table.fenetres td { padding: 0 0 12px; border-bottom: 0; }
  .axe-fenetre { margin-left: 0; }
  ol.couches .statut { align-self: start; margin-top: 2px; }
}

/* pages intérieures : le bandeau de titre reprend la feuille de plan */
.bande-titre { background-color: var(--console);
  background-image: linear-gradient(rgba(143, 198, 234, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 198, 234, 0.055) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
.tete.pleine { background: var(--console); }

/* champs réservés à la licence : une barre de caviardage, puis ce qu'elle cache */
.verrou { color: #CFE6F6; }
.masque { display: inline-block; vertical-align: -0.14em; width: 4.6em; height: 1em; margin-right: 0.45em; border-radius: 2px; background: rgba(207, 230, 246, 0.72); }
ol.specs li.ferme .n { border-style: dashed; }
/* taux de remplissage des couches en service */
ol.couches .couverture { grid-column: 1 / -1; margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--amber); font-size: 0.9rem; font-weight: 560; color: var(--ink); }
.lien-suite.clair { margin-top: 22px; }
.lien-suite.clair a { color: #fff; }

/* page des prix */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.uniques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.offre-claire { border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: 8px; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.offre-claire .prix { margin: 0; font-weight: 760; font-stretch: 116%; font-size: 2.1rem; line-height: 1.1; color: var(--ink); }
.offre-claire .sous-prix { margin: 0; color: var(--steel); font-size: 0.9rem; }
.offre-claire p { margin: 0; }
.offre-claire .btn { margin-top: 10px; align-self: flex-start; }
.tableau-licences { position: relative; overflow-x: auto; border-top: 1px solid var(--rule-navy); }
table.licences { min-width: 860px; width: 100%; border-collapse: collapse; color: var(--on-navy); font-size: 0.93rem; }
table.licences th, table.licences td { border-bottom: 1px solid var(--rule-navy); padding: 12px 14px; vertical-align: middle; text-align: center; white-space: normal; }
table.licences thead th { vertical-align: top; text-align: left; padding: 18px 14px 16px; width: 19%; }
table.licences thead th.mise, table.licences td:nth-child(4) { background: rgba(242, 169, 0, 0.07); }
table.licences thead th.mise { border-top: 3px solid var(--amber); }
table.licences tbody th { text-align: left; font-weight: 500; color: var(--on-navy); position: sticky; left: 0; background: var(--navy); min-width: 15rem; }
.nom-licence { display: block; font-weight: 720; font-stretch: 108%; font-size: 1.05rem; color: #fff; }
.prix-licence { display: block; margin-top: 6px; font-weight: 760; font-stretch: 112%; font-size: 1.6rem; line-height: 1.1; color: var(--amber); }
.prix-licence span { font-size: 0.5em; font-weight: 600; margin-left: 3px; color: var(--on-navy-2); }
.sous-licence { display: block; margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: var(--on-navy-2); }
svg.coche { width: 18px; height: 18px; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
table.licences td.sans { color: rgba(231, 238, 245, 0.35); }
table.licences td.texte-case { font-size: 0.85rem; color: var(--on-navy); }
table.licences tfoot td { border-bottom: 0; padding-top: 18px; }
.note-bas.clair { color: var(--on-navy-2); }
.bloc-prix p { color: var(--steel); max-width: 34rem; }
.bloc-prix .btn { margin-top: 6px; }
@media (max-width: 1000px) { .uniques { grid-template-columns: minmax(0, 1fr); } }

/* ===================== accueil v3 : ouverture en photo, vitrine animée, carte à explorer ===================== */
.ouverture { position: relative; isolation: isolate; color: #fff; background: var(--console); overflow: hidden; }
.ouverture-photo { position: absolute; inset: 0; z-index: -2; }
.ouverture-photo picture { display: block; width: 100%; height: 100%; }
.ouverture-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.ouverture-photo .etroit { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ouverture-photo .large img { animation: approche 18s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  @keyframes approche { from { transform: scale(1.1); } to { transform: scale(1); } }
}
.ouverture-voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(6, 26, 44, 0.95) 0%, rgba(6, 26, 44, 0.8) 28%, rgba(6, 26, 44, 0.3) 52%, rgba(6, 26, 44, 0.12) 70%, rgba(6, 26, 44, 0.45) 100%),
  linear-gradient(0deg, rgba(4, 18, 31, 0.97) 0%, rgba(4, 18, 31, 0.6) 24%, rgba(4, 18, 31, 0) 44%),
  linear-gradient(180deg, rgba(6, 26, 44, 0.75) 0%, rgba(6, 26, 44, 0) 18%); }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px 56px; align-items: center;
  min-height: min(86vh, 800px); padding-top: calc(100px + env(safe-area-inset-top, 0px)); padding-bottom: 28px; }
.ouverture h1 { font-weight: 760; font-stretch: 122%; font-size: clamp(2.3rem, 4.3vw, 4rem); line-height: 1.02; letter-spacing: -0.022em; margin: 0 0 22px; max-width: 13ch; }
.ouverture .chapeau { font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.58; color: rgba(231, 238, 245, 0.9); max-width: 33rem; margin: 0 0 28px; }
.credit-ouverture { margin: 0; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 8px; text-align: right; font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); }

/* vitrine : une carte de projet à la fois, en verre fumé */
.vitrine { justify-self: end; width: min(100%, 420px); border-radius: 14px; padding: 8px 8px 12px;
  background: rgba(6, 26, 44, 0.64); border: 1px solid rgba(231, 238, 245, 0.18); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.vitrine-onglets { display: flex; gap: 2px; padding: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 9px; }
.vitrine-onglets button { flex: 1; font: inherit; font-size: 0.8rem; font-weight: 650; font-stretch: 90%; line-height: 1.2; color: rgba(231, 238, 245, 0.75);
  background: none; border: 0; border-radius: 6px; padding: 8px 6px; cursor: pointer; }
.vitrine-onglets button:hover { color: #fff; }
.vitrine-onglets button[aria-selected="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }
.vitrine-cartes { min-height: 16.5rem; }
.carte-projet { padding: 18px 14px 6px; }
.carte-projet.entre { animation: entre 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .carte-projet.entre { animation: none; } }
.cp-lieu, .ef-lieu { margin: 0; font-size: 0.82rem; color: var(--on-navy-2); }
.cp-titre, .ef-titre { margin: 2px 0 14px; font-size: 1.15rem; font-weight: 700; font-stretch: 106%; line-height: 1.25; color: #fff; }
.cp-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(231, 238, 245, 0.16); border-bottom: 1px solid rgba(231, 238, 245, 0.16); }
.cp-chiffres b { display: block; font-weight: 650; font-stretch: 74%; font-size: 2.3rem; line-height: 1; color: #fff; }
.cp-chiffres div:first-child b { color: var(--lampe); }
.cp-chiffres span { font-size: 0.8rem; color: var(--on-navy-2); }
.cp-moteurs { margin: 12px 0 2px; font-size: 0.92rem; color: #fff; }
.cp-moteurs > span:first-child { color: var(--on-navy-2); margin-right: 4px; }
.cp-etape { margin: 0 0 10px; font-size: 0.86rem; color: var(--on-navy-2); }
.cp-lien { display: inline-block; font-size: 0.88rem; font-weight: 650; color: #fff; }
.vitrine-pied { display: flex; align-items: center; gap: 10px; padding: 4px 14px 0; }
.progression { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
.progression span { display: block; height: 100%; width: 0; background: var(--lampe); }
.compteur { font-size: 0.8rem; font-stretch: 80%; color: var(--on-navy-2); min-width: 3em; text-align: center; }
.vitrine-pied button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(231, 238, 245, 0.3); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.vitrine-pied button:hover { background: rgba(255, 255, 255, 0.1); }
.vitrine-pied button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* explorer la carte */
.explorer.console { padding: clamp(56px, 8vw, 100px) 0; background: radial-gradient(56% 62% at 32% 46%, rgba(25, 82, 128, 0.42) 0%, rgba(6, 26, 44, 0) 72%), var(--console); }
.explorer h2 { color: #fff; }
.explorer .intro { color: var(--on-navy-2); }
.explorer-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 28px 44px; align-items: start; }
.explorer-carte { margin: 0; }
.explorer-cote { display: grid; gap: 20px; position: sticky; top: 24px; }
.filtre-titre { margin: 0 0 8px; font-size: 0.82rem; color: var(--on-navy-2); font-weight: 600; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--on-navy); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(231, 238, 245, 0.22); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.puce:hover { border-color: rgba(231, 238, 245, 0.5); }
.puce span { color: var(--on-navy-2); font-weight: 500; font-stretch: 85%; margin-left: 2px; }
.puce[aria-pressed="true"] { background: var(--lampe); border-color: var(--lampe); color: var(--amber-ink); }
.puce[aria-pressed="true"] span { color: var(--amber-ink); }
.totaux { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); border-bottom: 1px solid var(--rule-navy); }
.totaux > div { padding: 12px 10px 12px 0; display: flex; flex-direction: column-reverse; }
.totaux > div + div { padding-left: 12px; border-left: 1px solid var(--rule-navy); }
.totaux dt { font-size: 0.78rem; line-height: 1.3; color: var(--on-navy-2); }
.totaux dd { margin: 0; font-weight: 650; font-stretch: 74%; font-size: 1.75rem; line-height: 1.05; color: #fff; }
.explorer-fiche { border: 1px solid rgba(231, 238, 245, 0.18); border-radius: 12px; padding: 16px 16px 14px; background: rgba(255, 255, 255, 0.03); }
.explorer-fiche:not(.pleine) > :not(.ef-vide) { display: none; }
.explorer-fiche.pleine .ef-vide { display: none; }
.ef-vide { margin: 0; color: var(--on-navy-2); font-size: 0.9rem; }
.explorer .lampe { cursor: pointer; }
.explorer .lampe .coeur, .explorer .lampe .aura { transition: opacity 0.3s; }
.explorer .lampe.eteint .coeur { opacity: 0.12; }
.explorer .lampe.eteint .aura { opacity: 0; animation: none; }
.explorer .lampe.choisi .coeur { stroke: #fff; stroke-width: 2.6; }
.explorer.attend .lampe { opacity: 0; }

/* plan : repères allumés au survol */
.plan .repere { transform-box: fill-box; transform-origin: center; transition: transform 0.2s; }
.plan .repere.allume { transform: scale(1.35); }
.plan .repere.allume circle { fill: var(--lampe); stroke: #fff; }
.plan .repere.allume text { fill: var(--amber-ink); }
ol.specs li { transition: background-color 0.2s; }
ol.specs li.allume { background: rgba(255, 182, 37, 0.09); }

/* couches : une ligne par couche, détail à déplier */
ol.couches li { display: block; padding: 0; }
ol.couches summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; padding: 16px 0; cursor: pointer; list-style: none; }
ol.couches summary::-webkit-details-marker { display: none; }
ol.couches .c-nom { grid-column: 1; font-weight: 700; font-stretch: 112%; font-size: 1.18rem; }
ol.couches .c-nom::after { content: "+"; display: inline-block; margin-left: 10px; color: var(--steel); font-weight: 500; }
ol.couches details[open] .c-nom::after { content: "\2212"; }
ol.couches summary .statut { grid-column: 2; grid-row: 1; }
ol.couches summary .q { grid-column: 1 / -1; margin: 0; color: var(--steel); font-size: 1rem; font-weight: 500; }
ol.couches details[open] { padding-bottom: 16px; }
ol.couches details .champs { margin-top: 0; }

/* formats de livraison */
.formats-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 24px; margin-bottom: 28px; }
.apercu { margin: 0; border: 1px solid var(--rule-navy); border-radius: 10px; overflow: hidden; background: #0A1C2E; min-width: 0; }
.apercu figcaption { padding: 9px 14px; font-size: 0.8rem; font-stretch: 90%; color: var(--on-navy-2); border-bottom: 1px solid var(--rule-navy); background: rgba(255, 255, 255, 0.03); }
.tableur-cadre { overflow-x: auto; }
table.tableur { min-width: 640px; width: 100%; border-collapse: collapse; font-size: 0.8rem; color: var(--on-navy); }
table.tableur th, table.tableur td { border-bottom: 1px solid var(--rule-navy); border-right: 1px solid var(--rule-navy); padding: 7px 10px; white-space: nowrap; text-align: left; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
table.tableur th { color: var(--lampe); font-weight: 600; font-size: 0.76rem; background: rgba(255, 255, 255, 0.04); }
.apercu pre { margin: 0; padding: 14px 16px; overflow: auto; max-height: 320px; font: 500 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #CFE6F6; }

@media (max-width: 1000px) {
  .ouverture-photo { position: relative; inset: auto; z-index: 0; }
  .ouverture-photo .large { display: none; }
  .ouverture-photo .etroit { display: block; height: auto; }
  .ouverture-photo .etroit img { height: auto; aspect-ratio: 4 / 3; }
  .ouverture-voile { bottom: auto; height: 0; padding-bottom: 75%; z-index: 0; background:
    linear-gradient(180deg, rgba(6, 26, 44, 0.7) 0%, rgba(6, 26, 44, 0) 32%), linear-gradient(0deg, var(--console) 0%, rgba(6, 26, 44, 0) 36%); }
  .ouverture-grille { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; margin-top: -40px; position: relative; z-index: 1; }
  .vitrine { justify-self: stretch; width: 100%; }
  .explorer-grille, .formats-grille { grid-template-columns: minmax(0, 1fr); }
  .explorer-cote { position: static; }
}
@media (max-width: 700px) {
  .ouverture h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .credit-ouverture { text-align: left; }
}

.carte .appels, .releve { pointer-events: none; }
.ef-pied { padding: 10px 0 0; margin-top: 12px; border-top: 1px solid rgba(231, 238, 245, 0.16); justify-content: flex-end; }
.ef-pied .compteur { margin-right: auto; text-align: left; }
.preuve-fenetre { margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid #B97C00; background: rgba(185, 124, 0, 0.08); font-weight: 600; max-width: 46rem; }

/* badge des champs réservés à la licence (remplace la barre grise) */
.badge-licence { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; margin-right: 6px; border: 1px solid var(--lampe); border-radius: 999px; color: var(--lampe); font-size: 0.74rem; font-weight: 700; font-stretch: 88%; vertical-align: 0.1em; }
.badge-licence svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.verrou { color: #CFE6F6; }
/* formats : onglets Excel / API / assistant IA */
.onglets-formats { display: inline-flex; gap: 2px; padding: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; margin-bottom: 18px; }
.onglets-formats button { font: inherit; font-size: 0.9rem; font-weight: 650; color: rgba(231, 238, 245, 0.75); background: none; border: 0; border-radius: 7px; padding: 9px 18px; cursor: pointer; }
.onglets-formats button[aria-selected="true"] { background: var(--lampe); color: var(--amber-ink); }
.panneau-format { margin-bottom: 26px; max-width: 900px; }
.panneau-format pre { margin: 0; padding: 16px; border: 1px solid var(--rule-navy); border-radius: 10px; background: #0A1C2E; overflow: auto; max-height: 340px; font: 500 0.8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #CFE6F6; }
.api-texte { color: var(--on-navy-2); margin: 0 0 10px; max-width: 40rem; }
.api-url { font: 500 0.82rem/1.4 ui-monospace, Menlo, monospace; color: #fff; margin: 0 0 10px; overflow-wrap: anywhere; }
.api-url b { color: var(--lampe); margin-right: 8px; }
.chat { display: grid; gap: 12px; max-width: 680px; }
.bulle { margin: 0; padding: 14px 16px; border-radius: 14px; }
.bulle.q { justify-self: end; background: var(--lampe); color: var(--amber-ink); font-weight: 600; border-bottom-right-radius: 4px; max-width: 85%; }
.bulle.r { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rule-navy); border-bottom-left-radius: 4px; }
.bulle.r p { margin: 0 0 8px; } .bulle.r ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; } .bulle.r a { color: #fff; }

/* ===================== v4 : nuit continue, chiffres géants, carte en colonnes de lumière ===================== */
.accueil .bande h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-stretch: 122%; letter-spacing: -0.02em; line-height: 1.04; }
.accueil .bande.nuit { background: var(--console); }
.accueil .bande.nuit.nuit-2 { background: radial-gradient(70% 60% at 85% 0%, rgba(25, 82, 128, 0.35), rgba(6, 26, 44, 0) 70%), #08203A; }
.accueil .bande.nuit .intro, .accueil .bande.nuit .note-bas { color: var(--on-navy-2); }
.accueil .bande.nuit .lien-suite a { color: #fff; }

.chiffres-geants { background: linear-gradient(180deg, var(--console-2) 0%, var(--console) 100%); padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--rule-navy); }
.grille-geants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
.grille-geants > div { position: relative; }
.geant { margin: 0; font-weight: 620; font-stretch: 70%; font-size: clamp(4rem, 9.5vw, 9rem); line-height: 0.88; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.grille-geants > div:first-child .geant { color: var(--lampe); text-shadow: 0 0 48px rgba(255, 182, 37, 0.35); }
.geant .u { font-size: 0.38em; margin-left: 8px; color: var(--lampe); font-stretch: 90%; }
.geant-sur { margin: 4px 0 0; font-weight: 620; font-stretch: 72%; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--on-navy-2); line-height: 1; }
.geant-l { margin: 14px 0 0; color: var(--on-navy-2); max-width: 19rem; font-size: 1rem; line-height: 1.5; }

/* la carte en relief : chaque projet est une colonne de lumière */
.explorer-grille { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); }
.scene3d { position: relative; height: min(70vh, 640px); perspective: 2400px; perspective-origin: 50% 8%; overflow: hidden; border-radius: 18px;
  background: radial-gradient(60% 60% at 50% 60%, rgba(25, 82, 128, 0.45), rgba(6, 26, 44, 0) 72%); }
.sol { position: absolute; left: 50%; top: 50%; width: min(900px, 132%); aspect-ratio: 760 / 820; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-12deg); }
@media (prefers-reduced-motion: no-preference) {
  .explorer.anime .sol { animation: balance 28s ease-in-out 3s infinite alternate; }
  @keyframes balance { from { transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-12deg); } to { transform: translate(-50%, -50%) rotateX(54deg) rotateZ(-2deg); } }
}
.carte-sol { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-sol .grille { fill: none; stroke: #8FC6EA; stroke-opacity: 0.16; stroke-width: 0.7; }
.carte-sol .terre path { fill: rgba(143, 198, 234, 0.07); stroke: rgba(143, 198, 234, 0.5); stroke-width: 0.7; }
.pilier { position: absolute; width: 0; height: 0; transform-style: preserve-3d; cursor: pointer; }
.pilier .base { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, #FFC94D 0 26%, rgba(255, 182, 37, 0.35) 48%, rgba(255, 182, 37, 0) 70%); }
.pilier .f { position: absolute; left: -2px; bottom: 0; width: 4px; height: var(--h); border-radius: 2px; transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: linear-gradient(to top, #FFC94D, rgba(255, 182, 37, 0.1)); box-shadow: 0 0 10px 1px rgba(255, 182, 37, 0.55); transition: opacity 0.3s; }
.pilier .f2 { transform: rotateX(-90deg) rotateY(90deg); }
.pilier .f::before { content: ""; position: absolute; left: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #FFF1C9; box-shadow: 0 0 10px 3px rgba(255, 200, 90, 0.8); }
.explorer .pilier { animation: none !important; }
.explorer.attend .pilier .f { transform: rotateX(-90deg) scaleY(0); }
.explorer.attend .pilier .f2 { transform: rotateX(-90deg) rotateY(90deg) scaleY(0); }
@media (prefers-reduced-motion: no-preference) {
  .explorer.anime .pilier .f { animation: monte 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both; }
  .explorer.anime .pilier .f2 { animation: monte2 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both; }
  @keyframes monte { from { transform: rotateX(-90deg) scaleY(0); } to { transform: rotateX(-90deg) scaleY(1); } }
  @keyframes monte2 { from { transform: rotateX(-90deg) rotateY(90deg) scaleY(0); } to { transform: rotateX(-90deg) rotateY(90deg) scaleY(1); } }
}
.explorer.attend .lampe { opacity: 1; }
.pilier.eteint .f { opacity: 0.08; box-shadow: none; }
.pilier.eteint .base { opacity: 0.2; }
.pilier.choisi .f { background: linear-gradient(to top, #FFFFFF, rgba(255, 255, 255, 0.15)); box-shadow: 0 0 16px 3px rgba(255, 255, 255, 0.7); }
.pilier.choisi .base { background: radial-gradient(circle, #FFFFFF 0 26%, rgba(255, 255, 255, 0.4) 48%, rgba(255, 255, 255, 0) 70%); }
.pilier:hover .f { box-shadow: 0 0 16px 3px rgba(255, 220, 140, 0.9); }

/* fenêtre de publication, sur fond de nuit */
.accueil #window table.fenetres th, .accueil #window table.fenetres td, .accueil #window table.fenetres tr { border-color: var(--rule-navy); }
.accueil #window table.fenetres th { color: #fff; }
.accueil #window table.fenetres th span, .accueil #window .legende-fenetre, .accueil #window .axe-fenetre, .accueil #window table.fenetres .val { color: var(--on-navy-2); }
.accueil #window tr.retire .val { color: #fff; }
.accueil #window .piste { background: linear-gradient(90deg, rgba(231, 238, 245, 0.16) 1px, transparent 1px) 0 0 / 25% 100% repeat-x; }
.accueil #window .piste::after { background: rgba(231, 238, 245, 0.16); }
.accueil #window tr.retire .trait, .accueil #window .legende-fenetre .retire::before { background: #C07E05; }
.accueil #window tr.reste .trait, .accueil #window .legende-fenetre .reste::before { background: #3D86C8; }
.accueil #window .preuve-fenetre { background: rgba(192, 126, 5, 0.14); border-left-color: #C07E05; color: #fff; }
/* couches, cibles, méthode, sur fond de nuit */
.accueil #layers ol.couches { border-top-color: rgba(231, 238, 245, 0.5); }
.accueil #layers ol.couches li { border-bottom-color: var(--rule-navy); }
.accueil #layers .c-nom { color: #fff; }
.accueil #layers .c-nom::after, .accueil #layers summary .q, .accueil #layers .champs { color: var(--on-navy-2); }
.accueil #layers .couverture { color: #fff; }
.accueil #layers .statut { border-color: rgba(231, 238, 245, 0.3); color: var(--on-navy-2); }
.accueil #layers .statut.actif { color: var(--amber-ink); }
.accueil #who ul.pour-qui h3 { color: #fff; }
.accueil #who ul.pour-qui p, .accueil #method ul.regles, .accueil #method .sources-ligne p { color: var(--on-navy-2); }
.accueil #method ul.regles b, .accueil #method .sources-ligne ul { color: #fff; }
.accueil #method .sources-ligne { border-top-color: var(--rule-navy); }

@media (max-width: 1000px) {
  .explorer-grille { grid-template-columns: minmax(0, 1fr); }
  .scene3d { height: 62vh; }
  .sol { width: 150%; }
}
@media (max-width: 800px) {
  .grille-geants { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pilier .f { height: calc(var(--h) * 0.7); }
}
.geant .sur { font-size: 0.42em; color: var(--on-navy-2); margin-left: 6px; font-stretch: 72%; }
.ouverture h1 { max-width: 15ch; font-size: clamp(2.2rem, 4vw, 3.7rem); }
.explorer-tete h2 { max-width: 22ch; }
.explorer-tete .intro { margin-top: 12px; }
/* la scène prend toute la largeur ; filtres, totaux et fiche en dessous */
.explorer-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.explorer-carte .scene3d { height: min(72vh, 680px); }
.explorer-carte .sol { width: min(1000px, 96%); top: 50%; }
.explorer-cote { position: static; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.explorer-cote .filtre + .filtre { grid-column: 1; }
.explorer-cote .totaux { grid-column: 2; grid-row: 1 / span 2; }
.explorer-cote .explorer-fiche { grid-column: 3; grid-row: 1 / span 2; }
.explorer-cote .totaux { grid-template-columns: minmax(0, 1fr); }
.explorer-cote .totaux > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-navy); }
.explorer-cote .totaux dd { font-size: 2.2rem; }
@media (max-width: 1000px) {
  .explorer-cote { grid-template-columns: minmax(0, 1fr); }
  .explorer-cote .filtre + .filtre, .explorer-cote .totaux, .explorer-cote .explorer-fiche { grid-column: 1; grid-row: auto; }
  .explorer-cote .totaux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explorer-cote .totaux > div + div { padding-left: 12px; border-left: 1px solid var(--rule-navy); border-top: 0; }
  .explorer-carte .sol { width: 170%; }
}

/* Fiches projet (version dossier), pages Alertes et Données et API.
   Même nuit que l'accueil : l'ambre reste réservé aux groupes de secours et aux actions.
   Un seul mouvement par fiche : le parc s'allume, groupe par groupe, quand on l'atteint. */

.dossier, .nuit-page { background: var(--console); color: var(--on-navy); }
.dossier h2, .nuit-page h2 { color: #fff; }
.dossier .intro, .nuit-page .intro { color: var(--on-navy-2); }
.dossier .fil, .nuit-page .fil { font-size: 0.88rem; color: var(--on-navy-2); }
.dossier .fil a, .nuit-page .fil a { color: var(--on-navy); }
.cadre.etroit { max-width: 900px; }

/* en-tête */
.dossier-tete, .page-tete { position: relative; padding: clamp(26px, 4vw, 44px) 0 clamp(40px, 5vw, 60px); border-top: 1px solid var(--rule-navy);
  background: radial-gradient(58% 72% at 82% 28%, rgba(25, 82, 128, 0.5), rgba(6, 26, 44, 0) 70%), var(--console); }
.dossier-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 52px; align-items: center; }
.puces-etat { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 16px; }
.etat, .marque-puce { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 0.84rem; font-weight: 650; line-height: 1.35; border: 1px solid var(--rule-navy); }
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.etat.demande { color: var(--on-navy); }
.etat.avis { color: #8FC6EA; border-color: rgba(143, 198, 234, 0.45); background: rgba(143, 198, 234, 0.07); }
.etat.accorde { color: #84D9A8; border-color: rgba(132, 217, 168, 0.45); background: rgba(132, 217, 168, 0.07); }
.etat.autre { color: #EE9F9F; border-color: rgba(238, 159, 159, 0.45); background: rgba(238, 159, 159, 0.07); }
.marque-puce { color: #fff; font-weight: 700; font-stretch: 110%; }
.h1-dossier { color: #fff; font-weight: 760; font-stretch: 125%; font-size: clamp(2rem, 4.1vw, 3.35rem); line-height: 1.03; letter-spacing: -0.022em; max-width: 22ch; margin: 0; }
.h1-dossier:lang(de) { font-size: clamp(1.9rem, 3.7vw, 3.05rem); }
.page-tete .h1-dossier { margin-top: 18px; }
.dossier-sous { color: var(--on-navy-2); font-size: 1.06rem; max-width: 42rem; margin: 16px 0 0; }
.dossier-sous.petit { font-size: 0.96rem; margin-top: 8px; }
.dossier-sous a { color: #fff; white-space: nowrap; }

/* carte de situation : l'Europe agrandie autour du projet */
.situation { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid var(--rule-navy);
  background: radial-gradient(70% 70% at 50% 50%, rgba(25, 82, 128, 0.35), rgba(6, 26, 44, 0) 75%), #051627; }
.situation .plan { position: absolute; left: 50%; top: 50%; width: calc(100% * 3.4); transform: translate(calc(var(--x) * -100%), calc(var(--y) * -100%)); }
.situation .plan img { display: block; width: 100%; height: auto; }
.situation i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(169, 187, 203, 0.6); }
.situation i.ici { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--lampe); z-index: 1;
  box-shadow: 0 0 0 4px rgba(255, 182, 37, 0.22), 0 0 30px 8px rgba(255, 182, 37, 0.5); }
.situation figcaption { position: absolute; left: 14px; right: 14px; bottom: 10px; font-size: 0.78rem; line-height: 1.4; color: var(--on-navy-2); }
.situation::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 10px #051627; border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .situation i.ici::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(255, 182, 37, 0.65); animation: onde 2.6s ease-out infinite; }
  @keyframes onde { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
}

/* trois chiffres */
.dossier-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 44px; margin: clamp(36px, 5vw, 58px) 0 0; padding-top: 30px; border-top: 1px solid var(--rule-navy); }
.dossier-chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.dossier-chiffres dd { margin: 0; font-weight: 620; font-stretch: 70%; font-size: clamp(3.2rem, 7.2vw, 6.2rem); line-height: 0.9; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.dossier-chiffres .ambre dd { color: var(--lampe); text-shadow: 0 0 44px rgba(255, 182, 37, 0.35); }
.dossier-chiffres dt { margin-top: 12px; color: var(--on-navy-2); font-size: 0.98rem; line-height: 1.45; max-width: 17rem; }
.dossier-aucun { margin: clamp(30px, 4vw, 48px) 0 0; padding-top: 24px; border-top: 1px solid var(--rule-navy); color: var(--on-navy-2); font-size: 1.05rem; }

/* le parc de secours */
.dossier-flotte { padding: clamp(52px, 6.5vw, 84px) 0; background: linear-gradient(180deg, var(--console) 0%, #08203A 100%); }
.flotte-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px 60px; align-items: center; margin-top: 30px; }
.flotte-fig { position: relative; margin: 0; }
.flotte-fig::before { content: ""; position: absolute; inset: 8% 4% 18%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease 0.3s;
  background: radial-gradient(closest-side, rgba(255, 182, 37, 0.2), rgba(255, 182, 37, 0)); }
.flotte-fig:has(.flotte.allume)::before { opacity: 1; }
.flotte { position: relative; display: block; width: 100%; height: auto; max-height: 470px; }
.flotte .socle { fill: rgba(143, 198, 234, 0.05); stroke: rgba(143, 198, 234, 0.35); stroke-width: 0.7; stroke-dasharray: 3 3; }
.flotte use.a { opacity: 0; transition: opacity 0.3s ease calc(var(--i) * var(--pas)); }
.flotte.allume use.a { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flotte use.a { transition: none; } }
.flotte-fig figcaption { margin-top: 16px; color: var(--on-navy-2); font-size: 0.96rem; }
.flotte-vide { display: grid; place-items: center; min-height: 220px; padding: 24px; border: 1.5px dashed rgba(143, 198, 234, 0.35); border-radius: 14px; text-align: center; }
.flotte-vide p { margin: 0; color: var(--on-navy-2); max-width: 22rem; }
.aside-t { margin: 0 0 6px; color: var(--on-navy-2); font-size: 0.86rem; font-weight: 650; }
.marques-grandes { margin: 0 0 30px; color: #fff; font-weight: 740; font-stretch: 115%; font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1.1; }
.marques-vide { margin: 0 0 30px; color: var(--on-navy); }
.payants { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule-navy); }
.payants li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-navy); color: var(--on-navy); }
.payants .badge-licence { margin: 0; flex: none; }
.payants-pied { margin: 14px 0 0; color: var(--on-navy-2); font-size: 0.92rem; }

/* frise datée */
.dossier-frise { padding: clamp(52px, 6.5vw, 84px) 0; background: #08203A; }
.frise { list-style: none; margin: 38px 0 0; padding: 0; position: relative; max-width: 880px; }
.dossier-frise .intro { max-width: 46rem; }
.frise::before { content: ""; position: absolute; left: calc(7.4rem + 1.1rem - 1px); top: 8px; bottom: 10px; width: 2px; background: linear-gradient(rgba(143, 198, 234, 0.45), rgba(143, 198, 234, 0.08)); }
.frise li { position: relative; display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 0 2.2rem; padding: 0 0 28px; }
.frise li::before { content: ""; position: absolute; left: calc(7.4rem + 1.1rem - 7px); top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #08203A; border: 2px solid #8FC6EA; box-sizing: border-box; }
.frise time, .frise .quand { padding-top: 1px; text-align: right; color: var(--on-navy-2); font-size: 0.9rem; font-weight: 650; font-stretch: 88%; }
.frise b { display: block; color: #fff; font-weight: 650; line-height: 1.35; }
.frise p { margin: 4px 0 0; color: var(--on-navy-2); font-size: 0.95rem; }
.frise p a { color: #fff; }
.frise li.decision::before, .frise li.en-ligne::before { border-color: #84D9A8; }
.frise li.decision::before { background: #84D9A8; }
.frise li.capture::before { border-color: var(--lampe); background: var(--lampe); box-shadow: 0 0 16px rgba(255, 182, 37, 0.65); }
.frise li.retire::before { border-color: #EE9F9F; background: #EE9F9F; }
.frise li.ferme { padding-bottom: 0; }
.frise li.ferme::before { border-style: dashed; border-color: var(--lampe); }
.frise li.ferme b { color: var(--on-navy); font-weight: 600; }
.frise .badge-licence { margin-right: 8px; }

/* la fiche, la commande, le suivi */
.dossier-fiche { padding: clamp(52px, 6.5vw, 84px) 0; background: var(--console); }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 52px; margin-top: 30px; align-items: start; }
.dossier .plaque { color: var(--ink); box-shadow: inset 0 1px 0 #FFFFFF, 0 40px 90px -30px rgba(0, 0, 0, 0.75); }
.plaque-json { margin: 4px 4px 0; font-size: 0.85rem; }
.dossier .achat { background: radial-gradient(90% 120% at 100% 0%, rgba(255, 182, 37, 0.12), rgba(255, 182, 37, 0) 60%), rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 182, 37, 0.55); border-radius: 14px; padding: 24px 24px 22px; }
.dossier .achat h2 { color: #fff; }
.dossier .achat p { color: var(--on-navy-2); }
.dossier .btn.clair { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.dossier .btn.clair:hover { background: rgba(255, 255, 255, 0.08); }
.dossier .achat .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.suivre { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--rule-navy); border-radius: 14px; }
.suivre h3 { color: #fff; margin: 0 0 10px; }
.suivre ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.suivre li { display: flex; align-items: center; gap: 10px; }
.suivre li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 10px rgba(255, 182, 37, 0.7); flex: none; }
.suivre a { color: #fff; }
.suivre p { margin: 12px 0 0; font-size: 0.86rem; color: var(--on-navy-2); }

/* projets voisins */
.dossier-voisins { padding: clamp(52px, 6.5vw, 80px) 0; background: #08203A; border-top: 1px solid var(--rule-navy); }
.voisins-cartes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.voisins-cartes a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--rule-navy); background: rgba(255, 255, 255, 0.025); color: var(--on-navy); text-decoration: none; }
.voisins-cartes a:hover { border-color: rgba(255, 182, 37, 0.6); background: rgba(255, 182, 37, 0.05); }
.v-ge { color: var(--lampe); font-weight: 640; font-stretch: 72%; font-size: 2.3rem; line-height: 1; }
.v-ge small { margin-left: 6px; color: var(--on-navy-2); font-size: 0.9rem; font-stretch: 100%; font-weight: 500; }
.v-t { color: #fff; font-weight: 620; line-height: 1.3; }
.v-e { color: var(--on-navy-2); font-size: 0.86rem; }

/* pages Alertes et Données et API */
.page-section { padding: clamp(52px, 6.5vw, 84px) 0; }
.page-section.deux-tons { background: #08203A; }
.flux-grille { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.flux-grille.un { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-top: 30px; }
.flux-carte { display: flex; flex-direction: column; padding: 18px 18px 16px; border: 1px solid var(--rule-navy); border-radius: 12px; background: rgba(255, 255, 255, 0.025); min-width: 0; }
.flux-carte h3 { color: #fff; font-size: 1.12rem; }
.flux-carte.large { border-color: rgba(255, 182, 37, 0.55); background: radial-gradient(90% 140% at 100% 0%, rgba(255, 182, 37, 0.12), rgba(255, 182, 37, 0) 60%), rgba(255, 255, 255, 0.03); padding: 22px 22px 20px; }
.flux-carte.large h3 { font-size: 1.35rem; }
.flux-n { margin: 8px 0 2px; color: var(--lampe); font-weight: 640; font-stretch: 74%; font-size: 2rem; line-height: 1; }
.flux-d { margin: 3px 0 0; color: var(--on-navy-2); font-size: 0.88rem; }
.flux-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 16px; }
.flux-actions a { color: #fff; font-size: 0.9rem; }
button.copier { min-height: 38px; padding: 7px 13px; border-radius: 6px; border: 1.5px solid var(--lampe); background: transparent; color: var(--lampe); font: inherit; font-size: 0.9rem; font-weight: 650; cursor: pointer; }
button.copier:hover { background: rgba(255, 182, 37, 0.1); }
button.copier.ok { background: var(--lampe); color: var(--amber-ink); }
.encart-licence { padding: 28px 28px 26px; border: 1px solid rgba(255, 182, 37, 0.55); border-radius: 16px;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 182, 37, 0.13), rgba(255, 182, 37, 0) 60%), rgba(255, 255, 255, 0.025); }
.encart-licence h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.encart-licence p { margin: 12px 0 22px; color: var(--on-navy-2); }

.api-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px 60px; align-items: center; }
.adresse { margin-top: 30px; scroll-margin-top: 100px; }
.adresse-l { margin: 0 0 8px; color: var(--on-navy-2); font-size: 0.88rem; font-weight: 650; }
.adresse-boite { display: flex; align-items: center; gap: 12px; max-width: 540px; padding: 10px 10px 10px 18px; border: 1px solid rgba(255, 182, 37, 0.65); border-radius: 12px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 40px rgba(255, 182, 37, 0.12); }
.adresse-boite code { flex: 1; min-width: 0; color: #fff; font-size: 1.08rem; font-weight: 600; overflow-wrap: anywhere; }
.api-conv { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--rule-navy); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.appel-outil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--on-navy-2); font-size: 0.8rem; }
.appel-outil code { padding: 3px 8px; border: 1px solid rgba(143, 198, 234, 0.3); border-radius: 6px; background: rgba(143, 198, 234, 0.08); color: #A9D6F5; font-size: 0.8rem; overflow-wrap: anywhere; }
.note-conv { margin: 0; color: var(--on-navy-2); font-size: 0.8rem; }
.clients { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.client { min-width: 0; padding: 22px; border: 1px solid var(--rule-navy); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.client h3 { color: #fff; font-size: 1.2rem; }
.client p { margin: 8px 0 0; color: var(--on-navy-2); font-size: 0.95rem; }
.client pre { margin: 12px 0 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--rule-navy); border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #E7EEF5; font-size: 0.76rem; line-height: 1.5; white-space: pre; }
.client .code-l { margin-top: 14px; font-size: 0.8rem; font-weight: 650; }
.outils { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; }
.outils li { padding: 20px 0; border-top: 1px solid var(--rule-navy); }
.outils code { color: var(--lampe); font-size: 1.02rem; font-weight: 650; }
.outils p { margin: 6px 0 0; color: var(--on-navy); }
.outils .exemple { color: var(--on-navy-2); font-size: 0.93rem; }
.outils .exemple span { margin-right: 6px; color: #8FC6EA; font-weight: 650; }
.deux-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px 60px; align-items: start; }
.liens-json { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule-navy); }
.liens-json li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--rule-navy); }
.liens-json span { color: var(--on-navy-2); }
.liens-json a { color: #fff; }
.liens-json code { font-size: 0.88rem; overflow-wrap: anywhere; }
.liens-plus { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.liens-plus a { color: #fff; }

.pied .selection { color: var(--on-navy); }
.nuit-page code, .nuit-page pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.flux-apercu { align-self: stretch; padding: 22px 24px; border: 1px solid var(--rule-navy); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.flux-apercu ol { list-style: none; margin: 8px 0 0; padding: 0; }
.flux-apercu li { display: grid; gap: 2px; padding: 12px 0 12px 18px; border-bottom: 1px solid var(--rule-navy); position: relative; }
.flux-apercu li:last-child { border-bottom: 0; }
.flux-apercu li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 10px rgba(255, 182, 37, 0.7); }
.flux-apercu time { color: var(--on-navy-2); font-size: 0.82rem; font-weight: 650; }
.flux-apercu a { color: #fff; font-weight: 600; line-height: 1.3; }
.flux-apercu span { color: var(--on-navy-2); font-size: 0.86rem; }

@media (max-width: 900px) {
  .dossier-grille, .flotte-grille, .fiche-grille, .api-grille, .deux-col { grid-template-columns: minmax(0, 1fr); }
  .clients, .outils { grid-template-columns: minmax(0, 1fr); }
  .voisins-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situation { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .dossier-chiffres { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .voisins-cartes { grid-template-columns: minmax(0, 1fr); }
  .situation { aspect-ratio: 4 / 3; }
  .frise::before { left: 6px; }
  .frise li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .frise li::before { left: 0; }
  .frise time, .frise .quand { text-align: left; }
  .frise .quand { display: none; }
  .adresse-boite { flex-wrap: wrap; }
  .adresse-boite code { flex-basis: 100%; }
}

/* Standby Atlas v5. Nuit pour l'infrastructure (la carte, les chiffres, les moteurs), papier pour les documents (la fiche, les prix).
   Une seule audace : la carte 3D en ouverture, où chaque projet est une colonne de lumière. Le reste se tient tranquille. */
:root {
  --n0: #061A2C; --n1: #0A223A; --n2: #0F2D4A; --n-trait: rgba(143, 198, 234, 0.16);
  --c0: #E7EEF5; --c1: #A3B7C9;
  --papier: #EEF3F6; --papier-2: #E2E9EE; --encre: #0E1A24; --encre-2: #4A5D6E; --p-trait: #C9D5DD;
  --lampe: #FFB625; --lampe-encre: #A86A00;
}

/* ------------------------------------------------------------------ en-tête collant, menu sur téléphone */
.tete, .tete.pleine { position: sticky; top: 0; left: auto; right: auto; z-index: 50; background: rgba(6, 26, 44, 0.84);
  -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--n-trait); }
.tete .cadre.cadre { display: flex; flex-wrap: nowrap; align-items: center; gap: 22px; padding-block: 11px; }
.tete .logo svg { height: 34px; }
.tete .nav-principale { display: flex; gap: 24px; margin-left: auto; font-size: 0.95rem; }
.tete .nav-principale a { color: rgba(231, 238, 245, 0.86); font-weight: 560; text-decoration: none; padding: 6px 0; }
.tete .nav-principale a:hover { color: #fff; }
.tete .menu { display: none; position: relative; }
.tete .menu summary { list-style: none; display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px; color: #fff; font-size: 0.95rem; font-weight: 650; cursor: pointer; user-select: none; }
.tete .menu summary::-webkit-details-marker { display: none; }
.menu-icone { display: grid; gap: 5px; width: 16px; }
.menu-icone i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease; }
.tete .menu[open] summary { background: rgba(255, 255, 255, 0.1); }
.tete .menu[open] .menu-icone i:first-child { transform: translateY(3.5px) rotate(45deg); }
.tete .menu[open] .menu-icone i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.tete .menu .nav-mobile { position: absolute; right: 0; top: calc(100% + 10px); display: grid; gap: 2px; width: min(330px, calc(100vw - 24px)); margin: 0; padding: 10px;
  overflow: visible; order: 0; font-size: 1rem; border: 1px solid var(--n-trait); border-radius: 16px; background: #0B2540; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.tete .menu .nav-mobile a { display: block; padding: 12px 14px; border-radius: 10px; color: #fff; font-weight: 600; text-decoration: none; }
.tete .menu .nav-mobile a:hover { background: rgba(255, 255, 255, 0.06); }
.tete .menu .nav-mobile .btn { display: flex; justify-content: center; margin: 8px 0 2px; color: var(--amber-ink); }
@media (max-width: 1000px) {
  .tete .nav-principale, .tete .tete-cta { display: none; }
  .tete .langues { margin-left: auto; }
  .tete .menu { display: block; }
}
@media (max-width: 700px) {
  .tete .logo svg { height: 28px; }
  .tete .cadre.cadre { gap: 10px; }
}
@media (max-width: 480px) {
  .tete .menu-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tete .menu summary { padding: 6px 11px; }
  .tete .langues a { padding-inline: 7px; }
}
.pied .selection { color: var(--c0); }

/* ------------------------------------------------------------------ accueil */
body.accueil { background: var(--n0); color: var(--c0); }
.tete.sur-carte { background: rgba(6, 26, 44, 0.62); }

/* ouverture : la carte */
.h5 { position: relative; overflow: hidden; color: var(--c0);
  background: radial-gradient(64% 78% at 70% 46%, rgba(23, 78, 124, 0.5), rgba(6, 26, 44, 0) 72%), var(--n0); }
.h5 h1 { margin: 0; color: #fff; font-weight: 760; font-stretch: 125%; font-size: clamp(2.2rem, 3.7vw, 3.5rem); line-height: 1.01; letter-spacing: -0.024em; text-wrap: balance; }
.h5 h1:lang(de) { font-size: clamp(2rem, 3.8vw, 3.5rem); }
.h5-chapeau { margin: 18px 0 0; color: var(--c1); font-size: 1.05rem; line-height: 1.55; max-width: 34rem; }
.h5 .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.h5-scene { position: relative; }
.h5 > .cadre { width: 100%; }
.h5-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 26, 44, 0.9) 0%, rgba(6, 26, 44, 0.55) 26%, rgba(6, 26, 44, 0) 44%); }
@media (max-width: 999px) { .h5-scene::before { display: none; } }
.h5-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 68% at 64% 52%, rgba(6, 26, 44, 0) 58%, rgba(6, 26, 44, 0.92) 100%); }
.c3-canvas { display: block; width: 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.c3-canvas:active { cursor: grabbing; }
.c3-repli { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; opacity: 0.85; }
.h5:not(.c3-vivante) .c3-canvas { display: none; }
.c3-vivante .c3-repli { display: none; }
.c3-date { position: absolute; z-index: 2; margin: 0; color: var(--lampe); font-weight: 640; font-stretch: 78%; font-size: 1.15rem; letter-spacing: 0.01em; pointer-events: none; }
.c3-date:empty { display: none; }
.h5-outils { position: relative; z-index: 2; }
.c3-filtres { display: grid; gap: 8px; }
.c3-rangee { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.c3-titre { min-width: 8.6em; margin-right: 4px; color: var(--c1); font-size: 0.8rem; font-weight: 650; }
.c3-puce { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 13px; border: 1px solid rgba(143, 198, 234, 0.24); border-radius: 999px;
  background: rgba(6, 26, 44, 0.66); color: var(--c0); font: inherit; font-size: 0.86rem; font-weight: 620; line-height: 1.2; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s ease, border-color 0.15s ease; }
.c3-puce span { color: var(--c1); font-weight: 500; font-size: 0.8rem; }
.c3-puce:hover { border-color: rgba(255, 182, 37, 0.7); }
.c3-puce[aria-pressed="true"] { background: var(--lampe); border-color: var(--lampe); color: var(--amber-ink); }
.c3-puce[aria-pressed="true"] span { color: rgba(29, 19, 4, 0.72); }
.c3-totaux { margin: 12px 0 0; color: #fff; font-weight: 650; font-size: 0.98rem; }
.c3-legende { margin: 4px 0 0; color: var(--c1); font-size: 0.82rem; max-width: 40rem; }

/* fiche du projet choisi */
.c3-fiche { width: 330px; max-width: 100%; padding: 16px 18px 14px; border: 1px solid rgba(143, 198, 234, 0.26); border-radius: 16px; color: var(--c0);
  background: rgba(8, 28, 48, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5); }
.c3-invite { margin: 0; color: var(--c1); font-size: 0.92rem; }
.c3-fiche.vide { display: none; }
.c3-fiche { position: relative; }
.c3-fermer { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--c1); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.c3-fermer:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.c3-lieu { padding-right: 30px; }
.c3-lieu { margin: 0; color: var(--c1); font-size: 0.8rem; }
.c3-nom { margin: 2px 0 12px; color: #fff; font-weight: 720; font-stretch: 108%; font-size: 1.12rem; line-height: 1.22; }
.c3-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.c3-chiffres div { display: flex; flex-direction: column-reverse; }
.c3-chiffres dd { margin: 0; color: #fff; font-weight: 640; font-stretch: 72%; font-size: 2.1rem; line-height: 1; }
.c3-chiffres .ambre dd { color: var(--lampe); }
.c3-chiffres dt { margin-top: 4px; color: var(--c1); font-size: 0.76rem; }
.c3-etat, .c3-moteurs { margin: 5px 0 0; font-size: 0.86rem; }
.c3-moteurs span { color: var(--c1); }
.c3-pastille { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c0); vertical-align: 0.05em; }
.c3-pastille.accorde { background: #84D9A8; } .c3-pastille.avis { background: #8FC6EA; } .c3-pastille.autre { background: #EE9F9F; }
.c3-groupe { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-trait); }
.c3-groupe p { margin: 0 0 6px; color: var(--c1); font-size: 0.8rem; }
.c3-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 150px; overflow-y: auto; }
.c3-groupe button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--c0); font: inherit; font-size: 0.84rem; text-align: left; cursor: pointer; }
.c3-groupe button span { color: var(--lampe); font-weight: 650; }
.c3-groupe button:hover, .c3-groupe button[aria-current="true"] { background: rgba(255, 255, 255, 0.07); }
.c3-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--n-trait); }
.c3-ouvrir { color: var(--lampe); font-weight: 700; text-decoration-color: rgba(255, 182, 37, 0.5); }
.c3-nav { display: flex; align-items: center; gap: 6px; color: var(--c1); font-size: 0.8rem; white-space: nowrap; }
.c3-nav button { width: 36px; height: 36px; border: 1px solid rgba(143, 198, 234, 0.3); border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.c3-nav button:hover { border-color: var(--lampe); color: var(--lampe); }

/* grand écran : la carte occupe toute l'ouverture, le texte est posé sur l'Atlantique */
@media (min-width: 1000px) {
  .h5 { display: grid; grid-template-rows: auto 1fr auto; min-height: clamp(660px, calc(100svh - 58px), 1000px); }
  .h5-scene { position: absolute; inset: 0; }
  .c3-canvas { height: 100%; }
  .h5-texte { position: relative; z-index: 2; padding-top: clamp(40px, 7vh, 88px); pointer-events: none; }
  .h5-texte > * { pointer-events: auto; max-width: min(35vw, 540px); }
  .h5-outils { grid-row: 3; padding-bottom: 26px; pointer-events: none; }
  .h5-outils > * { pointer-events: auto; }
  .c3-filtres { max-width: min(35vw, 540px); }
  .c3-date { top: 18px; right: max(20px, calc((100vw - 1200px) / 2 + 20px)); }
  .c3-large .c3-fiche { position: absolute; left: 0; top: 0; z-index: 3; }
  .c3-repli { position: absolute; right: 2%; top: 6%; width: 58%; }
}
/* téléphone et tablette : texte, carte, puis les commandes */
@media (max-width: 999px) {
  .h5-texte { padding-top: 26px; }
  .c3-canvas { height: clamp(300px, 96vw, 640px); }
  .c3-date { top: 6px; left: 20px; }
  .h5-outils { padding-bottom: 36px; }
  .c3-rangee { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .c3-rangee::-webkit-scrollbar { display: none; }
  .c3-titre { flex: none; min-width: 0; margin-right: 2px; }
  .c3-puce { flex: none; }
  .c3-fiche { margin: 12px auto 0; width: auto; max-width: calc(100% - 40px); }
}

/* chiffres géants */
.v5-chiffres { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--n-trait); background: linear-gradient(180deg, var(--n0), #04121F); }
.v5-chiffres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.v5-geant { margin: 0; color: #fff; font-weight: 620; font-stretch: 70%; font-size: clamp(3.6rem, 8.6vw, 8rem); line-height: 0.88; letter-spacing: -0.02em; white-space: nowrap; }
.v5-geant.ambre { color: var(--lampe); text-shadow: 0 0 50px rgba(255, 182, 37, 0.3); }
.v5-geant .u { margin-left: 8px; color: var(--lampe); font-size: 0.38em; font-stretch: 90%; }
.v5-geant .sur { margin-left: 6px; color: var(--c1); font-size: 0.42em; font-stretch: 72%; }
.v5-geant-l { margin: 14px 0 0; color: var(--c1); max-width: 19rem; }

/* sections */
.v5-section { padding: clamp(64px, 9vw, 120px) 0; }
.v5-tete { max-width: 40rem; }
.v5-tete.large { max-width: 54rem; }
.v5-tete h2 { color: #fff; font-weight: 760; font-stretch: 120%; font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.05; letter-spacing: -0.016em; }
.v5-intro { margin: 16px 0 0; color: var(--c1); font-size: 1.07rem; max-width: 40rem; }
.v5-tete .btn { margin-top: 26px; }
.v5-deux { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px 72px; align-items: center; }
.v5-papier { background: var(--papier); color: var(--encre); }
.v5-papier .v5-tete h2 { color: var(--encre); }
.v5-papier .v5-intro { color: var(--encre-2); }
.btn.sombre { background: var(--n0); color: #fff; }
.btn.sombre:hover { background: var(--n2); }
.v5-papier .btn.clair { border-color: var(--encre); color: var(--encre); }
.btn.contour { border-color: rgba(255, 255, 255, 0.6); }

/* moteurs cités */
.v5-moteurs { background: radial-gradient(60% 80% at 85% 50%, rgba(23, 78, 124, 0.35), rgba(6, 26, 44, 0) 70%), var(--n0); }
.v5-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.v5-barres li { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr) 12.5rem; grid-template-rows: auto auto; column-gap: 18px; align-items: center; }
.m-nom { grid-row: 1 / 3; color: #fff; font-weight: 700; font-stretch: 105%; }
.m-barre { grid-row: 1 / 3; height: 12px; border-radius: 6px; background: rgba(143, 198, 234, 0.1); overflow: hidden; }
.m-barre span { display: block; width: var(--l); height: 100%; border-radius: 6px; background: linear-gradient(90deg, #B97800, var(--lampe)); box-shadow: 0 0 18px rgba(255, 182, 37, 0.45); }
.m-ge { color: var(--c0); font-weight: 650; font-size: 0.9rem; white-space: nowrap; }
.m-proj { color: var(--c1); font-size: 0.82rem; }
.v5-note { margin: 22px 0 0; color: var(--c1); font-size: 0.92rem; }

/* pause photographique */
.v5-pause { position: relative; height: clamp(240px, 40vw, 540px); overflow: hidden; background: var(--n0); }
.v5-pause picture, .v5-pause img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v5-pause img { filter: saturate(0.8) brightness(0.82); }
.v5-pause::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--n0) 0%, rgba(6, 26, 44, 0) 30%, rgba(6, 26, 44, 0) 82%, rgba(6, 26, 44, 0.35) 100%); }
.v5-pause .etroit { display: none; }

/* le dossier en vitrine */
.v5-dossier { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; margin-top: 44px; align-items: start; }
.v5-flotte { margin: 0; padding: 26px 22px 20px; border-radius: 20px; background: radial-gradient(72% 70% at 50% 40%, #12385C 0%, #061A2C 78%); box-shadow: 0 40px 90px -40px rgba(6, 26, 44, 0.75); }
.v5-flotte figcaption { margin-top: 12px; color: var(--c1); font-size: 0.96rem; }
.v5-flotte figcaption b { color: #fff; font-weight: 700; }
.v5-papier .frise { margin-top: 0; }
.v5-papier .frise::before { background: linear-gradient(rgba(14, 26, 36, 0.3), rgba(14, 26, 36, 0.06)); }
.v5-papier .frise li { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0 2rem; }
.v5-papier .frise::before { left: calc(6.6rem + 1rem - 1px); }
.v5-papier .frise li::before { left: calc(6.6rem + 1rem - 7px); background: var(--papier); border-color: #3E7FB0; }
.v5-papier .frise li.decision::before { background: #2E9E63; border-color: #2E9E63; }
.v5-papier .frise li.capture::before { background: var(--lampe); border-color: #D18F0E; box-shadow: none; }
.v5-papier .frise li.retire::before { background: #D35F5F; border-color: #D35F5F; }
.v5-papier .frise li.en-ligne::before { border-color: #2E9E63; }
.v5-papier .frise li.ferme::before { border-color: #D18F0E; }
.v5-papier .frise b { color: var(--encre); }
.v5-papier .frise p, .v5-papier .frise time, .v5-papier .frise .quand { color: var(--encre-2); }
.v5-papier .frise p a { color: var(--encre); }
.v5-papier .frise li.ferme b { color: var(--encre); }
.v5-papier .badge-licence { border-color: #C98700; color: var(--lampe-encre); }
.v5-papier .payants { margin-top: 20px; border-color: var(--p-trait); }
.v5-papier .payants li { color: var(--encre); border-color: var(--p-trait); }
.v5-dossier-cote .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* fenêtre de publication */
.v5-fenetre { background: linear-gradient(180deg, #04121F, var(--n0)); }
.v5-fenetre .legende-fenetre { margin-top: 30px; }

/* pour qui */
.v5-photos { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.v5-photos picture, .v5-photos img { display: block; width: 100%; }
.v5-photos img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; filter: saturate(0.82) brightness(0.9); }
.v5-photos h3 { margin: 16px 0 0; color: #fff; font-size: 1.08rem; }
.v5-photos p { margin: 6px 0 0; color: var(--c1); font-size: 0.95rem; }

/* offres */
.v5-offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; border: 0; }
.v5-offres .offre, .v5-offres .offre + .offre { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px; border: 1px solid var(--p-trait); border-radius: 18px; background: #fff; color: var(--encre); }
.v5-offres .offre h3 { color: var(--encre); font-size: 1.08rem; }
.v5-offres .offre .prix { margin: 0; color: var(--encre); font-weight: 760; font-stretch: 112%; font-size: 2rem; line-height: 1.1; }
.v5-offres .offre .prix span { margin-left: 4px; color: var(--encre-2); font-size: 0.5em; font-weight: 600; }
.v5-offres .offre p { margin: 0; color: var(--encre-2); }
.v5-offres .offre .btn { margin-top: auto; align-self: flex-start; }
.v5-offres .offre .btn.contour { border-color: var(--encre); color: var(--encre); }
.v5-offres .offre.mise { background: var(--n0); border-color: var(--n0); color: var(--c0); box-shadow: 0 34px 80px -34px rgba(6, 26, 44, 0.8); }
.v5-offres .offre.mise h3, .v5-offres .offre.mise .prix { color: #fff; }
.v5-offres .offre.mise .prix { color: var(--lampe); }
.v5-offres .offre.mise p, .v5-offres .offre.mise .prix span { color: var(--c1); }
.v5-suite { margin: 26px 0 0; }
.v5-suite a { color: var(--encre); font-weight: 600; }

/* dans vos outils */
.v5-connecter { border-top: 1px solid var(--n-trait); }
.v5-trois { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--n-trait); }
.v5-trois li { padding: 26px 28px 8px 0; }
.v5-trois li + li { padding-left: 28px; border-left: 1px solid var(--n-trait); }
.v5-trois h3 { color: #fff; font-size: 1.2rem; }
.v5-trois p { margin: 8px 0 14px; color: var(--c1); }
.v5-trois a { color: var(--lampe); font-weight: 700; }

@media (max-width: 900px) {
  .v5-deux, .v5-dossier { grid-template-columns: minmax(0, 1fr); }
  .v5-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5-photos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .v5-photos::-webkit-scrollbar { display: none; }
  .v5-photos li { scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .v5-chiffres-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .v5-barres li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 6px; }
  .m-nom { grid-row: 1; grid-column: 1; }
  .m-ge { grid-row: 1; grid-column: 2; text-align: right; }
  .m-barre { grid-row: 2; grid-column: 1 / 3; }
  .m-proj { grid-row: 3; grid-column: 1 / 3; }
  .v5-pause .large { display: none; }
  .v5-pause .etroit { display: block; }
  .v5-offres { grid-template-columns: minmax(0, 1fr); }
  .v5-trois { grid-template-columns: minmax(0, 1fr); }
  .v5-trois li, .v5-trois li + li { padding: 22px 0 6px; border-left: 0; border-top: 1px solid var(--n-trait); }
  .v5-trois li:first-child { border-top: 0; }
  .v5-papier .frise li { grid-template-columns: minmax(0, 1fr); }
  .v5-papier .frise::before { left: 6px; }
  .v5-papier .frise li::before { left: 0; }
}

/* ------------------------------------------------------------------ pages intérieures */
.bande-titre { position: relative; padding-block: clamp(26px, 4.5vw, 52px) clamp(34px, 5vw, 60px); border-top: 0; color: #fff;
  background: radial-gradient(58% 130% at 88% 0%, rgba(23, 78, 124, 0.55), rgba(6, 26, 44, 0) 70%), var(--n0); }
.bande-titre .h1-page { margin-top: 14px; color: #fff; font-weight: 760; font-stretch: 122%; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 24ch; }
.bande-titre .intro { color: var(--c1); max-width: 44rem; }
.bande-titre .fil { color: var(--c1); font-size: 0.88rem; }
.bande-titre .fil a { color: var(--c0); }
.bande.beton { background: var(--papier); }
.bande.nuit { background: var(--n0); }

/* liste des projets */
.liste-corps { padding: 0 0 clamp(60px, 8vw, 100px); background: var(--papier); color: var(--encre); }
.l-outils { position: sticky; top: 66px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 10px; margin: -26px 0 0; padding: 14px;
  border: 1px solid var(--p-trait); border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 22px 50px -30px rgba(6, 26, 44, 0.5); }
.l-outils label { display: grid; gap: 4px; min-width: 0; color: var(--encre-2); font-size: 0.76rem; font-weight: 650; }
.l-outils input, .l-outils select { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--p-trait); border-radius: 9px; background: var(--papier); color: var(--encre); font: inherit; font-size: 0.95rem; }
.l-outils input:focus, .l-outils select:focus { outline: 2px solid var(--lampe); outline-offset: 1px; }
.l-compte { margin: 26px 0 8px; color: var(--encre); font-weight: 700; }
.l-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--p-trait); }
.l-liste li[hidden] { display: none; }
.l-ligne { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.6fr) minmax(0, 0.9fr) 6.5rem 7.2rem; gap: 18px; align-items: center; padding: 14px 12px;
  border-bottom: 1px solid var(--p-trait); color: var(--encre); text-decoration: none; transition: background 0.12s ease; }
.l-ligne:hover { background: #fff; }
.l-ligne:hover .l-nom b { text-decoration: underline; text-decoration-color: var(--lampe); text-underline-offset: 3px; }
.l-nom { min-width: 0; }
.l-nom b { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.l-nom span { color: var(--encre-2); font-size: 0.88rem; }
.l-etat { display: flex; align-items: baseline; gap: 8px; color: var(--encre); font-size: 0.88rem; line-height: 1.35; }
.pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8A9BAA; transform: translateY(-1px); }
.pt.accorde { background: #2E9E63; } .pt.avis { background: #3E7FB0; } .pt.autre { background: #D35F5F; }
.l-ge { color: var(--encre-2); font-size: 0.86rem; }
.l-ge b { color: var(--encre); font-size: 1.05rem; font-weight: 700; }
.l-ge .vide, .l-th { color: var(--encre-2); }
.l-barre { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: var(--papier-2); }
.l-barre i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #C98700, var(--lampe)); }
.l-th { text-align: right; font-size: 0.92rem; }
.l-ligne time { text-align: right; color: var(--encre-2); font-size: 0.88rem; }
.l-vide { padding: 44px 0; text-align: center; }
.l-vide p { margin: 0 0 16px; color: var(--encre-2); }
@media (max-width: 900px) {
  .l-outils { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; }
  .l-q { grid-column: 1 / -1; }
  .l-ligne { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom ge" "etat date"; gap: 6px 14px; padding: 14px 4px; }
  .l-nom { grid-area: nom; } .l-ge { grid-area: ge; text-align: right; } .l-etat { grid-area: etat; } .l-ligne time { grid-area: date; align-self: end; }
  .l-th { display: none; }
  .l-barre { margin-left: auto; width: 64px; }
}

/* ------------------------------------------------------------------ ouverture v6 : la photo du data center, puis la carte en faisant défiler */
[data-carte3d]:not(.c3-vivante) .c3-canvas { display: none; }
.ouv { position: relative; --p: 0; background: var(--n0); color: var(--c0); }
.ouv-scene { position: relative; }
.ouv-a { position: relative; height: calc(100svh - 58px); min-height: 560px; overflow: hidden; }
.ouv-photo, .ouv-photo picture, .ouv-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ouv-photo img { object-fit: cover; object-position: 50% 42%; }
.ouv-photo .etroit { display: none; }
.ouv-voile { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 44, 0.7) 0%, rgba(6, 26, 44, 0.08) 34%, rgba(6, 26, 44, 0.2) 62%, rgba(6, 26, 44, 0.97) 100%),
              linear-gradient(90deg, rgba(6, 26, 44, 0.8) 0%, rgba(6, 26, 44, 0.25) 52%, rgba(6, 26, 44, 0) 78%); }
.ouv-texte { position: relative; z-index: 2; padding-top: clamp(64px, 15vh, 170px); }
.ouv h1 { margin: 0; max-width: 15ch; color: #fff; font-weight: 760; font-stretch: 125%; font-size: clamp(2.5rem, 5.3vw, 4.9rem); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; text-shadow: 0 6px 50px rgba(0, 0, 0, 0.35); }
.ouv h1:lang(de) { font-size: clamp(2.3rem, 4.7vw, 4.3rem); }
.ouv-chapeau { margin: 22px 0 0; max-width: 35rem; color: #DCE6EF; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; }
.ouv .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ouv-indice { position: absolute; z-index: 2; left: 50%; bottom: 24px; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%);
  color: var(--c0); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ouv-indice i { width: 1.5px; height: 46px; background: linear-gradient(var(--lampe), rgba(255, 182, 37, 0)); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .ouv-indice i { animation: indice 2.2s ease-in-out infinite; }
  @keyframes indice { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
}
.ouv-credit { position: absolute; z-index: 2; right: 16px; bottom: 8px; margin: 0; color: rgba(231, 238, 245, 0.5); font-size: 0.68rem; }
.ouv-b { position: relative; }
.ouv-b::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 74% 70% at 62% 52%, rgba(6, 26, 44, 0) 56%, rgba(6, 26, 44, 0.9) 100%); }
.ouv-legende, .ouv .h5-outils, .ouv .c3-fiche { position: relative; z-index: 3; }
.ouv-l-h { margin: 0; color: #fff; font-weight: 760; font-stretch: 120%; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.ouv-l-p { margin: 10px 0 0; color: var(--c1); font-size: 0.98rem; max-width: 30rem; }
.ouv .c3-date { position: static; margin: 12px 0 0; }

/* sans animation (mouvement réduit, ou script absent) : photo, puis carte en dessous */
.ouv:not(.anime) .ouv-b { padding: 48px 0 40px; background: radial-gradient(64% 70% at 66% 50%, rgba(23, 78, 124, 0.45), rgba(6, 26, 44, 0) 72%), var(--n0); }
.ouv:not(.anime) .c3-canvas { height: clamp(320px, 62vw, 720px); }
.ouv:not(.anime) .c3-fiche { position: static; transform: none !important; margin: 14px auto 0; }
.ouv:not(.anime) .c3-repli { position: static; }

/* scène animée : 2,9 écrans de défilement, la scène reste en place pendant que la photo cède à la carte */
.ouv.anime { height: 290svh; }
.ouv.anime .ouv-scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ouv.anime .ouv-a, .ouv.anime .ouv-b { position: absolute; inset: 0; height: auto; min-height: 0; }
.ouv.anime .ouv-photo { transform: scale(calc(1 + var(--p) * 0.16)); opacity: calc(1 - var(--p) * 1.7); }
.ouv.anime .ouv-texte { opacity: calc(1 - var(--p) * 4.8); transform: translateY(calc(var(--p) * -120px)); }
.ouv.anime .ouv-indice, .ouv.anime .ouv-credit { opacity: calc(1 - var(--p) * 7); }
.ouv.anime .ouv-b { opacity: calc((var(--p) - 0.12) * 3.4); pointer-events: none; }
.ouv.anime.phase-carte .ouv-b { pointer-events: auto; }
.ouv.anime.phase-carte .ouv-a { pointer-events: none; }
.ouv.anime .c3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ouv.anime .ouv-legende { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; opacity: calc((var(--p) - 0.26) * 5); transform: translateY(calc((1 - min(1, max(0, var(--p) - 0.26) * 5)) * 26px)); }
.ouv.anime .ouv-legende > * { pointer-events: auto; }
.ouv.anime .h5-outils { position: absolute; left: 0; right: 0; bottom: 0; opacity: calc((var(--p) - 0.42) * 4); pointer-events: none; }
.ouv.anime .h5-outils > * { pointer-events: auto; }
@media (min-width: 1000px) {
  .ouv.anime .ouv-legende { padding-top: 92px; }
  .ouv.anime .ouv-legende > * { max-width: min(33vw, 460px); }
  .ouv.anime .h5-outils { padding-bottom: 22px; }
  .ouv.anime .h5-outils > * { max-width: min(36vw, 540px); }
  .ouv-b::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 26, 44, 0.85) 0%, rgba(6, 26, 44, 0.4) 24%, rgba(6, 26, 44, 0) 42%); }
}
@media (max-width: 999px) {
  .ouv-photo .large { display: none; }
  .ouv-photo .etroit { display: block; }
  .ouv-texte { padding-top: clamp(40px, 9vh, 90px); }
  .ouv-indice { bottom: 18px; }
  .ouv.anime .ouv-legende { padding-top: 70px; }
  .ouv-l-p { font-size: 0.9rem; }
  .ouv.anime .h5-outils { padding-top: 34px; padding-bottom: 14px; background: linear-gradient(180deg, rgba(6, 26, 44, 0), rgba(6, 26, 44, 0.92) 32%); }
  .ouv.anime .c3-legende { display: none; }
  .ouv.anime .c3-fiche { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; width: auto; max-width: none; margin: 0; background: #0B2540; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* le dossier, en capture d'écran réelle */
.v6-produit { overflow: hidden; background: radial-gradient(48% 62% at 78% 50%, rgba(23, 78, 124, 0.5), rgba(6, 26, 44, 0) 70%), var(--n0); }
.v6-produit-grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr); gap: 48px 68px; align-items: center; }
.v6-produit-texte h2 { color: #fff; font-weight: 760; font-stretch: 120%; font-size: clamp(1.85rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.016em; }
.v6-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.v6-points li { padding-left: 20px; border-left: 2px solid var(--lampe); }
.v6-points h3 { color: #fff; font-size: 1.08rem; }
.v6-points p { margin: 4px 0 0; color: var(--c1); font-size: 0.96rem; }
.v6-produit-texte .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.v6-ecran { margin: 0; overflow: hidden; border: 1px solid rgba(143, 198, 234, 0.26); border-radius: 14px; background: #0A1F33;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8), 0 0 90px rgba(255, 182, 37, 0.08); transform: perspective(1700px) rotateY(-10deg) rotateX(3deg); transform-origin: left center; transition: transform 0.6s ease; }
.v6-ecran:hover { transform: perspective(1700px) rotateY(-3deg) rotateX(1deg); }
.v6-barre { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgba(143, 198, 234, 0.18); background: #0D2840; }
.v6-barre i { width: 10px; height: 10px; border-radius: 50%; background: rgba(231, 238, 245, 0.22); }
.v6-barre span { flex: 1; min-width: 0; margin-left: 12px; padding: 4px 12px; overflow: hidden; border-radius: 6px; background: rgba(0, 0, 0, 0.28); color: var(--c1); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.v6-ecran a, .v6-ecran picture, .v6-ecran img { display: block; width: 100%; height: auto; }
.v6-chute { margin: 34px 0 0; max-width: 46rem; padding: 20px 24px; border-left: 3px solid var(--lampe); border-radius: 0 12px 12px 0; background: rgba(255, 182, 37, 0.07); color: #fff; font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) {
  .v6-produit-grille { grid-template-columns: minmax(0, 1fr); }
  .v6-ecran, .v6-ecran:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .v6-ecran { transition: none; } }

.c3-nd { margin: 12px 0 4px; color: var(--c1); font-size: 0.86rem; }

/* Standby Atlas v7 : l'accueil est un récit en scènes plein écran. Un cran de molette, une scène.
   Toutes les scènes restent de nuit pour que les fondus enchaînés restent nets ; l'ambre garde son rôle (groupes de secours, actions). */
body.accueil .tete, body.accueil .tete.sur-carte { position: fixed; top: 0; left: 0; right: 0; }
.recit { position: relative; background: var(--n0); color: var(--c0); }
.recit-pas, .recit-points { display: none; }
.scene h2 { margin: 0; color: #fff; font-weight: 760; font-stretch: 120%; font-size: clamp(1.6rem, min(3.4vw, 5.4svh), 3rem); line-height: 1.05; letter-spacing: -0.016em; text-wrap: balance; }
.scene .v5-intro { font-size: clamp(0.95rem, min(1.2vw, 2.2svh), 1.08rem); }

/* sans animation (mouvement réduit, ou script absent) : les scènes s'empilent */
.recit:not(.anime) .scene { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: 84px 0 56px; border-top: 1px solid var(--n-trait); }
.recit:not(.anime) .s-ouv { padding: 0; border: 0; }
.recit:not(.anime) .s-carte { min-height: 0; padding: 84px 0 40px; }
.recit:not(.anime) .s-carte .c3-canvas { height: clamp(320px, 62vw, 720px); }
.recit:not(.anime) .s-carte .c3-fiche { position: static; transform: none !important; margin: 14px auto 0; }
.recit:not(.anime) .parc-canvas { position: relative; display: block; width: 100%; height: 42vh; margin-bottom: 24px; }

/* animé : la vue reste en place, les scènes se succèdent par fondu */
.recit.anime { height: calc(var(--n) * 100svh); }
.recit.anime .recit-pas { display: block; position: absolute; inset: 0; pointer-events: none; }
.recit.anime .recit-pas span { position: absolute; left: 0; top: calc(var(--i) * 100svh); width: 1px; height: 100svh; }
.recit.anime .recit-vue { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.recit.anime .scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: safe center; visibility: hidden; opacity: var(--o, 0);
  transform: scale(calc(1 + var(--d, 0) * 0.12)); transform-origin: 50% 50%; }
.recit.anime .scene:not(.active) { pointer-events: none; }
.recit.anime .scene.active { z-index: 2; }
.recit.anime .scene > .cadre { width: 100%; padding-top: 70px; padding-bottom: 24px; }
.recit.anime .s-ouv, .recit.anime .s-carte { transform: none; }
.recit.anime .s-carte .c3-canvas { transform: scale(calc(1 + max(0, var(--d, 0)) * 0.2)); transform-origin: 62% 52%; }
.s-carte .c3-date { position: static; margin: 12px 0 0; }
.c3-groupe ul { overscroll-behavior: contain; }
.recit.anime .s-ouv .ouv-photo { transform: scale(calc(1 + max(0, var(--d, 0)) * 0.22)); }
.recit.anime .s-ouv .ouv-texte { transform: translateY(calc(var(--d, 0) * -18vh)); }

/* points de navigation (une scène par point) */
.recit.anime .recit-points { display: block; position: absolute; right: 16px; top: 50%; z-index: 30; transform: translateY(-50%); }
.recit-points ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recit-points button { display: block; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.recit-points button span { display: block; width: 8px; height: 8px; margin: 8px; border-radius: 50%; background: rgba(231, 238, 245, 0.35); transition: transform 0.25s ease, background 0.25s ease; }
.recit-points button:hover span { background: #fff; }
.recit-points li { position: relative; }
.recit-points em { position: absolute; right: 30px; top: 50%; transform: translate(6px, -50%); color: var(--c0); font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.recit-points button:hover em, .recit-points button:focus-visible em { opacity: 0.9; transform: translate(0, -50%); }
.recit-points button[aria-current="true"] span { background: var(--lampe); transform: scale(1.6); box-shadow: 0 0 12px rgba(255, 182, 37, 0.7); }

/* 1. ouverture */
.s-ouv { overflow: hidden; }
.s-ouv .ouv-photo { position: absolute; inset: 0; }
.s-ouv h1 { margin: 0; max-width: 15ch; color: #fff; font-weight: 760; font-stretch: 125%; font-size: clamp(2.4rem, min(5.3vw, 8.4svh), 4.9rem); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; text-shadow: 0 6px 50px rgba(0, 0, 0, 0.35); }
.s-ouv h1:lang(de) { font-size: clamp(2.2rem, min(4.7vw, 7.6svh), 4.3rem); }
.s-ouv .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.recit:not(.anime) .s-ouv { height: 100svh; }
.s-ouv .ouv-texte { padding-top: 0; }
.recit.anime .s-ouv { justify-content: center; }

/* 2. carte */
.s-carte { background: radial-gradient(64% 70% at 66% 50%, rgba(23, 78, 124, 0.45), rgba(6, 26, 44, 0) 72%), var(--n0); }
.recit.anime .s-carte .c3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-carte .ouv-legende, .s-carte .h5-outils, .s-carte .c3-fiche { z-index: 3; }
.recit.anime .s-carte .ouv-legende { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.recit.anime .s-carte .ouv-legende > * { pointer-events: auto; }
.recit.anime .s-carte .h5-outils { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.recit.anime .s-carte .h5-outils > * { pointer-events: auto; }
.s-carte::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 74% 70% at 62% 52%, rgba(6, 26, 44, 0) 56%, rgba(6, 26, 44, 0.9) 100%); }

/* 3. parc de secours */
.s-parc { background: radial-gradient(55% 65% at 70% 55%, rgba(255, 182, 37, 0.07), rgba(6, 26, 44, 0) 70%), var(--n0); }
.recit.anime .parc-canvas { position: absolute; right: 0; top: 12%; width: 64%; height: 78%; }
.parc-texte { position: relative; z-index: 2; }
.parc-texte > * { max-width: 30rem; }
.v7-geant { margin: 0; color: #fff; font-weight: 620; font-stretch: 70%; font-size: clamp(4rem, min(11vw, 17svh), 10rem); line-height: 0.88; letter-spacing: -0.02em; white-space: nowrap; }
.v7-geant.ambre { color: var(--lampe); text-shadow: 0 0 60px rgba(255, 182, 37, 0.35); }
.v7-geant-l { margin: 16px 0 0; color: var(--c0); font-size: clamp(1rem, min(1.4vw, 2.4svh), 1.2rem); line-height: 1.5; }
.parc-plus { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--n-trait); }
.v7-moyen { margin: 0; color: #fff; font-weight: 620; font-stretch: 72%; font-size: clamp(2.4rem, min(4.6vw, 7svh), 4rem); line-height: 1; }
.parc-plus p:last-child { margin: 6px 0 0; color: var(--c1); }
.parc-note { margin: 18px 0 0; color: var(--c1); font-size: 0.85rem; }

/* 4. les documents qui disparaissent */
.s-fuite { background: radial-gradient(50% 60% at 78% 50%, rgba(238, 159, 159, 0.06), rgba(6, 26, 44, 0) 70%), var(--n0); }
.fuite-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px 64px; align-items: center; }
.fuite-stat { display: flex; align-items: baseline; gap: 14px; margin: 26px 0 0; color: var(--c0); font-size: 1rem; max-width: 32rem; }
.fuite-stat b { flex: none; color: #fff; font-weight: 620; font-stretch: 72%; font-size: clamp(2.6rem, min(4.4vw, 7svh), 3.8rem); line-height: 0.9; }
.fuite-stat small { color: var(--c1); font-size: 0.5em; margin-left: 2px; }
.fuite-doc { padding: 18px 20px 16px; border: 1px solid rgba(143, 198, 234, 0.3); border-radius: 16px; background: linear-gradient(180deg, #10304E, #0A223A); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); filter: grayscale(1) brightness(0.62); opacity: 0.6; }
.fuite-doc-tete { display: flex; align-items: center; gap: 12px; color: #fff; }
.fuite-doc-icone { position: relative; flex: none; width: 26px; height: 32px; border-radius: 3px; background: linear-gradient(180deg, #E7EEF5, #A3B7C9); }
.fuite-doc-icone::after { content: ""; position: absolute; right: 0; top: 0; border: 5px solid; border-color: #0A223A #0A223A #C9D5DD #C9D5DD; }
.fuite-etat { position: relative; height: 26px; margin: 14px 0 10px; }
.fuite-etat span { position: absolute; left: 0; top: 0; padding: 3px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; white-space: nowrap; }
.fuite-etat .en-ligne { color: #84D9A8; border: 1px solid rgba(132, 217, 168, 0.5); opacity: 0; }
.fuite-etat .retire { color: #EE9F9F; border: 1px solid rgba(238, 159, 159, 0.55); }
.fuite-jours { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(143, 198, 234, 0.15); }
.fuite-jours i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #84D9A8, #EE9F9F); }
.fuite-jours-l { margin: 6px 0 0; color: var(--c1); font-size: 0.78rem; }
.fuite-faits-t { margin: 22px 0 10px; color: var(--c1); font-size: 0.86rem; font-weight: 650; }
.fuite-faits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fuite-faits li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid rgba(255, 182, 37, 0.5); border-radius: 12px; background: rgba(255, 182, 37, 0.06); box-shadow: 0 0 30px rgba(255, 182, 37, 0.08); }
.fuite-faits li span { color: var(--c1); font-size: 0.78rem; }
.fuite-faits li b { color: #fff; font-weight: 700; font-size: 1.12rem; }
.fuite-faits li.ferme { border-color: rgba(143, 198, 234, 0.3); background: transparent; box-shadow: none; }
.fuite-faits .badge-licence { font-size: 0.74rem; }
.fuite-exemple { margin: 10px 0 0; color: var(--c1); font-size: 0.78rem; }
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .fuite-doc { filter: none; opacity: 1; }
  .recit.anime .fuite-etat .en-ligne { opacity: 1; }
  .recit.anime .fuite-etat .retire { opacity: 0; }
  .recit.anime .fuite-jours i { width: 0; }
  .recit.anime .fuite-faits li { opacity: 0; transform: translateY(12px); }
  .recit.anime .s-fuite.vu .fuite-jours i { animation: v7-jours 2s ease-in-out 0.3s forwards; }
  .recit.anime .s-fuite.vu .fuite-etat .en-ligne { animation: v7-sortir 0.35s ease 2.35s forwards; }
  .recit.anime .s-fuite.vu .fuite-etat .retire { animation: v7-entrer 0.35s ease 2.45s forwards; }
  .recit.anime .s-fuite.vu .fuite-doc { animation: v7-eteindre 0.9s ease 2.45s forwards; }
  .recit.anime .s-fuite.vu .fuite-faits li { animation: v7-entrer-haut 0.5s ease calc(2.8s + var(--k) * 0.16s) forwards; }
  @keyframes v7-jours { to { width: 100%; } }
  @keyframes v7-sortir { to { opacity: 0; } }
  @keyframes v7-entrer { to { opacity: 1; } }
  @keyframes v7-entrer-haut { to { opacity: 1; transform: none; } }
  @keyframes v7-eteindre { to { filter: grayscale(1) brightness(0.62); opacity: 0.6; } }
}

/* 5. le dossier */
.s-produit { background: radial-gradient(48% 62% at 78% 50%, rgba(23, 78, 124, 0.5), rgba(6, 26, 44, 0) 70%), var(--n0); }
.s-produit .v6-produit-texte h2 { font-size: clamp(1.6rem, min(3.2vw, 5.2svh), 2.8rem); }
.s-produit .v6-points { margin-top: 22px; gap: 14px; }
.recit.anime .s-produit .v6-ecran { max-height: 74svh; }
.recit.anime .s-produit .v6-ecran img { max-height: calc(74svh - 40px); object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .recit.anime .s-produit .v6-ecran { transform: perspective(1700px) rotateY(calc(-10deg + var(--a, 0) * -14deg)) rotateX(3deg) translateX(calc(var(--d, 0) * -6vw)); transition: none; }
}
@media (max-width: 999px) { .recit.anime .s-produit .v6-ecran { transform: none; } }

/* 6. moteurs */
.s-moteurs { background: radial-gradient(60% 80% at 85% 50%, rgba(23, 78, 124, 0.35), rgba(6, 26, 44, 0) 70%), var(--n0); }
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .s-moteurs .m-barre span { width: 0; transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .recit.anime .s-moteurs.vu .m-barre span { width: var(--l); }
  .recit.anime .s-moteurs .v5-barres li:nth-child(2) .m-barre span { transition-delay: 0.08s; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(3) .m-barre span { transition-delay: 0.16s; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(4) .m-barre span { transition-delay: 0.24s; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(5) .m-barre span { transition-delay: 0.32s; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(6) .m-barre span { transition-delay: 0.4s; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(7) .m-barre span { transition-delay: 0.48s; }
}

/* 7. pour qui */
.qui-grille { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.qui-grille picture, .qui-grille img { display: block; width: 100%; }
.qui-grille img { aspect-ratio: 4 / 5; max-height: 42svh; object-fit: cover; border-radius: 14px; filter: saturate(0.82) brightness(0.9); }
.qui-grille h3 { margin: 14px 0 0; color: #fff; font-size: 1.05rem; line-height: 1.25; }
.qui-grille p { margin: 6px 0 0; color: var(--c1); font-size: 0.92rem; }
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .qui-grille li { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .recit.anime .s-qui.vu .qui-grille li { opacity: 1; transform: none; }
  .recit.anime .s-qui.vu .qui-grille li:nth-child(2) { transition-delay: 0.1s; }
  .recit.anime .s-qui.vu .qui-grille li:nth-child(3) { transition-delay: 0.2s; }
  .recit.anime .s-qui.vu .qui-grille li:nth-child(4) { transition-delay: 0.3s; }
}

/* 8. offres */
.s-offres { background: radial-gradient(50% 60% at 50% 100%, rgba(255, 182, 37, 0.08), rgba(6, 26, 44, 0) 70%), var(--n0); }
.offres-v7 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.offres-v7 a { display: grid; align-content: start; gap: 8px; height: 100%; padding: 22px 20px; border: 1px solid var(--n-trait); border-radius: 16px; background: rgba(255, 255, 255, 0.03); color: var(--c0); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.offres-v7 a:hover { border-color: rgba(255, 182, 37, 0.6); background: rgba(255, 182, 37, 0.05); }
.offres-v7 li.mise a { border-color: rgba(255, 182, 37, 0.65); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 182, 37, 0.14), rgba(255, 182, 37, 0) 60%), rgba(255, 255, 255, 0.03); }
.o-nom { color: #fff; font-weight: 700; }
.o-prix { color: var(--lampe); font-weight: 760; font-stretch: 112%; font-size: 1.9rem; line-height: 1.05; }
.o-prix small { margin-left: 4px; color: var(--c1); font-size: 0.5em; font-weight: 600; }
.o-txt { color: var(--c1); font-size: 0.92rem; }
.s-offres .v5-suite a { color: #fff; }

/* 9. vos outils */
.s-outils .v5-trois { margin-top: 28px; }
.s-outils .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* grand écran */
@media (min-width: 1000px) {
  .recit-points button[aria-current="true"] em { opacity: 0.75; transform: translate(0, -50%); color: var(--lampe); }
  .recit.anime .recit-points { right: 22px; }
  .recit.anime .s-carte .ouv-legende { padding-top: 92px; }
  .recit.anime .s-carte .ouv-legende > * { max-width: min(33vw, 460px); }
  .recit.anime .s-carte .h5-outils { padding-bottom: 22px; }
  .recit.anime .s-carte .h5-outils > * { max-width: min(36vw, 540px); }
  .s-carte::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 26, 44, 0.85) 0%, rgba(6, 26, 44, 0.4) 24%, rgba(6, 26, 44, 0) 42%); }
}
/* téléphone et tablette */
@media (max-width: 999px) {
  .recit.anime .recit-points { right: 4px; }
  .recit-points ol { gap: 0; }
  .recit-points button { width: 20px; height: 20px; }
  .recit-points button span { width: 6px; height: 6px; margin: 7px; }
  .recit.anime .s-carte .ouv-legende { padding-top: 76px; }
  .recit.anime .s-carte .h5-outils { padding-top: 34px; padding-bottom: 14px; background: linear-gradient(180deg, rgba(6, 26, 44, 0), rgba(6, 26, 44, 0.92) 32%); }
  .recit.anime .s-carte .c3-legende { display: none; }
  .recit.anime .s-carte .c3-fiche { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; width: auto; max-width: none; margin: 0; background: #0B2540; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .recit.anime .parc-canvas { top: 64px; width: 100%; height: 40svh; }
  .recit.anime .s-parc { justify-content: flex-end; }
  .recit.anime .s-parc > .cadre { padding-bottom: 7svh; }
  .fuite-grille, .v6-produit-grille, .v5-deux { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .recit.anime .s-fuite .v5-intro { display: none; }
  .recit.anime .s-produit .v6-points p, .recit.anime .s-produit .v6-produit-texte .actions .btn.contour { display: none; }
  .recit.anime .s-produit .v6-ecran { max-height: 34svh; }
  .recit.anime .s-produit .v6-ecran img { max-height: calc(34svh - 36px); }
  .recit.anime .s-produit .v6-points { gap: 8px; margin-top: 14px; }
  .recit.anime .s-produit .v6-points h3 { font-size: 0.98rem; }
  .recit.anime .s-moteurs .v5-tete .v5-intro, .recit.anime .s-moteurs .v5-tete .btn { display: none; }
  .recit.anime .s-moteurs .v5-barres { gap: 10px; }
  .qui-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
  .qui-grille img { aspect-ratio: 16 / 10; max-height: 18svh; }
  .qui-grille h3 { margin-top: 8px; font-size: 0.9rem; }
  .qui-grille p { display: none; }
  .offres-v7 { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .offres-v7 a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; }
  .o-prix { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 1.4rem; }
  .o-txt { font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .recit.anime .s-offres .v5-intro { display: none; }
  .recit.anime .s-outils .v5-trois li { padding: 12px 0 2px; }
  .recit.anime .s-outils .v5-trois p { margin: 4px 0 6px; font-size: 0.9rem; }
}
@media (max-width: 999px) and (max-height: 700px) {
  .recit.anime .scene h2 { font-size: 1.45rem; }
  .recit.anime .s-moteurs .v5-barres li:nth-child(n+6) { display: none; }
  .recit.anime .s-outils .v5-trois p { display: none; }
}

@media (min-width: 1000px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .recit.anime .scene.transit:not(.s-carte) { filter: blur(calc(max(0, var(--d, 0)) * 9px)); }
}
/* tablette debout : plus grand, pour remplir l'écran */
@media (min-width: 700px) and (max-width: 999px) and (min-height: 900px) {
  .recit.anime .scene > .cadre { padding-left: 44px; padding-right: 44px; }
  .scene h2 { font-size: clamp(2rem, 5.4vw, 3rem); }
  .s-ouv h1, .s-ouv h1:lang(de) { font-size: clamp(3rem, 8.6vw, 4.6rem); }
  .scene .v5-intro, .v7-geant-l, .fuite-stat { font-size: 1.12rem; }
  .v7-geant { font-size: clamp(6rem, 17vw, 9rem); }
  .recit.anime .parc-canvas { height: 44svh; }
  .recit.anime .s-produit .v6-ecran { max-height: 40svh; }
  .recit.anime .s-produit .v6-ecran img { max-height: calc(40svh - 40px); }
  .recit.anime .s-produit .v6-points p { display: block; }
  .recit.anime .s-moteurs .v5-tete .v5-intro { display: block; }
  .recit.anime .s-moteurs .v5-barres { gap: 18px; }
  .qui-grille { gap: 18px; }
  .qui-grille img { max-height: 24svh; }
  .qui-grille h3 { font-size: 1.05rem; }
  .qui-grille p { display: block; }
  .offres-v7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .offres-v7 a { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 8px; }
  .o-prix { grid-row: auto; grid-column: auto; font-size: 1.9rem; }
  .o-txt { font-size: 0.92rem; -webkit-line-clamp: 4; }
  .recit.anime .s-offres .v5-intro { display: block; }
  .recit.anime .s-outils .v5-trois li { padding: 20px 0 6px; }
  .recit.anime .s-outils .v5-trois p { font-size: 1rem; }
}
/* petit téléphone : la scène des documents doit tenir sans rogner */
@media (max-width: 999px) and (max-height: 700px) {
  .recit.anime .s-fuite .fuite-jours-l, .recit.anime .s-fuite .fuite-exemple { display: none; }
  .recit.anime .s-fuite .fuite-stat { margin-top: 12px; font-size: 0.92rem; }
  .recit.anime .s-fuite .fuite-doc { padding: 12px 14px 12px; }
  .recit.anime .s-fuite .fuite-etat { margin: 10px 0 8px; }
  .recit.anime .s-fuite .fuite-faits-t { margin: 12px 0 8px; }
  .recit.anime .s-fuite .fuite-faits li { padding: 8px 12px; }
  .recit.anime .scene > .cadre { padding-top: 62px; padding-bottom: 14px; }
}

/* v8 : la carte compte trois pages (Europe, région, site). Les blocs de texte de chaque page se superposent et s'échangent. */
.recit.anime .s-carte .c3-etape { transition: none; will-change: opacity; }
.recit.anime .s-carte .c3-etape:not(.etape-active), .recit.anime .s-carte .c3-etape:not(.etape-active) * { pointer-events: none !important; }
.c3-site-lieu { margin: 0 0 8px; color: var(--c1); font-size: 0.86rem; font-weight: 600; }
.c3-site-etat { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--c0); font-size: 0.92rem; }
.c3-site-flotte { margin: 18px 0 0; }
.c3-site-flotte .flotte { width: 100%; max-width: 380px; height: auto; max-height: min(22svh, 200px); }
.c3-site-flotte figcaption { margin-top: 6px; color: var(--c1); font-size: 0.78rem; }
.c3-site-faits { margin-top: 14px; }
.c3-site-faits li { background: rgba(6, 26, 44, 0.72); }
.c3-site .btn { margin-top: 16px; }
.recit:not(.anime) .s-carte .c3-etape[data-etape="1"] { display: none; }
.recit:not(.anime) .s-carte .c3-site { position: static; margin-top: 24px; }
@media (min-width: 1000px) {
  .recit.anime .s-carte .c3-site { padding-top: 92px; }
  .recit.anime .s-carte .c3-site > * { max-width: min(33vw, 440px); }
  .recit.anime .s-carte .c3-site-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .recit.anime .s-carte .c3-site { bottom: 0; display: flex; flex-direction: column; padding-top: 76px; padding-bottom: 14px; }
  .recit.anime .s-carte .c3-site-bas { margin-top: auto; padding-top: 30px; background: linear-gradient(180deg, rgba(6, 26, 44, 0), rgba(6, 26, 44, 0.9) 26%); }
  .c3-site-flotte { margin: 0; display: flex; align-items: flex-end; gap: 12px; }
  .c3-site-flotte .flotte { width: 52%; max-height: 18svh; }
  .c3-site-flotte figcaption { flex: 1; margin: 0 0 4px; }
  .c3-site-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .c3-site-faits li { padding: 7px 10px; }
  .c3-site-faits li b { font-size: 0.98rem; }
  .c3-site .btn { margin-top: 10px; align-self: flex-start; }
}
@media (max-width: 999px) and (max-height: 700px) {
  .c3-site-etat { display: none; }
  .c3-site-flotte .flotte { max-height: 15svh; }
  .c3-site-faits li:nth-child(2) { display: none; }
}
.recit.anime .c3-site-faits li, .c3-site-faits li { opacity: 1; transform: none; animation: none; }
.s-carte .c3-etape h2 { font-size: clamp(1.5rem, min(2.7vw, 4.6svh), 2.5rem); }
.s-carte .c3-etape[data-etape="0"] h2 { font-size: clamp(1.6rem, min(3.4vw, 5.4svh), 3rem); }
@media (min-width: 1000px) and (max-height: 760px) {
  .c3-site-flotte .flotte { max-height: 18svh; }
  .c3-site-etat { margin-top: 8px; }
  .c3-site-faits li { padding: 8px 12px; }
}

/* v8 : le champ de blocs est une couche commune aux scènes « parc » et « moteurs » ; les blocs se rangent dans les barres */
.recit.anime .parc-canvas { position: absolute; inset: 0; top: 0; right: auto; width: 100%; height: 100%; z-index: 1; pointer-events: none; visibility: hidden; opacity: 0; }
.recit.anime .s-parc, .recit.anime .s-moteurs { background: transparent; }
.recit:not(.anime) > .recit-vue > .parc-canvas { display: none; }
.recit:not(.anime) .s-parc .parc-canvas { display: block; }
.recit.morph .s-moteurs .m-barre { height: 20px; border-radius: 4px; background: rgba(143, 198, 234, 0.05); box-shadow: inset 0 0 0 1px rgba(143, 198, 234, 0.12); }
.recit.morph .s-moteurs .m-barre span { visibility: hidden; }
@media (max-width: 999px) {
  .recit.anime .parc-canvas { top: 0; width: 100%; height: 100%; }
  .recit.morph .s-moteurs .m-barre { height: 18px; }
}
@media (max-width: 999px) and (max-height: 700px) {
  .recit.anime .s-carte .ouv-legende { padding-top: 72px; }
}

/* ------------------------------------------------------------------ v9 : un fil d'une page à l'autre */
/* titres : les mots entrent un à un à chaque arrivée sur la page */
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .mot { display: inline-block; }
  .recit.anime .joue .mot { animation: v9-mot 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both; animation-delay: calc(var(--w) * 55ms + 80ms); }
  @keyframes v9-mot { from { opacity: 0; transform: translateY(0.55em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
}
/* annonce de la page suivante */
.recit-suite { display: none; }
.recit.anime .recit-suite { position: absolute; left: 50%; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 18px;
  transform: translateX(-50%); border: 1px solid rgba(143, 198, 234, 0.24); border-radius: 999px; background: rgba(6, 26, 44, 0.74); color: var(--c0);
  font: inherit; font-size: 0.86rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color 0.2s ease; }
.recit.anime .recit-suite[hidden] { display: none; }
.recit-suite:hover, .recit-suite:focus-visible { border-color: rgba(255, 182, 37, 0.7); }
.recit-suite .rs-l { color: var(--c1); font-weight: 600; }
.recit-suite .rs-t { color: #fff; font-weight: 650; white-space: nowrap; }
.recit-suite i { width: 8px; height: 8px; margin: -4px 0 0 2px; border-right: 1.6px solid var(--lampe); border-bottom: 1.6px solid var(--lampe); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .recit-suite.neuf { animation: v9-suite 0.6s cubic-bezier(0.2, 0.75, 0.2, 1) 0.5s both; }
  .recit-suite i { animation: v9-chevron 1.8s ease-in-out 1.2s infinite; }
  @keyframes v9-suite { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes v9-chevron { 0%, 60%, 100% { transform: rotate(45deg) translate(0, 0); } 30% { transform: rotate(45deg) translate(3px, 3px); } }
}
.c3-note { margin: 8px 0 0; color: var(--c1); font-size: 0.8rem; }

/* page site : le parc qui s'allume, son compteur, les champs de la licence */
.c3-site-parc { display: flex; align-items: flex-end; gap: 18px; margin-top: 18px; }
.c3-site-parc .c3-site-flotte { flex: 0 1 300px; margin: 0; }
.c3-site-parc .flotte { width: 100%; max-width: 300px; max-height: min(20svh, 180px); }
.c3-site-compte { margin: 0 0 6px; }
.c3-site-compte b { display: block; color: var(--lampe); font-weight: 620; font-stretch: 72%; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 0.9; text-shadow: 0 0 40px rgba(255, 182, 37, 0.35); font-variant-numeric: tabular-nums; }
.c3-site-compte span { display: block; max-width: 11rem; margin-top: 6px; color: var(--c1); font-size: 0.78rem; line-height: 1.35; }
.c3-site-chiffres { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 14px 0 0; }
.c3-site-chiffres div { display: grid; gap: 1px; }
.c3-site-chiffres dt { color: var(--c1); font-size: 0.76rem; }
.c3-site-chiffres dd { margin: 0; color: #fff; font-weight: 700; font-size: 1.02rem; }
.c3-site-lic { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--n-trait); }
.c3-site-lic p { margin: 0 0 8px; color: var(--c1); font-size: 0.78rem; }
.c3-site-lic ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.c3-site-lic li { display: flex; align-items: center; gap: 8px; color: var(--c0); font-size: 0.82rem; line-height: 1.25; }
.c3-site-lic .badge-licence { flex: none; }
.c3-site-lien { display: inline-block; margin-top: 14px; color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: var(--lampe); text-underline-offset: 4px; }
@media (max-width: 999px) {
  .c3-site-parc { margin-top: 0; gap: 12px; }
  .c3-site-parc .flotte { max-height: 16svh; }
  .c3-site-chiffres { margin-top: 8px; gap: 4px 18px; }
  .c3-site-lic { margin-top: 8px; padding-top: 8px; }
  .c3-site-lic ul { gap: 5px 10px; }
  .c3-site-lic li { font-size: 0.76rem; }
  .c3-site-lien { margin-top: 8px; }
}
@media (max-width: 999px) and (max-height: 760px) {
  .c3-site-lic p, .c3-site-etat { display: none; }
  .c3-site-compte b { font-size: 2.2rem; }
}

/* mur des pièces sources : une tuile par document suivi chaque jour */
.mur { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; max-width: 440px; }
.mur .d { display: block; aspect-ratio: 3 / 4; border-radius: 2px 6px 2px 2px; background: rgba(231, 238, 245, 0.86); font-size: 0; font-style: normal; }
.mur .d.nv { background: rgba(143, 198, 234, 0.2); }
.mur .d.retire { position: relative; background: transparent; box-shadow: inset 0 0 0 1px rgba(238, 159, 159, 0.85); }
.mur .d.retire::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 1.4px; background: rgba(238, 159, 159, 0.9); transform: rotate(-52deg); }
.mur-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; color: var(--c1); font-size: 0.78rem; }
.mur-legende span::before { content: ""; display: inline-block; width: 9px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 1px 3px 1px 1px; }
.mur-legende .ok::before { background: rgba(231, 238, 245, 0.86); }
.mur-legende .retire::before { box-shadow: inset 0 0 0 1px rgba(238, 159, 159, 0.85); }
.mur-legende .nv::before { background: rgba(143, 198, 234, 0.2); }
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .s-fuite.joue .mur .d { animation: v9-tuile 0.45s ease calc(var(--j) * 5ms) both; }
  .recit.anime .s-fuite.joue .mur .d.retire { animation: v9-tuile 0.45s ease calc(var(--j) * 5ms) both, v9-retire 0.55s ease calc(1100ms + var(--r) * 70ms) both; }
  .recit.anime .s-fuite.joue .mur .d.retire::after { animation: v9-trait 0.4s ease calc(1250ms + var(--r) * 70ms) both; }
  @keyframes v9-tuile { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
  @keyframes v9-retire { from { background: rgba(231, 238, 245, 0.86); box-shadow: inset 0 0 0 1px rgba(238, 159, 159, 0); } 40% { background: rgba(238, 159, 159, 0.9); } to { background: transparent; box-shadow: inset 0 0 0 1px rgba(238, 159, 159, 0.85); } }
  @keyframes v9-trait { from { transform: rotate(-52deg) scaleX(0); } to { transform: rotate(-52deg) scaleX(1); } }
}
.fuite-stat b { font-variant-numeric: tabular-nums; }
@media (max-width: 999px) {
  .mur { max-width: none; gap: 4px; }
  .recit.anime .s-fuite .fuite-visuel { margin-top: 4px; }
}
/* téléphones : l'annonce de la page suivante seulement s'il y a la place */
@media (max-width: 699px) {
  .recit.anime .recit-suite { bottom: 10px; padding: 7px 13px 7px 14px; font-size: 0.8rem; }
}
@media (max-width: 699px) and (min-height: 741px) {
  .recit.anime .scene > .cadre { padding-bottom: 58px; }
  .recit.anime .s-carte .h5-outils, .recit.anime .s-carte .c3-site { padding-bottom: 54px; }
  .recit.anime .s-parc > .cadre { padding-bottom: calc(7svh + 40px); }
}
@media (max-width: 699px) and (max-height: 740px) {
  .recit.anime .recit-suite { display: none; }
}

@media (max-width: 699px) {
  .mur { grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 3px; }
  .recit.anime .s-moteurs .m-proj { display: none; }
  .recit.anime .s-moteurs .v5-barres { gap: 8px; }
  .recit.anime .s-moteurs .v5-note { margin-top: 12px; font-size: 0.84rem; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .mur { max-width: 520px; grid-template-columns: repeat(17, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ v10 : besoins par métier, puis l'essai (les prix restent sur la page Prix) */
.s-besoins { background: radial-gradient(60% 70% at 50% 100%, rgba(255, 182, 37, 0.07), rgba(6, 26, 44, 0) 70%), var(--n0); }
.besoins { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.besoins li { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--n-trait); border-radius: 16px; background: #0A223A; }
.besoins picture, .besoins img { display: block; width: 100%; }
.besoins img { aspect-ratio: 16 / 9; max-height: 22svh; object-fit: cover; filter: saturate(0.75) brightness(0.62); }
.b-corps { position: relative; margin-top: -42px; padding: 0 18px 18px; }
.b-chiffre { margin: 0; color: var(--lampe); font-weight: 620; font-stretch: 72%; font-size: clamp(2.2rem, min(3.4vw, 6svh), 3.2rem); line-height: 0.95; text-shadow: 0 0 34px rgba(255, 182, 37, 0.35), 0 2px 18px rgba(6, 26, 44, 0.9); font-variant-numeric: tabular-nums; }
.b-unite { margin: 4px 0 0; color: var(--c0); font-size: 0.8rem; }
.besoins h3 { margin: 14px 0 0; color: #fff; font-size: 1rem; line-height: 1.25; }
.b-besoin { margin: 6px 0 0; color: var(--c1); font-size: 0.88rem; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .recit.anime .s-besoins .besoins li { opacity: 0; transform: translateY(26px); }
  .recit.anime .s-besoins.joue .besoins li { animation: v10-carte 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) forwards; }
  .recit.anime .s-besoins.joue .besoins li:nth-child(2) { animation-delay: 0.12s; }
  .recit.anime .s-besoins.joue .besoins li:nth-child(3) { animation-delay: 0.24s; }
  .recit.anime .s-besoins.joue .besoins li:nth-child(4) { animation-delay: 0.36s; }
  @keyframes v10-carte { to { opacity: 1; transform: none; } }
}
.s-essai .actions { margin-top: 22px; }
.s-essai .v5-trois { margin-top: 30px; }
.essai-tarifs { margin: 18px 0 0; font-size: 0.86rem; }
.essai-tarifs a { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 999px) {
  .besoins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .besoins img { max-height: 11svh; }
  .b-corps { margin-top: -30px; padding: 0 12px 12px; }
  .b-chiffre { font-size: 1.9rem; }
  .b-unite { font-size: 0.72rem; }
  .besoins h3 { margin-top: 8px; font-size: 0.86rem; }
  .b-besoin { display: none; }
  .recit.anime .s-besoins .v5-intro { font-size: 0.9rem; }
  .recit.anime .s-essai .v5-trois p { display: none; }
  .recit.anime .s-essai .v5-trois { margin-top: 18px; }
}
@media (min-width: 700px) and (max-width: 999px) and (min-height: 900px) {
  .b-besoin { display: block; }
  .besoins img { max-height: 16svh; }
}
@media (max-width: 999px) and (max-height: 700px) {
  .recit.anime .s-besoins .v5-intro { display: none; }
}