/* ============================================================================
   conversion.css — lot « conversion v2 » (L'Argonaute)
   Styles des trois composants partagés :
     .er-*  bloc « Être rappelé » (EtreRappele.astro) + carte formulaire
            (RappelForm.astro, montée aussi dans la fenêtre)
     .fen-* fenêtre de rappel (FenetreRappel.astro)
     .bm-*  barre fixe mobile + badge Google (BarreMobile.astro)

   Chargé par la prop `styles` de BaseLayout sur les pages qui montent ces
   composants : <BaseLayout styles={['/conversion.css']}>.

   Aucune couleur hors de la table de tokens du handoff : tout passe par les
   variables de src/styles/global.css (--c-navy, --c-coral, --c-coral-deep,
   --c-sky, --c-sky-pale, --gold, --border, --border-strong, --bg-page, --r-*,
   --ease, --t-fast, --t-med) ; les quatre teintes propres au lot (pill neutre,
   corail pâle, mention atténuée, survol de la croix) sont déclarées ci-dessous.

   Mouvement : aucune animation de rebond, aucun état `:active` dédié (règle du
   design system). `prefers-reduced-motion: reduce` neutralise transitions ET
   translations en fin de fichier.
   ============================================================================ */

.er,
.fen,
.bm,
.bm-badge,
.pa {
  --er-pill: oklch(96% 0.005 250); /* piste des onglets */
  --er-corail-pale: oklch(95% 0.025 30); /* bandeaux de confirmation, pastille check */
  --er-mention: oklch(48% 0.02 250); /* mention RGPD */
  --er-survol-neutre: oklch(94% 0.005 250); /* survol de la croix de la fenêtre */
  --er-ombre-carte: 0 8px 24px rgba(0, 52, 93, 0.18);
  --er-ombre-cta: 0 8px 22px rgba(238, 88, 88, 0.32);
}

/* `hidden` doit l'emporter sur les `display:flex` des blocs d'état.
   `.fen[hidden]` (la fenêtre ELLE-MÊME, fermée au chargement) en fait partie :
   son `.fen { display: flex }` est plus spécifique que le `[hidden]` de la
   feuille du navigateur — sans cette ligne, la fenêtre s'affiche ouverte ET
   inerte au chargement de toutes les pages qui la montent (catch recette
   lot 3, page /contact/). */
.er [hidden],
.fen[hidden],
.fen [hidden],
.er-carte [hidden] {
  display: none !important;
}

/* ============================================================================
   1 · Bloc « Être rappelé »
   ============================================================================ */

.er {
  position: relative;
  background: var(--c-navy);
  color: var(--text-on-drenched-soft);
}
.er--clair {
  background: var(--c-sky-pale);
  color: var(--c-navy);
}

/* Paddings verticaux : héros / section / variante courte. */
.er--hero { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 6.5vw, 92px); }
.er--section { padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 84px); }
.er--court { padding: clamp(32px, 3.5vw, 48px) 0 clamp(44px, 4.5vw, 60px); }

.er__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.er--1col .er__inner { padding: 0; }

.er__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: flex-start;
}
.er--court .er__cols { align-items: center; }

.er__gauche { flex: 1 1 380px; min-width: 0; }
.er--court .er__gauche { flex: 1 1 300px; }
.er__droite { flex: 1 1 420px; min-width: 0; width: 100%; }

/* Une colonne (rendu mobile et planches 390px) : les deux blocs à 100%. */
.er--1col .er__gauche,
.er--1col .er__droite { flex: 1 1 100%; padding: 0 20px; }

