/* =====================================================================
   RÉALISATIONS, style v3 (24/09/2026)
   Règles propres aux deux pages de réalisations, chargées après shell.css
   et style.css, dont elles reprennent les variables (--fond, --surface,
   --ligne, --encre, --texte, --discret, --accent-a, --accent-b, --degrade,
   --accent-clair, --r) et les composants (v3-haut, v3-tete, v3-oeuvres,
   v3-chiffres, v3-inclus, v3-recap, v3-compris, pilules et boutons).
   - Liste /realisations : bandeau de filtres par métier, grille de cartes.
   - Étude de cas /realisations/{slug} (.rz) : ouverture, chiffres, blocs,
     animations de lecture posées par realisation.js (.js-anim).
   Les photos client sont souvent en portrait : la mise en page suit le
   format d'origine (--ar posé par la vue), jamais un bandeau recadré.
   ===================================================================== */

/* ---------- LISTE : filtres par métier (liens d'ancre, aucun script) ---------- */
.v3 .rz-filtres{border-bottom:1px solid var(--ligne); padding:18px 0; background:var(--fond)}
.v3 .rz-filtres__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px}
.v3 .rz-filtres__lab{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--discret)}
.v3 .rz-filtres__liste{margin:0}
/* La pastille entière se clique : le lien porte le rembourrage. */
.v3 .rz-filtres__liste li{padding:0; transition:border-color .2s, background .2s}
.v3 .rz-filtres__liste li:hover{border-color:var(--accent-clair); background:color-mix(in srgb,var(--accent-a) 28%,transparent)}
.v3 .rz-filtres__liste a{display:block; padding:7px 16px; border-radius:inherit; color:inherit; text-decoration:none}
.v3 .rz-filtres__liste a:focus-visible{outline:2px solid var(--accent-clair); outline-offset:3px}
.v3 .rz-groupe{scroll-margin-top:var(--header-h)}
/* H1 de la liste : la fin en italique se répartit en lignes égales sur téléphone
   (« qui parlent / pour nous ») au lieu de laisser un mot seul. */
.v3 .v3-haut__titre .v3-it{text-wrap:balance}

/* Tablette : trois cartes sur deux colonnes, la dernière prend la rangée entière
   (photo à gauche, texte à droite) au lieu de laisser une demi-rangée vide. */
@media (min-width:701px) and (max-width:980px){
  .v3 .rz-oeuvres > .v3-oeuvre:last-child:nth-child(odd){grid-column:1 / -1; flex-direction:row}
  .v3 .rz-oeuvres > .v3-oeuvre:last-child:nth-child(odd) .v3-oeuvre__media{flex:0 0 50%}
  .v3 .rz-oeuvres > .v3-oeuvre:last-child:nth-child(odd) .v3-oeuvre__corps{justify-content:center}
}

/* =====================================================================
   ÉTUDE DE CAS
   ===================================================================== */
.v3 .rz{position:relative}
.v3 .rz .v3-section{padding:clamp(56px,7.4vw,100px) 0}

/* ---------- Ouverture : texte à gauche, photo d'origine à droite ---------- */
.v3 .rz-haut{position:relative; isolation:isolate; padding:calc(var(--header-h) + clamp(16px,3vh,32px)) 0 clamp(56px,8vh,96px);
  background:radial-gradient(55% 65% at 88% 35%,var(--accent-doux),transparent 70%),
             radial-gradient(45% 55% at 0% 0%,color-mix(in srgb,var(--accent-b) 9%,transparent),transparent 70%)}
.v3 .rz-haut .v3-ariane{margin-bottom:clamp(22px,4vh,44px)}
.v3 .rz-haut .v3-ariane ol{justify-content:flex-start}
/* Titre d'étude long sur téléphone : la page courante se termine par des points de suspension au lieu d'être tranchée. */
.v3 .rz-haut .v3-ariane li:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
.v3 .rz-haut__grille{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.8fr); gap:clamp(34px,5vw,80px); align-items:center}
/* Photo d'ouverture en paysage : elle a besoin de largeur pour exister. */
.v3 .rz-haut__grille--large{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.v3 .rz-haut__titre{margin:0 0 22px; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4.3vw,62px);
  line-height:1.04; letter-spacing:-.035em; color:var(--encre); text-wrap:balance}
.v3 .rz-haut__chapo{margin:0; max-width:60ch; font-size:clamp(16.5px,1.3vw,19px); line-height:1.62; color:var(--texte)}

/* Fiche de l'événement, en colonnes fines séparées par un filet. Le filet est
   porté par TOUS les éléments, et la liste recalée d'autant vers la gauche :
   quand la ligne se casse, chaque début de ligne garde son filet. */
