/* ============================================================
   KÉVIN VIGREUX — PORTFOLIO — STYLES (intégrés pour un aperçu
   local sans serveur ; identiques sur index.html et creations.html).
   Charte STRICTEMENT monochrome (BRANDING.md §8bis).
   ============================================================ */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --gray: #9A9A9A;
  --gray-soft: #b8b8b8;
  --gray-dark: #767676; /* WCAG AA 4.6:1 sur noir (corrigé, #5A5A5A ne faisait que ~3:1) */
  --line: #1a1a1a;
  --line-soft: rgba(255,255,255,0.12);
  --surface: #0a0a0a;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gut: 6vw;
  --maxw: 1320px;
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--black); color: var(--white); font-family: var(--sans);
  font-weight: 300; font-size: 16px; line-height: 1.7; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.u-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.7rem; font-weight: 400; color: var(--gray); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 400; background: var(--white); color: var(--black); padding: 0.8rem 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.skip-link:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* NAVIGATION (identique sur les 2 pages) */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 26px var(--gut); transition: background .4s ease, padding .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(0,0,0,.82); padding: 15px var(--gut); border-bottom: 1px solid var(--line); }
.nav.scrolled::before { content: ''; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-logo { display: inline-flex; align-items: center; gap: 12px; z-index: 2; }
.nav-logo img, .nav-logo svg { width: 44px; height: auto; display: block; }
/* Signature nav : "VIGREUX" (Jost gras italique) au-dessus de "KEVIN." (League Spartan), alignés à droite — ratio ~2:1 entre les deux lignes. */
.nav-logo .nm { display: flex; flex-direction: column; align-items: flex-end; line-height: .92; }
.nav-logo .nm-main { font-family: 'Jost', var(--sans); font-weight: 700; font-style: italic; font-size: clamp(18px, 2.1vw, 23px); text-transform: uppercase; letter-spacing: .01em; color: var(--white); }
.nav-logo .nm-sub { font-family: 'League Spartan', var(--sans); font-weight: 600; font-size: clamp(9px, 1vw, 11px); text-transform: uppercase; letter-spacing: .16em; color: var(--white); margin-top: 3px; }
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a { position: relative; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--white); opacity: .8; transition: opacity .25s ease; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--white); transition: width .3s var(--ease-in); }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="true"], .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="true"]::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 14px; z-index: 2; }
.nav-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 11px 22px; background: #0a0a0a; border: 1.5px solid #60a5fa; border-radius: 100px; text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; color: #ffffff; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; box-shadow: 0 0 8px rgba(59,130,246,.5), 0 0 26px rgba(59,130,246,.25); }
.nav-cta:hover, .nav-cta:focus-visible { transform: scale(1.04); border-color: #93c5fd; box-shadow: 0 0 14px rgba(59,130,246,.8), 0 0 42px rgba(59,130,246,.45); }
.burger { display: none; padding: 8px; width: 42px; height: 42px; }
.burger span { display: block; width: 24px; height: 1px; background: var(--white); margin: 6px auto; transition: transform .3s ease, opacity .3s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO ACCUEIL — éditorial : nom géant + photo superposée */
/* Zone de scroll dédiée : sa hauteur = durée de l'effet (200vh = 1 écran de scroll pour tout ouvrir).
   ↑ augmente (ex: 260vh) pour ralentir l'effet, ↓ pour l'accélérer. */
/* Zone de scroll dédiée : sa hauteur = durée de l'effet (250vh). ↑ pour ralentir, ↓ pour accélérer. */
.hero { --name-size: clamp(2.6rem, 11vw, 8.6rem); position: relative; height: 250vh; background: var(--black); }
/* Le hero reste "collant" pendant toute l'ouverture du rideau */
.hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Vidéo PLEIN ÉCRAN, révélée du centre vers les bords par clip-path. object-fit: contain => jamais rognée (letterbox noir si besoin). */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: #000; clip-path: inset(0 50% 0 50%); will-change: clip-path; }
.hero-video-el { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* Nom + sous-titre : centrés ensemble, chaque paire de mots s'écarte (transform piloté par le scroll) */
.hero-name-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vw, 34px); pointer-events: none; }
.hero-title { position: static; margin: 0; display: flex; align-items: center; justify-content: center; gap: .1em; white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: var(--name-size); line-height: 1; color: var(--white); }
.hero-title .w { display: block; will-change: transform; }
.hero-subtitle { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em .6em; row-gap: 6px; max-width: min(90vw, 720px); font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.66rem, 1.3vw, .88rem); color: var(--gray); }
.hero-subtitle .ws { display: block; min-width: 0; max-width: 100%; text-align: center; will-change: transform; }
.hero-precision { margin: 0; text-align: center; font-family: var(--sans); font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(.58rem, 1vw, .7rem); color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.55), 0 0 38px rgba(255,255,255,.3); }
/* Boutons + indice de scroll regroupés dans un même conteneur flex : garantit qu'ils ne se chevauchent jamais, même sur les écrans bas (ex. 1366×768). */
.hero-bottom { position: absolute; left: 0; right: 0; bottom: max(20px, 4vh); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vh, 48px); }
.hero-actions { width: fit-content; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hero-hint { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gray-dark); text-align: center; }
.hero-hint-line { display: block; width: 1px; height: 32px; margin: 8px auto 0; background: var(--line); }
/* BOUTON D'ACTION — style LED bleu unique, dominant sur tout le site (voir aussi .nav-cta). */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px;
  background: #0a0a0a; color: #ffffff;
  text-transform: uppercase; letter-spacing: .22em; font-size: .7rem;
  border: 1.5px solid #60a5fa; min-height: 48px;
  box-shadow: 0 0 10px rgba(59,130,246,.55), 0 0 36px rgba(59,130,246,.28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.btn:hover, .btn:focus-visible {
  transform: scale(1.04);
  border-color: #93c5fd;
  box-shadow: 0 0 16px rgba(59,130,246,.85), 0 0 56px rgba(59,130,246,.5);
}

/* HERO COURT (page Créations) — 40-50vh, pas plein écran */
.page-hero { position: relative; min-height: 46vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 128px var(--gut) 40px; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,.05), transparent 70%); }
.page-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 8.5vw, 5.6rem); line-height: .95; letter-spacing: .005em; }
.page-hero p { font-family: var(--sans); max-width: 52ch; margin: 20px auto 0; color: var(--gray); font-size: 1rem; }

