/* ============================================================
   PRODIGIMA - Styles spécifiques par page
   Regroupe les blocs <style> qui étaient inline dans les maquettes.
   Aucun sélecteur n'est partagé entre pages : chargement global sans conflit.
   ============================================================ */

/* ============================================================
   SURCHARGES GLOBALES (par-dessus style.css)
   ============================================================ */
/* Logo Prodigima du footer un peu plus discret */
.footer .brand img{height:20px}

/* ============================================================
   ACCUEIL (front-page)
   ============================================================ */

/* ---- hero accueil (spécifique) ---- */
.home-hero{background:var(--noir);color:var(--blanc);padding:104px 0 92px;position:relative;overflow:hidden}
.home-hero .clap{font-family:'Caveat',cursive;color:var(--jaune);font-size:34px;line-height:1;margin-bottom:26px}
.home-hero .dates{font-size:clamp(60px,12vw,148px);font-weight:800;letter-spacing:-0.04em;line-height:0.92;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.home-hero .dates .sep{color:var(--jaune);font-weight:300}
.home-hero .lede{margin-top:30px;max-width:640px;font-size:20px;font-weight:300;color:#d7d4cd;line-height:1.55}
.home-hero .lede strong{color:var(--blanc);font-weight:600}
.home-hero .meta{margin-top:40px;display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid var(--trait-sombre);padding-top:24px}
.home-hero .meta .k{color:var(--gris-clair);text-transform:uppercase;letter-spacing:0.1em;font-size:11px;margin-bottom:4px}
.home-hero .meta .v{color:var(--blanc);font-weight:500;font-size:14px}

/* ---- clap de fin ---- */
.adieu{background:var(--blanc);padding:92px 0}
.adieu .wrap{max-width:var(--max)}
.adieu .inner{max-width:760px}
.adieu .eyebrow{display:inline-block;background:var(--jaune);color:var(--noir);font-weight:700;font-size:15px;padding:2px 10px;margin-bottom:30px;letter-spacing:-0.01em}
.adieu p{font-size:15.5px;color:#3a3a3a;margin-bottom:18px;line-height:1.7}
.adieu p.strong{font-size:17px;color:var(--noir);font-weight:600}
.adieu .signe{display:inline-block;background:var(--jaune);color:var(--noir);font-weight:700;font-size:15px;padding:2px 10px;margin-top:12px}

/* ---- pôles ---- */
.poles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.pole{background:var(--blanc);padding:36px 30px;display:flex;flex-direction:column}
.pole .n{font-size:13px;color:var(--jaune-sourd);font-weight:700;letter-spacing:0.1em;margin-bottom:18px}
.pole h3{font-size:21px;margin-bottom:12px;font-weight:700}
.pole p{font-size:15px;color:var(--gris);line-height:1.6;margin-bottom:16px}
.pole .list{font-size:13px;color:var(--gris-clair);line-height:1.7;margin-top:auto;border-top:1px solid var(--trait);padding-top:14px}

/* ---- clients ---- */
.clients{background:var(--blanc)}
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.client{
  background:var(--blanc-casse);border:1px solid var(--trait);
  height:96px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;color:var(--anthracite);letter-spacing:0.02em;
  transition:border-color .2s;
}
.client:hover{border-color:var(--jaune)}
/* logos clients récupérés du FTP, détourés + uniformisés en niveaux de gris */
.client img{max-width:74%;max-height:60px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.9;transition:opacity .2s}
.client:hover img{opacity:1}
.clients .note{margin-top:24px;font-size:14px;color:var(--gris-clair);font-style:italic}

/* ---- producteurs ---- */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.prod{display:flex;gap:24px;align-items:flex-start}
.prod .ph{width:120px;height:150px;flex-shrink:0;background:var(--anthracite);border-top:3px solid var(--jaune);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:cover;display:block}
.prod .ph span{color:var(--gris);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;padding-bottom:10px}
.prod h3{font-size:22px;margin-bottom:4px}
.prod .role{color:var(--jaune);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px}
.prod p{font-size:14.5px;color:var(--gris-tres-clair);line-height:1.6}

/* ---- timeline ---- */
.timeline{position:relative;margin-top:20px}
.tl-item{display:grid;grid-template-columns:110px 1fr;gap:28px;padding:20px 0;border-top:1px solid var(--trait);align-items:baseline}
.tl-item:first-child{border-top:none}
.tl-year{font-size:26px;font-weight:800;color:var(--noir);letter-spacing:-0.02em}
.tl-year.key{color:var(--jaune-sourd)}
.tl-body{font-size:15.5px;color:var(--gris);line-height:1.6}
.tl-body strong{color:var(--noir);font-weight:600}

/* ---- valeurs / engagements ---- */
.valeurs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:56px}
.valeur{border-left:2px solid var(--jaune);padding-left:22px}
.valeur h3{font-size:21px;margin-bottom:12px;font-weight:700}
.valeur h3 em{font-style:normal;color:var(--jaune)}
.valeur p{font-size:14.5px;color:var(--gris-tres-clair);line-height:1.6}
.engage{border-top:1px solid var(--trait-sombre);padding-top:32px}
.engage .k{color:var(--jaune);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;margin-bottom:14px}
.engage p{color:var(--gris-tres-clair);font-size:14.5px;line-height:1.7;max-width:760px}

@media(max-width:820px){
  .poles{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .prods,.valeurs-grid{grid-template-columns:1fr}
  .home-hero .meta{gap:24px}
}
@media(max-width:560px){
  .tl-item{grid-template-columns:1fr;gap:6px}
  .prod{flex-direction:column}
}

/* ============================================================
   RÉFÉRENCES - logos clients (grille .ref)
   Logos récupérés du FTP de l'ancien site, versions "-nb" (grayscale)
   quand elles existaient ; grayscale CSS pour uniformiser le reste.
   ============================================================ */
.refs-grid .ref{min-height:108px}
.ref img{
  max-width:74%;max-height:66px;width:auto;height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;   /* fond blanc du logo fondu dans la case */
  filter:grayscale(1);opacity:.9;
  transition:opacity .2s;
}
.ref:hover img{opacity:1}

/* ============================================================
   SAVOIR-FAIRE
   ============================================================ */

/* formats en tags */
.formats{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.formats span{background:var(--blanc);border:1px solid var(--trait);color:var(--anthracite);font-size:13px;font-weight:500;padding:7px 14px;border-radius:2px}
.section.dark .formats span{background:var(--anthracite);border-color:var(--trait-sombre);color:#d7d4cd}

/* bloc métier 2 colonnes */
.metier-row{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:36px 0;border-top:1px solid var(--trait)}
.metier-row:first-of-type{border-top:none}
.section.dark .metier-row{border-top-color:var(--trait-sombre)}
.metier-row h3{font-size:24px;font-weight:700;letter-spacing:-0.01em}
.metier-row .sub{color:var(--jaune-sourd);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-top:8px}
.section.dark .metier-row .sub{color:var(--jaune)}
.metier-row p{font-size:15.5px;color:var(--gris);line-height:1.65;margin-bottom:14px}
.section.dark .metier-row p{color:var(--gris-tres-clair)}

@media(max-width:820px){
  .metier-row{grid-template-columns:1fr;gap:16px}
}

/* ============================================================
   MOYENS & STUDIO
   ============================================================ */

/* specs studio */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.spec{background:var(--anthracite);padding:22px 20px;border-top:2px solid var(--jaune)}
.spec .v{font-size:24px;font-weight:800;color:var(--jaune);letter-spacing:-0.02em;line-height:1.1}
.spec .k{font-size:12.5px;color:var(--gris-tres-clair);margin-top:8px;line-height:1.4}

.studio-details{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:40px;border-top:1px solid var(--trait-sombre);padding-top:32px}
.studio-details li{list-style:none;font-size:15px;color:#d7d4cd;padding-left:20px;position:relative;line-height:1.5}
.studio-details li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--jaune)}

/* parc matériel */
.parc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.mat{background:var(--blanc);padding:30px 28px}
.mat h3{font-size:19px;font-weight:700;margin-bottom:10px}
.mat .gear{color:var(--jaune-sourd);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.mat p{font-size:14.5px;color:var(--gris);line-height:1.6}

/* bureaux */
.bureaux{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.bureau h3{font-size:20px;margin-bottom:10px}
.bureau p{font-size:15px;color:var(--gris);line-height:1.65}

@media(max-width:820px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .studio-details{grid-template-columns:1fr}
  .parc,.bureaux{grid-template-columns:1fr}
}

/* photos du studio (galerie, section sombre) - noir & blanc pour l'esprit archive */
.studio-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.studio-photos figure{margin:0;overflow:hidden;background:var(--anthracite);border-top:2px solid var(--jaune)}
.studio-photos img{width:100%;height:158px;object-fit:cover;display:block;filter:grayscale(1);opacity:.88;transition:filter .35s,opacity .35s;transform:translateZ(0)}
.studio-photos figure:hover img{filter:grayscale(0);opacity:1}
@media(max-width:820px){.studio-photos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.studio-photos img{height:132px}}

/* ============================================================
   RÉALISATIONS - catalogue des œuvres (grille de cartes)
   ============================================================ */
.oeuvres-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.oeuvre-card{margin:0;display:flex;flex-direction:column}
.oeuvre-card .visual{aspect-ratio:1/1;background:var(--noir);border:1px solid var(--trait);overflow:hidden;display:flex;align-items:center;justify-content:center}
.section.dark .oeuvre-card .visual{border-color:var(--trait-sombre)}
.oeuvre-card .visual img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.9;transition:filter .35s,opacity .35s;transform:translateZ(0)}
.oeuvre-card:hover .visual img{filter:grayscale(0);opacity:1}
.oeuvre-card .ph{color:#d7d4cd;font-size:14px;font-weight:600;text-align:center;padding:16px;line-height:1.3;letter-spacing:-0.01em}
.oeuvre-card figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.oeuvre-card figcaption .t{font-size:13.5px;font-weight:600;color:var(--noir);line-height:1.25}
.section.dark .oeuvre-card figcaption .t{color:var(--blanc)}
.oeuvre-card figcaption .m{font-size:12px;color:var(--gris-clair);line-height:1.3}
.section.dark .oeuvre-card figcaption .m{color:var(--gris-tres-clair)}
@media(max-width:820px){.oeuvres-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.oeuvres-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   RÉALISATIONS - logos diffuseurs (bande)
   ============================================================ */
.diffuseurs-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;margin-top:24px}
.diffuseurs-logos img{height:30px;width:auto;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.72;transition:opacity .2s}
.diffuseurs-logos img:hover{opacity:1}
.section.dark .diffuseurs-logos img{mix-blend-mode:screen;filter:grayscale(1) invert(1)}