@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* polices de repli calées sur les métriques des vraies (largeur moyenne, ascendante, descendante) : pas de saut de mise en page au chargement */
@font-face { font-family: "Bricolage repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 600 800; size-adjust: 102.7%; ascent-override: 90.6%; descent-override: 26.3%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson repli"; src: local("Arial"), local("ArialMT"); size-adjust: 98.3%; ascent-override: 96.6%; descent-override: 29.5%; line-gap-override: 0%; }

/* ==========================================================================
   Piste « Signalétique » (décision de Sid du 30/10) : la signalétique d'aéroport.
   Bleu nuit #0E1B2C, jaune #FFC72C (#E8AE00 sur fond clair) réservé aux prix et aux boutons, blanc chaud #F4F1EA, vert #2BB673 = disponible.
   Deux thèmes, clair par défaut, sombre selon le système (ou data-theme sur <html>). Les sections .papier et le jaune .cta-bande
   sont des panneaux : ils prennent le thème inverse, d'où le rythme clair / bleu nuit de la page dans les deux thèmes.
   Les chiffres (prix, heures) sont à chasse fixe (tnum) ; les prix s'affichent en tuiles de tableau des départs.
   ========================================================================== */
:root {
  --titre: "Bricolage", "Bricolage repli", "Arial Narrow", sans-serif; --texte: "Atkinson", "Atkinson repli", "Verdana", sans-serif;
  --r: 12px; --max: 1120px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --c-nuit: #0E1B2C; --c-blanc: #F4F1EA; --c-vert: #2BB673;
}
/* thème clair (contrastes mesurés : texte 15,4:1, texte-2 7,6:1, texte-3 5,0:1, contour des champs 3,2:1 sur le fond) */
:root, .theme-clair {
  --c-fond: #F4F1EA; --c-fond-2: #ffffff; --c-fond-3: #ebe6db; --c-trait: #ddd6c8; --c-bord: #7d8794;
  --c-texte: #0E1B2C; --c-texte-2: #3f4d5e; --c-texte-3: #5b6878;
  --c-jaune: #E8AE00; --c-jaune-vif: #FFC72C; --c-sur-jaune: #0E1B2C; --c-accent-texte: #0E1B2C; --c-souligne: #E8AE00;
  --c-tuile: #0E1B2C; --c-tuile-bord: #0E1B2C; --c-tuile-texte: #FFC72C;
  --c-vert-fond: #e1f5eb; --c-vert-texte: #17703f; --c-erreur: #b3261e; --c-erreur-fond: #fbe9e7;
  --c-ombre: 0 18px 40px -24px rgba(14,27,44,.35); --schema: light;
}
/* thème sombre (texte 15,4:1, texte-2 8,5:1, texte-3 6,3:1, jaune 11,1:1, contour des champs 3,9:1) */
.papier, .barre, footer, .theme-sombre, .enveloppe:has(> .fil):has(+ .section.papier) {
  --c-fond: #0E1B2C; --c-fond-2: #15263b; --c-fond-3: #1d324b; --c-trait: #26405d; --c-bord: #6683a0;
  --c-texte: #F4F1EA; --c-texte-2: #a9b7c6; --c-texte-3: #8d9db0;
  --c-jaune: #FFC72C; --c-jaune-vif: #FFC72C; --c-sur-jaune: #0E1B2C; --c-accent-texte: #FFC72C; --c-souligne: #FFC72C;
  --c-tuile: #0a1422; --c-tuile-bord: #26405d; --c-tuile-texte: #FFC72C;
  --c-vert-fond: #194045; --c-vert-texte: #9fe6c2; --c-erreur: #ff8f85; --c-erreur-fond: #3a1f2a;
  --c-ombre: 0 24px 60px -28px rgba(0,0,0,.75); --schema: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-fond: #0E1B2C; --c-fond-2: #15263b; --c-fond-3: #1d324b; --c-trait: #26405d; --c-bord: #6683a0;
    --c-texte: #F4F1EA; --c-texte-2: #a9b7c6; --c-texte-3: #8d9db0;
    --c-jaune: #FFC72C; --c-jaune-vif: #FFC72C; --c-sur-jaune: #0E1B2C; --c-accent-texte: #FFC72C; --c-souligne: #FFC72C;
    --c-tuile: #0a1422; --c-tuile-bord: #26405d; --c-tuile-texte: #FFC72C;
    --c-vert-fond: #194045; --c-vert-texte: #9fe6c2; --c-erreur: #ff8f85; --c-erreur-fond: #3a1f2a;
    --c-ombre: 0 24px 60px -28px rgba(0,0,0,.75); --schema: dark;
  }
  :root:not([data-theme="light"]) :is(.papier, .enveloppe:has(> .fil):has(+ .section.papier)) {
    --c-fond: #F4F1EA; --c-fond-2: #ffffff; --c-fond-3: #ebe6db; --c-trait: #ddd6c8; --c-bord: #7d8794;
    --c-texte: #0E1B2C; --c-texte-2: #3f4d5e; --c-texte-3: #5b6878;
    --c-jaune: #E8AE00; --c-sur-jaune: #0E1B2C; --c-accent-texte: #0E1B2C; --c-souligne: #E8AE00;
    --c-tuile: #0E1B2C; --c-tuile-bord: #0E1B2C; --c-tuile-texte: #FFC72C;
    --c-vert-fond: #e1f5eb; --c-vert-texte: #17703f; --c-erreur: #b3261e; --c-erreur-fond: #fbe9e7;
    --c-ombre: 0 18px 40px -24px rgba(14,27,44,.35); --schema: light;
  }
}
:root[data-theme="dark"] {
  --c-fond: #0E1B2C; --c-fond-2: #15263b; --c-fond-3: #1d324b; --c-trait: #26405d; --c-bord: #6683a0;
  --c-texte: #F4F1EA; --c-texte-2: #a9b7c6; --c-texte-3: #8d9db0;
  --c-jaune: #FFC72C; --c-sur-jaune: #0E1B2C; --c-accent-texte: #FFC72C; --c-souligne: #FFC72C;
  --c-tuile: #0a1422; --c-tuile-bord: #26405d; --c-tuile-texte: #FFC72C;
  --c-vert-fond: #194045; --c-vert-texte: #9fe6c2; --c-erreur: #ff8f85; --c-erreur-fond: #3a1f2a;
  --c-ombre: 0 24px 60px -28px rgba(0,0,0,.75); --schema: dark;
}
:root[data-theme="dark"] :is(.papier, .enveloppe:has(> .fil):has(+ .section.papier)) {
  --c-fond: #F4F1EA; --c-fond-2: #ffffff; --c-fond-3: #ebe6db; --c-trait: #ddd6c8; --c-bord: #7d8794;
  --c-texte: #0E1B2C; --c-texte-2: #3f4d5e; --c-texte-3: #5b6878;
  --c-jaune: #E8AE00; --c-sur-jaune: #0E1B2C; --c-accent-texte: #0E1B2C; --c-souligne: #E8AE00;
  --c-tuile: #0E1B2C; --c-tuile-bord: #0E1B2C; --c-tuile-texte: #FFC72C;
  --c-vert-fond: #e1f5eb; --c-vert-texte: #17703f; --c-erreur: #b3261e; --c-erreur-fond: #fbe9e7;
  --c-ombre: 0 18px 40px -24px rgba(14,27,44,.35); --schema: light;
}
/* anciens noms, encore lus par langues-blog.css : recalculés dans chaque zone de thème */
:root, .papier, .barre, footer, .theme-clair, .theme-sombre, .enveloppe:has(> .fil):has(+ .section.papier) {
  --nuit: var(--c-fond); --nuit-2: var(--c-fond-2); --nuit-3: var(--c-fond-3); --trait: var(--c-trait); --bord: var(--c-bord);
  --papier: var(--c-texte); --gris-clair: var(--c-texte-2); --gris: var(--c-texte-3); --encre: var(--c-sur-jaune);
  --sodium: var(--c-jaune); --sodium-doux: var(--c-accent-texte); --sodium-fonce: var(--c-accent-texte); --ok: var(--c-vert); --erreur: var(--c-erreur);
  color-scheme: var(--schema);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-color: var(--c-bord) var(--c-fond); }