/* ONGLETS (page Créations) — sticky sous la nav, scrollspy + smooth scroll (pas un filtre) */
/* top = hauteur de .nav en état "scrolled" (padding 15px + logo 44px + bordure 1px ≈ 75px) */
.tabs { position: sticky; top: 75px; z-index: 90; display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; padding: 22px var(--gut); background: rgba(0,0,0,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tab { position: relative; font-family: var(--sans); text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; color: var(--gray); padding: 8px 2px; min-height: 40px; transition: color .3s ease; }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease-in); }
.tab:hover, .tab:focus-visible, .tab[aria-selected="true"] { color: var(--white); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

/* SECTIONS */
.section { padding: clamp(80px, 12vw, 150px) var(--gut); }
.section-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 56px; }
.section-num { font-family: var(--serif); font-size: .95rem; color: var(--gray-dark); font-weight: 500; letter-spacing: .1em; }
.section-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; }
.section-title em { font-style: italic; font-weight: 400; }
/* Titres mixtes (même système que ma-vision.html) : texte de base petit, sans-serif, capitales espacées ; mots clés en grand serif, le dernier en italique. */
.section-title-mixed { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.8rem, 1vw, .95rem); color: var(--gray-soft); line-height: 1.75; }
.section-title-mixed .st-big { display: inline-block; font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: clamp(2.3rem, 6.2vw, 4.8rem); line-height: .95; color: var(--white); vertical-align: middle; }
.section-title-mixed .st-big.st-italic { font-style: italic; font-weight: 400; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-in), transform .7s var(--ease-in); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* BANDEAU COMPÉTENCES (marquee, transition compétences → certificats) */
:root { --marquee-duration: 50s; } /* ↑ ralentit le défilement, ↓ l'accélère (durée d'un cycle complet) */
.marquee-skills { position: relative; width: 100%; overflow: hidden; background: var(--black); }
/* Bandeau Outils : bandeau secondaire sous le premier, sans liseret — même familles de classes, taille réduite. */
.marquee-tools { position: relative; width: 100%; overflow: hidden; background: var(--black); margin-top: 1cm; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll var(--marquee-duration) linear infinite; will-change: transform; }
.marquee-skills:hover .marquee-track, .marquee-skills:focus-within .marquee-track,
.marquee-tools:hover .marquee-track, .marquee-tools:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; padding: 34px 0; }
.marquee-item { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; color: var(--white); white-space: nowrap; padding: 0 28px; }
.marquee-sep { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1; color: var(--gray-dark); }
/* Bandeau secondaire (Outils) : typo/police plus petites que le bandeau principal */
.marquee-tools .marquee-track { animation-direction: reverse; }
.marquee-tools .marquee-group { padding: 26px 0; }
.marquee-tools .marquee-item { font-size: clamp(1.3rem, 1.8vw, 1.7rem); padding: 0 22px; }
.marquee-tools .marquee-sep { font-size: clamp(.95rem, 1.4vw, 1.25rem); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .marquee-group { padding: 22px 0; }
  .marquee-item { font-size: clamp(1.25rem, 5vw, 1.5rem); padding: 0 16px; }
  .marquee-tools .marquee-group { padding: 16px 0; }
  .marquee-tools .marquee-item { font-size: clamp(1rem, 3.8vw, 1.2rem); padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; transform: none; }
  .marquee-item { white-space: normal; }
  .marquee-group:nth-of-type(2) { display: none; }
}

/* CHIFFRES CLÉS (compteurs animés au scroll, transition hero → à propos) */
.stats { position: relative; background: var(--black); padding: clamp(64px, 10vw, 120px) var(--gut); }
.stats-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; text-align: center; padding: 0 20px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 7vw, 5.625rem); line-height: 1; color: var(--white); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-in), transform .6s var(--ease-in); }
.stat-num.is-in { opacity: 1; transform: translateY(0); }
.stat-label { margin-top: 18px; font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .22em; color: var(--gray); }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .stat:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .stat { border-left: 0 !important; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-num { opacity: 1; transform: none; transition: none; }
}

