/* ==========================================================================
   Lynxbox 39 — feuille de style
   Palette et typographies validées par Brent et Nadège le 10/08/2026.
   Méthode : mobile d'abord. Les styles de base visent le téléphone ;
   les media queries n'ajoutent que ce qu'un écran plus large permet.
   ========================================================================== */

/* --- Fontes auto-hébergées (aucune dépendance à un service extérieur) ----- */
@font-face {
  font-family: "Prata";
  src: url("../fonts/prata-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons de conception ------------------------------------------------ */
:root {
  /* Couleurs — relevées dans MEDIAS/logo/LOGO_HD.png */
  --noir:      #000000;
  /* Fond de page en noir absolu : le logo et les photos de la borne sont
     détourés sur du #000000. Un fond même très légèrement plus clair ferait
     apparaître un rectangle autour de chaque image. */
  --nuit:      #000000;
  --suie:      #14110C;
  --or:        #E7AF35;
  --or-clair:  #F2C243;
  --bronze:    #B86F04;
  --craie:     #F4EDDE;
  --cendre:    #9C9285;
  --trait:     rgba(231, 175, 53, .20);

  /* Échelle typographique fluide */
  --t-xxl: clamp(2rem,   7vw,  4rem);
  --t-xl:  clamp(1.5rem, 4.5vw, 2.4rem);
  --t-l:   clamp(1.2rem, 3.2vw, 1.6rem);
  --t-m:   1rem;
  --t-s:   .875rem;
  --t-xs:  .72rem;

  /* Rythme */
  --gouttiere: 1.25rem;
  --section:   clamp(3rem, 9vw, 6rem);
  --largeur:   1120px;

  /* Cible tactile minimale : 44 px, recommandation d'accessibilité */
  --tactile: 44px;
}

/* --- Réinitialisation ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-m);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: "Prata", Georgia, serif;
  font-weight: 400;          /* Prata n'a qu'une graisse : jamais de gras */
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }

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

a { color: var(--or); text-decoration: none; }
a:hover, a:focus-visible { color: var(--or-clair); }

/* Le focus clavier doit rester visible : accessibilité, non négociable. */
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

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

/* --- Utilitaires --------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.surtitre {
  font-size: var(--t-xs);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 400;
  margin: 0;
}

.discret { color: var(--cendre); font-size: var(--t-s); }

/* Masqué à l'écran, lu par les lecteurs d'écran */
.pour-lecteur-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactile);
  padding: .9rem 2rem;
  border: 1px solid var(--or);
  color: var(--or);
  background: transparent;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.bouton:hover, .bouton:focus-visible { background: var(--or); color: var(--noir); }
.bouton--plein { background: var(--or); color: var(--noir); }
.bouton--plein:hover, .bouton--plein:focus-visible { background: var(--or-clair); color: var(--noir); }
.bouton--large { width: 100%; }

@media (min-width: 640px) {
  .bouton--large { width: auto; }
}

/* --- En-tête ------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre {
  display: flex;
  flex-wrap: wrap;          /* le menu déplié passe sur sa propre ligne */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}
.entete__marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: "Prata", Georgia, serif;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--or);
}
.entete__marque img { width: 36px; }

/* Bouton menu : visible sur téléphone uniquement */
.menu-bascule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tactile);
  height: var(--tactile);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-bascule span {
  display: block;
  width: 22px;
  height: 1px;
  margin-inline: auto;
  background: var(--or);
  transition: transform .3s ease, opacity .3s ease;
}
.menu-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sur téléphone le menu occupe toute la largeur et se place SOUS la barre
   (`order: 3` + `width: 100%`), sinon il se glisserait à côté du bouton. */
.navigation {
  display: none;
  order: 3;
  width: 100%;
}
.navigation[data-ouvert="true"] {
  display: block;
  padding-bottom: 1rem;
  border-top: 1px solid var(--trait);
  /* Opaque : sinon le contenu de la page transparaît derrière les rubriques. */
  background: var(--noir);
}
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.navigation a {
  display: flex;
  align-items: center;
  min-height: var(--tactile);
  padding: .5rem 0;
  color: var(--craie);
  font-size: var(--t-s);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.navigation a:hover, .navigation a:focus-visible { color: var(--or); }

@media (min-width: 900px) {
  .menu-bascule { display: none; }
  .navigation, .navigation[data-ouvert="true"] {
    display: block;
    order: 0;
    width: auto;
    padding: 0;
    border-top: 0;
    background: transparent;   /* annule le fond opaque du menu mobile */
  }
  .navigation ul { flex-direction: row; gap: 2rem; }
  .navigation a { min-height: 0; padding: 0; font-size: var(--t-xs); }
}

/* --- Bandeau d'accueil --------------------------------------------------- */
.accueil {
  background: var(--noir);
  border-bottom: 1px solid var(--trait);
  text-align: center;
}
/* Mobile d'abord : le texte, puis la photo. Le titre et le bouton restent
   visibles sans faire défiler ; la photo vient confirmer juste après. */
.accueil__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.accueil__texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.accueil h1 { max-width: 16ch; }
.accueil p { color: var(--cendre); max-width: 44ch; }
.accueil__photo {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border: 1px solid var(--trait);
}

@media (min-width: 900px) {
  .accueil { text-align: left; }
  .accueil__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 4rem; }
  .accueil__texte { align-items: flex-start; }
  .accueil__photo { max-width: none; margin: 0; }
}

