/* ===========================================================
   MAIN.CSS · Base, typographie, composants communs
   En-tête, pied de page, boutons, champs, filets.
   Les mises en page propres à chaque page sont dans pages.css.
   =========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Le débordement horizontal est la panne la plus courante sur mobile :
     on le coupe ici, mais jamais sur un ancêtre d'élément sticky. */
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }
a { color: inherit; }

/* Un élément masqué doit l'être même quand une règle lui donne un
   display de grille ou de flex : sinon il reste un calque invisible qui
   intercepte tous les clics de la page. */
[hidden] { display: none !important; }

/* ─── Accessibilité ─────────────────────────────────────────────────────*/
:focus-visible {
  outline: 2px solid var(--marine-clair);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
/* Fond marine : le contour bleu deviendrait invisible. */
.sur-marine :focus-visible,
.site-footer :focus-visible,
.editor-bar :focus-visible {
  outline-color: var(--laiton);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--marine-nuit);
  color: var(--sable);
  padding: 14px 22px;
  font-size: var(--fs-small);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.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) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Structure ─────────────────────────────────────────────────────────*/
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

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

/* L'en-tête est collant : sans cette réserve, arriver sur une section par
   une ancre place son titre juste dessous, donc caché. */
section, [id] { scroll-margin-top: calc(78px + var(--space-md)); }
.section--serre { padding-block: clamp(48px, 6vw, 80px); }

.section--marine {
  background: var(--marine-nuit);
  color: var(--sable);
}
.section--bloc { background: var(--bg-bloc); }

main { display: block; }

/* ─── Typographie ───────────────────────────────────────────────────────*/
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.section--marine .eyebrow,
.sur-marine .eyebrow { color: var(--laiton); }

.display, .titre-1, .titre-2, .titre-3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  /* Fraunces est variable : on adoucit légèrement les formes et on
     laisse l'axe optique suivre le corps. */
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
.titre-1  { font-size: var(--fs-h1);      line-height: var(--lh-tight); }
.titre-2  { font-size: var(--fs-h2);      line-height: var(--lh-snug); }
.titre-3  { font-size: var(--fs-h3);      line-height: var(--lh-snug); font-weight: 500; }
.titre-4  {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
}

/* Les titres du CMS peuvent contenir un saut de ligne, que le client
   place lui-même en éditant. On le respecte au rendu, et on renonce
   alors à l'équilibrage automatique qui le contredirait. */
.titre-multiligne { white-space: pre-line; text-wrap: initial; }

/* ─── Titre en deux temps ───────────────────────────────────────────────*/
/* Les grands titres se composent de deux membres : l'annonce, puis sa
   chute en italique. Ce sont deux champs distincts du contenu, et non un
   seul texte balisé : l'édition en ligne travaille en texte brut et
   effacerait toute balise glissée à l'intérieur d'un champ. */
.titre-duo { display: flex; flex-direction: column; }
/* Chaque membre occupe sa ligne : sans cela l'équilibrage automatique des
   titres coupait la chute en deux sur les grands écrans, alors qu'elle y
   tenait largement. */
.titre-duo > span { text-wrap: initial; }

.titre-duo__suite {
  font-style: italic;
  color: var(--marine);
}
.section--marine .titre-duo__suite,
.attente .titre-duo__suite { color: var(--laiton); }

/* Un filet court sous la chute, comme une signature. Décoratif, donc à
   l'écart du texte lu à voix haute. */
.titre-duo__suite::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 0.32em;
  background: var(--laiton-filet);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-soft);
  max-width: 62ch;
}
.section--marine .lead { color: rgba(247, 244, 238, 0.78); }

.prose {
  line-height: var(--lh-loose);
  color: var(--text-soft);
  max-width: 68ch;
  white-space: pre-line; /* les sauts de ligne du CMS sont respectés */
}
.prose--fort { color: var(--text); }
.section--marine .prose { color: rgba(247, 244, 238, 0.78); }

.mesure { max-width: 62ch; }

/* ─── Filets et ornements ───────────────────────────────────────────────*/
/* Le filet coupé d'un losange est la signature graphique du site :
   discret, il ponctue chaque entrée de section. C'est un <div> et non un
   <hr>, qui ne peut pas contenir le losange, et il est purement
   décoratif : toujours aria-hidden. */
