/*
Theme Name:   GeneratePress Child — Dasnair
Template:     generatepress
Author:       Lumee by Infinity Aurora
Author URI:   https://lumee.ch
Description:  Thème enfant GeneratePress pour la refonte du site dasnair.ch (WordPress, FR/EN).
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* =========================================================
   Palette Dasnair — "Nuit & Laiton" (Direction 1, choix client)
   Nuit      #0B1622  (fond)
   Altitude  #16293C  (surfaces / cartes)
   Ivoire    #F1EEE7  (texte, titres)
   Laiton    #C2A878  (accent)  ·  Laiton foncé #8A6F3F
   Brume     #8FA3B5  (texte atténué)
   Titres : Jost (sans serif géométrique). Texte : Inter. Labels : IBM Plex Mono.

   Les COULEURS (fond, en-tête, navigation, liens, footer) sont gérées
   dans le Customizer GeneratePress → Couleurs.
   Ne restent ici que les réglages que le Customizer ne fait pas.
   ========================================================= */

/* =========================================================
   Palette disponible PARTOUT.
   Elle était déclarée uniquement sur « .dh » (les sections de contenu) :
   tout ce qui vit en dehors (en-tête, menu, bouton de fermeture, pied de page)
   recevait une variable inexistante, donc une règle silencieusement ignorée.
   ========================================================= */
:root {
  --nuit: #0B1622;
  --altitude: #16293C;
  --ivoire: #F1EEE7;
  --laiton: #C2A878;
  --laiton-fonce: #8A6F3F;
  --brume: #8FA3B5;
  --ligne: rgba(194, 168, 120, .35);
}