body { margin: 0; background: var(--c-fond); color: var(--c-texte); font: 17px/1.6 var(--texte); -webkit-tap-highlight-color: transparent; }
.papier, .barre, footer, .enveloppe:has(> .fil):has(+ .section.papier) { background: var(--c-fond); color: var(--c-texte); }
/* bande du fil d'Ariane au-dessus d'un panneau : même fond que lui, d'un bord à l'autre */
.enveloppe:has(> .fil):has(+ .section.papier) { display: flow-root; box-shadow: 0 0 0 100vmax var(--c-fond); clip-path: inset(0 -100vmax); }
::selection { background: var(--c-jaune-vif); color: var(--c-nuit); }
input, textarea { caret-color: var(--c-texte); }
::placeholder { color: var(--c-texte-3); opacity: 1; }
:focus-visible { outline: 2.5px solid var(--c-texte); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-jaune-vif) 55%, transparent); }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-texte); text-decoration-color: var(--c-souligne); text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (hover: hover) { a:hover { text-decoration-thickness: 4px; } }
h1, h2, h3 { font-family: var(--titre); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 6.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.enveloppe { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.saut { position: absolute; left: -999px; } .saut:focus { left: 16px; top: 16px; background: var(--c-jaune-vif); color: var(--c-nuit); padding: 8px 12px; z-index: 99; }
/* chiffres de tableau des départs partout où l'on compare des nombres */
.prix, .montant, .tableau, .recap dd, .facture, .planning, .creneaux, .forfait, .detail { font-variant-numeric: tabular-nums; }

/* barre : toujours bleu nuit, comme un panneau de signalisation */
.barre { position: sticky; top: 0; z-index: 20; border-bottom: 3px solid var(--c-jaune-vif); }
.barre .enveloppe { display: flex; align-items: center; gap: 20px; min-height: 62px; }
.logo { font-family: var(--titre); font-weight: 800; font-size: 1.3rem; color: var(--c-texte); text-decoration: none; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.logo i { width: 26px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--c-jaune-vif) 0 7px, transparent 7px 11px); }
.menu { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.menu a { color: var(--c-texte-2); text-decoration: none; font-size: .96rem; }
.menu a:not(.btn):hover, .menu a:not(.btn)[aria-current] { color: var(--c-texte); text-decoration: underline; text-decoration-color: var(--c-jaune-vif); text-decoration-thickness: 2px; text-underline-offset: 8px; }
@media (max-width: 820px) { .menu a:not(.btn) { display: none; } }

/* boutons : jaune plein, texte bleu nuit (11,1:1 et 8,7:1), coins francs de panneau */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; border: 0;
  background: var(--c-jaune); color: var(--c-sur-jaune); font: 700 1rem var(--texte); letter-spacing: .01em; text-decoration: none; cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 -3px 0 rgba(14,27,44,.18); transition: transform .25s var(--sortie), filter .15s, box-shadow .25s var(--sortie); }
@media (hover: hover) { .btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgba(14,27,44,.18), 0 10px 22px -12px rgba(14,27,44,.55); } }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(14,27,44,.18); transition-duration: .08s; }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-creux { background: transparent; color: var(--c-texte); box-shadow: inset 0 0 0 2px var(--c-bord); }
@media (hover: hover) { .btn-creux:hover { filter: none; background: var(--c-fond-3); box-shadow: inset 0 0 0 2px var(--c-texte); } }
.btn-creux[aria-pressed="true"] { background: var(--c-jaune); color: var(--c-sur-jaune); box-shadow: none; }
.menu .btn { min-height: 40px; padding: 0 18px; color: var(--c-sur-jaune); }