.er__surtitre {
  display: block;
  margin-bottom: 12px;
  color: var(--c-coral);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.er--clair .er__surtitre { color: var(--c-navy); }

.er__titre {
  margin: 0 0 14px;
  font-weight: 800;
  color: var(--white);
  text-wrap: balance;
}
.er--clair .er__titre { color: var(--c-navy); }
.er--hero .er__titre {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 20ch;
  margin-bottom: 16px;
}
.er--section .er__titre {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 24ch;
}
.er--court .er__titre {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-bottom: 10px;
}

.er__soustitre {
  margin: 0 0 22px;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  max-width: 46ch;
  color: inherit;
}

/* Ligne avis Google. */
.er__avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(229, 245, 253, 0.15);
  /* global.css pose `p { color: var(--text-muted) }` (navy) : sans `inherit`,
     « +300 avis sur Google » devient navy sur navy, invisible (recette Pierre 2026-09-16). */
  color: inherit;
}
.er--clair .er__avis { border-top-color: rgba(0, 52, 93, 0.18); }
.er__etoiles {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.er__note { font-size: 0.95rem; font-weight: 700; color: var(--white); }
.er--clair .er__note { color: var(--c-navy); }
.er__nb { font-size: 0.95rem; color: inherit; }
.er__lien-avis {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.er--clair .er__lien-avis { color: var(--c-navy); }

/* Cartes coordonnées (page Contact). */
.er__coord {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}
.er__carte {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(229, 245, 253, 0.06);
  border: 1px solid rgba(229, 245, 253, 0.18);
  border-radius: 16px;
  transition: border-color var(--t-fast) var(--ease);
}
.er--clair .er__carte {
  background: var(--white);
  border-color: rgba(0, 52, 93, 0.14);
}
a.er__carte:hover { border-color: var(--c-coral); }
.er__carte-pic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(229, 245, 253, 0.12);
  color: var(--white);
}
.er--clair .er__carte-pic { background: var(--er-corail-pale); color: var(--c-navy); }
.er__carte-pic--corail { background: var(--c-coral); color: var(--white); }
.er--clair .er__carte-pic--corail { background: var(--c-coral); color: var(--white); }
.er__carte-pic svg { width: 19px; height: 19px; }
.er__carte-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.er__carte-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
}
.er__carte-val { color: var(--white); }
.er--clair .er__carte-val { color: var(--c-navy); }
.er__carte-val--tel { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.er__carte-val--mail { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.er__carte-val--horaires { font-size: 0.95rem; line-height: 1.4; }
.er__horaire { display: block; }

/* Ligne « Vous préférez appeler ? » (masquée quand les cartes sont affichées). */
.er__appeler { margin: 18px 0 0; font-size: 1rem; color: inherit; }
.er--court .er__appeler { margin-top: 0; }
.er__appeler a {
  color: var(--white);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.er--clair .er__appeler a { color: var(--c-navy); }
.er__appeler a:hover { color: var(--c-sky); }
.er--clair .er__appeler a:hover { color: var(--c-coral); }

/* Vague séparatrice (signature du design system). */
.er__vague {
  position: absolute;
  left: 0;
  bottom: -29px;
  width: 100%;
  height: 30px;
  color: var(--c-navy);
  pointer-events: none;
  z-index: 1;
}
.er--clair .er__vague { color: var(--c-sky-pale); }

/* ============================================================================
   2 · Carte formulaire (bloc ET fenêtre)
   ============================================================================ */

.er-carte {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--er-ombre-carte);
  color: var(--c-navy);
}
/* Dans la fenêtre, le panneau porte déjà le fond, le rayon et l'ombre. */
.fen .er-carte {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* --- Bandeau pack --- */
.er-pack {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: var(--er-corail-pale);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-navy);
}
.er-pack__pic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-coral); }

/* --- Formulaires --- */
.er-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fen .er-form { gap: 14px; margin-top: 16px; }

.er-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
/* Une colonne sur téléphone (review Astra, décision Pierre 2026-09-28) : les paires
   prénom/nom et téléphone/e-mail s'empilent quand le formulaire fait moins de
   500px (244 + 12 + 244) ; le bloc sur ordinateur (534px) et tablette les garde
   côte à côte. La fenêtre s'empile sous ~404px (196 + 12 + 196) : deux champs par
   ligne sur ordinateur (416px), une colonne sur téléphone. */
.er-ligne .er-champ { flex: 1 1 244px; }
.fen .er-ligne .er-champ { flex: 1 1 196px; }

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

.er-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-navy);
  padding: 0;
}
.er-req { color: var(--c-coral); }
.er-optionnel { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--c-slate); }