/* À PROPOS */
.about { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.22; color: var(--white); margin-bottom: 30px; }
.about-copy p { color: var(--gray-soft); margin-bottom: 18px; max-width: 60ch; line-height: 1.75; }
.about-copy strong { color: var(--white); font-weight: 400; }
/* PUNCHLINE — machine à écrire en boucle */
.tw { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.4; color: var(--white); max-width: 34ch; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.tw--lead { max-width: 62ch; margin: 0 0 clamp(48px, 7vw, 84px); padding-top: 0; border-top: 0; }
.tw-box { position: relative; display: block; }
.tw-ghost { display: block; visibility: hidden; }
.tw-anim { position: absolute; inset: 0; }
.tw-text { white-space: pre-wrap; }
.tw-cursor { display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; background: var(--white); vertical-align: -0.12em; animation: tw-blink 1s step-end infinite; }
@keyframes tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tw.tw-static .tw-cursor { display: none; }
@media (max-width: 640px) { .tw { font-size: clamp(1.5rem, 6.5vw, 1.9rem); } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { display: none; animation: none; } }
.about-media { position: relative; padding: 22px 26px 0 0; }
.about-media .frame { position: absolute; top: 0; right: 0; bottom: 40px; left: 34px; border: 1px solid var(--line-soft); z-index: 0; }
.about-media figure { position: relative; z-index: 1; margin: 0; }
.about-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--line-soft); filter: grayscale(1) contrast(1.02); transition: filter .6s ease; }
.about-media:hover img { filter: grayscale(0) contrast(1); }
.about-media figcaption { margin-top: 16px; letter-spacing: .22em; text-transform: uppercase; font-size: .66rem; color: var(--gray-dark); }
/* Diaporama À propos : fondu N&B <-> couleur toutes les 4s */
.about-slides { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line-soft); overflow: hidden; }
.about-media .about-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; filter: none; opacity: 0; transition: opacity 1.2s ease; }
.about-media .about-slide.is-active { opacity: 1; }

/* CAS CLIENT — VALOR (preuve client, entre À propos et Compétences) */
.case-kicker { display: block; margin-bottom: 18px; }
.case-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; color: var(--white); margin-bottom: 24px; }
.case-title em { font-style: italic; font-weight: 400; }
.case-flow { max-width: 760px; }
.case-p { font-size: 1.02rem; line-height: 1.85; max-width: 62ch; margin-bottom: 40px; }
.case-quote { border-top: 1px solid var(--line-soft); padding-top: 28px; margin-top: 40px; max-width: 62ch; }
.case-quote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.55; color: var(--white); margin-bottom: 12px; }
.case-quote cite { font-style: normal; text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--gray-dark); }
.case-quote + .cta-row { margin-top: 36px; }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-media-main { grid-column: 1 / -1; }

/* Desktop/tablette : disposition d'origine en 2 colonnes (texte+avis+bouton à gauche, visuels à droite).
   L'ordre "visuels, avis, bouton" du HTML ne s'applique qu'en dessous de 900px (voir plus bas). */
@media (min-width: 901px) {
  .case-flow { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .case-title { grid-column: 1; grid-row: 1; }
  .case-p { grid-column: 1; grid-row: 2; }
  .case-quote { grid-column: 1; grid-row: 3; margin-top: 0; }
  .case-quote + .cta-row { grid-column: 1; grid-row: 4; margin-top: 28px; }
  .case-gallery { grid-column: 2; grid-row: 1 / 5; align-self: center; }
}

/* FAQ (accueil) — SEO local Morbihan/Bretagne */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); text-align: left; margin-top: 44px; }
.faq-q { font-family: var(--serif); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--white); line-height: 1.35; margin-bottom: 10px; padding-left: 20px; position: relative; }
.faq-q::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--gray-dark); }
.faq-a { font-family: var(--sans); font-size: .86rem; color: var(--gray-soft); line-height: 1.65; padding-left: 20px; }
.faq-a a { color: var(--white); -webkit-text-fill-color: var(--white); border-bottom: 1px solid var(--line-soft); }
.faq-a a:hover, .faq-a a:focus-visible { border-color: var(--white); }
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }

/* FAQ — <details>/<summary> natif : accordéon sur mobile (question repliée par défaut), tout reste
   visible et non cliquable sur desktop/tablette (aucun JS requis, comportement garanti par le navigateur). */
.faq-item .faq-q { list-style: none; cursor: default; }
.faq-item .faq-q::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
  .faq-item { border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
  .faq-item .faq-q { position: relative; cursor: pointer; padding-right: 28px; margin-bottom: 0; }
  .faq-item .faq-q::after { content: '▾'; position: absolute; right: 0; top: 0; font-size: .85em; color: var(--gray-dark); transition: transform .3s var(--ease-in); }
  .faq-item[open] .faq-q::after { transform: rotate(180deg); }
  .faq-item .faq-a { margin-top: 12px; padding-left: 20px; }
}
@media (min-width: 641px) {
  .faq-item .faq-a { display: block; }
}

/* CERTIFICATS (carrousel 3D coverflow) */
.cert-head { text-align: center; max-width: 52ch; margin: 0 auto 52px; }
.cert-head .u-label { display: block; margin-bottom: 14px; }
.cert-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.6rem); }

