/* ============================================================
   PULSAR VOLT — page d'accueil
   ------------------------------------------------------------
   Ce fichier est chargé APRÈS css/style.css. Il ne redéfinit
   aucune couleur, aucun espacement : il réutilise les variables
   du bloc « :root » de style.css.

   Il contient deux choses :
     1) la section « manifeste » qui remplace le texte qui
        défilait en bloquant la page (deux pistes, A et B) ;
     2) la couche d'animations de la page d'accueil.

   RÈGLE DE SÉCURITÉ : tout ce qui masque du contenu est placé
   sous « html.anim-js ». Cette classe n'est posée que si le
   JavaScript tourne ET que le visiteur n'a pas demandé de
   réduire les animations. Sans JavaScript, la page s'affiche
   entièrement, immobile.
   ============================================================ */

html {
  /* une seule courbe pour toute la page */
  --courbe: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   1. APPARITIONS AU DÉFILEMENT
   On reprend la classe .reveal déjà observée par js/main.js et
   on lui donne une course un peu plus longue, la courbe unique
   et un décalage (--retard) posé par js/accueil.js.
   ============================================================ */

/* Sans JavaScript : tout est visible, tout de suite. */
.reveal { opacity: 1; transform: none; }

html.anim-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.7s var(--courbe) var(--retard, 0ms),
    transform 0.7s var(--courbe) var(--retard, 0ms);
}
html.anim-js .reveal.visible { opacity: 1; transform: none; }

/* Le petit trait doré des chiffres clés se déplie avec la carte. */
html.anim-js .chiffre::before {
  transform: scaleX(0);
  transition: transform 0.6s var(--courbe) calc(var(--retard, 0ms) + 200ms);
}
html.anim-js .chiffre.visible::before { transform: scaleX(1); }

/* Filet : l'intro d'ouverture est un voile blanc plein écran. C'est le
   JavaScript qui décide de la jouer ou non. Sans JavaScript, ce voile
   restait affiché et masquait TOUTE la page. On l'inverse : il est
   masqué par défaut, et seul le mode « intro-active » le montre.
   (L'animation elle-même n'est pas touchée.) */
#intro { display: none; }
html.intro-active #intro { display: flex; }

/* ============================================================
   2. GRAND ÉCRAN D'ACCUEIL — le texte se pose à l'ouverture
   Quand l'intro du logo joue, on attend qu'elle soit finie :
   js/accueil.js écrit alors --retard-hero sur <html>.
   ============================================================ */
@keyframes pv-pose {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
html.anim-js .hero h1,
html.anim-js .hero .sous-titre,
html.anim-js .hero .boutons {
  animation: pv-pose 0.9s var(--courbe) both;
}
html.anim-js .hero h1        { animation-delay: calc(var(--retard-hero, 0ms) + 60ms); }
html.anim-js .hero .sous-titre { animation-delay: calc(var(--retard-hero, 0ms) + 170ms); }
html.anim-js .hero .boutons  { animation-delay: calc(var(--retard-hero, 0ms) + 280ms); }

/* La flèche du bas arrive en dernier, discrètement. */
html.anim-js .hero .indice-defilement {
  animation: pv-pose 0.9s var(--courbe) both;
  animation-delay: calc(var(--retard-hero, 0ms) + 480ms);
}

/* ============================================================
   3. SURVOLS
   Rien de spectaculaire : la carte se soulève à peine,
   l'image respire dans son cadre, la flèche avance d'un cheveu.
   ============================================================ */

/* -- Boutons -- */
.btn {
  transition:
    opacity 0.2s, border-color 0.2s, background 0.2s, color 0.2s,
    transform 0.28s var(--courbe), box-shadow 0.32s var(--courbe);
}
.btn-or:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(245, 184, 29, 0.9);
}
.btn-contour:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* -- Les trois cartes de gamme -- */
.gamme {
  transition:
    border-color 0.25s var(--courbe),
    box-shadow   0.35s var(--courbe),
    transform    0.35s var(--courbe);
}
.gamme:hover { transform: translateY(-4px); }
.gamme img { transition: transform 0.45s var(--courbe); }
.gamme:hover img { transform: translateY(-2px) scale(1.04); }
.gamme .lien i {
  font-style: normal; display: inline-block;
  transition: transform 0.35s var(--courbe);
}
.gamme:hover .lien i { transform: translateX(5px); }

/* -- Les grandes photos : cadre fixe, image légèrement plus grande
      que son cadre (c'est cette marge qui permet la parallaxe). -- */
.vitrine .visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.vitrine .visuel img {
  position: absolute; inset: -8% 0;
  width: 100%; height: 116%;
  object-fit: cover;
  translate: 0 var(--par, 0px);
  scale: 1;
  transition: scale 0.7s var(--courbe);
}
.vitrine .visuel:hover img { scale: 1.045; }

/* -- Pied de page : un liseré doré se trace sous le lien -- */
.footer-grille a {
  position: relative;
  width: max-content; max-width: 100%;
  transition: color 0.2s var(--courbe);
}
.footer-grille a::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 1px; background: var(--or);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--courbe);
}
.footer-grille a:hover::after { transform: scaleX(1); }

/* ============================================================
   4. CHIFFRES CLÉS
   Chiffres à chasse fixe : la carte ne tressaute plus pendant
   que le compteur monte.
   ============================================================ */
.chiffre .valeur { font-variant-numeric: tabular-nums; }

/* ============================================================
   5. MANIFESTE — tronc commun aux deux pistes
   La section ne bloque JAMAIS le défilement : elle a une
   hauteur normale, on la traverse comme n'importe quelle autre.
   ============================================================ */
.manifeste { position: relative; overflow: hidden; }

/* ------------------------------------------------------------
   PISTE A — « le texte qui s'allume »
   Une phrase en très grand, presque éteinte. Chaque ligne
   s'allume quand elle passe au milieu de l'écran, et le reste.
   ------------------------------------------------------------ */
.manifeste-a { padding: var(--e7) var(--e4); }
.manifeste-a .conteneur { max-width: 1000px; }