.filet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: var(--space-sm);
  border: 0;
  padding: 0;
}
.filet::before,
.filet::after {
  content: '';
  height: 1px;
  background: var(--laiton-filet);
}
.filet::before { width: 34px; flex: 0 0 auto; }
.filet::after  { flex: 1 1 auto; background: var(--filet-fin); }

.filet__losange {
  width: 5px; height: 5px;
  flex: 0 0 auto;
  background: var(--laiton);
  transform: rotate(45deg);
}
.section--marine .filet::after { background: var(--filet-clair); }

.filet--centre { justify-content: center; }
.filet--centre::after { flex: 0 0 34px; }

/* ─── Boutons ───────────────────────────────────────────────────────────*/
.btn {
  --btn-bg: var(--marine-nuit);
  --btn-fg: var(--sable);
  --btn-bd: var(--marine-nuit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48 px de haut : au-dessus du minimum tactile de 44 px. */
  min-height: 48px;
  padding: 12px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn:hover:not(:disabled) {
  background: var(--marine-clair);
  border-color: var(--marine-clair);
  /* translateY plutôt que scale : ne déplace pas le contenu voisin. */
  transform: translateY(-1px);
  box-shadow: var(--ombre-carte);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn__fleche {
  transition: transform var(--t-fast);
  font-size: 1.05em;
  line-height: 1;
}
.btn:hover:not(:disabled) .btn__fleche { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--marine-nuit);
  --btn-bd: var(--filet);
}
.btn--ghost:hover:not(:disabled) {
  background: transparent;
  color: var(--marine-clair);
  border-color: var(--marine-clair);
  box-shadow: none;
}
.btn--clair {
  --btn-bg: var(--laiton);
  --btn-fg: var(--marine-nuit);
  --btn-bd: var(--laiton);
}
.btn--clair:hover:not(:disabled) {
  background: var(--sable);
  border-color: var(--sable);
  color: var(--marine-nuit);
}
.btn--contour-clair {
  --btn-bg: transparent;
  --btn-fg: var(--sable);
  --btn-bd: rgba(247, 244, 238, 0.34);
}
.btn--contour-clair:hover:not(:disabled) {
  background: rgba(247, 244, 238, 0.08);
  border-color: var(--sable);
  color: var(--sable);
  box-shadow: none;
}
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--fs-micro); }
.btn--large { min-height: 56px; padding: 16px 34px; font-size: var(--fs-body); }
.btn--pleine { width: 100%; }

/* Lien-bouton discret, pour les actions secondaires */
.lienbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--laiton-filet);
  color: var(--text);
  font-size: var(--fs-small);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lienbtn:hover { color: var(--marine-clair); border-color: var(--marine-clair); }

.lien-souligne {
  color: var(--marine-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--laiton-filet);
  transition: text-decoration-color var(--t-fast);
}
.lien-souligne:hover { text-decoration-color: currentColor; }

/* ─── Pastilles ─────────────────────────────────────────────────────────*/
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--laiton-voile);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}
.section--marine .pastille {
  background: rgba(185, 140, 70, 0.2);
  color: var(--laiton);
}

/* ─── Formulaires ───────────────────────────────────────────────────────*/
.form__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.champ--pleine { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .form__grille { grid-template-columns: 1fr; }
}

.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.champ__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.champ__requis { color: var(--laiton-texte); }

.champ__input,
.champ__textarea,
.champ__select {
  width: 100%;
  /* 48 px : confortable au doigt, et au-dessus de 16 px de corps pour
     que Safari iOS ne zoome pas à la mise au point. */
  min-height: 48px;
  padding: 13px 16px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.champ__textarea { min-height: 148px; resize: vertical; line-height: var(--lh-normal); }

.champ__input:focus,
.champ__textarea:focus,
.champ__select:focus {
  outline: none;
  border-color: var(--marine-clair);
  box-shadow: 0 0 0 3px rgba(31, 84, 128, 0.14);
}
.champ__input::placeholder,
.champ__textarea::placeholder { color: rgba(90, 113, 134, 0.65); }

.champ__select-enveloppe { position: relative; }
.champ__select {
  appearance: none;
  padding-right: 46px;
  cursor: pointer;
}
/* Chevron en SVG encodé : pas d'emoji, pas de requête supplémentaire. */
.champ__select-enveloppe::after {
  content: '';
  position: absolute;
  right: 17px;
  top: 50%;
  width: 11px; height: 7px;
  transform: translateY(-50%);
  background: var(--bleu-brume);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.champ--erreur .champ__input,
.champ--erreur .champ__textarea,
.champ--erreur .champ__select { border-color: var(--erreur); }

/* L'erreur se place sous le champ concerné, et jamais uniquement en
   haut du formulaire. */
.champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-micro);
  color: var(--erreur);
}
.champ__erreur::before { content: '!'; font-weight: 700; line-height: 1.35; }

