/* ===========================================================
   PAGES.CSS · Mises en page propres à chaque page
   Accueil, services, à propos, contact, légales, 404.
   =========================================================== */

/* ─── En-tête de section ────────────────────────────────────────────────*/
.entete { max-width: 720px; margin-bottom: var(--space-lg); }
.entete--centre { margin-inline: auto; text-align: center; }
.entete--centre .lead { margin-inline: auto; }
.entete__titre { margin-top: var(--space-xs); }
.entete__lead { margin-top: var(--space-sm); }

.entete--large {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-lg);
  align-items: end;
  max-width: none;
}
@media (max-width: 860px) {
  .entete--large { grid-template-columns: 1fr; align-items: start; }
}

/* ─── Bannière d'accueil ────────────────────────────────────────────────*/
.banniere { padding-block: clamp(32px, 4.5vw, 64px) var(--section-y); }

.banniere__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 940px) {
  .banniere__grille { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.banniere__contenu { max-width: 620px; }
.banniere__titre { margin-top: var(--space-xs); }
.banniere__lead { margin-top: var(--space-md); }

.banniere__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Le visuel est posé dans un cadre décalé : un filet laiton en retrait
   donne de la profondeur sans ombre portée. */
.banniere__visuel { position: relative; }
.banniere__visuel::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--laiton-filet);
  border-radius: var(--radius-md);
  pointer-events: none;
}
@media (max-width: 940px) {
  .banniere__visuel::before { inset: 12px -12px -12px 12px; }
}
.banniere__figure { aspect-ratio: 4 / 5; box-shadow: var(--ombre-carte); }
@media (max-width: 940px) {
  .banniere__figure { aspect-ratio: 4 / 3; }
}

/* ─── Bandeau de repères ────────────────────────────────────────────────*/
.reperes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 760px) {
  .reperes { grid-template-columns: 1fr; gap: var(--space-md); }
}
.repere { display: flex; flex-direction: column; gap: 8px; }
.repere + .repere { padding-left: var(--space-lg); border-left: 1px solid var(--filet-clair); }
@media (max-width: 760px) {
  .repere + .repere {
    padding-left: 0; padding-top: var(--space-md);
    border-left: 0; border-top: 1px solid var(--filet-clair);
  }
}
.repere__valeur {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  color: var(--laiton);
}
.repere__texte {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: rgba(247, 244, 238, 0.76);
  max-width: 34ch;
}

/* ─── Cartes de services ────────────────────────────────────────────────*/
.cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 820px) { .cartes { grid-template-columns: 1fr; } }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--blanc);
  border: 1px solid var(--filet-fin);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.carte:hover {
  border-color: var(--laiton-filet);
  box-shadow: var(--ombre-carte);
  transform: translateY(-3px);
}
/* Le numéro de carte est du texte lu à voix haute, pas un ornement : il
   prend la déclinaison lisible du laiton, pas la teinte décorative. */
.carte__num {
  font-family: var(--font-serif);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  color: var(--laiton-texte);
}
.section--marine .carte__num { color: var(--laiton); }
.carte__titre { color: var(--text); }
.carte__texte { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }

.section--marine .carte {
  background: rgba(247, 244, 238, 0.045);
  border-color: rgba(247, 244, 238, 0.13);
}
.section--marine .carte:hover { border-color: var(--laiton-filet); box-shadow: none; }
.section--marine .carte__titre { color: var(--sable); }
.section--marine .carte__texte { color: rgba(247, 244, 238, 0.74); }

/* ─── Étapes de la méthode ──────────────────────────────────────────────*/
.etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

.etape { display: flex; flex-direction: column; gap: 12px; padding-top: var(--space-md); position: relative; }
/* Un filet court chapeaute chaque étape et suggère la progression. */
.etape::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: var(--space-md);
  height: 1px;
  background: var(--filet);
}
.etape::after {
  content: '';
  position: absolute;
  top: -2.5px; left: 0;
  width: 5px; height: 5px;
  background: var(--laiton);
  transform: rotate(45deg);
}
.etape__num {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: var(--ls-wide);
  color: var(--laiton-texte);
}
.etape__texte { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }

/* ─── Section en deux colonnes (texte + image) ──────────────────────────*/
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* Pour alterner image à gauche et image à droite, on inverse l'ordre des
   deux blocs dans le HTML. Il existait ici une classe qui le faisait avec
   `order` en CSS : elle ne servait à rien, puisqu'elle repoussait en
   premier un élément qui l'était déjà, et elle aurait de toute façon
   désynchronisé l'ordre visuel de l'ordre de lecture au clavier. */

