/* ══════════════════════════════════════════════════════════════
   Démonstrateur Metrika — feuille de style
   Charte reprise de metrika.fr : Space Grotesk / Inter, bleu #1C4FD1
   ══════════════════════════════════════════════════════════════ */

:root{
  --bleu:#1C4FD1; --bleu-fonce:#15399B; --bleu-clair:#4A73DD;
  --bleu-voile:#EEF3FF; --bleu-bordure:#D6E1FF;
  --encre:#17211F; --gris:#5E6B68; --gris-fonce:#3A4643;
  --fond:#FCFBF9; --surface:#fff;
  --bordure:#DCE4E1; --bordure-claire:#EEF3F1;
  --violet:#7A3FD4; --magenta:#C13BC0; --vert:#0E7C5A; --vert-voile:#E9F7F1;
  --rayon:14px; --rayon-l:20px;
  --largeur:1180px;
  --ombre:0 1px 2px rgba(23,33,31,.04), 0 8px 24px -12px rgba(23,33,31,.10);
  --ombre-forte:0 2px 4px rgba(23,33,31,.06), 0 18px 40px -16px rgba(28,79,209,.22);
  --transition:.42s cubic-bezier(.22,.68,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; line-height:1.14; margin:0; letter-spacing:-.02em}
a{color:var(--bleu); text-decoration:none}
a:hover{text-decoration:underline}
.conteneur{max-width:var(--largeur); margin:0 auto; padding:0 24px}

/* ─────────── en-tête ─────────── */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordure-claire);
}
.barre{display:flex; align-items:center; justify-content:space-between;
       height:70px; gap:16px; flex-wrap:wrap}
.identite{display:flex; align-items:center; gap:12px}
.marque{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.28rem; color:var(--encre)}
.marque:hover{text-decoration:none}
.marque span{color:var(--bleu)}
.etiquette{
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bleu); background:var(--bleu-voile); border:1px solid var(--bleu-bordure);
  padding:4px 10px; border-radius:999px;
}
nav{display:flex; align-items:center; gap:26px}
nav a{color:var(--gris); font-size:.93rem; font-weight:500; position:relative}
nav a:hover{color:var(--bleu); text-decoration:none}
nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--bleu); border-radius:2px; transition:width var(--transition);
}
nav a:hover::after{width:100%}
.lien-doc{
  color:var(--bleu)!important; border:1px solid var(--bleu-bordure);
  background:var(--bleu-voile); padding:7px 14px; border-radius:999px; font-weight:600;
}
.lien-doc::after{display:none}
.lien-doc:hover{background:var(--bleu); color:#fff!important; border-color:var(--bleu)}

/* ─────────── accroche ─────────── */
.accroche{position:relative; overflow:hidden; padding:84px 0 64px}
.grille-fond{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--bordure-claire) 1px, transparent 1px),
    linear-gradient(90deg, var(--bordure-claire) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  animation:derive 34s linear infinite;
}
@keyframes derive{to{background-position:56px 56px, 56px 56px}}
.accroche .conteneur{position:relative}

.pastille-live{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.79rem; font-weight:600; letter-spacing:.02em;
  color:var(--vert); background:var(--vert-voile); border:1px solid #C6E9DA;
  padding:6px 14px; border-radius:999px; margin-bottom:26px;
}
.point{
  width:8px; height:8px; border-radius:50%; background:var(--vert); position:relative; flex:none;
}
.point::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--vert); animation:pulsation 2s ease-out infinite;
}
@keyframes pulsation{
  0%{transform:scale(1); opacity:.7}
  100%{transform:scale(3.4); opacity:0}
}