/* héros */
.heros { position: relative; overflow: hidden; padding: 56px 0 64px; }
.heros .enveloppe { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font: 700 .8rem var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--c-texte-2); margin-bottom: 18px; }
.surtitre::before { content: ""; width: 18px; height: 4px; border-radius: 1px; background: var(--c-jaune-vif); }
/* l'accent du titre : en sombre le jaune, en clair un trait jaune de surligneur (le jaune en texte sur fond clair ne passerait pas) */
.heros h1 em { font-style: normal; color: var(--c-accent-texte);
  background: linear-gradient(transparent 64%, color-mix(in srgb, var(--c-jaune-vif) 70%, transparent) 64% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .heros h1 em { background: none; } }
:root[data-theme="dark"] .heros h1 em { background: none; }
.chapo { font-size: 1.15rem; color: var(--c-texte-2); max-width: 34em; }
.preuves { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; padding: 0; list-style: none; color: var(--c-texte-2); font-size: .95rem; }
.preuves li { display: flex; align-items: baseline; gap: 10px; }
.preuves li::before { content: ""; flex: none; width: 10px; height: 4px; border-radius: 1px; background: var(--c-jaune-vif); transform: translateY(-3px); }
.piste { height: 4px; margin: 40px 0 0; background: repeating-linear-gradient(90deg, var(--c-jaune-vif) 0 28px, transparent 28px 52px); background-size: 52px 4px;
  animation: piste 1.4s linear infinite; border-radius: 2px; }
@keyframes piste { to { background-position: -52px 0; } }
@media (max-width: 900px) { .heros .enveloppe { grid-template-columns: 1fr; gap: 32px; } .heros { padding-top: 32px; } }
/* mobile : le devis remonte juste sous le titre, la promesse et les preuves passent dessous */
@media (max-width: 640px) {
  .heros { padding: 20px 0 44px; }
  .heros .enveloppe:has(> .devis) { gap: 0; }
  .heros .enveloppe > div:has(+ .devis) { display: contents; }
  .heros .enveloppe > div:has(+ .devis) > * { order: 4; }
  .heros .surtitre { order: 1 !important; justify-self: start; margin-bottom: 10px; font-size: .74rem; letter-spacing: .1em; }
  .heros h1 { order: 2 !important; margin-bottom: 18px; }
  .heros .devis { order: 3; margin-bottom: 26px; }
  .heros .chapo { font-size: 1.05rem; }
  .heros .preuves { order: 5 !important; margin-top: 8px; }
  .devis { padding: 20px 18px; }
  .piste { margin-top: 28px; }
}

/* devis */
.devis { background: var(--c-fond-2); border: 1px solid var(--c-trait); border-top: 4px solid var(--c-jaune-vif); border-radius: var(--r); padding: 26px; box-shadow: var(--c-ombre); }
.devis h2 { font-size: 1.45rem; margin-bottom: 16px; }
.champ { position: relative; margin-bottom: 14px; }
.champ label, .etiquette { display: block; font: 700 .78rem var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-2); margin-bottom: 6px; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 8px; border: 1.5px solid var(--c-bord);
  background: var(--c-fond); color: var(--c-texte); font: 1rem var(--texte); transition: border-color .15s, box-shadow .2s var(--sortie); }