.er-input {
  font-size: 1rem;
  padding: 13px 15px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--c-navy);
  outline: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.er-input--tel { border-width: 1.5px; }
.er-input:focus {
  border-color: var(--c-coral);
  background: var(--white);
}
.er-input:focus-visible {
  outline: 2px solid var(--c-coral);
  outline-offset: 2px;
}
.er-input--invalide { border-color: var(--c-coral-deep); border-width: 1.5px; }
.er-textarea { min-height: 120px; resize: vertical; }
.fen .er-textarea { min-height: 0; }

.er-erreur {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-coral-deep);
  line-height: 1.4;
}
.er-erreur--form { text-align: center; }

/* --- Bouton d'envoi --- */
.er-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 26px;
  background: var(--c-coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--er-ombre-cta);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.er-submit:hover { background: var(--c-coral-deep); transform: translateY(-1px); }
.er-submit:focus-visible { outline: 2px solid var(--c-coral); outline-offset: 2px; }
.er-submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }

.er-promesse {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-navy);
  text-align: center;
}
.er-appeler {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--er-pill);
  font-size: 1rem;
  color: var(--c-navy);
  text-align: center;
}
.er-appeler a { color: var(--c-coral); font-weight: 800; white-space: nowrap; }
.er-mention {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--er-mention);
  text-align: center;
}
.er-mention a { color: inherit; text-decoration: underline; }

/* --- Confirmation --- */
.er-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--er-corail-pale);
  border-radius: var(--r-md);
}
.er-bandeau__pic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-coral);
  color: var(--white);
}
.er-bandeau__pic svg { width: 18px; height: 18px; }
.er-bandeau__txt {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
}

.er-merci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 4px 10px;
  text-align: center;
}
.fen .er-merci { padding: 28px 4px 12px; }
.er-merci:focus-visible { outline: 2px solid var(--c-coral); outline-offset: 4px; }
.er-merci__pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--er-corail-pale);
  color: var(--c-coral);
}
.er-merci__pic svg { width: 26px; height: 26px; }
.er-merci__titre {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  line-height: 1.2;
  max-width: 24ch;
}
.er-merci__txt { margin: 0; font-size: 0.95rem; color: var(--c-navy); line-height: 1.5; max-width: 30ch; }
.er-merci__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 26px;
  background: var(--c-coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease);
}
.er-merci__tel:hover { background: var(--c-coral-deep); color: var(--white); }
.er-merci__fermer {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: underline;
}

/* ============================================================================
   3 · Fenêtre de rappel
   ============================================================================ */

.fen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.fen-ouverte { overflow: hidden; }

.fen__voile {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 24, 43, 0.6);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.fen--ouverte .fen__voile { opacity: 1; }

.fen__panneau {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 96px;
  background: var(--white);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0, 24, 43, 0.35);
  transform: translateY(24px);
  transition: transform var(--t-med) var(--ease);
}
.fen--ouverte .fen__panneau { transform: translateY(0); }
/* Sous 768px la feuille occupe toute la largeur : le `max-width: 460px` du handoff
   vaut pour les écrans larges. Un téléphone réglé sur une taille d'affichage
   réduite dépasse 460px CSS de large et centrait la feuille avec du vide de
   chaque côté (recette Pierre 2026-09-16, Pixel 9a). */
@media (max-width: 767px) {
  .fen__panneau { max-width: none; }
}

/* Bandeau d'action collant (bouton « Envoyer le message » + erreur formulaire) :
   la carte formulaire peut dépasser la hauteur visible du panneau, ce bandeau
   reste ancré en bas de la zone de défilement à toutes les largeurs (padding
   horizontal identique à `.fen__panneau` ci-dessus, 22px). */
