/*
 * vols-en-montgolfiere.fr — direction artistique « Heure du brûleur »
 * Fond nuit, accent flamme. CSS vanilla : aucun preprocesseur, aucun framework.
 * Polices chargees depuis Google Fonts pour le developpement local ; a auto-heberger
 * avant mise en production (voir le rapport de la tache 4).
 */

/* Polices auto-hebergees. Aucune requete vers un service tiers, donc aucune
   adresse IP de visiteur transmise : charger une fonte depuis un CDN externe
   constitue un transfert de donnees personnelles sans consentement.

   Archivo et Fraunces, licence SIL Open Font 1.1, versions variables.
   Le sous-ensemble latin-ext n'est telecharge que si la page contient
   reellement un caractere qui s'y trouve. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/archivo-latin.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: 400 700;
    font-display: swap;
    src: url('fonts/archivo-latin-ext.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;
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/fraunces-latin.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: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/fraunces-latin-ext.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 {
    /* Palette — contrastes verifies, voir la spec §9.2 */
    --nuit:        #0C1421;
    --surface:     #151F30;
    --bordure:     #26334A;
    --ink:         #EDEDEF;
    --ink-doux:    #A8B2C4;
    --flamme:      #E8833A;
    --flamme-vif:  #F59B57;
    --prix:        #F2C94C;
    --dispo:       #6FBF9A;

    /* Teintes derivees (alpha sur la palette ci-dessus) pour halos et fonds discrets */
    --flamme-lueur:  rgb(232 131 58 / 35%);
    --dispo-teinte:  rgb(111 191 154 / 16%);
    --flamme-teinte: rgb(232 131 58 / 7%);

    /* Echelle typographique, ratio 1.25 entre les pas */
    --pas-0:  0.875rem;
    --pas-1:  1rem;
    --pas-2:  1.25rem;
    --pas-3:  1.563rem;
    --pas-4:  1.953rem;
    --pas-5:  2.441rem;
    --titre:  clamp(2.2rem, 6vw, 3.8rem);

    /* Polices : contraste reel serif / grotesque, deux familles seulement */
    --police-titre: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --police-corps: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Rythme */
    --espace-1: 0.5rem;
    --espace-2: 0.875rem;
    --espace-3: 1.5rem;
    --espace-4: 2.5rem;
    --espace-5: 4rem;

    /* Pilule reservee aux etiquettes et boutons (spec §9.4). Les rayons de bloc,
       eux, restent ecrits en dur a leur point d'usage (12px, 8px) : le plafond
       de 16px doit rester visible en lecture directe, pas cache derriere un token. */
    --rayon-pilule: 999rem;

    /* Empilement nomme — jamais de valeur arbitraire */
    --z-base:    0;
    --z-sticky: 20;
    --z-voile:  30;
    --z-modale: 40;
    --z-toast:  50;

    --courbe: cubic-bezier(0.22, 1, 0.36, 1); /* sortie exponentielle, aucun rebond */
}

/* ---------- Reinitialisation minimale ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--nuit);
    color: var(--ink);
    font-family: var(--police-corps);
    font-size: var(--pas-1);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Reserve la place de la barre de CTA fixe, et seulement quand la page en
   porte une : sans cette condition, les pages editoriales finissaient sur
   6 rem de vide sous leur pied de page. La classe est posee par
   templates/layout.php, qui connait le gabarit avant de l'inclure. */
.avec-barre {
    padding-bottom: 6rem;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
}

img, picture, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* ---------- Typographie de base ---------- */

h1, h2, h3 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-size: var(--titre);
    letter-spacing: -0.03em;
}

/* Le rapport entre deux niveaux de titre reste au moins a 1.25 : en dessous,
   la page se lit comme un seul bloc de gros caracteres. Mesure : h1 a 35.2px
   contre un h2 a 31.2px donnait 1.13, soit une hierarchie inexistante. */
h2 { font-size: clamp(1.4rem, 3vw, 1.953rem); }
h3 { font-size: var(--pas-2); }

p, li {
    max-width: 70ch;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--bordure);
    text-underline-offset: 0.15em;
    transition: color 0.2s var(--courbe), text-decoration-color 0.2s var(--courbe);
}

a:hover,
a:focus-visible {
    color: var(--flamme-vif);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--flamme-vif);
    outline-offset: 2px;
}

::selection {
    background: var(--flamme);
    color: var(--nuit);
}

/* ---------- Structure de page ---------- */