h1{font-size:clamp(2.1rem,5vw,3.5rem); max-width:17ch}
h1 em{font-style:normal; color:var(--bleu)}
h1 .ligne{
  display:block; opacity:0; transform:translateY(18px);
  animation:apparition .8s cubic-bezier(.22,.68,.36,1) forwards;
}
h1 .ligne:nth-child(1){animation-delay:.05s}
h1 .ligne:nth-child(2){animation-delay:.16s}
h1 .ligne:nth-child(3){animation-delay:.27s}
@keyframes apparition{to{opacity:1; transform:none}}

.chapo{
  font-size:1.13rem; color:var(--gris-fonce); max-width:64ch; margin-top:22px;
  opacity:0; animation:apparition .8s .42s cubic-bezier(.22,.68,.36,1) forwards;
}

/* ─────────── indicateurs ─────────── */
.indicateurs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:44px;
}
.indicateur{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:20px 22px; box-shadow:var(--ombre);
  opacity:0; transform:translateY(14px);
  animation:apparition .7s cubic-bezier(.22,.68,.36,1) forwards;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.indicateur:nth-child(1){animation-delay:.55s}
.indicateur:nth-child(2){animation-delay:.64s}
.indicateur:nth-child(3){animation-delay:.73s}
.indicateur:nth-child(4){animation-delay:.82s}
.indicateur:hover{transform:translateY(-4px); box-shadow:var(--ombre-forte); border-color:var(--bleu-bordure)}
.indicateur b{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.85rem; color:var(--encre); font-variant-numeric:tabular-nums; line-height:1.1;
}
.indicateur .libelle{font-size:.84rem; color:var(--gris); display:block; margin-top:5px}
.mention-requete{
  font-size:.79rem; color:var(--gris); margin-top:14px;
  opacity:0; animation:apparition .7s .95s forwards;
}

/* ─────────── sections ─────────── */
section{padding:64px 0; border-top:1px solid var(--bordure-claire)}
.titre-section{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.titre-section h2{font-size:1.85rem}
.source{
  font-size:.73rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--bordure);
  color:var(--gris); background:var(--surface);
}
.source.reel{color:var(--vert); background:var(--vert-voile); border-color:#C6E9DA}
.intro{color:var(--gris-fonce); max-width:74ch; margin:0 0 30px}

/* révélation au défilement */
.revele{opacity:0; transform:translateY(22px); transition:opacity .7s, transform .7s}
.revele.visible{opacity:1; transform:none}

/* ─────────── pipeline interactif ─────────── */
.pipeline{display:flex; align-items:stretch; gap:6px; flex-wrap:wrap}
.etape{
  flex:1 1 150px; text-align:left; cursor:pointer; font:inherit;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:16px 18px; transition:all var(--transition); position:relative; overflow:hidden;
}
.etape::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--bleu); transform:scaleY(0); transform-origin:top;
  transition:transform var(--transition);
}
.etape:hover{border-color:var(--bleu-bordure); transform:translateY(-3px); box-shadow:var(--ombre)}
.etape.active{border-color:var(--bleu); box-shadow:var(--ombre-forte)}
.etape.active::before{transform:scaleY(1)}
.etape .rang{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:.72rem; color:var(--bleu); letter-spacing:.1em;
}
.etape .nom{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.06rem; margin-top:5px; color:var(--encre);
}
.etape .outil{display:block; font-size:.82rem; color:var(--gris); margin-top:2px}

