:root{
  /* Charte graphique COY Production — Noir Coyote / Ambre Nocturne / Gris Pellicule / Ivoire Studio */
  --bg:#111111;
  --bg-alt:#161616;
  --surface:#1b1b1b;
  --surface-2:#212121;
  --line:#2c2c2b;
  --ink:#f7eed7; /* couleur exacte du logo */
  --ink-muted:#9a978f;
  --ink-faint:#918c7e; /* éclairci vs #6f6c66 d'origine : la valeur précédente tombait à 3.61:1
    sur fond sombre (labels, tags, copyright), sous le seuil AA de 4.5:1. Cette valeur passe
    partout où le token est utilisé (~5:1 sur fond noir, ~4.8:1 sur les surfaces claires). */
  --accent:#e8590c;
  --accent-deep:#b34009; /* variante foncée de l'accent, réservée aux contextes où de l'accent
    sert de fond avec du texte clair par-dessus (bandeau bicolore, eyebrows sur fond ivoire) :
    l'accent standard n'offre que 3.10:1 avec du texte clair, cette teinte atteint ~4.97:1. */
  --accent-ink:#111111;
  --ivoire:#f7eed7; /* couleur exacte du logo */
  --noir:#111111;
  --gris:#4a4a48;
  --font-display:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* courbes cinématographiques : démarrage franc, sortie longue et posée —
     le vocabulaire de mouvement d'une agence vidéo, pas d'une app. */
  --ease-cine:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.33,1,.68,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
/* respirations plus généreuses sur grand écran : l'espace vide est un signal
   de standing, il laisse chaque section exister seule. Sur mobile on resserre. */
section{padding:clamp(80px,10vw,160px) 8vw;}
@media(max-width:768px){section{padding:80px 6vw;}}

/* focus clavier — visible partout, invisible à la souris (WCAG 2.2 · 2.4.7,
   2.4.11). Le site n'avait aucun indicateur de focus avant cet ajout : sans
   lui, la navigation au clavier est impossible à suivre visuellement. */
:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
.btn:focus-visible,.nav-cta:focus-visible,.faq-item summary:focus-visible{outline-offset:5px;}

/* lien d'évitement — permet aux utilisateurs clavier/lecteur d'écran de
   sauter directement au contenu sans traverser toute la navigation. */
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:2100;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:13px;
  padding:12px 20px;border-radius:8px;transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;}

/* CTA persistant mobile — sur petit écran, le bouton "Réserver un appel" du
   header n'est visible qu'une fois le menu hamburger ouvert : le visiteur
   n'a alors aucune action de conversion à portée de pouce en permanence.
   Cette barre fixe corrige ce point de friction identifié en audit CRO. */
.mobile-cta-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:850;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(17,17,17,.92);backdrop-filter:blur(10px);
  border-top:.5px solid var(--line);
  transform:translateY(100%);transition:transform .35s var(--ease);
}
.mobile-cta-bar.visible{transform:translateY(0);}
.mobile-cta-bar .btn{width:100%;}
@media(max-width:680px){
  .mobile-cta-bar{display:block;}
}
@media(prefers-reduced-motion: reduce){.mobile-cta-bar{transition:none;}}

/* grain filmique étendu à l'ensemble du site, pas seulement au hero */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.04;
  background-image:radial-gradient(var(--ink) .6px, transparent .6px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* duotone ambre — technique par superposition en mode fusion "color" au-dessus
   d'une base désaturée. Remplace le rendu gris froid par la teinte de marque. */
.duotone-tint{position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.5;pointer-events:none;}

/* intro — flash de logo très bref avant d'arriver directement sur la home */
.intro{
  position:fixed;inset:0;z-index:2000;
  background:var(--noir);cursor:pointer;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  animation:intro-out .3s ease-out .55s forwards;
}
.intro-logo{
  width:min(200px,42vw);height:auto;opacity:0;transform:scale(.92);
  animation:logo-flash .3s var(--ease) forwards;
}
@keyframes logo-flash{0%{opacity:0;transform:scale(.92);}55%{opacity:1;transform:scale(1);}100%{opacity:1;transform:scale(1);}}
@keyframes intro-out{to{opacity:0;visibility:hidden;}}

@media(prefers-reduced-motion: reduce){
  .intro{display:none;}
  .rise-in,.page-view,#view-home{animation:none;}
  .hero-bg-layer{animation:none;}
  /* les défilements continus (bandeau de mots-clés, logos clients, indice de
     scroll) peuvent provoquer un inconfort chez les personnes sensibles au
     mouvement (troubles vestibulaires) : on les fige plutôt que de les
     ralentir, conformément à la préférence système. */
  .marquee-track,.clients-track,.scroll-cue span::after{animation:none;}
  .marquee-track span:nth-child(2),.clients-track span:nth-last-child(-n+6){display:none;}
  .reveal{transition:opacity .3s linear;}
}

.scroll-progress{
  position:fixed;top:0;left:0;height:2px;background:var(--accent);
  width:0%;z-index:1000;transition:width .1s linear;
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-cine),transform .9s var(--ease-cine);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* entrée cinématographique du hero : chaque élément monte avec un léger
   décalage, comme un fondu enchaîné qui se pose. Le geste est lent et assuré. */
.hero-content .reveal{transform:translateY(38px);transition-duration:1.1s;}
.hero-content .eyebrow{transition-delay:.05s;}
.hero-content h1{transition-delay:.16s;}
.hero-content .hero-sub{transition-delay:.30s;}
.hero-content .hero-actions{transition-delay:.44s;}

/* cascade d'entrée pour les grilles (services, portfolio, catégories) —
   le délai est posé par élément via nth-child (grilles statiques) ou inline
   par JS (grilles rendues dynamiquement au routing) */
.services-grid .service-card.reveal{transition-delay:calc(var(--i, 0) * 70ms);}
.services-grid .service-card:nth-child(1){--i:1;}
.services-grid .service-card:nth-child(2){--i:2;}
.services-grid .service-card:nth-child(3){--i:3;}
.services-grid .service-card:nth-child(4){--i:4;}
.services-grid .service-card:nth-child(5){--i:5;}
.services-grid .service-card:nth-child(6){--i:6;}
.services-grid .service-card:nth-child(7){--i:7;}
.services-grid .service-card:nth-child(8){--i:8;}

.about-timeline .about-step.reveal{transition-delay:calc(var(--i, 0) * 90ms);}
.about-timeline .about-step:nth-child(1){--i:1;}
.about-timeline .about-step:nth-child(2){--i:2;}
.about-timeline .about-step:nth-child(3){--i:3;}
.about-timeline .about-step:nth-child(4){--i:4;}
.about-timeline .about-step:nth-child(5){--i:5;}

.rise-in{animation:rise-in .7s var(--ease) both;}
@keyframes rise-in{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

/* transition douce entre les vues (home / portfolio / catégorie) */
.page-view,#view-home{animation:view-in .5s var(--ease) both;}
@keyframes view-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.page-view.view-leaving,#view-home.view-leaving{
  animation:none;opacity:0;transform:translateY(-10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}

/* header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:22px 8vw;transition:background .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease);
  border-bottom:0.5px solid transparent;
}
.site-header.scrolled{background:rgba(17,17,17,.85);backdrop-filter:blur(6px);padding:14px 8vw;border-color:var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;}
.logo{display:flex;align-items:center;white-space:nowrap;perspective:640px;}
.logo img{height:64px;width:auto;transition:height .3s var(--ease);transform-origin:center;backface-visibility:visible;}
.site-header.scrolled .logo img{height:52px;}
/* petite signature au clic sur le logo : un tour complet fluide en 3D. */
@keyframes logo-tap{0%{transform:rotateY(0) scale(1);}45%{transform:rotateY(180deg) scale(1.09);}100%{transform:rotateY(360deg) scale(1);}}
.logo img.logo-anim{animation:logo-tap .8s var(--ease-cine);}
@media(prefers-reduced-motion:reduce){.logo img.logo-anim{animation:none;}}
.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav a{position:relative;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-muted);transition:color .2s;}
.main-nav a:hover{color:var(--ink);}
.main-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.main-nav a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left;}
.nav-cta{color:var(--ink) !important;border:1px solid var(--line);padding:9px 18px;border-radius:24px;font-weight:500;transition:border-color .25s,transform .25s var(--ease),background .25s;}
.nav-cta:hover{border-color:var(--accent);transform:translateY(-2px);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:1.5px;background:var(--ink);display:block;transition:transform .3s,opacity .3s;}