.manif-texte {
  margin: 0;
  font-size: clamp(1.5rem, 3.7vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.34;
  color: var(--blanc);
  text-wrap: pretty;
}
.manif-texte b { font-weight: 600; }

/* état allumé (et état par défaut sans JavaScript) */
.manif-texte b.or   { color: var(--or); }
.manif-texte b.bleu { color: var(--bleu); }

/* état éteint : posé UNIQUEMENT quand l'effet peut jouer */
.manifeste-a.anime .mot,
.manifeste-mix.anime .mot {
  color: rgba(255, 255, 255, 0.19);
  transition: color 0.55s var(--courbe);
}
.manifeste-a.anime .mot.on,
.manifeste-mix.anime .mot.on { color: var(--blanc); }
.manifeste-a.anime b.or   .mot.on,
.manifeste-mix.anime b.or   .mot.on { color: var(--or); }
.manifeste-a.anime b.bleu .mot.on,
.manifeste-mix.anime b.bleu .mot.on { color: var(--bleu); }

/* le trait doré de fin se trace quand le dernier mot s'est allumé */
.manif-trait {
  display: block; width: 88px; height: 2px;
  margin-top: var(--e5); background: var(--or);
}
.manifeste-a.anime .manif-trait,
.manifeste-mix.anime .manif-trait {
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--courbe);
}
.manifeste-a.anime.fini .manif-trait { transform: scaleX(1); }


/* ------------------------------------------------------------
   MANIFESTE HYBRIDE — la scène de la piste B, le texte de la A
   ------------------------------------------------------------
   Choix du client : il voulait « le header du A et le reste du
   B ». On garde donc la photo plein cadre qui s'éclaire quand le
   courant revient (piste B), et par-dessus, la grande phrase
   dont chaque mot s'allume au passage (piste A).

   🔴 Sur une photo, le blanc « éteint » de la piste A (19 %)
   serait illisible : on le remonte, et on pose un voile plus
   dense derrière le texte. Contraste vérifié.
   ------------------------------------------------------------ */
.manifeste-mix {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(96svh, 860px);
  padding: 0;
  background: var(--noir);
  overflow: hidden;
}

/* le texte, posé au-dessus de la scène */
.manifeste-mix .manif-mots {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e6) var(--e4) var(--e6);
}
.manifeste-mix .manif-texte { max-width: 19em; }

/* un voile plus dense en bas : c'est lui qui rend le texte lisible */
.manifeste-mix::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(14, 15, 18, 0.94) 0%,
    rgba(14, 15, 18, 0.80) 34%,
    rgba(14, 15, 18, 0.34) 62%,
    rgba(14, 15, 18, 0.12) 100%);
}

/* sur la photo, le mot éteint reste perceptible */
.manifeste-mix.anime .mot { color: rgba(255, 255, 255, 0.34); }

@media (max-width: 900px) {
  .manifeste-mix { min-height: min(88svh, 700px); }
  .manifeste-mix .manif-mots { padding: var(--e5) var(--e3); }
  .manifeste-mix .manif-texte { max-width: none; font-size: clamp(1.35rem, 6.4vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .manifeste-mix { min-height: 0; }
}

/* ------------------------------------------------------------
   PISTE B — « la lumière revient »
   Une photo plein cadre, d'abord presque éteinte. Quand la
   section entre à l'écran, le courant revient : la scène
   s'éclaire, une lueur dorée la traverse une fois, le texte
   se pose par-dessus.
   ------------------------------------------------------------ */
.manifeste-b {
  min-height: min(86svh, 760px);
  display: flex; align-items: flex-end;
  padding: var(--e7) var(--e4) var(--e5);
  background: var(--noir);
}
.manif-scene { position: absolute; inset: 0; overflow: hidden; }
.manif-scene img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 58% 50%;
  transform: scale(1.06);
  transition: transform 2.4s var(--courbe);
}
.manifeste-b.vu .manif-scene img { transform: scale(1); }

/* le voile qui se lève : c'est lui la « coupure » */
.manif-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 11, 14, 0.94) 0%, rgba(10, 11, 14, 0.55) 46%, rgba(10, 11, 14, 0.32) 100%),
    #0a0b0e;
  opacity: 1;
  transition: opacity 1.5s var(--courbe);
}
.manifeste-b.vu .manif-voile { opacity: 0.62; }

/* la lueur qui traverse une seule fois */
.manif-balayage {
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg,
    rgba(245, 184, 29, 0) 0%,
    rgba(245, 184, 29, 0.26) 48%,
    rgba(245, 184, 29, 0) 100%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.manifeste-b.vu .manif-balayage { animation: pv-balaye 1.5s var(--courbe) 0.25s both; }
@keyframes pv-balaye {
  from { transform: translateX(-120%); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translateX(300%); opacity: 0; }
}

/* voile de lecture, lui toujours présent : le texte reste lisible
   quelle que soit la photo qui passe derrière */
.manifeste-b::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8, 9, 12, 0.88) 0%,
    rgba(8, 9, 12, 0.62) 24%,
    rgba(8, 9, 12, 0) 56%);
}

.manif-b-texte { position: relative; z-index: 1; width: 100%; }
.manif-b-titre {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--blanc);
  max-width: 15em;
}
.manif-b-titre .ligne { display: block; }
.manif-b-texte p {
  margin: var(--e3) 0 0; max-width: 34em;
  font-size: var(--t-lead); line-height: 1.6; color: var(--blanc-2);
}
.manifeste-b.anime .manif-b-titre .ligne,
.manifeste-b.anime .manif-b-texte p {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.85s var(--courbe) var(--retard, 0ms),
              transform 0.85s var(--courbe) var(--retard, 0ms);
}
.manifeste-b.anime.vu .manif-b-titre .ligne,
.manifeste-b.anime.vu .manif-b-texte p { opacity: 1; transform: none; }

/* ============================================================
   6. ÉCRANS ÉTROITS (téléphone, jusqu'à 390 px)
   ============================================================ */