.duo__contenu { max-width: 560px; }
.duo__texte { margin-top: var(--space-sm); }

.villes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.ville {
  padding: 7px 15px;
  background: var(--blanc);
  border: 1px solid var(--filet-fin);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  color: var(--text-soft);
}
.section--marine .ville {
  background: rgba(247, 244, 238, 0.06);
  border-color: rgba(247, 244, 238, 0.16);
  color: rgba(247, 244, 238, 0.8);
}

/* ─── Mise en avant du livret ───────────────────────────────────────────*/
.langues-demo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.langue-puce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(247, 244, 238, 0.07);
  border: 1px solid rgba(247, 244, 238, 0.17);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  color: rgba(247, 244, 238, 0.85);
}
.langue-puce__code {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--laiton);
}

/* ─── Vitrine des logements gérés ───────────────────────────────────────*/
/* Les textes de la section restent dans la grille du site ; seule la piste
   en sort et file d'un bord à l'autre de l'écran, à 20 px près. Défilement
   horizontal natif, donc utilisable au doigt et au trackpad sans une ligne
   de JavaScript ; le script n'ajoute que les flèches et le repère de
   progression. */
:root { --vitrine-marge: 20px; }

.vitrine { position: relative; margin-top: var(--space-lg); }

.vitrine__piste {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: var(--vitrine-marge);
  padding-block: 4px var(--space-sm);
  /* Sans cette réserve, une carte amenée par scroll-snap viendrait coller
     au bord de l'écran au lieu de s'aligner sur les autres. */
  scroll-padding-left: var(--vitrine-marge);
  /* Barre de défilement masquée : le repère de progression la remplace. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vitrine__piste::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vitrine__piste { scroll-behavior: auto; }
}

/* grow à 1 mais shrink à 0 : les cartes s'étirent pour occuper toute la
   largeur quand elles tiennent toutes, et gardent leur taille de base dès
   qu'il y en a trop, ce qui déclenche le défilement au lieu de les
   comprimer. */
.annonce {
  flex: 1 0 clamp(272px, 26vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--filet-fin);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.annonce:hover {
  border-color: var(--laiton-filet);
  box-shadow: var(--ombre-carte);
  transform: translateY(-3px);
}
.section--marine .annonce {
  background: rgba(247, 244, 238, 0.05);
  border-color: rgba(247, 244, 238, 0.14);
}

.annonce__figure {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  flex: 0 0 auto;
}
.annonce__sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--fs-micro);
  color: var(--text-soft);
}

.annonce__corps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-md);
  flex: 1 1 auto;
}
.annonce__ville {
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.section--marine .annonce__ville { color: var(--laiton); }
.annonce__nom { line-height: 1.15; }
.section--marine .annonce__nom { color: var(--sable); }
.annonce__detail { font-size: var(--fs-micro); color: var(--text-soft); }
.annonce__texte {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--text-soft);
  flex: 1 1 auto;
}
.section--marine .annonce__detail,
.section--marine .annonce__texte { color: rgba(247, 244, 238, 0.74); }
.annonce__lien { align-self: flex-start; margin-top: 10px; }

.vitrine__pied {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-inline: var(--vitrine-marge);
  margin-top: var(--space-sm);
}
/* Sans cette règle, la barre masquée resterait un calque qui intercepte
   les clics au-dessus de la piste. */
.vitrine__pied[hidden] { display: none; }

/* Repère de progression : il remplace la barre de défilement masquée et
   dit d'un coup d'œil qu'il reste des logements à voir. */
.vitrine__jauge {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--filet);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.section--marine .vitrine__jauge { background: rgba(247, 244, 238, 0.18); }

.vitrine__jauge-curseur {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 25%;
  background: var(--laiton);
  border-radius: var(--radius-pill);
  /* Piloté en transform : animer left ou width relancerait une mise en
     page à chaque image du défilement. */
  transition: transform var(--t-fast);
}

.vitrine__fleches { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 700px) {
  /* Sur téléphone le défilement se fait au doigt : la jauge suffit, les
     flèches ne feraient qu'encombrer. */
  .vitrine__fleches { display: none; }
}