.champ textarea { min-height: 80px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--c-texte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-jaune-vif) 60%, transparent); }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--c-erreur); }
/* départ → arrivée : un point, le tracé en pointillés, un repère d'arrivée ; pendant le calcul du prix, le tracé défile */
.champ:has(> input[id^="dep"]) input, .champ:has(> input[id^="arr"]) input { padding-left: 42px; }
.champ:has(> input[id^="dep"])::before, .champ:has(> input[id^="arr"])::before { content: ""; position: absolute; left: 17px; bottom: 19px; width: 12px; height: 12px;
  border-radius: 50%; box-shadow: inset 0 0 0 3px var(--c-texte); pointer-events: none; }
.champ:has(> input[id^="arr"])::before { border-radius: 2px; background: var(--c-jaune-vif); box-shadow: inset 0 0 0 1.5px var(--c-nuit); }
.champ:has(> input[id^="dep"]) label, .champ:has(> input[id^="arr"]) label { padding-left: 42px; }
.champ:has(> input[id^="dep"]):has(+ .champ > input[id^="arr"])::after { content: ""; position: absolute; left: 22px; bottom: -58px; width: 2px; height: 72px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--c-texte-3) 0 4px, transparent 4px 8px); }
.champ:has(> input[id^="dep"]):has(+ .champ[hidden])::after { display: none; }
:is(form, .bloc):has(> [aria-live] > p.detail:only-child) .champ:has(> input[id^="dep"])::after {
  background-image: repeating-linear-gradient(180deg, var(--c-jaune-vif) 0 4px, transparent 4px 8px); animation: trace .5s linear infinite; }
@keyframes trace { to { background-position: 0 8px; } }
.champ input[data-ok="1"] { border-color: var(--c-texte-2); }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--c-fond-2);
  border: 1px solid var(--c-bord); border-radius: 10px; box-shadow: var(--c-ombre); }