@media (max-width: 700px) {
  .manifeste-a { padding: var(--e6) var(--e3); }
  .manif-texte { font-size: clamp(1.35rem, 6.2vw, 1.9rem); line-height: 1.38; }
  .manif-trait { margin-top: var(--e4); width: 64px; }

  .manifeste-b {
    min-height: min(78svh, 620px);
    padding: var(--e6) var(--e3) var(--e4);
  }
  /* sur téléphone la photo est recadrée en portrait : on garde la
     station d'énergie et la lampe allumée dans le cadre */
  .manif-scene img { object-position: 34% 50%; }
  .manif-b-titre { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  .vitrine .visuel { aspect-ratio: 3 / 2; }

  /* zones tactiles confortables dans le pied de page */
  .footer-grille a { padding: 11px 0; }
}

/* ============================================================
   7. MOUVEMENT RÉDUIT — filet de sécurité
   style.css coupe déjà les animations ; on s'assure surtout
   qu'AUCUN contenu ne reste masqué.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.anim-js .reveal,
  html.anim-js .reveal.visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.anim-js .chiffre::before { transform: none !important; transition: none !important; }
  html.anim-js .hero h1,
  html.anim-js .hero .sous-titre,
  html.anim-js .hero .boutons,
  html.anim-js .hero .indice-defilement { animation: none !important; }

  .manifeste-a .mot { color: inherit !important; transition: none !important; }
  .manif-trait { transform: none !important; transition: none !important; }
  .manif-scene img { transform: none !important; transition: none !important; }
  .manif-voile { opacity: 0.62 !important; transition: none !important; }
  .manif-balayage { display: none !important; }
  .manif-b-titre .ligne, .manif-b-texte p {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .vitrine .visuel img { translate: none !important; transition: none !important; }
  .btn, .gamme, .gamme img, .gamme .lien i, .footer-grille a::after { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════
   8. GRAND ÉCRAN D'ACCUEIL, version 2 « plus wow »
   ------------------------------------------------------------
   Trois leviers, pas plus : l'échelle, l'air, et un décor très
   discret qui évoque le courant. Aucune image nouvelle, aucun
   dégradé criard, aucune ombre lourde.
   Le logo n'est PAS touché : c'est la cible de l'animation
   d'ouverture, qui doit continuer à viser juste.
   ════════════════════════════════════════════════════════════ */

/* Une seule taille ajoutée à l'échelle existante : celle du titre
   d'accueil, qui devait grandir pour « en imposer ». */
html { --t-hero: clamp(2.5rem, 6.2vw, 4.5rem); }

.hero-v2 {
  min-height: min(96svh, 900px);
  padding: calc(var(--e6) + var(--e4)) var(--e4) var(--e6);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Le décor ---------- */
.hero-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* La trame technique a été RETIRÉE le 31/08/2026.
   Depuis que le bandeau porte une vraie photographie de l'île, un
   quadrillage décoratif par-dessus n'apporte rien : il concurrence la
   photo et c'est, de surcroît, un tic d'interface très reconnaissable.
   Le décor se limite maintenant à l'aura et à la ligne de courant. */

/* une aura dorée à peine perceptible derrière le titre */
.hero-aura {
  position: absolute; left: 50%; top: 34%;
  width: min(1100px, 92vw); aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(245, 184, 29, 0.13), rgba(245, 184, 29, 0) 72%);
}

/* la ligne de courant : un point clair traverse lentement, en
   laissant une traînée. C'est le seul mouvement continu de la page. */
.hero-courant {
  position: absolute; left: 0; right: 0; bottom: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--trait) 14%, var(--trait) 86%, transparent);
}
.hero-courant i {
  position: absolute; top: -1px; left: 0;
  width: 190px; height: 3px; border-radius: 2px;
  background: linear-gradient(to right,
    rgba(245, 184, 29, 0) 0%,
    rgba(245, 184, 29, 0.85) 62%,
    rgba(31, 168, 255, 0.9) 96%,
    rgba(31, 168, 255, 0) 100%);
  opacity: 0;
}
html.anim-js .hero-courant i { animation: pv-courant 7.5s linear infinite; }
@keyframes pv-courant {
  0%   { transform: translateX(-200px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}

/* ---------- Le titre ---------- */
.hero-v2 .hero-logo { width: min(380px, 68vw); margin-bottom: var(--e4); }

.hero-titre {
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15em;
  text-wrap: balance;
}
/* chaque ligne est une fenêtre : le texte monte de dessous.
   La réserve verticale évite de rogner les jambages et le liseré doré. */
.hero-titre .l {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero-titre .m { display: block; }

/* le liseré doré du mot mis en avant se trace une fois posé */
.hero-titre .accent { background-size: 100% 0.075em; }

.hero-v2 .sous-titre { max-width: 40em; }
.hero-v2 .boutons { margin-top: var(--e4); }

/* ---------- L'entrée en scène ---------- */
html.anim-js .hero-v2 h1 { animation: none; }   /* remplacée ligne par ligne */
html.anim-js .hero-titre .m {
  transform: translateY(105%);
  opacity: 0;
  animation: pv-monte 1s var(--courbe) both;
}
html.anim-js .hero-titre .l:nth-child(1) .m { animation-delay: calc(var(--retard-hero, 0ms) + 40ms); }
html.anim-js .hero-titre .l:nth-child(2) .m { animation-delay: calc(var(--retard-hero, 0ms) + 150ms); }
@keyframes pv-monte {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* le liseré doré se trace après que la ligne se soit posée */
html.anim-js .hero-titre .accent {
  background-size: 0% 0.075em;
  animation: pv-trace 0.85s var(--courbe) both;
  animation-delay: calc(var(--retard-hero, 0ms) + 900ms);
}
@keyframes pv-trace {
  from { background-size: 0% 0.075em; }
  to   { background-size: 100% 0.075em; }
}

/* le décor arrive en dernier, en fondu */
html.anim-js .hero-decor {
  animation: pv-fondu 1.6s var(--courbe) both;
  animation-delay: calc(var(--retard-hero, 0ms) + 260ms);
}
@keyframes pv-fondu { from { opacity: 0; } to { opacity: 1; } }


/* ════════════════════════════════════════════════════════════
   9. CHAPITRE « MAURICE » — les sections de données
   ------------------------------------------------------------
   Tronc commun : le rythme typographique et la note de source.
   Chaque section a ensuite SA mise en page ; on ne répète pas
   cinq fois la même grille de cartes.
   ════════════════════════════════════════════════════════════ */

.mrc .conteneur { max-width: 1140px; }
.mrc h2 { max-width: 16em; }
.mrc .intro-section { margin-left: 0; }

/* la note de source : petite, discrète, mais toujours lisible
   (contraste vérifié sur fond clair comme sur fond sombre) */
.mrc-src {
  margin-top: var(--e2);
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--encre-2);
  max-width: 56em;
}
.sombre .mrc-src { color: var(--blanc-2); }
.mrc-src i { font-style: italic; }

/* les chiffres se lisent en chasse fixe : rien ne tressaute
   pendant que le compteur monte */
.mrc-enorme-valeur, .mrc-moyen, .mrc-col-val,
.mrc-region-val b, .mrc-prix-val, .mrc-releve-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------------
   9.1 LE MIX ÉNERGÉTIQUE — un chiffre énorme et une seule barre
   ------------------------------------------------------------ */
.mrc-mix-corps {
  margin-top: var(--e5);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--e5);
  align-items: center;
}
.mrc-enorme { margin: 0; }
.mrc-enorme-valeur {
  display: block;
  font-size: clamp(3.4rem, 8.6vw, 6.5rem);
  font-weight: 600; line-height: 0.95;
  color: var(--blanc);
}
.mrc-enorme-legende {
  display: block; margin-top: var(--e3);
  max-width: 22em; color: var(--blanc-2);
  font-size: var(--t-lead); line-height: 1.6;
}
.mrc-enorme-legende strong { color: var(--blanc); font-weight: 600; }

.mrc-pile-barre {
  display: flex; width: 100%; height: 76px;
  border-radius: var(--r-petit); overflow: hidden;
  background: var(--noir-2);
}
 /* --part est un nombre sans unité : les trois segments se
    partagent la barre au prorata. Les pourcentages officiels
    additionnés font 98,8 (arrondis de la source) ; on répartit
    donc proportionnellement plutôt que de laisser un trou. */
.mrc-pile-barre .seg { display: block; flex: var(--part) 1 0%; transform-origin: left; }
.seg-fioul   { background: rgba(255, 255, 255, 0.80); }
.seg-charbon { background: rgba(255, 255, 255, 0.34); }
.seg-renouv  { background: var(--or); }

.mrc-pile-legende {
  list-style: none; margin: var(--e3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  font-size: var(--t-petit); color: var(--blanc-2);
}
.mrc-pile-legende li { display: flex; align-items: baseline; gap: 8px; }
.mrc-pile-legende b { color: var(--blanc); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.pt-fioul   { background: rgba(255, 255, 255, 0.80); }
.pt-charbon { background: rgba(255, 255, 255, 0.34); }
.pt-renouv  { background: var(--or); }

.mrc-duo {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--trait-sombre);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5);
}
.mrc-moyen {
  display: block; font-size: 2.5rem; font-weight: 600;
  line-height: 1.1; color: var(--or);
}
.mrc-duo p { margin-top: var(--e2); color: var(--blanc-2); line-height: 1.6; }
.mrc-duo strong { color: var(--blanc); font-weight: 600; }

/* ------------------------------------------------------------
   9.2 LE RÉSEAU SOUS TENSION — trois colonnes et un encadré
   ------------------------------------------------------------ */
.mrc-reseau-haut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--e6); align-items: end;
}
.mrc-reseau-texte h2 { margin-bottom: var(--e3); }

