/* =============================================================
   main.css - A.Pilet SA
   Tout le CSS du site. Mobile-first.
   Charge order : design-system.css → reset.css → main.css

   Sommaire
   -------------------------------------------------------------
   01. Base                  - body, liens, focus
   02. Conteneur             - .container
   03. Typographie           - titres, .prose
   04. Header & navigation   - .site-header, .site-nav, .burger
   05. Hero                  - .hero, .hero--photo
   06. Sections génériques   - .section, .section--alt
   07. Composants            - .btn, .card, .badge, .tag, .alert
   08. Grilles               - .grid-2/3/4
   09. Formulaire contact    - .form, .form-input, .form-captcha
   10. Footer                - .site-footer
   11. Pages spécifiques     - .map-embed, .cantons, .download-card
   12. Utilitaires           - .sr-only, .text-*, .mt-*, .mb-*, .reveal
   13. prefers-reduced-motion
   ============================================================= */


/* =============================================================
   01. Base
   ============================================================= */
html {
  /* Background sur html aussi (et pas seulement body) : quand le body est
     verrouille en position:fixed et que l'URL bar mobile se cache/remontre,
     il y a parfois une frame ou le body n'occupe pas tout le viewport.
     Sans background sur html, le canvas (souvent noir sur Android) flashe
     en bas de l'ecran. */
  background: var(--color-bg);
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-primary);
  transition: color var(--transition);
}
a:hover { color: var(--color-primary-dark); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}


/* =============================================================
   02. Conteneur
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}


/* =============================================================
   03. Typographie
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.25rem, 2.4vw, var(--text-3xl)); letter-spacing: -0.015em; font-weight: var(--weight-semibold); }
h2 { font-size: clamp(var(--text-base), 2vw, var(--text-2xl)); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--text-sm); color: var(--color-text-muted); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
}

/* Bloc de contenu rédactionnel : applique une rythmique verticale */
.prose {
  max-width: var(--content-max);
}
.prose > * + * { margin-top: var(--space-4); }
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose ul,
.prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }


/* =============================================================
   04. Header & navigation
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  transition: box-shadow var(--transition);
  /* Note: pas de backdrop-filter ici - il créerait un containing block qui
     empêcherait .site-nav { position: fixed } de couvrir la viewport. */
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-logo img {
  height: 52px;
  width: auto;
}
@media (max-width: 640px) {
  .site-logo img { height: 40px; }
}

/* Mobile : drawer latéral droit, ouvert par .is-open */
.site-nav {
  position: fixed;
  inset: var(--header-height) 0 0 auto;
  width: min(85vw, 360px);
  z-index: 40;            /* sous le header (50), au-dessus du contenu */
  background: var(--color-bg);
  overflow-y: auto;
  /* "none" plutôt que "contain" : on bloque AUSSI le rubber-band du drawer
     lui-même. Sans ça, atteindre le fond du drawer le fait rebondir
     visuellement ; si l'utilisateur tapait pendant ce rebond, le clic se
     décalait sur le lien du dessus. Hard stop = clic stable. */
  overscroll-behavior: none;
  padding: var(--space-4) var(--space-5) var(--space-12);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(20, 40, 60, 0.10);
}
.site-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Backdrop semi-transparent quand le drawer est ouvert (mobile uniquement) */
body.nav-open::before {
  content: '';
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 39;
  background: rgba(10, 25, 40, 0.45);
  animation: nav-backdrop-fade 200ms ease;
}
@keyframes nav-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-nav__link {
  display: block;
  padding: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-primary-dark);
  background: var(--color-bg-alt);
}