@media(max-width:900px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:78vw;max-width:340px;height:100vh;
    background:var(--bg-alt);flex-direction:column;justify-content:center;align-items:flex-start;
    gap:26px;padding:0 40px;transform:translateX(100%);transition:transform .4s var(--ease);
    border-left:0.5px solid var(--line);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:18px;}
  .nav-toggle{display:flex;}
  .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

/* hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:0 8vw;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform;}
.hero-bg-layer{
  position:absolute;inset:-10%;
  background-color:var(--bg);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.08) brightness(.72);
  animation:drift 22s ease-in-out infinite alternate;
}
.hero-bg-video{
  inset:0;width:100%;height:100%;object-fit:cover;
  background-color:var(--bg);
  animation:none; /* le mouvement vient déjà de la vidéo */
  /* grade cinématographique discret : couleurs réelles conservées (pas de
     noir & blanc, pas de teinte orange), juste assombri pour la lisibilité
     du texte par-dessus. */
  filter:saturate(1.05) contrast(1.08) brightness(.72);
}
.hero-bg-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 30%, rgba(17,17,17,.35) 0%, transparent 55%),
    radial-gradient(circle at 78% 68%, rgba(17,17,17,.35) 0%, transparent 50%),
    linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.35) 40%, rgba(17,17,17,.85) 100%);
}
@keyframes drift{from{transform:scale(1) translate(0,0);}to{transform:scale(1.08) translate(-2%,2%);}}
.grain{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(var(--ink) .6px, transparent .6px);background-size:3px 3px;}
.hero-content{position:relative;z-index:1;max-width:900px;}
/* eyebrow avec tiret accent : une signature discrète qui ancre le regard et
   introduit la couleur de marque avant même le titre. */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:3px;color:var(--ink-muted);text-transform:uppercase;margin-bottom:22px;font-weight:500;}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);flex:none;}
.hero h1{font-size:clamp(40px,7vw,92px);line-height:1.02;color:var(--ink);text-transform:uppercase;letter-spacing:-.03em;}
.hero h1 span{color:var(--accent);}
.hero-sub{margin-top:26px;max-width:48ch;color:var(--ink-muted);font-size:clamp(16px,1.3vw,18px);line-height:1.75;}
.hero-actions{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;}

.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:9px;padding:16px 32px;border-radius:30px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:transform .35s var(--ease-cine),background .3s,border-color .3s,color .3s,box-shadow .4s var(--ease-cine);}
.btn i{transition:transform .35s var(--ease-cine);}
.btn:hover i{transform:translateX(5px);}
/* texte foncé sur fond accent : le texte clair d'origine ne tenait qu'à
   3.10:1 (sous le seuil AA de 4.5:1) — le texte sombre reprend le traitement
   déjà utilisé pour les icônes sur fond accent ailleurs sur le site (5.27:1). */
.btn-primary{background:var(--accent);color:var(--accent-ink);}
/* balayage lumineux discret au survol : un reflet qui traverse le bouton,
   comme la lumière sur une surface laquée. Une seule passe, jamais en boucle. */
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(247,238,215,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease-cine);}
.btn-primary:hover{transform:translateY(-3px);background:#c94e0a;box-shadow:0 16px 34px -14px rgba(232,89,12,.72);}
.btn-primary:hover::before{transform:translateX(120%);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px);background:rgba(247,238,215,.04);}
@media(prefers-reduced-motion: reduce){.btn-primary::before{display:none;}}
.full-width{width:100%;justify-content:center;}

.scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-faint);font-size:12px;z-index:1;}
.scroll-cue span{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden;}
.scroll-cue span::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--accent);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{top:-100%;}50%{top:0;}100%{top:100%;}}

/* marquee */
.marquee-strip{padding:14px 0;background:var(--bg-alt);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-block;animation:scrollLeft 22s linear infinite;}
.marquee-track span{font-size:12px;letter-spacing:3px;color:var(--ink-faint);}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* section head */
.section-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;letter-spacing:2.5px;color:var(--accent);text-transform:uppercase;margin-bottom:18px;}
/* le repère d'accroche reprend le monogramme Coy Production (rendu en couleur
   d'accent via mask, donc lisible sur fond clair comme sombre) : la marque
   revient discrètement au-dessus de chaque section. */
.section-eyebrow::before{content:"";width:19px;height:19px;flex:none;background-color:currentColor;
  -webkit-mask:url('../assets/brand/icon-cream.png') center/contain no-repeat;
  mask:url('../assets/brand/icon-cream.png') center/contain no-repeat;}
.section-eyebrow.center{display:flex;justify-content:center;}
.section-head{max-width:680px;margin-bottom:clamp(44px,5vw,72px);}
.section-head h2{font-size:clamp(30px,4vw,50px);line-height:1.06;letter-spacing:-.025em;}
.center{text-align:center;margin:0 auto 20px;}

/* portfolio */
.page-view section{padding-top:120px;}