.mrc-colonnes {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e3); align-items: end;
  height: 300px;
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--trait);
}
.mrc-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.mrc-col-val {
  font-size: 1.375rem; font-weight: 600; text-align: center;
  margin-bottom: 10px; color: var(--encre-2);
}
.mrc-col.haut .mrc-col-val { color: var(--encre); }
.mrc-col-fut {
  display: block; height: var(--h); border-radius: 6px 6px 0 0;
  background: var(--gris-10); transform-origin: bottom;
}
.mrc-col.haut .mrc-col-fut { background: var(--or); }
.mrc-col-an {
  position: absolute; left: 0; width: 100%;
  bottom: calc(-1 * var(--e3));
  font-size: var(--t-petit); color: var(--encre-2); text-align: center;
}
.mrc-colonnes-unite {
  position: absolute; top: -26px; left: 0;
  font-size: var(--t-petit); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-2);
}

/* l'encadré juridique : le fait le plus fort de la page,
   traité comme une citation officielle et non comme une carte */
.mrc-loi {
  margin-top: var(--e6);
  padding: var(--e4) 0 var(--e4) var(--e4);
  border-left: 3px solid var(--or);
  max-width: 62em;
}
.mrc-loi h3 { max-width: 20em; margin-bottom: var(--e2); }
.mrc-loi p { color: var(--encre-2); line-height: 1.65; max-width: 54em; }
.mrc-loi strong { color: var(--encre); font-weight: 600; }
.mrc-loi sup { font-size: 0.62em; vertical-align: super; line-height: 0; }

.mrc-notes {
  margin-top: var(--e5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5);
}
.mrc-note { border-top: 1px solid var(--trait); padding-top: var(--e3); }
.mrc-note h4 { font-size: var(--t-base); margin-bottom: var(--e1); }
.mrc-note p { color: var(--encre-2); line-height: 1.65; }

/* ------------------------------------------------------------
   9.3 LA FIABILITÉ MESURÉE — trois régions comparées
   ------------------------------------------------------------ */
.mrc-regions { margin-top: var(--e5); display: grid; gap: var(--e2); }
.mrc-region {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 220px;
  align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--trait);
}
.mrc-region:last-child { border-bottom: 1px solid var(--trait); }
.mrc-region-nom { font-weight: 600; font-size: var(--t-sous); }
.mrc-region-rail {
  display: block; height: 14px; border-radius: var(--r-pilule);
  background: var(--gris-10); overflow: hidden;
}
.mrc-region-rail > span {
  display: block; height: 100%; width: var(--h);
  border-radius: var(--r-pilule);
  background: var(--or); transform-origin: left;
}
.mrc-region-val { font-size: var(--t-base); color: var(--encre-2); }
.mrc-region-val b { color: var(--encre); font-size: var(--t-sous); font-weight: 600; }
.mrc-region-sec {
  grid-column: 2 / -1;
  font-size: var(--t-petit); color: var(--encre-2); margin-top: 6px;
}
.mrc-conclu {
  margin-top: var(--e4); max-width: 48em;
  font-size: var(--t-lead); line-height: 1.6; color: var(--encre-2);
}
.mrc-conclu strong { color: var(--encre); font-weight: 600; }

/* ------------------------------------------------------------
   9.4 LES ANIMATIONS DU CHAPITRE
   Toutes les barres partent de zéro et se déploient à l'entrée
   à l'écran, avec la courbe unique de la page. Tout est sous
   « html.anim-js » : sans JavaScript, les barres sont pleines.
   ------------------------------------------------------------ */
html.anim-js .mrc-pile .seg,
html.anim-js .mrc-col-fut,
html.anim-js .mrc-region-rail > span {
  transform: scaleX(0);
  transition: transform 1.1s var(--courbe) var(--retard, 0ms);
}
html.anim-js .mrc-col-fut { transform: scaleY(0); }

html.anim-js .mrc-pile.visible .seg,
html.anim-js .mrc-region.visible .mrc-region-rail > span { transform: scaleX(1); }
html.anim-js .mrc-colonnes.visible .mrc-col-fut { transform: scaleY(1); }

