/* ═══════════════════════════════════════════════════════════════════
   Paysagement Bellerive — démo officielle multi-pages LuxAura Studio
   Palette « fin de journée en forêt » : sapin profond · doré · pierre.
   Polices 100 % système (Georgia pour l'affichage, pile système au corps).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sapin:    #16301F;
  --sapin-2:  #1F4029;
  --mousse:   #3F6B4C;
  --pierre:   #EFEDE6;
  --blanc:    #FFFFFF;
  --ardoise:  #20281F;
  --texte-2:  #57614F;
  --soleil:   #D89B2D;
  --soleil-f: #7A500A; /* AA 6:1 sur pierre — jamais plus pâle */
  --bord:     #DDD9CC;
  --printemps:#4E7A33;
  --ete:      #8A6410;
  --automne:  #B45A32;

  --fs-corps: 1rem;
  --fs-note:  0.9rem;
  --fs-ui:    0.8rem;
  --fs-badge: 0.78rem;
  --police-titre: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --police-corps: system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
}
@media (min-width: 769px) {
  :root { --fs-corps: 1.1rem; --fs-note: 1.1rem; --fs-ui: 1.1rem; --fs-badge: 1.1rem; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--police-corps);
  font-size: var(--fs-corps);
  line-height: 1.65;
  color: var(--ardoise);
  background: var(--blanc);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--soleil-f); }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; border-radius: 3px; }

/* — Langue : FR par défaut, EN via html[lang="en"] — */
html[lang="fr"] .en { display: none !important; }
html[lang="en"] .fr { display: none !important; }

