/* Épave Enlèvement Gratuit, « la route du Sud » (nov. 2026) : photos du Sud, bleu mer, route ocre soleil, bornes, coins carrés. */
:root {
  --mer: #0b4d78; --mer-nuit: #0a3b5c; --soleil: #e9a21b; --encre: #13212e; --encre-douce: #4a5866; --ciel: #eef4f8;
  --trait: #d3dee7; --controle: #78909f;
  --police: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --marge: 20px; --large: 1200px; --tete-h: 64px;
  --route: var(--mer) repeating-linear-gradient(90deg, var(--soleil) 0 9px, transparent 9px 18px) 0 50% / 100% 2px no-repeat;
  --route-v: var(--mer) repeating-linear-gradient(180deg, var(--soleil) 0 8px, transparent 8px 16px) 50% 0 / 2px 100% no-repeat;
  --route-vide: var(--trait) repeating-linear-gradient(90deg, #fff 0 9px, transparent 9px 18px) 0 50% / 100% 2px no-repeat;
}
@media (min-width: 48em) { :root { --marge: 32px; --tete-h: 72px; } }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (min-width: 48em) { html { scroll-padding-top: calc(var(--tete-h) + 28px); } }
body { margin: 0; padding-bottom: 80px; background: #fff; color: var(--encre); font: 400 1.0625rem/1.62 var(--police); font-kerning: normal; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--mer); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--mer-nuit); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--mer); outline-offset: 2px; }
h1, h2, h3 { margin: 0; color: var(--encre); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(1.875rem, 1.35rem + 1.75vw, 2.644rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-weight: 700; font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.206rem); line-height: 1.12; letter-spacing: -.015em; }
h3 { font-weight: 600; font-size: 1.275rem; line-height: 1.3; letter-spacing: -.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 700; }
.chiffre-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--encre); color: #fff; font-weight: 600; }
.saut:focus { top: 12px; color: #fff; }
.cadre { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.court { display: none; }

/* == actions : boutons bleus, coins à 4 px == */
.action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 20px;
  border: 2px solid var(--mer); border-radius: 4px; font: 700 1rem/1.15 var(--police); text-align: center; text-decoration: none; cursor: pointer; }
.action svg { flex: none; }
.action--mer { background: var(--mer); color: #fff; }
.action--mer:hover { background: var(--mer-nuit); border-color: var(--mer-nuit); color: #fff; }
.action--trait { background: #fff; color: var(--mer); }
.action--trait:hover { background: var(--ciel); color: var(--mer-nuit); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 39.99em) { .actions .action { flex: 1 1 auto; } }

/* == en-tête : blanc, collant dès la tablette, filet soleil == */
.tete { position: relative; z-index: 30; background: #fff; border-bottom: 3px solid var(--soleil); }
.tete__barre { display: flex; align-items: center; gap: 12px; min-height: var(--tete-h); }
.tete__barre > * { flex-shrink: 0; }
.enseigne { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--encre); font-weight: 800; font-size: .9375rem; line-height: 1.08; letter-spacing: -.01em; text-decoration: none; }
.enseigne:hover { color: var(--encre); }
.enseigne svg { width: 38px; height: 38px; flex: none; }
.enseigne__nom > span { display: block; white-space: nowrap; }
.ouvre-menu { order: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px;
  border: 1px solid var(--controle); border-radius: 4px; background: #fff; color: var(--encre); font: 600 .9375rem/1 var(--police); cursor: pointer; }
.ouvre-menu:hover { border-color: var(--mer); color: var(--mer); }
.nav-principale { display: none; }
.nav-principale ul { list-style: none; margin: 0; padding: 0; }
.nav-principale a { color: var(--encre); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-principale a:hover { color: var(--mer); text-decoration: underline 2px; text-underline-offset: 6px; }
.nav-principale a[aria-current="page"] { color: var(--mer); text-decoration: underline 3px var(--soleil); text-underline-offset: 6px; }
.nav-ouverte .nav-principale { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 3px); background: #fff; border-bottom: 3px solid var(--soleil); }
.nav-ouverte .nav-principale ul { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: 4px 0 16px; }
.nav-ouverte .nav-principale a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--trait); font-size: 1.0625rem; }
.tete-tel, .tete-demande { display: none; }
.tete-tel { align-items: center; gap: 8px; color: var(--encre); text-decoration: none; }
.tete-tel:hover { color: var(--mer); }
.tete-tel svg { color: var(--mer); flex: none; }
.tete-tel__texte { display: grid; line-height: 1.15; }
.tete-tel .chiffre-tel { font-weight: 700; font-size: 1.0625rem; }
.tete-tel__dispo { font-size: .75rem; color: var(--encre-douce); white-space: nowrap; }
.tete-demande { min-height: 44px; padding: 9px 16px; font-size: .9375rem; white-space: nowrap; }
@media (min-width: 48em) {
  .tete { position: sticky; top: 0; }
  .tete__barre { gap: 20px; }
  .enseigne { font-size: 1rem; }
  .enseigne svg { width: 40px; height: 40px; }
  .tete-tel, .tete-demande { display: inline-flex; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .ouvre-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
/* barre complète quand elle tient (1 176 px utiles, cadre de 1 200 px dès 1 264 px) ; avant, menu en panneau */
@media (min-width: 79em) {
  .ouvre-menu { display: none; }
  .nav-principale, .nav-ouverte .nav-principale { display: block; position: static; margin-right: auto; border: 0; background: none; }
  .nav-principale ul, .nav-ouverte .nav-principale ul { display: flex; gap: 20px; width: auto; padding: 0; }
  .nav-principale a, .nav-ouverte .nav-principale a { display: inline-flex; align-items: center; min-height: 44px; border: 0; font-size: .9375rem; }
  .enseigne { margin-right: 12px; }
}
html:not(.js) .ouvre-menu { display: none; }
html:not(.js) .tete__barre { flex-wrap: wrap; }
html:not(.js) .nav-principale { display: block; order: 4; flex-basis: 100%; padding-bottom: 8px; }
html:not(.js) .nav-principale ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* == la borne : corps blanc, chapeau soleil, code en chiffres tabulaires == */
.borne, .etapes > li::before, .eeg-steps__item::before {
  display: inline-grid; place-items: end center; flex: none; width: 28px; height: 34px; padding-bottom: 5px;
  border: 1.5px solid var(--encre); border-radius: 14px 14px 2px 2px;
  background: linear-gradient(var(--cap, var(--soleil)) 0 11px, var(--corps, #fff) 11px);
  color: var(--chiffre, var(--encre)); font: 600 .75rem/1 var(--police); font-variant-numeric: tabular-nums; }
.depart { width: 18px; height: 18px; border: 4px solid var(--mer-nuit); border-radius: 50%; background: #fff; }

/* == itinéraire : route bleue jusqu’à l’étape courante, claire au-delà == */
.itineraire { overflow-x: auto; direction: rtl; scrollbar-width: none; margin: -4px; padding: 4px; }
.itineraire::-webkit-scrollbar { display: none; }
.itineraire ol { position: relative; direction: ltr; display: flex; width: max-content; min-width: 100%; margin: 0; padding: 0; list-style: none; }
.itineraire ol::before, .etape::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 10px; }
.itineraire ol::before { left: 9px; background: var(--route-vide); }
.etape { position: relative; flex: none; max-width: 15rem; padding-right: 52px; }
.etape:last-child { padding-right: 12px; }
.etape::before { background: var(--route); }
.etape:first-child::before { left: 9px; }
.etape:last-child::before { right: auto; width: 14px; }
.etape:first-child:last-child::before { display: none; }
.etape > a { position: relative; display: grid; grid-template-rows: 34px 10px auto; justify-items: start; color: var(--mer); text-decoration: none; }
.etape .borne { grid-row: 1; align-self: end; }
.etape .depart { grid-row: 2; align-self: center; position: relative; }
.etape-texte { grid-row: 3; display: grid; gap: 1px; padding-top: 10px; line-height: 1.3; }
.etape-type { font-size: .8125rem; color: var(--encre-douce); }
.etape-nom { font-size: .8875rem; font-weight: 600; text-decoration: underline 1px; text-underline-offset: .2em; }
.etape > a:hover .etape-nom { text-decoration-thickness: 2px; }
.etape > a[aria-current="page"] { color: var(--encre); }
.etape > a[aria-current="page"] .etape-nom { text-decoration: none; font-weight: 700; }
.etape > a[aria-current="page"] .borne { --corps: var(--mer); --chiffre: #fff; }
@media (max-width: 39.99em) {
  .etape { max-width: 9.5rem; padding-right: 22px; }
  .etape-type { display: none; }
  .etape--accueil .etape-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .etape-nom .long, .onglet-nom .long { display: none; }
  .etape-nom .court, .onglet-nom .court { display: inline; }
}

/* == tête des pages intérieures == */
.amorce { padding: 20px 0 40px; }
.amorce h1 { max-width: 26ch; margin-top: 28px; }
.chapeau { max-width: 44rem; margin: 16px 0 0; font-size: clamp(1.125rem, 1.06rem + .3vw, 1.275rem); line-height: 1.5; }
.maj { margin: 12px 0 0; font-size: .9375rem; color: var(--encre-douce); }
.atouts, .garanties, .conditions-cle ul, .memo__conditions { list-style: none; padding: 0; display: grid; font-size: .9375rem; }
.atouts li, .garanties li, .conditions-cle li, .memo__conditions li { display: flex; gap: 10px; align-items: flex-start; }
.atouts svg, .garanties svg, .conditions-cle svg, .memo__conditions svg { flex: none; color: var(--mer); }
.atouts { gap: 8px; margin: 24px 0 0; line-height: 1.4; color: var(--encre-douce); }
@media (min-width: 48em) { .atouts { display: flex; flex-wrap: wrap; gap: 10px 28px; } }
@media (min-width: 64em) { .amorce { padding: 32px 0 56px; } }

/* == accueil : photo pleine largeur, panneau blanc qui la chevauche == */
.ouverture__photo { margin: 0; aspect-ratio: 4 / 3; background: var(--ciel); }
.ouverture__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ouverture__grille { position: relative; display: grid; gap: 28px; margin-top: -48px; }
.ouverture__panneau { padding: 24px 20px 28px; background: #fff; box-shadow: 0 28px 56px -32px rgba(10, 59, 92, .55), 0 2px 8px rgba(10, 59, 92, .08); }
.ouverture h1 { font-size: clamp(2.125rem, 1.25rem + 2.6vw, 3.175rem); line-height: 1.05; }
.ouverture .chapeau { margin-top: 18px; font-size: 1.0625rem; line-height: 1.6; }
.garanties { gap: 10px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--trait); line-height: 1.4; }
.conditions-cle { padding: 24px 22px 26px; background: var(--ciel); border-top: 4px solid var(--soleil); }
.conditions-cle h2 { margin-bottom: 14px; font-size: 1.275rem; line-height: 1.25; }
.conditions-cle ul { gap: 10px; margin: 0 0 14px; line-height: 1.45; }
.conditions-cle svg { margin-top: 1px; }
.conditions-cle p { margin: 0; font-size: .875rem; color: var(--encre-douce); }
@media (min-width: 48em) {
  .ouverture__photo { aspect-ratio: auto; height: clamp(360px, 52vw, 480px); }
  .ouverture__grille { margin-top: -96px; }
  .ouverture__panneau { padding: 36px 40px; }
  .ouverture .chapeau { font-size: 1.125rem; }
}
@media (min-width: 64em) {
  .ouverture__photo { height: clamp(400px, 52vh, 600px); }
  .ouverture__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: -120px; }
  .ouverture__panneau { grid-column: 1 / span 7; padding: 40px 48px; }
  .conditions-cle { grid-column: 9 / span 4; align-self: start; margin-top: 168px; }
}

/* == tronçons (sections) == */
.troncon { padding: 48px 0; }
.troncon--ciel { background: var(--ciel); }
.troncon > .cadre > h2 { max-width: 28ch; }
.intro { max-width: 62ch; margin: 12px 0 0; }
.deux-colonnes { display: grid; gap: 40px; }
.qui-fait-quoi p strong { color: var(--mer); }
@media (min-width: 64em) {
  .troncon { padding: 80px 0; }
  .troncon--apres-ouverture { padding-top: 72px; }
  .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
}

/* == la route des régions (accueil) : elle se remplit jusqu’à la borne choisie == */
.regions-route { margin-top: 36px; }
.onglets { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onglets::before, .onglets::after { content: ""; position: absolute; left: 0; top: 44px; height: 10px; }
.onglets::before { right: 0; background: var(--route-vide); }
.onglets::after { width: calc(var(--plein, 0%) + 18px); background: var(--route); }
.onglets:has(> :nth-child(2)[aria-selected="true"]) { --plein: 25%; }
.onglets:has(> :nth-child(3)[aria-selected="true"]) { --plein: 50%; }
.onglets:has(> :nth-child(4)[aria-selected="true"]) { --plein: 75%; }
@media (prefers-reduced-motion: no-preference) { .onglets::after { transition: width .3s cubic-bezier(.3, .7, .3, 1); } }
.onglet { position: relative; z-index: 1; display: grid; grid-template-rows: 44px 10px auto; justify-items: start; min-width: 0; padding: 0 10px 4px 0;
  border: 0; background: none; color: var(--mer); font: inherit; text-align: left; cursor: pointer; }
.onglet .borne { width: 36px; height: 44px; padding-bottom: 7px; border-radius: 18px 18px 2px 2px; font-size: .9375rem;
  background: linear-gradient(var(--cap, var(--soleil)) 0 14px, var(--corps, #fff) 14px); }
.onglet .borne { grid-row: 1; align-self: end; }
.onglet-nom { grid-row: 3; padding-top: 12px; font-weight: 700; font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem); line-height: 1.25;
  text-decoration: underline 1px; text-underline-offset: .2em; overflow-wrap: break-word; }
.onglet:hover .onglet-nom { text-decoration-thickness: 2px; }
.onglet[aria-selected="true"] { color: var(--encre); cursor: default; }
.onglet[aria-selected="true"] .onglet-nom { text-decoration: none; }
.onglet[aria-selected="true"] .borne { --corps: var(--mer); }
.volets { margin-top: 36px; }
.volet + .volet { margin-top: 48px; }
.volet-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); }
.volet-tete h3 { font-size: 1.5rem; font-weight: 700; }
.volet-tete p { margin: 0; font-size: .9375rem; color: var(--encre-douce); }
.liste-deps { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 32px; }
.liste-deps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.liste-deps .borne { grid-row: span 2; }
.dep-nom { justify-self: start; margin: -10px 0; padding: 10px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.dep-villes { margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--encre-douce); }
@media (min-width: 40em) { .liste-deps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .liste-deps--large { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* == étapes : route verticale (colonne) ou horizontale (accueil), bornes numérotées == */
.etapes { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: etape; }
.etapes > li { counter-increment: etape; position: relative; min-height: 72px; padding: 4px 0 28px 50px; }
.etapes > li::before { content: counter(etape); position: absolute; left: 0; top: 0; font-size: .8125rem; font-weight: 700; }
.etapes > li::after { content: ""; position: absolute; left: 9px; top: 34px; bottom: 0; width: 10px; background: var(--route-v); }
.etapes > li:last-child { padding-bottom: 0; }
.etapes > li:last-child::after { bottom: auto; height: 22px; }
.etapes h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.etapes p { margin: 0; }
@media (min-width: 64em) {
  .etapes--route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
  .etapes--route > li { min-height: 0; padding: 66px 40px 0 0; }
  .etapes--route > li::before { width: 36px; height: 44px; padding-bottom: 7px; border-radius: 18px 18px 2px 2px; font-size: .9375rem;
    background: linear-gradient(var(--soleil) 0 14px, #fff 14px); }
  .etapes--route > li::after, .etapes--route > li:last-child::after { left: 0; right: 0; top: 44px; bottom: auto; width: auto; height: 10px; background: var(--route); }
  .etapes--route > li:last-child::after { right: 45%; }
  .etapes--route h3 { font-size: 1.275rem; }
}

/* == photographies == */
.panorama { margin: 0; background: var(--ciel); }
.panorama img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; object-position: var(--cadrage, 50% 58%); }
.panorama--basse img { height: clamp(180px, 26vw, 320px); }
.photo-colonne { margin: 0; }
.photo-colonne img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* == services en cartes photo, guides en rangées == */
.cartes-services { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px 24px; }
.carte-service { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-content: start; color: var(--encre); text-decoration: none; }
.carte-service img { grid-row: span 2; width: 112px; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-service strong { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--mer); }
.carte-service span, .renvois span { font-size: .9375rem; line-height: 1.5; color: var(--encre-douce); }
.carte-service span { margin-top: 4px; }
.carte-service:hover { color: var(--encre); }
.carte-service:hover strong { text-decoration: underline 2px; text-underline-offset: .2em; }
.cartes-services__guides { padding: 20px 22px 4px; background: var(--ciel); border-top: 4px solid var(--soleil); }
.cartes-services__titre { margin: 0; font-weight: 700; font-size: 1.275rem; }
.cartes-services__guides .renvois { margin: 8px 0 0; border-top: 0; }
.cartes-services__guides .renvois li:last-child { border-bottom: 0; }
@media (min-width: 40em) {
  .cartes-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-service { grid-template-columns: minmax(0, 1fr); }
  .carte-service img { grid-row: auto; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 14px; }
  .carte-service strong { font-size: 1.275rem; }
  .cartes-services--colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartes-services--colonne:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-services--colonne .carte-service strong { font-size: 1.0625rem; }
  .cartes-services--colonne .carte-service img { margin-bottom: 10px; }
}
@media (min-width: 64em) { .cartes-services:not(.cartes-services--colonne) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin-top: 40px; } }
.renvois { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.renvois > li { border-bottom: 1px solid var(--trait); }
.renvois a { display: grid; gap: 4px; padding: 14px 0; color: var(--encre); text-decoration: none; }
.renvois strong { font-weight: 600; color: var(--mer); text-decoration: underline 1px; text-underline-offset: .2em; }
.renvois a:hover strong { text-decoration-thickness: 2px; }
.cartes-services--colonne + .renvois { margin-top: 32px; }

/* == pages intérieures : colonne de lecture (8) et mémo collant (4) == */
.corps { display: grid; gap: 40px; padding: 40px 0 56px; }
.colonne { min-width: 0; max-width: 43rem; }
.aparte { display: none; min-width: 0; }
.colonne > * + * { margin-top: 56px; }
.colonne > * + .lien-contexte { margin-top: 20px; }
@media (min-width: 64em) {
  .corps { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 24px; padding: 64px 0 88px; }
  .aparte { display: block; }
}
:where(.lecture) h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 1.25rem + .9vw, 1.8375rem); line-height: 1.15; }
:where(.lecture) * + h2 { margin-top: 48px; }
:where(.lecture) h3 { margin: 32px 0 8px; }
:where(.lecture) :is(p, ul, ol, table) { margin-top: 0; margin-bottom: 16px; }
:where(.lecture) > :last-child, :where(.lecture) section > :last-child { margin-bottom: 0; }
:where(.lecture) ul:not([class]) { list-style: none; padding: 0; }
:where(.lecture) ul:not([class]) > li { position: relative; margin: 8px 0; padding-left: 24px; }
:where(.lecture) ul:not([class]) > li::before { content: ""; position: absolute; left: 3px; top: .64em; width: 7px; height: 7px; background: var(--soleil); }
:where(.lecture) ol:not([class]) { padding-left: 24px; }
:where(.lecture) ol:not([class]) > li { margin: 8px 0; padding-left: 4px; }
:where(.lecture) ol:not([class]) > li::marker { color: var(--mer); font-weight: 700; }
.lien-contexte { max-width: 66ch; }
.contexte-local { padding-left: 20px; border-left: 3px solid var(--soleil); }
.en-bref { padding: 24px 24px 8px; background: var(--ciel); border-top: 4px solid var(--soleil); }
.en-bref h2 { margin-bottom: 12px; font-size: 1.275rem; }
.references { padding-top: 24px; border-top: 1px solid var(--trait); font-size: .9375rem; }
.references h2 { margin-bottom: 8px; font-size: 1.125rem; }
.note { font-size: .875rem; line-height: 1.5; color: var(--encre-douce); }
/* tableaux : chiffres tabulaires, en-têtes bleus, filets */
:where(.lecture) table, .tableau { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
:where(.lecture) :is(th, td), .tableau :is(th, td) { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
:where(.lecture) th, .tableau th { border-bottom: 2px solid var(--mer); color: var(--mer); font-weight: 700; vertical-align: bottom; }
.tableau .n { text-align: right; }
.defile { overflow-x: auto; margin: 0 0 16px; }
.tableau { min-width: 34rem; margin: 0; }
/* le mémo : conditions, appel, lien vers le formulaire */
.memo { position: sticky; top: calc(var(--tete-h) + 32px); max-width: 21.5rem; margin-left: auto; padding: 24px 24px 18px; background: var(--ciel); border-top: 4px solid var(--soleil); }
.memo__titre { margin: 0 0 12px; font-weight: 700; font-size: 1.275rem; line-height: 1.2; }
.memo__conditions { gap: 8px; margin: 0 0 20px; }
.memo__appel { margin: 0 0 8px; font-size: .875rem; font-weight: 600; }
.memo__tel { width: 100%; justify-content: flex-start; padding: 9px 16px; }
.memo__tel-texte { display: grid; text-align: left; line-height: 1.2; }
.memo__tel .chiffre-tel { font-size: 1.1875rem; }
.memo__dispo { font-size: .8125rem; font-weight: 500; }
.memo__note { margin: 12px 0 2px; font-size: .875rem; line-height: 1.5; color: var(--encre-douce); }
.memo__lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; }

/* == FAQ en accordéons == */
.reponses > h2 { margin-bottom: 20px; }
.reponse { border-bottom: 1px solid var(--trait); }
.reponse:first-of-type { border-top: 1px solid var(--trait); }
.reponse > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer; }
.reponse > summary::-webkit-details-marker { display: none; }
.reponse > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border: solid var(--mer); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.reponse[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.reponse > summary h3 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.reponse > summary:hover h3 { color: var(--mer); }
.reponse > p { max-width: 66ch; margin: 0 0 20px; }
@media (min-width: 64em) {
  .cadre--faq .reponses { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 24px; align-items: start; }
  .cadre--faq .reponses > h2 { grid-row: 1 / span 12; max-width: 10ch; }
  .cadre--faq .reponse { grid-column: 2; }
}

/* == chiffres ADEME, voisines, communes == */
.origines { display: grid; gap: 10px; margin: 20px 0 14px; }
.origine { display: grid; grid-template-columns: minmax(0, 13rem) 1fr 3.25rem; gap: 12px; align-items: center; font-size: .9375rem; line-height: 1.3; }
.origine-barre { height: 10px; background: var(--ciel); }
.origine-barre span { display: block; width: var(--v); height: 100%; background: var(--mer); }
.origine-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 34em) { .origine { grid-template-columns: 1fr 3.25rem; row-gap: 6px; } .origine-barre { grid-column: 1 / -1; grid-row: 2; } }
.voisins, .communes { list-style: none; margin: 16px 0 0; padding: 0; column-gap: 32px; }
.voisins { margin-bottom: 20px; columns: 2 15rem; }
.voisins li { break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.voisins a, .communes a { padding-block: 9px; }
.voisins .km { color: var(--encre-douce); font-size: .9375rem; white-space: nowrap; }
.voisins .km, .communes .cp { font-variant-numeric: tabular-nums; }
.communes { columns: 3 11rem; }
.communes li { break-inside: avoid; padding: 9px 0; line-height: 1.4; }
.communes .cp { color: var(--encre-douce); font-size: .875rem; }
.communes--grandes { margin-top: 28px; columns: 4 13rem; }

/* == bande « demande » : le formulaire, composant central == */
.demande { padding: 40px 0; background: var(--ciel); }
.eeg-form { --lk-font: var(--police); --lk-ink: var(--encre); --lk-muted: var(--encre-douce); --lk-line: var(--controle); --lk-bg: #fff;
  --lk-surface: var(--ciel); --lk-accent: var(--mer); --lk-accent-ink: #fff; --lk-cta: var(--mer); --lk-cta-ink: #fff; --lk-chip-on: var(--mer);
  --lk-chip-on-ink: #fff; --lk-focus: var(--mer); --lk-error: #b3261e; --lk-ok: var(--mer); --lk-radius: 4px; --lk-radius-chip: 4px;
  --lk-gap: 18px; --lk-pad: 24px 20px; max-width: none; border: 0; border-radius: 0; font-size: 1rem; line-height: 1.5; }
.eeg-form__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8375rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.eeg-form__intro { margin-top: 12px; color: var(--encre-douce); }
.eeg-form__intro a { color: var(--mer); font-weight: 700; font-variant-numeric: tabular-nums; }
.eeg-form__intro a:hover { color: var(--mer-nuit); }
@media (min-width: 48em) { .eeg-form { --lk-pad: 36px 40px; } }
@media (min-width: 64em) {
  .demande { padding: 80px 0; }
  .demande .eeg-form { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 24px; row-gap: 0; align-items: start; padding: 0; background: none; }
  .demande .eeg-form > * { grid-column: 2; }
  .demande .eeg-form > :is(.eeg-form__head, .eeg-form__title) { grid-column: 1; grid-row: 1 / span 9; position: sticky; top: calc(var(--tete-h) + 32px); padding-right: 32px; }
  .demande :is(.eeg-step, .eeg-done) { padding: 40px 44px; background: #fff; }
  .demande .eeg-status { padding: 12px 0 0; }
}
/* étapes du formulaire : courte route, borne bleue = étape en cours */
.eeg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; font-size: .8125rem; }
.eeg-steps__item { position: relative; padding: 56px 8px 0 0; border: 0; color: var(--encre-douce); font-weight: 600; line-height: 1.25; }
.eeg-steps__item::before { content: counter(lk); position: absolute; left: 0; top: 0; --cap: var(--trait); }
.eeg-steps__item::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 10px; background: var(--route-vide); }
.eeg-steps__item[data-done="true"]::after { background: var(--route); }
.eeg-steps__item[data-done="true"]::before { --cap: var(--soleil); }
.eeg-steps__item[aria-current="step"] { color: var(--encre); font-weight: 700; }
.eeg-steps__item[aria-current="step"]::before { --cap: var(--soleil); --corps: var(--mer); --chiffre: #fff; }
.eeg-step__title { float: left; width: 100%; font-size: 1.275rem; font-weight: 700; line-height: 1.3; }
.eeg-label { font-size: .9375rem; }
.eeg-grid2 { align-items: start; }
.eeg-input { font-size: 1.0625rem; }
.eeg-input:focus { border-color: var(--mer); background: #fff; }
.eeg-input::placeholder { color: #5b6b7c; }
:is(.eeg-input, .eeg-btn, .eeg-geoloc, .eeg-more > summary):focus-visible, .eeg-chip input:focus-visible + .eeg-chip__label,
.eeg-photos__drop:focus-within, .eeg-tile:has(input:focus-visible) { outline-width: 2px; outline-offset: 2px; }
.eeg-input--plate, .eeg-input--plate:focus { padding-left: 34px; border: 2px solid var(--encre); background: linear-gradient(90deg, var(--mer) 0 22px, #fff 22px);
  font-weight: 700; font-size: 1.125rem; letter-spacing: .08em; }
.eeg-tile:hover, .eeg-chip:hover .eeg-chip__label { border-color: var(--mer); }
.eeg-tile__icon { border-radius: 0; }
.eeg-tile:has(input:checked) .eeg-tile__icon { box-shadow: inset 0 4px 0 var(--soleil); }
.eeg-tiles--states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eeg-tiles--states .eeg-tile { padding: 12px 6px 10px; }
.eeg-tiles--states .eeg-tile__label { font-size: .9375rem; }
@media (min-width: 30em) { .eeg-tiles--states { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eeg-chip__label { display: flex; align-items: center; }
.eeg-geoloc { color: var(--mer); }
.eeg-geoloc:hover { border-color: var(--mer); background: var(--ciel); }
.eeg-addr__list { box-shadow: none; }
.eeg-alert, .eeg-photos__grid figure { border-radius: 0; }
.eeg-photos__drop { border-color: var(--mer); color: var(--mer); }
.eeg-photos__drop:hover { background: #fff; }
.eeg-more > summary::before { border-radius: 2px; }
.eeg-btn { padding-inline: 22px; border-radius: 4px; }
.eeg-btn--primary { border-color: var(--mer); }
.eeg-btn--primary:hover { background: var(--mer-nuit); border-color: var(--mer-nuit); }
.eeg-btn--secondary, .eeg-btn--ghost { color: var(--mer); }
.eeg-btn--secondary { border-color: var(--mer); }
.eeg-btn--secondary:hover, .eeg-btn--ghost:hover { background: var(--ciel); border-color: var(--mer); }
.eeg-summary, .eeg-hint, .eeg-privacy, .eeg-fineprint, .eeg-reassure { font-size: .875rem; line-height: 1.5; }
.eeg-reassure { gap: 6px; }
.eeg-privacy a { color: var(--mer); }
.eeg-done__title { font-size: 1.5rem; }

/* == secteurs == */
.filtre { max-width: 30rem; margin-top: 28px; }
.filtre label { display: block; margin-bottom: 6px; font-weight: 600; }
.filtre input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--controle); border-radius: 4px; background: var(--ciel); color: var(--encre); font: 400 1.0625rem/1.3 var(--police); }
.filtre input:focus { border-color: var(--mer); background: #fff; }
.filtre input::placeholder { color: #5b6b7c; }
.filtre p { margin: 8px 0 0; font-size: .875rem; color: var(--encre-douce); }
.secteurs { padding-bottom: 72px; }
.secteurs > .lien-contexte { margin: 32px 0 0; }
.secteur-region { padding-top: 48px; }
.secteur-region > h2 { padding-bottom: 12px; border-bottom: 2px solid var(--encre); }
.secteur-region > h2 a { color: var(--encre); }
.secteur-dep { display: grid; gap: 8px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.secteur-dep h3 { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1.125rem; font-weight: 700; }
.secteur-dep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 20px; }
.secteur-dep li a { display: inline-block; padding: 10px 0; line-height: 1.4; }
@media (min-width: 64em) { .secteur-dep { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; } }
.aucun { margin-top: 24px; font-weight: 600; }

/* == pied de page : bleu nuit, filet soleil == */
.socle { padding: 56px 0 32px; background: var(--mer-nuit); color: #fff; border-top: 3px solid var(--soleil); font-size: .9375rem; line-height: 1.55; }
.socle a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.socle a:hover { color: #fff; text-decoration-color: #fff; }
.socle :focus-visible { outline-color: #fff; }
.socle__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.socle__marque { grid-column: 1 / -1; }
.socle h2 { margin-bottom: 4px; color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.socle ul { list-style: none; margin: 0; padding: 0; }
.socle li a { display: inline-block; padding: 10px 0; line-height: 1.4; }
.socle__enseigne { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-weight: 800; font-size: 1.125rem; line-height: 1.15; }
.socle__enseigne svg { width: 44px; height: 44px; flex: none; outline: 2px solid #fff; }
.socle__marque p { max-width: 27rem; color: #d6e4ee; }
.socle__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.socle__tel svg { color: var(--soleil); }
.socle .socle__ecoute { margin: 0; font-size: .875rem; color: #bfd3e3; }
.socle__bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .875rem; color: #bfd3e3; }
.socle__bas p { margin: 0; }
@media (min-width: 48em) { .socle__grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; } .socle__marque { grid-column: auto; } }

/* == barre d’appel mobile : deux colonnes égales, filet soleil == */
.appel-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 3px solid var(--soleil); }
.appel-mobile .action { min-width: 0; min-height: 52px; padding: 6px 10px; gap: 8px; }
.appel-mobile__texte { display: grid; min-width: 0; text-align: left; line-height: 1.15; }
.appel-mobile .action--trait .appel-mobile__texte { text-align: center; }
.appel-mobile__sous { font-size: .8125rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 48em) { body { padding-bottom: 0; } .appel-mobile { display: none; } }

/* == divers == */
.page-courte { padding: 40px 0 72px; }
.page-courte > * { max-width: 43rem; }
.amorce--seule { padding: 56px 0 96px; }
.amorce--seule h1 { margin-top: 24px; }
.impasse { position: relative; display: flex; align-items: flex-end; justify-content: space-between; width: 168px; height: 44px; }
.impasse::before { content: ""; position: absolute; left: 9px; right: 14px; bottom: 0; height: 10px; background: var(--route); }
.impasse .depart { position: relative; margin-bottom: -4px; }
.impasse .borne { position: relative; margin-bottom: 10px; --corps: var(--mer); }
.retour-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
@media print { .tete, .appel-mobile, .aparte, .socle, .panorama, .demande, .actions { display: none !important; } body { padding: 0; } }