.suggestions li { padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: .95rem; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--c-fond-3); box-shadow: inset 3px 0 0 var(--c-jaune-vif); }
/* prix : tuile de tableau des départs, qui bascule comme une palette à chaque nouveau devis */
.prix { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 6px; border-top: 1px dashed var(--c-bord); margin-top: 6px; }
.prix > span { font: 700 .78rem var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-2); }
.prix strong, .montant, .forfait strong { display: inline-block; font: 800 2.2rem/1 var(--titre); letter-spacing: .02em; color: var(--c-tuile-texte); font-variant-numeric: tabular-nums;
  padding: .16em .32em .12em; border-radius: 6px; background-color: var(--c-tuile); box-shadow: inset 0 0 0 1px var(--c-tuile-bord);
  background-image: linear-gradient(180deg, transparent calc(50% - .5px), rgba(0,0,0,.6) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.prix strong { transform-origin: 50% 50%; animation: palette .55s var(--sortie) both; }
/* site.js découpe le prix chiffre par chiffre : chaque palette bascule à son tour, la tuile reste immobile */
.prix strong:has(> span[aria-hidden]) { animation: none; }
.prix strong > span[aria-hidden] > span { display: inline-block; transform-origin: 50% 50%; animation: palette .5s var(--sortie) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes palette { 0% { transform: perspective(300px) rotateX(-88deg); filter: brightness(.55); } 60% { transform: perspective(300px) rotateX(10deg); } 100% { transform: none; } }
.prix small { color: var(--c-texte-3); }
.detail { font-size: .9rem; color: var(--c-texte-3); margin: 0 0 14px; }
.detail span { display: inline-block; margin-right: 12px; }
.devis .btn { width: 100%; }
.message { font-size: .92rem; padding: 10px 12px; border-radius: 8px; background: var(--c-erreur-fond); color: var(--c-erreur); }
.message.ok { background: var(--c-vert-fond); color: var(--c-vert-texte); }

/* sections : les .papier sont des panneaux au thème inverse */
.section { padding: 84px 0; }
@media (max-width: 640px) { .section { padding: 60px 0; } .cta-bande { padding: 26px 22px; } .cta-bande .btn { width: 100%; } }
.enveloppe:has(> .fil) + .section { padding-top: 12px; }
.enveloppe:has(> .fil) + .section.papier { padding-top: 36px; }
.intro { max-width: 40em; margin-bottom: 40px; }
.gris { color: var(--c-texte-3); }
.grille3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grille2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .grille3, .grille2 { grid-template-columns: 1fr; } }
.etape { padding: 24px; border-radius: var(--r); background: var(--c-fond-2); border: 1px solid var(--c-trait); }
.etape > p:last-child { margin-bottom: 0; }
/* les 3 étapes « réserver prend une minute » : une ligne de panneau, pas des cartes ; le chiffre en tuile */
.grille3 > .etape { background: none; border: 0; border-top: 3px solid var(--c-texte); border-radius: 0; padding: 20px 0 0; }
.etape b { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; font: 800 1.7rem/1 var(--titre); color: var(--c-tuile-texte); background: var(--c-tuile);
  box-shadow: inset 0 0 0 1px var(--c-tuile-bord); border-radius: 6px; margin-bottom: 16px; }
.grille2 > .etape h3 { font: 700 .82rem var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-2); margin-bottom: 12px; }
.grille2 > .etape .gris { margin: 10px 0 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tableau th, .tableau td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--c-trait); vertical-align: top; }
.tableau thead th { font: 700 .78rem var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-2); border-bottom: 2px solid var(--c-texte); }
.tableau td:last-child, .tableau th:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.forfait { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--r); background: var(--c-fond-2); border: 1px solid var(--c-trait); }
.forfait strong { font-size: 2rem; }
/* bandeau d'appel : un panneau jaune plein, le bouton passe en bleu nuit */
.cta-bande { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 34px; border-radius: var(--r);
  background: var(--c-jaune-vif); color: var(--c-nuit); }
.cta-bande h2 { margin: 0; }
.cta-bande .btn { background: var(--c-nuit); color: var(--c-jaune-vif); box-shadow: none; }
.cta-bande :focus-visible { outline-color: var(--c-nuit); box-shadow: none; }
details { border-bottom: 1px solid var(--c-trait); padding: 16px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details:not(.langues) summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--c-fond-3); color: var(--c-texte);
  font: 800 1.2rem/1 var(--titre); transition: transform .3s var(--sortie), background .2s; }