.contenu { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-bottom: 0.6rem; }
.sur-titre {
  font-family: var(--police-titre); font-style: italic; font-size: var(--fs-corps);
  color: var(--soleil-f); display: block; margin-bottom: 0.5rem;
}
.section { padding: 3.6rem 0; }
@media (min-width: 769px) { .section { padding: 5.2rem 0; } } /* respiration Foundation — le blanc fait le luxe */
.section-intro { max-width: 62ch; color: var(--texte-2); margin-bottom: 2.2rem; }
.fond-pierre { background: var(--pierre); }
.fond-sapin { background: var(--sapin); color: var(--blanc); }
.fond-sapin h2, .fond-sapin h3 { color: var(--blanc); }
.fond-sapin .sur-titre { color: var(--soleil); }
.fond-sapin .section-intro { color: #CFD8C9; }

/* ── Entête / navigation ────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--sapin); color: var(--blanc);
  box-shadow: 0 2px 14px rgba(10, 22, 14, 0.35);
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: 64px; position: relative; }
.logo {
  font-family: var(--police-titre); font-size: 1.25rem; color: var(--blanc);
  text-decoration: none; letter-spacing: 0.01em; margin-right: auto; line-height: 1.1;
}
.logo em { color: var(--soleil); font-style: italic; }
.nav-liens { list-style: none; display: flex; align-items: center; gap: 1.4rem; }
.nav-liens a { color: var(--blanc); text-decoration: none; font-size: var(--fs-ui); }
.nav-liens a:hover { color: var(--soleil); }
.nav-liens a[aria-current="page"] { border-bottom: 2px solid var(--soleil); padding-bottom: 2px; }
.cta-nav {
  background: var(--soleil); color: var(--sapin) !important; font-weight: 700;
  padding: 0.55rem 1.05rem; border-radius: 999px; white-space: nowrap;
}
.cta-nav:hover { background: #E8B04A; color: var(--sapin); }
.langue {
  background: none; border: 1px solid rgba(255, 255, 255, 0.45); color: var(--blanc);
  border-radius: 999px; padding: 0.35rem 0.8rem; font-size: var(--fs-ui);
  cursor: pointer; font-family: var(--police-corps);
}
.langue:hover { border-color: var(--soleil); color: var(--soleil); }

.menu-case { display: none; }
.menu-bouton { display: none; }
@media (max-width: 860px) {
  .menu-bouton {
    display: block; cursor: pointer; font-size: 1.7rem; line-height: 1;
    padding: 0.4rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px;
    user-select: none;
  }
  .menu-bouton::before { content: "☰"; }
  .menu-case:checked ~ .menu-bouton::before { content: "✕"; }
  .nav-liens {
    display: none; position: absolute; top: 100%; left: -1.25rem; right: -1.25rem;
    background: var(--sapin-2); flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.6rem 1.25rem 1.2rem; box-shadow: 0 14px 22px rgba(10, 22, 14, 0.35);
  }
  .menu-case:checked ~ .nav-liens { display: flex; }
  .nav-liens li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .nav-liens li:last-child { border-bottom: none; }
  .nav-liens a { display: block; padding: 0.85rem 0.2rem; font-size: 1rem; }
  .cta-nav { margin: 0.8rem 0 0.4rem; text-align: center; display: block; }
  .nav-liens .langue { margin-top: 0.6rem; width: 100%; padding: 0.6rem; font-size: 1rem; }
}

/* ── Héros (accueil) ────────────────────────────────────────────── */
.heros { position: relative; color: var(--blanc); overflow: hidden; background: var(--sapin); }
.heros picture, .heros > img.heros-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.heros picture img { width: 100%; height: 100%; object-fit: cover; }
.heros::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 27, 17, 0.28) 0%, rgba(13, 27, 17, 0.1) 45%, rgba(13, 27, 17, 0.42) 100%);
}
.heros-texte {
  position: relative; z-index: 2; padding: 6.5rem 0 7.5rem; max-width: 860px;
}
.heros h1 {
  font-size: clamp(2.6rem, 8.5vw, 6.2rem); /* échelle display massive (iamstatic #10 / Iceberg #15) */
  letter-spacing: -0.02em; line-height: 1.02;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  margin-bottom: 1.2rem;
}
.heros h1 > span { display: block; }
.ligne { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ligne-int { display: block; }
@media (min-width: 769px) { .heros-texte { padding: 8rem 0 9rem; } }

/* ── Marquee des services (SPYLT #13 — CSS pur, transform seulement) ── */
.marquee {
  overflow: hidden; background: var(--sapin); color: var(--pierre);
  border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.85rem 0;
}
.marquee-piste { display: flex; width: max-content; }
.marquee-lot {
  display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem;
  font-family: var(--police-titre); font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  white-space: nowrap;
}
.marquee-sep { color: var(--soleil); font-size: 0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-piste { animation: marquee-defile 30s linear infinite; }
  @keyframes marquee-defile { to { transform: translateX(-50%); } }
}

/* ── Fil des saisons — panneaux pleine largeur, ambiance au scroll ── */
.fil-saisons { background: var(--pierre); overflow: hidden; padding: 3.6rem 0 2.6rem; }
@media (min-width: 769px) { .fil-saisons { padding: 5.2rem 0 3.4rem; } }
.fil-entete { margin-bottom: 1rem; }
.panneau {
  display: block; position: relative; text-decoration: none; color: var(--ardoise);
  padding: 3rem 0; border-top: 1px solid rgba(32, 40, 31, 0.1);
}
@media (min-width: 769px) { .panneau { padding: 4.6rem 0; } }
.panneau:last-of-type { border-bottom: 1px solid rgba(32, 40, 31, 0.1); }
.mot-geant {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%); /* ras du bord, zéro débordement (le -0.05em coupait la dernière lettre) */
  font-family: var(--police-titre); font-style: italic; white-space: nowrap;
  font-size: clamp(4.5rem, 16vw, 12rem); line-height: 1;
  color: var(--pastille, var(--mousse)); opacity: 0.16; pointer-events: none;
  z-index: 0;
}
.panneau-int { position: relative; z-index: 1; max-width: 640px; }
.panneau h3 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 0.5rem; }
.panneau p { color: var(--texte-2); max-width: 52ch; }
.panneau-cta {
  display: inline-block; margin-top: 1rem; font-weight: 700;
  color: var(--soleil-f); font-size: var(--fs-corps);
}
@media (prefers-reduced-motion: no-preference) {
  .panneau-cta { transition: transform 0.3s ease; }
  .panneau:hover .panneau-cta { transform: translateX(6px); }
}
.saison-printemps { --pastille: var(--printemps); }
.saison-ete { --pastille: var(--ete); }
.saison-automne { --pastille: var(--automne); }
.fil-saisons .hiver-note { margin-top: 2rem; }