.champ__aide { font-size: var(--fs-micro); color: var(--text-soft); }

.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-soft);
  cursor: pointer;
  /* La zone cliquable couvre le libellé entier, pas la seule case. */
  padding: 6px 0;
}
.case input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--marine);
  cursor: pointer;
}

/* Honeypot : invisible pour l'œil, présent pour les robots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.avis {
  padding: 15px 20px;
  background: var(--succes-bg);
  border-left: 2px solid var(--succes);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text);
}
.avis--erreur { background: var(--erreur-bg); border-left-color: var(--erreur); }

/* ─── Confirmation d'envoi ──────────────────────────────────────────────*/
/* Remplace le formulaire une fois le message parti : laisser les champs
   vides à l'écran laisse croire que rien ne s'est passé, et invite à
   renvoyer le même message une seconde fois. */
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 36px);
  background: var(--succes-bg);
  border: 1px solid rgba(44, 97, 72, 0.22);
  border-radius: var(--radius-md);
  text-align: center;
}
.confirmation__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--succes);
  color: #fff;
  animation: confirmation-entree 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes confirmation-entree {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confirmation__coche { animation: none; }
}
.confirmation__titre {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--text);
}
.confirmation__texte {
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--text-soft);
  max-width: 46ch;
}
.confirmation__relance { margin-top: 6px; }

/* ─── En-tête ───────────────────────────────────────────────────────────*/
/* Aucun ancêtre de cet élément ne doit porter overflow:hidden, sinon le
   position:sticky cesse de fonctionner sans le moindre message. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 244, 238, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background var(--t-base);
}
.site-header.is-scrolled {
  border-bottom-color: var(--filet-fin);
  background: rgba(247, 244, 238, 0.95);
}

/* Trois colonnes de largeur égale sur les côtés : la navigation reste
   optiquement centrée quelle que soit la longueur du numéro ou du nom. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  min-height: 78px;
  padding-block: 12px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  justify-self: start;
}
.marque__voile {
  flex: 0 0 auto;
  width: 32px; height: 36px;
  transition: transform var(--t-base);
}
.marque:hover .marque__voile { transform: translateY(-2px) rotate(-3deg); }
.marque__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marque__nom {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}
.marque__ligne {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.nav { display: flex; align-items: center; justify-content: center; }
.nav__liste { display: flex; align-items: center; gap: 4px; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-self: end;
}

/* Le numéro est un lien discret, pas un second bouton : deux appels à
   l'action de même poids se neutraliseraient. */
.tel-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.tel-lien:hover { color: var(--marine-clair); background: rgba(11, 31, 51, 0.045); }
.tel-lien__icone { flex: 0 0 auto; color: var(--laiton-texte); }
@media (max-width: 1120px) { .tel-lien { display: none; } }

.site-header__mobile {
  display: none;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
@media (max-width: 960px) { .site-header__mobile { display: flex; } }

.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.bouton-icone:hover { border-color: var(--marine-clair); color: var(--marine-clair); }

.nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__lien:hover { color: var(--text); background: rgba(11, 31, 51, 0.045); }
.nav__lien.is-current { color: var(--text); font-weight: 500; }
/* La page courante est signalée par un point, pas seulement par la
   couleur : l'information ne doit jamais tenir à la seule teinte. */
.nav__lien.is-current::before {
  content: '';
  width: 4px; height: 4px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--laiton);
}

/* Sous 960 px la barre n'a plus que deux zones : la marque, et le couple
   appel + menu. La grille passe donc de trois colonnes à deux. */
