/* ==========================================================================
   Akwaba Aviation Services — feuille de style unique
   --------------------------------------------------------------------------
   Ordre du fichier :
     1. Variables
     2. Polices
     3. Reset et base
     4. Typographie
     5. Structure et utilitaires
     6. En-tête
     7. Pied de page
     8. Composants
     9. Sections de la page d'accueil
    10. Responsive
   Aucune valeur hexadécimale ne doit apparaître en dehors du bloc 1.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {

  /* --- Couleurs de marque (extraites du logo, ne pas en ajouter) --------- */
  --c-bleu:         #081C36;  /* bleu nuit : sections fortes, titres        */
  --c-bleu-clair:   #0E2646;  /* aplats secondaires sur fond sombre         */
  --c-or:           #B37924;  /* accent : filets, puces, bordures           */
  --c-or-clair:     #D89C24;  /* survol, accents sur fond sombre            */
  --c-brun:         #2E1D02;  /* texte sur aplat or                         */
  --c-blanc:        #FFFFFF;  /* fond dominant                              */
  --c-gris-texte:   #6B6B66;  /* texte secondaire                           */
  --c-gris-clair:   #F5F5F3;  /* cartes, séparations douces                 */

  /* --- Rôles ------------------------------------------------------------ */
  --fond:           var(--c-blanc);
  --texte:          var(--c-bleu);
  --texte-doux:     var(--c-gris-texte);
  --filet:          rgba(8, 28, 54, 0.12);
  /* Bordure de champ : 3.38:1 sur blanc, seuil WCAG des composants
     d'interface. Ne pas l'éclaircir sans revérifier le contraste.        */
  --filet-champ:    rgba(8, 28, 54, 0.5);
  --texte-sombre:   rgba(255, 255, 255, 0.75);  /* texte doux sur bleu nuit */
  --or-voile:       rgba(179, 121, 36, 0.08);   /* voile d'or, marqueurs    */

  /* L'or n'atteint pas 4.5:1 sur blanc (3.46:1). Il est donc réservé aux
     filets, puces et bordures ; jamais au texte courant sur fond clair.
     Sur bleu nuit il passe (4.8:1) et peut porter du texte.                */

  /* --- Typographie ------------------------------------------------------ */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --t-corps:        1.0625rem;  /* 17 px                                    */
  --t-corps-large:  1.125rem;   /* 18 px : chapô                            */
  --t-petit:        0.875rem;   /* 14 px                                    */
  --t-micro:        0.75rem;    /* 12 px : sur-titres capitales             */
  --t-h1:           clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --t-h2:           clamp(1.5rem, 1.25rem + 1.05vw, 2rem);
  --t-h3:           1.1875rem;  /* 19 px                                    */

  --interligne:     1.6;
  --colonne:        34em;       /* ~70 caractères                           */

  /* --- Espacements ------------------------------------------------------ */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;
  --e-8:  4rem;
  --e-9:  6rem;

  --section-y:      clamp(3.5rem, 2rem + 5vw, 6rem);

  /* --- Structure -------------------------------------------------------- */
  --largeur-max:    1200px;
  --marge-laterale: clamp(1.25rem, 5vw, 3rem);
  --rayon:          4px;
  --rayon-large:    8px;
  --transition:     150ms ease;
  --hauteur-entete: 88px;
}


/* ==========================================================================
   2. POLICES
   --------------------------------------------------------------------------
   Auto-hébergées : aucun appel à un service tiers, donc aucun transfert de
   données personnelles. Déposer les fichiers .woff2 dans assets/fonts/.
   Tant qu'ils sont absents, la pile système prend le relais sans casse.
   ========================================================================== */

/* Les trois fichiers ne sont pas encore fournis : les appeler produirait
   trois requêtes en échec sur chaque page. Le site utilise donc la pile
   système, déclarée dans --police.

   POUR ACTIVER INTER : télécharger les woff2 sur rsms.me/inter, les
   déposer dans assets/fonts/ sous les noms ci-dessous, et retirer les
   deux lignes de commentaire qui encadrent ce bloc. Rien d'autre à
   changer : "Inter" est déjà en tête de la pile.

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*/


/* ==========================================================================
   3. RESET ET BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--interligne);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: var(--e-7) 0;
}

/* Focus clavier visible partout, y compris sur fond sombre. */
:focus-visible {
  outline: 2px solid var(--c-or-clair);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) { outline: none; }