.cert-carousel { position: relative; max-width: 100%; margin-bottom: 44px; overflow: hidden; }
.cert-stage { position: relative; max-width: 100%; height: 460px; margin: 0 auto; perspective: 1400px; overflow: hidden; }
.cert-stage:focus-visible { outline: none; }

/* Carte : positionnement (translate/scale/rotateY) piloté par data-offset (posé en JS), séparé du flip (voir .cert-card-inner) */
.cert-card { display: block; position: absolute; top: 50%; left: 50%; width: 300px; height: 420px; margin: -210px 0 0 -150px; perspective: 1400px; text-align: left; cursor: pointer; transition: transform .8s cubic-bezier(0.25,1,0.5,1), opacity .8s cubic-bezier(0.25,1,0.5,1), filter .8s cubic-bezier(0.25,1,0.5,1); }
.cert-card[data-offset="0"] { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; z-index: 30; filter: brightness(1); cursor: default; }
.cert-card[data-offset="1"] { transform: translateX(220px) scale(0.82) rotateY(-26deg); opacity: .55; z-index: 20; filter: brightness(.7); }
.cert-card[data-offset="-1"] { transform: translateX(-220px) scale(0.82) rotateY(26deg); opacity: .55; z-index: 20; filter: brightness(.7); }
.cert-card[data-offset="2"] { transform: translateX(380px) scale(0.66) rotateY(-36deg); opacity: .25; z-index: 10; filter: brightness(.5); }
.cert-card[data-offset="-2"] { transform: translateX(-380px) scale(0.66) rotateY(36deg); opacity: .25; z-index: 10; filter: brightness(.5); }
.cert-card[data-offset="3"], .cert-card[data-offset="-3"] { transform: translateX(0) scale(.4) rotateY(0deg); opacity: 0; z-index: 0; pointer-events: none; }

.cert-card-inner { position: relative; width: 100%; height: 100%; border-radius: 4px; transition: transform .7s var(--ease-in); transform-style: preserve-3d; }
.cert-card[data-offset="0"]:hover .cert-card-inner, .cert-card[data-offset="0"].is-flipped .cert-card-inner, .cert-card[data-offset="0"]:focus-visible .cert-card-inner { transform: rotateY(180deg); }
.cert-face { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 4px; border: 1px solid var(--line-soft); background: var(--surface); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 25px 60px rgba(0,0,0,.6); }
.cert-media { position: relative; aspect-ratio: 4/3; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.cert-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-front-meta { padding: 18px 22px; }
.cert-issuer { text-transform: uppercase; letter-spacing: .18em; font-size: .6rem; color: var(--gray-dark); margin-bottom: 8px; }
.cert-title { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; color: var(--white); }
.cert-face--back { transform: rotateY(180deg); align-items: center; justify-content: center; text-align: center; padding: 34px 30px; gap: 14px; }
.cert-back-issuer { text-transform: uppercase; letter-spacing: .18em; font-size: .6rem; color: var(--gray); }
.cert-back-desc { font-size: .89rem; line-height: 1.62; color: rgba(255,255,255,.78); }
.cert-badge { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; color: var(--black); background: var(--white); padding: 10px 18px; border-radius: 100px; }

/* Flèches (même langage visuel que la lightbox) + pastilles */
.cert-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; width: 46px; height: 46px; border: 1px solid var(--line-soft); border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; transition: border-color .25s ease, background-color .25s ease; }
.cert-nav:hover, .cert-nav:focus-visible { border-color: var(--white); background: rgba(0,0,0,.8); }
.cert-nav svg { width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cert-prev { left: 0; }
.cert-next { right: 0; }
.cert-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 28px; }
.cert-dot { height: 8px; width: 8px; border-radius: 100px; background: var(--line-soft); border: 0; transition: width .3s ease, background-color .3s ease; }
.cert-dot[aria-current="true"] { width: 26px; background: var(--white); }

@media (max-width: 860px) {
  .cert-card[data-offset="2"], .cert-card[data-offset="-2"] { opacity: 0; pointer-events: none; }
  .cert-card[data-offset="1"] { transform: translateX(150px) scale(.78) rotateY(-26deg); }
  .cert-card[data-offset="-1"] { transform: translateX(-150px) scale(.78) rotateY(26deg); }
}
@media (max-width: 560px) {
  .cert-stage { height: 400px; }
  .cert-card { width: 220px; height: 340px; margin: -170px 0 0 -110px; }
  .cert-card[data-offset="1"] { transform: translateX(78px) scale(.7) rotateY(-22deg); }
  .cert-card[data-offset="-1"] { transform: translateX(-78px) scale(.7) rotateY(22deg); }
  .cert-nav { width: 38px; height: 38px; }
  .cert-nav svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  .cert-card { width: 190px; height: 320px; margin: -160px 0 0 -95px; }
  .cert-card[data-offset="1"] { transform: translateX(62px) scale(.66) rotateY(-20deg); }
  .cert-card[data-offset="-1"] { transform: translateX(-62px) scale(.66) rotateY(20deg); }
}
@media (prefers-reduced-motion: reduce) { .cert-card-inner, .cert-card { transition: none; } }