.fen .er-actions {
  position: sticky;
  /* Le collage se fait au bord de la zone de contenu, donc au-dessus du padding
     bas du panneau (24px + encoche) : sans ce décalage négatif, le contenu défilait
     visiblement sous le bouton dans cette marge (recette 2026-09-28). */
  bottom: calc(-24px - env(safe-area-inset-bottom));
  z-index: 1;
  margin: 0 -22px;
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 -8px 16px -8px rgba(0, 24, 43, 0.18);
}
.fen .er-actions .er-submit { width: 100%; }
.fen .er-actions .er-erreur--form { margin: 0 0 8px; }
@media (orientation: landscape) and (max-height: 480px) {
  .fen .er-actions {
    position: static;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

.fen__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.fen__tete-txt { min-width: 0; }
.fen__titre {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--c-navy);
  text-wrap: balance;
}
.fen__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--c-navy);
}
.fen__etoiles { display: inline-flex; gap: 1px; color: var(--gold); font-size: 12px; letter-spacing: 0.06em; }
.fen__croix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  border-radius: 50%;
  color: var(--c-navy);
  transition: background var(--t-fast) var(--ease);
}
.fen__croix:hover { background: var(--er-survol-neutre); }
.fen__croix svg { width: 20px; height: 20px; }

/* ============================================================================
   4 · Barre fixe mobile + badge Google
   ============================================================================ */

.bm,
.bm-badge { display: none; }