/* les segments de la barre empilée se déploient l'un après l'autre */
html.anim-js .mrc-pile .seg-fioul   { transition-delay: 60ms; }
html.anim-js .mrc-pile .seg-charbon { transition-delay: 260ms; }
html.anim-js .mrc-pile .seg-renouv  { transition-delay: 460ms; }
html.anim-js .mrc-colonnes .mrc-col:nth-child(1) .mrc-col-fut { transition-delay: 60ms; }
html.anim-js .mrc-colonnes .mrc-col:nth-child(2) .mrc-col-fut { transition-delay: 200ms; }
html.anim-js .mrc-colonnes .mrc-col:nth-child(3) .mrc-col-fut { transition-delay: 340ms; }

/* ------------------------------------------------------------
   9.5 LA SAISON CYCLONIQUE — un calendrier et une échelle
   ------------------------------------------------------------ */
.mrc-frise { margin-top: var(--e5); }
.mrc-frise-mois {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
.mrc-frise-mois .m {
  display: flex; align-items: center; justify-content: center;
  height: 62px; border-radius: var(--r-petit);
  background: var(--gris-05); border: 1px solid var(--trait);
  font-size: var(--t-petit); font-weight: 600; color: var(--encre-2);
}
.mrc-frise-mois .m.on {
  background: var(--or); border-color: var(--or); color: #17130a;
}
/* mai : la saison s'arrête au 15, la case n'est dorée qu'à moitié */
.mrc-frise-mois .m.demi {
  color: var(--encre);
  background: linear-gradient(to right, var(--or) 0 50%, var(--gris-05) 50% 100%);
  border-color: var(--trait);
}
.mrc-frise-note {
  margin-top: var(--e2);
  font-size: var(--t-petit); color: var(--encre-2);
}
.mrc-frise-note sup, .mrc h2 sup { font-size: 0.62em; vertical-align: super; line-height: 0; }

.mrc-classes { margin-top: var(--e6); }
.mrc-classes h3 { max-width: 24em; margin-bottom: var(--e4); }
.mrc-echelle {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3);
}
.mrc-etape { position: relative; padding-top: var(--e3); }
/* la barre du haut se remplit d'un cran à chaque classe :
   c'est le temps qui reste qui diminue */
.mrc-etape::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 2px; background: var(--gris-10);
}
.mrc-etape:nth-child(1)::before { background: linear-gradient(to right, var(--or) 0 25%, var(--gris-10) 25%); }
.mrc-etape:nth-child(2)::before { background: linear-gradient(to right, var(--or) 0 50%, var(--gris-10) 50%); }
.mrc-etape:nth-child(3)::before { background: linear-gradient(to right, var(--or) 0 75%, var(--gris-10) 75%); }
.mrc-etape:nth-child(4)::before { background: var(--or); }
.mrc-etape-nom {
  display: block; font-weight: 600; font-size: var(--t-sous);
  margin-bottom: var(--e1);
}
.mrc-etape-txt { display: block; color: var(--encre-2); line-height: 1.6; }
.mrc-etape.haut .mrc-etape-nom { color: var(--or-texte); }

/* ------------------------------------------------------------
   9.6 LE PRIX DU COURANT — quatre marches
   ------------------------------------------------------------ */
.mrc-prix-haut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--e6); align-items: end;
}
.mrc-marches {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e2); align-items: end; height: 260px;
}
.mrc-marche {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: var(--h); padding: var(--e2) 0 0;
}
/* la marche elle-même est un fond, pour que le chiffre ne se
   déforme pas pendant que la marche pousse */
.mrc-marche::before {
  content: ""; position: absolute; inset: 0;
  border-top: 3px solid rgba(16, 17, 20, 0.26);
  background: linear-gradient(to bottom, rgba(16, 17, 20, 0.085), rgba(16, 17, 20, 0.012));
  transform-origin: bottom;
}
.mrc-marche.haut::before {
  border-top-color: var(--or);
  background: linear-gradient(to bottom, rgba(245, 184, 29, 0.30), rgba(245, 184, 29, 0.05));
}
.mrc-marche b, .mrc-marche i { position: relative; }
.mrc-marche b {
  font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.mrc-marche i {
  font-style: normal; margin-top: auto; padding-bottom: var(--e1);
  font-size: var(--t-petit); color: var(--encre-2);
}

/* ------------------------------------------------------------
   9.7 LE SOLEIL — un relevé de mesures
   ------------------------------------------------------------ */
.mrc-soleil-haut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--e6); align-items: start;
}
.mrc-soleil-haut .mrc-releves { margin-top: 0; }
.mrc-releves { margin-top: var(--e5); }
.mrc-releve-tete, .mrc-releve {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3); align-items: baseline;
  padding: var(--e2) 0;
}
.mrc-releve-tete {
  font-size: var(--t-petit); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2);
  border-bottom: 1px solid var(--encre);
  padding-bottom: var(--e1);
}
.mrc-releve-tete span:last-child { text-align: right; }
.mrc-releve + .mrc-releve { border-top: 1px solid var(--trait); }
.mrc-releve-lieu { color: var(--encre-2); }
.mrc-releve-val { font-size: var(--t-sous); font-weight: 600; }

.mrc-soleil-notes, .mrc-2030 .mrc-notes {
  margin-top: var(--e5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e4);
}
.mrc-soleil-notes .mrc-note { border-top: 1px solid var(--trait); padding-top: var(--e3); }

/* ------------------------------------------------------------
   9.8 L'OBJECTIF 2030 — la courbe qui se dessine
   ------------------------------------------------------------ */
.mrc-courbe { margin-top: var(--e5); }
.mrc-courbe svg { width: 100%; height: auto; display: block; }
.mrc-courbe .c-etroit { display: none; }   /* version portrait, écrans étroits */
.c-etroit .c-txt { font-size: 15px; }
.c-axe   { stroke: var(--trait); stroke-width: 1; }
.c-cible { stroke: var(--or); stroke-width: 1.5; stroke-dasharray: 2 6; }
.c-trait {
  fill: none; stroke: var(--encre); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
}
.c-projection { stroke: var(--or); stroke-dasharray: 7 8; stroke-width: 3; }
.c-pt { fill: var(--encre); }
.c-pt-cible { fill: var(--or); }
.c-txt {
  font-size: 13px; fill: var(--encre-2);
  font-family: var(--police);
}
.c-txt-fort { fill: var(--encre); font-weight: 600; }
.c-txt-or   { fill: var(--or-texte); font-weight: 600; }

/* ------------------------------------------------------------
   9.9 LES ANIMATIONS DES SECTIONS 4 À 7
   ------------------------------------------------------------ */