/* COMPÉTENCES (blocs alternés image / texte) */
.skill-block { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 84px); align-items: center; }
.skill-block + .skill-block { margin-top: clamp(72px, 12vw, 150px); }
.skill-block--1 { grid-template-columns: 1.05fr 0.95fr; }
.skill-block--2 { grid-template-columns: 0.95fr 1.05fr; }
.skill-block--3 { grid-template-columns: 1.12fr 0.88fr; }
.skill-block .skill-media { grid-column: 1; grid-row: 1; }
.skill-block .skill-text { grid-column: 2; grid-row: 1; }
.skill-block--rev .skill-media { grid-column: 2; }
.skill-block--rev .skill-text { grid-column: 1; }
.skill-media { margin: 0; }
.skill-media .frame-media { will-change: transform; }
.skill-media .real { transition: opacity .6s ease, transform .4s var(--ease-in), filter .4s ease; }
.skill-media:hover .frame-media.has-media .real { transform: scale(1.03); }
.skill-text { position: relative; }
.skill-num { position: absolute; top: -.42em; left: -.04em; z-index: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(6rem, 15vw, 13rem); line-height: 1; color: #101010; pointer-events: none; user-select: none; }
.skill-text > :not(.skill-num) { position: relative; z-index: 1; }
.skill-label { color: #28b2ff; text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; margin-bottom: 18px; }
.skill-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; margin-bottom: 22px; }
/* Titre mixte (même système que ma-vision.html, échelle adaptée à la colonne plus étroite) */
.skill-title-mixed { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--gray-soft); line-height: 1.7; margin-bottom: 22px; }
.skill-title-mixed .st-big { display: inline-block; font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.05; color: var(--white); vertical-align: middle; }
.skill-title-mixed .st-big.st-italic { font-style: italic; font-weight: 400; }
.skill-p { color: var(--gray-soft); font-size: 1.02rem; line-height: 1.95; max-width: 48ch; }
/* Entrée au scroll : image et texte arrivent chacun de leur côté (texte en léger décalage) */
.skill-media, .skill-text { opacity: 0; transition: opacity .8s ease, transform .8s var(--ease-in); }
.skill-media { transform: translate(-42px, 0); }
.skill-text { transform: translate(42px, 0); transition-delay: .13s; }
.skill-block--rev .skill-media { transform: translate(42px, 0); }
.skill-block--rev .skill-text { transform: translate(-42px, 0); }
.skill-block.in .skill-media, .skill-block.in .skill-text { opacity: 1; transform: translate(0, 0); }