/* — hero éditorial du portfolio (aligné sur À propos / Contact) — */
.portfolio-hero{
  display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,72px);align-items:end;
  margin:8px 0 clamp(36px,4vw,56px);
}
.portfolio-hero-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(36px,5.6vw,74px);line-height:1.0;color:var(--ink);margin:18px 0 22px;
}
.portfolio-hero-title span{color:var(--accent);}
.portfolio-hero-lead{max-width:56ch;color:var(--ink-muted);font-size:clamp(15px,1.3vw,17px);line-height:1.75;}
.portfolio-hero-stat{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none;}
.portfolio-hero-stat .count-up{font-family:var(--font-display);font-weight:700;font-size:clamp(46px,6vw,84px);color:var(--accent);line-height:.9;letter-spacing:-.02em;}
.portfolio-hero-stat-label{font-size:11px;letter-spacing:1.8px;color:var(--ink-faint);text-transform:uppercase;margin-top:8px;}
@media(max-width:720px){
  .portfolio-hero{grid-template-columns:1fr;align-items:start;gap:24px;}
  .portfolio-hero-stat{flex-direction:row;align-items:baseline;gap:12px;text-align:left;}
  .portfolio-hero-stat-label{margin-top:0;max-width:10ch;line-height:1.3;}
}

.breadcrumb{display:inline-flex;align-items:center;gap:8px;color:var(--ink-muted);font-size:13px;margin-bottom:32px;transition:color .2s;}
.breadcrumb:hover{color:var(--ink);}
.breadcrumb i{font-size:12px;}

/* filtres de catégorie sur la page portfolio unique */
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.filter-pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border:1px solid var(--line);border-radius:24px;
  font-size:12px;letter-spacing:.5px;color:var(--ink-muted);
  transition:border-color .3s var(--ease-cine),color .3s,background .3s,transform .3s var(--ease-cine);
}
.filter-pill span{font-size:10px;color:var(--ink-faint);transition:color .25s;}
.filter-pill:hover{border-color:rgba(232,89,12,.5);color:var(--ink);transform:translateY(-2px);}
.filter-pill.active{background:var(--accent);border-color:var(--accent);color:#111;font-weight:600;}
.filter-pill.active span{color:rgba(17,17,17,.6);}

/* clôture de la page portfolio : marge au-dessus de la bande CTA */
.portfolio-cta{margin-top:clamp(56px,7vw,96px);}

/* carte "à la une" : pleine largeur, visuel large + texte à côté */
.project-card-featured{
  grid-column:1 / -1;display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3vw,44px);
  align-items:center;padding:clamp(20px,2.5vw,34px);border:1px solid var(--line);
  border-radius:20px;background:var(--surface);margin-bottom:8px;
  transition:border-color .5s var(--ease-cine),background .5s var(--ease-cine);
}
.project-card-featured:hover{border-color:rgba(232,89,12,.4);background:var(--surface-2);}
.project-card-featured .project-card-thumb{aspect-ratio:16/9;border-radius:14px;}
.project-card-featured .project-card-text{padding-top:0;}
.project-card-featured h3{font-size:clamp(20px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em;margin-top:10px;}
.project-card-featured .project-card-desc{font-size:14px;-webkit-line-clamp:4;margin-top:12px;}
.project-card-cue{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);}
.project-card-cue i{font-size:11px;transition:transform .35s var(--ease-cine);}
.project-card-featured:hover .project-card-cue i{transform:translateX(5px);}
@media(max-width:760px){
  .project-card-featured{grid-template-columns:1fr;gap:18px;padding:16px;}
}

/* carrousel "Nos expertises" sur la home */
.coverage{background:var(--bg-alt);}

.coverage-carousel{position:relative;margin:44px -8vw 0;}
@media(max-width:768px){.coverage-carousel{margin:36px -6vw 0;}}

.coverage-track{
  display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;padding:0 8vw;
}
@media(max-width:768px){.coverage-track{padding:0 6vw;}}
.coverage-track::-webkit-scrollbar{display:none;}

.coverage-slide{
  position:relative;display:block;flex:0 0 82%;scroll-snap-align:start;
  height:58vh;min-height:400px;max-height:660px;border-radius:4px;overflow:hidden;
  background-color:var(--surface);color:var(--ink);
}
@media(min-width:640px){.coverage-slide{flex-basis:46%;}}
@media(min-width:1080px){.coverage-slide{flex-basis:31.6%;}}

/* même étalonnage cinématographique que la vidéo du hero : couleurs réelles
   conservées, légèrement saturées et contrastées, assombries pour la lisibilité. */
.coverage-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.08) brightness(.72);transition:transform 1.2s var(--ease-cine),filter .6s var(--ease);}
.coverage-slide:hover .coverage-slide-bg{transform:scale(1.07);filter:saturate(1.1) contrast(1.06) brightness(.85);}
.coverage-slide-shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(17,17,17,0) 30%, rgba(17,17,17,.55) 68%, rgba(17,17,17,.88) 100%);}
.coverage-slide-content{position:absolute;left:26px;right:26px;bottom:28px;z-index:2;transition:transform .6s var(--ease-cine);}
.coverage-slide:hover .coverage-slide-content{transform:translateY(-6px);}
.coverage-slide-title{
  display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:1.05;letter-spacing:-.3px;
  font-size:clamp(26px,2.6vw,38px);color:var(--ink);margin-bottom:10px;max-width:22ch;
}
.coverage-slide-examples{
  display:block;font-size:13px;color:rgba(247,238,215,.72);margin-bottom:20px;max-width:26ch;
}
.coverage-slide-btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:40px;
  border:1px solid var(--ink);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:600;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease);
}
.coverage-slide-btn i{font-size:10px;transition:transform .35s var(--ease);}
.coverage-slide:hover .coverage-slide-btn,.coverage-slide-btn:hover{background:var(--ink);color:var(--noir);}
.coverage-slide:hover .coverage-slide-btn i,.coverage-slide-btn:hover i{transform:translateX(4px);}

.coverage-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;
  border-radius:50%;background:rgba(17,17,17,.4);backdrop-filter:blur(4px);
  border:1px solid rgba(247,238,215,.35);color:var(--ink);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .3s var(--ease);
}
.coverage-arrow:hover{background:rgba(17,17,17,.65);}
.coverage-arrow-prev{left:20px;}
.coverage-arrow-next{right:20px;}
@media(max-width:768px){.coverage-arrow{display:none;}}

/* page détail d'une catégorie de prestations */
.coverage-intro{max-width:60ch;margin-top:18px;color:var(--ink-muted);font-size:15px;line-height:1.7;}

.coverage-groups{display:flex;flex-direction:column;gap:8px;margin-top:12px;}