/* les mois de la saison s'allument de gauche à droite */
html.anim-js .mrc-frise .m { transition: background 0.5s var(--courbe), border-color 0.5s var(--courbe), color 0.5s var(--courbe); }
html.anim-js .mrc-frise:not(.visible) .m.on,
html.anim-js .mrc-frise:not(.visible) .m.demi {
  background: var(--gris-05); border-color: var(--trait); color: var(--encre-2);
}
html.anim-js .mrc-frise .m:nth-child(1)  { transition-delay: 40ms; }
html.anim-js .mrc-frise .m:nth-child(2)  { transition-delay: 80ms; }
html.anim-js .mrc-frise .m:nth-child(3)  { transition-delay: 120ms; }
html.anim-js .mrc-frise .m:nth-child(4)  { transition-delay: 160ms; }
html.anim-js .mrc-frise .m:nth-child(5)  { transition-delay: 200ms; }
html.anim-js .mrc-frise .m:nth-child(11) { transition-delay: 240ms; }
html.anim-js .mrc-frise .m:nth-child(12) { transition-delay: 280ms; }

/* le remplissage de l'échelle d'alerte se déplie */
html.anim-js .mrc-etape::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--courbe);
}
html.anim-js .mrc-etape.visible::before { transform: scaleX(1); }

/* les quatre marches du prix poussent depuis la ligne du bas */
html.anim-js .mrc-marche::before {
  transform: scaleY(0);
  transition: transform 0.9s var(--courbe);
}
html.anim-js .mrc-marche > * {
  opacity: 0; transition: opacity 0.6s var(--courbe);
}
html.anim-js .mrc-marches.visible .mrc-marche::before { transform: scaleY(1); }
html.anim-js .mrc-marches.visible .mrc-marche > * { opacity: 1; }
html.anim-js .mrc-marches .mrc-marche:nth-child(1)::before,
html.anim-js .mrc-marches .mrc-marche:nth-child(1) > * { transition-delay: 60ms; }
html.anim-js .mrc-marches .mrc-marche:nth-child(2)::before,
html.anim-js .mrc-marches .mrc-marche:nth-child(2) > * { transition-delay: 200ms; }
html.anim-js .mrc-marches .mrc-marche:nth-child(3)::before,
html.anim-js .mrc-marches .mrc-marche:nth-child(3) > * { transition-delay: 340ms; }
html.anim-js .mrc-marches .mrc-marche:nth-child(4)::before,
html.anim-js .mrc-marches .mrc-marche:nth-child(4) > * { transition-delay: 480ms; }

/* la courbe se trace, puis la projection dorée part vers la cible */
html.anim-js .mrc-courbe .c-trait:not(.c-projection) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--courbe);
}
html.anim-js .mrc-courbe.visible .c-trait:not(.c-projection) { stroke-dashoffset: 0; }
/* la projection garde ses pointillés : ce chemin n'est pas encore
   parcouru, il ne doit pas se lire comme une donnée mesurée */
html.anim-js .mrc-courbe .c-projection {
  opacity: 0; transition: opacity 0.8s var(--courbe) 0.95s;
}
html.anim-js .mrc-courbe.visible .c-projection { opacity: 1; }
html.anim-js .mrc-courbe .c-pt, html.anim-js .mrc-courbe .c-txt, html.anim-js .mrc-courbe .c-cible {
  opacity: 0; transition: opacity 0.7s var(--courbe) 1.25s;
}
html.anim-js .mrc-courbe.visible .c-pt,
html.anim-js .mrc-courbe.visible .c-txt,
html.anim-js .mrc-courbe.visible .c-cible { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   10. ÉCRANS ÉTROITS — tout tient à partir de 320 px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mrc-mix-corps,
  .mrc-reseau-haut,
  .mrc-prix-haut,
  .mrc-soleil-haut { grid-template-columns: 1fr; gap: var(--e5); }
  .mrc-notes, .mrc-soleil-notes, .mrc-duo { grid-template-columns: 1fr; gap: var(--e4); }
  .mrc-echelle { grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e3); }
}

@media (max-width: 700px) {
  /* ---- grand écran d'accueil ---- */
  html { --t-hero: clamp(2.1rem, 10.4vw, 3rem); }
  .hero-v2 {
    min-height: min(92svh, 720px);
    padding: calc(var(--e5) + var(--e4)) var(--e3) var(--e5);
  }
  .hero-v2 .hero-logo { width: min(300px, 76vw); margin-bottom: var(--e3); }
  .hero-courant { bottom: 9%; }
  .hero-courant i { width: 130px; }
  .hero-titre { max-width: 100%; }

  /* ---- chapitre Maurice ---- */
  .mrc h2, .mrc-loi h3, .mrc-classes h3 { max-width: 100%; }
  .mrc-enorme-legende { max-width: 100%; }
  .mrc-pile-barre { height: 58px; }
  .mrc-pile-legende { gap: 6px var(--e2); }
  .mrc-moyen { font-size: 2rem; }

  .mrc-colonnes { height: 220px; }
  .mrc-col-val { font-size: 1.125rem; }
  .mrc-loi { padding: var(--e3) 0 var(--e3) var(--e3); }

  /* les régions passent en pile : nom, barre, chiffres */
  .mrc-region { grid-template-columns: 1fr; gap: var(--e1); }
  .mrc-region-sec { grid-column: 1; }

  /* le calendrier passe sur deux rangées de six mois */
  .mrc-frise-mois { grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .mrc-frise-mois .m { height: 52px; font-size: 0.8125rem; }
  .mrc-echelle { grid-template-columns: 1fr; gap: var(--e3); }
  .mrc-etape:nth-child(n)::before { background: var(--or); }

  .mrc-marches { height: 200px; gap: var(--e1); }
  .mrc-marche b { font-size: 1rem; }
  .mrc-marche i { font-size: 0.75rem; }

  .mrc-releve-tete, .mrc-releve { gap: var(--e2); }
  .mrc-releve-val { font-size: var(--t-base); }

  /* la courbe passe en portrait : rétrécie, la version large
     rendait les repères illisibles (4 px de haut) */
  .mrc-courbe svg { display: none; }
  .mrc-courbe .c-etroit { display: block; }
}

/* ════════════════════════════════════════════════════════════
   11. MOUVEMENT RÉDUIT — dernier filet
   Rien ne bouge, et surtout rien ne reste caché.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-courant i { animation: none !important; opacity: 1 !important; }
  .hero-decor, .hero-titre .m, .hero-titre .accent {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .hero-titre .accent { background-size: 100% 0.075em !important; }

  .mrc-pile .seg, .mrc-col-fut, .mrc-region-rail > span,
  .mrc-etape::before, .mrc-marche::before {
    transform: none !important; transition: none !important;
  }
  .mrc-marche > * { opacity: 1 !important; transition: none !important; }
  .mrc-frise .m { transition: none !important; }
  .mrc-courbe .c-trait, .mrc-courbe .c-projection,
  .mrc-courbe .c-pt, .mrc-courbe .c-txt, .mrc-courbe .c-cible {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
    opacity: 1 !important; transition: none !important;
  }
  .c-projection { stroke-dasharray: 7 8 !important; }
}

/* ------------------------------------------------------------
   LE FOND DU HEADER : une photo de l'île Maurice, en noir et blanc
   ------------------------------------------------------------
   Le noir et blanc est fait ICI, par la feuille de style : la photo
   déposée peut donc rester en couleur, on n'a rien à retoucher.
   Un voile clair passe par-dessus pour que le texte noir reste
   lisible — contraste vérifié.
   ------------------------------------------------------------ */
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
}
/* le voile : blanc en bas, plus transparent en haut, pour que la
   photo reste visible sans jamais manger le texte */
