/* Finitions communes : matières légères, interactions et carte sans épinglage.
   Les couleurs et les fontes restent celles du design system. */
:root { --paper-rule: rgba(70,62,48,.045); }
html { scroll-padding-top: 96px; }
.skip-link {
  position:fixed;
  z-index:120;
  top:12px;
  left:12px;
  max-width:calc(100vw - 24px);
  padding:12px 18px;
  background:var(--jaune);
  color:var(--noir);
  font-weight:700;
  transform:translateY(calc(-100% - 24px));
  transition:none;
}
.skip-link:focus { transform:none; }
main#contenu:focus { outline:none; }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: 5px;
}
:where(.hero,.footer,.menu-mobile) :focus-visible { outline-color: var(--jaune); }
.btn { box-shadow: 0 3px 0 var(--noir); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--noir); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--noir); }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { box-shadow: 0 3px 0 var(--creme); }
.hero-badge { animation-iteration-count: 2; }
.menu-mobile { overscroll-behavior: contain; visibility: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s; }
.menu-mobile.open { visibility: visible; }
.header.menu-open { background: var(--noir); box-shadow: none; backdrop-filter: none; }
.header.menu-open .header-word { color: var(--creme); }
.header.menu-open .header-word em { color: var(--jaune); }
.header.menu-open .burger span { background: var(--creme); }
.burger { min-width:44px; min-height:44px; }
.burger span:nth-child(1) { top:16px; }
.burger span:nth-child(2) { top:26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform:translateY(-5px) rotate(-45deg); }
.menu-mobile .btn-orange { color:var(--noir); }
.menu-drop-btn { min-height:44px; }
.nav-drop-menu { transition:opacity .18s,transform .18s,visibility .18s; }