.coverage-row{
  display:flex;align-items:center;gap:64px;
  padding:56px 0;border-bottom:.5px solid var(--line);
}
.coverage-row:first-child{padding-top:8px;}
.coverage-row:nth-child(even){flex-direction:row-reverse;}

.coverage-row-media{
  position:relative;flex:0 0 42%;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  background:var(--surface);
}
.coverage-row-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.08) brightness(.72);
  transform:scale(1.02);
  transition:filter .6s var(--ease),transform .8s var(--ease);
}
.coverage-row:hover .coverage-row-media img{filter:saturate(1.1) contrast(1.06) brightness(.85);transform:scale(1.08);}
.coverage-row-badge{
  position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#111;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.5px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.coverage-row-content{flex:1 1 auto;min-width:0;}
.coverage-group-title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2vw,26px);
  color:var(--ink);margin-bottom:16px;
}
.coverage-group-desc{color:var(--ink-muted);font-size:15px;line-height:1.8;margin-bottom:24px;max-width:52ch;}
.coverage-chips{display:flex;flex-wrap:wrap;gap:8px;}
.coverage-chip{
  padding:7px 14px;border:1px solid var(--line);border-radius:20px;
  font-size:11.5px;color:var(--ink-faint);transition:border-color .25s,color .25s,background .25s;
}
.coverage-chip:hover{border-color:var(--accent);color:var(--ink);background:rgba(232,89,12,.08);}

@media(max-width:820px){
  .coverage-row,.coverage-row:nth-child(even){flex-direction:column;align-items:stretch;gap:28px;padding:36px 0;}
  .coverage-row-media{flex:none;aspect-ratio:16/10;}
}

.coverage-cta{
  margin-top:56px;padding-top:40px;border-top:.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.coverage-cta p{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.2vw,24px);color:var(--ink);}
@media(max-width:600px){.coverage-cta{margin-top:44px;padding-top:28px;}}

/* page "À propos" dédiée (bio détaillée + process + services) */
.about-intro{max-width:920px;margin-bottom:88px;}
.about-intro h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.6vw,44px);line-height:1.18;margin:16px 0 32px;color:var(--ink);
}
.about-intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.about-intro-cols p{color:var(--ink-muted);font-size:15px;line-height:1.85;}
@media(max-width:760px){.about-intro-cols{grid-template-columns:1fr;}}

.about-block{margin-bottom:96px;}
.about-block > h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,2.6vw,34px);line-height:1.22;margin:14px 0 52px;max-width:640px;color:var(--ink);
}

/* ============================================================
   PAGE À PROPOS — refonte éditoriale cinématographique (.about2)
   Composition asymétrique, grandes respirations, filets fins,
   typographie expressive. Réutilise les tokens & courbes du site.
   ============================================================ */
.about2-block{margin-bottom:clamp(80px,10vw,150px);}
.about2-block:last-of-type{margin-bottom:0;}

/* — Hero : portrait plein cadre + statement — */
.about2-hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);
  align-items:center;margin:8px 0 clamp(80px,10vw,150px);
}
.about2-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(38px,6vw,82px);line-height:1.0;color:var(--ink);margin:20px 0 26px;
}
.about2-title span{color:var(--accent);}
.about2-lead{max-width:44ch;color:var(--ink-muted);font-size:clamp(16px,1.35vw,19px);line-height:1.7;}
.about2-sign{display:flex;align-items:baseline;gap:14px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.about2-sign-name{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.01em;}
.about2-sign-role{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);}

.about2-portrait{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--surface);}
.about2-portrait::after{content:"";position:absolute;inset:0;border:1px solid rgba(247,238,215,.12);border-radius:20px;pointer-events:none;z-index:3;}
.about2-portrait-img{
  position:absolute;inset:-4%;background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.08) brightness(.72);
  animation:kenburns 26s ease-in-out infinite alternate;
}
.about2-portrait-cap{
  position:absolute;left:22px;bottom:20px;z-index:2;color:var(--ink);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.7;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.about2-portrait-cap span{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.2px;}
@media(prefers-reduced-motion: reduce){.about2-portrait-img{animation:none;inset:0;}}

/* — Manifeste : citation forte + récit — */
.about2-manifesto{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:start;padding:clamp(48px,6vw,84px) 0;margin-bottom:clamp(60px,7vw,110px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.about2-quote{
  margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(24px,2.9vw,40px);line-height:1.18;color:var(--ink);text-wrap:balance;
}
.about2-story{display:flex;flex-direction:column;gap:20px;}
.about2-story p{color:var(--ink-muted);font-size:15.5px;line-height:1.85;}

/* — Repères chiffrés — */
.about2-stats{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:clamp(80px,10vw,150px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.about2-stat{padding:clamp(26px,2.6vw,40px) 18px;border-right:1px solid var(--line);}
.about2-stat:last-child{border-right:0;}
.about2-stat-num{display:block;font-family:var(--font-display);font-weight:700;line-height:1;color:var(--accent);font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;}
.about2-stat-num small{font-size:.5em;font-weight:600;}
.about2-stat-label{display:block;margin-top:12px;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-muted);}

/* — Engagements : liste éditoriale numérotée — */
.about2-values{list-style:none;margin:0;padding:0;}
.about2-value{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,64px);align-items:start;
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease-cine);
}
.about2-value:last-child{border-bottom:1px solid var(--line);}
.about2-value-num{
  font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,28px);
  color:var(--ink-faint);line-height:1;transition:color .4s var(--ease);
}
.about2-value:hover{padding-left:clamp(8px,1.5vw,20px);}
.about2-value:hover .about2-value-num{color:var(--accent);}
.about2-value-body h3{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.9vw,24px);color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;}
.about2-value-body p{color:var(--ink-muted);font-size:15px;line-height:1.8;max-width:64ch;}

/* — Savoir-faire : index typographique compact — */
.about2-offer{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px);}
.about2-offer li{
  display:flex;align-items:baseline;gap:16px;padding:20px 0;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.7vw,22px);color:var(--ink);
  transition:color .3s var(--ease),padding-left .4s var(--ease-cine);
}
.about2-offer li:hover{color:var(--accent);padding-left:8px;}
.about2-offer-i{font-size:11px;letter-spacing:1px;color:var(--ink-faint);font-weight:700;flex:none;transition:color .3s;}
.about2-offer li:hover .about2-offer-i{color:var(--accent);}
.about2-offer-link{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--accent);transition:gap .35s var(--ease-cine);
}
.about2-offer-link i{font-size:11px;transition:transform .35s var(--ease-cine);}
.about2-offer-link:hover i{transform:translateX(5px);}