@media (max-width: 960px) {
  .site-header__inner { grid-template-columns: 1fr auto; min-height: 70px; }
  .nav,
  .site-header__actions { display: none; }
  .marque__voile { width: 28px; height: 32px; }
  .marque__nom { font-size: 18px; }
}

/* Même forme que le bouton d'appel voisin : deux traits nus à côté d'un
   bouton rond bordé donnaient une paire bancale. */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 1px solid var(--filet);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.burger:hover { border-color: var(--marine-clair); }
.burger .burger__trait { width: 17px; }
.burger__trait {
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-fast);
}
/* Pas de transformation en croix à l'ouverture : le tiroir recouvre
   l'en-tête, ce burger n'est donc jamais visible en position ouverte.
   La croix vit dans le tiroir. */
.burger:active .burger__trait:first-child { transform: translateY(1px); }
.burger:active .burger__trait:last-child  { transform: translateY(-1px); }
@media (max-width: 960px) { .burger { display: flex; } }

/* ─── Tiroir mobile ─────────────────────────────────────────────────────*/
/* Le tiroir couvre l'en-tête, donc le bouton burger qui l'a ouvert : il
   doit porter sa propre croix de fermeture, sinon le seul moyen de
   ressortir est la touche Échap, que personne n'essaie sur un téléphone. */
.tiroir {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom));
  background: var(--marine-nuit);
  color: var(--sable);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity var(--t-base);
}
/* Sans cette règle, le tiroir masqué resterait un calque invisible qui
   avale tous les clics de la page. */
.tiroir[hidden] { display: none; }
.tiroir[data-open="true"] { opacity: 1; }

.tiroir__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* Même hauteur que l'en-tête du site : rien ne bouge à l'ouverture. */
  min-height: 74px;
  padding-block: 12px;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(247, 244, 238, 0.12);
}
.tiroir .marque { color: var(--sable); }
.tiroir .marque__ligne { color: var(--laiton); }

.tiroir__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid rgba(247, 244, 238, 0.24);
  border-radius: 50%;
  color: var(--sable);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tiroir__fermer:hover { background: rgba(247, 244, 238, 0.1); border-color: var(--sable); }
.tiroir__fermer:active { transform: scale(0.94); }

/* La navigation occupe l'espace disponible, le pied reste en bas. */
.tiroir__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  gap: 0;
  padding-block: var(--space-md);
}
.tiroir__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 64px;
  padding-block: 8px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 7.5vw, 38px);
  line-height: 1.1;
  text-decoration: none;
  color: var(--sable);
  border-bottom: 1px solid rgba(247, 244, 238, 0.12);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base), color var(--t-fast);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.tiroir[data-open="true"] .tiroir__lien { opacity: 1; transform: none; }
.tiroir__lien:hover { color: var(--laiton); }

/* La page courante se signale par un losange, pas seulement par une
   teinte : le laiton seul serait peu lisible et l'information tiendrait
   à la seule couleur. Le marqueur occupe sa place sur TOUS les liens, en
   transparent ailleurs, sinon le libellé courant se décalerait seul vers
   la droite et la colonne perdrait son alignement. */
.tiroir__libelle { display: flex; align-items: baseline; gap: 12px; }
.tiroir__libelle::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  background: transparent;
  transform: rotate(45deg);
}
.tiroir__lien.is-current .tiroir__libelle::before { background: var(--laiton); }
.tiroir__fleche {
  flex: 0 0 auto;
  font-size: 20px;
  color: rgba(247, 244, 238, 0.35);
  transition: transform var(--t-fast), color var(--t-fast);
}
.tiroir__lien:hover .tiroir__fleche { color: var(--laiton); transform: translateX(4px); }

.tiroir__pied {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base);
  transition-delay: 260ms;
}
.tiroir[data-open="true"] .tiroir__pied { opacity: 1; transform: none; }

.tiroir__contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--space-sm);
}
.tiroir__contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding-block: 6px;
  text-decoration: none;
  color: var(--sable);
  border-top: 1px solid rgba(247, 244, 238, 0.12);
  transition: color var(--t-fast);
}
.tiroir__contact--large { grid-column: 1 / -1; }
.tiroir__contact:hover { color: var(--laiton); }
.tiroir__contact-label {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.55);
}
.tiroir__contact-valeur { font-size: var(--fs-small); word-break: break-word; }