/* MA MÉTHODE (sticky + crossfade, transition identité → portfolio) */
.method-grid { display: grid; grid-template-columns: minmax(0, 47%) 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.method-sticky { position: sticky; top: 110px; }
.method-frame { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; border: 1px solid var(--line-soft); background: #0a0a0a; }
.method-frame .frame-media { width: 100%; height: 100%; background: #0a0a0a; }
.method-img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease-in); }
.method-img.is-active { opacity: 1; }
.method-frame--mobile { display: none; }
.method-steps { display: flex; flex-direction: column; }
.method-step { min-height: 78vh; display: flex; align-items: center; opacity: .35; transition: opacity .5s var(--ease-in); }
.method-step.is-active { opacity: 1; }
.method-step-inner { position: relative; width: 100%; padding: 40px 0; }
.method-num { position: absolute; top: -.14em; left: -.03em; z-index: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(3.75rem, 9vw, 6.25rem); line-height: 1; color: var(--white); opacity: .25; pointer-events: none; user-select: none; }
.method-step-inner > :not(.method-num) { position: relative; z-index: 1; }
.method-step-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin: .55em 0 24px; }
.method-step-text { font-family: var(--sans); font-size: 1.05rem; line-height: 1.8; color: var(--gray); max-width: 62ch; }
@media (max-width: 900px) {
  .method-grid { display: block; }
  .method-sticky { display: none; }
  .method-frame--mobile { display: block; margin-bottom: 28px; }
  .method-step { min-height: 0; align-items: stretch; flex-direction: column; opacity: 1; padding: 34px 0; border-bottom: 1px solid var(--line); }
  .method-step:last-child { border-bottom: 0; }
  .method-num { font-size: clamp(3rem, 16vw, 4.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .method-img { transition: none; }
  .method-step { transition: none; opacity: 1; }
}

/* CRÉATIONS */
.creations-intro { max-width: 60ch; color: var(--gray-soft); margin-bottom: 20px; }
.group { scroll-margin-top: 150px; }
.group + .group { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(48px, 6vw, 72px); }
.group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 40px; }
.group-head .g-num { display: block; color: #28b2ff; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 12px; }
.group-head h2, .group-head h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.group-head p { color: var(--gray); max-width: 40ch; text-align: right; font-size: .92rem; }
.masonry { column-count: 3; column-gap: 24px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.video-grid .card { margin-bottom: 0; }
/* VISUELS — grille de vignettes campagnes (4:5), chacune mène à campagne.html */
.campaign-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.campaign-grid .card { margin-bottom: 0; }
/* BROCHURE — colonne texte (40%) + accordéon horizontal d'images (60%) */
.brochure-layout { display: grid; grid-template-columns: 40% 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.brochure-text h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin-bottom: 22px; }
.brochure-text p { color: var(--gray-soft); font-size: .95rem; line-height: 1.75; margin-bottom: 18px; }
.brochure-text p:last-child { margin-bottom: 0; }
.brochure-accordion { display: flex; gap: 6px; height: clamp(360px, 46vw, 560px); }
.brochure-panel { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 1px solid var(--line-soft); background: #060606; overflow: hidden; cursor: pointer; transition: flex-grow .5s var(--ease-in), border-color .35s ease; }
.brochure-panel:hover, .brochure-panel:focus-visible { flex-grow: 6; }
.brochure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transform: scale(1.04); transition: filter .5s var(--ease-in), transform .6s var(--ease-in); }
.brochure-panel:hover .brochure-img, .brochure-panel:focus-visible .brochure-img { object-fit: contain; filter: brightness(1); transform: scale(1); }
.brochure-label { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: var(--white); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.brochure-panel:hover .brochure-label, .brochure-panel:focus-visible .brochure-label { opacity: 1; transform: none; }
.card { display: block; width: 100%; break-inside: avoid; margin-bottom: 24px; border: 1px solid var(--line-soft); background: var(--surface); overflow: hidden; text-align: left; opacity: 0; transform: translateY(26px); transition: border-color .35s ease, transform .7s var(--ease-in), opacity .7s var(--ease-in); transition-delay: var(--d, 0ms); }
.card.is-in { opacity: 1; transform: none; }
.card.is-in:hover, .card.is-in:focus-visible { border-color: rgba(255,255,255,.4); transform: translateY(-3px); }
.frame-media { position: relative; aspect-ratio: var(--ar, 4/5); overflow: hidden; background: #060606; }
.frame-media .real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform .5s var(--ease-in), filter .4s ease; }
.frame-media.has-media .real { opacity: 1; transform: scale(1); }
.card:hover .frame-media.has-media .real, .card:focus-visible .frame-media.has-media .real { transform: scale(1.04); filter: brightness(1.06); }
.ph { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; border: 1px solid var(--line-soft); padding: 18px; transition: opacity .4s ease; }
.frame-media.has-media .ph { opacity: 0; pointer-events: none; }
.ph .ico { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; display: grid; place-items: center; color: var(--gray); font-size: .8rem; }
.ph .l { text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: #d2d2d2; }
.ph .s { text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; color: var(--gray-dark); }
.play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; display: grid; place-items: center; opacity: 0; z-index: 2; pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease-in); }
.frame-media.has-media .play { opacity: 1; }
.card:hover .play, .card:focus-visible .play { transform: translate(-50%,-50%) scale(1.1); }
.play::before { content: ''; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--white); margin-left: 3px; }
.tag { position: absolute; top: 15px; left: 15px; z-index: 2; padding: 6px 11px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.5); backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; color: var(--gray); }
.card-cta { position: absolute; right: 15px; bottom: 15px; z-index: 2; padding: 10px 18px; border-radius: 100px; background: var(--white); color: var(--black); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; font-weight: 600; transition: transform .3s var(--ease-in); }
.card:hover .card-cta, .card:focus-visible .card-cta { transform: translateY(-2px); }
.card-meta { padding: 17px 18px 21px; }
.card-meta h3, .card-meta h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 6px; }
.card-meta p { color: var(--gray); font-size: .86rem; line-height: 1.55; }
.preview-cta { text-align: center; margin-top: 56px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 4vw, 40px); }
.cta-row--center { justify-content: center; }
.btn-line { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 17px 32px; border: 1px solid var(--line-soft); text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; color: var(--white); transition: background .3s var(--ease-in), color .3s var(--ease-in), border-color .3s var(--ease-in); }
.btn-line:hover, .btn-line:focus-visible { background: var(--white); color: var(--black); border-color: var(--white); }

/* CARDS CATÉGORIES CRÉATIONS (accueil) — panneaux dégradés premium au survol */
.gcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-top: 56px; }
.gcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 340px; height: 420px; border-radius: 4px; overflow: hidden; isolation: isolate; }
.gcard-panel { position: absolute; top: 0; left: 46px; width: 52%; height: 100%; border-radius: 4px; transform: skewX(15deg); background: linear-gradient(315deg, var(--grad-from), var(--grad-to)); transition: transform .55s var(--ease-in), left .55s var(--ease-in), width .55s var(--ease-in); z-index: 0; }
.gcard-panel--blur { filter: blur(34px); opacity: .8; }
.gcard:hover .gcard-panel, .gcard:focus-within .gcard-panel { transform: skewX(0deg); left: 18px; width: calc(100% - 36px); }
.gcard-blob { position: absolute; z-index: 1; width: 0; height: 0; border-radius: 4px; opacity: 0; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0,0,0,.3); transition: all .6s var(--ease-in); pointer-events: none; animation: gblob 3.6s ease-in-out infinite; }
.gcard-blob--tl { top: 0; left: 0; }
.gcard-blob--br { bottom: 0; right: 0; animation-delay: -1.8s; }
.gcard:hover .gcard-blob--tl, .gcard:focus-within .gcard-blob--tl { top: -36px; left: 36px; width: 84px; height: 84px; opacity: 1; }
.gcard:hover .gcard-blob--br, .gcard:focus-within .gcard-blob--br { bottom: -36px; right: 36px; width: 84px; height: 84px; opacity: 1; }
@keyframes gblob { 0%, 100% { translate: 0 8px; } 50% { translate: 0 -8px; } }
.gcard-content { position: relative; z-index: 2; padding: 30px 30px 34px; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-soft); border-radius: 4px; transition: padding .5s var(--ease-in); }
.gcard:hover .gcard-content, .gcard:focus-within .gcard-content { padding-top: 54px; }
.gcard-num { display: block; font-family: var(--serif); font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 12px; letter-spacing: .08em; }
.gcard-title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--white); margin-bottom: 14px; }
.gcard-desc { font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.72); margin-bottom: 24px; }
.gcard-cta { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--black); background: var(--white); padding: 12px 20px; border-radius: 100px; transition: transform .3s var(--ease-in); }
.gcard:hover .gcard-cta, .gcard:focus-within .gcard-cta { transform: translateY(-2px); }
@media (max-width: 480px) { .gcard { height: 380px; } }
/* Mobile uniquement : la rangée de cartes devient un carrousel (défilement tactile + accroche par carte), desktop/tablette inchangés. */
@media (max-width: 640px) {
  .gcards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    max-width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin-top: 40px;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .gcards::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 85%; width: 85%; max-width: 340px; height: 380px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .gcard-panel, .gcard-content, .gcard-blob, .gcard-cta { transition: none; } .gcard-blob { animation: none; } }