.page {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .page { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
    .page { padding-inline: 3rem; }
}

/* Premier element focalisable de la page : il n'apparait qu'au clavier, et
   evite de retraverser la navigation a chaque page. */
.saut-contenu {
    position: absolute;
    left: -100vw;
    top: var(--espace-1);
    z-index: var(--z-toast);
    padding: var(--espace-1) var(--espace-2);
    background: var(--flamme);
    color: var(--nuit);
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
}

/* :focus et non :focus-visible. Un lien d'evitement n'est atteignable qu'au
   clavier, et :focus-visible ne s'applique pas dans tous les cas de mise au
   focus — verifie : le lien restait a gauche de l'ecran quand le focus
   arrivait autrement que par une frappe de Tab. Le reveler a chaque focus est
   la seule regle qui tienne partout. */
.saut-contenu:focus {
    left: var(--espace-2);
    color: var(--nuit);
}

/* ---------- En-tete ---------- */

/* Deux lignes en dessous de 640px (marque, puis navigation), une seule
   au-dela. Aucun bouton hamburger : trois liens courts n'ont pas besoin
   d'etre replies, et un menu replie sans JavaScript depend d'un <details>
   dont l'ouverture n'est pas garantie partout. */
.entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-1) var(--espace-3);
    padding-block: var(--espace-2);
    border-bottom: 1px solid var(--bordure);
}

.entete__marque {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--pas-2);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.entete__marque:hover,
.entete__marque:focus-visible {
    color: var(--flamme-vif);
}

.entete__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1) var(--espace-3);
    list-style: none;
    padding: 0;
}

.entete__nav li {
    max-width: none;
}

.entete__nav a {
    display: inline-block;
    padding-block: 0.25rem;
    color: var(--ink-doux);
    font-size: var(--pas-1);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.entete__nav a:hover,
.entete__nav a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--flamme);
}

/* La page courante se marque par la couleur et le filet, jamais par un lien
   desactive : on doit pouvoir y revenir depuis une ancre plus bas. */
.entete__nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--flamme);
}

@media (min-width: 640px) {
    .entete { padding-block: var(--espace-3); }
}

/* ---------- Pied de page ---------- */

.pied {
    margin-top: var(--espace-5);
    padding-block: var(--espace-4) var(--espace-3);
    border-top: 1px solid var(--bordure);
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

.pied a {
    color: var(--ink-doux);
}

.pied a:hover,
.pied a:focus-visible {
    color: var(--flamme-vif);
}

/* auto-fit plutot que des points de rupture : les trois colonnes se replient
   d'elles-memes en une seule sur telephone, sans media query a maintenir. */
.pied__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--espace-3) var(--espace-4);
}

/* Treize regions sur deux colonnes des le telephone. Deux noms y passent sur
   deux lignes (Bourgogne-Franche-Comte, Provence-Alpes-Cote d'Azur), ce qui
   reste preferable a treize lignes pleines : mesure a 375 px, le pied de page
   passe de 879 a 746 px, de quoi absorber l'agrandissement des zones
   cliquables sans que le pied ne gagne en hauteur. */
.pied__bloc--large {
    grid-column: span 1;
}

.pied__bloc--large ul {
    columns: 2;
    column-gap: var(--espace-3);
}

@media (min-width: 900px) {
    .pied__bloc--large { grid-column: span 2; }
    .pied__bloc--large ul { column-gap: var(--espace-4); }
}

/* Cinq blocs depuis l'ajout des formules : le pied passe a cinq colonnes au
   lieu de quatre, la colonne des regions en occupant toujours deux. */
@media (min-width: 1180px) {
    .pied__colonnes { grid-template-columns: repeat(5, 1fr); }
}

.pied__titre {
    font-family: var(--police-corps);
    font-size: var(--pas-0);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin-bottom: var(--espace-1);
}

.pied__bloc ul {
    list-style: none;
    padding: 0;
}

.pied__bloc li {
    max-width: none;
    break-inside: avoid;
}

/*
 * La zone cliquable est portee par le lien, pas par l'interligne de la liste.
 * Mesure avant correction : les <li> etaient espaces de 26 px par un
 * line-height de 1.9, mais le <a> restait une boite en ligne de 15 px de haut
 * — sous le minimum de 24 px du critere WCAG 2.5.8, alors meme que l'oeil
 * voyait de l'air autour. Le menu d'en-tete et les listes de maillage etaient
 * deja a 35 px ; seul le pied de page ne l'etait pas.
 */
.pied__bloc a {
    display: inline-block;
    padding-block: 0.4rem;
}

.pied__mention {
    margin-top: var(--espace-3);
    padding-top: var(--espace-3);
    border-top: 1px solid var(--bordure);
}

.pied__mention p {
    max-width: 65ch;
}

/* Groupe de maillage laisse deplie : celui qui decrit le territoire de la
   page. Meme rythme qu'un <details> ouvert, sans le triangle. */
.maillage__groupe {
    margin-block: var(--espace-3);
}

.maillage__groupe h3 {
    margin-bottom: var(--espace-2);
}

/*
 * Groupes replies. Le <h3> est un element de bloc : sans display:inline il se
 * placait sous le triangle de <summary> au lieu d'a cote, ce qui donnait deux
 * lignes pour un seul intitule et un triangle orphelin au-dessus.
 *
 * On garde le marqueur natif du navigateur plutot qu'un chevron dessine :
 * c'est la forme que les visiteurs reconnaissent, elle suit les reglages
 * systeme, et elle ne coute aucune pseudo-classe a maintenir.
 */