.vitrine__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.vitrine__fleche:hover:not(:disabled) { border-color: var(--marine-clair); color: var(--marine-clair); }
.vitrine__fleche:disabled { opacity: 0.3; cursor: default; }
.section--marine .vitrine__fleche { border-color: rgba(247, 244, 238, 0.28); color: var(--sable); }
.section--marine .vitrine__fleche:hover:not(:disabled) { border-color: var(--laiton); color: var(--laiton); }

/* ─── Engagements ───────────────────────────────────────────────────────*/
.engagements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--filet);
}
@media (max-width: 760px) { .engagements { grid-template-columns: 1fr; } }

.engagement {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-bottom: 1px solid var(--filet);
}
.engagement:nth-child(odd) { padding-right: var(--space-xl); }
@media (min-width: 761px) {
  .engagement:nth-child(even) { padding-left: var(--space-lg); border-left: 1px solid var(--filet); }
}
@media (max-width: 760px) { .engagement { padding-right: 0; } }

.engagement__titre { display: flex; align-items: baseline; gap: 12px; }
.engagement__marque {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  background: var(--laiton);
  transform: rotate(45deg);
}
.engagement__texte { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }

/* ─── Bande d'appel finale ──────────────────────────────────────────────*/
.appel {
  position: relative;
  overflow: hidden;
  background: var(--marine-nuit);
  color: var(--sable);
  isolation: isolate;
}
.appel__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
}
.appel__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Voile dégradé par-dessus la photo. Il est volontairement opaque sur la
   moitié gauche, là où vient le texte : le client peut remplacer l'image
   depuis l'admin, et le contraste doit tenir quelle que soit celle qu'il
   choisit, y compris une photo très claire. */
.appel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              var(--marine-nuit) 0%,
              var(--marine-nuit) 44%,
              rgba(11, 31, 51, 0.82) 78%,
              rgba(11, 31, 51, 0.7) 100%);
}
@media (max-width: 900px) {
  /* En colonne, le texte occupe toute la largeur : le voile doit couvrir
     partout, pas seulement à gauche. */
  .appel::before { background: rgba(11, 31, 51, 0.88); }
}
.appel__contenu {
  max-width: 640px;
  padding-block: var(--section-y);
}
/* .appel a un fond sombre sans porter .section--marine : sans ces règles,
   le texte garde la couleur prévue pour le fond clair et tombe à 3,3:1,
   sous le minimum lisible. */
.appel .eyebrow { color: var(--laiton); }
.appel .lead,
.appel .prose { color: rgba(247, 244, 238, 0.82); }
.appel__texte { margin-top: var(--space-sm); }
.appel__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ─── Bannière de page intérieure ───────────────────────────────────────*/
.page-banniere {
  padding-block: clamp(48px, 7vw, 92px) clamp(32px, 4vw, 56px);
}
.page-banniere__titre { margin-top: var(--space-xs); max-width: 18ch; }
.page-banniere__lead { margin-top: var(--space-md); }

.page-banniere--duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 900px) { .page-banniere--duo { grid-template-columns: 1fr; } }

/* La bannière porte déjà sa marge basse : la section qui la suit
   immédiatement n'a pas à en rajouter une pleine, sinon le titre paraît
   détaché du contenu qu'il annonce. */
.page-banniere + .section { padding-top: clamp(16px, 2.5vw, 36px); }

/* ─── Formules (page services) ──────────────────────────────────────────*/
.formules { display: flex; flex-direction: column; gap: var(--space-md); }

.formule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--blanc);
  border: 1px solid var(--filet-fin);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.formule:hover { border-color: var(--laiton-filet); box-shadow: var(--ombre-douce); }
@media (max-width: 860px) { .formule { grid-template-columns: 1fr; gap: var(--space-md); } }

/* La première formule est celle que l'on recommande : elle se distingue
   par le fond, pas seulement par une étiquette de couleur. */
.formule--phare { background: var(--sable-bloc); border-color: var(--laiton-filet); }

.formule__chapo {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-style: italic;
  color: var(--marine);
}
.formule__texte { margin-top: var(--space-sm); font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }

.formule__prix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--filet);
}
.formule__prix-valeur { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text); }
.formule__prix-note { font-size: var(--fs-micro); color: var(--text-soft); }

.formule__liste { display: flex; flex-direction: column; gap: 11px; }
.formule__point {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-soft);
}
/* Coche dessinée en CSS : pas d'emoji, pas d'icône à charger. Le rectangle
   doit être plus haut que large, sinon la rotation donne un chevron et non
   une coche. */
