/* ═══════════════════════════════════════════
       TOKENS
       ═══════════════════════════════════════════ */
        /* ═══════════════════════════════════════════════════════════════════
       LE THEME. C'est le seul endroit a changer pour re-teinter le site.
       Consolide le 19/08/2026 : 47 couleurs etaient ecrites en dur dans
       les 619 lignes qui suivent, le dore recopie 7 fois, le noir 11 fois.
       Elles pointent toutes ici desormais.

       Les variables en -rgb portent les trois canaux SANS parentheses, pour
       que le reste du fichier puisse ecrire rgba(var(--or-rgb), .3) et faire
       varier l'opacite sans redefinir la couleur. Si tu changes --or, change
       --or-rgb avec la MEME couleur, sinon le site aura deux dores.
       ═══════════════════════════════════════════════════════════════════ */
    :root {
      /* --- LES 4 COULEURS QUI FONT L'AMBIANCE --------------------------- */
      --noir:        #0B0B0C;   /* fond principal de la page               */
      --noir-rgb:    11, 11, 12;
      --blanc:       #FAFAFA;   /* titres et texte principal               */
      --or:          #C9A24B;   /* l'accent : boutons, italiques, filets    */
      --or-rgb:      201, 162, 75;
      --gris:        #B4B4B8;   /* texte courant des paragraphes           */

      /* --- LES DERIVES : a recalculer si les 4 du dessus changent -------- */
      --noir-0:      #060607;   /* plus profond que le fond : voiles        */
      --noir-0-rgb:  6, 6, 7;
      --noir-2:      #131315;   /* sections alternees, cartes              */
      --noir-3:      #1B1B1E;   /* survol, elevation                       */
      --noir-4:      #2A2A31;   /* point haut du degrade du hero           */
      --noir-hero:   #161619;   /* point median du degrade du hero         */
      --gris-mute:   #858587;   /* legendes, petites majuscules            */
      /* 21/08/2026 : remontee de #79797B a #858587. Le fond est passe en
         fond-flash le meme jour : son voile dore se pose PAR-DESSUS le texte
         ET le fond, et faisait retomber #79797B a 3,95:1 la ou les deux
         calques du flash se cumulent, en haut a droite. Sous le seuil, donc
         la correction du 19/08 etait annulee par le nouveau fond. #858587
         donne 4,53:1 sous le voile et 5,34:1 sans. Si le fond change, refaire
         le calcul avant de redescendre cette valeur.
         19/08/2026 : etait #6A6A6E, soit 3,65:1 sur le fond. Sous le seuil
         WCAG de 4,5:1 pour du texte courant, donc des legendes dures a lire
         dehors sur telephone. Remontee a #79797B, qui donne 4,53:1 en
         gardant l'effet « discret ». Calcul refait par _theme.html a chaque
         changement de theme. */
      --or-soft:     rgba(var(--or-rgb), .14);
      --ligne:       rgba(var(--clair-rgb), 0.10);
      --ligne-soft:  rgba(var(--clair-rgb), 0.055);

      /* --- NEUTRES : ne suivent pas le theme ----------------------------- */
      --clair-rgb:   255, 255, 255;  /* filets et voiles clairs            */
      --ombre-rgb:   0, 0, 0;        /* ombres portees                     */
      --fond-media:  #000;           /* letterbox derriere la video        */
      --whatsapp:    #25D366;        /* couleur de marque, jamais theme    */
      --whatsapp-rgb: 37, 211, 102;

      /* --- LES POLICES -------------------------------------------------- */
      /* Chargees en local par assets/fonts/fonts.css. En changer une
         demande d'y deposer les fichiers .woff2 correspondants. */
      --font-display: 'Space Grotesk', system-ui, sans-serif;  /* titres    */
      --font-body:    'Inter', system-ui, sans-serif;          /* courant   */
      --font-serif:   'Fraunces', Georgia, serif;              /* italiques */

      /* --- LE RYTHME ---------------------------------------------------- */
      --nav-h: 72px;
      --section-py: clamp(80px, 10vw, 140px);
      --container: 1200px;

      --ease:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    /* ── Reset ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-body);
      background: var(--noir);
      color: var(--blanc);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      position: relative;
    }
    img, video { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
    ::selection { background: var(--or); color: var(--noir); }

    /* ── Grain de film (overlay global, très subtil) ── */
    body::after {
      content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
      opacity: .045; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

    /* ── Eyebrow / cartouche (signature) ────── */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: var(--font-display);
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--or); margin-bottom: 22px;
    }
    .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--or); }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 58px);
      font-weight: 700; line-height: 1.04; letter-spacing: -0.025em;
      color: var(--blanc); margin-bottom: 20px;
    }
    .section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--or); }
    .section-subtitle {
      font-size: 17px; color: var(--gris); line-height: 1.7;
      max-width: 560px; margin-bottom: 60px;
    }
    section { padding: var(--section-py) 0; position: relative; }

    /* ═══════════════════════════════════════════
       MARQUEE (bande défilante)
       ═══════════════════════════════════════════ */
    .marquee {
      border-top: 1px solid var(--ligne-soft); border-bottom: 1px solid var(--ligne-soft);
      overflow: hidden; white-space: nowrap; padding: 20px 0; background: var(--noir);
    }
    .marquee-track { display: inline-flex; align-items: center; gap: 0; animation: marquee 32s linear infinite; }
    .marquee-track span {
      font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 30px);
      font-weight: 600; letter-spacing: .04em; color: var(--blanc); padding: 0 28px;
      display: inline-flex; align-items: center; gap: 28px;
    }
    .marquee-track span::after { content: "✦"; color: var(--or); font-size: .7em; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee { to { transform: translateX(-50%); } }

    /* ═══════════════════════════════════════════
       NAV
       ═══════════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
      background: rgba(var(--noir-rgb), 0); border-bottom: 1px solid transparent;
      z-index: 100; display: flex; align-items: center;
      transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
    }
    nav.scrolled {
      background: rgba(var(--noir-rgb), 0.72);
      backdrop-filter: blur(18px) saturate(160%);
      border-bottom: 1px solid var(--ligne-soft);
    }
    .nav-inner {
      width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo {
      font-family: var(--font-display); font-size: 20px; font-weight: 700;
      letter-spacing: 0.06em; color: var(--blanc);
    }
    .nav-logo span { color: var(--or); }
    .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
    .nav-links a {
      font-size: 14px; font-weight: 500; color: var(--gris);
      letter-spacing: 0.02em; transition: color .2s; position: relative;
    }
    .nav-links a:not(.nav-cta)::after {
      content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
      background: var(--or); transition: width .3s var(--ease);
    }
    .nav-links a:not(.nav-cta):hover { color: var(--blanc); }
    .nav-links a:not(.nav-cta):hover::after { width: 100%; }
    .nav-cta {
      border: 1px solid var(--or); color: var(--or) !important;
      padding: 9px 20px; border-radius: 50px; font-weight: 600; font-size: 13px;
      letter-spacing: 0.04em; transition: all .25s var(--ease);
    }
    .nav-cta:hover { background: var(--or); color: var(--noir) !important; }

    .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--blanc); border-radius: 2px; transition: .3s; }

    @media (max-width: 860px) {
      .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
        background: rgba(var(--noir-rgb), 0.96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--ligne);
        flex-direction: column; padding: 24px; gap: 18px; }
      .nav-links.open { display: flex; }
      .nav-toggle { display: flex; }
    }

    /* ═══════════════════════════════════════════
       HERO — showreel plein écran
       ═══════════════════════════════════════════ */
    .hero {
      position: relative; min-height: 100svh;
      display: flex; align-items: flex-end;
      padding: 0 0 clamp(48px, 7vh, 88px);
      overflow: hidden;
    }
    /* Fond : remplacer par le showreel —
       <video class="hero-media" autoplay muted loop playsinline poster="poster.jpg">
         <source src="showreel.mp4" type="video/mp4"></video>
       OU image : .hero-media { background: url('hero.jpg') center/cover; } */
    .hero-media {
      position: absolute; inset: 0; z-index: 0;
      /* Le degrade sert de fond tant que la photo n'est pas chargee, et de
         couleur de secours si elle manque. La photo se pose en background-image
         depuis le HTML : c'est la SEULE chose propre au client ici. */
      background-color: var(--noir-hero);
      /* Deux couches. Dessus : la photo du client, passee en --hero-photo
         depuis le HTML, seule chose propre au client ici. Dessous : le degrade,
         qui tient le cadre tant que la photo charge, et qui suffit seul si le
         client n'a pas encore de photo (--hero-photo non definie -> none). */
      background-image:
        var(--hero-photo, none),
        radial-gradient(120% 90% at 72% 18%, var(--noir-4) 0%, var(--noir-hero) 42%, var(--noir) 72%);
      background-position: var(--hero-cadrage, center 32%), center;
      background-size: cover, cover;
      background-repeat: no-repeat, no-repeat;
      animation: heroDrift 22s ease-in-out infinite alternate;
      transform-origin: 60% 30%;
    }
    @keyframes heroDrift {
      from { transform: scale(1.04) translate(0,0); }
      to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
    }
    .hero-media::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(var(--noir-rgb), .30) 0%, rgba(var(--noir-rgb), .55) 55%, var(--noir) 100%);
    }
    .hero-media .placeholder {
      position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
      padding-top: 24vh;
      font-family: var(--font-display); font-size: 12px; letter-spacing: .26em;
      text-transform: uppercase; color: var(--gris-mute);
    }
    /* Label vertical latéral (façon portfolio premium) */
    .hero-side {
      position: absolute; right: 30px; top: 50%; z-index: 3;
      transform: translateY(-50%) rotate(90deg); transform-origin: right center;
      font-family: var(--font-display); font-size: 11px; letter-spacing: .3em;
      text-transform: uppercase; color: var(--gris-mute); white-space: nowrap;
    }
    .hero-side span { color: var(--or); }
    .hero-inner { position: relative; z-index: 2; width: 100%; }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(44px, 8.4vw, 104px); font-weight: 700;
      line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 26px;
    }
    .hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--or); }
    /* Reveal masqué ligne par ligne */
    .reveal-line { display: block; overflow: hidden; }
    .reveal-line > span {
      display: block; transform: translateY(110%);
      animation: lineUp 1s var(--ease) forwards;
    }
    .reveal-line:nth-child(1) > span { animation-delay: .15s; }
    .reveal-line:nth-child(2) > span { animation-delay: .30s; }
    @keyframes lineUp { to { transform: translateY(0); } }
    .hero-subtitle {
      font-size: 18px; color: var(--gris); line-height: 1.65; max-width: 500px; margin-bottom: 38px;
      opacity: 0; animation: fadeIn .9s ease .6s forwards;
    }
    .hero-btns { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: fadeIn .9s ease .8s forwards; }
    @keyframes fadeIn { to { opacity: 1; } }

    .hero-cue {
      position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-family: var(--font-display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--gris-mute); opacity: 0; animation: fadeIn 1s ease 1.1s forwards;
    }
    .hero-cue .line { width: 1px; height: 38px; background: linear-gradient(var(--or), transparent); animation: cue 1.8s ease-in-out infinite; }
    @keyframes cue { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
    @media (max-width: 860px) { .hero-side, .hero-cue { display: none; } }

    /* ── Boutons ─────────────────────────────── */
    .btn-primary {
      background: var(--or); color: var(--noir);
      padding: 15px 30px; border-radius: 50px; font-weight: 600; font-size: 15px;
      letter-spacing: 0.01em; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
      display: inline-flex; align-items: center; gap: 9px; will-change: transform;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(var(--or-rgb), .32); }
    .btn-primary .arr { transition: transform .25s var(--ease); }
    .btn-primary:hover .arr { transform: translateX(4px); }
    .btn-ghost {
      border: 1px solid var(--ligne); color: var(--blanc); background: transparent;
      padding: 14px 26px; border-radius: 50px; font-weight: 600; font-size: 15px;
      transition: all .25s var(--ease); display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-ghost:hover { border-color: var(--blanc); background: rgba(var(--clair-rgb), .06); }
    .btn-whatsapp {
      background: var(--whatsapp); color: #fff;
      padding: 14px 26px; border-radius: 50px; font-weight: 600; font-size: 15px;
      transition: transform .25s var(--ease), opacity .25s; display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-whatsapp:hover { transform: translateY(-2px); opacity: .92; }

    /* ═══════════════════════════════════════════
       BANDEAU CHIFFRES
       ═══════════════════════════════════════════ */
    .stats { border-top: 1px solid var(--ligne-soft); border-bottom: 1px solid var(--ligne-soft); }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
    .stat { padding: 42px 24px; text-align: center; border-right: 1px solid var(--ligne-soft); }
    .stat:last-child { border-right: none; }
    .stat-num { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; color: var(--blanc); letter-spacing: -.02em; }
    .stat-num em { color: var(--or); font-style: normal; }
    .stat-label { font-size: 13px; color: var(--gris-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
    @media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--ligne-soft); } .stat:last-child { border-bottom: none; } }

    /* ═══════════════════════════════════════════
       PORTFOLIO — filtres + bento + cartouches
       ═══════════════════════════════════════════ */
    .portfolio-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
    .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
    .filter {
      font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .03em;
      color: var(--gris); padding: 8px 18px; border: 1px solid var(--ligne); border-radius: 50px;
      transition: all .25s var(--ease);
    }
    .filter:hover { color: var(--blanc); border-color: var(--gris-mute); }
    .filter.active { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

    /* MASONRY (structure #11) — colonnes façon Pinterest, ratios d'image naturels conservés.
       Idéal photographe : aucune photo recadrée, le format de chaque image est respecté. */
    .bento { columns: 3; column-gap: 14px; }
    .tile {
      break-inside: avoid; margin: 0 0 14px; display: block;
      position: relative; border-radius: 14px; overflow: hidden;
      background: var(--noir-3); cursor: pointer;
      transition: opacity .45s var(--ease);
    }
    .tile.hide { display: none; }
    .tile img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); }
    .tile:hover img { transform: scale(1.07); }
    .tile::after {
      content: ""; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, rgba(var(--ombre-rgb), .05) 30%, rgba(var(--ombre-rgb), .78) 100%);
      transition: background .35s;
    }
    .tile:hover::after { background: linear-gradient(180deg, rgba(var(--ombre-rgb), .15) 0%, rgba(var(--ombre-rgb), .82) 100%); }
    .tile-index {
      position: absolute; top: 14px; left: 16px; z-index: 2;
      font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em;
      color: rgba(var(--clair-rgb), .55);
    }
    .tile-cartouche { position: absolute; left: 18px; bottom: 16px; right: 18px; z-index: 2; }
    .tile-cat {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--or);
    }
    .tile-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--blanc); margin-top: 3px; }
    .tile-view {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
      font-size: 12px; letter-spacing: .04em; color: var(--gris);
      opacity: 0; transform: translateY(8px); transition: all .3s var(--ease);
    }
    .tile:hover .tile-view { opacity: 1; transform: translateY(0); }
    .tile-play {
      position: absolute; top: 14px; right: 14px; z-index: 2;
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(var(--ombre-rgb), .42); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--blanc);
      border: 1px solid rgba(var(--clair-rgb), .22); transition: all .3s var(--ease);
    }
    .tile:hover .tile-play { background: var(--or); color: var(--noir); border-color: var(--or); }
    /* Tuile d'appel à l'action : ferme la grille (même format 2:3 que les photos) et pousse au devis */
    .tile-cta {
      aspect-ratio: 2 / 3; cursor: default;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 30px;
      background: radial-gradient(130% 80% at 50% 0%, var(--or-soft), transparent 60%), var(--noir-2);
      border: 1px solid var(--ligne); transition: border-color .35s var(--ease);
    }
    .tile-cta::after { display: none; }
    .tile-cta:hover { border-color: rgba(var(--or-rgb), .5); }
    .tile-cta .cta-eyebrow {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 16px;
    }
    .tile-cta h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); font-weight: 600; color: var(--blanc); line-height: 1.28; margin-bottom: 10px; }
    .tile-cta p { color: var(--gris); font-size: 14px; line-height: 1.6; margin-bottom: 24px; max-width: 230px; }
    @media (max-width: 860px) { .bento { columns: 2; } }
    @media (max-width: 460px) { .bento { columns: 1; } }

    /* ═══════════════════════════════════════════
       PRESTATIONS
       ═══════════════════════════════════════════ */
    .presta { background: var(--noir-2); }
    .presta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .presta-card {
      position: relative; border: 1px solid var(--ligne); border-radius: 18px; padding: 38px 30px;
      transition: border-color .3s var(--ease), transform .3s var(--ease); background: var(--noir);
      overflow: hidden;
    }
    .presta-card::before {
      content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
      background: radial-gradient(120% 80% at 50% 0%, var(--or-soft) 0%, transparent 60%);
    }
    .presta-card:hover { border-color: rgba(var(--or-rgb), .5); transform: translateY(-5px); }
    .presta-card:hover::before { opacity: 1; }
    .presta-num { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--or); margin-bottom: 22px; position: relative; }
    .presta-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 12px; position: relative; }
    .presta-desc { font-size: 15px; color: var(--gris); line-height: 1.7; position: relative; }
    @media (max-width: 860px) { .presta-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════
       PROCESS
       ═══════════════════════════════════════════ */
    .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
      border: 1px solid var(--ligne); border-radius: 18px; overflow: hidden; }
    /* La grille s'ajuste au nombre reel d'etapes : 3 pour le carnaval,
       4 pour la methode. Sans ca, la derniere case s'etire sur le reste. */
    .steps-grid:has(> .step:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
    .steps-grid:has(> .step:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
    .step { padding: 36px 28px; border-right: 1px solid var(--ligne); transition: background .3s; }
    .step:last-child { border-right: none; }
    .step:hover { background: var(--noir-2); }
    .step-num { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--or); margin-bottom: 18px; }
    .step-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 9px; }
    .step-desc { font-size: 14px; color: var(--gris); line-height: 1.6; }
    @media (max-width: 860px) {
      .steps-grid { grid-template-columns: 1fr 1fr; }
      .step { border-right: none; border-bottom: 1px solid var(--ligne); }
      .step:nth-child(odd) { border-right: 1px solid var(--ligne); }
      .step:last-child, .step:nth-last-child(2):nth-child(odd) { border-bottom: none; }
    }

    /* ═══════════════════════════════════════════
       PREUVES / TÉMOIGNAGES
       ═══════════════════════════════════════════ */
    .preuves { background: var(--noir-2); }
    .temoins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .temoin {
      background: var(--noir); border: 1px solid var(--ligne); border-radius: 18px;
      padding: 30px 28px; transition: border-color .3s, transform .3s var(--ease);
    }
    .temoin:hover { border-color: var(--ligne); transform: translateY(-4px); }
    .temoin-stars { color: var(--or); font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
    .temoin-text { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--blanc); line-height: 1.6; margin-bottom: 20px; }
    .temoin-who { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
    .temoin-meta { font-size: 13px; color: var(--gris-mute); margin-top: 2px; }
    @media (max-width: 860px) { .temoins { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════
       CONTACT / CTA FINAL
       ═══════════════════════════════════════════ */
    .contact-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
    .contact-list { margin-top: 10px; }
    .contact-item {
      display: flex; align-items: center; gap: 16px; padding: 17px 0;
      border-bottom: 1px solid var(--ligne-soft); font-size: 15px; color: var(--gris);
    }
    .contact-item:last-child { border-bottom: none; }
    .contact-icon { font-size: 19px; width: 30px; text-align: center; }
    .contact-item a { color: var(--blanc); font-weight: 600; transition: color .2s; }
    .contact-item a:hover { color: var(--or); }
    .contact-cta {
      background: var(--noir-2); border: 1px solid var(--ligne); border-radius: 22px;
      padding: 42px 38px; text-align: center;
    }
    .contact-cta h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 12px; }
    .contact-cta p { font-size: 15px; color: var(--gris); margin-bottom: 28px; }
    .contact-cta .btn-primary { width: 100%; justify-content: center; margin-bottom: 12px; }
    .contact-cta .btn-whatsapp { width: 100%; justify-content: center; }
    @media (max-width: 860px) { .contact-inner { grid-template-columns: 1fr; gap: 38px; } }

    /* ═══════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════ */
    footer { background: var(--noir); border-top: 1px solid var(--ligne-soft); padding: 60px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
    .footer-brand { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .05em; margin-bottom: 14px; }
    .footer-brand span { color: var(--or); }
    .footer-tagline { font-size: 14px; color: var(--gris); line-height: 1.65; max-width: 300px; }
    .footer-col-title { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-mute); margin-bottom: 16px; }
    .footer-links { list-style: none; }
    .footer-links li { margin-bottom: 11px; }
    .footer-links a { font-size: 14px; color: var(--gris); transition: color .2s; }
    .footer-links a:hover { color: var(--blanc); }
    .footer-bottom { border-top: 1px solid var(--ligne-soft); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--gris-mute); }
    .footer-bottom a { color: var(--gris); }
    .footer-bottom a:hover { color: var(--or); }
    @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; text-align: center; } }

    /* ── Bouton WhatsApp flottant (mobile) ──── */
    .btn-float {
      display: none; position: fixed; bottom: 22px; right: 18px;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--whatsapp); color: #fff; font-size: 26px;
      align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(var(--whatsapp-rgb), .5); z-index: 200;
      animation: pulse-btn 2.4s infinite;
    }
    @keyframes pulse-btn {
      0%, 100% { box-shadow: 0 4px 20px rgba(var(--whatsapp-rgb), .5); }
      50% { box-shadow: 0 4px 30px rgba(var(--whatsapp-rgb), .8), 0 0 0 8px rgba(var(--whatsapp-rgb), .14); }
    }
    @media (max-width: 860px) { .btn-float { display: flex; } }

    /* ═══════════════════════════════════════════
       SIGNATURE / À PROPOS — texte + deux tirages inclinés
       ═══════════════════════════════════════════ */
    .signature {
      position: relative; overflow: hidden;
      padding: var(--section-py) 0;
      border-top: 1px solid var(--ligne-soft);
      background: radial-gradient(120% 90% at 88% 12%, var(--or-soft), transparent 55%);
    }
    .signature .container { position: relative; z-index: 1; }
    /* Filigrane botanique — feuille tropicale en trait doré, très discrète (évoque la Guyane sans verdure) */
    .leaf-decor { position: absolute; z-index: 0; pointer-events: none; }
    .leaf-decor path { fill: none; stroke: var(--or); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
    .leaf-a { top: -50px; left: -46px; width: 230px; opacity: .09; transform: rotate(-18deg); }
    .leaf-b { bottom: -70px; right: -40px; width: 300px; opacity: .07; transform: rotate(150deg); }
    @media (max-width: 900px) { .leaf-b { display: none; } .leaf-a { width: 170px; opacity: .07; } }
    .sig-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 90px); align-items: center;
    }
    .sig-text { max-width: 520px; }
    .sig-text .section-title { margin-bottom: 24px; }
    .sig-lead { color: var(--gris); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.78; margin-bottom: 18px; }
    .sig-sign { display: flex; align-items: center; gap: 16px; margin: 30px 0 34px; }
    .sig-sign .mark {
      font-family: var(--font-serif); font-style: italic; font-weight: 500;
      font-size: 34px; color: var(--or); line-height: 1;
      width: 60px; height: 60px; display: grid; place-items: center;
      border: 1px solid var(--ligne); border-radius: 50%;
    }
    .sig-sign .who { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-mute); line-height: 1.5; }
    .sig-sign .who b { display: block; color: var(--blanc); font-weight: 600; letter-spacing: .1em; }

    /* Deux tirages inclinés en éventail */
    .sig-visuals { position: relative; min-height: clamp(380px, 46vw, 560px); }
    .sig-frame {
      position: absolute; top: 50%; left: 50%;
      width: clamp(210px, 26vw, 320px);
      padding: 10px; background: var(--noir-2); border: 1px solid var(--ligne);
      box-shadow: 0 30px 70px rgba(var(--ombre-rgb), .55);
      opacity: 0; will-change: transform, opacity;
      transition: transform .8s var(--ease), opacity .8s var(--ease), box-shadow .4s var(--ease);
    }
    .sig-frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(.12) contrast(1.03); }
    .sig-cap {
      position: absolute; left: 20px; bottom: 20px;
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase; color: var(--or);
      background: rgba(var(--noir-rgb), .72); padding: 5px 10px; backdrop-filter: blur(4px);
    }
    /* état initial : décalé à droite + plus incliné */
    .sig-frame.back  { z-index: 1; transform: translate(-38%, -50%) rotate(-6deg) translateX(70px); }
    .sig-frame.front { z-index: 2; transform: translate(-62%, -50%) rotate(6deg)  translateX(70px); }
    /* état révélé : se posent en éventail */
    .sig-visuals.visible .sig-frame.back  { opacity: 1; transform: translate(-38%, -50%) rotate(-6deg); transition-delay: .12s; }
    .sig-visuals.visible .sig-frame.front { opacity: 1; transform: translate(-62%, -50%) rotate(6deg);  transition-delay: .30s; }
    /* survol : le tirage se soulève et se redresse */
    @media (hover: hover) and (pointer: fine) {
      .sig-visuals.visible .sig-frame:hover { z-index: 3; box-shadow: 0 44px 96px rgba(var(--ombre-rgb), .62); }
      .sig-visuals.visible .sig-frame.back:hover  { transform: translate(-38%, -58%) rotate(-3deg); }
      .sig-visuals.visible .sig-frame.front:hover { transform: translate(-62%, -58%) rotate(3deg); }
    }
    @media (max-width: 900px) {
      .sig-grid { grid-template-columns: 1fr; }
      .sig-text { max-width: none; }
      .sig-visuals { min-height: 440px; order: -1; }
      .sig-frame { width: clamp(180px, 52vw, 250px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .sig-frame { opacity: 1 !important; }
      .sig-frame.back  { transform: translate(-38%, -50%) rotate(-6deg) !important; }
      .sig-frame.front { transform: translate(-62%, -50%) rotate(6deg) !important; }
    }

    /* ── Reveal au scroll ───────────────────── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal[data-delay="1"] { transition-delay: .08s; }
    .reveal[data-delay="2"] { transition-delay: .16s; }
    .reveal[data-delay="3"] { transition-delay: .24s; }
    .reveal[data-delay="4"] { transition-delay: .32s; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
      .reveal-line > span, .hero-subtitle, .hero-btns, .hero-cue { opacity: 1 !important; transform: none !important; }
      html { scroll-behavior: auto; }
      .splash-marquee { animation: none !important; }
    }

    /* ═══════════════════════════════════════════
       SPLASH IMMERSIF (accueil) — galerie défilante,
       personnes détourées au 1er plan, hero au sol
       ═══════════════════════════════════════════ */
    .splash {
      position: fixed; inset: 0; z-index: 10000;
      background: var(--noir); overflow: hidden;
      opacity: 1; transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .splash.hidden { opacity: 0; transform: scale(1.03); pointer-events: none; }
    body.splash-lock { overflow: hidden; }
    .splash-scene { position: absolute; inset: 0; overflow: hidden; }
    .splash-scene::before {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: radial-gradient(58% 44% at 50% 26%, var(--or-soft), transparent 70%);
    }
    .splash-screen {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; z-index: 0;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 70%, transparent 94%);
              mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 70%, transparent 94%);
    }
    .splash-marquee {
      display: flex; gap: 18px; height: 100%; align-items: center;
      width: max-content; padding: 0 9px; animation: splashScroll 50s linear infinite;
    }
    @keyframes splashScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .splash-slide {
      flex: 0 0 auto; height: 68%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
      border: 1px solid rgba(var(--clair-rgb), .08);
      box-shadow: 0 0 48px rgba(var(--or-rgb), .18), 0 14px 40px rgba(var(--ombre-rgb), .5);
    }
    .splash-slide img { width: 100%; height: 100%; object-fit: cover; }
    .splash-floor {
      display: none;
      position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%; z-index: 0;
      background: url('images/p1190112.webp') center 30% / cover;
      transform: scaleY(-1); filter: brightness(.32) saturate(.8) blur(2px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.55), transparent 85%);
              mask-image: linear-gradient(to top, rgba(0,0,0,.55), transparent 85%);
    }
    /* Silhouette au 1er plan — réduite, la galerie reste le décor */
    .splash-hero { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); height: 56%; z-index: 2; display: flex; }
    .splash-hero-frame {
      position: relative; height: 100%; aspect-ratio: 2 / 3;
      filter: drop-shadow(0 22px 50px rgba(var(--ombre-rgb), .55));
    }
    /* halo doré qui détache la silhouette de la galerie */
    .splash-hero-frame::before {
      content: ""; position: absolute; inset: -22% -34%; z-index: -1;
      background: radial-gradient(52% 46% at 50% 48%, rgba(var(--noir-rgb), .72) 0%, rgba(var(--or-rgb), .24) 42%, transparent 74%);
    }
    .splash-hero-frame img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      -webkit-mask-image: radial-gradient(150% 140% at 50% 48%, #000 50%, transparent 100%);
              mask-image: radial-gradient(150% 140% at 50% 48%, #000 50%, transparent 100%);
    }
    .splash-hero-cap { display: none; }
    .splash-hero-reflect { display: none; }
    .splash-vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(125% 100% at 50% 48%, transparent 44%, rgba(var(--ombre-rgb), .74) 100%); }
    .splash-top { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .splash-word { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .34em; color: var(--blanc); }
    .splash-word span { color: var(--or); }
    .splash-quote { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: rgba(var(--clair-rgb), .55); transition: opacity .4s ease; min-height: 20px; }
    .splash-enter {
      position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 5;
      display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; border-radius: 999px;
      background: var(--or); color: var(--noir); font-family: var(--font-display);
      font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
      cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s;
    }
    .splash-enter:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 34px rgba(var(--or-rgb), .34); }
    .splash-enter span { transition: transform .25s var(--ease); }
    .splash-enter:hover span { transform: translateX(4px); }
    @media (max-width: 640px) { .splash-hero { height: 58%; } .splash-word { font-size: 12px; } .splash-quote { font-size: 12px; } }

    /* ═══ LIGHTBOX (agrandissement des photos) ═══ */
    .lightbox {
      position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center;
      padding: 5vh 5vw; background: rgba(var(--noir-0-rgb), .93); backdrop-filter: blur(6px);
      opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
    }
    .lightbox.open { opacity: 1; visibility: visible; }
    .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 90px rgba(var(--ombre-rgb), .7); transform: scale(.96); transition: transform .3s var(--ease); }
    .lightbox.open img { transform: scale(1); }
    .lightbox-close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--clair-rgb), .08); border: 1px solid rgba(var(--clair-rgb), .2); color: var(--blanc); font-size: 24px; line-height: 1; cursor: pointer; transition: background .25s; }
    .lightbox-close:hover { background: rgba(var(--clair-rgb), .18); }
    #bento .tile img { cursor: zoom-in; }
    .sig-frame { cursor: zoom-in; }

    /* ═══════════════════════════════════════════
       PAGE INTERIEURE (en-tete + corps legal)
       Deplace depuis mentions-legales.html le 19/08/2026,
       au passage du site en multi-pages : ces regles servent
       maintenant a toutes les pages secondaires.
       ═══════════════════════════════════════════ */
    .page-head{padding:calc(var(--nav-h) + clamp(50px,7vw,84px)) 0 clamp(28px,4.5vw,46px);position:relative;overflow:hidden;
      background:radial-gradient(120% 90% at 82% 0%,var(--or-soft),transparent 55%);border-bottom:1px solid var(--ligne-soft);}
    .page-head .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gris);margin-bottom:26px;transition:color .2s;}
    .page-head .back:hover{color:var(--or);}
    .page-head .back span{transition:transform .25s var(--ease);}
    .page-head .back:hover span{transform:translateX(-4px);}
    .legal-wrap{padding:clamp(40px,6vw,70px) 0 var(--section-py);}
    .legal{max-width:780px;}
    .legal .updated{font-size:13px;color:var(--gris-mute);letter-spacing:.02em;margin-bottom:40px;}
    .legal h2{font-family:var(--font-display);font-size:clamp(19px,2.4vw,23px);font-weight:600;letter-spacing:-.01em;color:var(--blanc);
      margin:42px 0 12px;padding-top:26px;border-top:1px solid var(--ligne-soft);}
    .legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0;}
    .legal p{color:var(--gris);font-size:16px;line-height:1.78;margin:0 0 14px;}
    .legal ul{color:var(--gris);font-size:16px;line-height:1.78;margin:0 0 14px;padding-left:20px;}
    .legal li{margin-bottom:8px;}
    .legal li::marker{color:var(--or);}
    .legal strong{color:var(--blanc);font-weight:600;}
    .legal a{color:var(--or);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s;}
    .legal a:hover{opacity:.75;}
    .legal .card{background:var(--noir-2);border:1px solid var(--ligne);border-left:2px solid var(--or);
      border-radius:14px;padding:24px 26px;margin-bottom:14px;}
    .legal .card p:last-child{margin-bottom:0;}

    /* ═══════════════════════════════════════════
       LES TROIS UNIVERS (accueil) — 19/08/2026
       Portes d'entree vers portraits / evenements / video.
       C'est ce qui remplace le defilement d'une page unique.
       ═══════════════════════════════════════════ */
    .univers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(34px,4.5vw,54px);}
    .univers{position:relative;display:block;overflow:hidden;border-radius:16px;border:1px solid var(--ligne);
      aspect-ratio:3/4;background:var(--noir-2);isolation:isolate;}
    .univers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
      transition:transform 1.1s var(--ease),filter .6s;}
    .univers::after{content:"";position:absolute;inset:0;z-index:1;
      background:linear-gradient(to top,rgba(var(--noir-0-rgb), .93) 4%,rgba(var(--noir-0-rgb), .58) 38%,rgba(var(--noir-0-rgb), .12) 72%);}
    .univers:hover img{transform:scale(1.06);}
    .univers-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 24px;}
    .univers-num{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--or);margin-bottom:8px;}
    .univers-titre{font-family:var(--font-display);font-size:clamp(21px,2.3vw,26px);font-weight:600;letter-spacing:-.015em;color:var(--blanc);margin-bottom:7px;}
    .univers-desc{font-size:14px;line-height:1.6;color:var(--gris);margin-bottom:14px;}
    .univers-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--blanc);}
    .univers-go span{color:var(--or);transition:transform .3s var(--ease);}
    .univers:hover .univers-go span{transform:translateX(5px);}
    @media (max-width:900px){.univers-grid{grid-template-columns:1fr;gap:14px;}.univers{aspect-ratio:4/3;}}

    /* ═══════════════════════════════════════════
       PROJET / REPORTAGE D'EVENEMENT — 19/08/2026
       Un plan large en tete, trois verticales dessous,
       puis le lien vers la galerie complete chez le client.
       ═══════════════════════════════════════════ */
    .projet{margin-bottom:clamp(64px,8vw,110px);}
    .projet:last-child{margin-bottom:0;}
    .projet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
      padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--ligne-soft);}
    .projet-titre{font-family:var(--font-display);font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--blanc);}
    .projet-meta{font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-mute);}
    .projet-lead{max-width:640px;color:var(--gris);font-size:16px;line-height:1.75;margin-bottom:24px;}
    .projet-hero{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--ligne);margin-bottom:14px;cursor:zoom-in;}
    .projet-hero img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease);}
    .projet-hero:hover img{transform:scale(1.03);}
    .projet-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
    .projet-photo{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--ligne);cursor:zoom-in;}
    .projet-photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--ease);}
    .projet-photo:hover img{transform:scale(1.05);}
    /* ── BANDE CARNAVAL, 21/08/2026 ──────────
       Cinq portraits verticaux alignes, comme un defile qui passe. Ils
       reutilisent .projet-photo (cadre, arrondi, zoom au survol) : seule
       la grille est propre a cette bande.
       5 colonnes sur 1200 px donnent 228 px par photo, servies en 733 px,
       ce qui couvre les ecrans a deux pixels par point. */
    .carnaval-bande{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;}
    @media (max-width:1000px){.carnaval-bande{grid-template-columns:repeat(3,1fr);gap:10px;}}
    @media (max-width:560px){.carnaval-bande{grid-template-columns:repeat(2,1fr);gap:8px;}}

    .projet-pied{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;}
    .projet-lien{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:14px;font-weight:500;
      color:var(--blanc);border-bottom:1px solid var(--or);padding-bottom:4px;transition:gap .25s var(--ease);}
    .projet-lien span{color:var(--or);}
    .projet-lien:hover{gap:14px;}
    .projet-note{font-size:13px;color:var(--gris-mute);}
    @media (max-width:760px){.projet-trio{grid-template-columns:1fr 1fr;gap:10px;}
      .projet-trio .projet-photo:last-child{grid-column:span 2;}
      .projet-trio .projet-photo:last-child img{aspect-ratio:3/2;}}

    /* ═══════════════════════════════════════════
       REEL VERTICAL (page video) — 19/08/2026
       La source est un 9/16 filme au telephone : on l'assume
       en portrait plutot que de le recadrer en paysage.
       ═══════════════════════════════════════════ */
    .reel-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
    .reel-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--ligne);
      background:var(--fond-media);box-shadow:0 30px 70px rgba(var(--ombre-rgb), .55);}
    .reel-frame video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--fond-media);}
    .reel-cap{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
      color:var(--gris-mute);margin-top:14px;text-align:center;}
    @media (max-width:860px){.reel-grid{grid-template-columns:1fr;}
      .reel-frame{max-width:340px;margin:0 auto;}}

    /* Lien discret au pied de la carte d'appel du portfolio. Etait ecrit en
       attribut style= dans le HTML, donc invisible au theme. */
    .tile-cta-lien{margin-top:14px;}
    .tile-cta-lien a{font-size:13px;color:var(--or);border-bottom:1px solid rgba(var(--clair-rgb),.22);}

    /* ═══════════════════════════════════════════════════════════════════
       HERO EN COLLAGE — 19/08/2026
       Porte depuis un composant React (Framer Motion + Tailwind + shadcn)
       que Jean-Marc voulait a la place du hero pleine image.
       Trois choses ont ete refaites plutot que reprises :
         · les animations, en CSS pur. Framer Motion pese ~50 ko de JS tiers
           pour trois fondus que le navigateur sait faire seul.
         · les photos, locales. Le composant tirait des images d'Unsplash :
           un CDN tiers recoit l'IP du visiteur, ce que la CSP du site
           (img-src 'self') bloque et que les mentions legales interdisent.
         · les formes decoratives, en dore. L'original posait des bulles
           bleues, violettes et vertes, qui n'ont rien a faire dans une
           identite sombre a accent unique.
       ═══════════════════════════════════════════════════════════════════ */
    .hero-collage{
      position:relative; overflow:hidden;
      padding:calc(var(--nav-h) + clamp(48px,6vw,88px)) 0 clamp(56px,7vw,100px);
      background:
        radial-gradient(90% 70% at 78% 12%, var(--or-soft), transparent 58%),
        radial-gradient(120% 90% at 20% 100%, var(--noir-2) 0%, var(--noir) 65%);
    }
    .hc-grille{
      display:grid; grid-template-columns:1fr 1fr;
      align-items:center; gap:clamp(32px,5vw,64px);
    }

    /* ---- colonne texte ---- */
    .hc-texte h1{margin:0 0 clamp(16px,2vw,22px);}
    .hero-collage .hero-btns{flex-wrap:wrap; gap:12px;}
    .hc-sous{
      max-width:44ch; color:var(--gris); font-size:clamp(15px,1.5vw,17px);
      line-height:1.65; margin:0 0 clamp(24px,3vw,32px);
    }
    /* Les chiffres remontent DANS le hero : ils faisaient une bande separee
       juste en dessous, qui disait la meme chose deux ecrans plus haut. */
    .hc-chiffres{
      display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,38px);
      margin-top:clamp(32px,4vw,46px);
      padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--ligne);
    }
    .hc-chiffre{display:flex; align-items:center; gap:12px;}
    .hc-pastille{
      flex:none; width:42px; height:42px; border-radius:50%;
      display:grid; place-items:center;
      background:rgba(var(--or-rgb),.10); border:1px solid rgba(var(--or-rgb),.28);
      color:var(--or);
    }
    .hc-pastille svg{width:19px; height:19px; stroke-width:1.6;}
    .hc-chiffre > span:last-child{display:block;}
    .hc-val{
      display:block;
      font-family:var(--font-display); font-size:clamp(19px,2.1vw,23px);
      font-weight:600; color:var(--blanc); line-height:1.15; letter-spacing:-.01em;
    }
    .hc-val em{font-family:var(--font-serif); font-style:italic; color:var(--or);}
    .hc-lib{display:block; font-size:12.5px; color:var(--gris-mute); line-height:1.35; margin-top:2px;}

    /* ---- colonne collage ---- */
    .hc-visuels{position:relative; height:clamp(420px,44vw,560px);}
    .hc-cadre{
      position:absolute; overflow:hidden; border-radius:18px;
      background:var(--noir-2); border:1px solid var(--ligne);
      box-shadow:0 26px 60px rgba(var(--ombre-rgb),.55);
    }
    .hc-cadre img{display:block; width:100%; height:100%; object-fit:cover;}
    .hc-cadre figcaption{
      position:absolute; left:0; right:0; bottom:0; padding:22px 14px 11px;
      font-family:var(--font-display); font-size:10.5px; font-weight:500;
      letter-spacing:.14em; text-transform:uppercase; color:var(--blanc);
      background:linear-gradient(to top, rgba(var(--noir-0-rgb),.88), transparent);
    }
    /* Trois cadres, trois ancrages differents : c'est le decalage qui fait
       le collage. Les pourcentages evitent les ruptures aux tailles moyennes. */
    /* Trois ancrages en triangle : deux en haut qui se font face, un en bas
       qui les relie. Chaque cadre garde le bord ou vit sa legende degage, et
       l'ordre d'empilement va du fond (celui de droite) vers l'avant. */
    .hc-1{top:2%;     left:2%;    width:44%; height:58%; transform:rotate(-2.5deg); z-index:3;}
    .hc-2{top:1%;     right:3%;   width:41%; height:54%; transform:rotate(2.5deg);  z-index:1;}
    .hc-3{bottom:2%;  left:26%;   width:46%; height:42%; transform:rotate(-1.5deg); z-index:2;}

    /* Formes flottantes, en dore et non en pastel : elles doivent rappeler
       l'accent du site, pas introduire trois couleurs de plus. */
    .hc-forme{position:absolute; z-index:0; border-radius:50%; pointer-events:none;
              background:rgba(var(--or-rgb),.13); border:1px solid rgba(var(--or-rgb),.18);}
    .hc-f1{top:0;      left:44%;  width:54px; height:54px;}
    .hc-f2{bottom:6%;  right:6%;  width:46px; height:46px; border-radius:14px;}
    .hc-f3{bottom:30%; left:1%;   width:24px; height:24px;}

    /* ---- animations, en CSS ---- */
    @keyframes hc-monte{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
    @keyframes hc-flotte{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
    .hc-texte > *{animation:hc-monte .6s var(--ease) both;}
    .hc-texte > *:nth-child(1){animation-delay:.05s}
    .hc-texte > *:nth-child(2){animation-delay:.15s}
    .hc-texte > *:nth-child(3){animation-delay:.25s}
    .hc-texte > *:nth-child(4){animation-delay:.35s}
    .hc-texte > *:nth-child(5){animation-delay:.45s}
    /* Les cadres gardent leur rotation pendant le fondu : une animation qui
       ecrase transform ferait sauter le collage a plat en fin de course. */
    .hc-cadre{opacity:0; animation:hc-apparait .7s var(--ease) both;}
    .hc-1{animation-delay:.20s} .hc-2{animation-delay:.34s} .hc-3{animation-delay:.48s}
    @keyframes hc-apparait{from{opacity:0} to{opacity:1}}
    .hc-forme{animation:hc-flotte 3.4s ease-in-out infinite;}
    .hc-f2{animation-delay:.7s} .hc-f3{animation-delay:1.3s}

    @media (prefers-reduced-motion: reduce){
      .hc-texte > *, .hc-cadre, .hc-forme{animation:none; opacity:1;}
    }

    /* ---- adaptations ---- */
    @media (max-width:1000px){
      .hc-grille{grid-template-columns:1fr; gap:clamp(30px,6vw,44px);}
      .hc-visuels{height:clamp(360px,64vw,460px); order:-1;}
      .hc-sous{max-width:none;}
      /* La colonne s'elargit : les cadres se resserrent pour garder le
         triangle, et le cadre 3 redescend sous la legende du cadre 2. */
      .hc-1{top:0;     left:4%;   width:38%; height:60%;}
      .hc-2{top:2%;    right:4%;  width:36%; height:52%;}
      .hc-3{bottom:0;  left:28%;  width:40%; height:38%;}
    }
    @media (max-width:560px){
      .hc-visuels{height:340px;}
      .hc-1{top:0;     left:0;    width:50%; height:56%;}
      .hc-2{top:2%;    right:0;   width:46%; height:44%;}
      .hc-3{bottom:0;  left:20%;  width:56%; height:40%;}
      .hc-f1{left:48%} .hc-f2{width:34px;height:34px}
      .hc-chiffres{gap:16px 22px;}
      .hc-pastille{width:36px;height:36px} .hc-pastille svg{width:16px;height:16px}
    }

    /* ═══════════════════════════════════════════════════════════════════
       TRAITEMENTS DE FOND — 19/08/2026
       Le fond etait un aplat de --noir. Six traitements au choix, poses en
       classe sur <html>. Un seul est actif a la fois, aucune n'est active
       par defaut : sans classe, le site garde son aplat.

       Tous respectent trois regles :
         · aucun fichier image, tout en gradient ou en SVG data: URI, donc
           rien a telecharger et rien qui sorte du site ;
         · tout se calcule sur les jetons du theme, donc changer de palette
           change aussi le fond ;
         · en `position:fixed`, la matiere reste en place pendant qu'on
           defile. C'est ce qui fait la difference entre un decor et un
           motif qui suit bêtement le texte.

       CHOISIR : ouvrir _fonds.html, comparer, puis poser la classe retenue
       sur la balise <html> dans _build.py, fonction head().
       ═══════════════════════════════════════════════════════════════════ */

    /* --- B · HALO DE STUDIO -------------------------------------------
       Une source hors champ en haut a droite, comme une boite a lumiere
       posee a cote du sujet, plus une chute d'ombre dans les angles.
       C'est le traitement le plus discret : on ne le voit pas, on le sent. */
    html.fond-studio body::before{
      content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
      background:
        radial-gradient(58% 44% at 82% -6%,  rgba(var(--or-rgb),.11), transparent 62%),
        radial-gradient(70% 50% at 12% 104%, rgba(var(--clair-rgb),.045), transparent 66%),
        radial-gradient(120% 120% at 50% 50%, transparent 42%, rgba(var(--noir-0-rgb),.55) 100%);
    }

    /* --- C · GRAIN ARGENTIQUE POUSSE ----------------------------------
       Le grain existe deja a 4,5 %. Ici il monte a 9 %, avec un vignettage
       plus marque : le rendu d'un tirage argentique plutot que d'un ecran. */
    html.fond-grain body::after{opacity:.09;}
    html.fond-grain body::before{
      content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
      background:radial-gradient(115% 105% at 50% 42%, transparent 38%, rgba(var(--noir-0-rgb),.72) 100%);
    }

    /* --- D · PELLICULE -------------------------------------------------
       Deux bandes de perforations 35 mm sur les bords, tres basses en
       opacite. Le motif se repete verticalement et ne bouge pas au
       defilement, donc la page glisse DANS la pellicule. */
    html.fond-pellicule body::before{
      content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
      opacity:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='104'%3E%3Crect x='13' y='16' width='28' height='38' rx='6' fill='%23000'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='104'%3E%3Crect x='13' y='16' width='28' height='38' rx='6' fill='%23000'/%3E%3C/svg%3E");
      background-position:left 14px top, right 14px top;
      background-repeat:repeat-y, repeat-y;
      background-size:54px 104px, 54px 104px;
    }
    html.fond-pellicule::before{
      content:""; position:fixed; inset:0; z-index:8998; pointer-events:none;
      opacity:0;
      background:
        linear-gradient(90deg,  rgba(var(--noir-0-rgb),.85) 0 82px, transparent 82px),
        linear-gradient(270deg, rgba(var(--noir-0-rgb),.85) 0 82px, transparent 82px);
    }
    /* Le conteneur fait 1200 px : au-dela de 1440 px de fenetre, les bandes
       de 82 px tombent dans le vide de chaque cote et ne touchent rien. */
    @media (min-width:1440px){
      html.fond-pellicule body::before{opacity:.5;}
      html.fond-pellicule::before{opacity:1;}
    }

    /* --- E · REPERES DE CADRAGE ---------------------------------------
       La grille des tiers et les crochets d'angle d'un viseur. Presque
       invisible, mais l'oeil sent que la page est cadree. */
    html.fond-cadrage body::before{
      content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
      background-image:
        linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(var(--clair-rgb),.05) 33.333%, transparent calc(33.333% + 1px)),
        linear-gradient(90deg, transparent calc(66.666% - 1px), rgba(var(--clair-rgb),.05) 66.666%, transparent calc(66.666% + 1px)),
        radial-gradient(60% 45% at 80% 0%, rgba(var(--or-rgb),.08), transparent 60%);
    }
    html.fond-cadrage body::before,
    html.fond-cadrage .hero-collage::after{content:"";}
    /* Les crochets d'angle, dessines une fois et poses aux quatre coins. */
    html.fond-cadrage::before{
      content:""; position:fixed; inset:0; z-index:8998; pointer-events:none;
      opacity:.28;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M2 16V2h14'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M44 16V2H30'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M2 30v14h14'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M44 30v14H30'/%3E%3C/svg%3E");
      background-position:22px 92px, right 22px top 92px, 22px bottom 22px, right 22px bottom 22px;
      background-repeat:no-repeat;
    }
    @media (max-width:760px){ html.fond-cadrage::before{display:none} }

    /* --- F · DEGRADE PROFOND -------------------------------------------
       Aucun motif : la page passe du noir a une teinte plus chaude vers le
       bas, tiree de l'accent. Le plus sobre des six, et celui qui vieillit
       le mieux. */
    html.fond-degrade::before{
      content:""; position:fixed; inset:0; z-index:8998; pointer-events:none;
      background:linear-gradient(180deg,
        var(--noir-0) 0%, var(--noir) 26%,
        color-mix(in srgb, var(--noir) 92%, var(--or)) 74%,
        color-mix(in srgb, var(--noir) 84%, var(--or)) 100%);
      mix-blend-mode:soft-light; opacity:.42;
    }

    /* --- G · LUEUR DE FLASH -------------------------------------------
       Un balayage diagonal, comme la lumiere d'un flash qui traverse le
       cadre. Le plus marque des six : a reserver a un client qui assume. */
    html.fond-flash body::before{
      content:""; position:fixed; inset:-20%; z-index:8999; pointer-events:none;
      background:linear-gradient(118deg,
        transparent 34%,
        rgba(var(--clair-rgb),.030) 46%,
        rgba(var(--or-rgb),.075) 51%,
        rgba(var(--clair-rgb),.030) 56%,
        transparent 68%);
    }
    html.fond-flash::before{
      content:""; position:fixed; inset:0; z-index:8998; pointer-events:none;
      background:radial-gradient(85% 60% at 78% 8%, rgba(var(--or-rgb),.09), transparent 60%);
    }


    /* ═══════════════════════════════════════════════════════════════════
       MON PORTFOLIO COMPLET — 19/08/2026
       Alann tient son portfolio complet sur Pixieset, avec bien plus
       d'images que les 22 du site. Jusqu'ici ce lien etait enfoui : une
       ligne en pied de page et un lien de 13 px au bas d'une carte. La
       piece qui montre le plus de son travail etait la moins visible.
       Il devient une bande, avec trois vignettes en eventail et un bouton.
       ═══════════════════════════════════════════════════════════════════ */
    .portfolio-complet{
      padding:var(--section-py) 0;
      background:
        radial-gradient(70% 60% at 88% 50%, rgba(var(--or-rgb),.07), transparent 62%),
        var(--noir-2);
      border-top:1px solid var(--ligne-soft);
      border-bottom:1px solid var(--ligne-soft);
      overflow:hidden;
    }
    .pf-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;}
    .pf-note{margin-top:14px;font-size:12.5px;color:var(--gris-mute);}

    /* Trois tirages en eventail, comme une pile qu'on vient d'etaler. */
    .pf-visuels{position:relative;height:clamp(260px,26vw,330px);}
    .pf-vignette{
      position:absolute;top:0;overflow:hidden;border-radius:14px;
      border:1px solid var(--ligne);background:var(--noir-3);
      box-shadow:0 20px 46px rgba(var(--ombre-rgb),.5);
      width:40%;height:100%;
      transition:transform .5s var(--ease);
    }
    .pf-vignette img{display:block;width:100%;height:100%;object-fit:cover;}
    .pf-vignette:nth-child(1){left:0;   transform:rotate(-4deg) translateY(6px);  z-index:1;}
    .pf-vignette:nth-child(2){left:30%; transform:rotate(1deg);                   z-index:3;}
    .pf-vignette:nth-child(3){left:60%; transform:rotate(5deg) translateY(6px);   z-index:2;}
    .portfolio-complet:hover .pf-vignette:nth-child(1){transform:rotate(-7deg) translateY(0);}
    .portfolio-complet:hover .pf-vignette:nth-child(3){transform:rotate(8deg) translateY(0);}

    @media (max-width:900px){
      .pf-grille{grid-template-columns:1fr;}
      .pf-visuels{height:230px;order:-1;}
      .pf-vignette{width:42%;}
      .pf-vignette:nth-child(1){left:2%;} .pf-vignette:nth-child(2){left:29%;} .pf-vignette:nth-child(3){left:56%;}
    }
    @media (prefers-reduced-motion: reduce){ .pf-vignette{transition:none;} }

    /* ═══════════════════════════════════════════════════════════════════
       LES FILMS — 20/08/2026
       La page video ne portait qu'un reel vertical. Elle en porte trois, de
       deux formats. Une verticale prend une colonne, un paysage en prend
       deux : la grille accepte les deux sans qu'on ait a trancher un format
       unique, ce qui aurait oblige a recadrer et donc a abimer.
       ═══════════════════════════════════════════════════════════════════ */
    .films-grille{
      display:grid; grid-template-columns:repeat(2,1fr);
      gap:clamp(26px,3.5vw,48px);
      margin-top:clamp(34px,4.5vw,52px);
    }
    .film-paysage{grid-column:1 / -1;}
    .film-cadre{
      position:relative; overflow:hidden; border-radius:18px;
      border:1px solid var(--ligne); background:var(--fond-media);
      box-shadow:0 24px 56px rgba(var(--ombre-rgb),.5);
    }
    .film-cadre video{display:block;width:100%;background:var(--fond-media);}
    .film-vertical .film-cadre video{aspect-ratio:9/16;object-fit:cover;max-height:78vh;}
    .film-paysage .film-cadre video{aspect-ratio:16/9;object-fit:cover;}
    .film-vertical .film-cadre{max-width:340px;}
    .film-texte{margin-top:18px;}
    .film-vertical .film-texte{max-width:340px;}
    .film-titre{
      font-family:var(--font-display); font-size:clamp(18px,2vw,21px);
      font-weight:600; letter-spacing:-.01em; color:var(--blanc); margin:0 0 4px;
    }
    .film-duree{
      font-family:var(--font-display); font-size:11.5px; font-weight:500;
      letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:10px;
    }
    .film-contexte{color:var(--gris); font-size:14.5px; line-height:1.65; margin:0; max-width:56ch;}

    @media (max-width:820px){
      .films-grille{grid-template-columns:1fr;}
      .film-vertical .film-cadre, .film-vertical .film-texte{max-width:none;}
      .film-vertical .film-cadre video{max-height:70vh;}
    }