.maillage details {
    border-top: 1px solid var(--bordure);
}

.maillage summary {
    padding-block: var(--espace-2);
    cursor: pointer;
    color: var(--ink);
}

.maillage summary h3 {
    display: inline;
    font-size: var(--pas-2);
}

.maillage summary:hover,
.maillage summary:focus-visible {
    color: var(--flamme-vif);
}

.maillage details ul {
    padding-bottom: var(--espace-2);
}

/* ---------- Sommaire (index des guides) ---------- */

/* Une liste, pas une grille de cartes : les cinq entrees n'ont ni la meme
   longueur de chapo ni le meme poids, les aligner dans des boites identiques
   les ferait passer pour interchangeables. */
.sommaire {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sommaire__entree {
    max-width: none;
    padding-block: var(--espace-3);
    border-top: 1px solid var(--bordure);
}

.sommaire__entree:last-child {
    border-bottom: 1px solid var(--bordure);
}

.sommaire__entree h2 {
    font-size: var(--pas-3);
    margin-bottom: var(--espace-1);
}

.sommaire__entree h2 a {
    text-decoration-color: var(--bordure);
}

.sommaire__entree p {
    color: var(--ink-doux);
}

/* Le nom d'une entree de sommaire n'est plus un <h3>.
   Les rubriques du silo en alignaient jusqu'a 131, un par vol : un empilement
   de titres qui repetent le mot-cle est un signal d'entassement, pas une
   hierarchie. Le nom garde son poids visuel sans occuper un niveau de plan. */
.sommaire__nom {
    font-family: var(--police-titre);
    font-size: var(--pas-1);
    color: var(--ink);
    margin-bottom: 0;
}

/* Entree de sommaire compacte : les offres soeurs d'une page de vol n'ont pas
   de chapo, seulement un titre et un prix. */
.sommaire__entree--compacte {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-1) var(--espace-3);
    padding-block: var(--espace-2);
}

.sommaire__entree--compacte h3 {
    font-size: var(--pas-1);
    margin-bottom: 0;
}

.sommaire__entree--compacte p {
    color: var(--prix);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Visuel d'une page de vol ---------- */

/* La vignette du marchand est carree et petite (365 px le plus souvent) : on
   ne l'agrandit jamais au-dela de sa taille native, sous peine de la rendre
   floue. Elle se cale a gauche plutot que de s'etirer. */
.vol__visuel {
    margin: 0 0 var(--espace-3);
    max-width: 22rem;
    border-radius: 12px; /* plafond de bloc, spec §9.4 */
    overflow: hidden;
    background: var(--surface);
}

.vol__visuel img {
    width: 100%;
    height: auto;
}

/* ---------- Alerte de page (prix change, offre retiree) ---------- */

.alerte {
    margin-bottom: var(--espace-3);
    padding: var(--espace-2) var(--espace-3);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

/* ---------- Fiche cle/valeur (mentions legales) ---------- */

.fiche {
    list-style: none;
    padding: 0;
    margin-block: var(--espace-2) var(--espace-3);
    border-top: 1px solid var(--bordure);
}

.fiche li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1) var(--espace-2);
    max-width: none;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--bordure);
}

.fiche li span {
    flex: 0 0 14rem;
    color: var(--ink-doux);
}

/* ---------- Moteur geographique de l'accueil ---------- */

/*
 * Il n'utilise pas la classe .cta, et ce n'est pas un detail : .cta passe en
 * position fixed sous 768 px, ce qui aurait colle le formulaire au bas de
 * l'ecran. Le moteur doit etre la premiere chose que l'on rencontre en haut de
 * page, pas une barre que l'on garde sous les yeux.
 */
.moteur-bloc {
    margin-block: var(--espace-3) var(--espace-4);
    padding: var(--espace-3);
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--surface);
}

.moteur__label {
    display: block;
    margin-bottom: var(--espace-1);
    font-weight: 600;
}

.moteur__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
}

.moteur__champ {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: var(--pas-2);
    color: var(--ink);
    background: var(--nuit);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.moteur__champ::placeholder { color: var(--ink-doux); }

.moteur__champ:focus-visible {
    outline: 2px solid var(--flamme);
    outline-offset: 2px;
    border-color: var(--flamme);
}

.moteur .bouton { flex: 0 0 auto; }

.moteur__aide {
    margin: var(--espace-2) 0 0;
    max-width: 62ch;
    font-size: var(--pas-0);
    color: var(--ink-doux);
}

/* ---------- Simulateur ---------- */

/*
 * Meme carte que .moteur-bloc (fond, bordure, rayon) : sans .cta pour
 * l'envelopper (voir templates/simulateur.php), le formulaire flottait sans
 * bord ni fond sur la page, indistinct du reste du contenu.
 */
.simulateur {
    display: flex;
    flex-direction: column;
    gap: var(--espace-3);
    padding: var(--espace-3);
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--surface);
}