/* ── Avant / après au scroll ────────────────────────────────────── */
.aa { padding: 3.6rem 0; }
@media (min-width: 769px) { .aa { padding: 4.6rem 0; } }
.aa-note { color: #CFD8C9; margin: 0.4rem 0 1.6rem; font-style: italic; }
.aa-cadre {
  position: relative; overflow: hidden; border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
/* picture est inline par défaut : display:block évite l'espace parasite sous l'image (source de CLS) */
.aa-cadre picture { display: block; }
.aa-cadre img { width: 100%; height: auto; display: block; }
.aa-rideau { position: absolute; inset: 0; overflow: hidden; }
.aa-rideau::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--soleil); z-index: 2;
}
.aa-etiquette {
  position: absolute; top: 1rem; font-family: var(--police-corps);
  font-weight: 700; font-size: var(--fs-badge); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blanc);
  background: rgba(13, 27, 17, 0.72); padding: 0.3rem 0.85rem; border-radius: 999px;
}
.aa-et-avant { left: 1rem; }
.aa-et-apres { left: 1rem; z-index: 3; }

.heros .tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem); max-width: 46ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); margin-bottom: 1.8rem;
}
.heros .sur-titre { color: var(--soleil); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.heros-boutons { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Petits héros (pages intérieures) — échelle display + mot géant doré */
.heros-page {
  background: var(--sapin); color: var(--blanc); padding: 4.2rem 0 3.8rem;
  position: relative; overflow: hidden;
}
.heros-page h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.heros-page p { color: #CFD8C9; max-width: 58ch; position: relative; z-index: 1; }
.heros-page .contenu { position: relative; z-index: 1; }
.heros-page .mot-geant { color: var(--soleil); opacity: 0.11; z-index: 0; }
@media (min-width: 769px) { .heros-page { padding: 5.5rem 0 5rem; } }

/* Teintes de saison statiques (page Services) */
.teinte-printemps { background: #E7F0DC; }
.teinte-ete { background: #F3E9CC; }
.teinte-automne { background: #F4E1D3; }
.teinte-printemps, .teinte-ete, .teinte-automne { position: relative; overflow: hidden; }
/* Le mot géant des sections Services vit dans la bande d'en-tête (zone dégagée à droite
   du titre) — centré verticalement, il tombait derrière la carte du milieu (« Pr » caché) */
.teinte-printemps .mot-geant, .teinte-ete .mot-geant, .teinte-automne .mot-geant {
  top: 2rem; transform: none; font-size: clamp(4rem, 11vw, 9rem);
}
.teinte-printemps .contenu, .teinte-ete .contenu, .teinte-automne .contenu { position: relative; z-index: 1; }

/* ── Boutons ────────────────────────────────────────────────────── */
.bouton {
  display: inline-block; background: var(--soleil); color: var(--sapin);
  font-weight: 700; text-decoration: none; border: none; cursor: pointer;
  padding: 0.85rem 1.6rem; border-radius: 999px; font-size: var(--fs-corps);
  font-family: var(--police-corps);
}
.bouton:hover { background: #E8B04A; }
/* Micro-interactions premium — 300 ms, transform/opacity seulement (V13 : « instantané = rugueux, 300 ms = fluide ») */
@media (prefers-reduced-motion: no-preference) {
  .bouton, .cta-nav { transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
  .bouton:hover, .cta-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 22, 14, 0.25); }
  .saison, .duo, .temoin, .carte { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .saison:hover, .temoin:hover, .carte:hover { transform: translateY(-4px); }
  .duo:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(32, 40, 31, 0.13); }
}
.bouton-contour {
  background: transparent; color: var(--blanc); border: 2px solid rgba(255, 255, 255, 0.7);
}
.bouton-contour:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--blanc); }

/* ── Pastilles et note d'hiver ──────────────────────────────────── */
.pastille {
  display: inline-block; font-size: var(--fs-badge); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--blanc);
  background: var(--pastille, var(--mousse)); border-radius: 999px;
  padding: 0.22rem 0.8rem; margin-bottom: 0.7rem; font-family: var(--police-corps);
}
.hiver-note {
  margin-top: 1.6rem; font-family: var(--police-titre); font-style: italic;
  color: var(--texte-2); font-size: var(--fs-corps);
}

/* ── Duos image/texte (services) ────────────────────────────────── */
.duo {
  display: grid; grid-template-columns: 1fr; background: var(--blanc);
  border-radius: 16px; overflow: hidden; border: 1px solid var(--bord);
  box-shadow: 0 6px 18px rgba(32, 40, 31, 0.08); margin-bottom: 1.6rem;
}
.duo img { width: 100%; height: 240px; object-fit: cover; }
.duo-texte { padding: 1.6rem 1.5rem 1.9rem; }
.duo h3, .duo .titre-duo { font-size: 1.5rem; margin: 0.35rem 0 0.5rem; }
.duo p { color: var(--texte-2); }
.duo .prix {
  display: block; margin-top: 0.9rem; font-weight: 700; color: var(--sapin);
  font-size: var(--fs-corps);
}
@media (min-width: 769px) {
  .duo { grid-template-columns: 1fr 1fr; margin-bottom: 2rem; }
  .duo:nth-of-type(even) { direction: rtl; }
  .duo:nth-of-type(even) .duo-texte, .duo:nth-of-type(even) picture, .duo:nth-of-type(even) img { direction: ltr; }
  .duo img { height: 100%; min-height: 300px; }
  .duo-texte { padding: 2.4rem 2.6rem; display: flex; flex-direction: column; justify-content: center; }
}

/* ── Bande statistiques ─────────────────────────────────────────── */
.stats { text-align: center; padding: 3.6rem 0; }
.stats-grille { display: grid; gap: 2rem; grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
@media (min-width: 600px) { .stats-grille { grid-template-columns: repeat(3, 1fr); } }
.stat-nombre {
  font-family: var(--police-titre); font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--soleil); line-height: 1.05;
}
.stat-libelle { font-size: var(--fs-corps); }

/* ── Témoignages ────────────────────────────────────────────────── */
.temoignages { display: grid; gap: 1.4rem; max-width: 560px; margin: 0 auto; }
@media (min-width: 769px) { .temoignages { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.temoin {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px;
  padding: 1.5rem 1.4rem; box-shadow: 0 8px 22px rgba(32, 40, 31, 0.07);
}
/* 1.1rem : plancher desktop du CLAUDE.md (les étoiles comptent comme élément d'interface) */
.etoiles { color: var(--soleil-f); letter-spacing: 0.12em; margin-bottom: 0.5rem; font-size: 1.1rem; }
@media (max-width: 768px) { .etoiles { font-size: 1rem; } }
.temoin blockquote { font-size: var(--fs-corps); margin-bottom: 0.8rem; }
.temoin figcaption { font-size: var(--fs-note); color: var(--texte-2); font-weight: 600; }

/* Zones tactiles ≥ 44 px sur les liens minces (nav + footer) — padding compensé, zéro impact visuel */
.nav-liens a, .pied a { padding: 0.6rem 0.25rem; margin: -0.6rem -0.25rem; display: inline-block; }

/* ── Citation éditoriale (À propos) ── */
.citation-bloc { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.citation { margin: 0 auto; max-width: 820px; text-align: center; }
.citation p { font-family: var(--police-titre); font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.3; color: var(--sapin); margin: 0 0 1rem; }
.citation cite { font-style: normal; font-size: var(--fs-note); color: var(--soleil); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Téléphone visible au CTA (anti-pattern « coordonnées cachées ») */
.bande-cta .cta-tel { margin-top: 1.1rem; font-size: 1.1rem; color: inherit; }
.cta-tel a { color: inherit; font-weight: 700; white-space: nowrap; }

/* Les cartes sont toujours blanches : leur titre reste foncé, peu importe la section
   (corrige les h3 blancs-sur-blanc des garanties, bug révélé le 19 juillet) */
.carte h3 { color: var(--sapin); }

/* ── Mur de réalisations — pleine largeur, coins droits (Foundation), joints fins ── */
.mur {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw;
  grid-auto-flow: dense; gap: 4px; margin-top: 2.4rem;
}
.mur figure { margin: 0; position: relative; overflow: hidden; }
.mur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mur figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 0.9rem 0.7rem; color: #fff; font-size: var(--fs-note);
  background: linear-gradient(to top, rgba(24, 30, 22, 0.78), transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mur-xl { grid-column: span 2; grid-row: span 2; }
.mur-large { grid-column: span 2; }
.mur-haut { grid-row: span 2; }
@media (prefers-reduced-motion: no-preference) {
  .mur img { transition: transform 0.3s ease; }
  .mur figure:hover img { transform: scale(1.04); }
}
@media (min-width: 769px) {
  .mur { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 21vw; }
  .mur figcaption { padding: 2.6rem 1.1rem 0.85rem; }
}

/* ── Valeurs / cartes génériques ────────────────────────────────── */
.cartes { display: grid; gap: 1.2rem; }
@media (min-width: 769px) { .cartes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.carte {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px;
  padding: 1.6rem 1.5rem; box-shadow: 0 6px 18px rgba(32, 40, 31, 0.07);
}
.carte h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.carte p { color: var(--texte-2); font-size: var(--fs-note); }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 0.8rem; }
.faq details { background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 1rem 1.2rem; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; position: relative; padding-right: 1.8rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.1rem; top: 0; font-weight: 800; color: var(--soleil-f); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.6rem; color: var(--texte-2); }

/* ── Contact ────────────────────────────────────────────────────── */
.contact-grille { display: grid; gap: 2.4rem; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.formulaire { display: grid; gap: 1rem; }
.champ label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
.champ input, .champ textarea {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--bord); border-radius: 10px;
  font: inherit; background: var(--blanc); color: var(--ardoise);
}
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--soleil); outline-offset: 0; border-color: var(--soleil-f); }
.form__consentement { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-note); line-height: 1.45; color: var(--texte-2); }
.form__consentement input { margin-top: 0.25rem; accent-color: var(--soleil-f); width: 1.05rem; height: 1.05rem; }
.coordonnees li { list-style: none; margin-bottom: 0.9rem; }
.coordonnees strong { display: block; }
.coordonnees a { color: var(--soleil-f); }
.carte-osm { border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(32, 40, 31, 0.1); margin-top: 1.6rem; }
.carte-osm iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ── Bande CTA finale ───────────────────────────────────────────── */
.bande-cta { text-align: center; padding: 4rem 0; position: relative; }
.bande-cta h2 { margin-bottom: 0.7rem; }
.bande-cta p { color: #CFD8C9; margin-bottom: 1.6rem; }

/* ── Légal / Loi 25 (:target) ───────────────────────────────────── */
#confidentialite { display: none; }
#confidentialite:target { display: block; }
.legal { max-width: 760px; }
.legal h3 { font-size: 1.15rem; margin: 1.6rem 0 0.4rem; }
.legal p { font-size: var(--fs-corps); line-height: 1.6; color: var(--texte-2); }
.legal-close { display: inline-block; margin-top: 2rem; font-weight: 700; color: var(--soleil-f); }
.legal-close:hover { text-decoration: underline; }

/* ── Pied de page ───────────────────────────────────────────────── */
.pied { background: var(--sapin); color: #CFD8C9; padding: 3rem 0 5.5rem; }
.pied-grille { display: grid; gap: 1.8rem; }
@media (min-width: 769px) { .pied { padding-bottom: 3rem; } .pied-grille { grid-template-columns: repeat(3, 1fr); } }
.pied h3 { color: var(--blanc); font-size: 1.15rem; margin-bottom: 0.6rem; }
.pied a { color: var(--soleil); }
.pied ul { list-style: none; }
.pied li { margin-bottom: 0.4rem; }
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 2.2rem; padding-top: 1.4rem;
  font-size: var(--fs-badge); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  justify-content: space-between; align-items: center;
}
.reseaux { display: flex; gap: 0.9rem; }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%; color: var(--blanc); text-decoration: none;
}
.reseaux a:hover { border-color: var(--soleil); color: var(--soleil); }
.reseaux svg { width: 19px; height: 19px; fill: currentColor; }

/* ── Barre d'action mobile (collante) ───────────────────────────── */
.barre-mobile {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--sapin-2); box-shadow: 0 -4px 16px rgba(10, 22, 14, 0.4);
}
.barre-mobile a {
  text-align: center; padding: 0.95rem 0.5rem; text-decoration: none;
  color: var(--blanc); font-weight: 700; font-size: 1rem;
}
.barre-mobile a.appel { background: var(--soleil); color: var(--sapin); }
@media (min-width: 769px) { .barre-mobile { display: none; } }

/* ── Révélations douces ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .rev { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .rev.vu { opacity: 1; transform: none; }
}