/* CONTACT */
.contact { text-align: center; }
.contact-lead { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 400; max-width: 22ch; margin: 0 auto 14px; line-height: 1.25; }
.contact-sub { color: var(--gray-soft); max-width: 52ch; margin: 0 auto; }
.contact-area { color: var(--gray-dark); font-size: .88rem; max-width: 52ch; margin: 14px auto 0; }
.contact-list { list-style: none; display: grid; gap: 14px; margin-top: 44px; justify-items: center; }
.contact-list a { display: inline-flex; align-items: center; gap: 12px; font-size: 1.05rem; letter-spacing: .02em; padding: 6px 2px; border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; min-height: 44px; }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--gray); border-color: var(--line-soft); }
.contact-list .ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; }
.contact-mark { display: block; width: 200px; max-width: 60vw; height: auto; margin: 56px auto 0; opacity: .85; }

/* ---- FORMULAIRE DE CONTACT (Netlify Forms) ---- */
.contact-form { max-width: 640px; margin: 52px auto 0; text-align: left; display: flex; flex-direction: column; gap: 22px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field label { font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--gray); }
.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--white);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 2px;
  padding: 14px 16px; transition: border-color .25s ease, background .25s ease;
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--gray-dark); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--white); background: #111; }
.cf-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; font-family: var(--sans); }
.cf-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.cf-field select:invalid { color: var(--gray-dark); }
.cf-field select option { background: var(--black); color: var(--white); }
.cf-submit { align-self: flex-start; margin-top: 4px; }
.cf-submit[disabled] { opacity: .55; cursor: default; }
.cf-status { font-size: .85rem; color: var(--gray-soft); min-height: 1.4em; margin: 0; }
.cf-status.is-success::before { content: '✓ '; }
.cf-status.is-error::before { content: '× '; }
.contact-or { text-transform: uppercase; letter-spacing: .3em; font-size: .68rem; color: var(--gray-dark); text-align: center; margin: 52px 0 24px; }
@media (max-width: 640px) { .cf-row { grid-template-columns: 1fr; } }

/* FOOTER */
.footer { padding: 30px var(--gut) 44px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--gray-dark); font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; }
.footer-disclaimer { flex-basis: 100%; text-transform: none; letter-spacing: .01em; font-size: .64rem; color: var(--gray-dark); opacity: .75; }
.footer a:hover { color: var(--white); }