.simulateur__champ-lieu {
    display: flex;
    flex-direction: column;
    gap: var(--espace-1);
}

/*
 * .moteur__champ porte "flex: 1 1 14rem" pour se partager une ligne avec un
 * bouton dans .moteur, un conteneur flex EN LIGNE. Repris tel quel ici, dans
 * .simulateur__champ-lieu qui est un flex EN COLONNE, ce meme flex-basis
 * s'appliquait a la hauteur au lieu de la largeur : le champ s'affichait a
 * 14rem (224px) de haut. Cette regle, plus specifique, neutralise le
 * flex-basis sans toucher a .moteur__champ ni au moteur de l'accueil.
 */
.simulateur__champ-ou {
    flex: none;
    width: 100%;
}

.simulateur__groupe {
    padding: 0;
    margin: 0;
    border: none;
}

.simulateur__legende {
    display: block;
    margin-bottom: var(--espace-1);
    font-weight: 600;
}

.simulateur__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.simulateur__option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 24px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-pilule);
    background: var(--nuit);
    font-size: var(--pas-0);
    cursor: pointer;
}

.simulateur__option:has(input:checked) {
    border-color: var(--flamme);
}

.simulateur__option input {
    accent-color: var(--flamme);
}

.simulateur__budget {
    display: flex;
    align-items: center;
    gap: var(--espace-2);
    flex-wrap: wrap;
}

.simulateur__champ-prix {
    width: 6.5rem;
    padding: 0.6rem 0.8rem;
    font: inherit;
    font-size: var(--pas-2);
    color: var(--ink);
    background: var(--nuit);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.simulateur__champ-prix:focus-visible {
    outline: 2px solid var(--flamme);
    outline-offset: 2px;
    border-color: var(--flamme);
}

.simulateur__alerte {
    padding: var(--espace-2);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

/* ---------- Cartes de destination ---------- */

.destinations {
    list-style: none;
    padding: 0;
    margin-block: var(--espace-3);
    display: grid;
    gap: var(--espace-2);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.destinations__carte {
    max-width: none;
    padding: var(--espace-2);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--surface);
}

.destinations__carte h4 {
    margin: 0 0 0.4rem;
    font-family: var(--police-corps);
    font-size: var(--pas-1);
}

.destinations__chiffres,
.destinations__lieux {
    margin: 0;
    max-width: none;
    font-size: var(--pas-0);
}

.destinations__lieux {
    margin-top: 0.35rem;
    color: var(--ink-doux);
}

/* ---------- Etapes numerotees ---------- */

.etapes {
    margin-block: var(--espace-3);
    padding-left: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes li {
    position: relative;
    max-width: 62ch;
    padding-left: 2.6rem;
    padding-bottom: var(--espace-2);
    counter-increment: etape;
}

.etapes li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: var(--pas-0);
    font-variant-numeric: tabular-nums;
    color: var(--nuit);
    background: var(--flamme);
    border-radius: 50%;
}

/* ---------- Tableau comparatif ---------- */

/*
 * Le cadre defile seul : un tableau a quatre colonnes ne tient pas sous 375 px,
 * et c'est le cadre qui doit deborder, jamais la page.
 */
.tableau-cadre {
    margin-block: var(--espace-3);
    overflow-x: auto;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pas-0);
}

.tableau caption {
    margin-bottom: var(--espace-1);
    color: var(--ink-doux);
    text-align: left;
}

.tableau th,
.tableau td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bordure);
}

.tableau thead th {
    white-space: nowrap;
    color: var(--ink-doux);
    font-weight: 600;
}

.tableau tbody th { font-weight: 600; }

/*
 * Sous 640 px, chaque ligne devient une carte.
 *
 * Un tableau a quatre colonnes tient techniquement dans un cadre defilant,
 * mais le rendu mesure a 375 px donnait un mot par ligne (« Un / premier /
 * vol, seul / ou a deux »). Le defilement horizontal etait donc une solution
 * pour la mise en page et un probleme pour la lecture. L'en-tete de colonne
 * revient par data-libelle, devant la valeur.
 */
@media (max-width: 639px) {
    .tableau thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tableau tbody tr {
        display: block;
        margin-bottom: var(--espace-2);
        border: 1px solid var(--bordure);
        border-radius: 10px;
        background: var(--surface);
    }

    .tableau tbody th,
    .tableau tbody td {
        display: block;
        border-bottom: none;
        padding: 0.15rem 0.9rem;
    }

    .tableau tbody th {
        padding-top: 0.8rem;
        font-size: var(--pas-1);
    }

    .tableau tbody tr td:last-child { padding-bottom: 0.9rem; }

    .tableau tbody td::before {
        content: attr(data-libelle) " ";
        color: var(--ink-doux);
    }
}