.tiroir__zone {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.45);
}

/* Sur un écran bas, ou en paysage, on renonce au centrage vertical pour
   que le pied du tiroir reste atteignable. */
@media (max-height: 680px) {
  .tiroir__nav { justify-content: flex-start; }
  .tiroir__lien { min-height: 54px; font-size: clamp(22px, 6vw, 28px); }
  .tiroir__tete { margin-bottom: var(--space-sm); }
}

/* Téléphone tenu en paysage : il ne reste presque rien en hauteur. On
   compacte tout et on passe les coordonnées sur une seule ligne, plutôt
   que d'imposer un défilement pour atteindre le bouton principal. */
@media (max-height: 520px) {
  .tiroir__tete { min-height: 56px; padding-block: 8px; margin-bottom: 4px; }
  .tiroir__nav { padding-block: var(--space-xs); }
  .tiroir__lien { min-height: 44px; font-size: 20px; }
  .tiroir__pied { gap: var(--space-sm); padding-top: var(--space-xs); }
  .tiroir__contact { min-height: 44px; }
  /* L'adresse reste sur toute la largeur : en trois colonnes, elle se
     coupe au milieu d'un mot. */
  .tiroir__contact-label { display: none; }
  .tiroir__zone { display: none; }
}

/* ─── Pied de page ──────────────────────────────────────────────────────*/
.site-footer {
  background: var(--marine-nuit);
  color: rgba(247, 244, 238, 0.72);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--fs-small);
}
.site-footer__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
@media (max-width: 900px) {
  .site-footer__haut { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}
@media (max-width: 560px) {
  .site-footer__haut { grid-template-columns: 1fr; }
}

.site-footer__marque { display: flex; flex-direction: column; gap: 14px; }
.site-footer__nom {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--sable);
  line-height: 1.1;
}
.site-footer__baseline {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--laiton);
}
.site-footer__mot { max-width: 32ch; line-height: var(--lh-normal); }

.site-footer__col { display: flex; flex-direction: column; gap: 2px; }
.site-footer__titre {
  margin-bottom: 10px;
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sable);
}
.site-footer__lien {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: rgba(247, 244, 238, 0.72);
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-footer__lien:hover { color: var(--laiton); }

.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(247, 244, 238, 0.12);
  font-size: var(--fs-micro);
  color: rgba(247, 244, 238, 0.55);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.site-footer__legal a {
  color: rgba(247, 244, 238, 0.55);
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-footer__legal a:hover { color: var(--laiton); }

/* ─── Apparition au défilement ──────────────────────────────────────────*/
/* Un élément n'est masqué que lorsque le script l'a effectivement confié à
   l'observateur, en lui posant .a-reveler. Conséquence : sans JavaScript
   rien n'est jamais masqué, le premier écran s'affiche immédiatement, et
   une panne du script ne peut pas laisser une page blanche. Masquer a
   priori en CSS, puis compter sur le JavaScript pour révéler, revient à
   parier la lisibilité du site sur l'exécution d'un fichier. */
.reveal.a-reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--d, 0ms);
}
.reveal.a-reveler.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal.a-reveler { opacity: 1; transform: none; }
}

/* ─── Images ────────────────────────────────────────────────────────────*/
/* On fixe la proportion en CSS, donc jamais d'attributs width/height sur
   ces balises : ils l'emporteraient et déformeraient l'image. */
.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--sable-bloc);
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure--portrait { aspect-ratio: 3 / 4; }
.figure--paysage  { aspect-ratio: 4 / 3; }
.figure--large    { aspect-ratio: 16 / 10; }
.figure--bande    { aspect-ratio: 21 / 9; }

/* ─── Toast ─────────────────────────────────────────────────────────────*/
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: var(--z-toast);
  max-width: min(440px, calc(100vw - 32px));
  padding: 13px 24px;
  background: var(--marine-nuit);
  color: var(--sable);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  text-align: center;
  box-shadow: var(--ombre-haute);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.is-error { background: var(--erreur); }