.fleche{display:flex; align-items:center; width:22px; flex:none}
.fleche i{
  display:block; width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--bordure) 0 50%, transparent 50%);
  background-size:8px 2px; position:relative;
}
.fleche i::after{
  content:''; position:absolute; top:-2.5px; left:0;
  width:7px; height:7px; border-radius:50%; background:var(--bleu);
  animation:circulation 2.6s linear infinite;
}
.fleche:nth-of-type(2) i::after{animation-delay:.3s}
.fleche:nth-of-type(3) i::after{animation-delay:.6s}
.fleche:nth-of-type(4) i::after{animation-delay:.9s}
@keyframes circulation{
  0%{left:-8px; opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{left:100%; opacity:0}
}

.detail-etape{
  margin-top:18px; background:var(--surface); border:1px solid var(--bordure);
  border-radius:var(--rayon-l); padding:26px 28px; box-shadow:var(--ombre);
}
.detail-etape h3{font-size:1.2rem; margin-bottom:8px}
.detail-etape p{margin:0 0 16px; color:var(--gris-fonce); max-width:72ch}
.detail-chiffres{display:flex; gap:28px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--bordure-claire)}
.detail-chiffres div b{
  display:block; font-family:'Space Grotesk',sans-serif; font-size:1.25rem;
  font-variant-numeric:tabular-nums;
}
.detail-chiffres div span{font-size:.8rem; color:var(--gris)}
.jeton{
  display:inline-block; font-size:.76rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bleu-voile); color:var(--bleu-fonce); border:1px solid var(--bleu-bordure);
  padding:2px 8px; border-radius:6px; margin-right:6px;
}

/* ─────────── graphiques ─────────── */
.grille-graphiques{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px}
.carte-graphique{
  margin:0; background:var(--surface); border:1px solid var(--bordure);
  border-radius:var(--rayon-l); padding:22px 24px 16px; box-shadow:var(--ombre);
}
.carte-graphique figcaption{margin-bottom:16px}
.carte-graphique h3{font-size:1.02rem}
.carte-graphique figcaption span{font-size:.82rem; color:var(--gris)}
.zone-graphique{min-height:210px; display:flex; align-items:center; justify-content:center}
.zone-graphique svg{width:100%; height:auto; display:block; overflow:visible}
.attente{color:var(--gris); font-size:.88rem}
.aire{opacity:0; animation:apparition .9s .1s forwards}
.trace{
  fill:none; stroke:var(--bleu); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--longueur); stroke-dashoffset:var(--longueur);
  animation:tracer 1.5s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}
.point-serie{opacity:0; animation:apparition .4s forwards}
.barre-fond{fill:var(--bordure-claire)}
/* transform-box: fill-box est indispensable en SVG — sans lui,
   transform-origin se calcule par rapport au repère du SVG entier et non
   par rapport au rectangle, ce qui fait partir l'animation en diagonale
   hors du graphique. */
.barre{
  fill:var(--bleu); transform-box:fill-box; transform-origin:left center;
  transform:scaleX(0); animation:remplir .9s cubic-bezier(.22,.68,.36,1) forwards;
}
@keyframes remplir{to{transform:scaleX(1)}}
.etiq-barre{font-size:12px; fill:var(--gris-fonce); font-weight:500}
.val-barre{font-size:12px; fill:var(--encre); font-weight:600; font-variant-numeric:tabular-nums}
.axe{font-size:11px; fill:var(--gris)}
.infobulle{
  position:fixed; pointer-events:none; z-index:100; opacity:0; transition:opacity .15s;
  background:var(--encre); color:#fff; font-size:.78rem; font-weight:500;
  padding:6px 10px; border-radius:8px; white-space:nowrap; transform:translate(-50%,-140%);
}
.infobulle.visible{opacity:1}