/* Lien d'évitement pour la navigation clavier et lecteur d'écran. */
.skip-link {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 100;
  padding: var(--e-3) var(--e-5);
  background: var(--c-bleu);
  color: var(--c-blanc);
  font-size: var(--t-petit);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--rayon);
  transition: top var(--transition);
}

.skip-link:focus { top: var(--e-4); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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


/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--texte);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.005em; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Sur-titre en capitales espacées, à l'image du logotype AKWABA.
   Deux ou trois occurrences par page au maximum.                          */
.sur-titre {
  display: block;
  margin: 0 0 var(--e-4);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.sur-titre::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: var(--e-3);
  vertical-align: 0.3em;
  background: var(--c-or);
}

.sur-titre--sombre { color: var(--c-or-clair); }
.sur-titre--sombre::before { background: var(--c-or-clair); }

/* Chapô : une seule phrase de positionnement sous un titre. */
.chapo {
  max-width: var(--colonne);
  font-size: var(--t-corps-large);
  color: var(--texte-doux);
}

.texte-doux { color: var(--texte-doux); }

.prose { max-width: var(--colonne); }

/* Ligne de rappel placee en fin de bloc (lien ou bouton de suite). */
.suite { margin-top: var(--e-6); }

/* Lien courant : texte en bleu nuit, souligné doré au survol.
   L'or ne porte jamais le texte sur fond clair (contraste 3.46:1).        */
.lien {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--c-or);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--transition),
              color var(--transition);
}

.lien:hover { text-decoration-thickness: 2px; }

/* Sur bleu nuit, le bleu nuit du lien serait invisible. */
.section--sombre .lien,
.banniere .lien {
  color: var(--c-blanc);
  text-decoration-color: var(--c-or-clair);
}

/* Lien fléché de fin de bloc. */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte);
  border-bottom: 1px solid var(--c-or);
  padding-bottom: 2px;
  transition: gap var(--transition), border-color var(--transition);
}

.lien-suite::after {
  content: "\2192";
  line-height: 1;
}

.lien-suite:hover { gap: var(--e-3); border-color: var(--c-or-clair); }

.lien-suite--sombre {
  color: var(--c-blanc);
  border-bottom-color: var(--c-or-clair);
}


/* ==========================================================================
   5. STRUCTURE ET UTILITAIRES
   ========================================================================== */

.contenu {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.section { padding-block: var(--section-y); }

.section--doux { background: var(--c-gris-clair); }

.section--sombre {
  background: var(--c-bleu);
  color: var(--c-blanc);
}

.section--sombre h1,
.section--sombre h2,
.section--sombre h3 { color: var(--c-blanc); }

.section--sombre .chapo,
.section--sombre .texte-doux { color: var(--texte-sombre); }

.entete-section {
  max-width: var(--colonne);
  margin-bottom: var(--e-7);
}

/* Grilles simples : deux ou trois colonnes au maximum. */
.grille {
  display: grid;
  gap: var(--e-6);
}

.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }

/* Marqueur de donnée manquante. Doit rester voyant tant qu'il subsiste. */
.a-completer {
  display: inline;
  padding: 0.1em 0.4em;
  background: var(--or-voile);
  border: 1px dashed var(--c-or);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 0.9em;
}

.section--sombre .a-completer {
  background: var(--c-bleu-clair);
  color: var(--c-blanc);
  border-color: var(--c-or-clair);
}


/* ==========================================================================
   6. EN-TÊTE
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-blanc);
  border-bottom: 1px solid var(--filet);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
}

/* Marge libre autour du logo : au moins la hauteur du « A ». */
.marque {
  display: inline-flex;
  align-items: center;
  padding: var(--e-2) 0;
  flex: 0 0 auto;
}

.marque img {
  height: 56px;
  width: auto;
}

.entete__nav {
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  list-style: none;
}

.nav-liste a {
  display: inline-block;
  padding: var(--e-2) 0;
  font-size: var(--t-petit);
  font-weight: 600;
  text-decoration: none;
  color: var(--texte);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}

.nav-liste a:hover,
.nav-liste a[aria-current="page"] { border-bottom-color: var(--c-or); }

/* Sélecteur de langue : discret, textuel. */
.langues {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--texte-doux);
  padding-left: var(--e-5);
  border-left: 1px solid var(--filet);
}