/* — CTA final : bande accent arrondie — */
.about2-cta{
  margin-top:clamp(80px,10vw,150px);border-radius:24px;overflow:hidden;
  background:var(--accent-deep);
  background-image:radial-gradient(circle at 80% 20%, rgba(247,238,215,.12) 0%, transparent 45%);
}
.about2-cta-inner{padding:clamp(48px,7vw,96px) 8vw;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}
.about2-cta h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:#f7eed7;max-width:20ch;}
.about2-cta p{color:rgba(247,238,215,.9);font-size:15px;max-width:44ch;}
.about2-cta .btn-primary{margin-top:12px;background:#f7eed7;color:var(--noir);}
.about2-cta .btn-primary:hover{background:#fff;}

@media(max-width:900px){
  .about2-hero{grid-template-columns:1fr;gap:36px;}
  .about2-portrait{order:-1;aspect-ratio:16/11;}
  .about2-manifesto{grid-template-columns:1fr;gap:28px;}
  .about2-stats{grid-template-columns:repeat(3,1fr);}
  .about2-stat{border-right:1px solid var(--line);}
  .about2-stat:nth-child(3n){border-right:0;}
  .about2-stat:nth-child(-n+3){border-bottom:1px solid var(--line);}
}
@media(max-width:600px){
  .about2-offer{grid-template-columns:1fr;}
  .about2-stats{grid-template-columns:repeat(2,1fr);}
  .about2-stat{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  .about2-stat:nth-child(2n){border-right:0;}
  .about2-stat:nth-child(n+5){border-bottom:0;}
}

/* ============================================================
   BANDE CTA générique (clôture de la home) + PAGE CONTACT dédiée
   ============================================================ */
/* bande de repères chiffrés sur la home (cohérente avec À propos / expertises) */
.home-stats{padding-block:clamp(48px,6vw,88px);}

.home-close{padding-top:0;}
.cta-band{position:relative;border-radius:24px;overflow:hidden;background:var(--accent-deep);
  background-image:radial-gradient(circle at 80% 20%, rgba(247,238,215,.12) 0%, transparent 45%);}
/* grand monogramme en filigrane : présence de marque subtile sur le dernier
   bloc de la page, sans gêner la lecture. */
.cta-band::before{content:"";position:absolute;right:-70px;bottom:-80px;width:360px;height:360px;
  background:url('../assets/brand/icon-cream.png') center/contain no-repeat;opacity:.05;pointer-events:none;}
.cta-band-inner{padding:clamp(48px,7vw,96px) 8vw;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.cta-band .section-eyebrow{color:rgba(247,238,215,.92);}
.cta-band h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:#f7eed7;max-width:20ch;}
.cta-band p{color:rgba(247,238,215,.9);font-size:15px;max-width:48ch;}
.cta-band .btn-primary{margin-top:10px;background:#f7eed7;color:var(--noir);}
.cta-band .btn-primary:hover{background:#fff;}

/* — page contact : hero éditorial + formulaire/aside + étapes + faq — */
.contactp-hero{max-width:860px;margin:8px 0 clamp(44px,5vw,72px);}
.contactp-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(38px,6vw,80px);line-height:1.0;color:var(--ink);margin:18px 0 24px;}
.contactp-title span{color:var(--accent);}
.contactp-lead{max-width:60ch;color:var(--ink-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.75;}

.contactp-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(28px,4vw,56px);align-items:start;margin-bottom:clamp(70px,9vw,130px);}
.contactp-side{display:flex;flex-direction:column;gap:16px;}
.contactp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 22px;}
.contactp-card-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;}
.contactp-card .contact-links{margin-top:0;}
.contactp-zones{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.contactp-zones li{padding:7px 14px;border:1px solid var(--line);border-radius:20px;font-size:12px;color:var(--ink-muted);transition:border-color .25s,color .25s,background .25s;}
.contactp-zones li:hover{border-color:var(--accent);color:var(--ink);background:rgba(232,89,12,.08);}
.contactp-badge{display:flex;align-items:center;gap:10px;padding:16px 20px;border-radius:14px;
  background:rgba(232,89,12,.1);border:1px solid rgba(232,89,12,.28);color:var(--ink);font-size:13px;line-height:1.5;}
.contactp-badge i{color:var(--accent);}

.contactp-steps{margin-bottom:clamp(60px,7vw,110px);}
.why-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.why-grid.cols-3{grid-template-columns:1fr;}}

@media(max-width:860px){
  .contactp-grid{grid-template-columns:1fr;gap:32px;}
}

/* page "Nos expertises" dédiée : vue d'ensemble des 4 univers, réutilise les
   rangées alternées image/texte de la page détail d'une catégorie. */
.expertise-row-label{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-bottom:10px;
}
.expertise-row-title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,46px);line-height:1.04;letter-spacing:-.5px;
  color:var(--ink);margin-bottom:14px;
}
.expertise-row-examples{color:var(--ink-muted);font-size:14px;margin-bottom:22px;}

/* — hero éditorial de la page "Nos expertises" (aligné sur les autres pages) — */
.expertises-hero{max-width:900px;margin:8px 0 clamp(40px,5vw,64px);}
.expertises-hero-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(38px,6vw,80px);line-height:1.0;color:var(--ink);margin:18px 0 24px;
}
.expertises-hero-title span{color:var(--accent);}
.expertises-hero-lead{max-width:64ch;color:var(--ink-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.75;}
.expertises-stats{margin-bottom:clamp(64px,8vw,120px);}
.expertises-cta{margin-top:clamp(64px,8vw,120px);}

/* le conteneur porte .reveal uniquement pour être observé et déclencher le
   tracé de la ligne (::before) ; son propre fondu/déplacement est neutralisé
   pour ne pas se cumuler avec celui de chaque carte .about-step. */
.about-timeline.reveal{opacity:1;transform:none;transition:none;}
.about-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
.about-timeline::before{
  content:"";position:absolute;top:54px;left:0;right:0;height:1px;background:
    linear-gradient(90deg, var(--accent), var(--line) 6%, var(--line) 94%, var(--accent));
  z-index:0;transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.22,1,.36,1) .1s;
}
.about-timeline.visible::before{transform:scaleX(1);}