.site-nav__group-label {
  display: block;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-nav__group-label[aria-current="true"] {
  color: var(--color-primary-dark);
}

.site-nav__submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Séparation entre groupes - mobile seulement (desktop = dropdowns) */
@media (max-width: 1199.98px) {
  .site-nav__group {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .site-nav__list > li:first-child + .site-nav__group,
  .site-nav__list > .site-nav__group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

.nav-cta {
  display: none; /* caché sur mobile : le menu hamburger contient déjà Contact */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  transform: translateY(-1px);
}
@media (min-width: 1200px) {
  .nav-cta { display: inline-flex; }
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition);
}
.burger:hover { border-color: var(--color-primary); }
.burger[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

/* Lock du document quand le menu mobile est ouvert.
   Approche simple : overflow:hidden sur <html> ET <body>, plus le JS qui
   bloque les touchmove en dehors du drawer (cf. main.js). On a essayé
   position:fixed + top:-scrollY mais ça interferait avec le hide/show de
   la barre d'URL Android : le body se decalait d'une frame, le canvas
   apparaissait en bas, le drawer recalculait son scrollTop, et un tap
   en cours de geste tombait sur le mauvais lien. Le simple overflow
   garde la position de scroll naturellement (le body ne bouge pas). */
html.nav-open,
body.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Pendant un redimensionnement de viewport (vraie fenêtre OU bascule en
   mode responsive Firefox/DevTools), on coupe les transitions de la nav
   pour éviter que le drawer ne s'anime "se fermant" au passage du
   breakpoint mobile/desktop. Le JS pose/retire .is-resizing. */
body.is-resizing .site-nav { transition: none; }

/* Desktop ≥1200 : nav inline avec dropdowns au hover */
@media (min-width: 1200px) {
  .burger { display: none; }
  body.nav-open::before { display: none; }

  .site-nav {
    position: static;
    inset: auto;
    width: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
    border-left: 0;
    box-shadow: none;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }
  .site-nav__link {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
  .site-nav__group {
    position: relative;
  }
  .site-nav__group-label {
    padding: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: background var(--transition), color var(--transition);
  }
  .site-nav__group:hover .site-nav__group-label,
  .site-nav__group:focus-within .site-nav__group-label,
  .site-nav__group-label[aria-current="true"] {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
  }
  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: var(--space-2);
    margin-top: var(--space-1);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .site-nav__group:hover .site-nav__submenu,
  .site-nav__group:focus-within .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .site-nav__submenu .site-nav__link {
    padding: var(--space-2) var(--space-3);
  }
}


/* =============================================================
   05. Hero
   ============================================================= */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 90% -10%, rgba(98, 191, 230, 0.16), transparent 60%),
    radial-gradient(700px 460px at 0% 110%, rgba(31, 143, 196, 0.08), transparent 60%),
    var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.hero--centered {
  min-height: clamp(300px, 48svh, 460px);
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

/* Variante split : texte à gauche, photo à droite */
.hero--split .hero__inner {
  text-align: left;
  max-width: var(--container-max);
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.hero--split .hero__eyebrow { margin-bottom: var(--space-4); }
.hero--split .hero__ctas { justify-content: flex-start; }

.hero__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--color-bg-dark);
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slideshow CSS pur : 5 images, crossfade automatique, cycle 25s.
   Chaque image est visible 5s, transition 1s entre images.
   Premier keyframe = opacity 1 → image visible dès le début du delay. */
.hero__slides img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-fade 25s infinite;
}
.hero__slides img:nth-child(1) { animation-delay:  0s; }
.hero__slides img:nth-child(2) { animation-delay:  5s; }
.hero__slides img:nth-child(3) { animation-delay: 10s; }
.hero__slides img:nth-child(4) { animation-delay: 15s; }
.hero__slides img:nth-child(5) { animation-delay: 20s; }

@keyframes hero-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* fade-in 1s */
  20%  { opacity: 1; }   /* visible 4s */
  24%  { opacity: 0; }   /* fade-out 1s, crossfade avec la suivante */
  100% { opacity: 0; }
}

@media (min-width: 900px) {
  .hero--split .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-12);
  }
  .hero--split .hero__visual { aspect-ratio: 5 / 4; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(98, 191, 230, 0.20);
}

.hero h1 {
  font-size: clamp(1.5rem, 3.4vw, var(--text-3xl));
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}
.hero h1 em {
  color: var(--color-primary);
  font-style: normal;
}
.hero p {
  font-size: clamp(var(--text-sm), 1.6vw, var(--text-base));
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Variante avec photo en fond */
.hero--photo {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.hero--photo::after { display: none; }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img,
.hero__bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 55% at 50% 50%, rgba(8,20,35,.82) 0%, rgba(8,20,35,.62) 70%, rgba(8,20,35,.65) 100%),
    linear-gradient(180deg, rgba(8,20,35,.40) 0%, rgba(8,20,35,.60) 100%);
}
.hero--photo h1,
.hero--photo h2,
.hero--photo h3,
.hero--photo p {
  color: var(--color-text-on-dark);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero--photo h1 em {
  color: var(--color-accent);
  font-style: normal;
}
.hero--photo p { color: rgba(255, 255, 255, 0.92); }
.hero--photo .hero__eyebrow {
  background: rgba(8, 20, 35, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-text-on-dark);
  text-shadow: none;
}


/* =============================================================
   06. Sections génériques
   ============================================================= */
.section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.section--alt {
  background: var(--color-bg-alt);
}
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section__head {
  max-width: 680px;
  margin-bottom: var(--space-10);
}
.section__head--center {
  text-align: center;
  margin-inline: auto;
}
.section__head h2 {
  margin-bottom: var(--space-2);
}
.section__head p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}


/* =============================================================
   07. Composants
   ============================================================= */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

/* Cards */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.card__media {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.card h3 { margin-bottom: var(--space-2); }
.card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.card__link svg { transition: transform var(--transition); }
.card__link:hover svg { transform: translateX(3px); }

/* Card sans hover (contenu pur) */
.card--static:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}

/* Badge / tag */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

/* Alertes (feedback formulaire contact) */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}
.alert--success {
  color: var(--color-success);
  border-color: rgba(27, 127, 77, 0.30);
  background: rgba(27, 127, 77, 0.06);
}
.alert--danger {
  color: var(--color-danger);
  border-color: rgba(180, 48, 48, 0.30);
  background: rgba(180, 48, 48, 0.06);
}
.alert--warning {
  color: var(--color-warning);
  border-color: rgba(184, 115, 27, 0.30);
  background: rgba(184, 115, 27, 0.06);
}