/* ---------- Questions frequentes ---------- */

.faq {
    margin-block: var(--espace-3);
}

.faq dt {
    margin-top: var(--espace-3);
    font-family: var(--police-titre);
    font-size: var(--pas-2);
    color: var(--ink);
}

.faq dd {
    margin: var(--espace-1) 0 0;
    max-width: 68ch;
}

/*
 * Capacite annoncee de la nacelle. Rare (14 fiches sur 175) et decisive quand
 * elle existe : elle merite d'etre lue avant la liste des services, pas
 * confondue avec elle.
 */
.fiche__capacite {
    margin-block: var(--espace-2) var(--espace-1);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bordure);
    background: var(--surface);
}

/*
 * Zone cliquable des liens de fiche et de sommaire.
 *
 * Mesures au navigateur : 18 px pour une commune desservie sur une page de
 * vol, 20 px pour un titre d'entree compacte. Sous le minimum de 24 px du
 * critere WCAG 2.5.8, comme l'etait le pied de page avant correction. Le
 * retrait negatif rend la hauteur que le remplissage prend, pour que la ligne
 * garde son rythme.
 */
.fiche a,
.sommaire__entree h3 a,
.tableau tbody th a,
.destinations__carte h4 a {
    display: inline-block;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-1);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--rayon-pilule);
    font-family: var(--police-corps);
    font-weight: 600;
    font-size: var(--pas-1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s var(--courbe), color 0.2s var(--courbe), box-shadow 0.2s var(--courbe), border-color 0.2s var(--courbe);
}

/* border: none et cursor: pointer ci-dessus ne changent rien pour les <a>,
   qui portaient deja .bouton jusqu'ici : ils n'ont pas de chrome de bouton
   par defaut. Necessaires en revanche pour .bouton--fantome, le premier
   usage sur un <button> (bandeau de consentement). */

.bouton--fantome {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--bordure);
}

.bouton--fantome:hover,
.bouton--fantome:focus-visible {
    border-color: var(--ink-doux);
    background: var(--nuit);
}

.bouton--principal {
    background: var(--flamme);
    color: var(--nuit); /* le fond nuit pose sur la flamme : 6,8:1 */
}

.bouton--principal:hover,
.bouton--principal:focus-visible {
    background: var(--flamme-vif);
    box-shadow: 0px 4px 10px var(--flamme-lueur); /* halo discret du bruleur, pas de bordure associee */
}

/* ---------- Etiquettes ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--rayon-pilule);
    background: var(--dispo-teinte);
    color: var(--dispo);
    font-size: var(--pas-0);
    font-weight: 600;
    line-height: 1;
}

.badge::before {
    content: '';
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Fil d'Ariane ---------- */

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: var(--espace-2);
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

.fil-ariane a {
    display: inline-block;
    /* 22 px mesures, deux de moins que le minimum du critere WCAG 2.5.8. */
    padding-block: 0.15rem;
    color: var(--ink-doux);
    text-decoration: none;
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible {
    color: var(--flamme-vif);
}

.fil-ariane [aria-current="page"] {
    color: var(--ink);
}

/* ---------- Chapo : paragraphe d'introduction, jamais une barre ----------

   Distinct de .cta a dessein. La barre collante est un outil commercial : elle
   suit le visiteur parce qu'on veut qu'il clique vers une offre. Une page de
   guide, de contact ou de confidentialite n'a rien a vendre, et son chapo fait
   trois lignes la ou la barre en accepte une.

   Mesure avant separation : le chapo du guide securite occupait 445 px dans la
   barre fixe, soit 55 % d'un ecran de 812 px, et l'index des guides 48 %. La
   page etait litteralement inutilisable sur telephone. */

.chapo {
    margin-block: var(--espace-2) var(--espace-4);
}

.chapo p {
    max-width: 60ch;
    font-size: var(--pas-2);
    line-height: 1.5;
    color: var(--ink-doux);
    text-wrap: pretty;
}

.chapo .bouton {
    margin-top: var(--espace-3);
}

/* ---------- CTA : barre collante en mobile, en ligne au-dela ---------- */

.cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2);
    padding: var(--espace-2) var(--espace-3);
    padding-bottom: max(var(--espace-2), env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--bordure);
}

/* En mobile la barre ne porte qu'une ligne. Mesure : la phrase complete la
   faisait monter a 157px, soit 19% de l'ecran, et deux lignes du comparateur
   restaient masquees en permanence. Ce que la barre perd, la page le garde :
   la version longue s'affiche des 768px, ou la barre n'est plus fixe. */
.cta__long  { display: none; }
.cta__court { display: inline; }

.cta p {
    margin: 0;
    font-size: var(--pas-0);
    line-height: 1.35;
}

.cta .bouton { flex: 0 0 auto; }