.langues a {
  text-decoration: none;
  color: var(--texte-doux);
  transition: color var(--transition);
}

.langues a:hover { color: var(--texte); }

.langues [aria-current="true"] { color: var(--texte); }

/* Bouton du menu mobile. */
.nav-bouton {
  display: none;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-petit);
  font-weight: 600;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: border-color var(--transition);
}

.nav-bouton:hover { border-color: var(--c-or); }

.nav-bouton__barres {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-bleu);
}

.nav-bouton__barres::before,
.nav-bouton__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--c-bleu);
}

.nav-bouton__barres::before { top: -6px; }
.nav-bouton__barres::after  { top: 6px; }


/* ==========================================================================
   7. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--c-gris-clair);
  border-top: 1px solid var(--filet);
  padding-top: var(--e-8);
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--e-7);
  padding-bottom: var(--e-8);
}

/* Symbole seul. Le fichier fourni est un WebP sans couche alpha : son fond
   blanc serait visible sur le gris du pied. « multiply » le neutralise —
   le blanc se confond avec le fond, le bleu nuit et l'or ne bougent pas.
   Si un jour le pied passe en aplat sombre, retirer cette ligne et fournir
   un fichier réellement détouré : multiply effacerait le symbole.        */
.pied__marque img {
  height: 64px;
  width: auto;
  margin-bottom: var(--e-4);
  mix-blend-mode: multiply;
}

.pied h2 {
  margin-bottom: var(--e-4);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.pied ul { list-style: none; }

.pied li { margin-bottom: var(--e-2); }

.pied li a {
  font-size: var(--t-petit);
  text-decoration: none;
  color: var(--texte);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.pied li a:hover { border-bottom-color: var(--c-or); }

.pied address {
  font-style: normal;
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

.pied__bas {
  background: var(--c-bleu);
  color: var(--texte-sombre);
}

.pied__bas .contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-4);
  font-size: var(--t-petit);
}

.pied__bas p { margin: 0; }

.pied__bas a {
  color: var(--texte-sombre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.pied__bas a:hover {
  color: var(--c-blanc);
  border-bottom-color: var(--c-or-clair);
}


/* ==========================================================================
   8. COMPOSANTS
   ========================================================================== */

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-bleu);
  border-radius: var(--rayon);
  color: var(--c-blanc);
  background: var(--c-bleu);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}

.bouton:hover {
  background: var(--c-bleu-clair);
  border-color: var(--c-bleu-clair);
}

.bouton--contour {
  background: transparent;
  color: var(--texte);
  border-color: var(--c-or);
}

.bouton--contour:hover {
  background: transparent;
  border-color: var(--c-or);
  box-shadow: inset 0 0 0 1px var(--c-or);
}

.bouton--sombre {
  background: transparent;
  color: var(--c-blanc);
  border-color: var(--c-or-clair);
}

.bouton--sombre:hover {
  background: transparent;
  border-color: var(--c-or-clair);
  box-shadow: inset 0 0 0 1px var(--c-or-clair);
}

/* --- Carte d'activité --------------------------------------------------- */

.carte {
  display: flex;
  flex-direction: column;
  padding-top: var(--e-5);
  border-top: 2px solid var(--c-or);
}

.carte h3 { margin-bottom: var(--e-3); }

.carte p {
  color: var(--texte-doux);
  margin-bottom: var(--e-5);
}

.carte .lien-suite { margin-top: auto; align-self: flex-start; }

/* --- Bloc de faits (actionnariat, agréments) ---------------------------- */

.faits {
  list-style: none;
  display: grid;
  gap: var(--e-5);
}

.faits li {
  padding-left: var(--e-5);
  border-left: 2px solid var(--c-or);
}

/* Par défaut le bloc vit sur fond clair : la clé est en gris de texte.
   L'or clair ne passe pas sur blanc (2.6:1) et n'apparaît que sur bleu nuit. */
.faits__cle {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.faits__valeur { display: block; }

.section--sombre .faits li { border-left-color: var(--c-or-clair); }
.section--sombre .faits__cle { color: var(--c-or-clair); }

/* Groupe de faits sous un intertitre : sert à ranger les agréments par
   détenteur, pour qu'aucun ne puisse être lu comme appartenant à un autre. */
.groupe + .groupe { margin-top: var(--e-7); }
.groupe h3 { margin-bottom: var(--e-5); }

/* Référence d'agrément : chiffres alignés, à distinguer du texte courant. */
.reference {
  display: inline-block;
  margin-top: var(--e-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Figures et illustrations ------------------------------------------
   Les photographies sont en WebP, redimensionnées avant dépôt, et portent
   toujours width/height pour éviter le décalage au chargement.          */

.figure { margin: 0; }

.figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
}

.figure figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-micro);
  color: var(--texte-doux);
}

/* Aéronef détouré, posé directement sur le fond : ni cadre, ni recadrage.
   Le canal alpha du PNG le rend utilisable sur blanc comme sur bleu nuit.
   La bande 3:1 normalise deux détourages de proportions différentes.     */
.figure--decoupe img {
  aspect-ratio: 3 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

/* Illustration en tête de carte, sous le filet doré. */
.carte__media { margin-bottom: var(--e-5); }

/* --- Bloc texte + image, deux colonnes ---------------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-7);
  align-items: center;
}

.duo__texte { max-width: var(--colonne); }

/* Colonnes alignées en haut : utile quand l'une est bien plus haute que
   l'autre, par exemple un formulaire face à une adresse.                 */
.duo--haut { align-items: start; }


/* --- Formulaire ---------------------------------------------------------
   Aucune couleur sémantique n'est introduite : la validation native du
   navigateur suffit, et l'or marque le champ actif.                      */

.formulaire {
  display: grid;
  gap: var(--e-5);
}

.champ {
  display: grid;
  gap: var(--e-2);
}

.champ > label {
  font-size: var(--t-petit);
  font-weight: 600;
}

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  width: 100%;
  padding: var(--e-3) var(--e-4);
  color: var(--texte);
  background: var(--c-blanc);
  border: 1px solid var(--filet-champ);
  border-radius: var(--rayon);
  transition: border-color var(--transition);
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover,
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--c-or); }