details:not(.langues)[open] summary::after { content: "–"; background: var(--c-jaune); color: var(--c-sur-jaune); }
summary::-webkit-details-marker { display: none; }
@media (hover: hover) { details:not(.langues) summary:hover::after { background: var(--c-jaune); color: var(--c-sur-jaune); } }
details p { margin: 12px 0 0; }
.texte-long { max-width: 46em; }
.texte-long h2 { font-size: 1.6rem; margin-top: 1.6em; }
.fil { font-size: .9rem; color: var(--c-texte-3); margin-bottom: 18px; } .fil a { color: var(--c-texte-2); }

/* planning : vert = disponible */
.planning { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.jourp { background: var(--c-fond-2); border: 1px solid var(--c-trait); border-radius: 10px; padding: 10px 8px; min-height: 120px; font-size: .85rem; }
.jourp h3 { font: 700 .78rem var(--texte); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; color: var(--c-texte-2); }
.jourp .plage { display: flex; align-items: center; gap: 6px; background: var(--c-vert-fond); color: var(--c-vert-texte); border-radius: 5px; padding: 4px 6px; margin-bottom: 5px; font-weight: 700; }
.jourp .plage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-vert); }
.jourp .ferme { color: var(--c-texte-3); }
@media (max-width: 760px) { .planning { grid-template-columns: 1fr; } .jourp { min-height: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .jourp h3 { width: 6.5em; margin: 0; } .jourp .plage { margin: 0; } }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 8px 0 16px; }
.creneaux button { min-height: 44px; border-radius: 6px; border: 1.5px solid var(--c-bord); background: var(--c-fond); color: var(--c-texte); font: 700 .95rem var(--texte); cursor: pointer;
  font-variant-numeric: tabular-nums; touch-action: manipulation; transition: background .15s, border-color .15s, transform .2s var(--sortie); }
@media (hover: hover) { .creneaux button:not(:disabled):hover { border-color: var(--c-texte); } }
.creneaux button:not(:disabled):active { transform: scale(.96); }
.creneaux button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; border-color: var(--c-trait); }
.creneaux button[aria-pressed="true"] { background: var(--c-tuile); color: var(--c-tuile-texte); border-color: var(--c-tuile); }
.creneaux button.demande { border-style: dashed; }
.legende { font-size: .85rem; color: var(--c-texte-3); }
.etapes-resa { display: grid; gap: 18px; }
.bloc { background: var(--c-fond-2); border: 1px solid var(--c-trait); border-radius: var(--r); padding: 24px; transition: opacity .35s var(--sortie), border-color .35s; }
.bloc h2 { font-size: 1.3rem; display: flex; gap: 12px; align-items: center; }
.bloc h2 b { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 6px; background: var(--c-tuile); color: var(--c-tuile-texte); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px var(--c-tuile-bord); }
.bloc[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.bloc[aria-disabled="true"] h2 b { background: transparent; color: var(--c-texte-2); box-shadow: inset 0 0 0 1.5px var(--c-bord); }
.bloc:focus-within { border-color: var(--c-bord); }
@media (max-width: 640px) { .bloc { padding: 20px 16px; } }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; margin: 12px 0; }
.case input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--c-texte); flex: none; }
#paiement-element { margin: 12px 0 16px; }
.recap { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .95rem; }
.recap dt { color: var(--c-texte-3); }
.recap dd { margin: 0; }
/* Trajet / Chauffeur à l'heure : contrôle segmenté. Le vrai bouton radio recouvre son libellé (transparent),
   il reste à sa place pour l'exploration tactile des lecteurs d'écran. */
.bascule { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 0; padding: 4px; margin: 30px 0 18px; min-width: 0;
  border-radius: 10px; background: var(--c-fond); box-shadow: inset 0 0 0 1.5px var(--c-bord); }
.bascule legend { position: absolute; top: -28px; left: 0; padding: 0; margin: 0; }
.bascule label { position: relative; display: block; }
.bascule input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.bascule span { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 44px; padding: 6px 10px; border-radius: 7px;
  font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--c-texte-2); transition: background .2s var(--sortie), color .2s; }
.bascule input:checked + span { background: var(--c-jaune); color: var(--c-sur-jaune); }
@media (hover: hover) { .bascule input:not(:checked):hover + span { color: var(--c-texte); background: var(--c-fond-3); } }
.bascule input:focus-visible + span { outline: 2.5px solid var(--c-texte); outline-offset: 2px; }