@media (min-width: 768px) {
    .cta {
        position: static;
        inset-inline: auto;
        bottom: auto;
        justify-content: flex-start;
        padding: var(--espace-3) 0;
        background: transparent;
        border-top: none;
    }

    .cta__long  { display: inline; }
    .cta__court { display: none; }
    .cta p { font-size: var(--pas-1); }

    .avec-barre { padding-bottom: 0; }
}

/* ---------- Listing et comparateur en liste dense ---------- */

.listing {
    padding-block: var(--espace-4);
}

/* La colonne de droite du comparateur n'a pas d'en-tete : c'est une liste,
   pas un tableau. Cette ligne, posee une fois au-dessus, dit ce que mesure le
   nombre, sans repeter une etiquette sur chacune des lignes. */
.listing__legende {
    margin-bottom: var(--espace-2);
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

/* Le comparateur des pages de tete du silo, pose haut dans la page.
   Il vient juste sous la barre d'appel, avant l'editorial : ces pages
   visent une requete de comparaison et doivent montrer des prix avant
   d'expliquer quoi que ce soit. */
.listing--comparateur {
    margin-bottom: var(--espace-5);
}

/* Reserve d'usage adossee a une donnee : mesure, provenance d'un prix,
   ce que la fiche du prestataire ne dit pas. C'est une note de bas de
   tableau, pas un paragraphe du texte. */
.fiche__note {
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

.comparateur {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--espace-2);
    margin: var(--espace-3) 0 0;
    padding: var(--espace-2);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 12px; /* plafond de bloc, spec §9.4 */
}

/*
 * Chaque ligne est un sous-grille des colonnes du comparateur : sans cela,
 * chaque <li> calcule ses propres largeurs de colonne a partir de son seul
 * contenu, et le prix d'une ligne courte ne s'aligne plus avec celui d'une
 * ligne au nom long. Mesure a 320px : jusqu'a 30px de decalage entre lignes.
 */
.offre {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 0.125rem;
    padding-block: var(--espace-2);
    border-bottom: 1px solid var(--bordure);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s var(--courbe);
}

.comparateur .offre:last-child {
    border-bottom: none;
}

.offre:hover,
.offre:focus-visible {
    background: var(--nuit);
}

.offre__vignette {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 8px; /* plafond de bloc, plus serre que le conteneur */
    overflow: hidden;
    background: var(--nuit);
}

.offre__vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Sous 560px, le nom de l'offre prend les colonnes 2 et 3, et le couple
 * distance/prix descend sur une ligne a lui. Mesure a 375px avant ce
 * changement : le nom n'avait que 138px, « Vol en Montgolfiere a Meursault -
 * Survol de la Bourgogne » s'y repliait sur cinq lignes et chaque ligne du
 * comparateur montait a 181px — quatre offres visibles par ecran. Avec les
 * deux colonnes, le nom dispose de 231px, tient sur deux lignes, et la
 * hauteur de ligne retombe sous 120px.
 *
 * Le prix reste en colonne 3 et donc aligne d'une ligne a l'autre, grace au
 * subgrid : c'est ce qui permet de comparer d'un coup d'oeil.
 */
.offre__corps {
    grid-row: 1;
    grid-column: 2 / -1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.offre__corps a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.offre__corps a:hover,
.offre__corps a:focus-visible {
    color: var(--flamme-vif);
}

.offre__corps span {
    color: var(--ink-doux);
    font-size: var(--pas-0);
}

/*
 * Une ligne du comparateur porte deux liens qui ne menent pas au meme genre
 * d'endroit : le nom de l'offre part chez le marchand, la commune de decollage
 * reste sur le site. Sans distinction, ils s'affichaient tous deux en ink gras
 * sans soulignement, et rien ne disait au lecteur qu'il allait quitter la page
 * dans un cas et pas dans l'autre.
 *
 * Le lien interne garde donc la couleur du texte secondaire qui l'entoure et
 * se signale par un soulignement discret, plutot que de rivaliser avec le
 * titre de l'offre.
 */
.offre__corps span a {
    display: inline-block;
    /* 15 px de haut pour une boite en ligne : sous le minimum de 24 px du
       critere WCAG 2.5.8. Le remplissage vertical porte la cible a 24 px sans
       deplacer le texte, le retrait negatif rendant a la colonne la hauteur
       que le remplissage lui prend. */
    padding-block: 0.28rem;
    margin-block: -0.28rem;
    color: var(--ink-doux);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--bordure);
    text-underline-offset: 0.2em;
}

.offre__corps span a:hover,
.offre__corps span a:focus-visible {
    color: var(--flamme-vif);
    text-decoration-color: currentColor;
}

.offre__distance {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    color: var(--ink-doux);
    font-size: var(--pas-0);
    white-space: nowrap;
}

.offre__prix {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    color: var(--prix);
    font-weight: 700;
    font-size: var(--pas-2);
    white-space: nowrap;
}

/* Des 560px, la largeur suffit pour remettre distance et prix a droite du
   nom : deux lignes gagnees en hauteur sur chaque offre. */
@media (min-width: 560px) {
    .offre__corps {
        grid-row: 1 / 3;
        grid-column: 2;
    }

    .offre__distance {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
}

@media (min-width: 768px) {
    .comparateur {
        grid-template-columns: auto 1fr auto auto;
        column-gap: var(--espace-3);
    }

    .offre {
        grid-template-rows: auto;
    }

    .offre__vignette,
    .offre__corps {
        grid-row: 1;
    }

    .offre__vignette {
        width: 4.5rem;
        height: 4.5rem;
    }

    .offre__distance {
        grid-column: 3;
        grid-row: 1;
    }

    .offre__prix {
        grid-column: 4;
        grid-row: 1;
        font-size: var(--pas-3);
    }
}

/* ---------- Bloc SEO ---------- */

.bloc-seo {
    padding-block: var(--espace-4);
    border-top: 1px solid var(--bordure);
}

.bloc-seo > * + * {
    margin-top: var(--espace-2);
}

/*
 * Encart du simulateur sur l'accueil.
 *
 * Sans lui, le lien passait inapercu : un <h2> de plus au milieu d'une
 * douzaine d'autres dans .bloc-seo, la meme taille de texte que « Quel est
 * le prix » ou « Comment se deroule », alors que c'est le seul de ces H2 a
 * mener vers un outil plutot que de repondre a une question sur place. La
 * carte l'isole visuellement du flux de lecture ; la bordure flamme reprend
 * le meme signal deja utilise ailleurs sur le site pour « ceci est actif »
 * (case cochee du simulateur, focus clavier), pas une couleur inventee pour
 * l'occasion.
 */
.encart-simulateur {
    display: flex;
    flex-direction: column;
    gap: var(--espace-3);
    margin-block: var(--espace-5);
    padding: var(--espace-3);
    border: 1px solid var(--flamme);
    border-radius: 12px;
    background: var(--flamme-teinte);
}

.encart-simulateur h2 {
    margin: 0 0 var(--espace-1);
}

.encart-simulateur p {
    margin: 0;
    max-width: 62ch;
}

.encart-simulateur__bouton {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .encart-simulateur {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--espace-4);
    }

    .encart-simulateur__bouton {
        flex: 0 0 auto;
        align-self: center;
    }
}

/* ---------- Maillage interne ---------- */

.maillage {
    padding-block: var(--espace-4);
    border-top: 1px solid var(--bordure);
}

.maillage h2,
.maillage h3 {
    margin-bottom: var(--espace-2);
}

/*
 * La classe est nommee dans les deux selecteurs, pas seulement le conteneur :
 * home.php emploie .maillage__liens a l'interieur de .bloc-seo, hors de tout
 * .maillage, et la liste « Par region » s'y affichait en liens nus de 18 px
 * quand la meme classe donnait des pastilles de 36 px ailleurs. Une classe
 * doit porter son apparence, pas la tenir de son ascendance.
 */
.maillage ul,
.maillage__liens {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1) var(--espace-2);
    padding: 0;
    margin: 0;
}