.v3 .rz-meta{list-style:none; margin:30px 0 0 calc(-1 * clamp(16px,1.6vw,26px)); padding:0; display:flex; flex-wrap:wrap; row-gap:18px}
.v3 .rz-meta li{display:flex; flex-direction:column; gap:5px; min-width:0; padding:0 clamp(16px,1.6vw,26px); border-left:1px solid var(--ligne)}
.v3 .rz-meta li > span{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--discret)}
.v3 .rz-meta b{font-size:15px; font-weight:600; line-height:1.35; color:var(--encre)}
/* La mention de confidentialité se lit, sans peser autant qu'un nom. */
.v3 .rz-meta .rz-meta__nc{font-family:var(--font-accent); font-style:italic; font-weight:400; font-size:17px; line-height:1.25; color:var(--texte)}

/* La photo tient dans l'écran : sa largeur suit la hauteur visible et son format. */
.v3 .rz-haut__media,.v3 .rz-split__media{position:relative; margin:0; aspect-ratio:var(--ar,.75); overflow:hidden;
  border-radius:var(--r); border:1px solid var(--ligne); background:var(--fond-2); box-shadow:0 34px 80px -44px rgba(0,0,0,.9)}
.v3 .rz-haut__media{justify-self:end; border-color:var(--ligne-accent);
  width:min(100%,max(280px,calc((100vh - var(--header-h) - 150px) * var(--ar,.75))));
  width:min(100%,max(280px,calc((100svh - var(--header-h) - 150px) * var(--ar,.75))))}
.v3 .rz-haut__media img,.v3 .rz-split__media img{display:block; width:100%; height:100%; object-fit:cover}

/* ---------- Chiffres clés, bande crème (composant v3-chiffres) ---------- */
.v3 .rz-bande{padding:clamp(34px,4.4vw,58px) 0}
.v3 .rz-stats .rz-stat__n{font-size:clamp(30px,3.4vw,46px)}
@media (min-width:981px){ .v3 .rz-stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))} }

/* ---------- Texte et photo ---------- */
.v3 .rz-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.78fr); gap:clamp(34px,5vw,84px); align-items:center}
.v3 .rz-split--rev{grid-template-columns:minmax(0,.78fr) minmax(0,1.1fr)}
.v3 .rz-split--rev .rz-split__txt{order:2}
.v3 .rz-split__txt .v3-h2{margin-bottom:24px}
.v3 .rz-split__txt .v3-texte:first-of-type{font-size:clamp(17px,1.4vw,19px); color:var(--encre)}
.v3 .rz-split__txt .v3-texte:last-child,.v3 .rz-fort__txt .v3-texte:last-child,.v3 .rz-txt .v3-texte:last-child{margin-bottom:0}
.v3 .rz-split__media{justify-self:center;
  width:min(100%,max(280px,calc((100vh - var(--header-h) - 120px) * var(--ar,.8))));
  width:min(100%,max(280px,calc((100svh - var(--header-h) - 120px) * var(--ar,.8))))}

/* ---------- Ce que nous avons fait : liste v3-compris, carte de ce qui a été mobilisé ----------
   Liste en grille de deux colonnes plutôt qu'en colonnes CSS : les filets de
   chaque rangée restent alignés d'une colonne à l'autre. */
.v3 .rz-do__list{columns:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px}
.v3 .rz-kit .rz-kit__list{margin:14px 0 0}
.v3 .rz-kit__list li{padding:0}
.v3 .rz-kit__list a{display:flex; flex:1; align-items:center; justify-content:space-between; gap:14px; padding:12px 0;
  font-weight:600; color:var(--encre); text-decoration:none; transition:color .2s}
.v3 .rz-kit__list a:hover{color:var(--accent-clair)}
.v3 .rz-kit__list svg{flex:none; color:var(--accent-clair); transition:transform .25s var(--ease)}
.v3 .rz-kit__list a:hover svg{transform:translateX(4px)}

/* ---------- Galerie et séquences vidéo ----------
   En portrait (rz-medias) : titre à gauche, médias à droite. En paysage, la
   vue pose un en-tête v3 au-dessus et les médias prennent toute la largeur. */
.v3 .rz-medias{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(28px,4vw,64px); align-items:start}
.v3 .rz-medias__tete{position:sticky; top:calc(var(--header-h) + 32px)}
.v3 .rz-medias__tete .v3-lede{margin-top:20px}
.v3 .rz-gal,.v3 .rz-vid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,22px)}
.v3 .rz-gal--2,.v3 .rz-vid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v3 .rz-gal__item,.v3 .rz-vid__item{position:relative; margin:0; overflow:hidden; border-radius:var(--r); border:1px solid var(--ligne); background:var(--fond-2)}
.v3 .rz-gal__item{aspect-ratio:var(--ar,.75)}
.v3 .rz-gal__item img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.v3 .rz-gal__item:hover img{transform:scale(1.04)}
/* L'affiche du <video> tient la place tant que rien n'est chargé (shell.js,
   data-ambient) : pas d'opacité nulle, sinon le bloc serait vide. */