/* --- Tarifs -------------------------------------------------------------- */
.formules {
  display: grid;
  grid-template-columns: 1fr;      /* empilées sur téléphone */
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--trait);
  border: 1px solid var(--trait);
}
.formule {
  background: var(--suie);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.formule--phare { background: rgba(231, 175, 53, .07); }
/* Le ruban est présent dans les TROIS cartes, invisible dans deux d'entre elles.
   Sans ça, il décalerait la carte mise en avant et les prix ne s'aligneraient
   plus d'une carte à l'autre. */
.formule__ruban {
  align-self: flex-start;
  margin: 0 0 .2rem;
  padding: .2rem .6rem;
  border: 1px solid var(--or);
  color: var(--or);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.formule__ruban--vide { border-color: transparent; color: transparent; }
.formule__nom {
  font-size: 1.5rem;
  color: var(--craie);
  margin: 0;
}
.formule__quantite {
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cendre);
  margin: 0;
}
.formule__prix {
  font-family: "Prata", Georgia, serif;
  font-size: 2.2rem;
  color: var(--or);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.formule__note { font-size: var(--t-s); color: var(--cendre); }

@media (min-width: 780px) {
  .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Blocs de texte ------------------------------------------------------ */
/* Attention : ces règles visent les ENFANTS DIRECTS (`>`) et non tous les
   descendants. Sans cela, `.bloc p` (spécificité 0-1-1) écraserait la couleur de
   `.formule__prix` (0-1-0) et les prix s'afficheraient en gris au lieu de doré. */
.bloc { display: flex; flex-direction: column; gap: 1.1rem; }
.bloc > h2 { margin-bottom: .3rem; max-width: 26ch; }
.bloc > h3 { margin-top: 1.4rem; max-width: 30ch; }
.bloc > p { color: var(--cendre); }
.bloc > p > strong,
.bloc > .liste-nue strong { color: var(--craie); font-weight: 400; }

.liste-nue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.liste-nue li { position: relative; padding-left: 1.5rem; color: var(--cendre); max-width: 60ch; }
.liste-nue li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 9px; height: 1px; background: var(--or);
}

/* --- Planche de photos ----------------------------------------------------
   Mise en colonnes plutôt qu'en grille : les photos horizontales et verticales
   cohabitent sans être recadrées, et sans laisser de trous. */
.planche {
  columns: 1;
  column-gap: 1rem;
  margin-top: 1.6rem;
}
.planche img {
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  border: 1px solid var(--trait);
}
@media (min-width: 620px) { .planche { columns: 2; } }
@media (min-width: 920px) { .planche { columns: 3; } }
/* Les trois cadres personnalisés restent alignés côte à côte : ils se comparent. */
.planche--trois { columns: 1; }
@media (min-width: 620px) { .planche--trois { columns: 2; } }
@media (min-width: 920px) { .planche--trois { columns: 3; } }

/* --- Galerie : emplacements en attente des vraies photos ------------------
   Ce ne sont PAS des photos d'illustration. Chaque cadre décrit la prise de vue
   attendue, pour qu'aucun visuel emprunté ne puisse partir en ligne par erreur.
   Tout ce bloc disparaît quand les vraies photos arrivent.               ----- */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
}
.cliche {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 1.1rem;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--bronze);
  background:
    repeating-linear-gradient(135deg,
      rgba(231,175,53,.03) 0 12px,
      transparent 12px 24px),
    var(--suie);
}
.cliche--portrait { aspect-ratio: 4 / 5; }
.cliche__rang {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-family: "Prata", Georgia, serif;
  font-size: 1.6rem;
  color: rgba(231, 175, 53, .35);
  line-height: 1;
}
/* Emplacement rempli par une vraie photo : plus de pointillés ni de hachures. */
.cliche--photo {
  padding: 0;
  aspect-ratio: auto;
  border: 1px solid var(--trait);
  border-style: solid;
  background: var(--noir);
}
.cliche--photo img { width: 100%; height: auto; }
.cliche--photo figcaption { padding: 1rem 1.1rem 1.2rem; }

.cliche figcaption { font-size: var(--t-s); color: var(--cendre); line-height: 1.55; }
.cliche figcaption b {
  display: block;
  color: var(--or);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

/* `minmax(0, 1fr)` et non `1fr` : sinon une colonne contenant une image refuse
   de descendre sous la largeur naturelle du fichier, et la grille déborde. */
@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cliche--large { grid-row: span 2; }
}
@media (min-width: 1000px) {
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Numéros de téléphone ------------------------------------------------- */
.numeros {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 1.6rem 0;
  text-align: center;
}
.numero__qui {
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cendre);
  margin: 0 0 .2rem;
}

@media (min-width: 640px) {
  .numeros { flex-direction: row; justify-content: center; gap: 4rem; }
}