/* Police du site imposée (GeneratePress ne connaît pas Jost/Inter) */
body, button, input, select, textarea,
.entry-content, .widget {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
.site-title, .wp-block-heading {
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* =========================================================
   Sections pleine largeur : marges latérales + contenu centré
   (GeneratePress ne contraint pas les blocs alignfull/alignwide)
   ========================================================= */
.wp-block-group.alignfull,
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
  box-sizing: border-box;
}
.alignfull > .alignwide,
.alignfull > .wp-block-columns.alignwide,
.wp-block-cover.alignfull > .wp-block-cover__inner-container > * {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Navigation — style mockup (liens fins, liseré laiton au survol, CTA)
   ========================================================= */
/* Liens de premier niveau (hors bouton CTA) */
.main-navigation .main-nav > ul > li:not(.cta) > a {
  font-size: 13.5px !important;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  color: #CFD8E0 !important;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}
/* On neutralise le fond de survol par défaut de GeneratePress */
.main-navigation .main-nav > ul > li:not(.cta) > a:hover,
.main-navigation .main-nav > ul > li:not(.cta).sfHover > a,
.main-navigation .main-nav > ul > li:not(.cta):hover > a {
  background-color: transparent !important;
  color: #F1EEE7 !important;
}
/* Page courante en laiton */
.main-navigation .main-nav > ul > li.current-menu-item:not(.cta) > a {
  color: #C2A878 !important;
}
/* Liseré laiton qui grandit au survol / sur la page courante */
.main-navigation .main-nav > ul > li:not(.cta) > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  margin-top: 1em;
  height: 1px;
  background: #C2A878;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.main-navigation .main-nav > ul > li:not(.cta) > a:hover::after,
.main-navigation .main-nav > ul > li:not(.cta):hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item:not(.cta) > a::after {
  transform: scaleX(1);
}

/* Sous-menu déroulant : fond opaque OBLIGATOIRE.
   Sans ça il hérite de la navigation transparente et on lit la page au travers. */
.main-navigation ul ul,
.main-navigation .sub-menu {
  background-color: rgba(11, 22, 34, .98) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(241, 238, 231, .1);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
  min-width: 250px;
  padding: 6px 0;
}
.main-navigation ul ul li a,
.main-navigation .sub-menu li a {
  background-color: transparent !important;
  color: #CFD8E0 !important;
  font-size: 12.5px !important;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  padding: 12px 20px !important;
  line-height: 1.4 !important;
  height: auto !important;
  transition: color .25s ease, background-color .25s ease;
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation .sub-menu li.current-menu-item > a {
  color: var(--laiton) !important;
  background-color: rgba(241, 238, 231, .04) !important;
}
/* Pas de liseré dans le sous-menu */
.main-navigation ul ul li a::after { display: none !important; }

/* Chevron du menu déroulant : resserré (il créait un trou avant l'entrée suivante) */
.main-navigation .dropdown-menu-toggle {
  padding-left: 7px !important;
  padding-right: 0 !important;
}

/* Bouton CTA du menu (classe "cta") — rectangle net, majuscules, comme le mockup */
/* On centre le bouton verticalement pour qu'il ne remplisse pas toute la hauteur */
.main-navigation .main-nav ul li.cta {
  display: flex;
  align-items: center;
  margin-left: 18px;
}
.main-navigation .cta > a {
  background: #C2A878;
  color: #0B1622 !important;
  border: 1px solid #C2A878;
  border-radius: 0;
  padding: 13px 28px !important;
  height: auto !important;
  line-height: 1.1 !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.main-navigation .cta > a:hover {
  background: transparent;
  color: #C2A878 !important;
}

/* =========================================================
   Menu mobile en plein écran
   (le point de rupture de la navigation est réglé à 1024px)
   ========================================================= */
/* Les coordonnées ne servent que dans le menu mobile */
.menu-coords { display: none; }

@media (max-width: 1024px) {

  /* Le menu ouvert recouvre toute la page */
  .main-navigation.toggled .main-nav {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(11, 22, 34, .985) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 96px 24px 48px;
  }

  /* Bloc en flux (et non en flex) : les langues peuvent rester sur une ligne */
  .main-navigation.toggled .main-nav > ul {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 460px;
    margin: auto;
  }
  .main-navigation.toggled .main-nav > ul > li { display: block; width: 100%; float: none; }

  .main-navigation.toggled .main-nav > ul > li:not(.cta) > a {
    font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 26px !important;
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--ivoire) !important;
    padding: 15px 0 !important;
    line-height: 1.25 !important;
    text-align: center;
  }
  .main-navigation.toggled .main-nav > ul > li:not(.cta) > a:hover { color: var(--laiton) !important; }
  /* Pas de liseré dans le menu plein écran */
  .main-navigation.toggled .main-nav > ul > li > a::after { display: none !important; }

  /* Sous-menu Services : déroulé, sans panneau */
  .main-navigation.toggled .main-nav ul ul {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    width: 100% !important;
    padding: 0 0 8px;
  }
  .main-navigation.toggled .main-nav ul ul li a {
    font-size: 15px !important;
    color: var(--brume) !important;
    padding: 9px 0 !important;
    text-align: center;
  }

  /* Langues sur une seule ligne : inline-flex, sinon le séparateur « / »
     tombe au-dessus du lien. */
  .main-navigation.toggled .main-nav > ul > li.trp-menu-ls-item {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    margin-top: 16px;
    vertical-align: middle;
  }
  .main-navigation.toggled .main-nav > ul > li.trp-menu-ls-item > a { font-size: 13px !important; padding: 8px 6px !important; }

  /* Le CTA reste un bouton, centré */
  .main-navigation.toggled .main-nav > ul > li.cta {
    display: block !important;
    margin: 28px 0 0 !important;
    text-align: center !important;
  }
  .main-navigation.toggled .cta > a { display: inline-block !important; margin-left: 0 !important; }

  /* Bouton de fermeture : une vraie croix, au-dessus de l'overlay.
     ATTENTION : le bouton vit dans une AUTRE nav que le menu (toggle mobile
     en ligne de GeneratePress). On passe donc par « body.menu-ouvert »,
     posé en JS, et non par « .main-navigation.toggled ». */
  body.menu-ouvert .mobile-menu-control-wrapper { z-index: 10000; }
  body.menu-ouvert .menu-toggle {
    position: fixed !important;
    top: 6px;
    right: 8px;
    z-index: 10000 !important;
    width: 56px;
    height: 56px;
    padding: 0 !important;
    background: transparent !important;
    border: none;
  }
  body.menu-ouvert .menu-toggle .gp-icon,
  body.menu-ouvert .menu-toggle .mobile-menu,
  body.menu-ouvert .menu-toggle svg { display: none !important; }
  body.menu-ouvert .menu-toggle::before,
  body.menu-ouvert .menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 1.5px;
    background: var(--ivoire);
    transition: background-color .25s ease;
  }
  body.menu-ouvert .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
  body.menu-ouvert .menu-toggle::after { transform: translate(-50%, -50%) rotate(-45deg); }
  body.menu-ouvert .menu-toggle:hover::before,
  body.menu-ouvert .menu-toggle:hover::after { background: var(--laiton); }

  /* Coordonnées, en bas du menu.
     GeneratePress aligne à gauche ses éléments de menu : on force le centrage
     sur le bloc ET sur ses enfants, sinon seuls les liens se centrent. */
  .main-navigation.toggled .menu-coords {
    display: block;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(241, 238, 231, .12);
    text-align: center !important;
  }
  .main-navigation.toggled .menu-coords > * { text-align: center !important; }
  .menu-coords .mc-titre,
  .menu-coords .mc-adr,
  .menu-coords .mc-ops { display: block; }
  .menu-coords .mc-titre {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--laiton); margin-bottom: 12px;
  }
  .menu-coords .mc-adr { font-size: 13.5px; color: var(--brume); font-weight: 300; margin-bottom: 10px; }
  .menu-coords .mc-tel,
  .menu-coords .mc-mail {
    display: block; color: var(--ivoire) !important; font-size: 15px; font-weight: 300;
    padding: 3px 0; text-decoration: none;
  }
  .menu-coords .mc-tel:hover, .menu-coords .mc-mail:hover { color: var(--laiton) !important; }
  .menu-coords .mc-ops {
    margin-top: 12px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7d8da0;
  }
}

/* Page bloquée pendant que le menu plein écran est ouvert.
   « menu-ouvert » est posé sur le body par le script (functions.php). */
body.menu-ouvert { overflow: hidden; }
/* L'en-tête (qui contient le menu et sa croix) vit dans un contexte
   d'empilement à z-index 100, sous la barre du haut (101). Sans ça,
   l'overlay ET la croix passent DERRIÈRE la barre supérieure. */
body.menu-ouvert .site-header { z-index: 9999 !important; }

/* Sélecteur de langue TranslatePress dans le menu → "FR / EN" comme le mockup */
/* Pas de drapeaux : ils ressortent sur mobile et cassent le registre.
   Le drapeau américain pour l'anglais serait de toute façon discutable. */
.main-navigation .trp-flag-image,
.main-navigation img.trp-flag-image { display: none !important; }
.main-navigation .main-nav > ul > li.trp-language-switcher-container {
  display: flex;
  align-items: center;
}
.main-navigation .main-nav > ul > li.trp-language-switcher-container > a {
  padding-left: 7px !important;
  padding-right: 7px !important;
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8FA3B5 !important;            /* brume par défaut */
}
/* Langue active en ivoire */
.main-navigation .main-nav > ul > li.trp-language-switcher-container.current-language-menu-item > a {
  color: #F1EEE7 !important;
  font-weight: 600;
}
/* Survol en laiton */
.main-navigation .main-nav > ul > li.trp-language-switcher-container > a:hover {
  color: #C2A878 !important;
}
/* Pas de liseré sous le sélecteur de langue */
.main-navigation .main-nav > ul > li.trp-language-switcher-container > a::after {
  display: none !important;
}
/* Séparateur "/" entre les deux langues */
.main-navigation .main-nav > ul > li.trp-menu-ls-item + li.trp-menu-ls-item::before {
  content: "/";
  color: #8FA3B5;
  font-size: 12px;
  margin-right: 3px;
}

/* Titres de colonnes du footer — mêmes style et hauteur, quel que soit le bloc */
.site-footer .widget-title,
.site-footer .documents-titre,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #F1EEE7;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 18px;
}

/* Liens et taille du footer (mockup : 13,5px, gris-brume, laiton au survol) */
.site-footer { font-size: 13.5px; }
.site-footer a { color: #7D8DA0; }
.site-footer a:hover { color: #C2A878; }

/* Aligner les colonnes de widgets du footer en haut (Documents ne descend plus) */
.footer-widgets,
.site-footer .footer-widgets,
.inside-footer-widgets { align-items: flex-start; }
.footer-widgets .widget,
.footer-widgets .inside-footer-widgets > div { margin-top: 0; }
/* Titre Documents généré par le shortcode : même marge que les vrais titres */
.documents-titre { margin: 0 0 18px; }
.documents-dasnair { margin: 0; padding: 0; list-style: none; }
.documents-dasnair li { margin-bottom: 8px; }

/* Filet de séparation entre les widgets et la barre de pied de page */
.site-info {
  border-top: 1px solid rgba(194, 168, 120, .22);
}

/* Barre inférieure : copyright à gauche, AOC · OFAC / EASA à droite */
.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================
   Révélations au défilement
   La classe .dh-reveal est posée par le JS (functions.php).
   Si le script ne tourne pas, aucune classe = rien n'est masqué.
   ========================================================= */
.dh-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease, transform 1.05s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.dh-reveal.is-in { opacity: 1; transform: none; }
/* Accessibilité : on n'anime pas si la personne a désactivé les animations */
@media (prefers-reduced-motion: reduce) {
  .dh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   Boutons Gutenberg (hero, CTA) — style mockup : rectangle net, majuscules
   ========================================================= */
.wp-block-button__link {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .16em !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 14px 28px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Bouton plein laiton : bordure laiton, se vide au survol */
.wp-block-button__link.has-laiton-background-color {
  border: 1px solid #C2A878;
}
.wp-block-button__link.has-laiton-background-color:hover {
  background-color: transparent !important;
  color: #C2A878 !important;
}
/* Bouton contour (ghost) : texte + bordure laiton au survol */
.wp-block-button__link.has-laiton-border-color:hover {
  color: #C2A878 !important;
  border-color: #C2A878 !important;
}

/* =========================================================
   Barre supérieure (top bar)
   ========================================================= */
.dasnair-topbar {
  background: #0B1622;
  border-bottom: 1px solid rgba(241, 238, 231, .08);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: #8FA3B5;
  position: relative;
  z-index: 101;
}
.dasnair-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dasnair-topbar .dt-left { text-transform: uppercase; }
.dasnair-topbar b { color: #C2A878; font-weight: 600; }
.dasnair-topbar .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; color: #C2A878; }
.dasnair-topbar a { color: inherit; text-decoration: none; }
@media (max-width: 600px) {
  .dasnair-topbar .dt-left { display: none; }
  .dasnair-topbar-inner { justify-content: center; }
}

/* =========================================================
   En-tête : sticky partout, transparent sur l'accueil,
   solidifié au défilement (classe .nav-solid ajoutée en JS)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header,
.main-navigation {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Pages à hero (accueil, fiches avion, Flotte, La compagnie…) :
   en-tête et navigation transparents, superposés à l'image.
   La classe « dasnair-hero » est posée automatiquement par functions.php. */
.dasnair-hero .site-header,
.dasnair-hero .main-navigation {
  background-color: transparent !important;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
/* La barre de menu reste TOUJOURS transparente (elle est dans l'en-tête) :
   on évite ainsi le cumul de deux couches semi-transparentes = teinte plus foncée. */
.dasnair-hero .main-navigation,
.dasnair-hero.dasnair-scrolled .main-navigation {
  background-color: transparent !important;
}
/* Seul l'en-tête (conteneur) se solidifie au défilement → teinte uniforme */
.dasnair-hero.dasnair-scrolled .site-header {
  background-color: rgba(11, 22, 34, .92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(241, 238, 231, .08);
}
/* Pages sans hero : en-tête TOUJOURS nuit solide */
body:not(.dasnair-hero) .site-header {
  background-color: #0B1622 !important;
  border-bottom: 1px solid rgba(241, 238, 231, .08);
}
body:not(.dasnair-hero) .main-navigation { background-color: transparent !important; }

/* Hauteur du bloc en-tête (logo + menu) = 77px, comme le mockup */
.site-header .inside-header {
  min-height: 77px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.site-header .site-logo img,
.site-header .header-image {
  height: 40px;
  width: auto;
}

/* =========================================================
   Sections d'accueil portées du mockup (Direction 1 · Nuit & Laiton)
   Blocs HTML personnalisés → rendu fidèle (grilles à filet, hover,
   images en débord, section Flotte sur fond ivoire).
   Tout est porté sous « .dh » pour éviter les collisions.
   Les titres restent en Jost (imposé plus haut).
   ========================================================= */
.dh {
  --nuit:#0B1622; --altitude:#16293C; --ivoire:#F1EEE7;
  --laiton:#C2A878; --brume:#8FA3B5; --ligne:rgba(194,168,120,.35);
  padding: 104px 0;
  box-sizing: border-box;
}
/* Pleine largeur, quel que soit le conteneur du thème */
.dh-full {
  position: relative;
  left: 50%; right: 50%;
  width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
}
.dh .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dh h2 { font-weight: 400; font-size: clamp(30px,3.6vw,44px); line-height: 1.12; color: var(--ivoire); }
.dh h3 { font-weight: 400; }
.dh .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.dh .eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--laiton); margin-bottom: 28px; display: flex; align-items: center; gap: 16px;
}
.dh .eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--ligne); }
.dh .section-head { max-width: 680px; margin-bottom: 60px; }
.dh .section-head p { margin-top: 18px; color: #b9c5d0; font-weight: 300; }
.dh .btn {
  display: inline-block; background: var(--laiton); color: var(--nuit);
  padding: 14px 28px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; border: 1px solid var(--laiton); transition: all .25s; cursor: pointer;
}
.dh .btn:hover { background: transparent; color: var(--laiton); }

/* Bandeau data + carte des trajets (SVG) */
.dh.dh-data {
  padding: 0;
  background: var(--altitude);
  border-top: 1px solid rgba(241, 238, 231, .1);
  border-bottom: 1px solid rgba(241, 238, 231, .1);
}
.dh-data .data-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.dh-data .cell {
  padding: 30px 26px;
  border-left: 1px solid rgba(241, 238, 231, .08);
}
.dh-data .cell:first-child { border-left: none; }
.dh-data .cell .mono {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laiton);
}
.dh-data .cell b {
  display: block;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ivoire);
}
.dh-data .cell .sub {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brume);
}
.dh-data .planvol {
  position: relative;
  border-top: 1px solid rgba(241, 238, 231, .1);
  background: var(--altitude);
}
.dh-data .planvol svg { display: block; width: 100%; height: auto; }
.dh-data .routes path { fill: none; stroke: rgba(194, 168, 120, .35); stroke-width: 1; stroke-dasharray: 3 5; }
.dh-data .routes path.active { stroke: var(--laiton); stroke-width: 1.4; stroke-dasharray: none; }
.dh-data .routes circle { fill: var(--laiton); }
.dh-data .routes text { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; fill: var(--brume); letter-spacing: .12em; }
.dh-data .routes text.base { fill: var(--laiton); }
.dh-data .avion { fill: var(--ivoire); }
@media (max-width: 860px) {
  .dh-data .data-wrap { grid-template-columns: repeat(2, 1fr); }
  .dh-data .cell:nth-child(-n+2) { border-left: none; }
  .dh-data .cell:nth-child(3) { border-left: none; }
}

/* Section carte des trajets (D3, avec repli statique) */
.dh.dh-map { padding-top: 50px; padding-bottom: 50px; }
@media (max-width: 860px) { .dh.dh-map { padding-top: 36px; padding-bottom: 36px; } }
.dh-map { background: var(--nuit); color: var(--ivoire); }
.dh-map .map-shell { position: relative; background: var(--nuit); border: 1px solid rgba(241,238,231,.07); overflow: hidden; }
.dh-map svg { display: block; width: 100%; height: auto; }
.dh-map .country { fill: #152537; stroke: #0B1622; stroke-width: .5; }
.dh-map .grat { fill: none; stroke: rgba(143,163,181,.08); stroke-width: .5; }
.dh-map .city-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; fill: var(--brume); }
.dh-map .city-label.base { fill: var(--laiton); }
/* Repli statique */
.dh-map .fb-routes path { fill: none; stroke: rgba(194,168,120,.35); stroke-width: 1; stroke-dasharray: 3 5; }
.dh-map .fb-routes path.active { stroke: var(--laiton); stroke-width: 1.4; stroke-dasharray: none; }
.dh-map .fb-routes circle { fill: var(--laiton); }
.dh-map .fb-routes text { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; fill: var(--brume); letter-spacing: .12em; }
.dh-map .fb-routes text.base { fill: var(--laiton); }
/* Liste des destinations (HTML pur, toujours visible) */
.dh-map .dest-list { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(241,238,231,.1); }
.dh-map .dl-head { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--laiton); margin-bottom: 16px; }
.dh-map .dl-items { display: flex; flex-wrap: wrap; font-weight: 300; font-size: 15px; line-height: 2; }
.dh-map .dl-items span { position: relative; padding-right: 16px; color: #cdd6df; }
.dh-map .dl-items span:not(:last-child)::after { content: "·"; position: absolute; right: 5px; color: var(--laiton); opacity: .6; }
.dh-map .dl-note { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #5b6c7d; margin-top: 14px; }
@media (max-width: 760px) { .dh-map .dest-list { grid-template-columns: 1fr; gap: 26px; } }

/* Services : grille 3 colonnes, image en débord, couleur au survol */
.dh-services { background: var(--nuit); color: var(--ivoire); }
.dh .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(241,238,231,.1); }
.dh .service { background: var(--nuit); padding: 44px 36px; transition: background .3s; }
.dh .service-img { aspect-ratio: 16/9; margin: -44px -36px 28px; background: #16293C center/cover no-repeat; filter: saturate(.92); }
.dh .service:hover { background: var(--altitude); }
.dh .service .mono { color: var(--laiton); font-size: 11px; letter-spacing: .18em; display: block; margin-bottom: 22px; }
.dh .service h3 { font-size: 24px; margin-bottom: 14px; color: var(--ivoire); }
.dh .service p { font-size: 14.5px; color: #9fadbb; font-weight: 300; margin-bottom: 24px; }
.dh .service .lien { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--laiton); display: inline-flex; align-items: center; gap: 10px; }
.dh .service .lien svg { transition: transform .25s; }
.dh .service:hover .lien svg { transform: translateX(6px); }
/* Carte entièrement cliquable : le lien « En savoir plus » est étiré sur toute
   la carte via un ::after. Évite d'imbriquer un lien dans un lien (HTML invalide). */
.dh .service { position: relative; }
.dh .service .lien::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Flotte : section sur fond ivoire, carte blanche centrée */
.dh-flotte { background: var(--ivoire); color: var(--nuit); }
.dh-flotte h2 { color: var(--nuit); }
.dh-flotte .section-head p { color: #4a5560; }
.dh-flotte .eyebrow { color: #8a6f3f; }
.dh-flotte .eyebrow::before { background: #8a6f3f; }
.dh .avions { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 680px; margin: 0 auto; }
.dh .avion-card { background: #fff; border: 1px solid rgba(11,22,34,.1); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.dh .avion-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(11,22,34,.16); }
/* NB : ces règles sont cloisonnées à « .avion-card » (la carte de l'accueil).
   Sans ce cloisonnement, l'aspect-ratio contaminait « .avion-item » (module Flotte)
   et forçait l'image à 680px de large dans une colonne de 604px. */
.dh .avion-card .avion-visu { aspect-ratio: 16/8; background: linear-gradient(180deg,rgba(11,22,34,.2),rgba(11,22,34,.55)), url('https://dasnair.ch/wp-content/uploads/2018/04/Dasnair-S.A-HBJSC-IMG_1079-e1522774477301.jpg') center/cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; }
.dh .avion-card .avion-visu::after { content: attr(data-note); position: absolute; right: 12px; bottom: 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241,238,231,.75); background: rgba(11,22,34,.5); padding: 5px 10px; }
.dh .avion-card .avion-visu .immat { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--laiton); letter-spacing: .3em; font-size: 13px; }
.dh .avion-card .corps { padding: 32px 32px 36px; }
.dh .avion-card h3 { font-size: 27px; color: var(--nuit); }
.dh .avion-card .specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 24px 0 28px; border-top: 1px solid rgba(11,22,34,.1); padding-top: 22px; }
.dh .avion-card .specs b { display: block; font-size: 17px; color: var(--nuit); }
.dh .avion-card .specs .mono { font-size: 15px; }
.dh .avion-card .specs span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7d8794; }
.dh .avion-card .feat { font-size: 13px; color: #566270; border-top: 1px solid rgba(11,22,34,.1); padding-top: 18px; margin-bottom: 26px; }
.dh .avion-card .feat span { color: var(--nuit); }
.dh .avion-card .btn { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }
.dh .avion-card .btn:hover { background: transparent; color: var(--nuit); }

/* La compagnie : 2 colonnes (visuel + liste numérotée) */
.dh-engagements { background: var(--nuit); color: var(--ivoire); }
.dh-engagements .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; }
/* Visuel équipage. Image provisoire (générée) : à remplacer par une photo
   réelle de l'équipage Dasnair dès que possible. */
.dh .eng-visu {
  aspect-ratio: 4/5;
  background: linear-gradient(165deg, rgba(11,22,34,.12), rgba(11,22,34,.55) 85%),
              url('https://dasnair.lumee.ch/wp-content/uploads/2026/07/Gemini_Generated_Image_nz3x0pnz3x0pnz3x.webp') center/cover no-repeat;
  position: relative;
}
.dh .eng-visu::after { content: "Équipage devant le Falcon, tarmac LSGG"; position: absolute; right: 12px; bottom: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,238,231,.75); background: rgba(11,22,34,.5); padding: 5px 10px; }
.dh .eng-liste { list-style: none; display: grid; gap: 0; margin-top: 38px; padding: 0; }
.dh .eng-liste li { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid rgba(241,238,231,.1); align-items: flex-start; }
.dh .eng-liste .mono { color: var(--laiton); font-size: 12px; flex: none; margin-top: 4px; }
.dh .eng-liste h4 { font-size: 16.5px; font-weight: 600; margin-bottom: 4px; color: var(--ivoire); }
.dh .eng-liste p { font-size: 14px; color: #9fadbb; font-weight: 300; }

/* Responsive */
@media (max-width: 860px) {
  .dh { padding: 72px 0; }
  .dh .services-grid, .dh .avions { grid-template-columns: 1fr; }
  .dh-engagements .wrap { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================
   Page Contact
   ========================================================= */
/* Décalage d'ancrage : la section visée n'est pas cachée sous l'en-tête sticky */
#composer-un-vol, #nous-ecrire, #flotte, #services, #la-compagnie { scroll-margin-top: 120px; }

.dh.dh-contact-head { background: var(--nuit); padding-top: 42px; padding-bottom: 22px; }
.dh.dh-vol { background: var(--altitude); }
.dh.dh-contact { background: var(--nuit); }
.dh-vol, .dh-contact { color: var(--ivoire); }

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contact-aside .mini-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--laiton); margin-bottom: 14px; }
.contact-aside h3 { font-size: 26px; color: var(--ivoire); margin-bottom: 14px; }
.contact-aside .aside-lead { color: #b9c5d0; font-weight: 300; margin-bottom: 28px; }
.contact-coords { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-coords li { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(241,238,231,.1); font-weight: 300; color: var(--ivoire); }
.contact-coords .cc-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brume); }
.contact-coords a { color: var(--laiton); }
.contact-coords a:hover { color: var(--ivoire); }

/* Carte du formulaire */
.contact-formcard { background: rgba(241,238,231,.02); border: 1px solid rgba(241,238,231,.08); padding: 34px 32px; }
.dh-vol .contact-formcard { background: rgba(11,22,34,.45); }

/* Champs Contact Form 7 (.dasnair-form) */
.dasnair-form .df-row { margin: 0 0 16px; }
.dasnair-form .df-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dasnair-form label { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.dasnair-form input[type=text],
.dasnair-form input[type=email],
.dasnair-form input[type=tel],
.dasnair-form input[type=number],
.dasnair-form input[type=date],
.dasnair-form select,
.dasnair-form textarea {
  width: 100%; margin-top: 8px; background: #0B1622; border: 1px solid rgba(241,238,231,.14);
  color: var(--ivoire); font-family: "Inter", sans-serif; font-size: 15px; font-weight: 300;
  padding: 12px 14px; border-radius: 0; transition: border-color .2s;
}
.dasnair-form textarea { min-height: 130px; resize: vertical; }
.dasnair-form input:focus, .dasnair-form select:focus, .dasnair-form textarea:focus { outline: none; border-color: var(--laiton); }
.dasnair-form input[type=file] { color: var(--brume); font-family: "Inter", sans-serif; margin-top: 8px; font-size: 13px; width: 100%; }
.dasnair-form input[type=file]::file-selector-button {
  background: transparent; color: var(--laiton); border: 1px solid rgba(194,168,120,.45);
  border-radius: 0; padding: 8px 14px; margin-right: 12px; cursor: pointer;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; transition: all .25s;
}
.dasnair-form input[type=file]::file-selector-button:hover { background: var(--laiton); color: var(--nuit); }

/* Zones de dépôt de documents (CV, lettre, autres) */
.dasnair-form .df-files-titre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--laiton); margin: 26px 0 12px;
}
.dasnair-form .df-files { display: grid; gap: 12px; margin: 0 0 20px; }
.dasnair-form .df-file {
  border: 1px dashed rgba(241, 238, 231, .2);
  padding: 18px 20px;
  transition: border-color .25s, background-color .25s;
  background: rgba(241, 238, 231, .015);
}
.dasnair-form .df-file:hover { border-color: rgba(194, 168, 120, .55); background: rgba(194, 168, 120, .04); }
.dasnair-form .df-file .dff-t {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivoire);
}
.dasnair-form .df-file .dff-t em { color: var(--laiton); font-style: normal; }
.dasnair-form .df-file .dff-h {
  display: block;
  font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 300;
  color: var(--brume); margin-top: 5px;
  text-transform: none; letter-spacing: normal;
}
/* CF7 enveloppe chaque champ dans un span EN LIGNE : on le force en bloc,
   sinon le bouton se colle au texte. */
.dasnair-form .df-file .wpcf7-form-control-wrap { display: block; margin-top: 14px; }
.dasnair-form .df-file input[type=file] { margin-top: 0; }
.dasnair-form .df-file .wpcf7-not-valid-tip { margin-top: 8px; }
.dasnair-form .df-consent { font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--brume); font-weight: 300; margin: 6px 0 18px; text-transform: none; letter-spacing: normal; }
.dasnair-form .df-consent label { display: inline; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.dasnair-form .wpcf7-list-item { margin: 0; }
.dasnair-form .df-submit { margin: 0; }
.dasnair-form input[type=submit], .dasnair-form .wpcf7-submit {
  background: var(--laiton); color: var(--nuit); border: 1px solid var(--laiton); border-radius: 0;
  text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: 12.5px;
  padding: 14px 30px; cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.dasnair-form input[type=submit]:hover, .dasnair-form .wpcf7-submit:hover { background: transparent; color: var(--laiton); }

/* Carte Genève Aéroport (Leaflet) */
.dh-map-contact { position: relative; }
.airport-map { width: 100%; height: 440px; position: relative; background: #16293C; border-top: 1px solid rgba(241,238,231,.1); border-bottom: 1px solid rgba(241,238,231,.1); }
.airport-map .leaflet-container { background: #0B1622; font-family: "Inter", sans-serif; }
.map-fallback-contact { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; z-index: 1; }
.mfc-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #C2A878; }
.mfc-addr { color: #8FA3B5; font-weight: 300; }
.mfc-link { color: #C2A878; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .dasnair-form .df-2 { grid-template-columns: 1fr; }
  .airport-map { height: 340px; }
}

/* =========================================================
   Page La compagnie (version premium)
   ========================================================= */
/* Ouverture : hero image + voile */
.dh.dh-compagnie-head {
  background: linear-gradient(180deg, rgba(11,22,34,.72), rgba(11,22,34,.5) 45%, rgba(11,22,34,.96)),
              url('https://dasnair.lumee.ch/wp-content/uploads/2026/07/dasnair-hero-2400x1200-falcon-vol.webp') center/cover no-repeat;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 64px;
}
.dh-compagnie-head .wrap { width: 100%; }
.dh-compagnie-head .section-head { margin-bottom: 0; }
.dh-compagnie-head h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; font-weight: 300; color: var(--ivoire); }
.dh-compagnie-head h1 .or { color: var(--laiton); }

.dh-credo { background: var(--altitude); text-align: center; }
.dh-valeurs { background: var(--nuit); }
.dh-heritage { background: var(--nuit); text-align: center; }
.dh-signature { background: var(--nuit); text-align: center; }

/* Le métier : split visuel + texte */
.dh.dh-metier { background: var(--altitude); padding: 0; }
.dh-metier .metier-split { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 80vh; }
.dh-metier .metier-visu {
  background: linear-gradient(90deg, rgba(11,22,34,.28), rgba(11,22,34,0)),
              url('https://dasnair.lumee.ch/wp-content/uploads/2026/07/dasnair-hero-2400x1200-cockpit1.webp') center/cover no-repeat;
}
.dh-metier .metier-txt { display: flex; flex-direction: column; justify-content: center; padding: 88px clamp(30px, 5vw, 84px); }
.dh-metier .section-head { margin-bottom: 10px; }

/* Flotte : bandeau image */
.dh-flotte-teaser {
  background: linear-gradient(rgba(11,22,34,.8), rgba(11,22,34,.8)),
              url('https://dasnair.lumee.ch/wp-content/uploads/2026/07/dasnair-hero-2400x1200-falcon-reflet.webp') center/cover no-repeat;
  text-align: center;
}
.dh-flotte-teaser .section-head { max-width: 660px; margin: 0 auto 28px; }
.dh-flotte-teaser .eyebrow { justify-content: center; }

/* Trio de valeurs */
.dh .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 8px; }
.dh .trio .t-num { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--laiton); font-size: 12px; letter-spacing: .16em; margin-bottom: 14px; }
.dh .trio h4 { font-size: 20px; font-weight: 400; color: var(--ivoire); margin-bottom: 10px; }
.dh .trio p { color: #9fadbb; font-weight: 300; font-size: 14.5px; }

/* Citation-manifeste */
.dh-credo .rule { width: 1px; height: 64px; background: linear-gradient(var(--laiton), transparent); margin: 0 auto 34px; }
.dh-credo blockquote { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 200; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.16; max-width: 20ch; margin: 0 auto; color: var(--ivoire); }
.dh-credo blockquote .or { color: var(--laiton); }
.dh-credo cite { display: block; margin-top: 26px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brume); }

/* Métier : lien */
.dh .modele-link { margin-top: 34px; }

/* Héritage : 2001 monumental + frise */
.dh-heritage .big { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 200; font-size: clamp(80px, 15vw, 180px); line-height: .9; color: var(--ivoire); }
.dh-heritage .cap { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--laiton); margin: 8px 0 22px; }
.dh-heritage .h-intro { max-width: 52ch; margin: 0 auto 50px; color: #b9c5d0; font-weight: 300; }
.dh .timeline { max-width: 720px; margin: 0 auto; text-align: left; }
.dh .tl { display: grid; grid-template-columns: 130px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid rgba(241,238,231,.12); align-items: baseline; }
.dh .tl:last-child { border-bottom: 1px solid rgba(241,238,231,.12); }
.dh .tl .yr { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 200; font-size: 28px; color: var(--laiton); }
.dh .tl .ev h4 { font-size: 17px; font-weight: 500; color: var(--ivoire); margin-bottom: 6px; }
.dh .tl .ev p { color: #9fadbb; font-weight: 300; font-size: 14px; }

/* Signature */
.dh-signature .sig-logo { height: 38px; width: auto; margin: 0 auto 26px; display: block; opacity: .9; }
.dh-signature .sig-stmt { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 200; font-size: clamp(24px, 3.2vw, 40px); max-width: 22ch; margin: 0 auto; line-height: 1.2; color: var(--ivoire); }
.dh-signature .cta-buttons { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Bouton contour (ghost) — pages internes */
.dh .btn.ghost { background: transparent; color: var(--ivoire); border-color: rgba(241, 238, 231, .35); }
.dh .btn.ghost:hover { background: transparent; border-color: var(--laiton); color: var(--laiton); }

@media (max-width: 860px) {
  .dh .trio { grid-template-columns: 1fr; gap: 26px; }
  .dh .tl { grid-template-columns: 90px 1fr; gap: 18px; }
  .dh.dh-compagnie-head { min-height: 52vh; padding-bottom: 44px; }
  .dh-metier .metier-split { grid-template-columns: 1fr; }
  .dh-metier .metier-visu { min-height: 50vh; }
}

/* =========================================================
   Pages Services (hub + une page par métier)
   ========================================================= */
/* Hero réutilisable : l'image est posée en style inline sur la section,
   pour avoir un visuel différent par service. */
.dh.dh-services-head {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 64px;
  background: var(--altitude) center/cover no-repeat;
}
.dh-services-head .wrap { width: 100%; }
.dh-services-head .section-head { margin-bottom: 0; }
.dh-services-head h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; font-weight: 300; color: var(--ivoire); }
.dh-services-head h1 .or { color: var(--laiton); }

.dh-services-cards { background: var(--nuit); }
.dh-experience { background: var(--altitude); }
.dh-modele-integre { background: var(--nuit); }
.dh-service-intro { background: var(--nuit); }
.dh-service-points { background: var(--altitude); }
.dh-service-teaser { background: var(--nuit); }

/* Le hub réutilise la grille de services de l'accueil (.services-grid / .service) */
.dh-services-cards .services-grid { margin-top: 0; }

/* Bande image pleine largeur : respiration entre deux sections de texte.
   Fond fixe = léger effet de parallax au défilement. */
.dh-bande {
  height: 46vh;
  min-height: 300px;
  background: #16293C center/cover no-repeat fixed;
  border-top: 1px solid rgba(241, 238, 231, .08);
  border-bottom: 1px solid rgba(241, 238, 231, .08);
}
@media (max-width: 860px) {
  .dh-bande { height: 34vh; min-height: 220px; background-attachment: scroll; }
}

/* Page de service : le teaser est centré */
.dh-service-teaser { text-align: center; }
.dh-service-teaser .section-head { max-width: 660px; margin: 0 auto 28px; }
.dh-service-teaser .eyebrow { justify-content: center; }

@media (max-width: 860px) {
  .dh.dh-services-head { min-height: 50vh; padding-bottom: 44px; }
}

/* =========================================================
   Certifications / affiliations
   Bandeau ivoire : les logos des organismes sont conçus pour
   du fond clair, ils seraient illisibles sur le nuit.
   ========================================================= */
.dh-certifs { background: var(--ivoire); color: var(--nuit); }
.dh-certifs h2 { color: var(--nuit); }
/* Sur fond ivoire, le laiton clair passe mal : on descend d'un cran. */
.dh-certifs .eyebrow { color: #6b5325; }
.dh-certifs .eyebrow::before { background: #6b5325; }
.certifs-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.certifs-intro .section-head { margin-bottom: 0; }
/* Sélecteur assez fort pour battre « .dh .section-head p », qui impose
   un gris clair (#b9c5d0) pensé pour le fond nuit et illisible ici. */
.dh-certifs .section-head p,
.dh-certifs .certifs-intro p { color: #384350; font-weight: 300; }

.certifs-carrousel { position: relative; min-width: 0; }
.certifs-piste {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.certifs-piste::-webkit-scrollbar { display: none; }
.certif-item { flex: 0 0 190px; scroll-snap-align: start; text-align: center; }
.certif-item .certif-lien { display: block; color: inherit; }
.certif-logo { height: 86px; display: flex; align-items: center; justify-content: center; }
.certif-logo img {
  max-height: 86px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .7;
  transition: filter .35s ease, opacity .35s ease;
}
.certif-item:hover .certif-logo img { filter: none; opacity: 1; }
.certif-nom {
  margin-top: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b5325;
}
.certif-leg { margin-top: 7px; font-size: 13px; color: #46505c; font-weight: 300; line-height: 1.55; }
/* Pas de soulignement sur les entrées cliquables */
.certif-item .certif-lien,
.certif-item .certif-lien:hover { text-decoration: none; }
.certif-item .certif-lien:hover .certif-nom { color: #0B1622; }

.certifs-nav { display: flex; gap: 8px; margin-top: 30px; }
.certifs-nav button {
  width: 44px; height: 44px;
  border: 1px solid rgba(11, 22, 34, .2);
  background: transparent; color: #0B1622;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.certifs-nav button:hover { border-color: #8a6f3f; color: #8a6f3f; background: rgba(138, 111, 63, .06); }

@media (max-width: 860px) {
  .certifs-grid { grid-template-columns: 1fr; gap: 34px; }
  .certif-item { flex: 0 0 150px; }
  .certif-logo { height: 70px; }
  .certif-logo img { max-height: 70px; }
}

/* =========================================================
   FAQ (accordéon natif <details>) — réutilisable sur toutes les pages
   Pas de JavaScript : le texte des réponses est dans le HTML,
   donc indexé par Google et lisible par les IA, même replié.
   ========================================================= */
.dh-faq { background: var(--altitude); }
.dh-faq.sur-nuit { background: var(--nuit); }
.faq-liste { max-width: 860px; border-top: 1px solid rgba(241, 238, 231, .12); }
.faq-item { border-bottom: 1px solid rgba(241, 238, 231, .12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 19px;
  color: var(--ivoire);
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--laiton); }
/* Croix qui pivote en moins à l'ouverture */
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--laiton);
  transition: transform .3s ease, opacity .3s ease;
}
.faq-item summary::before { width: 14px; height: 1px; margin-top: -1px; }
.faq-item summary::after { width: 1px; height: 14px; margin-top: -7px; right: 10px; }
.faq-item[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--laiton); }
.faq-rep { padding: 0 44px 26px 0; }
.faq-rep p { color: #9fadbb; font-weight: 300; font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.faq-rep p:last-child { margin-bottom: 0; }
.faq-rep a { color: var(--laiton); }
.faq-rep a:hover { color: var(--ivoire); }
.faq-rep strong { color: var(--ivoire); font-weight: 500; }

/* =========================================================
   Pages légales (mentions légales, confidentialité, cookies)
   ========================================================= */
.dh-legal { background: var(--nuit); }
.dh.dh-legal { padding-top: 52px; }
.legal-texte { max-width: 760px; color: #c2ccd6; font-weight: 300; }
.legal-texte .legal-intro { color: var(--brume); font-size: 14.5px; padding-bottom: 22px; border-bottom: 1px solid rgba(241,238,231,.1); margin-bottom: 8px; }
.legal-texte h2 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--laiton); font-weight: 500;
  margin: 44px 0 14px;
}
.legal-texte p { margin-bottom: 16px; font-size: 15px; line-height: 1.75; }
.legal-texte strong { color: var(--ivoire); font-weight: 500; }
.legal-texte a { color: var(--laiton); }
.legal-texte a:hover { color: var(--ivoire); }
.legal-texte .legal-maj { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(241,238,231,.1); font-size: 12.5px; color: #7d8da0; }
/* Champs à compléter : visibles pendant la préparation, à retirer avant mise en ligne */
.legal-texte mark.a-completer {
  background: rgba(216, 35, 42, .18);
  color: #ffb3b6;
  padding: 2px 7px;
  border: 1px dashed rgba(216, 35, 42, .5);
}

/* =========================================================
   Page Carrières + module Poste
   ========================================================= */
.dh.dh-carrieres-head {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 64px;
  background: var(--altitude) center/cover no-repeat;
}
.dh-carrieres-head .wrap { width: 100%; }
.dh-carrieres-head .section-head { margin-bottom: 0; }
.dh-carrieres-head h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; font-weight: 300; color: var(--ivoire); }
.dh-carrieres-head h1 .or { color: var(--laiton); }
.dh-carrieres-intro { background: var(--nuit); }
.dh-postes { background: var(--altitude); }
.dh-candidature { background: var(--nuit); }

/* Liste des postes */
.postes-liste { display: grid; gap: 1px; background: rgba(241,238,231,.1); border-top: 1px solid rgba(241,238,231,.1); border-bottom: 1px solid rgba(241,238,231,.1); }
.poste-item { background: var(--altitude); display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 30px; transition: background .3s; }
.poste-item:hover { background: var(--nuit); }
.poste-item .poste-dep { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--laiton); display: block; margin-bottom: 10px; }
.poste-item h3 { font-size: 22px; font-weight: 300; color: var(--ivoire); margin: 0 0 8px; }
.poste-item h3 a { color: inherit; }
.poste-item h3 a:hover { color: var(--laiton); }
.poste-item .poste-resume { color: #9fadbb; font-weight: 300; font-size: 14.5px; max-width: 60ch; margin-bottom: 10px; }
.poste-item .poste-meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.poste-item .poste-lien { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--laiton); display: inline-flex; align-items: center; gap: 10px; }
.poste-item .poste-lien svg { transition: transform .25s; }
.poste-item:hover .poste-lien svg { transform: translateX(6px); }
/* Annonce entièrement cliquable (même technique du lien étiré) */
.poste-item { position: relative; }
.poste-item .poste-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.poste-item h3 a { position: relative; z-index: 2; }

/* Aucun poste ouvert */
.postes-vide { border: 1px solid rgba(241,238,231,.12); padding: 48px 40px; text-align: center; }
.postes-vide .pv-titre { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; font-size: 24px; color: var(--ivoire); margin-bottom: 14px; }
.postes-vide .pv-texte { color: #9fadbb; font-weight: 300; max-width: 58ch; margin: 0 auto 28px; font-size: 14.5px; }

/* Page d'une annonce */
.dh-poste-head { background: var(--altitude); }
.dh-poste-head h1 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; font-weight: 300; color: var(--ivoire); }
.poste-faits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.poste-faits span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); border: 1px solid rgba(241,238,231,.16); padding: 8px 14px; }
.dh-poste-corps { background: var(--nuit); }
.poste-texte { max-width: 760px; color: #c2ccd6; font-weight: 300; }
.poste-texte h2, .poste-texte h3 { color: var(--ivoire); margin: 34px 0 12px; }
.poste-texte h3 { font-size: 20px; }
.poste-texte ul, .poste-texte ol { margin: 0 0 18px 20px; }
.poste-texte li { margin-bottom: 8px; }
.poste-texte p { margin-bottom: 16px; }
.poste-actions { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Candidature spontanée */
.candidature-note { margin-top: 24px; font-size: 12.5px; color: #7d8da0; font-weight: 300; font-style: italic; }

@media (max-width: 860px) {
  .dh.dh-carrieres-head { min-height: 50vh; padding-bottom: 44px; }
  .poste-item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
}

/* =========================================================
   Page Flotte + module Avion
   ========================================================= */
/* Ouverture (remplacer l'image par un visuel HD) */
.dh.dh-flotte-head {
  background: linear-gradient(180deg, rgba(11,22,34,.7), rgba(11,22,34,.5) 45%, rgba(11,22,34,.96)),
              url('https://dasnair.lumee.ch/wp-content/uploads/2026/07/dasnair-hero-2400x1200-falcon-reflet.webp') center/cover no-repeat;
  min-height: 60vh; display: flex; align-items: flex-end; padding-bottom: 64px;
}
.dh-flotte-head .wrap { width: 100%; }
.dh-flotte-head .section-head { margin-bottom: 0; }
.dh-flotte-head h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; font-weight: 300; color: var(--ivoire); }
.dh-flotte-head h1 .or { color: var(--laiton); }
.dh-flotte-liste { background: var(--nuit); }
.dh-flotte-argu { background: var(--altitude); }
.dh-flotte-detail { background: var(--nuit); }
.dh-flotte-cabine { background: var(--altitude); }

/* Liste des avions (shortcode [flotte_dasnair]) */
.flotte-grid { display: grid; gap: 40px; }
.avion-item { border: 1px solid rgba(241,238,231,.1); background: var(--altitude); display: grid; grid-template-columns: 1.05fr .95fr; }
.avion-item .avion-visu {
  min-height: 340px; background: #16293C center/cover no-repeat; position: relative; display: block;
  background-image: linear-gradient(180deg, rgba(11,22,34,.15), rgba(11,22,34,.45));
  /* La largeur vient de la colonne de grille, jamais d'un ratio */
  aspect-ratio: auto;
  width: 100%;
}
.avion-item .avion-visu .immat {
  position: absolute; left: 20px; bottom: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--laiton);
  letter-spacing: .3em; font-size: 12px; background: rgba(11,22,34,.55); padding: 6px 12px;
}
.avion-item .avion-corps { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.avion-item h2 { font-size: clamp(26px, 2.8vw, 34px); color: var(--ivoire); margin-bottom: 12px; }
.avion-item .avion-accroche { color: #b9c5d0; font-weight: 300; font-size: 15px; margin-bottom: 24px; }
.avion-item .avion-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-top: 1px solid rgba(241,238,231,.12); padding-top: 22px; margin-bottom: 30px; }
.avion-item .avion-specs b { display: block; font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; font-size: 19px; color: var(--ivoire); }
.avion-item .avion-specs span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.avion-item .btn { align-self: flex-start; }

/* Fiche avion : l'image mise en avant ne s'affiche pas en haut de l'article
   (elle sert de fond au hero) */
.single-avion .featured-image,
.single-avion .post-image,
.single-avion .inside-article > .featured-image,
.single-avion .entry-header { display: none; }

/* Fiche avion : hero (image mise en avant) */
.dh.dh-avion-hero {
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 60px;
  background: var(--altitude) center/cover no-repeat;
}
.dh-avion-hero .wrap { width: 100%; }
.dh-avion-hero .eyebrow { margin-bottom: 18px; letter-spacing: .3em; }
.dh-avion-hero h1 { font-size: clamp(34px, 5vw, 66px); line-height: 1.04; font-weight: 300; color: var(--ivoire); }
.dh-avion-hero .hero-lead { margin-top: 22px; max-width: 52ch; color: #cfd8e0; font-weight: 300; font-size: 17px; }

/* Fiche avion : caractéristiques */
.dh-avion-fiche { background: var(--nuit); }
.dh-avion-fiche .fiche-cles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-bottom: 1px solid rgba(241,238,231,.12); padding-bottom: 34px; }
.dh-avion-fiche .fiche-cles b { display: block; font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; font-size: 26px; color: var(--ivoire); }
.dh-avion-fiche .fiche-cles span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.dh-avion-fiche .fiche-bloc { margin-top: 44px; }
.dh-avion-fiche .fiche-bloc h3 { font-size: 13px; font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--laiton); margin-bottom: 8px; }
.dh-avion-fiche .fiche-liste { list-style: none; padding: 0; margin: 0; }
.dh-avion-fiche .fiche-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(241,238,231,.1); }
.dh-avion-fiche .fiche-liste .k { color: var(--brume); font-weight: 300; font-size: 14.5px; }
.dh-avion-fiche .fiche-liste .v { color: var(--ivoire); font-weight: 400; font-size: 14.5px; text-align: right; }
.dh-avion-fiche .fiche-actions { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Fiche avion : galerie, en fin de page */
.dh-avion-galerie { background: var(--altitude); }
.dh-avion-galerie .eyebrow { margin-bottom: 34px; }
/* Titres de catégorie (Extérieur, Cabine, Cockpit…) saisis en blocs Titre H3 */
.dh-avion-galerie h3 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--laiton); font-weight: 500;
  margin: 54px 0 20px;
  display: flex; align-items: center; gap: 14px;
}
.dh-avion-galerie h3::before { content: ""; width: 36px; height: 1px; background: rgba(194,168,120,.4); }
.dh-avion-galerie h3:first-of-type { margin-top: 0; }
/* Catégorie laissée vide : on masque la galerie vide ET son titre,
   pour ne pas laisser un intitulé orphelin sur la page. */
.dh-avion-galerie .wp-block-gallery:empty { display: none; }
.dh-avion-galerie h3:has(+ .wp-block-gallery:empty) { display: none; }

/* Garde-fou grilles : sans min-width:0, un enfant de grille refuse de
   se réduire sous la largeur de son contenu et fait déborder la page. */
.flotte-grid > *, .avion-item > *, .dh .services-grid > *, .postes-liste > * { min-width: 0; }
.avion-item .avion-specs > * { min-width: 0; }

@media (max-width: 860px) {
  .dh.dh-flotte-head { min-height: 50vh; padding-bottom: 44px; }
  .avion-item { grid-template-columns: 1fr; }
  .avion-item .avion-visu { min-height: 240px; }
  .avion-item .avion-corps { padding: 32px 24px; }
  .avion-item .avion-specs { grid-template-columns: repeat(2, 1fr); }
  .dh-avion-fiche .fiche-cles { grid-template-columns: repeat(2, 1fr); }
  .dh.dh-avion-hero { min-height: 54vh; padding-bottom: 44px; }
}
@media (max-width: 520px) {
  .avion-item .avion-specs { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------------------------------------------------------
   Galerie de la fiche avion : cadrage uniforme + respiration
   --------------------------------------------------------- */
.single-avion .wp-block-gallery.has-nested-images { gap: 14px; }
.single-avion .wp-block-gallery.has-nested-images figure.wp-block-image {
  border: 1px solid rgba(241, 238, 231, .1);
  overflow: hidden;
  background: #16293C;
}
.single-avion .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.95);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.single-avion .wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
  transform: scale(1.045);
  filter: saturate(1.05);
}
/* Légendes discrètes */
.single-avion .wp-block-gallery figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brume); background: none;
}

/* Plans de cabine : champs ACF dédiés, rendus dans un panneau ivoire.
   Ce sont des dessins techniques sur fond blanc : ils ne passent pas
   par la galerie (recadrage 3/2), ils s'affichent en pleine largeur. */
.dh-avion-plans { background: var(--nuit); }
.dh-avion-plans .eyebrow { margin-bottom: 26px; }
.plans-panneau {
  background: var(--ivoire);
  padding: 32px clamp(20px, 4vw, 46px);
  border: 1px solid rgba(241, 238, 231, .1);
}
.plan-item { margin: 0 0 34px; }
.plan-item:last-child { margin-bottom: 0; }
.plan-item img { width: 100%; height: auto; display: block; }
.plan-item figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 22, 34, .12);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #566270; text-align: right;
}