.maillage a,
.maillage__liens a {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    border: 1px solid var(--bordure);
    color: var(--ink-doux);
    text-decoration: none;
    font-size: var(--pas-0);
    transition: color 0.2s var(--courbe), border-color 0.2s var(--courbe);
}

.maillage a:hover,
.maillage a:focus-visible,
.maillage__liens a:hover,
.maillage__liens a:focus-visible {
    color: var(--flamme-vif);
    border-color: var(--flamme);
}

/* ---------- Mouvement reduit ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Visuel de guide ---------- */

/*
 * Les photos viennent de banques libres (Unsplash, Pexels), en 1400 px de
 * large. Les dimensions sont declarees dans le HTML pour que le navigateur
 * reserve la place avant le chargement : sans cela, l'arrivee de l'image
 * pousse tout le texte vers le bas au milieu de la lecture.
 */
.guide__visuel {
    margin: 0 0 var(--espace-4);
}

.guide__visuel img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    /* Le fond nuit reste visible derriere : une photo de plein jour posee
       telle quelle sur un fond sombre fait une tache. Une legere
       desaturation et un voile la font entrer dans la palette. */
    filter: saturate(0.92) brightness(0.94);
}

.guide__visuel figcaption {
    margin-top: var(--espace-1);
    font-size: var(--pas-0);
    color: var(--ink-doux);
}

/* ---------- Bandeau photo de l'accueil ---------- */

.bandeau {
    position: relative;
    margin: 0 0 var(--espace-4);
    border-radius: 12px;
    overflow: hidden;
}

.bandeau img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.8);
}