/* --- Appel direct : chemin le plus court vers une réservation ------------- */
.appel {
  background: var(--suie);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  text-align: center;
}
/* Le sur-titre et la mention sont des `p` : ils héritent du `max-width: 62ch`
   global, qui les empêcherait de se centrer dans la largeur du bandeau. */
.appel .surtitre { max-width: none; }
.appel .discret { max-width: 46ch; margin-inline: auto; }
.appel__phrase { color: var(--craie); max-width: 44ch; margin-inline: auto; font-size: 1.05rem; }
.appel .conteneur { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

/* Rappel discret de l'action, entre les sections. Aligné sur la colonne de
   lecture et non centré : il accompagne le texte au lieu de l'interrompre. */
.cta-fil { margin-top: 1.6rem; }

.appel__numero {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--or);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* --- Formulaire ----------------------------------------------------------
   Une colonne sur téléphone, deux à partir de 640 px pour les champs courts.
   Toutes les cibles font au moins 44 px de haut : on remplit ce formulaire
   au pouce, dans un canapé, la plupart du temps.                        ----- */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-top: 1.8rem;
  max-width: 640px;
}
.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ label {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cendre);
}
.champ label span { color: var(--accent); }

/* `:not([type="checkbox"])` est essentiel : ces réglages sont pensés pour des
   champs de saisie. Appliqués à une case à cocher, ils lui imposent 44 px de
   haut, un fond, une bordure, un rembourrage et surtout `appearance: none`,
   qui efface son dessin natif — la case devient inutilisable. */
.champ input:not([type="checkbox"]),
.champ select,
.champ textarea {
  min-height: var(--tactile);
  padding: .7rem .9rem;
  border: 1px solid var(--trait);
  background: var(--suie);
  color: var(--craie);
  font-family: inherit;
  font-size: 1rem;      /* 16 px minimum : en dessous, iOS zoome à la saisie */
  font-weight: 300;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.champ select {
  /* Chevron dessiné en CSS : aucune image à charger. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--or) 50%),
    linear-gradient(135deg, var(--or) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.champ input::placeholder,
.champ textarea::placeholder { color: #6E6559; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--accent); outline: none; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 2px; }

.champ-duo { display: flex; flex-direction: column; gap: 1.3rem; }
@media (min-width: 640px) {
  .champ-duo { flex-direction: row; }
  .champ-duo > .champ { flex: 1 1 0; min-width: 0; }
}

.champ--case { flex-direction: row; align-items: flex-start; gap: .8rem; }

/* Case à cocher laissée native : c'est la seule façon d'être certain qu'elle
   fonctionne partout, sur tout navigateur et toute version. `accent-color`
   suffit à la teinter aux couleurs de la marque, sans rien casser. */
.champ--case input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: .2rem 0 0;
  accent-color: var(--or);
  cursor: pointer;
}
.champ--case label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-s);
  line-height: 1.6;
}

/* Piège à robots : hors écran plutôt que display:none, que certains robots
   détectent. Retiré de la navigation clavier et des lecteurs d'écran. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pages légales --------------------------------------------------------
   Colonne de lecture étroite : ces textes se lisent, ils ne se parcourent pas. */
.legal .bloc { gap: 1rem; }
.legal h1 { font-size: var(--t-xl); max-width: 22ch; }
.legal h2 {
  font-size: var(--t-l);
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--trait);
  max-width: 26ch;
}
.legal p { color: var(--cendre); }
.legal strong { color: var(--craie); font-weight: 400; }
.legal .liste-nue li { color: var(--cendre); }
.legal .bouton { align-self: flex-start; margin-top: 1.5rem; }

/* --- Page de réponse du formulaire ---------------------------------------- */
.reponse { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.reponse .conteneur { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.reponse p { color: var(--cendre); max-width: 46ch; }
.reponse .erreurs {
  list-style: none;
  margin: 0;
  padding: 1rem 1.3rem;
  border: 1px solid var(--bronze);
  background: rgba(184, 111, 4, .1);
  color: var(--craie);
  text-align: left;
  max-width: 46ch;
}
.reponse .erreurs li + li { margin-top: .5rem; }

/* --- Pied de page -------------------------------------------------------- */
.pied {
  background: var(--noir);
  border-top: 1px solid var(--trait);
  padding-block: 2.5rem;
  font-size: var(--t-s);
  color: var(--cendre);
}
.pied__grille { display: flex; flex-direction: column; gap: 1.5rem; }
.pied a { color: var(--cendre); }
.pied a:hover, .pied a:focus-visible { color: var(--or); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

@media (min-width: 780px) {
  .pied__grille { flex-direction: row; justify-content: space-between; gap: 3rem; }
}

/* --- Chantier en cours : repères visuels, à retirer avant mise en ligne --- */
.a-faire {
  border: 1px dashed var(--bronze);
  background: rgba(184, 111, 4, .08);
  padding: 1rem 1.2rem;
  color: var(--cendre);
  font-size: var(--t-s);
}
.a-faire::before {
  content: "À COMPLÉTER — ";
  color: var(--bronze);
  letter-spacing: .14em;
  font-size: var(--t-xs);
}