:root{
  --plan-trait:rgba(16,24,40,.07);
  --plan-trait-fort:rgba(16,24,40,.13);
  --plan-courbe:cubic-bezier(.22,1,.36,1);
  --plan-ressort:cubic-bezier(.34,1.3,.64,1);
}
[data-ambiance="sombre"]{
  --plan-trait:rgba(255,255,255,.05);
  --plan-trait-fort:rgba(255,255,255,.10);
}

.ciel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--plan-trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-trait) 1px, transparent 1px),
    linear-gradient(var(--plan-trait-fort) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-trait-fort) 1px, transparent 1px);
  background-size:20px 20px, 20px 20px, 100px 100px, 100px 100px;
  mask-image:radial-gradient(1200px 800px at 30% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(1200px 800px at 30% 0%, #000 40%, transparent 100%);
}

.panneau{background-image:var(--grain); background-blend-mode:multiply}
[data-ambiance="sombre"] .panneau{background-blend-mode:screen}
.panneau::after{
  content:""; position:absolute; inset:6px; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) left top / 10px 1px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) left top / 1px 10px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) right top / 10px 1px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) right top / 1px 10px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) left bottom / 10px 1px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--plan-trait-fort), var(--plan-trait-fort)) right bottom / 1px 10px no-repeat;
  opacity:0; transition:opacity var(--t-moyen);
}
.panneau:hover::after{opacity:1}
.panneau.plein::after{display:none}

.apparait{animation:plan-apparait .55s var(--plan-courbe) both}
@keyframes plan-apparait{from{opacity:0; transform:translateY(10px) scale(.992)}}
.bouton,.puce,.badge,.bt-item,.ligne.cliquable{transition:transform .18s var(--plan-ressort), box-shadow var(--t-moyen), background var(--t-moyen), color var(--t-moyen)}
.bouton:active,.puce:active,.bt-item:active{transform:scale(.97)}
.bouton.or:focus-visible{box-shadow:0 0 0 3px var(--or-lueur), 0 0 0 5px var(--or)}
.bt-spec,.ligne{transition:background var(--t-moyen)}
.bt-spec:hover{background:color-mix(in srgb, var(--texte) 7%, transparent)}
.jauge i{transition:width .8s var(--plan-courbe)}
svg[role="img"] path, svg[role="img"] rect, svg[role="img"] circle{transition:fill .35s var(--plan-courbe), stroke .35s var(--plan-courbe), x .35s, y .35s, width .35s, height .35s, cx .35s, cy .35s}

.panneau svg[role="img"]{animation:plan-trace .6s var(--plan-courbe) both}
@keyframes plan-trace{from{opacity:0; transform:translateY(4px)}}

.emo{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; vertical-align:middle; color:var(--or)}
.emo svg{width:100%; height:100%; stroke-width:1.6}
.badge .emo{display:inline-flex; vertical-align:-3px}
.emo.ok{color:var(--ok)} .emo.alerte{color:var(--alerte)} .emo.info{color:var(--info)} .emo.muet{color:var(--texte-3)}
.emo.vivant svg{animation:plan-souffle 3.2s ease-in-out infinite}
@keyframes plan-souffle{50%{transform:translateY(-1px) scale(1.04)}}

.vide{position:relative; overflow:hidden; border-style:solid; border-color:var(--plan-trait-fort)}
.vide .vide-plan{position:absolute; inset:0; opacity:.16; pointer-events:none; display:flex; align-items:center; justify-content:center}
.vide .vide-plan svg{width:min(260px, 80%); height:auto; margin:0; opacity:1}
.vide > svg, .vide > div{position:relative}

.vis-banniere{position:relative; overflow:hidden; border-radius:var(--r-l); padding:22px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  background:linear-gradient(120deg, color-mix(in srgb, var(--or) 18%, var(--fond-2)), var(--fond-2) 55%, color-mix(in srgb, var(--info) 10%, var(--fond-2))); box-shadow:var(--anneau)}
.vis-banniere::before{content:""; position:absolute; inset:0; background:var(--grain); opacity:.5; pointer-events:none}
.vis-banniere::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:1.5px dashed color-mix(in srgb, var(--or) 45%, transparent); animation:vis-tourne 40s linear infinite; pointer-events:none}
.vis-banniere-corps{display:flex; gap:14px; align-items:flex-start; min-width:0; position:relative}
.vis-banniere-corps h2{font-size:1.25rem; letter-spacing:-.02em}
.vis-banniere-ico{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:color-mix(in srgb, var(--or) 16%, transparent); color:var(--or); flex:none}
.vis-banniere-ico svg{width:24px; height:24px}
.vis-banniere-chiffres{display:flex; gap:10px; flex-wrap:wrap; position:relative}
.vis-chiffre{display:grid; gap:2px; padding:10px 14px; border-radius:12px; background:var(--fond-2); box-shadow:0 0 0 1px var(--filet); min-width:78px; animation:vis-monte .5s var(--courbe) both; animation-delay:calc(var(--i, 0) * 70ms)}
.vis-chiffre b{font:800 1.35rem/1 var(--titre); letter-spacing:-.03em}
.vis-chiffre span{font-size:11px; color:var(--texte-3); text-transform:uppercase; letter-spacing:.04em}
@media (max-width:760px){ .vis-banniere{grid-template-columns:1fr} }