/* LIGHTBOX */
.lb { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 6vh 5vw; background: rgba(0,0,0,.94); }
.lb.open { display: grid; }
.lb-card { width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.lb-media { position: relative; width: 100%; min-height: 240px; max-height: 70vh; overflow: hidden; background: #060606; border: 1px solid var(--line-soft); display: grid; place-items: center; }
.lb-media img, .lb-media video { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; }
.lb-media iframe { width: 100%; aspect-ratio: 16/9; max-height: 70vh; border: 0; }
.lb-missing { padding: 64px 30px; text-align: center; color: var(--gray); }
.lb-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 22px 4px 0; }
.lb-info h4 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 6px; }
.lb-info p { color: var(--gray); font-size: .92rem; max-width: 62ch; }
.lb-close { position: absolute; top: 22px; right: 22px; z-index: 2; width: 42px; height: 42px; flex: none; border: 1px solid var(--line-soft); background: rgba(0,0,0,.5); font-size: 1.2rem; line-height: 1; transition: border-color .25s ease, transform .25s ease; }
.lb-close:hover, .lb-close:focus-visible { border-color: var(--white); transform: rotate(90deg); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: 1px solid var(--line-soft); border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; transition: border-color .25s ease, background-color .25s ease; }
.lb-nav:hover, .lb-nav:focus-visible { border-color: var(--white); background: rgba(0,0,0,.8); }
.lb-nav svg { width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-nav[hidden] { display: none; }
@media (max-width: 640px) { .lb-nav { width: 38px; height: 38px; } .lb-nav svg { width: 16px; height: 16px; } .lb-prev { left: 6px; } .lb-next { right: 6px; } .lb-close { top: 14px; right: 14px; } }

/* ============================================================
   EFFET ARGENTÉ — dégradé texte (background-clip: text), linéaire
   blanc→gris clair, réservé aux PARAGRAPHES de contenu (Inter).
   Volontairement exclu : titres/Bodoni Moda et toute grosse typo,
   nav, boutons/CTA, labels et kickers en petites capitales,
   formulaire de contact, footer, liens de contact directs, chiffres
   et filigranes décoratifs (restent en blanc plein, lisibilité prioritaire).
   ============================================================ */
.about-copy p,
.case-p,
.faq-a,
.skill-p,
.method-step-text,
.creations-intro,
.group-head p,
.brochure-text p,
.card-meta p,
.contact-sub,
.cert-back-desc,
.lb-info p,
.page-hero p,
.gcard-desc {
  background: linear-gradient(to bottom, #ffffff, #c4c2c0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Halo LED renforcé au repos sur mobile : pas de survol tactile, donc le halo "hover" ne se voit jamais sans ce coup de pouce. */
@media (max-width: 768px) {
  .btn, .nav-cta {
    box-shadow: 0 0 16px rgba(59,130,246,.85), 0 0 56px rgba(59,130,246,.5);
  }
}

/* "VOIR PLUS" — découpage manuel (texte à cacher marqué .more-text, bouton statique dans le HTML avec onclick intégré) */
.u-clamp-toggle { display: none; }
@media (max-width: 640px) {
  .more-text { display: none; }
  .u-clampable.is-expanded .more-text { display: revert; }
  .u-clamp-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--white); border: 0; border-bottom: 1px solid var(--line-soft); padding: 2px 0; background: none; }
  .u-clamp-toggle:hover, .u-clamp-toggle:focus-visible { border-color: var(--white); }
  .u-clamp-toggle .ico { display: inline-block; transition: transform .3s var(--ease-in); }
  .u-clamp-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
}

/* RESPONSIVE */
@media (max-width: 1080px) { .masonry { column-count: 2; } .campaign-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about-media { padding: 16px 18px 0 0; max-width: 380px; }
  .group-head { flex-direction: column; align-items: flex-start; }
  .group-head p { text-align: left; }
  .brochure-layout { grid-template-columns: 1fr; gap: 44px; }
  .brochure-accordion { flex-direction: column; height: auto; gap: 14px; }
  .brochure-panel { flex: none; aspect-ratio: 16/9; }
  .brochure-img { filter: brightness(.75); transform: scale(1); }
  .brochure-panel:active .brochure-img { filter: brightness(.92); }
  .brochure-label { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .nav-links { position: fixed; top: 0; right: 0; left: auto; width: min(80vw, 330px); height: 100vh; height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch; flex-direction: column; justify-content: safe center; gap: 22px; background: rgba(0,0,0,.97); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .4s var(--ease-in); padding: 90px 30px 30px; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: .9rem; }
  .nav-cta { display: none; }
  .burger { display: block; }
}
@media (max-width: 768px) {
  .section-head { margin-bottom: 40px; }
  .lb-info { flex-direction: column; }
  .tabs { gap: 16px; padding: 30px var(--gut); }
  .tab { font-size: .64rem; letter-spacing: .2em; }
  /* Hero mobile : même effet rideau (les mots sortent). Le JS bascule en fondu si le nom ne tient pas en largeur. */
  .hero-title { font-size: clamp(2rem, 13vw, 3.6rem); }
  /* Le sous-titre peut être plus long que le nom : autorise le retour à la ligne entre ws-left et ws-right sur mobile. */
  .hero-subtitle { flex-wrap: wrap; row-gap: 6px; padding: 0 var(--gut); }
  /* Compétences mobile : pile verticale (image au-dessus, texte en dessous), entrée par le bas */
  .skill-block, .skill-block--1, .skill-block--2, .skill-block--3, .skill-block--rev { grid-template-columns: 1fr; gap: 22px; }
  .skill-block .skill-media, .skill-block--rev .skill-media { grid-column: 1; grid-row: 1; }
  .skill-block .skill-text, .skill-block--rev .skill-text { grid-column: 1; grid-row: 2; }
  .skill-media, .skill-text, .skill-block--rev .skill-media, .skill-block--rev .skill-text { transform: translate(0, 32px); }
  .skill-num { font-size: clamp(5rem, 26vw, 9rem); }
  .page-hero { padding: 140px var(--gut) 52px; }
}
@media (max-width: 620px) { .masonry { column-count: 1; } }
@media (max-width: 700px) { .video-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .campaign-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .frame-media .real { opacity: 1; transform: none; }
  .skill-media, .skill-text { opacity: 1; transform: none; }
  .brochure-accordion { flex-wrap: wrap; height: auto; }
  .brochure-panel { flex: 1 1 45%; aspect-ratio: 4/3; transition: none; }
  .brochure-panel:hover, .brochure-panel:focus-visible { flex-grow: 1; }
  .brochure-img { filter: brightness(.9); transform: none; transition: none; }
  .brochure-panel:hover .brochure-img, .brochure-panel:focus-visible .brochure-img { filter: brightness(.9); transform: none; }
  .brochure-label { opacity: 1; transform: none; transition: none; }
}