/* ─────────── onglets ─────────── */
.onglets{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.onglet{
  font:inherit; cursor:pointer; text-align:left;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:12px 18px; font-weight:600; color:var(--gris-fonce);
  transition:all var(--transition);
}
.onglet em{display:block; font-style:normal; font-size:.74rem; font-weight:500; color:var(--gris); margin-top:2px}
.onglet em.reel{color:var(--vert)}
.onglet:hover{border-color:var(--bleu-bordure); color:var(--encre)}
.onglet.actif{background:var(--bleu); border-color:var(--bleu); color:#fff; box-shadow:var(--ombre-forte)}
.onglet.actif em, .onglet.actif em.reel{color:rgba(255,255,255,.78)}

.panneau{display:none}
.panneau.actif{display:block; animation:apparition .5s forwards}
.legende-panneau{color:var(--gris-fonce); max-width:74ch; margin:0 0 18px; font-size:.96rem}
.cadre{
  border:1px solid var(--bordure); border-radius:var(--rayon-l); overflow:hidden;
  background:var(--surface); box-shadow:var(--ombre); min-height:300px;
}
.cadre iframe{display:block; width:100%; border:0; background:var(--surface)}

/* ─────────── pile technique ─────────── */
.grille-outils{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.outil{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:20px 22px; transition:all var(--transition);
}
.outil:hover{transform:translateY(-4px); box-shadow:var(--ombre-forte); border-color:var(--bleu-bordure)}
.outil b{font-family:'Space Grotesk',sans-serif; font-size:1.02rem}
.outil .version{font-size:.77rem; color:var(--bleu); font-weight:600; margin-left:7px}
.outil p{margin:7px 0 0; font-size:.87rem; color:var(--gris)}

/* ─────────── pied ─────────── */
footer{border-top:1px solid var(--bordure-claire); background:var(--surface); padding:44px 0}
.pied{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; font-size:.9rem; color:var(--gris)}
.mention{font-size:.84rem}

/* ─────────── adaptatif ─────────── */
@media (max-width:900px){
  nav a:not(.lien-doc){display:none}
  /* Sans passage à la ligne, la pastille « Documentation » débordait de
     l'écran : la barre ne se contractait pas sous 430 px. */
  .barre{height:auto; min-height:64px; padding:10px 0; row-gap:10px}
  .fleche{display:none}
  .etape{flex:1 1 140px}
}
@media (max-width:640px){
  .etiquette{display:none}
  .accroche{padding:54px 0 44px}
  section{padding:48px 0}
}

/* Respect du réglage système « animations réduites » */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  h1 .ligne,.chapo,.indicateur,.mention-requete,.aire,.point-serie{opacity:1!important; transform:none!important}
  .trace{stroke-dashoffset:0!important}
  .barre{transform:none!important}
  .revele{opacity:1!important; transform:none!important}
  html{scroll-behavior:auto}
}

/* ══════════════ galerie de restitutions ══════════════ */
.galerie{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.vignette{
  position:relative; display:flex; flex-direction:column; cursor:pointer;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon-l);
  overflow:hidden; box-shadow:var(--ombre); transition:all var(--transition);
}
.vignette:hover{transform:translateY(-5px); box-shadow:var(--ombre-forte); border-color:var(--bleu-bordure)}
.vignette:focus-visible{outline:3px solid var(--bleu); outline-offset:3px}

/* Aperçu graphique en CSS pur : évocateur, sans image à charger */
.vignette-visuel{height:112px; position:relative; overflow:hidden; background:var(--bleu-voile)}
.vignette-visuel::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--bleu-bordure) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bleu-bordure) 1px,transparent 1px);
  background-size:22px 22px; opacity:.55;
}
.vignette-visuel::after{content:''; position:absolute; inset:0}
[data-motif="commerce"]::after{
  background:
    linear-gradient(to top,rgba(28,79,209,.20),transparent),
    conic-gradient(from 180deg at 22% 100%, var(--bleu) 0 25%, transparent 0);
  clip-path:polygon(0 78%,14% 62%,28% 68%,42% 44%,56% 52%,70% 26%,84% 34%,100% 12%,100% 100%,0 100%);
  background-color:rgba(28,79,209,.20);
}
[data-motif="finance"]::after{
  background:repeating-linear-gradient(90deg,var(--bleu) 0 15px,transparent 15px 30px);
  clip-path:polygon(0 100%,0 62%,15px 62%,15px 100%,30px 100%,30px 40%,45px 40%,45px 100%,
                    60px 100%,60px 70%,75px 70%,75px 100%,90px 100%,90px 25%,105px 25%,105px 100%,
                    120px 100%,120px 52%,135px 52%,135px 100%,150px 100%,150px 34%,165px 34%,165px 100%);
  opacity:.75;
}
[data-motif="support"]::after{
  background:radial-gradient(circle at 30% 45%,var(--violet) 0 16px,transparent 17px),
             radial-gradient(circle at 58% 62%,var(--bleu) 0 24px,transparent 25px),
             radial-gradient(circle at 80% 38%,var(--magenta) 0 13px,transparent 14px);
  opacity:.55;
}
[data-motif="energie"]::after{
  background:
    linear-gradient(to top,var(--vert) 0 34%,transparent 34%),
    repeating-linear-gradient(90deg,rgba(14,124,90,.55) 0 9px,transparent 9px 16px);
  opacity:.5;
}
[data-motif="sur-mesure"]{background:linear-gradient(135deg,#15399B,#1C4FD1 45%,#7A3FD4)}
[data-motif="sur-mesure"]::before{opacity:.16}
[data-motif="sur-mesure"]::after{
  background:radial-gradient(circle at 26% 40%,rgba(255,255,255,.85) 0 5px,transparent 6px),
             radial-gradient(circle at 46% 66%,rgba(255,255,255,.65) 0 7px,transparent 8px),
             radial-gradient(circle at 68% 34%,rgba(255,255,255,.75) 0 6px,transparent 7px),
             radial-gradient(circle at 84% 58%,rgba(255,255,255,.5) 0 4px,transparent 5px);
}

.vignette-corps{padding:18px 20px 6px; flex:1}
.vignette-etiquette{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bleu); background:var(--bleu-voile);
  border:1px solid var(--bleu-bordure); padding:3px 9px; border-radius:999px; margin-bottom:10px;
}
.vignette-etiquette.reel{color:var(--vert); background:var(--vert-voile); border-color:#C6E9DA}
.vignette-etiquette.sur-mesure{color:var(--violet); background:#F3EDFC; border-color:#E0D0F7}
.vignette h3{font-size:1.08rem; margin-bottom:6px}
.vignette p{margin:0; font-size:.88rem; color:var(--gris); line-height:1.55}
.vignette-faits{list-style:none; display:flex; gap:18px; padding:0; margin:14px 0 0; flex-wrap:wrap}
.vignette-faits li{font-size:.79rem; color:var(--gris)}
.vignette-faits b{
  display:block; font-family:'Space Grotesk',sans-serif; font-size:1rem; color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.vignette-action{
  display:flex; align-items:center; gap:7px; padding:14px 20px 18px;
  font-size:.86rem; font-weight:600; color:var(--bleu);
}
.vignette-action i{font-style:normal; transition:transform var(--transition)}
.vignette:hover .vignette-action i{transform:translateX(5px)}

/* ══════════════ fenêtre modale ══════════════ */
.modale{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:rgba(23,33,31,.55); backdrop-filter:blur(6px);
  animation:fondu .25s ease forwards;
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.modale[hidden]{display:none}
.modale-tete{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--bordure);
}
.modale-tete h2{font-size:1.05rem}
.modale-actions{display:flex; align-items:center; gap:14px}
.modale-plein{font-size:.85rem; font-weight:600}
.modale-fermer{
  border:1px solid var(--bordure); background:var(--fond); color:var(--gris-fonce);
  width:34px; height:34px; border-radius:10px; font-size:1rem; line-height:1;
  transition:all var(--transition);
}
.modale-fermer:hover{background:var(--encre); color:#fff; border-color:var(--encre)}
.modale-corps{flex:1; background:var(--surface); overflow:hidden}
.modale-corps iframe{width:100%; height:100%; border:0; display:block}
.modale-chargement{
  height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--gris); font-size:.9rem; gap:10px;
}
.rotor{
  width:16px; height:16px; border:2px solid var(--bordure); border-top-color:var(--bleu);
  border-radius:50%; animation:rotation .7s linear infinite;
}
@keyframes rotation{to{transform:rotate(360deg)}}
body.modale-ouverte{overflow:hidden}