.vis-entonnoir .vis-marche{transform-origin:50% 50%; animation:vis-marche .55s var(--courbe) both; animation-delay:calc(var(--i, 0) * 110ms)}
@keyframes vis-marche{from{opacity:0; transform:translateY(10px) scaleX(.92)}}
.vis-anneau .vis-arc{animation:vis-arc 1.1s var(--courbe) both}
@keyframes vis-arc{from{stroke-dashoffset:var(--c)}}
@keyframes vis-monte{from{opacity:0; transform:translateY(8px)}}
@keyframes vis-tourne{to{transform:rotate(360deg)}}

.vis-offre-bande{display:flex; align-items:center; gap:10px; margin:-4px 0 8px}
.vis-offre-trait{flex:1; height:3px; border-radius:99px; background:linear-gradient(90deg, var(--or), color-mix(in srgb, var(--or) 0%, transparent)); transform-origin:left; animation:vis-trait .8s var(--courbe) both}
@keyframes vis-trait{from{transform:scaleX(0)}}
.vis-offre-km{display:flex; align-items:center; gap:6px}
.vis-offre-canaux{display:flex; gap:4px}
.puce.petite{height:20px; font-size:11px; padding:0 7px}
.em-offre,.rec-carte,.panneau.serre .pile > *{animation:vis-monte .45s var(--courbe) both}
.em-offre:nth-child(n+2){animation-delay:60ms} .em-offre:nth-child(n+3){animation-delay:120ms} .em-offre:nth-child(n+4){animation-delay:180ms}
@media (prefers-reduced-motion:reduce){ .vis-banniere::after,.vis-marche,.vis-arc,.vis-chiffre,.vis-offre-trait,.em-offre{animation:none} }

.vis-banniere.avec-photo{min-height:150px}
.vis-banniere.avec-photo::before{background:var(--photo) center right / cover no-repeat; opacity:1; filter:saturate(.7) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg, transparent 44%, #000 72%); mask-image:linear-gradient(90deg, transparent 44%, #000 72%)}
.vis-banniere.avec-photo .vis-banniere-corps{max-width:56%}
.vis-banniere.avec-photo .vis-chiffre{box-shadow:0 0 0 1px var(--filet), 0 6px 18px -8px rgba(0,0,0,.5)}
[data-ambiance="sombre"] .vis-banniere.avec-photo::before{filter:saturate(.6) brightness(.75)}
.vis-banniere.avec-photo .vis-banniere-chiffres .vis-chiffre{backdrop-filter:blur(6px); background:color-mix(in srgb, var(--fond-2) 78%, transparent)}
@media (max-width:760px){ .vis-banniere.avec-photo::before{-webkit-mask-image:linear-gradient(180deg, transparent 45%, #000 85%); mask-image:linear-gradient(180deg, transparent 45%, #000 85%); background-position:center bottom} }

.vis-frise .vis-frise-fait{stroke-dasharray:var(--l); stroke-dashoffset:var(--l); animation:frise-trait 1s var(--courbe) .2s forwards}
@keyframes frise-trait{to{stroke-dashoffset:0}}
.vis-frise .vis-frise-voiture{animation:frise-voiture 1.1s var(--courbe) both}
@keyframes frise-voiture{from{transform:translate(28px, 26px); opacity:0}}
.vis-frise .vis-frise-actif{animation:frise-respire 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
@keyframes frise-respire{50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){ .vis-frise *{animation:none !important; stroke-dashoffset:0 !important} }
.vis-barres .vis-barre{transform-origin:left center; transform-box:fill-box; animation:vis-barre .7s var(--courbe) both; animation-delay:calc(var(--i, 0) * 90ms)}
@keyframes vis-barre{from{transform:scaleX(0)}}

.rec-col{--bande:var(--info)} .rec-col.entretien{--bande:var(--or)} .rec-col.retenue{--bande:var(--ok)} .rec-col.refusee{--bande:var(--alerte)}
.rec-col::before{content:""; position:absolute; left:14px; right:14px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--bande)}
.rec-col .entete h3{display:flex; align-items:center; gap:6px}

.role.avec-photo::after{content:""; position:absolute; right:-10%; top:-10%; width:62%; height:78%; pointer-events:none; z-index:0;
  background:var(--photo) center / cover no-repeat; opacity:.55; filter:saturate(.75);
  -webkit-mask-image:radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%);
  transition:opacity var(--t-moyen), transform var(--t-moyen) var(--courbe)}
.role.avec-photo:hover::after{opacity:.8; transform:scale(1.05)}
.role.avec-photo > :not(.fleche){position:relative; z-index:1}
.role.avec-photo > .fleche{z-index:1}
[data-ambiance="sombre"] .role.avec-photo::after{opacity:.4; filter:saturate(.6) brightness(.8)}