/* ==========================================================================
   base.css — reset moderne, variables de thème, typographie, utilitaires.
   Chargé avant tout le reste, sur toutes les pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables de thème
   --------------------------------------------------------------------------
   Couleur d'accent : un bleu profond, choisi par Patrick le 14/09/2026 à la
   place du teal #18a497 des SCSS d'origine. Contraintes données : un « beau
   bleu » sur lequel le jaune ressort, ni le bleu Booking (#003580 / #0071c2,
   dont l'interface est déjà proche), ni une teinte claire ou turquoise.
   #1d4e89 est un bleu roi assourdi : plus clair et moins saturé que le navy
   Booking, plus sombre et moins cyan que son bouton. Contraste avec le blanc
   8,4:1, avec le jaune #f6f842 7,4:1 — le teal ne faisait que 3,1:1 sur les
   boutons, sous le seuil AA.
   Le theme-color #FFFF64 des anciens <head> n'existait dans aucune feuille :
   il est abandonné.
   -------------------------------------------------------------------------- */
:root {
  /* Marque */
  --accent:        #1d4e89;
  --accent-fonce:  #163d6d;
  --accent-clair:  #e9eff7;
  --jaune:         #f6f842;
  --or:            #febb02;

  /* Encres. --ink-3 et --ink-4 ont été foncés le 29/09/2026 après la
     relecture d'accessibilité : #8c8c8c (3,4:1) et #bbbbbb (1,9:1) étaient
     illisibles sur blanc. Ils restent les gris discrets de la maquette, mais
     franchissent le seuil AA de 4,5:1 sur blanc. */
  --ink-1: #333333;   /* titres */
  --ink-2: #646464;   /* texte courant */
  --ink-3: #6f6f6f;   /* texte secondaire — 5:1 sur blanc, 4,6:1 sur crème */
  --ink-4: #767676;   /* liens discrets sur blanc — 4,5:1 */
  --ink-inverse: rgba(255, 255, 255, 0.75);  /* texte secondaire sur fond sombre */
  /* Blancs translucides posés sur fond sombre ou sur photo. */
  --blanc-15: rgba(255, 255, 255, 0.15);  /* filet, survol sur la photo de l'accueil */
  --blanc-50: rgba(255, 255, 255, 0.5);   /* texte indicatif des champs sombres */
  --blanc-60: rgba(255, 255, 255, 0.6);   /* mentions du pied de page (5,7:1 sur #333), contour */
  --blanc-90: rgba(255, 255, 255, 0.9);   /* libellés sur fond sombre */

  /* Fonds */
  --blanc:       #ffffff;
  --noir:        #000000;
  --bg:          #f5f4ef;  /* fond crème des pages intérieures */
  --bg-carte:    #ffffff;
  --bg-gris:     #eeeeee;  /* encart Montant, pastilles d'avis, visuels en attente */
  --bg-desactive: #f3f3f3;
  --bg-sombre:   #333333;  /* pied de page, fil d'ariane */
  --bg-nuit:     #292524;  /* sections sombres, colonne de recherche */
  --bg-media:    #111111;  /* fonds photo et vidéo */

  /* Traits */
  --line:       #cccccc;
  --line-fort:  #8c8c8c;  /* contour des cases à cocher — 3,4:1 sur blanc */
  --line-douce: rgba(0, 0, 0, 0.12);
  --line-claire: rgba(255, 255, 255, 0.3);

  /* Ombres */
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.1);
  --ombre-2: 0 4px 8px rgba(0, 0, 0, 0.1);
  --ombre-3: 0 10px 20px rgba(0, 0, 0, 0.15);

  /* Rayons */
  --r-sm:   5px;
  --r-md:   10px;
  --r-pill: 50px;

  /* Rythme */
  --gouttiere: 1.25rem;
  --largeur-max: 80rem;   /* 1280px, largeur de contenu de la maquette */
  /* Cadre des blocs qui portent leur gouttière à l'intérieur (barre de
     navigation, colonnes, pied de page) : le contenu y fait 1 280 px, comme
     sur les sections de l'accueil. Il n'en faisait que 1 216. */
  --largeur-cadre: calc(var(--largeur-max) + 2 * var(--gouttiere));
  /* Titre principal (h1) des pages intérieures : une seule taille d'une page
     à l'autre (contenus, résultats, carte, compte, merci, 404). 28 px sur
     téléphone, 38 px au-delà de 760 px de large. Les titres d'étape du tunnel
     (book, confirmation) et la page de paiement simulé gardent leur taille. */
  --titre-page: clamp(1.75rem, 5vw, 2.375rem);
  /* Hauteur du bandeau « Site de démonstration », fixé au-dessus de la barre
     de navigation. 0 sans bandeau : la barre, le décalage des pages
     intérieures et les ancres retrouvent alors leurs valeurs d'origine. La
     valeur réelle est posée par components.css (.avec-bandeau-demo). */
  --bandeau-demo-h: 0rem;

  /* États */
  --erreur:        #c0392b;
  --erreur-fonce:  #9e2e22;  /* survol du bouton de suppression */
  --erreur-bg:     #fdeceb;
  --erreur-clair:  #ff8a80;  /* astérisques sur fond sombre — 6,6:1 */
  --succes:        #0ab21a;  /* bordures et icônes */
  --succes-texte:  #1b6e26;  /* texte vert lisible — 4,7:1 sur l'encart */
  --succes-bg:     #eaf7ea;
  --inclus-bg:     #c4e6c1;  /* encart « Votre réservation comprend » */
  --alerte-bg:     #faf3eb;
  /* Cœur des favoris : le rouge reconnu de tous, 5,4:1 sur blanc. */
  --favori:        #c0392b;
  /* Voile blanc des légendes posées sur une carte (attribution). */
  --voile-clair:   rgba(255, 255, 255, 0.85);

  /* Anneau de focus. Redéfini en jaune sur les fonds sombres, où le bleu
     d'accent tombait à 1,5:1. */
  --focus: var(--accent);
}

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