.requis { color: var(--texte-doux); }

.formulaire__note {
  font-size: var(--t-micro);
  color: var(--texte-doux);
  max-width: var(--colonne);
}

/* Image à gauche, texte à droite — sans toucher à l'ordre du HTML : le
   texte reste premier pour la lecture au clavier et sur petit écran.
   L'inversion est annulée dans la requête 900 px, où tout s'empile.     */
.duo--inverse .duo__texte { order: 2; }
.duo--inverse .figure { order: 1; }


/* ==========================================================================
   9. SECTIONS DE LA PAGE D'ACCUEIL
   ========================================================================== */

/* --- Bandeau d'ouverture ------------------------------------------------
   Fond bleu nuit par défaut. Dès qu'une photographie dont les droits sont
   détenus est déposée dans assets/img/, ajouter la classe
   « banniere--image » sur <section class="banniere"> et décommenter la
   règle correspondante ci-dessous.                                        */

.banniere {
  position: relative;
  background: var(--c-bleu);
  color: var(--c-blanc);
  overflow: hidden;
}

.banniere__interieur {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(62vh, 560px);
  padding-block: var(--e-9) var(--e-8);
}

.banniere h1 {
  max-width: 16em;
  color: var(--c-blanc);
  margin-bottom: var(--e-5);
}

.banniere .chapo {
  color: var(--texte-sombre);
  margin-bottom: var(--e-6);
}

.banniere__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

/* Version courte du bandeau, pour les pages intérieures. */
.banniere--compacte .banniere__interieur {
  min-height: 0;
  padding-block: var(--e-8) var(--e-7);
}

/* Bandeau à deux colonnes : texte à gauche, hublot à droite.
   L'image étant en portrait, elle est bornée en HAUTEUR et non en largeur —
   contrainte sur la largeur, elle ferait exploser la hauteur du bandeau.  */
/* Le bandeau ne s'impose aucune hauteur : ce sont le texte et l'image qui
   la donnent. C'est pour cela que « min-height » est neutralisé ici — sans
   quoi le bandeau resterait haut même avec une image courte.             */
.banniere--hublot .banniere__interieur {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: var(--e-6);
  align-items: center;
  min-height: 0;
  padding-block: var(--e-7);
}

.banniere__hublot {
  display: flex;
  justify-content: center;
}