/* Le papier quadrillé reste réservé à la carte : pas de trame sur les photos. */
.carte-mv {
  min-height:0;
  padding-top:72px;
  padding-bottom:72px;
  gap:18px clamp(24px,4vw,56px);
  background-color:var(--creme2);
  background-image:linear-gradient(var(--paper-rule) 1px,transparent 1px),linear-gradient(90deg,var(--paper-rule) 1px,transparent 1px);
  background-size:28px 28px;
  border-block:1px solid var(--ligne);
}
.carte-mv [data-mv-map] { grid-row:2; }
.carte-mv [data-mv-legend] { grid-row:3; }
.carte-mv svg[data-carte] { width:100%; max-height:560px !important; filter:drop-shadow(0 5px 0 rgba(31,26,19,.08)); }
.carte-mv [data-mv-title] h2 { max-width:20ch; }
.carte-mv [data-intro] { color:var(--encre); line-height:1.7; }
.carte-mv [data-mv-legend] > a { min-height:44px; padding:8px 12px; border-radius:8px; width:fit-content; transition:background .18s; }
.carte-mv [data-mv-legend] > a:hover,
.carte-mv [data-mv-legend] > a:focus-visible { background:rgba(255,255,255,.65); }
.carte-mv [data-route-r1],.carte-mv [data-route-r2],.carte-mv [data-route-r3] { transition:opacity .2s; }
.map-replay { background:transparent; border:0; border-bottom:1px solid currentColor; padding:10px 4px; min-height:44px; font:600 .85rem var(--body); color:var(--encre); }
.map-replay[hidden] { display:none; }
.map-replay:disabled { opacity:.5; cursor:wait; }
.map-replay:not(:disabled):hover { color:var(--noir); }
.emb-card { background-image:repeating-linear-gradient(0deg,transparent 0 5px,rgba(31,26,19,.025) 5px 6px); }
.faq-q { transition:border-color .2s,background-color .2s; }
.faq-q[open] { border-color:var(--noir); background-color:var(--creme2); }
.marquee:focus-within .marquee-track { animation-play-state:paused; }
@media (min-width:1020px) {
  .carte-mv { grid-template-columns:minmax(300px,410px) minmax(0,1fr); }
  .carte-mv [data-mv-title] { grid-column:1; grid-row:1; align-self:end; }
  .carte-mv [data-mv-legend] { grid-column:1; grid-row:2; align-self:start; }
  .carte-mv [data-mv-map] { grid-column:2; grid-row:1 / span 2; }
  .carte-mv svg[data-carte] { max-height:640px !important; }
}
@media (max-width:760px) {
  html { scroll-padding-top:82px; }
  .carte-mv { padding-block:48px; }
  .carte-mv svg[data-carte] { max-height:none !important; }
  .carte-mv [data-mv-legend] { gap:4px !important; }
  .carte-mv [data-ed4] .btn { white-space:normal; }
  .btn { white-space:normal; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .menu-mobile,.nav-drop-menu { transition:none; }
  .hero-img { transform:none !important; }
  .map-replay { display:none; }
  .btn:hover,.btn:active { transform:none; }
}

/* Pied de page : pictogramme devant le lien Instagram (colonne « Suis-nous »). */
.foot-col a.foot-social { display:flex; align-items:center; gap:8px; }
.foot-social svg { width:16px; height:16px; flex:none; }

/* Commande de galerie discrète, accessible au clavier et sans texte visible. */

/* Pied de page, ligne du bas : copyright · liens légaux · remonter (19/10/2026).
   Le bouton « Gérer les cookies » a l'apparence des liens qui l'entourent. */
.foot-legal { display:flex; flex-wrap:wrap; align-items:center; gap:2px 18px; }
.foot-legal a,
.foot-legal .foot-cookies {
  display:inline-flex; align-items:center; min-height:32px;
  color:rgba(255,251,239,.8); font:inherit; line-height:1.4;
  text-decoration:none; text-underline-offset:3px; transition:color .2s;
}
.foot-legal .foot-cookies {
  -webkit-appearance:none; appearance:none; margin:0; padding:0;
  background:none; border:0; border-radius:0; cursor:pointer; text-align:left;
}
.foot-legal a:hover,.foot-legal a:focus-visible,
.foot-legal .foot-cookies:hover,.foot-legal .foot-cookies:focus-visible { color:var(--jaune); text-decoration:underline; }
@media (max-width:760px) {
  .footer-bas { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Bandeau de consentement (js/tracking.js) : barre blanche en bas, non bloquante.
   Oui et Non partagent la même classe et la même largeur (grille 1fr 1fr).
   Sous le menu mobile (z 99) et le header (z 100). Le bas de page reste lisible :
   le body réserve la hauteur du bandeau tant qu'il est ouvert. */
html.viv-consent-ouvert { scroll-padding-bottom:var(--viv-consent-h,0px); }
html.viv-consent-ouvert body { padding-bottom:var(--viv-consent-h,0px); }
.viv-consent {
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:#fff; color:var(--noir); border-top:1px solid var(--ligne);
  box-shadow:0 -6px 24px rgba(168,68,43,.12);
  font-family:var(--body); font-size:.875rem; line-height:1.45;
}
.viv-consent[hidden] { display:none; }
.viv-consent:focus { outline:none; }
.viv-consent:focus-visible { outline:3px solid var(--noir); outline-offset:-4px; }
.viv-consent-in {
  max-width:1180px; margin:0 auto; padding:0 8px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
}
.viv-consent-texte { flex:1 1 420px; min-width:0; margin:0; color:var(--noir); }
.viv-consent-texte a { font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.viv-consent-texte a:hover { color:var(--terra); }
.viv-consent-texte a:focus-visible { outline-offset:2px; }
.viv-consent-choix { flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.viv-consent-btn {
  min-width:96px; min-height:44px; margin:0; padding:10px 24px;
  border:0; border-radius:10px; background:var(--noir); color:var(--creme);
  font:700 .9rem/1.2 var(--display); letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 3px 0 rgba(168,68,43,.18); transition:transform .18s,box-shadow .18s;
}
.viv-consent-btn:hover { transform:translateY(-2px); box-shadow:0 5px 0 rgba(168,68,43,.18); }
.viv-consent-btn:active { transform:translateY(1px); box-shadow:0 1px 0 rgba(168,68,43,.18); }
.viv-consent-btn:focus-visible { outline:3px solid var(--noir); outline-offset:3px; }
body:has(.menu-mobile.open) .viv-consent { visibility:hidden; }
@media (max-width:760px) {
  .viv-consent { padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); font-size:.8125rem; }
  .viv-consent-in { padding:0; gap:8px; }
  .viv-consent-texte { flex-basis:100%; }
  .viv-consent-choix { flex:1 1 100%; }
  .viv-consent-btn { padding:10px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .viv-consent-btn,.viv-consent-btn:hover,.viv-consent-btn:active { transition:none; transform:none; }
}
@media print { .viv-consent { display:none !important; } }

/* Mention « Tes données » sous les formulaires (19/10/2026) : le lien vers
   /confidentialite/ doit se voir comme un lien, sans changer la taille du texte. */
.emb-rgpd-lien a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.emb-rgpd-lien a:hover { color:var(--noir); }
.emb-rgpd + .emb-rgpd-lien { margin-top:8px; }