.about-step{
  position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:28px 22px 26px;
  transition:transform .45s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.about-step:hover{
  transform:translateY(-8px);border-color:rgba(232,89,12,.45);background:var(--surface-2);
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 30px 56px -22px rgba(0,0,0,.55);
}

.about-step-icon{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  color:var(--accent);font-size:17px;margin-bottom:20px;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.about-step:hover .about-step-icon{background:var(--accent);border-color:var(--accent);color:#111;transform:scale(1.08);}
.about-step.visible .about-step-icon{animation:icon-pop .55s var(--ease) backwards;}
@keyframes icon-pop{0%{transform:scale(.4);opacity:0;}65%{transform:scale(1.14);opacity:1;}100%{transform:scale(1);}}

.about-step-index{
  display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:10px;
}
.about-step h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:10px;color:var(--ink);}
.about-step p{font-size:13px;line-height:1.75;color:var(--ink-muted);}
@media(max-width:900px){
  .about-timeline{grid-template-columns:1fr;gap:18px;}
  .about-timeline::before{display:none;}
  .about-step:hover{transform:none;}
}

/* section "Pourquoi Coy Production" (home) et "Pourquoi me faire confiance"
   (à propos) : réassurance/objections, cartes icône + titre + texte, même
   esprit visuel que .about-step mais sans numérotation d'étape. */
.why-us-lead{color:var(--ink-muted);font-size:15px;line-height:1.8;max-width:62ch;margin-top:18px;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.why-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 22px 26px;
  transition:transform .45s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.why-card:hover{
  transform:translateY(-8px);border-color:rgba(232,89,12,.45);background:var(--surface-2);
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 30px 56px -22px rgba(0,0,0,.55);
}
.why-card-icon{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--accent);font-size:17px;margin-bottom:20px;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.why-card:hover .why-card-icon{background:var(--accent);border-color:var(--accent);color:#111;transform:scale(1.08);}
.why-card h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:10px;color:var(--ink);}
.why-card p{font-size:13px;line-height:1.75;color:var(--ink-muted);}
@media(max-width:1000px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.why-grid{grid-template-columns:1fr;}.why-card:hover{transform:none;}}

/* FAQ SEO : accordéon natif <details>/<summary>, accessible sans JS
   supplémentaire, stylé pour coller à la charte graphique du studio. */
.faq-list{max-width:820px;}
.faq-inline{margin-top:88px;padding-top:56px;border-top:.5px solid var(--line);}
.faq-item{
  border-bottom:.5px solid var(--line);padding:22px 0;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  list-style:none;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);
  transition:color .2s;padding:2px 0;
}
.faq-item summary:hover{color:var(--accent);}
.faq-item summary:hover .faq-icon{color:var(--accent);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary span{flex:1;}
.faq-icon{
  flex:none;color:var(--accent);font-size:13px;transition:transform .35s var(--ease);
}
.faq-item[open] .faq-icon{transform:rotate(135deg);}
.faq-answer{padding-top:14px;max-width:70ch;}
.faq-answer p{color:var(--ink-muted);font-size:14.5px;line-height:1.8;}
.faq .section-head,.faq-inline .section-head{margin-bottom:40px;}

/* les cartes-services sont autoportantes (photo + panneau clair intégré à la
   carte) : elles fonctionnent aussi bien sur fond clair (home) que sur fond
   sombre (page À propos), pas besoin d'enveloppe ivoire supplémentaire. */

/* bandeau bicolore en tête de chaque page de prestations, inspiré d'un format
   à deux volets : bloc de couleur + texte d'un côté, visuel plein cadre de l'autre. */
.coverage-hero{
  display:grid;grid-template-columns:1fr 1fr;min-height:480px;
  border-radius:28px;overflow:hidden;margin-bottom:64px;
}
/* bandeau bicolore : fond en --accent-deep (plutôt que --accent standard) et
   texte clair ramené à une opacité quasi pleine. Avec l'accent d'origine, le
   texte clair ne tenait qu'à 3.10:1 — et le sous-titre en noir semi-transparent
   tombait à ~2.1:1. Ici tout le bloc dépasse 4.5:1 (échec AA → conforme). */
.coverage-hero-text{
  background:var(--accent-deep);padding:56px;
  display:flex;flex-direction:column;justify-content:center;
}
.coverage-hero-text .section-eyebrow{color:rgba(247,238,215,.96);}
.coverage-hero-tagline{
  font-style:italic;font-weight:400;font-size:16px;
  color:rgba(247,238,215,.97);margin:14px 0 16px;
}
.coverage-hero-text h1{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.2vw,54px);line-height:1.02;color:#f7eed7;margin-bottom:22px;
}
.coverage-hero-desc{font-size:15px;line-height:1.75;color:rgba(247,238,215,.97);max-width:40ch;}
.coverage-hero-signature{
  display:block;margin-top:36px;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(247,238,215,.96);font-weight:600;
}
.coverage-hero-visual{position:relative;background-color:var(--surface);overflow:hidden;}
/* léger ken-burns : l'image respire lentement, comme un plan fixe filmé.
   Le mouvement est imperceptible image par image mais donne de la vie. */
.coverage-hero-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.08) brightness(.72);animation:kenburns 26s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1) translate(0,0);}to{transform:scale(1.06) translate(1.5%,-1.5%);}}
@media(prefers-reduced-motion: reduce){.coverage-hero-bg{animation:none;inset:0;}}

@media(max-width:820px){
  .coverage-hero{grid-template-columns:1fr;min-height:auto;border-radius:20px;margin-bottom:48px;}
  .coverage-hero-visual{height:260px;order:-1;}
  .coverage-hero-text{padding:36px 28px;}
}

/* niveau 2 — grille compacte, même esprit de densité que la page catégories :
   petit visuel + contexte court, plusieurs projets visibles d'un coup d'œil. */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1300px;margin:0 auto;}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;}}

.project-card{cursor:pointer;}
.thumb{position:relative;height:auto;aspect-ratio:5/4;cursor:pointer;border-radius:10px;overflow:hidden;background-color:var(--surface);transition:transform .5s var(--ease);}
.thumb:hover{transform:translateY(-4px);}
.thumb-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.08) brightness(.72);transition:transform .6s var(--ease),filter .5s;}
.thumb:hover .thumb-bg{transform:scale(1.05);filter:saturate(1.1) contrast(1.06) brightness(.85);}
.thumb-shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(17,17,17,.1) 0%, rgba(17,17,17,.55) 100%);}
.thumb i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;color:var(--ink);border:1px solid rgba(247,245,240,.5);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .35s,border-color .35s;z-index:2;}
.thumb:hover i{transform:translate(-50%,-50%) scale(1.12);background:var(--accent);border-color:var(--accent);}