.formule__coche {
  flex: 0 0 auto;
  width: 6px; height: 11px;
  margin: 2px 6px 0 2px;
  border-right: 1.5px solid var(--laiton);
  border-bottom: 1.5px solid var(--laiton);
  transform: rotate(42deg);
  transform-origin: center;
}

/* ─── Options à la carte ────────────────────────────────────────────────*/
.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--filet);
}
@media (max-width: 900px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .options { grid-template-columns: 1fr; } }

.option {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--filet);
}
.option__nom { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; }
.option__detail { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--text-soft); }

/* ─── FAQ ───────────────────────────────────────────────────────────────*/
.faq { border-top: 1px solid var(--filet); }
.faq__item { border-bottom: 1px solid var(--filet); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
  padding-block: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--marine-clair); }

/* Croix qui pivote : l'état ouvert ne tient pas qu'à la couleur. */
.faq__signe {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  transition: transform var(--t-base);
}
.faq__signe::before,
.faq__signe::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--laiton);
}
.faq__signe::after { transform: rotate(90deg); }
.faq__item[open] .faq__signe { transform: rotate(135deg); }

.faq__reponse {
  padding-bottom: var(--space-md);
  padding-right: var(--space-lg);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--text-soft);
  max-width: 72ch;
}

/* ─── Valeurs (à propos) ────────────────────────────────────────────────*/
.valeurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 840px) { .valeurs { grid-template-columns: 1fr; gap: var(--space-md); } }

.valeur { display: flex; flex-direction: column; gap: 12px; }
/* Chiffre en filigrane, purement ornemental : il est aria-hidden dans la
   vue, donc hors du critère de contraste, mais il doit tout de même se
   voir, sinon autant le retirer. */
.valeur__num {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  color: rgba(185, 140, 70, 0.5);
}
.valeur__texte { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }

.recit { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
@media (max-width: 840px) { .recit { grid-template-columns: 1fr; gap: var(--space-md); } }
.recit__texte { font-size: var(--fs-lead); line-height: var(--lh-loose); }

/* ─── Contact ───────────────────────────────────────────────────────────*/
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact__formulaire {
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--blanc);
  border: 1px solid var(--filet-fin);
  border-radius: var(--radius-md);
}
.contact__pied {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--filet);
}

.contact__aside { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: 98px; }
@media (max-width: 900px) { .contact__aside { position: static; } }

.fiche {
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--sable-bloc);
  border-radius: var(--radius-md);
}
.fiche--marine { background: var(--marine-nuit); color: var(--sable); }
.fiche__titre { font-family: var(--font-serif); font-size: var(--fs-h3); }
.fiche__texte { margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--text-soft); }
.fiche--marine .fiche__texte { color: rgba(247, 244, 238, 0.76); }

.coords { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-md); }
.coord {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  justify-content: center;
  padding-block: 8px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--filet);
  transition: color var(--t-fast);
}
.coord:first-child { border-top: 0; }
.fiche--marine .coord { border-color: rgba(247, 244, 238, 0.14); }
.coord:hover { color: var(--marine-clair); }
.fiche--marine .coord:hover { color: var(--laiton); }
.coord__label {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}
.fiche--marine .coord__label { color: rgba(247, 244, 238, 0.6); }
.coord__valeur { font-size: var(--fs-body); }

.horaires {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: var(--text-soft);
}

/* ─── Pages légales ─────────────────────────────────────────────────────*/
.legal__maj { margin-top: var(--space-sm); font-size: var(--fs-micro); color: var(--text-soft); }
.legal-corps { max-width: 72ch; }
.legal-corps h2 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.legal-corps h2:first-child { margin-top: 0; }
.legal-corps p,
.legal-corps li { line-height: var(--lh-loose); color: var(--text-soft); }
.legal-corps p + p { margin-top: var(--space-sm); }
.legal-corps ul { margin: var(--space-sm) 0; padding-left: 20px; list-style: disc; }
.legal-corps li { margin-bottom: 6px; }
.legal-corps a { color: var(--marine-clair); text-decoration: underline; text-underline-offset: 3px; }

/* ─── 404 ───────────────────────────────────────────────────────────────*/
.erreur-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 62vh;
  padding-block: var(--space-2xl);
  text-align: center;
}
.erreur-page__code {
  font-family: var(--font-serif);
  font-size: clamp(64px, 12vw, 128px);
  line-height: 1;
  color: var(--laiton-voile);
}
.erreur-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