* { margin: 0; }

html {
  /* Seul préfixe conservé de tout le projet, et il est nécessaire : Safari
     iOS n'implémente pas text-size-adjust sans préfixe, et sans lui il
     grossit le texte de lui-même en orientation paysage. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barre de navigation est fixe : sans cette marge, un élément atteint
     au clavier (Maj+Tab) ou par une ancre (#newsletter, #erreurs) se
     retrouvait caché dessous. */
  scroll-padding-top: calc(4.75rem + var(--bandeau-demo-h));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;   /* nécessaire : neutralise les
       animations décoratives pour les personnes sensibles au mouvement, et
       doit l'emporter sur les durées déclarées ailleurs. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100vh;
  font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  background-color: var(--bg-carte);
}

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

img,
video { height: auto; }

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

button { background: none; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-1);
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

b, strong { font-weight: 700; }

fieldset { border: 0; padding: 0; min-width: 0; }

legend { padding: 0; }

table { border-collapse: collapse; }

/* Focus visible : l'ancien CSS posait outline:0 partout, ce qui rendait la
   navigation au clavier impossible à suivre. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Zones sombres : anneau jaune, lisible à plus de 10:1. Sur l'accueil, seule
   la barre transparente est concernée : le panneau du menu et la liste des
   langues, blancs, gardent l'anneau bleu. */
.footer,
.fil-ariane,
.moteur-aside,
.communaute__panneau,
.proximite,
.promo,
.hero,
.galerie,
.nav--claire:not(.nav--figee) .nav__barre { --focus: var(--jaune); }
.nav__panneau,
.langue__liste { --focus: var(--accent); }

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

/* Attribut hidden : toujours masqué. !important nécessaire : sans lui, le
   display des composants (.bouton en inline-flex, .vide en grid, champs en
   block) l'emporte sur la règle du navigateur, et un bouton ou un champ que
   le JavaScript doit révéler plus tard (ou un champ « username » réservé aux
   gestionnaires de mots de passe) s'affichait à tort. */
[hidden] { display: none !important; }

/* Visible des seuls lecteurs d'écran. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Premier lien de la page, révélé au premier Tab. */
.saut-contenu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  color: var(--blanc);
  background-color: var(--accent);
  transform: translateY(-150%);
  transition: transform 0.15s ease-out;
}
.saut-contenu:focus { transform: translateY(0); }

/* Icônes du sprite. La taille suit celle du texte, la couleur aussi. */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: none;
}

.requis { color: var(--erreur); }

.accent { color: var(--accent); }

/* Lien court à ne jamais couper (« écrivez-nous » se coupait au trait d'union). */
.insecable { white-space: nowrap; }

@media (min-width: 60rem) {
  :root { --gouttiere: 2rem; }
  html { scroll-padding-top: calc(5.5rem + var(--bandeau-demo-h)); }
}