.project-card-text{padding-top:16px;}
.project-card-index{font-size:11px;letter-spacing:1.5px;color:var(--accent);font-weight:600;}
.project-card-text h3{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.3;margin-top:6px;}
.project-card-tag{font-size:10px;letter-spacing:1px;color:var(--ink-faint);text-transform:uppercase;margin-top:6px;}
.project-card-desc{color:var(--ink-muted);font-size:13px;line-height:1.6;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* services — cartes photo modernes : chaque prestation est illustrée par un
   visuel réel du studio, avec un badge icône flottant et un panneau de texte
   clair en pied de carte. Fonctionne aussi bien sur fond clair (home) que
   sombre (page À propos), puisque la carte porte son propre fond. */
.services{padding-top:76px;padding-bottom:76px;background:var(--ivoire);}
/* accent standard = 3.10:1 sur fond ivoire (échec AA) : --accent-deep passe à 4.97:1. */
.services .section-eyebrow{color:var(--accent-deep);}
.services .section-head{margin-bottom:34px;max-width:760px;}
.services .section-head h2{color:var(--noir);}
.services-lead{margin-top:14px;color:var(--gris);font-size:15px;line-height:1.7;max-width:62ch;}

/* SVC — bloc compact tenant dans un écran : à gauche une image d'aperçu qui
   change au survol / focus, à droite les 8 prestations réparties en deux
   colonnes de quatre. Tout est visible d'un coup d'œil, sans scroll. */
.svc{
  max-width:1220px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:48px;align-items:stretch;
}
.svc-preview{
  grid-column:1;grid-row:1;position:relative;border-radius:16px;overflow:hidden;
  min-height:420px;box-shadow:0 30px 60px -24px rgba(17,17,17,.4);
}
.svc-preview-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.08) brightness(.72);
  transition:opacity .5s var(--ease),transform 1.4s var(--ease-cine);
}
.svc-preview-img.is-swapping{opacity:.35;}
.svc-preview::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,0) 40%,rgba(17,17,17,.6) 100%);
}
.svc-preview-tag{
  position:absolute;left:20px;bottom:18px;z-index:2;
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.3px;color:var(--ink);
}

/* liste en deux colonnes exactes de quatre (flux colonne par colonne →
   01-04 à gauche, 05-08 à droite) via grid-auto-flow:column sur 4 rangées. */
.svc-list{
  grid-column:2;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;column-gap:40px;
}
.svc-item{
  position:relative;display:grid;break-inside:avoid;
  grid-template-columns:auto 1fr auto;align-items:baseline;
  column-gap:16px;row-gap:3px;
  padding:15px 6px 15px 4px;
  border-bottom:1px solid rgba(17,17,17,.12);
  cursor:default;transition:padding-left .5s var(--ease-cine);
}
.svc-list .svc-item:first-child,
.svc-list .svc-item:nth-child(5){border-top:1px solid rgba(17,17,17,.12);}
.svc-item:focus{outline:none;}
.svc-item:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:4px;}
.svc-num{
  font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:1.5px;color:var(--ink-faint);
  transition:color .45s var(--ease);
}
.svc-name{
  font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.15;
  color:var(--noir);transition:color .45s var(--ease);
}
.svc-desc{
  grid-column:2;font-size:12.5px;line-height:1.45;color:var(--gris);
  transition:color .45s var(--ease);
}
.svc-arrow{
  grid-row:1;grid-column:3;align-self:center;
  font-size:12px;color:var(--noir);
  opacity:0;transform:translateX(-8px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-cine),color .45s var(--ease);
}
/* état actif (survol clavier/souris) : la ligne s'ouvre légèrement, l'accent
   colore le numéro et la flèche apparaît. */
.svc-item.is-active,
.svc-item:hover{padding-left:14px;}
.svc-item.is-active .svc-num,
.svc-item:hover .svc-num{color:var(--accent-deep);}
.svc-item.is-active .svc-arrow,
.svc-item:hover .svc-arrow{opacity:1;transform:translateX(0);color:var(--accent-deep);}

@media(prefers-reduced-motion:reduce){
  .svc-item,.svc-num,.svc-name,.svc-desc,.svc-arrow,.svc-preview-img{transition:none;}
}
@media(max-width:900px){
  .svc{grid-template-columns:1fr;gap:0;}
  .svc-preview{display:none;}
  .svc-list{grid-column:1;columns:2;}
}
@media(max-width:620px){
  .svc-list{columns:1;}
  .svc-item{padding:16px 4px;}
}
@media(max-width:520px){
  .svc-item{grid-template-columns:auto 1fr;column-gap:16px;}
  .svc-arrow{display:none;}
}

.services-grid{
  max-width:1300px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:26px;
}

.service-card{
  border-radius:18px;overflow:hidden;background:var(--surface);
  box-shadow:0 1px 2px rgba(17,17,17,.04);
  transition:transform .55s var(--ease-cine),box-shadow .55s var(--ease-cine);
}
/* ombre portée en deux couches : un halo doux large + un contact rapproché,
   qui décollent la carte du fond avec la douceur d'un objet posé, pas d'un
   bloc qui saute. */
.service-card:hover{transform:translateY(-8px);box-shadow:0 2px 6px rgba(17,17,17,.06),0 30px 60px -20px rgba(17,17,17,.28);}

.service-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;}
.service-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.08) brightness(.72);transition:transform 1.1s var(--ease-cine),filter .55s var(--ease);}
.service-card:hover .service-card-bg{transform:scale(1.09);filter:saturate(1.1) contrast(1.06) brightness(.85);}
.service-card-shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(17,17,17,.02) 45%, rgba(17,17,17,.55) 100%);}

.service-card-icon{
  position:absolute;left:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#111;display:flex;align-items:center;justify-content:center;
  font-size:15px;box-shadow:0 10px 22px rgba(232,89,12,.35);
  transition:transform .45s var(--ease);
}
.service-card:hover .service-card-icon{transform:scale(1.08) rotate(-8deg);}
.service-card-icon .service-icon{width:18px;height:18px;}

.service-card-body{padding:20px 20px 24px;background:var(--ivoire);}
.service-card-index{
  font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:1.5px;color:var(--accent);
}
.service-card-body h3{
  font-family:var(--font-display);font-weight:600;font-size:16.5px;
  color:var(--noir);margin-top:8px;
}
.service-card-body p{
  margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--gris);
  overflow:hidden;max-height:4.8em; /* ≈ 3 lignes au repos */
  transition:max-height .55s var(--ease-cine);
}
/* au survol, le descriptif se déploie en douceur (hauteur animée, pas de saut) */
.service-card:hover .service-card-body p,
.service-card:focus-within .service-card-body p{
  max-height:16em;
}
@media(prefers-reduced-motion:reduce){
  .service-card-body p{transition:none;}
}

@media(max-width:1000px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr;gap:20px;}
}

/* studio */
.studio{padding-bottom:70px;}
.studio-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:stretch;max-width:1400px;margin:0 auto;}
.studio-frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:12px;background-color:var(--surface);border:.5px solid var(--line);}
.studio-frame-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.08) brightness(.72);}
.studio-frame-tint{opacity:.4;}
/* le texte occupe toute la hauteur de l'image (la plus grande des deux
   colonnes) : le bloc d'intro reste en haut, les stats sont ancrées en bas
   plutôt que de laisser un vide sous un texte plus court que la photo */
