/* Polices de la maquette : Space Grotesk, PP Mori, Nirakolu */
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-Extralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-ExtralightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Nirakolu"; src: url("fonts/Nirakolu.woff2") format("woff2"); font-display: swap; }

:root {
  --navy: #000080;
  --blue: #3131dd;
  --ink: #0d0d0d;
  --black: #161616;
  --grey: #aaa;
  --muted: #6e6e6e;
  --lav: #e9e9ff;
  --box: #efefef;
  --sg: "Space Grotesk", system-ui, sans-serif;
  --mori: "PP Mori", "Space Grotesk", system-ui, sans-serif;
  --hand: "Nirakolu", "Space Grotesk", cursive;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  /* 1px de la maquette (1280 px de large) */
  --u: min(1px, .078125vw);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.wrap { width: min(100% - 32px, calc(1176 * var(--u))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons noirs en pilule */
.pill-btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 100px; background: var(--black); color: #fff; font-weight: 300; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.pill-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pill-btn:hover { background: var(--navy); } }
.pill-btn img { border-radius: 50%; object-fit: cover; }

/* En-tête */
.nav { position: fixed; top: calc(26 * var(--u)); left: 50%; z-index: 50; display: flex; align-items: center; width: min(100% - 24px, calc(580 * var(--u))); min-height: 52px; height: calc(61 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u)); transform: translateX(-50%); border: 1px solid var(--navy); border-radius: 100px; background: #fff; transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease; }
/* En défilement : effet verre dépoli */
.nav.is-scrolled { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 8px 32px rgba(0, 0, 60, .14), inset 0 0 0 1px rgba(0, 0, 128, .18); }
.nav-logo { flex-shrink: 0; width: 40px; }
.nav-links { display: flex; gap: calc(40 * var(--u)); margin: 0 auto 0 calc(84 * var(--u)); color: var(--navy); font-size: 16px; }
.nav-links a { text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { text-decoration: underline; text-underline-offset: .25em; } }
.nav .pill-btn { gap: 9px; height: 36px; padding: 0 16px 0 3px; font-size: 15px; }
.nav .pill-btn img { width: 30px; height: 30px; }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; padding: calc(190 * var(--u)) 16px 0; text-align: center; }
.hero h1 { margin: 0; color: var(--navy); font-size: clamp(34px, 5.24vw, 67px); font-weight: 700; line-height: 1.19; letter-spacing: -.01em; }
.hero-line { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.hero-emoji { width: .78em; height: auto; margin-right: .1em; }
.hand { font-family: var(--hand); font-weight: 400; }
/* Étiquette décorative : texte posé en CSS pour rester hors du titre principal */
.hero-tag::before { content: attr(data-label); }
.hero-tag { align-self: center; margin: 0 0 0 .45em; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 100px; color: var(--ink); font-size: max(9px, .14em); font-weight: 400; letter-spacing: 0; }
.hero-photo { position: relative; z-index: 1; width: 1.39em; height: 1.39em; margin: -.55em .05em 0 .1em; border: 1px solid var(--navy); border-radius: 50%; background: #fff; object-fit: cover; }
.hero-job { margin-top: .2em; font-family: var(--hand); font-size: .54em; font-weight: 400; }
.hero-job .circled { padding: 0 .2em; border: 1px solid var(--navy); border-radius: 100px; }
.hero-cta { height: calc(49 * var(--u)); min-height: 46px; margin-top: calc(118 * var(--u)); padding: 0 calc(28 * var(--u)) 0 calc(28 * var(--u)); font-size: clamp(16px, 1.56vw, 20px); gap: calc(26 * var(--u)); }
.note { max-width: 290px; margin: calc(52 * var(--u)) 0 0; color: var(--grey); font-family: var(--mori); font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.note em { font-style: italic; }

/* Clients */
.clients { width: min(100% - 32px, calc(1118 * var(--u))); margin: calc(110 * var(--u)) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients-track { display: flex; gap: calc(25 * var(--u)); width: max-content; margin: 0; padding: 0; list-style: none; animation: clients 28s linear infinite; }
.clients-track li { flex-shrink: 0; width: max(150px, calc(199 * var(--u))); }
.clients img { width: 100%; height: auto; border-radius: 14px; }
@media (hover: hover) and (pointer: fine) { .clients:hover .clients-track { animation-play-state: paused; } }
/* La piste contient deux fois les logos : un décalage de la moitié boucle sans saut */
@keyframes clients { to { transform: translateX(calc(-50% - var(--u) * 12.5)); } }
/* Le défilement continue même avec les animations réduites, à la demande du client */

/* Section bleue « I'M A » */
.about { min-height: calc(570 * var(--u)); margin-top: calc(62 * var(--u)); padding: calc(40 * var(--u)) 0; overflow: hidden; border-radius: calc(64 * var(--u)) calc(64 * var(--u)) 0 0; background: var(--navy); color: #fff; }
.about-inner { display: grid; min-height: calc(490 * var(--u)); grid-template-columns: calc(566 * var(--u)) 1fr; align-items: center; width: min(100% - 32px, calc(1229 * var(--u))); margin-inline: auto; }
.about-id { display: flex; align-items: center; gap: calc(27 * var(--u)); padding-left: calc(116 * var(--u)); }
.about-id img { width: calc(93 * var(--u)); min-width: 60px; height: auto; border: 2px solid #fff; border-radius: 50%; }
.about-id span { padding: calc(10 * var(--u)) calc(23 * var(--u)); border: 1px solid #fff; font-size: clamp(22px, 2.8vw, 36px); font-weight: 700; }
.about-skills { margin: calc(84 * var(--u)) 0 0 calc(51 * var(--u)); font-size: clamp(17px, 2.19vw, 28px); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
.roles { position: relative; height: calc(91 * 5 * var(--u)); margin: 0; padding: 0; list-style: none; }
.roles li { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: calc(20 * var(--u)); height: calc(91 * var(--u)); color: #0b0b3c; font-family: var(--mori); font-size: calc(95 * var(--u)); font-style: italic; font-weight: 200; line-height: 1; text-transform: uppercase; transform: translateY(calc(var(--slot) * 91 * var(--u))); transition: transform 700ms var(--ease-in-out), color 700ms ease; }
.roles svg { flex-shrink: 0; width: calc(54 * var(--u)); height: calc(54 * var(--u)); color: #fff; transition: color 700ms ease; }
.roles li[data-slot="0"], .roles li[data-slot="4"] { color: #0b0b3c; }
.roles li[data-slot="0"] svg { color: #0b0b3c; }
.roles li[data-slot="1"], .roles li[data-slot="3"] { color: var(--blue); }
.roles li[data-slot="3"] svg { color: var(--blue); }
.roles li[data-slot="2"] { color: #fff; }
.roles li.is-wrapping { transition: none; opacity: 0; }

/* Titres de section */
.section { padding-top: calc(62 * var(--u)); }
.tag { display: inline-block; margin: 0; padding: calc(10 * var(--u)) calc(23 * var(--u)); border: 1px solid var(--navy); border-radius: 100px; background: var(--lav); color: var(--navy); font-size: clamp(17px, 1.8vw, 23px); font-weight: 500; }
.section h2 { max-width: none; margin: calc(30 * var(--u)) 0 0; color: var(--navy); font-size: clamp(22px, 2.34vw, 30px); font-weight: 500; line-height: 1.2; }

/* Portfolio */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(29 * var(--u)) calc(35 * var(--u)); margin: calc(73 * var(--u)) 0 0; padding: 0; list-style: none; }
.works li { overflow: hidden; border-radius: calc(24 * var(--u)); aspect-ratio: 372 / 277; background: var(--box); }
.works img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .works li:hover img { transform: scale(1.03); } }

/* Expérience */
#experience { padding-top: calc(104 * var(--u)); }
.exp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
/* Orbite d'outils reprise de lavstudio.fr */
.radial-intro { position: relative; display: flex; align-items: center; justify-content: center; width: 400px; max-width: 100%; height: 400px; overflow: visible; }
.radial-core { z-index: 10; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 30px rgba(36, 64, 240, .4); }
.logo-radial-img { width: 44px; height: auto; filter: brightness(0) invert(1); }
/* Les deux anneaux tournent en sens inverse ; un tour complet dure environ 2 min, comme sur le site en ligne */
.radial-orbits { position: absolute; inset: 0; --k: 1; transform: scale(var(--k)); }
/* Anneau réduit à un point central : sa rotation ne fait jamais déborder la page */
.radial-ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; animation: radial-spin 130s linear infinite; }
.radial-ring--inner { --r: 90px; }
.radial-ring--outer { --r: 160px; animation-direction: reverse; }
.radial-ring li { position: absolute; top: 0; left: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
/* Chaque icône tourne en sens contraire de son anneau pour rester droite */
.radial-node { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: radial-spin 130s linear infinite reverse; }
.radial-ring--outer .radial-node { animation-direction: normal; }
@keyframes radial-spin { to { transform: rotate(360deg); } }
/* Entrée : l'orbite se déploie depuis le centre avec un léger dépassement */
.radial-intro.is-armed .radial-orbits { opacity: 0; transform: scale(0); }
.radial-intro.is-in .radial-orbits { opacity: 1; transform: scale(var(--k)); transition: transform 1200ms cubic-bezier(.34, 1.56, .64, 1), opacity 400ms ease-out; }
@media (hover: hover) and (pointer: fine) { .radial-node:hover img { transform: scale(1.2); } }
.jobs { margin: calc(66 * var(--u)) 0 0; padding: 0; list-style: none; }
.job { position: relative; padding: calc(39 * var(--u)) 0 calc(32 * var(--u)); }
.job:first-child { padding-top: 0; }
/* Trait de séparation de la maquette */
.job::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); } /* taste-skill-ignore: séparateurs de la maquette */
.job h3 { margin: 0; }
.job-toggle { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 24px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.job-toggle:focus-visible { outline-offset: 6px; }
.job-title { font-size: clamp(17px, 2.03vw, 26px); font-weight: 500; line-height: 1.2; }
.job time { color: var(--navy); font-size: clamp(16px, 1.95vw, 25px); font-weight: 700; text-align: right; white-space: nowrap; }
.job-chevron { width: 22px; height: 22px; color: var(--navy); transition: transform 200ms var(--ease-out); }
.job-toggle[aria-expanded="true"] .job-chevron { transform: rotate(180deg); }
/* Ouverture fluide : la ligne de grille passe de 0 à la hauteur du contenu */
.job-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
.job-panel[data-closed] { grid-template-rows: 0fr; }
.job-panel > div { overflow: hidden; }
.job p { max-width: 46em; margin: 0; padding-top: 6px; color: var(--muted); font-family: var(--mori); font-size: 16px; font-weight: 200; line-height: 1.22; transition: opacity 200ms ease; }
.job-panel[data-closed] p { opacity: 0; }
/* Clic : la ligne s'enfonce légèrement, le panneau s'ouvre en douceur */
.job-toggle { transition: transform 160ms var(--ease-out); }
.job-toggle:active { transform: scale(.99); }
/* Mouvement réduit : l'ouverture reste fluide mais plus courte, seul le pivot de la flèche et l'enfoncement disparaissent */
@media (prefers-reduced-motion: reduce) { .job-panel { transition-duration: 200ms; } .job-chevron, .job-toggle { transition: none; } .job-toggle:active { transform: none; } }
/* Apparition au défilement : chaque ligne glisse et se révèle, puis son trait se dessine */
.jobs.is-armed .job :is(h3, .job-panel > div) { opacity: 0; transform: translateY(16px); }
.jobs.is-armed .job.is-in .job-panel > div { transition-delay: 60ms; }
.jobs.is-armed .job::after { transform: scaleX(0); transform-origin: left; }
/* La transition ne joue qu'à l'entrée : l'état caché se pose sans clignotement */
.jobs.is-armed .job.is-in :is(h3, .job-panel > div) { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.jobs.is-armed .job.is-in::after { transform: scaleX(1); transition: transform 900ms var(--ease-out) 150ms; }
@media (prefers-reduced-motion: reduce) {
  .jobs.is-armed .job :is(h3, .job-panel > div) { transform: none; }
  .jobs.is-armed .job.is-in :is(h3, .job-panel > div) { transition: opacity 300ms ease; }
  .jobs.is-armed .job::after, .jobs.is-armed .job.is-in::after { transform: none; transition: none; }
}

/* Citation et signature */
.quote { display: flex; flex-direction: column; align-items: center; margin: calc(80 * var(--u)) auto 0; text-align: center; }
.quote-mark { width: calc(90 * var(--u)); min-width: 56px; height: auto; }
.quote p { margin: calc(30 * var(--u)) 0 0; color: var(--navy); font-size: clamp(26px, 2.97vw, 38px); font-weight: 700; line-height: 1.17; text-align: left; }
.quote p span { display: inline-block; padding: 0 .35em 0 .4em; margin-left: -.42em; border: 1px solid var(--navy); border-radius: 100px; }
.quote sup { font-size: .55em; vertical-align: 1.1em; }
.sign { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(60 * var(--u)); text-align: left; }
.sign img { width: calc(93 * var(--u)); min-width: 64px; height: auto; border: 1px solid var(--navy); border-radius: 50%; }
.sign b { display: block; color: var(--ink); font-size: clamp(20px, 2.03vw, 26px); font-weight: 500; }
.sign a { color: var(--muted); font-size: 18px; font-weight: 300; text-decoration: none; }

/* Appel final */
.cta { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 24px calc(48 * var(--u)); width: min(100% - 32px, calc(1150 * var(--u))); margin: calc(83 * var(--u)) auto calc(40 * var(--u)); padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(50 * var(--u)) calc(38 * var(--u)); border-radius: calc(45 * var(--u)); background: var(--navy); color: #fff; }
.cta-label { display: inline-block; margin: 0 0 calc(20 * var(--u)); padding: calc(8 * var(--u)) calc(28 * var(--u)); border-radius: 10px; background: #fff; color: var(--ink); font-size: clamp(17px, 1.8vw, 23px); font-weight: 300; }
.cta h2 { margin: 0; font-family: var(--mori); font-size: clamp(24px, 2.58vw, 33px); font-style: italic; font-weight: 600; line-height: 1.2; }
.cta-note { align-self: center; max-width: 300px; margin: 0 0 calc(18 * var(--u)); font-family: var(--mori); font-size: 14px; font-style: italic; font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.cta .pill-btn { align-self: center; height: 40px; margin-bottom: 0; padding: 0 18px 0 5px; background: #fff; color: var(--ink); font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .cta .pill-btn:hover { background: var(--lav); } }
.cta .pill-btn img { width: 33px; height: 33px; }
.legal { margin: 0 0 32px; color: var(--grey); font-size: 13px; text-align: center; }

/* Page mentions légales */
.page { padding-top: calc(150 * var(--u)); padding-bottom: 60px; }
.page h1 { margin: 24px 0 8px; color: var(--navy); font-size: clamp(30px, 4vw, 52px); font-weight: 700; }
.page h2 { margin: 40px 0 10px; color: var(--navy); font-size: 22px; font-weight: 500; }
.page p { max-width: 70ch; margin: 0 0 12px; color: var(--muted); font-family: var(--mori); font-size: 16px; line-height: 1.5; }

/* Apparition du hero au chargement */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 600ms var(--ease-out) both; }
  .hero > :nth-child(2) { animation-delay: 60ms; }
  .hero > :nth-child(3) { animation-delay: 120ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .roles li, .roles svg, .pill-btn, .works img { transition: none; }
}

/* Tablette et mobile */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .about-id, .about-skills { padding-left: 0; margin-left: 0; }
  .roles { --u: .9px; height: calc(91 * 5 * var(--u)); }
  .works { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cta { grid-template-columns: 1fr; align-items: start; }
  .cta .pill-btn { justify-self: start; }
}
@media (max-width: 600px) {
  :root { --u: .55px; }
  .nav-links { gap: 14px; margin-left: 14px; font-size: 14px; }
  /* zones de toucher d'au moins 44 px de haut sans changer la taille du texte */
  .nav-links a, .sign a { display: inline-block; padding: 12px 0; }
  .nav .pill-btn { padding-right: 12px; font-size: 13px; }
  .nav .pill-btn span { display: none; }
  .hero { padding-top: 120px; }
  .hero h1 { font-size: 9.2vw; }
  .hero-line { flex-wrap: wrap; white-space: normal; }
  .roles { --u: .55px; }
  .about-id img { width: 64px; }
  .works { grid-template-columns: 1fr; }
  .works li { border-radius: 16px; }
  .job { padding-bottom: 24px; }
  .job-toggle { grid-template-columns: 1fr auto; }
  .job time { grid-column: 1; grid-row: 2; text-align: left; }
  .job-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .radial-intro { margin: 0 auto; height: 280px; }
  .radial-orbits { --k: .7; }
}
@media (max-width: 360px) {
  .roles { --u: .48px; }
  .nav-links { gap: 10px; margin-left: 10px; font-size: 13px; }
  .nav .pill-btn { padding-left: 12px; }
  .nav .pill-btn img { display: none; }
}


/* Footer repris de lavstudio.fr */
@media (max-width:768px) {
  .fb-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
      }
}
.footer-curtain-wrap {
      position: relative;
      height: 100vh;
      clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%)
    }
.footer-big {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: var(--navy);
      color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }
.footer-dots { display: none }
.footer-aurora-glow {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 70vw;
      height: 55vh;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 40%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      animation: footerAuroraBreathe 8s ease-in-out infinite alternate
    }
@keyframes footerAuroraBreathe {
      from { transform: translate(-50%, -50%) scale(1); opacity: .5 }
      to   { transform: translate(-50%, -50%) scale(1.15); opacity: .95 }
    }
.footer-bg-grid {
      position: absolute;
      inset: 0;
      background-size: 60px 60px;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
      pointer-events: none;
      z-index: 0
    }
.footer-giant-text {
      position: absolute;
      bottom: -4vh;
      left: 50%;
      transform: translateX(-50%) translateY(50px);
      font-family: var(--title);
      font-size: clamp(80px, 22vw, 300px);
      line-height: .75;
      font-weight: 900;
      letter-spacing: -.05em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.07);
      white-space: nowrap;
      z-index: 0;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transition: opacity 1s ease, transform 1s cubic-bezier(.25,.46,.45,.94)
    }
.footer-big.cf-visible .footer-giant-text {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }
.footer-marquee-strip {
      flex-shrink: 0;
      position: relative;
      width: 100%;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,60,.45);
      backdrop-filter: blur(8px);
      padding: 13px 0;
      z-index: 10;
      transform: rotate(-1deg) scaleX(1.04);
      margin-top: 36px
    }
.footer-marquee-track {
      display: flex;
      width: max-content;
      animation: footerMarquee 30s linear infinite;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45)
    }
.footer-marquee-item {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 0 18px;
      white-space: nowrap
    }
.footer-marquee-sep { opacity: .35; font-size: 7px }
@keyframes footerMarquee {
      from { transform: translateX(0) }
      to   { transform: translateX(-50%) }
    }
.footer-cinematic-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(20px, 3vh, 40px) clamp(24px, 5vw, 60px);
      position: relative;
      z-index: 10;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .85s .1s ease, transform .85s .1s cubic-bezier(.25,.46,.45,.94)
    }
.footer-big.cf-visible .footer-cinematic-main {
      opacity: 1;
      transform: translateY(0)
    }
.fb-container {
      max-width: 1300px;
      margin: 0 auto;
      width: 100%
    }
.fb-top { margin-bottom: clamp(20px, 3.5vh, 44px) }
.fb-tag {
      font-size: 10px;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      margin-bottom: 14px
    }
.fb-email-big {
      display: inline-block;
      font-family: var(--title);
      font-size: clamp(36px, 8vw, 104px);
      font-weight: 700;
      line-height: .9;
      letter-spacing: -.025em;
      color: #fff;
      text-decoration: none;
      transition: opacity .35s, transform .35s cubic-bezier(.25,.46,.45,.94)
    }
.fb-email-big:hover { opacity: .7; transform: translateY(-4px) }
.fb-line { display: none }
.fb-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px
    }
.fb-col-label {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      margin-bottom: 12px
    }
.fb-col-val {
      font-size: 14px;
      color: rgba(255,255,255,.88);
      line-height: 1.7;
      font-weight: 400;
      display: flex;
      flex-direction: column;
      gap: 6px
    }
.fb-link {
      color: rgba(255,255,255,.85);
      text-decoration: none;
      background: linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)) no-repeat right bottom/0 1px;
      transition: background-size .4s cubic-bezier(.25,.46,.45,.94), color .2s;
      padding-bottom: 2px
    }
.fb-link:hover { color: #fff; background-size: 100% 1px; background-position-x: left }
.footer-bottom-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: clamp(12px, 1.8vh, 22px) clamp(24px, 5vw, 60px);
      border-top: 1px solid rgba(255,255,255,.1);
      position: relative;
      z-index: 20;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s .3s ease, transform .7s .3s ease
    }
.footer-big.cf-visible .footer-bottom-bar { opacity: 1; transform: translateY(0) }
.fb-copy {
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      display: flex;
      flex-direction: column;
      gap: 5px
    }
.footer-made-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 18px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 100px;
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(10px);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      white-space: nowrap
    }
.footer-heart {
      display: inline-block;
      color: #ff4d6d;
      animation: footerHeartbeat 2s cubic-bezier(.25,1,.5,1) infinite
    }
@keyframes footerHeartbeat {
      0%,100% { transform: scale(1) }
      15%,45%  { transform: scale(1.35) }
      30%      { transform: scale(.95) }
    }
.footer-back-top {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(255,255,255,.55);
      transition: all .3s cubic-bezier(.16,1,.3,1);
      flex-shrink: 0
    }
.footer-back-top:hover {
      border-color: rgba(255,255,255,.35);
      background: rgba(255,255,255,.13);
      color: #fff
    }
.footer-back-top svg { transition: transform .3s }
.footer-back-top:hover svg { transform: translateY(-3px) }
.magnetic-wrap { transform-style: preserve-3d; will-change: transform }
.address-reset {
      font-style: normal;
      display: block /* garde « Bordeaux, Gironde » sur une ligne : en flex, la virgule devenait un élément à part */
    }
.icon-no-shrink {
      flex-shrink: 0
    }
.fb-link--icon {
      display: flex;
      align-items: center;
      gap: 8px
    }
.fb-legal-link {
      color: rgba(255, 255, 255, .6);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, .2);
      transition: color .2s
    }
.fb-legal-link:hover {
      color: #fff
    }
@media(max-width:900px) {
  .fb-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }
  .fb-grid { grid-template-columns: repeat(2, 1fr); gap: 28px }
  .footer-made-badge { display: none }
}
@media(max-width:600px) {
  .fb-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px
      }
  /* 11 px minimum sur téléphone : en dessous, les libellés du footer ne se lisent plus */
  .fb-tag {
        font-size: 11px;
        margin-bottom: 12px
      }
  .fb-col-label, .footer-marquee-track { font-size: 11px; }
  .fb-col-label { color: rgba(255,255,255,.6); }
  .fb-copy {
        font-size: 11px;
        display: flex;
        flex-direction: column;
        gap: 6px
      }
}
@media(max-width:380px) {
  .fb-email-big {
        font-size: clamp(20px, 9.2vw, 42px)
      }
  .fb-link {
        display: inline-block;
        padding: 10px 0;
        min-height: 44px
      }
  .fb-legal-link {
        display: inline-block;
        padding: 12px 0;
        min-height: 44px;
        font-size: 13px
      }
}

@media (prefers-reduced-motion: reduce) {
  .footer-marquee-track, .footer-aurora-glow, .footer-heart { animation: none; }
  .footer-giant-text, .footer-cinematic-main, .footer-bottom-bar { transition: none; }
}

/* Grain sur tout le site, repris de lavstudio.fr : deux couches superposées
   multiply se voit sur les fonds clairs, screen sur les fonds sombres (bleu, footer) */
body::before,
body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.5' intercept='-.75'/><feFuncG type='linear' slope='2.5' intercept='-.75'/><feFuncB type='linear' slope='2.5' intercept='-.75'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"); background-size: 160px 160px; }
body::before { opacity: .18; mix-blend-mode: multiply; }
body::after { opacity: .14; mix-blend-mode: screen; }

/* Bandeau cookies */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 10000; display: grid; gap: 14px; width: min(100% - 32px, 380px); padding: 18px 18px 16px; border: 1px solid rgba(0, 0, 128, .12); border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 40, .14); font-family: var(--sg); opacity: 0; transform: translateY(12px); transition: opacity .25s ease-out, transform .25s cubic-bezier(.23, 1, .32, 1); }
.consent.is-open { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent-text { margin: 0; font-size: 14px; line-height: 1.45; }
.consent-text a { color: var(--navy); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-btn { height: 40px; border: 1px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 500 15px var(--sg); cursor: pointer; transition: background-color .15s, color .15s, transform .1s; }
.consent-btn[data-choice="granted"] { background: var(--navy); color: #fff; }
.consent-btn:hover { background: var(--lav); color: var(--navy); }
.consent-btn:active { transform: scale(.97); }
.consent-btn:focus-visible, .fb-cookies:focus-visible, .legal-cookies:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* :where() garde une spécificité nulle pour que .fb-legal-link (mobile compris) s'applique au bouton comme aux liens */
:where(.fb-cookies, .legal-cookies) { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.legal-cookies { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .consent { transition: opacity .2s; transform: none; } }

/* Page 404 : reprend la mise en page du hero */
.notfound { min-height: 78vh; padding-bottom: 80px; }
.notfound h1 { margin-top: 28px; }
.notfound-text { max-width: 440px; margin: 20px 0 0; color: var(--muted); font-family: var(--mori); font-size: 17px; line-height: 1.45; }
.notfound .hero-cta { margin-top: 40px; }
.notfound-home { display: inline-block; margin-top: 8px; padding: 12px 4px; color: var(--navy); font-size: 16px; text-underline-offset: 4px; }
.notfound .note a { color: inherit; }