/* 🔴 Un voile plein écran délave la photo au point qu'on ne la voit
   plus. On garde donc la photo FRANCHE, et on pose la lisibilité
   uniquement LÀ OÙ IL Y A DU TEXTE : un halo blanc doux au centre,
   plus un dégradé léger en haut (sous la barre) et en bas (raccord
   avec la section suivante). Contraste du titre vérifié. */
.hero-v2:has(.hero-photo)::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 48%,
      rgba(255, 255, 255, 0.93) 0%,
      rgba(255, 255, 255, 0.78) 46%,
      rgba(255, 255, 255, 0.30) 74%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      rgba(255, 255, 255, 0.16) 74%,
      rgba(255, 255, 255, 0.88) 100%);
}
.hero-v2 > *:not(.hero-photo):not(.hero-decor) { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   « ÎLE MAURICE » : on doit le voir tout de suite
   ------------------------------------------------------------ */
.hero-lieu {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto var(--e3);
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
          backdrop-filter: saturate(150%) blur(8px);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre);
}
.hero-lieu-drapeau {
  display: block; width: 21px; height: 14px; flex: 0 0 auto;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 17, 20, 0.12);
}
.hero-lieu-drapeau svg { display: block; width: 100%; height: 100%; }

@media (max-width: 700px) {
  .hero-lieu { letter-spacing: 0.12em; padding: 6px 13px 6px 10px; }
  .hero-photo { opacity: 0.42; }
}

/* ------------------------------------------------------------
   TOUT EN BAS : la signature de Sitero et le crédit photo
   ------------------------------------------------------------
   Volontairement TRÈS discret : petit, gris clair, sous la ligne
   légale. Le logo Sitero est en niveaux de gris au repos et
   reprend ses couleurs au survol.
   Le crédit photo n'est pas décoratif : la licence Creative
   Commons Attribution l'impose, c'est lui qui rend l'usage
   commercial de la photo légal.
   ------------------------------------------------------------ */
.footer-signature {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--e2);
  max-width: 1180px; margin: var(--e3) auto 0;
  padding: var(--e2) var(--e4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
  color: var(--blanc-2);
}
.signature-sitero {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--blanc-2); text-decoration: none;
  opacity: 0.62;
  transition: opacity 0.25s var(--courbe);
}
.signature-sitero img {
  height: 15px; width: auto; display: block;
  filter: grayscale(1) brightness(1.7);
  transition: filter 0.25s var(--courbe);
}
.signature-sitero:hover { opacity: 1; }
.signature-sitero:hover img { filter: none; }

.credit-photo { opacity: 0.5; }
.credit-photo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit-photo a:hover { color: var(--blanc); }

@media (max-width: 700px) {
  .footer-signature {
    flex-direction: column; align-items: flex-start; gap: var(--e1);
    padding: var(--e2) var(--e3) 0;
  }
}

/* ════════════════════════════════════════════════════════════
   12. TÉLÉPHONE — LA PAGE D'ACCUEIL RESSERRÉE
   ------------------------------------------------------------
   Demande du client : « la page d'accueil est trop longue sur le
   responsive […] on s'y perd et il y a trop d'infos dessus. »

   Quatre leviers, dans cet ordre, et RIEN au-dessus de 700 px :
     1. on REPLIE le détail derrière un dépliant natif <details> ;
     2. on RESSERRE la respiration entre les sections ;
     3. on COMPACTE les graphiques ;
     4. on donne un REPÈRE de lecture (le filet doré du haut).

   🔴 Aucune section, aucune donnée, aucune source, aucune image
   n'est supprimée : tout est à un doigt de distance.
   🔴 Tout ce bloc est dans des @media : le grand écran ne bouge pas.
   ════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   12.1 LE DÉPLIANT — invisible sur grand écran
   ------------------------------------------------------------
   Sur ordinateur, le <details> est ouvert et son bouton masqué :
   la page est exactement celle d'avant. Sans JavaScript, partout,
   il reste ouvert lui aussi : tout le texte est lisible d'emblée.
   ------------------------------------------------------------ */
.replier > summary { display: none; }

/* Pendant le tout premier affichage sur téléphone, on masque le
   contenu repliable AVANT que le script ne referme les dépliants :
   sans cela la page sursauterait sous les yeux du visiteur.
   La classe est posée par le script du <head>, donc jamais quand
   le JavaScript est coupé. */
html.plie-attente .replier[open] > :not(summary) { display: none; }