.studio-text{display:flex;flex-direction:column;justify-content:space-between;}
.studio-text h2{font-size:clamp(24px,3vw,36px);line-height:1.2;margin-bottom:20px;}
.studio-text p{color:var(--ink-muted);margin-bottom:16px;font-size:15px;line-height:1.75;}
.studio-stats{display:flex;gap:40px;margin-top:32px;flex-wrap:wrap;}
.studio-stats span{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink);display:block;}
.studio-stats p{font-size:11px;letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase;margin-top:6px;}
@media(max-width:820px){.studio-grid{grid-template-columns:1fr;}.studio-text{display:block;}}

/* clients */
.clients{padding:70px 0;}
.clients-marquee{overflow:hidden;white-space:nowrap;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);padding:26px 0;}
.clients-track{display:inline-block;animation:scrollLeft 26s linear infinite;}
.clients-track span{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink-faint);margin:0 40px;letter-spacing:1px;text-transform:uppercase;}

/* testimonials */
.testimonials{background:var(--ivoire);padding-top:100px;padding-bottom:100px;}
.testimonials .section-eyebrow{color:var(--accent-deep);}
.testimonials .section-head h2{color:var(--noir);}
.testimonial-slider{max-width:760px;margin:0 auto;text-align:center;position:relative;min-height:180px;}
.testimonial-track{position:relative;}
.testimonial{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;}
.testimonial.active{opacity:1;transform:translateY(0);position:relative;pointer-events:auto;}
.testimonial-avatar{width:52px;height:52px;border-radius:50%;border:1px solid rgba(17,17,17,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--accent);font-size:16px;}
.testimonial p{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.4vw,26px);line-height:1.4;color:var(--noir);}
.testimonial cite{display:block;margin-top:22px;font-style:normal;color:var(--gris);font-size:13px;}
.testimonial-dots{display:flex;justify-content:center;gap:2px;margin-top:36px;}
/* la cible cliquable (24×24, mini­mum WCAG 2.2 · 2.5.8) est plus grande que le
   point visuel (8px) : on agrandit la zone de clic sans changer l'esthétique. */
.testimonial-dots button{
  width:24px;height:24px;border:0;background:none;cursor:pointer;padding:0;position:relative;
}
.testimonial-dots button::after{
  content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  background:rgba(17,17,17,.18);transform:translate(-50%,-50%);transition:background .3s,transform .3s;
}
.testimonial-dots button.active::after{background:var(--accent);transform:translate(-50%,-50%) scale(1.2);}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1300px;margin:0 auto;}
.contact-text h2{font-size:clamp(26px,3.2vw,40px);line-height:1.15;margin-bottom:16px;}
.contact-text p{color:var(--ink-muted);margin-bottom:28px;font-size:15px;}
.contact-links{display:flex;flex-direction:column;gap:14px;margin-top:34px;}
.contact-links a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-muted);transition:color .2s;}
.contact-links a:hover{color:var(--ink);}
.contact-links i{color:var(--accent);width:16px;}

.contact-form{background:var(--surface);border:.5px solid var(--line);border-radius:14px;padding:34px;}
.form-row{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:12px;letter-spacing:1px;color:var(--ink-faint);text-transform:uppercase;}
.form-row input,.form-row select,.form-row textarea{
  background:var(--surface-2);border:.5px solid var(--line);border-radius:8px;
  color:var(--ink);padding:12px 14px;font-family:var(--font-body);font-size:14px;
  outline:none;transition:border-color .2s;resize:vertical;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--accent);}
.form-reassure{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--ink-muted);display:flex;gap:8px;}
.form-reassure::before{content:"\f3ed";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--accent);flex:none;font-size:12px;line-height:1.55;}
.form-note{margin-top:12px;font-size:13px;color:var(--accent);min-height:18px;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* brand moment — carton de signature, comme un générique de fin */
.brand-moment{text-align:center;padding:120px 8vw 100px;}
.brand-moment-logo{width:min(380px,60vw);margin:0 auto 28px;}
.brand-moment-tag{font-size:12px;letter-spacing:3px;color:var(--ink-faint);text-transform:uppercase;font-weight:500;}

/* footer */
.site-footer{border-top:.5px solid var(--line);background:var(--bg-alt);padding:80px 8vw 34px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;max-width:1400px;margin:0 auto;padding-bottom:56px;}
.footer-brand .logo-footer img{height:72px;}
.footer-brand p{margin-top:18px;max-width:32ch;color:var(--ink-muted);font-size:14px;line-height:1.7;}
.footer-col-title{font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:20px;}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-col a{color:var(--ink-muted);font-size:14px;transition:color .2s;display:inline-flex;align-items:center;gap:8px;}
.footer-col a:hover{color:var(--ink);}
.footer-col a i{color:var(--accent);width:14px;font-size:13px;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1400px;margin:0 auto;padding-top:24px;border-top:.5px solid var(--line);}
.footer-bottom p{font-size:12px;color:var(--ink-faint);}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:36px;}}

/* modal */
.modal{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;}
.modal.open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);}
.modal-panel{position:relative;background:var(--surface);border:.5px solid var(--line);border-radius:14px;max-width:820px;width:100%;overflow:hidden;transform:translateY(16px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);}
.modal.open .modal-panel{transform:translateY(0);opacity:1;}
.modal-media{height:min(50vh,420px);background:linear-gradient(160deg,#202020,#131313);display:flex;align-items:center;justify-content:center;}
.modal-media i{font-size:22px;width:64px;height:64px;border:1px solid var(--ink-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.modal-media iframe,.modal-media video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000;}

/* carte projet sans lecteur intégré (ex. reel Instagram) : lien externe direct */
.project-card-thumb-external{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2a1a3d,#1b1030);}
.project-card-thumb-external i{position:static;transform:none;font-size:32px;width:auto;height:auto;border:0;color:var(--ink);}
.project-card-external:hover .project-card-thumb-external i{transform:scale(1.12);color:var(--accent);}
.project-card-external .project-card-desc{color:var(--ink-faint);display:flex;align-items:center;gap:6px;-webkit-line-clamp:1;}
.project-card-external .project-card-desc i{font-size:10px;color:var(--accent);}
.modal-info{padding:28px 30px 32px;}
.modal-tag{font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;}
.modal-info h3{font-family:var(--font-body);font-weight:500;font-size:22px;margin:12px 0 10px;}
.modal-info p{color:var(--ink-muted);font-size:14px;line-height:1.7;}
.modal-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.4);border:0;color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px;z-index:2;}

@media(max-width:600px){
  .hero h1{font-size:clamp(34px,10vw,56px);}
  .studio-stats{gap:26px;}
}