/* =============================================================
   08. Grilles
   ============================================================= */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }


/* =============================================================
   09. Formulaire contact
   ============================================================= */
.form {
  display: grid;
  gap: var(--space-5);
  max-width: 640px;
  margin-inline: auto;
}
.form-group {
  display: grid;
  gap: var(--space-2);
}
.form-label {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.form-label .required { color: var(--color-danger); }

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 143, 196, 0.15);
}
/* Validation visuelle après que l'utilisateur a interagi avec le champ.
   :user-invalid évite le piège de :invalid qui rougit les champs vides
   au chargement de la page. */
.form-input:user-invalid,
.form-textarea:user-invalid {
  border-color: var(--color-danger);
}
.form-input:user-invalid:focus,
.form-textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(180, 48, 48, 0.15);
}
.form-textarea {
  resize: vertical;
  min-height: 160px;
  font-family: var(--font-sans);
  line-height: var(--leading-base);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.form-checkbox input { width: 16px; height: 16px; }

.form-captcha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.form-captcha img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.form-captcha button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: border-color var(--transition), color var(--transition);
}
.form-captcha button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}


/* =============================================================
   10. Footer
   ============================================================= */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--space-12);
}
.site-footer a {
  color: var(--color-text-on-dark);
}
.site-footer a:hover {
  color: var(--color-accent);
}

.site-footer__top {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--space-10);
}
.site-footer h4 {
  color: var(--color-text-on-dark);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.site-footer ul {
  display: grid;
  gap: var(--space-2);
}
.site-footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-brand strong {
  color: var(--color-text-on-dark);
  font-size: var(--text-lg);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.site-footer__social a:hover {
  background: var(--color-accent);
  color: var(--color-bg-dark);
  transform: translateY(-2px);
}


/* =============================================================
   11. Pages spécifiques
   ============================================================= */

/* --- Situation : iframe Google Maps embed --- */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-info {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* --- Références : 5 cantons (mobile 2 col, tablet 3 col → 3+2, desktop 5 col) --- */
.cantons {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .cantons { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .cantons { grid-template-columns: repeat(5, 1fr); }
}

.canton {
  text-align: center;
}
.canton img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.canton:hover img { transform: scale(1.02); }
.canton__name {
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  font-size: var(--text-base);
}

/* Carte des stations (image pleine largeur) */
.stations-map {
  margin-top: var(--space-12);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.stations-map img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* --- Downloads : cards de PDF --- */
.download-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.download-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
  color: inherit;
}
.download-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  border-radius: var(--radius-md);
}
.download-card__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.download-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Articles de presse : cards mixtes (image + texte) --- */
.press-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.press-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.press-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.press-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.press-card:hover .press-card__media img { transform: scale(1.04); }
.press-card__body {
  padding: var(--space-5);
}
.press-card__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.press-card h3 { margin-bottom: var(--space-2); }
.press-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* --- Offres d'emploi --- */
.job-list {
  display: grid;
  gap: var(--space-6);
  max-width: 640px;
}
.job-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.job-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

/* --- Timeline (historique société) --- */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline li:last-child { border-bottom: 0; }
.timeline__year {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.timeline__event {
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* --- Grille pour Articles / Nouveautés : largeur fixée pour ne pas étirer
       quand il y a peu d'items --- */
.grid-fixed {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  justify-content: start;
}


/* =============================================================
   12. Utilitaires
   ============================================================= */
.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;
}

.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }
.text-primary { color: var(--color-primary-dark); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.hidden { display: none; }

/* Scroll-reveal animé via Intersection Observer (.is-visible ajoutée par JS) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --- Icônes inline (lucide self-hosted) --- */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* =============================================================
   13. prefers-reduced-motion
   Toutes les transitions du projet passent par les variables
   --transition / --transition-slow. Les passer à 0ms ici neutralise
   les animations sans avoir besoin de !important.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
    --transition-slow: 0ms;
  }
  html { scroll-behavior: auto; }

  /* Affiche immédiatement les éléments scroll-reveal */
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* Slideshow : on fige sur la première image */
  .hero__slides img { animation: none; opacity: 0; }
  .hero__slides img:nth-child(1) { opacity: 1; }
}