@media (max-width: 700px) {

  /* ---------- le bouton du dépliant ---------- */
  .replier { margin-top: var(--e3); }
  .replier > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e2);
    min-height: 48px;                 /* zone tactile confortable */
    padding: 12px 0;
    border-top: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait);
    font-size: var(--t-petit); font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    list-style: none;                 /* on dessine notre propre signe */
  }
  .replier > summary::-webkit-details-marker { display: none; }
  .sombre .replier > summary {
    color: var(--blanc);
    border-top-color: var(--trait-sombre);
    border-bottom-color: var(--trait-sombre);
  }

  /* le signe « plus », qui devient « moins » une fois ouvert.
     Deux traits en dégradé : ni image, ni emoji, ni police. */
  .replier > summary::after {
    content: ""; flex: 0 0 auto; width: 13px; height: 13px;
    background:
      linear-gradient(var(--encre-2), var(--encre-2)) center / 13px 1.5px no-repeat,
      linear-gradient(var(--encre-2), var(--encre-2)) center / 1.5px 13px no-repeat;
    transition: background-size 0.25s var(--courbe);
  }
  .replier[open] > summary::after { background-size: 13px 1.5px, 1.5px 0; }
  .sombre .replier > summary::after {
    background-image:
      linear-gradient(var(--blanc-2), var(--blanc-2)),
      linear-gradient(var(--blanc-2), var(--blanc-2));
  }

  /* le premier bloc déplié se colle au bouton : les grandes marges
     d'origine (jusqu'à 96 px) n'ont plus de sens ici */
  .mrc .replier > summary + *,
  .vitrine .replier > summary + * { margin-top: var(--e3); }

  /* ---------- 12.2 LA RESPIRATION ----------
     96 px au-dessus ET au-dessous de chaque section, c'était le
     rythme d'un grand écran. Sur téléphone : 64 px pour les
     sections « vitrine », 40 px pour le chapitre de données, qui
     se lit d'une traite. */
  section, .cta-bandeau, footer { padding: var(--e4) var(--e3); }

  .hero-v2 {
    min-height: min(88svh, 640px);
    padding: calc(var(--e4) + var(--e4)) var(--e3) var(--e4);
  }
  .manifeste-mix { min-height: min(72svh, 560px); }

  /* les titres et chapeaux du chapitre de données : un cran plus
     serrés, le contraste reste celui de la charte */
  .mrc h2 { font-size: 1.5rem; }
  .mrc .intro-section { margin-top: var(--e2); font-size: var(--t-base); }
  .mrc-conclu { margin-top: var(--e3); font-size: var(--t-base); }

  /* ---------- 12.3 LES CHIFFRES CLÉS : DEUX PAR DEUX ---------- */
  .chiffres { grid-template-columns: 1fr 1fr; gap: var(--e1); margin-top: var(--e4); }
  .chiffre { padding: var(--e3) var(--e2); }
  .chiffre .valeur { font-size: 1.75rem; }
  .chiffre .legende { line-height: 1.4; }

  /* ---------- 12.4 LES TROIS GAMMES : UN RAIL QUI GLISSE ----------
     Empilées, elles prenaient un écran et demi chacune. Elles sont
     désormais côte à côte dans un rail qu'on fait glisser du doigt,
     la carte suivante dépassant volontairement du bord : on voit
     tout de suite qu'il y en a d'autres. Les trois sont là. */
  .gammes {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: var(--e2);
    margin: var(--e4) calc(-1 * var(--e3)) 0;
    padding: 2px var(--e3) var(--e2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--e3);
    scrollbar-width: none;
  }
  .gammes::-webkit-scrollbar { display: none; }
  .gamme {
    scroll-snap-align: start;
    padding: var(--e3);
  }
  .gamme img { height: 50px; width: auto; object-fit: contain; }
  .gamme .lien { padding-top: var(--e2); }

  /* ---------- 12.5 LES GRAPHIQUES, PLUS DENSES ----------
     Mêmes chiffres, mêmes repères : seules les hauteurs baissent. */
  .mrc-mix-corps { margin-top: var(--e4); gap: var(--e4); }
  .mrc-enorme-valeur { font-size: 3.1rem; }
  .mrc-enorme-legende { margin-top: var(--e2); font-size: var(--t-base); }
  .mrc-pile-barre { height: 46px; }

  .mrc-reseau-haut { gap: var(--e4); }
  .mrc-colonnes { height: 144px; margin-bottom: var(--e4); }
  .mrc-col-val { margin-bottom: 6px; }

  .mrc-regions { margin-top: var(--e4); }
  .mrc-region { padding: 12px 0; gap: 6px; }
  .mrc-region-rail { height: 12px; }
  .mrc-region-sec { margin-top: 2px; }

  .mrc-frise { margin-top: var(--e4); }
  .mrc-frise-mois .m { height: 40px; }

  .mrc-prix-haut { gap: var(--e4); }
  .mrc-marches { height: 130px; }

  .mrc-soleil-haut { gap: var(--e4); }
  .mrc-releves { margin-top: var(--e4); }
  .mrc-releve-tete, .mrc-releve { padding: 9px 0; }
  .mrc-soleil-notes, .mrc-notes { gap: var(--e3); }

  .mrc-courbe { margin-top: var(--e4); }
  .mrc-echelle { gap: var(--e3); }

  /* ---------- 12.6 LES DEUX VITRINES PRODUIT ---------- */
  .vitrine { gap: var(--e4); }
  .vitrine .visuel { aspect-ratio: 16 / 10; }
  .vitrine ul { margin-bottom: var(--e3); }

  /* ---------- 12.7 LE PIED DE PAGE ----------
     Les cinq liens de navigation passent sur deux colonnes : trois
     rangées au lieu de cinq, et chaque lien gagne au passage une
     vraie zone tactile de 44 px de haut. */
  .footer-grille { gap: var(--e3); }
  .footer-nav a, .footer-contact a {
    display: flex; align-items: center;
    width: auto; max-width: none;
    min-height: 44px; padding: 0;
  }
  /* le liseré doré au survol n'a pas de sens au doigt, et il se
     décollerait du texte dans une zone tactile de 44 px */
  .footer-nav a::after, .footer-contact a::after { display: none; }
  .footer-nav h4, .footer-contact h4 { margin-bottom: var(--e1); }
  .footer-bas { margin-top: var(--e3); }
}

/* la liste de navigation du pied de page, en deux colonnes */
@media (max-width: 700px) {
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e3);
  }
  .footer-nav h4 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   12.8 LE REPÈRE DE LECTURE
   ------------------------------------------------------------
   Un filet doré de 2 px tout en haut de l'écran, qui avance avec
   le défilement : il répond au « on s'y perd » sans ajouter un
   menu de plus. Il est piloté par la CSS SEULE
   (animation-timeline: scroll) — donc aucun écouteur de
   défilement, aucune lecture de géométrie, aucune saccade.
   Là où le navigateur ne connaît pas cette propriété, le filet
   ne s'affiche pas du tout : rien ne casse.
   ------------------------------------------------------------ */
.pv-progres { display: none; }

@keyframes pv-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 700px) {
  @supports (animation-timeline: scroll()) {
    .pv-progres {
      display: block;
      position: fixed; top: 0; left: 0; right: 0; z-index: 99;
      height: 2px; pointer-events: none;
      background: rgba(16, 17, 20, 0.07);
    }
    .pv-progres i {
      display: block; height: 100%; width: 100%;
      background: var(--or);
      transform: scaleX(0); transform-origin: left;
      animation: pv-avance linear both;
      animation-timeline: scroll(root block);
    }
  }
}