@media (max-width: 767px) {
  .bm {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: oklch(98% 0.005 50 / 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 52, 93, 0.1);
    transform: translateY(0);
    opacity: 1;
    /* `visibility` bascule en fin d'effacement (et tout de suite à l'apparition) :
       barre effacée = hors tabulation et hors lecteur d'écran. */
    transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease), visibility var(--t-med);
  }
  .bm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .bm__btn--rappel {
    flex: 1.15 1 0;
    background: var(--c-coral);
    color: var(--white);
    border: 1.5px solid var(--c-coral);
    box-shadow: 0 6px 16px rgba(238, 88, 88, 0.3);
  }
  .bm__btn--rappel:hover { background: var(--c-coral-deep); border-color: var(--c-coral-deep); }
  /* « Nous contacter » (2026-09-28) est plus long que l'ancien « Être rappelé » :
     jamais de retour à la ligne (la barre grandissait et recouvrait le badge Google),
     et sous 400px la flèche décorative s'efface pour laisser la place au libellé. */
  .bm__btn { white-space: nowrap; }
  .bm__btn--appel {
    flex: 1 1 0;
    background: var(--white);
    color: var(--c-navy);
    border: 1.5px solid var(--c-navy);
  }
  .bm__btn--appel:hover { background: var(--c-navy); color: var(--white); }

  @media (max-width: 399px) {
    .bm__btn--rappel svg { display: none; }
  }

  .bm-badge {
    position: fixed;
    right: 12px;
    /* Même raison que la réserve de bas de page : la barre fait 69px + l'encoche.
       Un `bottom: 86px` fixe laisse 17px d'air sur un écran sans encoche, mais
       recouvre la barre de 17px dès que l'encoche fait 34px. */
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    z-index: 118;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid #34a853; /* vert du logo Google, hors palette de marque */
    border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(0, 52, 93, 0.16);
    opacity: 1;
    transition: bottom var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .bm-badge__logo { width: 18px; height: 18px; flex: 0 0 auto; }
  .bm-badge__txt { display: flex; flex-direction: column; line-height: 1.1; }
  .bm-badge__note { font-size: 0.82rem; font-weight: 800; color: var(--c-navy); }
  .bm-badge__etoile { color: var(--gold); }
  .bm-badge__nb { font-size: 0.68rem; font-weight: 500; color: var(--c-navy); }

  /* Effacement quand le bloc « Nous contacter » est à l'écran (`a-barre-off`),
     et en haut de page tant que le visiteur n'a pas défilé d'une demi-hauteur
     d'écran (`a-barre-haut`, décision Pierre 2026-09-30). */
  .a-barre-off .bm,
  .a-barre-haut .bm {
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Barre effacée : le badge redescend, mais reste au-dessus de l'encoche. */
  .a-barre-off .bm-badge,
  .a-barre-haut .bm-badge { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* Pied de page à l'écran : le badge s'efface pour laisser « Gérer les cookies »
     accessible (décision Pierre 2026-09-16). */
  .a-badge-off .bm-badge { opacity: 0; pointer-events: none; transform: translateY(12px); }

  /* Le pied de page ne doit pas passer sous la barre. La classe vient du script
     de BarreMobile ; `body:has(.bm)` assure le même résultat sans JavaScript.
     La barre mesure 69px (10 + 48 + 10 + 1px de filet) PLUS l'encoche du bas,
     qu'elle ajoute à son propre `padding-bottom` : la réserve doit donc porter
     le même `env()`, sinon le bas du pied de page disparaît sous la barre de
     tout iPhone à encoche (34px). Les 7px d'écart avec 69px sont la marge de
     respiration voulue. */
  .a-barre-mobile body,
  body:has(.bm) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Badge Google HISTORIQUE (GoogleBadgeFloat, monté par BaseLayout sur toutes
     les pages) : il n'est PAS desktop-only (demande 2026-08-13, toutes largeurs)
     et se superposerait à la barre et au badge ci-dessus. Masqué sous 768px sur
     les seules pages qui montent la barre. `!important` : les règles de
     GoogleBadgeFloat sont scopées par Astro (`[data-astro-cid-…]`), l'ordre des
     feuilles n'est pas garanti. */
  .a-barre-mobile .gbadge--float,
  body:has(.bm) .gbadge--float { display: none !important; }
}

/* ============================================================================
   5 · Plan d'accès (PlanAcces.astro)
   Bloc partagé accueil + page Contact. Le contenu vient du singleton `contact`
   (groupe `acces`), l'adresse et les horaires de `settings` via site.ts.
   ============================================================================ */

.pa {
  padding: var(--section-py) 0;
  background: var(--bg-page);
  color: var(--ink);
}
.pa__head { margin-bottom: 40px; max-width: 60ch; }
.pa__titre {
  margin: 6px 0 14px;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ink);
}
.pa__texte { margin: 0; line-height: 1.6; }

.pa__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.pa__gauche {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pa__droite { flex: 1 1 420px; min-width: 0; }

.pa__nom { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.pa__adresse { margin: 0; line-height: 1.5; }

/* Liste des accès : pastille d'icône 40px + phrase « <strong>gras</strong>suite ». */
.pa__acces { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pa__acces-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.pa__pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--er-corail-pale);
  color: var(--c-coral);
}
.pa__pic svg { width: 19px; height: 19px; }
.pa__acces-txt { line-height: 1.45; }
.pa__acces-txt strong { font-weight: 700; }

.pa__horaires { padding-top: 18px; border-top: 1px solid var(--border); }
.pa__horaires-titre {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.pa__horaires-liste { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; line-height: 1.5; }

.pa__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.pa__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.pa__btn--plein { background: var(--c-navy); color: var(--white); }
/* Survol = corail foncé, comme `.btn--primary` du site (le prototype posait un
   gris-navy propre à la maquette, hors table de tokens). */
.pa__btn--plein:hover { background: var(--c-coral-deep); color: var(--white); }
.pa__btn--ligne { background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); }
.pa__btn--ligne:hover { border-color: var(--c-coral-deep); color: var(--c-coral-deep); }

.pa__carte {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 52, 93, 0.1);
}
.pa__iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 460px);
  border: 0;
}
/* Corail FONCÉ sur fond clair : le corail plein est à 3,4:1 (sous AA) pour du
   texte de cette taille — même arbitrage que les liens du reste du site. */
.pa__fiche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-coral-deep);
  transition: color var(--t-fast) var(--ease);
}
.pa__fiche:hover { color: var(--c-navy); }

/* ============================================================================
   6 · Mouvement réduit
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .er *,
  .fen,
  .fen *,
  .bm,
  .bm *,
  .bm-badge,
  .bm-badge *,
  .pa * {
    transition: none !important;
  }
  .fen__panneau,
  .fen--ouverte .fen__panneau { transform: none; }
  .fen__voile { opacity: 1; }
  .er-submit:hover { transform: none; }
  .a-barre-off .bm,
  .a-barre-haut .bm { transform: none; }
}