/* Observatoire Core Group — structure prête pour les séries validées. */
body[data-page="observatoire"] .obs-hero{min-height:clamp(35rem,66svh,50rem)}
/* V1.12 — note honnête tant que la matrice annuelle n'est pas rapprochée. */
body[data-page="observatoire"] .top-table-note{padding:clamp(1.4rem,3vw,2.2rem);text-align:center;color:var(--grey);font-weight:300;line-height:1.7;font-size:clamp(.92rem,1.2vw,1.02rem)}
body[data-page="observatoire"] .obs-manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);align-items:start;padding-bottom:clamp(4rem,8vw,7rem)}
body[data-page="observatoire"] .obs-copy{display:grid;gap:1.2rem;color:var(--grey);font-size:clamp(1rem,1.4vw,1.17rem);font-weight:300;line-height:1.85}
body[data-page="observatoire"] .obs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
body[data-page="observatoire"] .obs-kpis>div{padding:clamp(2rem,4vw,3.8rem) 1rem;text-align:center;background:var(--bg-soft)}
body[data-page="observatoire"] .obs-kpis strong{display:block;color:var(--gold);font:200 clamp(2.5rem,5vw,4.5rem)/1 var(--display)}
body[data-page="observatoire"] .obs-kpis span{display:block;margin-top:.8rem;color:var(--grey);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
body[data-page="observatoire"] .obs-filters{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:2rem}
body[data-page="observatoire"] .obs-filter{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--grey);padding:.62rem 1rem;cursor:pointer;font-size:.76rem;font-weight:600;transition:.3s var(--ease)}
body[data-page="observatoire"] .obs-filter:hover{border-color:rgba(255,213,98,.5);color:#fff}
body[data-page="observatoire"] .obs-filter.active{background:var(--gold);border-color:var(--gold);color:#151006;box-shadow:0 9px 28px rgba(255,213,98,.2)}
body[data-page="observatoire"] .data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
body[data-page="observatoire"] .data-card{position:relative;min-height:260px;border:1px solid var(--line);border-radius:22px;padding:clamp(1.4rem,2.7vw,2.2rem);background:linear-gradient(150deg,rgba(255,213,98,.055),rgba(255,255,255,.025) 48%,rgba(0,0,0,.3));display:flex;flex-direction:column}
body[data-page="observatoire"] .data-card[hidden]{display:none}
body[data-page="observatoire"] .data-index{color:var(--gold);font-size:.68rem;letter-spacing:.18em}
body[data-page="observatoire"] .data-card h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:.9rem 0 .7rem}
body[data-page="observatoire"] .data-card p{color:var(--grey);font-size:.9rem;font-weight:300;line-height:1.7}
body[data-page="observatoire"] .data-card small{margin-top:auto;padding-top:1.2rem;color:var(--grey-2);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}
body[data-page="observatoire"] .top-section{background:var(--bg-soft)}
body[data-page="observatoire"] .top-table-wrap{margin-top:2.4rem;overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:#0b0b0e}
body[data-page="observatoire"] .top-table{width:100%;min-width:820px;border-collapse:collapse;text-align:left}
body[data-page="observatoire"] .top-table th,body[data-page="observatoire"] .top-table td{padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
body[data-page="observatoire"] .top-table thead th{color:var(--grey-2);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase}
body[data-page="observatoire"] .top-table tbody th{color:var(--gold);font:600 1rem var(--display)}
body[data-page="observatoire"] .top-table td{color:var(--grey);font-size:.84rem}
body[data-page="observatoire"] .top-table td span{display:inline-flex;border:1px solid rgba(255,213,98,.22);border-radius:999px;padding:.25rem .6rem;color:#d9c68f;font-size:.65rem}
body[data-page="observatoire"] .method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.3rem}
body[data-page="observatoire"] .method-steps>div{border-top:1px solid rgba(255,213,98,.4);padding:1.3rem 0}
body[data-page="observatoire"] .method-steps span{color:var(--gold);font-size:.68rem;letter-spacing:.15em}
body[data-page="observatoire"] .method-steps h3{margin:.6rem 0;font-size:1.1rem}
body[data-page="observatoire"] .method-steps p{color:var(--grey);font-size:.86rem;font-weight:300;line-height:1.7}
@media(max-width:960px){body[data-page="observatoire"] .obs-manifesto{grid-template-columns:1fr}body[data-page="observatoire"] .data-grid{grid-template-columns:1fr 1fr}body[data-page="observatoire"] .method-steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){body[data-page="observatoire"] .obs-kpis{grid-template-columns:1fr 1fr}body[data-page="observatoire"] .data-grid,body[data-page="observatoire"] .method-steps{grid-template-columns:1fr}}

/* V1.16.2 — composition du héros vidéo : la fontaine Bartholdi reste entière,
   le texte tient sa colonne (retours Guillaume). Chrome + Safari : standard. */
@media (min-width:901px){
  body[data-page="observatoire"] .obs-hero h1{max-width:12ch;font-size:clamp(2.8rem,5.6vw,5.2rem)}
  body[data-page="observatoire"] .obs-hero p{max-width:46ch}
}
@media (max-height:520px) and (orientation:landscape){
  body[data-page="observatoire"] .page-hero.obs-hero{min-height:88svh;padding-top:4.2rem;padding-bottom:1.4rem}
  body[data-page="observatoire"] .obs-hero h1{font-size:clamp(1.7rem,7.5vh,2.4rem);max-width:15ch}
  body[data-page="observatoire"] .obs-hero p{max-width:56ch;font-size:.9rem;margin-top:.8rem}
  body[data-page="observatoire"] .obs-hero .eyebrow{margin-bottom:.6rem}
}

/* V1.16.8 — voile de lisibilité, léger et localisé, derrière « L'Observatoire Core Group » :
   renforce doucement le dégradé existant côté texte (gauche + centre), sans écraser la
   fontaine (droite inchangée), sans toucher la colorimétrie (noir pur, statique). */
/* V1.16.11 — cadrage du héros vidéo sur téléphone en portrait.

   Constat de départ : le conteneur y est portrait (~0,70) alors que la vidéo
   est en 16:9. Avec object-fit:cover la hauteur se cale exactement et TOUT le
   recadrage se fait horizontalement — la composante verticale d'object-position
   est donc inopérante, quelle que soit sa valeur. Il ne restait que 39,4 % de la
   largeur source : buste dominant, fontaine amputée de ses chevaux.

   Le visuel reste au ras du haut de l'écran, sous une barre de navigation
   transparente, exactement comme le héros de l'accueil : aucune bande noire
   n'est introduite au-dessus. Seule la HAUTEUR du média change — format carré,
   donc déterministe (= largeur de l'écran) — ce qui desserre le recadrage
   horizontal de 39,4 % à 56,3 % de la largeur source. La fontaine est vue
   entière, la statue est vue entière, et le bâtiment reste visible au-dessus
   d'elle.

   La parallaxe est neutralisée ici (--parallax-scale:1, --parallax-y:0). Deux
   raisons. D'abord elle agrandissait le média de 9 %, ce qui le faisait déborder
   de 18px vers le haut et rognait la tête de la statue. Ensuite `scale` est une
   propriété de transformation posée sur .bgimg, parent direct de la vidéo :
   la neutraliser va dans le sens du correctif de compositing iOS V1.16.9, qui
   visait précisément les transformations sur un ancêtre de la vidéo.

   Aucun filter, aucun transform ajouté. Desktop, paysage, tablette, seuil 641px
   et Dossiers : rendu identique au pixel près. */
@media (max-width:640px) and (orientation:portrait){
  /* Arbitrage tranché par Guillaume : plein cadre, comme le héros de l'accueil.
     La couronne de la statue est à 1,1 % de la hauteur source ; aucun réglage ne
     peut donc lui donner de l'air sans décaler le média vers le bas, ce qui
     recréerait une zone sombre. Le média part donc du bord haut et la navigation
     se pose dessus, exactement comme elle se pose sur le bâtiment de l'accueil.
     Aucun masque, aucun filtre, aucune transformation sur .bgimg : c'est le
     parent direct de la vidéo, et le correctif de compositing iOS V1.16.9
     interdit d'y toucher. */
  body[data-page="observatoire"] .obs-hero>.bgimg{
    /* HAUTEUR EN VW, PAS EN ASPECT-RATIO. .page-hero .bgimg est en
       position:absolute avec inset:0 ; WebKit ne derive pas fiablement la
       hauteur d'un element absolu depuis aspect-ratio quand height:auto et
       bottom:auto : la hauteur s'effondre a zero, le media disparait et il ne
       reste que le voile sombre du heros. Chromium l'honore, Safari iOS non.
       75vw = ratio 4/3 sur un element pleine largeur, deterministe partout. */
    top:0;height:75vw;bottom:auto;
    /* Neutralisation REELLE de la parallaxe : les variables ne suffisent pas,
       --parallax-scale:1 laisse un scale d'identite qui cree un contexte de
       composition sur le parent de la video. Voir 10-components. */
    translate:none;scale:none
  }
  /* Fondu du bas : le plan se dissout sous le titre, aucun bord franc. */
  body[data-page="observatoire"] .obs-hero>.bgimg::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:20%;
    background:linear-gradient(to bottom,rgba(0,0,0,0),#000);pointer-events:none
  }
  /* Cadrage ancré en haut : la couronne de la statue est à 1,1 % de la source,
     on la garde donc entière et on laisse l'architecture tenir le fond. */
  body[data-page="observatoire"] .obs-hero .bg-video{object-position:50% 0%}
  body[data-page="observatoire"] .obs-hero .bgimg{background-position:50% 0%}
  /* Héros plus haut et plus calme : le texte occupe le tiers bas, sur le noir,
     avec de l'espace négatif réel entre le plan et le titre. */
  body[data-page="observatoire"] .obs-hero{
    padding-top:calc(75vw + 2.2rem);
    padding-bottom:3.4rem;
    min-height:calc(75vw + 22rem)
  }
  /* Le logo se posant désormais sur la statue, le haut du voile est renforcé
     pour garantir sa lisibilité — même principe qu'à l'accueil. Le voile est
     porté par .obs-hero::after, qui n'est PAS un ancêtre de la vidéo : le
     compositing iOS reste intact. */
  body[data-page="observatoire"] .obs-hero:has(.bg-video)::after{
    background:
      linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),
      linear-gradient(180deg,rgba(0,0,0,.3),transparent 14%,transparent 40%,rgba(0,0,0,.88) 100%)!important
  }
  body[data-page="observatoire"] .obs-hero .eyebrow{
    font-size:.62rem;letter-spacing:.2em;opacity:.78
  }
  body[data-page="observatoire"] .obs-hero h1{
    font-size:clamp(2.5rem,13vw,3.6rem);line-height:.98;letter-spacing:-.015em
  }
  /* Accroche courte : une seule ligne de sens, le détail vit sous le héros. */
  body[data-page="observatoire"] .obs-hero .obs-lead{
    max-width:19ch;margin-top:1.15rem;font-size:1.02rem;line-height:1.6;
    color:var(--grey);font-weight:300
  }
}

/* V1.16.9 — première couche plate rgba(0,0,0,.13) : compense le retrait du
   filtre brightness(.86) du parent vidéo, qui figeait le calque sur Safari iOS
   (même densité perçue qu'en V1.16.8, voir 10-components). */
body[data-page="observatoire"] .obs-hero:has(.bg-video)::after{
  background:
    linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),
    linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.24) 58%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(0,0,0,.26),transparent 34%,rgba(0,0,0,.86) 100%)!important
}