/* ─── Page d'attente ────────────────────────────────────────────────────*/
.attente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--marine-nuit);
  color: var(--sable);
}
@media (max-width: 900px) { .attente { grid-template-columns: 1fr; } }

.attente__corps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(28px, 5vw, 64px) var(--gutter);
}
.attente__marque { display: flex; align-items: center; gap: 14px; }
.attente__voile { width: 34px; height: 38px; flex: 0 0 auto; }
.attente__nom { font-family: var(--font-serif); font-size: 22px; line-height: 1.1; }
.attente__baseline {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--laiton);
}

.attente__centre { max-width: 620px; padding-block: var(--space-lg); }
/* Même raison que pour .appel : fond sombre sans .section--marine. */
.attente .eyebrow { color: var(--laiton); }
.attente .lead,
.attente .prose { color: rgba(247, 244, 238, 0.82); }
.attente__titre { margin-top: var(--space-sm); }
.attente__lead { margin-top: var(--space-md); }
.attente__body { margin-top: var(--space-sm); font-size: var(--fs-small); }
/* La citation tient sur une seule ligne : c'est une formule, la couper en
   deux lui ferait perdre son effet. Pas de limite de mesure ici, et
   l'équilibrage automatique des titres est neutralisé, car il répartirait
   la phrase sur deux lignes alors qu'elle a la place. */
.attente__citation {
  margin-top: var(--space-lg);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--laiton);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.75vw, 23px);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--sable);
  text-wrap: initial;
}
/* Sous cette largeur, aucune taille lisible ne la ferait tenir : on la
   laisse alors revenir à la ligne plutôt que de la rendre minuscule. */
@media (min-width: 620px) {
  .attente__citation { white-space: nowrap; }
}
.attente__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.attente__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(247, 244, 238, 0.14);
  font-size: var(--fs-micro);
  color: rgba(247, 244, 238, 0.6);
}
.attente__pied a { color: rgba(247, 244, 238, 0.85); text-decoration: none; }
.attente__pied a:hover { color: var(--laiton); }

.attente__visuel { position: relative; overflow: hidden; }
.attente__visuel img { width: 100%; height: 100%; object-fit: cover; }
.attente__visuel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 31, 51, 0.28), rgba(11, 31, 51, 0.72));
}
@media (max-width: 900px) { .attente__visuel { min-height: 240px; order: -1; } }

/* Tiroir latéral de contact et d'inscription. Il s'ouvre par :target, donc
   avec un vrai lien : aucune ligne de JavaScript n'est nécessaire pour
   qu'il fonctionne, ce qui compte sur une page d'attente que des robots
   d'indexation et des navigateurs anciens vont aussi visiter. */
.panneau {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  transition: visibility var(--t-base);
}
.panneau:target { visibility: visible; }

.panneau__voile {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 30, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base);
}
.panneau:target .panneau__voile { opacity: 1; }

.panneau__boite {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  /* Une bande de voile reste visible à gauche, même sur le plus petit
     écran : elle montre que la page est toujours là derrière, et donne
     une seconde façon de refermer, en cliquant à côté. */
  width: min(540px, calc(100% - 44px));
  background: var(--sable);
  color: var(--text);
  box-shadow: -24px 0 64px rgba(6, 18, 30, 0.35);
  overflow-y: auto;
  /* Le défilement du tiroir ne doit pas entraîner celui de la page. */
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
.panneau:target .panneau__boite { transform: none; }

/* La tête reste visible pendant le défilement du formulaire : sur un
   tiroir pleine hauteur, une croix placée tout en haut deviendrait
   inatteignable dès la première ligne saisie. */
.panneau__tete {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) clamp(20px, 4vw, 36px);
  background: var(--sable);
  border-bottom: 1px solid var(--filet-fin);
}
.panneau__eyebrow {
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.panneau__titre {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.15;
}
.panneau__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.panneau__fermer:hover {
  background: var(--sable-bloc);
  color: var(--text);
  border-color: var(--marine-clair);
}

.panneau__corps { padding: var(--space-md) clamp(20px, 4vw, 36px) var(--space-lg); }
.panneau__intro { color: var(--text-soft); line-height: var(--lh-loose); }
.panneau__form { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }


.inscription { display: flex; gap: 10px; margin-top: var(--space-sm); }
.inscription .champ { flex: 1 1 auto; }
@media (max-width: 520px) { .inscription { flex-direction: column; } }