/* Le hublot est rogné au plus près : à hauteur d'affichage égale, il paraît
   plus grand que la version non rognée. La borne suit la hauteur d'écran
   pour que les boutons restent visibles sur un portable à écran bas.
   La largeur n'est jamais imposée : elle découle de la hauteur.          */
.banniere__hublot img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(280px, 40vh, 420px);
  aspect-ratio: auto;
  border-radius: 0;
}

/* --- Logos de tiers -----------------------------------------------------
   Ces logos appartiennent à leurs propriétaires : ils ne sont ni recolorés,
   ni désaturés, ni déformés, et restent posés sur fond clair, conformément
   à l'usage normal d'une marque tierce.
   Chaque logo vit dans la section qui traite de la société concernée, et
   non regroupé en bandeau. Le double plafond hauteur/largeur les équilibre
   optiquement : Aerosotravia est un logotype très allongé, Chalair un bloc
   plus compact.                                                          */

.logo-tiers {
  margin-top: var(--e-5);
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: 240px;
  aspect-ratio: auto;
}

/* --- Bandeau de contact de bas de page ---------------------------------- */

.appel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--e-7);
  align-items: start;
}

.appel address {
  font-style: normal;
  color: var(--texte-sombre);
}

.appel address + address { margin-top: var(--e-4); }


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* --- Tablette et navigation repliée -------------------------------------
   Le seuil du menu est à 900 px et non 720 px : la barre complète réclame
   environ 765 px à cause du libellé « Sécurité et conformité ». En dessous
   de 840 px elle déborderait — c'est-à-dire en plein format tablette.
   Si un libellé de menu est raccourci un jour, ce seuil peut redescendre.
   Le seuil est aussi inscrit dans assets/js/main.js : garder les deux
   valeurs cohérentes.                                                    */
@media (max-width: 900px) {

  .grille--3 { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; gap: var(--e-6); }
  .duo--inverse .duo__texte,
  .duo--inverse .figure { order: 0; }
  .banniere--hublot .banniere__interieur { grid-template-columns: 1fr; }

  .banniere__hublot img { max-height: min(340px, 45vh); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .appel { grid-template-columns: 1fr; }

  .nav-bouton { display: inline-flex; }

  /* Menu replié : ouvert par bascule JS, sinon masqué. */
  .entete__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-4) var(--marge-laterale) var(--e-6);
    background: var(--c-blanc);
    border-bottom: 1px solid var(--filet);
    /* Téléphone couché : le menu défile plutôt que de sortir de l'écran. */
    max-height: calc(100vh - var(--hauteur-entete));
    overflow-y: auto;
  }

  .entete__nav[data-ouvert="true"] { display: flex; }

  .nav-liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-liste a {
    padding: var(--e-4) 0;
    font-size: var(--t-corps);
    border-bottom: 1px solid var(--filet);
  }

  .nav-liste a:hover,
  .nav-liste a[aria-current="page"] { border-bottom-color: var(--c-or); }

  .langues {
    padding-left: 0;
    padding-top: var(--e-5);
    border-left: 0;
  }

  /* Sans JavaScript, la navigation reste dépliée et accessible. */
  .sans-js .entete__nav {
    display: flex;
    position: static;
    padding-inline: 0;
    max-height: none;
    overflow: visible;
  }

  .sans-js .nav-bouton { display: none; }
}

/* --- Téléphone ---------------------------------------------------------- */

@media (max-width: 720px) {

  :root { --hauteur-entete: 72px; }

  .marque img { height: 44px; }

  .grille--3,
  .grille--2 { grid-template-columns: 1fr; }

  .pied__haut { grid-template-columns: 1fr; gap: var(--e-6); }

  .banniere__interieur {
    min-height: 0;
    padding-block: var(--e-8) var(--e-7);
  }
}

/* --- Petit téléphone ---------------------------------------------------- */

@media (max-width: 480px) {
  /* Côte à côte, les deux boutons du bandeau se cassent sur deux lignes
     désalignées. Empilés pleine largeur, ils redeviennent lisibles.      */
  .banniere__actions .bouton { flex: 1 1 100%; }
}


/* ==========================================================================
   IMPRESSION
   ========================================================================== */

@media print {
  .entete,
  .pied__bas,
  .banniere__actions,
  .nav-bouton { display: none; }

  body { font-size: 11pt; }
  .section { padding-block: 1.5rem; }
}