/* pied : bleu nuit dans les deux thèmes */
footer { border-top: 3px solid var(--c-jaune-vif); padding: 48px 0 32px; color: var(--c-texte-3); font-size: .92rem; }
footer .enveloppe { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
footer a { color: var(--c-texte-2); text-decoration: none; display: block; padding: 4px 0; }
footer a:hover { color: var(--c-texte); }
footer h3 { color: var(--c-texte); font: 700 .8rem var(--texte); letter-spacing: .1em; text-transform: uppercase; }
.legal { grid-column: 1 / -1; border-top: 1px solid var(--c-trait); padding-top: 18px; font-size: .82rem; }
@media (max-width: 760px) { footer .enveloppe { grid-template-columns: 1fr; } }

/* point vert « en service » (classe prête pour un badge public : <span class="en-service">En service</span>) */
.en-service { display: inline-flex; align-items: center; gap: 8px; font: 700 .85rem var(--texte); color: var(--c-vert-texte); }
.en-service::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c-vert); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-vert) 60%, transparent);
  animation: pouls 2s var(--sortie) infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* apparition : le titre du héros, puis les sections qui arrivent comme des panneaux (animation liée au défilement, si le navigateur la connaît) */
.monte { animation: monte .7s var(--sortie) both; }
.monte.d1 { animation-delay: .08s; } .monte.d2 { animation-delay: .16s; } .monte.d3 { animation-delay: .24s; }
@keyframes monte { from { transform: translateY(14px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > .enveloppe { transform-origin: 50% 0; animation: panneau linear both; animation-timeline: view(); animation-range: entry 0% entry 36%; }
    @keyframes panneau { from { transform: perspective(900px) rotateX(-7deg) translateY(28px); opacity: .25; } }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
    @keyframes panneau { from { transform: translateY(16px); opacity: .4; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .piste, .monte, .prix strong, .prix strong > span[aria-hidden] > span, .en-service::before { animation: none; }
  :is(form, .bloc):has(> [aria-live] > p.detail:only-child) .champ:has(> input[id^="dep"])::after { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* pages serveur (décision, annulation, facture) */
.page-simple { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.carte-simple { width: min(560px, 100%); background: var(--c-fond-2); border: 1px solid var(--c-trait); border-top: 4px solid var(--c-jaune-vif); border-radius: var(--r); padding: 28px; }
.carte-simple h1 { font-size: 1.7rem; margin-top: 16px; }
.resume { white-space: pre-wrap; font: .95rem/1.5 var(--texte); background: var(--c-fond); padding: 14px; border-radius: 8px; }
/* texte bleu nuit sur vert et rouge (6,6:1 et plus) */
.btn-ok { background: var(--c-vert); color: var(--c-nuit); } .btn-non { background: #e0645a; color: var(--c-nuit); }
.carte-simple form .btn { width: 100%; margin-top: 8px; }
.petit { font-size: .85rem; color: var(--c-texte-3); }
.facture { width: 100%; border-collapse: collapse; margin-top: 12px; } .facture td, .facture th { padding: 10px 6px; border-bottom: 1px solid var(--c-trait); text-align: left; }
.facture td:last-child, .facture th:last-child { text-align: right; }
@media print { body { background: #fff; color: #000; } .carte-simple { border: 0; } .resume { background: #f3f3f3; } }

/* reprises de langues-blog.css (couleurs codées pour l'ancien fond papier) : jetons du thème courant */
body .tableau-trajets thead th { color: var(--c-texte-2); }
body .tableau-trajets td:nth-child(2), body .tableau-trajets td:nth-child(3) { color: var(--c-texte-3); }
body .tableau-trajets tr.groupe th { color: var(--c-texte); border-bottom-color: var(--c-texte); }
body .vecu { border-color: var(--c-bord); color: var(--c-texte-2); }
body .langues summary { border-radius: 8px; }
body .blog-carte { border-top: 3px solid var(--c-texte); }
body .blog-meta a { color: var(--c-texte); text-decoration: underline; text-decoration-color: var(--c-souligne); }
body .blog-cats a[aria-current] { background: var(--c-jaune); color: var(--c-sur-jaune); }
body .article blockquote { border-left: 0; box-shadow: inset 3px 0 0 var(--c-jaune-vif); color: var(--c-texte-2); }
/* logo vectorisé dans l'en-tête : de l'air au-dessus et au-dessous du monogramme (l'en-tête fait 64 px) */
header .logo img { height: 40px; }
@media (min-width: 900px) { header .logo img { height: 46px; } }