/* Alex Annen — site.css
   Mesures relevées sur alexannen.com (thème Floka / Elementor) à 1440 et 2000 px de large :
   - textes dans un conteneur centré de 1320 px ;
   - vidéo d'en-tête et grilles d'images en pleine largeur du navigateur (marges 10 à 20 px) ;
   - Funnel Display (titres) + Inter (texte), accent #FF003D, fond #F5F5F5. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/funnel-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/funnel-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0a0a0a;
  --text: #6b6b6b; /* original #7a7a7a : 3,9:1 sur le fond, sous le seuil WCAG AA de 4,5:1 ; #6b6b6b = 4,9:1 */
  --paper: #f5f5f5;
  --white: #fff;
  --line: #e5e5e5;
  --accent: #ff003d;
  --accent-text: #d6002f; /* rouge de la marque pour le petit texte sur fond clair (4,9:1 au lieu de 3,6:1) */
  --star: #ff8000;
  --radius: 20px;
  --container: 1320px;
  --display: "Funnel Display", sans-serif;
  --ease: cubic-bezier(0.37, 0.31, 0.2, 0.85);
  --header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 16px/1.75 "Inter", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 400; margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }
.rich a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rich a:hover { color: var(--accent); text-decoration-thickness: 2px; }
.site-footer p a { text-decoration: underline; text-underline-offset: 3px; }
.rich ul, .rich ol { padding-left: 1.2em; margin: 0 0 1em; }

.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; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--container) + 30px); margin-inline: auto; padding-inline: 15px; }
.eyebrow { font-family: var(--display); font-size: 14px; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; letter-spacing: 0; line-height: 1.3; }
.section-title { font-size: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }

/* ---------- En-tête (format validé par Alex) ---------- */
.site-header { position: sticky; top: 0; z-index: 500; padding: 10px 20px; }
.site-header__bar { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 24px; transition: box-shadow 0.3s; }
.site-header.is-scrolled .site-header__bar { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.site-header__logo img { height: 44px; width: auto; }
.site-nav__list { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.site-nav__list a { font-family: var(--display); font-size: 17px; color: var(--ink); position: relative; padding: 4px 0; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list a[aria-current="page"] { color: var(--accent); }
.site-header__meta { display: flex; align-items: center; gap: 16px; }
.site-header__social { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.site-header__social a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d8d8d8; color: var(--ink); transition: background 0.25s, color 0.25s; }
.site-header__social a:hover { background: var(--ink); color: #fff; }
.site-header__social .icon { width: 16px; height: 16px; }
.site-header__lang { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.site-header__burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.site-header__burger span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--ink); }
@media (max-width: 1024px) {
  .site-nav, .site-header__social, .site-header__lang { display: none; }
  .site-header__burger { display: flex; }
}

.menu-mobile { position: fixed; inset: 0; background: var(--ink); color: #fff; z-index: 1000; padding: 90px 24px 40px; transform: translateX(100%); transition: transform 0.4s var(--ease); overflow-y: auto; visibility: hidden; }
.menu-mobile.is-open { transform: none; visibility: visible; }
.menu-mobile[hidden] { display: block; }
.menu-mobile__close { position: absolute; top: 24px; right: 24px; color: #fff; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile nav a { display: block; padding: 14px 0; font-family: var(--display); font-size: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.menu-mobile .menu-mobile__social { display: flex; gap: 16px; margin-top: 28px; } /* .menu-mobile ul remettait la marge à 0 */
.menu-mobile__lang { display: inline-flex; gap: 4px; margin-top: 36px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; }
.menu-mobile__lang > * { display: flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.menu-mobile__lang [aria-current] { background: #fff; color: var(--ink); }
.menu-mobile__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; }

/* ---------- Vidéo d'en-tête : 85 % de la hauteur d'écran, pleine largeur du navigateur ---------- */
.hero { padding: 0 20px; }
/* Hauteur : 90 % de l'écran visible sur tous les appareils (demande d'Alex, 28 oct.). svh = hauteur avec
   les barres du navigateur mobile affichées, pour que la vidéo ne passe pas sous la barre de Safari. */
.hero__frame { position: relative; height: 90vh; height: 90svh; border-radius: var(--radius); overflow: hidden; background: #111; display: flex; align-items: flex-end; padding: 80px; isolation: isolate; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 55%); }
.hero__content { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; width: 100%; color: #fff; }
.hero__titles { max-width: 52%; }
.hero__title { font-size: clamp(56px, 9.7vw, 140px); font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; letter-spacing: -0.01em; }
.hero__subtitle { font-size: clamp(22px, 2.8vw, 40px); color: #fff; margin-top: 4px; }
.hero__lead { max-width: 380px; text-align: right; }
.hero__lead h3 { font-size: clamp(22px, 2.8vw, 40px); color: #fff; margin-bottom: 10px; line-height: 1.1; }
.hero__lead .rich, .hero__lead p { color: #fff; font-size: 18px; line-height: 1.55; }

/* ---------- Introduction centrée (accueil) ---------- */
.intro { padding: 120px 15px 0; }
.intro__text { max-width: max(460px, 32.5vw); margin: 0 auto; font-size: 18px; line-height: 1.55; }

/* ---------- Grilles en mosaïque, pleine largeur ---------- */
.pf { padding: 105px 15px 0; }
.pf:not(.pf--titled) { padding: 60px 10px 0; }
.pf__heading { font-size: 40px; margin-bottom: 31px; }
/* Accueil : ligne gris clair sous « Portfolio » (séparateur de l'original : 1 px #e5e5e5, 15 px de part et d'autre) */
.pf--titled .pf__heading { padding-bottom: 15px; border-bottom: 1px solid #e5e5e5; margin-bottom: 15px; }
.masonry { --gap: inherit; display: flex; gap: var(--gap, 15px); align-items: flex-start; }
.masonry__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap, 15px); }
/* Sans JavaScript : colonnes CSS (ordre vertical, rendu proche). */
.masonry:not(.is-ready) { display: block; columns: var(--cols, 3); column-gap: var(--gap, 15px); }
.masonry:not(.is-ready) > .masonry__item { break-inside: avoid; margin-bottom: var(--gap, 15px); }
.masonry__item { display: block; position: relative; overflow: hidden; }
.masonry__item img { width: 100%; height: auto; }
.masonry__item.is-hidden { display: none; }

.pf__overlay { position: absolute; inset: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; text-align: center; padding: 15px; opacity: 0; transition: opacity 1s; }
.pf__item:hover .pf__overlay, .pf__item:focus-visible .pf__overlay { opacity: 1; transition-duration: 0.5s; }
.pf__title { font-family: var(--display); font-size: var(--title, 60px); line-height: 1; color: #fff; letter-spacing: -0.02em; }

.gallery { padding: 0 10px; --gap: 10px; }
.gallery .masonry { --gap: 10px; }
.gallery__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2vw; padding: 20px 0 30px; }
.gallery__tab { font-size: 19px; color: var(--ink); padding: 6px 4px; transition: color 0.2s; }
.gallery__tab:hover, .gallery__tab.is-active { color: var(--accent-text); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s; }
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }

/* ---------- En-têtes de page : titre + texte ---------- */
.page-head { padding-top: 70px; }
.split-head { display: grid; grid-template-columns: 1fr 2fr; gap: 0 30px; align-items: start; }
.split-head--half { grid-template-columns: 1.29fr 1fr; }
.split-head__title { font-size: 40px; line-height: 1.2; }
.split-head__text { padding-top: 4px; }

/* ---------- Étapes ---------- */
.steps { padding-top: 120px; }
.steps__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; }
.steps__head h2 { font-size: 40px; line-height: 1.2; }
.steps__intro { margin-bottom: 50px; }
.steps__row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.steps__row:first-child { padding-top: 0; border-top: 0; }
.steps__intro + .steps__list .steps__row:first-child { padding-top: 30px; border-top: 1px solid var(--line); }
.steps__row:last-child { border-bottom: 1px solid var(--line); }
.steps__row h3 { font-size: 32px; line-height: 1.2; }

/* ---------- Appel à l'action ---------- */
.cta { padding-top: 120px; }

/* ---------- À propos ---------- */
.split { padding-top: 100px; }
.split__grid { display: grid; grid-template-columns: 600px 600px; justify-content: space-between; gap: 60px; align-items: start; }
.split__media { overflow: hidden; }
.split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__text h2 { font-size: 40px; margin-bottom: 30px; }

.timeline { margin: 120px 20px 0; padding: 120px 0; background: var(--white); border-radius: var(--radius); }
.timeline__grid { display: grid; grid-template-columns: 440px 1fr; gap: 88px; margin-top: 90px; align-items: start; }
.timeline__cards { display: flex; flex-direction: column; gap: 20px; }
.timeline__card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 26px; }
.timeline__year { font-family: var(--display); font-size: 90px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.02em; }
.timeline__card .rich { font-size: 15px; line-height: 1.7; }
.timeline__images { display: flex; flex-direction: column; gap: 20px; }
.timeline__img { margin: 0; border-radius: var(--radius); overflow: hidden; width: 100%; }
.timeline__img img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Vidéos ---------- */
.video-item { padding-top: 120px; }
.video-item__head { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; margin-bottom: 60px; }
.video-item__titles { padding-top: 30px; }
.video-item h2 { font-size: 40px; line-height: 1.2; }
.video-item__meta { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12); }
.video-frame + .video-frame, .wrap + .wrap .video-frame { margin-top: 30px; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Logos ---------- */
.logos { padding-top: 120px; }
.logos__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.logos__cell { min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 15px; border-right: 1px solid var(--paper); border-bottom: 1px solid var(--paper); }
.logos__img { width: auto; max-width: min(100%, 300px); max-height: 135px; transition: opacity 0.3s, transform 0.4s var(--ease); }
a.logos__cell:hover .logos__img { opacity: 0.7; transform: scale(1.04); }
.logos__cta { flex-direction: column; align-items: flex-end; text-align: right; font-size: 18px; }
.logos__cta p { margin: 0; }

/* ---------- Témoignages ---------- */
.testimonials { padding-top: 120px; }
.testimonials__intro { text-align: right; font-family: var(--display); font-size: 18px; color: var(--ink); letter-spacing: -0.03em; margin: -10px 0 0; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 90px; align-items: start; }
.testi { display: flex; flex-direction: column; gap: 8px; }
.testi__card { background: var(--white); border-radius: var(--radius); padding: 30px; }
.testi__author { padding-top: 26px; padding-bottom: 20px; }
.testi__name { font-family: var(--display); font-size: 18px; color: var(--ink); margin: 0; letter-spacing: -0.03em; }
.testi__role { font-size: 14px; margin: 0; }
.testi__stars { display: flex; gap: 7px; color: var(--star); margin-bottom: 18px; }
.testi__stars .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.testi__text { color: var(--ink); font-size: 18px; line-height: 1.5; }
.testi__company { font-family: var(--display); font-size: 14px; text-transform: uppercase; margin-top: 28px; }
/* Témoignages, version éditoriale : une ligne par voix, phrase forte en grand, sans étoiles */
.tq__list { margin-top: 70px; border-top: 1px solid var(--line); }
.tq { display: grid; grid-template-columns: minmax(180px, 1fr) 2.6fr minmax(200px, 1fr); gap: 30px 60px; margin: 0; padding: 50px 0; border-bottom: 1px solid var(--line); align-items: start; }
.tq__media { justify-self: end; }
.tq__media .tq__img { width: auto; max-width: 100%; max-height: 60vh; } /* photo entière, jamais recadrée */
.tq__who { display: flex; flex-direction: column; gap: 6px; }
.tq__num { font-family: var(--display); font-size: 14px; color: var(--accent); letter-spacing: 0.04em; margin-bottom: 10px; }
.tq__company { font-family: var(--display); font-size: 18px; text-transform: uppercase; color: var(--ink); letter-spacing: -0.01em; }
.tq__name { font-size: 15px; }
.tq__highlight { margin: 0; }
.tq__highlight p { font-family: var(--display); font-size: clamp(26px, 2.6vw, 44px); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.tq__highlight--only p { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.25; }
.tq__full { margin: 22px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; }
.tq__link { display: inline-block; margin-top: 22px; font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 0.3s; }
.tq__link:hover, .tq__link:focus-visible { color: var(--accent); }
.tq__media { display: block; border-radius: var(--radius); overflow: hidden; }
.tq__img { display: block; width: 100%; height: auto; transition: transform 0.8s var(--ease); }
.tq__media:hover .tq__img { transform: scale(1.04); }
@media (max-width: 1024px) {
  .tq, .tq--with-image { grid-template-columns: 1fr 2fr; }
  .tq__media { grid-column: 2; max-width: 360px; }
}
@media (max-width: 767px) {
  .tq__list { margin-top: 40px; }
  .tq, .tq--with-image { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .tq__media { grid-column: auto; max-width: none; }
}

/* ---------- Page projet ---------- */
/* Page projet : toutes les photos (et vidéos) partagent la même largeur (demande d'Alex), réglée
   pour que la plus verticale du lot tienne entière sous l'en-tête (--ratio = son rapport
   largeur/hauteur, le plus petit du lot, posé sur .project__media par project.php). Les photos
   plus larges gardent leurs proportions à cette même largeur et sont donc moins hautes : c'est
   voulu (« pas grave si elles n'ont pas la même hauteur »). Sur ordinateur, la première tient
   aussi dès l'ouverture : --fit-top reprend les marges au-dessus d'elle (25px de .project + 35px
   de .project__media). */
.project { padding: 25px 15px 0; --fit-top: 60px; --fit-bottom: clamp(16px, 2.5vh, 24px); --fit-h: calc(100vh - var(--header-h) - var(--fit-top) - var(--fit-bottom)); }
@supports (height: 100svh) {
  .project { --fit-bottom: clamp(16px, 2.5svh, 24px); --fit-h: calc(100svh - var(--header-h) - var(--fit-top) - var(--fit-bottom)); }
}
.project__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.project__aside { align-self: stretch; }
.project__sticky { position: sticky; top: 180px; max-width: 554px; margin: 0 auto; }
.project__sticky h1 { font-size: 40px; line-height: 1.2; margin-bottom: 20px; }
.project__media { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 35px; --fit-w: min(100%, calc(var(--fit-h) * var(--ratio, 1))); }
.project__image, .project__media .video-frame { width: var(--fit-w); margin: 0; }
.project__image img { border-radius: 14px; }
.project__media .video-frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.project__media .video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Vidéo hébergée sous le texte (colonne de gauche), à ses proportions réelles (le reel Slipknot est
   vertical) : hauteur limitée pour rester lisible sans écraser le texte. Si la colonne devient plus
   haute que l'écran, site.js retire l'effet « fixe » pour que le bas reste accessible. */
.project__video { margin-top: 30px; width: fit-content; max-width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.project__video video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(70svh, 640px); }
.project__sticky.is-static { position: static; }
.project-nav { padding-top: 60px; }
.link-line { color: var(--accent); }
.link-line span { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size 0.3s var(--ease); }
.link-line:hover span { background-position-x: 0; background-size: 100% 1px; }

/* ---------- Contact ---------- */
.contact { padding-top: 120px; }
.contact__grid { display: grid; grid-template-columns: 545px 610px; justify-content: space-between; gap: 60px; align-items: start; }
.contact__info h1 { font-size: 40px; line-height: 1.2; margin-bottom: 26px; }
.contact__info .rich { text-align: justify; }
.contact__lines { margin-top: 1.4em; color: var(--ink); }
.contact__lines a { color: var(--accent); }
.contact__social { list-style: none; display: flex; gap: 6px; margin: 20px 0 0; padding: 0; }
.contact__social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text); transition: color 0.2s; }
.contact__social a:hover { color: var(--accent); }
.contact__social .icon { width: 16px; height: 16px; }
/* Questions fréquentes : volontairement discrètes (petit texte, repliées) */
/* ordinateur : sous les coordonnées (colonne 1), la carte formulaire couvre les deux rangées ; mobile : après le formulaire */
.contact__card { grid-row: span 2; }
.faq { grid-column: 1; align-self: start; margin-top: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.faq__title { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 6px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; color: var(--text); transition: color 0.2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 16px; color: var(--ink); transition: transform 0.3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover, .faq__item[open] summary { color: var(--ink); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__item p { margin: 0 0 14px; color: var(--text); }
.contact__card { background: var(--white); border-radius: var(--radius); padding: 50px; }
.contact__card h2 { font-size: 40px; margin-bottom: 20px; }
.contact__card form { display: grid; gap: 18px; }
.hp { position: absolute; left: -9999px; }
.field { display: grid; gap: 8px; font-size: 15px; color: var(--text); }
.field input, .field textarea { font: inherit; font-size: 15px; padding: 14px 18px; border-radius: 6px; border: 1px solid transparent; background: var(--paper); color: var(--ink); width: 100%; }
.field input::placeholder, .field textarea::placeholder { font-size: 12px; text-transform: uppercase; color: #a5a5a5; }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; background: #fff; }
.field--check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.field--check input { width: 18px; height: 18px; accent-color: var(--accent); }
.btn-send { justify-self: start; background: var(--ink); color: var(--accent); font-family: var(--display); font-size: 20px; padding: 8px 18px; border-radius: 4px; transition: color 0.2s; }
.btn-send:hover { color: #fff; }
.form-success { background: #e4f3ee; color: #17614f; border-radius: 6px; padding: 16px; }
.form-error { background: #fdeceb; color: #b42318; border-radius: 6px; padding: 12px 16px; margin: 0; }

/* ---------- Pages légales, erreur ---------- */
.legal { padding-top: 100px; max-width: 980px; }
.legal h1 { font-size: 40px; margin-bottom: 40px; }
.legal__body h2 { font-size: 28px; margin: 40px 0 12px; }
.legal__body h3 { font-size: 24px; margin: 36px 0 12px; }
.error-page { text-align: center; padding: 160px 15px 40px; }
.error-page h1 { font-size: 96px; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--ink); color: #fff; margin: 120px 10px 10px; border-radius: var(--radius); padding: 117px 0 0; }
.site-footer__grid { display: grid; grid-template-columns: 34% 28% 1fr; grid-template-areas: "brand brand ." "menu legal contact"; gap: 0; padding-bottom: 60px; }
.site-footer__brand { grid-area: brand; }
.site-footer__brand img { width: 154px; height: auto; }
.site-footer__brand p { max-width: 640px; color: #fff; font-size: 18px; line-height: 1.55; margin: 20px 0 50px; }
.site-footer__menu { grid-area: menu; }
.site-footer__legal { grid-area: legal; }
.site-footer__contact { grid-area: contact; padding-top: 30px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__menu a, .site-footer__legal a, .site-footer__contact a { color: var(--accent); font-family: var(--display); font-size: 16px; }
.site-footer__menu li { line-height: 1.75; }
.site-footer__legal li + li { margin-top: 18px; }
.site-footer__menu a:hover, .site-footer__legal a:hover, .site-footer__contact a:hover { color: #fff; }
/* « Gérer les cookies » : bouton présenté comme les liens légaux */
.site-footer__consent { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font-family: var(--display); font-size: 16px; text-align: left; transition: color 0.2s; }
.site-footer__consent:hover { color: #fff; }
.site-footer__consent:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Bannière de consentement : petite carte discrète en bas à gauche, deux choix de même poids */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 1500; width: min(400px, calc(100vw - 40px)); background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); font-size: 14px; line-height: 1.55; }
.consent[hidden] { display: none; }
.consent__title { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
.consent__text { margin: 0 0 14px; color: var(--text); }
.consent__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent__btn { min-height: 44px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.consent__btn:hover { background: var(--accent); border-color: var(--accent); }
.consent__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-footer__mail a { font-size: 32px; line-height: 1.2; }
.site-footer__contact p { margin: 0 0 4px; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 30px 15px 46px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer__bottom p { color: #b5b5b5; margin: 0; font-size: 15px; }
.site-footer__bottom a { color: var(--accent); }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.site-footer__social a:hover { color: #fff; }
.site-footer__social .icon { width: 16px; height: 16px; }
.icon { width: 20px; height: 20px; }

/* ---------- Retour en haut ---------- */
.scroll-top { position: fixed; right: 40px; bottom: 25px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--ink); box-shadow: inset 0 0 0 2px #333; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; z-index: 400; }
.scroll-top.is-visible { opacity: 1; visibility: visible; }
/* Tout en bas de page, le bouton remonte pour ne pas couvrir les icônes du pied de page */
.scroll-top.is-at-bottom { transform: translateY(-80px); }
.scroll-top__ring { position: absolute; inset: 0; }
.scroll-top__ring path { fill: none; stroke: var(--accent); stroke-width: 4; }

/* ---------- Flou fixé en bas d'écran (identique à l'original : 3 bandes superposées) ---------- */
.edge-blur { position: fixed; inset: auto 0 0 0; height: 20vh; pointer-events: none; z-index: 300; transition: opacity 0.2s linear; }
.edge-blur__layer { position: absolute; inset: 0; }
.edge-blur__layer--1 { backdrop-filter: blur(0.875px); -webkit-backdrop-filter: blur(0.875px); -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #000 62.5%, #000 75%, rgba(0, 0, 0, 0) 87.5%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #000 62.5%, #000 75%, rgba(0, 0, 0, 0) 87.5%); }
.edge-blur__layer--2 { backdrop-filter: blur(1.75px); -webkit-backdrop-filter: blur(1.75px); -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, #000 75%, #000 87.5%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, #000 75%, #000 87.5%, rgba(0, 0, 0, 0) 100%); }
.edge-blur__layer--3 { backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, #000 87.5%, #000 100%); }
@media (prefers-reduced-motion: reduce), (max-width: 480px) { .edge-blur { display: none; } }

/* ---------- Curseur personnalisé (ordinateur à pointeur fin uniquement) ---------- */
.cursor-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2.5px solid var(--accent); pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.3s, transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.45s ease, border-color 0.45s ease; will-change: transform; }
.cursor-ring::before { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: opacity 0.25s, background-color 0.45s ease; }
.cursor-ring.is-ready { opacity: 1; }
.cursor-ring.is-active { transform: scale(1.9); background: rgba(255, 0, 61, 0.14); }
.cursor-ring.is-active::before { opacity: 0; }
.cursor-ring.is-down { transform: scale(0.85); }
/* Sur une zone rouge (survol des projets, boutons, liens rouges), le curseur passe en blanc */
.cursor-ring.on-red { border-color: #fff; }
/* Le point central reste visible et blanc sur le rouge, même au survol d'un lien (case rouge des projets) */
.cursor-ring.on-red::before, .cursor-ring.on-red.is-active::before { background: #fff; opacity: 1; }
.cursor-ring.on-red.is-active { background: rgba(255, 255, 255, 0.18); }
/* Variante d'essai « différence » : anneau blanc fusionné en différence avec ce qu'il survole, comme le
   calque de Photoshop. L'inversion se fait pixel par pixel (noir sur fond clair, blanc sur fond noir,
   cyan sur le rouge, négatif sur les photos), donc sans bascule brusque. */
.cursor-ring.is-difference, .cursor-ring.is-difference.on-red { mix-blend-mode: difference; border-color: #fff; }
.cursor-ring.is-difference::before, .cursor-ring.is-difference.on-red::before { background: #fff; }
.cursor-ring.is-difference.is-active, .cursor-ring.is-difference.on-red.is-active { background: #fff; }
.cursor-ring.is-difference.is-active::before { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; }

/* ---------- Visionneuse ---------- */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 10, 10, 0.94); display: flex; align-items: center; justify-content: center; padding: 40px 70px; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); width: auto; height: auto; }
.lightbox button { position: absolute; color: #fff; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Apparitions et effets ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal.is-in { opacity: 1; transform: none; }
[data-tilt] { transform-style: preserve-3d; transition: transform 0.4s ease-out; will-change: transform; }

/* ---------- Tablette ---------- */
@media (max-width: 1366px) {
  .split__grid { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .hero__frame { padding: 40px; }
  .hero__titles { max-width: 60%; }
  .split-head, .split-head--half, .steps__grid, .video-item__head { grid-template-columns: 1fr; gap: 20px; }
  .timeline__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .logos__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
  .project { --fit-top: 0px; } /* une colonne : le texte précède les images */
  .project__grid { grid-template-columns: 1fr; }
  .project__sticky { position: static; margin-left: 0; max-width: none; }
  .project__media { gap: 20px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { grid-row: auto; }
  .faq { margin-top: 10px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "menu legal" "contact contact"; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --header-h: 68px; }
  body { font-size: 15px; }
  .site-header { padding: 8px 10px; }
  .site-header__bar { padding: 6px 10px 6px 16px; }
  .site-header__logo img { height: 36px; }
  .hero { padding: 0 10px; }
  .hero__frame { padding: 24px; }
  .hero__content { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__titles { max-width: none; }
  .hero__lead { text-align: left; }
  .intro { padding-top: 70px; }
  .intro__text { max-width: none; }
  .pf { padding: 60px 10px 0; }
  .pf__heading, .section-title, .split-head__title, .steps__head h2, .video-item h2, .split__text h2, .contact__info h1, .contact__card h2 { font-size: 30px; }
  .pf__title { font-size: min(var(--title, 60px), 26px); }
  .gallery__tab { font-size: 3.7vw; }
  .page-head { padding-top: 40px; }
  .steps, .cta, .logos, .testimonials, .video-item, .contact { padding-top: 70px; }
  .steps__row { grid-template-columns: 1fr; gap: 10px; }
  .steps__row h3 { font-size: 26px; }
  .split__grid { grid-template-columns: 1fr; gap: 30px; }
  .timeline { margin: 70px 10px 0; padding: 60px 0; }
  .timeline__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .timeline__year { font-size: 56px; }
  .timeline__img { max-width: none !important; }
  /* Téléphone : seule la photo du studio (la dernière) reste, entière et sans recadrage */
  .timeline__img:not(:last-child) { display: none; }
  .timeline__img:last-child { aspect-ratio: var(--r, 1.5) !important; }
  .logos__cell { min-height: 130px; }
  .logos__img { max-height: 70px; }
  .logos__cta { grid-column: 1 / -1; align-items: center; text-align: center; }
  .logos__cell--empty { display: none; }
  .testimonials__intro { text-align: left; margin-top: 0; }
  .testimonials__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .contact__card { padding: 26px; }
  .site-footer { margin: 70px 5px 5px; padding-top: 60px; }
  .site-footer__grid { grid-template-columns: 1fr; grid-template-areas: "brand" "menu" "legal" "contact"; row-gap: 30px; }
  .site-footer__brand p { margin-bottom: 0; }
  .site-footer__mail a { font-size: 24px; }
  .scroll-top { right: 16px; bottom: 16px; }
  .consent { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px; }
  /* Mobile : le bouton reste en place et le pied de page lui réserve un espace libre en dessous */
  .scroll-top.is-at-bottom { transform: none; }
  .site-footer__bottom { padding-bottom: 86px; }
  .lightbox { padding: 50px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-tilt], .logos__img, .pf__overlay { transition: none !important; }
  html { scroll-behavior: auto; }
}