.v3 .rz-vid__item{aspect-ratio:var(--ar,.5625)}
.v3 .rz-vid__item video{display:block; width:100%; height:100%; object-fit:cover}
.v3 .rz-vid__cap{position:absolute; inset:auto 0 0 0; padding:40px 18px 16px; font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(0deg,rgba(11,7,18,.9),transparent)}

/* ---------- Moment fort : titre à gauche, texte à droite, filet d'accent ---------- */
.v3 .rz-fort{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px clamp(32px,5vw,80px); align-items:start;
  padding:clamp(30px,4vw,60px) clamp(26px,4vw,64px) clamp(30px,4vw,60px) clamp(32px,4.4vw,72px);
  border-radius:var(--r); border:1px solid var(--ligne-accent);
  background:radial-gradient(120% 140% at 0% 0%,var(--accent-doux),transparent 60%),var(--surface)}
.v3 .rz-fort::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--degrade)}

/* ---------- Texte seul ---------- */
.v3 .rz-txt{max-width:78ch}
.v3 .rz-txt .v3-h2{margin-bottom:24px}

/* ---------- Renvois vers le catalogue ---------- */
.v3 .rz .rz-liens{padding:clamp(44px,5vw,72px) 0}
.v3 .rz-liens .v3-tete{margin-bottom:0}
.v3 .rz-liens__liste{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
@media (min-width:1100px){ .v3 .rz-liens__liste{justify-content:flex-end} }

/* =====================================================================
   ANIMATIONS DE LECTURE
   Toutes conditionnées par .js-anim, que seul realisation.js pose (jamais
   sous prefers-reduced-motion). Sans script, rien n'est masqué.
   ===================================================================== */

/* Entrée en cascade des familles d'éléments (chiffres, listes, photos). */
.v3 .js-anim .rz-in{opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--d,0ms), transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.v3 .js-anim .rz-in.is-on{opacity:1; transform:none}

/* Rideau qui s'ouvre sur les photos de contenu et le moment fort. On rogne
   les ENFANTS, jamais l'élément observé (un élément entièrement rogné n'est
   plus vu par l'observateur d'intersection) ; le filet ::before de .rz-fort
   n'est pas un enfant et reste visible. */
.v3 .js-anim .rz-veil > *{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.v3 .js-anim .rz-veil.is-on > *{clip-path:inset(0 0 0 0)}

/* Fil de lecture sous l'en-tête fixe, créé par le script. */
.v3 .rz-fil{position:fixed; top:var(--header-h); left:0; right:0; height:2px; z-index:80;
  background:var(--degrade); transform:scaleX(0); transform-origin:0 50%; will-change:transform; pointer-events:none}

/* ---------- Écrans moyens ---------- */
@media (max-width:980px){
  .v3 .rz-haut__grille,.v3 .rz-haut__grille--large,.v3 .rz-split,.v3 .rz-split--rev,.v3 .rz-medias,.v3 .rz-fort{grid-template-columns:minmax(0,1fr)}
  .v3 .rz-split--rev .rz-split__txt{order:0}
  .v3 .rz-haut__media{justify-self:center}
  .v3 .rz-medias__tete{position:static}
}

/* ---------- Téléphone ---------- */
@media (max-width:700px){
  .v3 .rz-haut .v3-actions{gap:8px}
  .v3 .rz-haut .v3-btn,.v3 .rz-haut .v3-pilule{padding:9px 16px; font-size:14.5px}
  .v3 .rz-meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-left:-14px; row-gap:16px}
  .v3 .rz-meta li{padding:0 14px}
  /* Colonne étroite : un nom composé long (Saint-Quentin-en-Yvelines) peut se couper à ses traits d'union. */
  .v3 .rz-meta .v3-insec{white-space:normal}
  .v3 .rz-do__list,.v3 .rz-gal{grid-template-columns:minmax(0,1fr)}
  .v3 .rz-medias .rz-gal--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Séquences verticales : une rangée qui défile, plutôt que trois écrans de haut. */
  .v3 .rz-vid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--marge); scrollbar-width:none; margin-inline:calc(-1 * var(--marge)); padding-inline:var(--marge)}
  .v3 .rz-vid::-webkit-scrollbar{display:none}
  .v3 .rz-vid__item{scroll-snap-align:start}
  .v3 .rz-filtres__lab{flex-basis:100%; text-align:center}
}
@media (max-width:520px){
  .v3 .rz-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3 .rz-stats > div{padding:18px 16px}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .v3 .rz-gal__item:hover img,.v3 .rz-kit__list a:hover svg{transform:none}
}