.bandeau figcaption {
    position: absolute;
    right: var(--espace-2);
    bottom: var(--espace-1);
    font-size: 0.75rem;
    color: var(--ink-doux);
    text-shadow: 0 1px 3px var(--nuit);
}

@media (min-width: 768px) {
    .bandeau img { height: 320px; }
}

/*
 * Bandeau d'ouverture. Plus haut que le bandeau courant, moins fonce : il
 * ouvre la page au lieu de l'illustrer en passant.
 *
 * La hauteur mobile a d'abord ete rabotee pour proteger le bouton de
 * conversion, avant verification au navigateur : sur mobile la barre .cta est
 * en position fixed, collee au bas de l'ecran, et rien de ce qui la precede ne
 * peut la repousser. Mesure sur /vol/chateaux/ a 375x812 : titre jusqu'a
 * 295 px, hero 309 a 509, premier H2 a 590, barre de conversion 734 a 812. La
 * hauteur se choisit donc sur l'equilibre de la page, pas sur une contrainte
 * qui n'existe pas.
 */
.bandeau--heros {
    margin-top: var(--espace-2);
}

.bandeau--heros img {
    height: 200px;
    filter: saturate(0.95) brightness(0.88);
}

@media (min-width: 768px) {
    .bandeau--heros img { height: 340px; }
}

/*
 * Point d'ancrage de la photo : classes modificatrices plutot qu'un attribut
 * style inline, bloque silencieusement par la CSP style-src 'self' du site
 * (public/.htaccess, pas de unsafe-inline). Une classe par valeur de la liste
 * blanche $ancrages de templates/partials/heros.php, hors 'center' qui est
 * deja le comportement par defaut d'object-position sans reglage.
 */
.bandeau--heros img.bandeau--heros-ancrage-center-top { object-position: center top; }
.bandeau--heros img.bandeau--heros-ancrage-center-bottom { object-position: center bottom; }
.bandeau--heros img.bandeau--heros-ancrage-left-center { object-position: left center; }
.bandeau--heros img.bandeau--heros-ancrage-right-center { object-position: right center; }

/* ---------- Bandeau de consentement ---------- */
/*
 * [hidden] suffit a le masquer par defaut (etat pose dans le HTML,
 * templates/layout.php) : pas de sursaut visuel a l'affichage de la page
 * pendant que consentement.js decide s'il doit apparaitre.
 *
 * z-index sur --z-modale : au-dessus de tout le reste, comme un vrai modale,
 * meme si sa forme (bande fixee en bas, pas de voile) est plus discrete.
 */
.bandeau-consentement {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-modale);
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    padding: var(--espace-3);
    box-shadow: 0 -8px 24px rgb(12 20 33 / 45%);
}

.bandeau-consentement__contenu {
    max-width: 72rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3);
}

.bandeau-consentement p {
    color: var(--ink-doux);
    font-size: var(--pas-0);
    max-width: 56ch;
}

.bandeau-consentement p a {
    color: var(--ink);
}

.bandeau-consentement__actions {
    display: flex;
    gap: var(--espace-2);
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
    .bandeau-consentement {
        animation: bandeau-consentement-entree 0.3s var(--courbe);
    }
}

@keyframes bandeau-consentement-entree {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ---------- Facade video (YouTube, cliquable) ---------- */
/*
 * Ratio 16:9 fixe : la miniature et l'iframe qui la remplace au clic
 * (public/assets/video.js) partagent le meme conteneur, jamais de saut de
 * mise en page au chargement de la vraie video.
 */
.video-facade-conteneur {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    margin-block: var(--espace-4);
}

.video-facade {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    background: var(--nuit);
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-facade__bouton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--flamme);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgb(12 20 33 / 45%);
    transition: background-color 0.2s var(--courbe), transform 0.2s var(--courbe);
}

/* Triangle de lecture en CSS pur : pas d'icone externe pour un seul usage.
   margin-left recentre optiquement — un triangle sans ce decalage parait
   decale vers la gauche dans son cercle. */
.video-facade__bouton::before {
    content: '';
    border-style: solid;
    border-width: 0.9rem 0 0.9rem 1.4rem;
    border-color: transparent transparent transparent var(--nuit);
    margin-left: 0.3rem;
}

.video-facade:hover .video-facade__bouton,
.video-facade:focus-visible .video-facade__bouton {
    background: var(--flamme-vif);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-facade-conteneur iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ---------- Destination touristique (/destinations/{slug}/) ----------

   Le texte precede le comparateur dans le HTML (templates/territoire.php) :
   c'est lui qui porte la requete. A l'ecran, le comparateur passe devant,
   pour que le prix reste au premier ecran comme sur les pages ville. */

.territoire {
    display: flex;
    flex-direction: column;
}

.territoire__liste {
    order: -1;
}

.territoire__vols {
    padding-left: 1.1em;
    color: var(--ink-doux);
}

.territoire__vols li + li {
    margin-top: var(--espace-1);
}