/* ============================================ */
/* POLICES AUTO-HÉBERGÉES (latin + latin-ext) */
/* ============================================ */

/* Playfair Display retiré (titres en Fraunces) : règles @font-face et fichiers .woff2 supprimés. */

/* DM Sans 300 normal — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans 300 normal — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* DM Sans 400 normal — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans 400 normal — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* DM Sans 500 normal — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans 500 normal — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Fraunces (titres de la page d'accueil refondue ; latin + latin-ext) ---- */
/* Fraunces 400 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces 400 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fraunces 400 italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces 400 italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fraunces 700 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces 700 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fraunces 900 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/fraunces-latin-900-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces 900 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-900-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* =====================================================
   Nicolas Portes — style.css
   Design : nuit dorée chaude
   ===================================================== */

:root {
  --bg:        #130f08;
  --bg-2:      #1c1609;
  --bg-3:      #231b0b;
  --bg-card:   #1a1408;
  --gold:      #c8972a;
  --gold-light:#e0b040;
  --gold-dim:  #8a6018;
  --cream:     #f0e2b8;
  --cream-dim: #c8ae78;
  --muted:     #a78c52; /* contraste AA sur bg/bg-2/bg-3 (>=4.5:1) */
  --dark-muted:#9e8048; /* relevé pour passer AA (était #82693a, ~3.3:1) */
  --border:    rgba(200,151,42,0.12);
  --border-light: rgba(200,151,42,0.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Le fond est aussi porté par <html>, pas seulement par <body> : c'est <html> qui peint
   le canvas. Sans lui, le navigateur peut afficher une trame blanche entre deux pages,
   très visible sur un fond sombre. */
html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  /* numOctaves ramené de 4 à 1 : feTurbulence est calculé au processeur et chaque octave
     supplémentaire coûte un passage de bruit sur tout l'écran. À 2% d'opacité effective
     (0.04 dans le SVG × 0.5 sur le calque), les octaves supplémentaires sont invisibles. */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0.5;
}

* { position: relative; z-index: 1; }
a { text-decoration: none; color: inherit; }

/* FOCUS CLAVIER — anneau visible homogène (souris non affectée grâce à :focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 3px;
}

/* COINS DORÉS */
.framed { border: 1px solid var(--border-light); position: relative; }
.framed::before, .framed::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: var(--gold); border-style: solid; z-index: 2; }
.framed::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.framed::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* SÉPARATEUR */
.sep { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; display: flex; align-items: center; gap: 2rem; }
.sep-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); opacity: 0.3; }
.sep-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; opacity: 0.6; }

/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: rgba(19,15,8,0.96); backdrop-filter: blur(16px); padding: 0 2.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; }
/* arête basse : filet doré qui s'éteint sur les bords (même geste que .cta-block::before) */
nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.55; }
.nav-logo { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; color: var(--cream); letter-spacing: 0.01em; }
/* le logo s'inscrit dans un cercle, comme les pastilles 01/02/03 et le rond REC */
.logo-ring { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, box-shadow 0.3s; }
.nav-logo:hover .logo-ring { border-color: var(--gold); box-shadow: 0 0 18px rgba(200,151,42,0.22); }
.logo-ring img { width: 34px; height: 34px; display: block; }
.nav-name span { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links li { display: flex; align-items: center; gap: 2rem; }
/* :last-of-type et non :last-child — le span.nav-slider ajouté en fin de ul par
   site.js ferait perdre :last-child au dernier li et un ◆ parasite apparaîtrait */
.nav-links li:not(:last-of-type)::after { content: '◆'; color: var(--gold); opacity: 0.5; font-size: 0.55rem; }
.nav-links a { font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
/* Soulignement du lien actif : une SEULE barre glissante (le curseur), posée par
   site.js, qui voyage d'un onglet à l'autre au fil des pages — même geste que le
   sélecteur Tout/Vidéo/Photo du portfolio. Elle s'efface quand aucun lien n'est
   actif (accueil). Sans JS, repli : soulignement statique sous le lien actif. */
.nav-links a:not(.nav-cta) { padding-bottom: 6px; }
.nav-links a.active:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); }
html.js .nav-links a.active:not(.nav-cta)::after { display: none; }
.nav-slider { position: absolute; height: 2px; border-radius: 2px; background: var(--gold);
  opacity: 0; pointer-events: none; }
.nav-slider.visible { opacity: 1; }
/* la transition n'est activée qu'une fois la barre posée (is-ready), pour que la
   première mise en place soit instantanée — même mécanique que .pf-thumb */
.nav-slider.is-ready { transition: left 0.38s cubic-bezier(.34,.01,.2,1),
  width 0.38s cubic-bezier(.34,.01,.2,1), opacity 0.25s ease; }
.nav-cta { padding: 0.45rem 1.1rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.7rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.2s; }
.nav-cta:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; z-index: 110; }
.nav-burger span { display: block; width: 22px; height: 1.4px; background: var(--cream); border-radius: 2px; transition: transform 0.32s ease, opacity 0.2s ease; transform-origin: center; }
/* croix quand le menu plein écran est ouvert */
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }
/* ligne "Toulouse" : tail discret de la nav desktop, espacement régulier (puce masquée). */
.nav-links li.nav-rec { display: flex; align-items: center; gap: 0;
  font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.nav-links li.nav-rec .dot { display: none; }

/* PAGE HEADER */
.page-header { border-bottom: 1px solid var(--border); padding: 5rem 2.5rem 4rem; }
.header-inner { max-width: 1100px; margin: 0 auto; border-left: 2px solid var(--gold); padding-left: 2rem; }
.page-header-plain { max-width: 1100px; margin: 0 auto; padding: 5rem 2.5rem 4rem; border-bottom: 1px solid var(--border); }
.page-tag { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block; }
.page-pre { font-size: 0.85rem; color: var(--muted); font-style: italic; margin-bottom: 0.5rem; }
.page-title { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; color: var(--cream); line-height: 1.1; margin-bottom: 1.25rem; }
.page-title em { font-style: italic; font-weight: 400; color: var(--gold); display: block; }
.page-subtitle { font-size: 1rem; color: var(--muted); max-width: 560px; line-height: 1.85; }

/* HOME — HERO */
.hero { max-width: 1100px; margin: 0 auto; padding: 3rem 2.5rem; }
.hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; }
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
.hero-title { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; color: var(--cream); line-height: 1.05; margin-bottom: 1.75rem; max-width: 760px; }
.hero-title em { font-style: italic; font-weight: 400; color: var(--gold); display: block; }
.hero-body { font-size: 1.05rem; color: var(--cream-dim); max-width: 620px; line-height: 1.85; margin-bottom: 2.25rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-price { font-size: 0.78rem; color: var(--dark-muted); letter-spacing: 0.04em; }

/* SECTIONS */
.content { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }
section { padding: 4rem 0; }
.content > section { border-bottom: none; }
.content > section:last-child { border-bottom: none; }
.section-label { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
.section-title { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 1.5rem; }
.section-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.body-text { font-size: 0.95rem; color: var(--muted); max-width: 640px; line-height: 1.95; margin-bottom: 1.25rem; }
.body-text strong { font-weight: 500; color: var(--cream-dim); }

/* HOME — OFFRES (bloc 3 cartes) */
.offres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.offre-card { background: var(--bg-2); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 0.65rem; transition: background 0.3s; min-height: 360px; }
.offre-card:hover { background: var(--bg-3); }
.offre-num { font-family: 'Fraunces', serif; font-size: 0.85rem; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.offre-title { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: var(--cream); line-height: 1.2; }
.offre-sub { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; line-height: 1.5; }
.offre-desc { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.85; flex: 1; }
.offre-link { font-size: 0.78rem; color: var(--gold); letter-spacing: 0.05em; margin-top: 1.25rem; transition: color 0.2s; }
.offre-card:hover .offre-link { color: var(--gold-light); }

/* HOME — APPROCHE & CHIFFRES */
.approche-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.chiffre { background: var(--bg-2); padding: 2rem 1.25rem; text-align: center; }
.chiffre-val { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 0.65rem; }
.chiffre-label { font-size: 0.72rem; color: var(--muted); line-height: 1.55; }

/* HOME — TÉMOIGNAGES */
.temoignages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.temoignage { background: var(--bg-2); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.temoignage-text { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.98rem; color: var(--cream-dim); line-height: 1.85; flex: 1; }
.temoignage-author { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.05em; }

/* HOME — CLIENTS */
.clients-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.client-pill { padding: 0.5rem 1rem; border: 0.5px solid var(--border); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; transition: all 0.2s; background: var(--bg-2); }
.client-pill:hover { border-color: var(--border-light); color: var(--cream-dim); }

/* COMPOSANTS */
.quote { border-left: 2px solid var(--gold); padding: 0.75rem 0 0.75rem 1.75rem; margin: 2rem 0; }
.quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem; color: var(--cream-dim); line-height: 1.8; }

.note { padding: 0 0 0 1.25rem; border-left: 2px solid var(--gold-dim); font-size: 0.8rem; color: var(--muted); line-height: 1.75; }
.note strong { color: var(--cream-dim); font-weight: 500; }

.forfaits { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); margin: 2rem 0 1rem; }
.forfait { background: var(--bg-card); padding: 2rem; }
.forfait.featured { border-top: 2px solid var(--gold); }
.forfait-tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; display: block; }
.forfait-name { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: var(--cream); margin-bottom: 0.25rem; }
.forfait-price { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: var(--gold); margin: 0.75rem 0 0.25rem; line-height: 1; }
.forfait-price span { font-size: 0.85rem; font-weight: 300; color: var(--muted); }
/* mention HT : suffixe discret sur les prix + note de bloc tarifs */
.ht { font-size: 0.5em !important; font-weight: 400; color: var(--muted); letter-spacing: 0.06em; display: inline !important; vertical-align: baseline; }
.tarif-ht { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--dark-muted); margin-top: 1.1rem; }
.forfait-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 1.5rem; }
.forfait-list { list-style: none; }
.forfait-list li { font-size: 0.82rem; color: var(--muted); line-height: 1.9; position: relative; padding-left: 1rem; }
.forfait-list li::before { content: '–'; position: absolute; left: 0; color: var(--dark-muted); }

.offre-base { border: 1px solid var(--border); background: var(--bg-card); padding: 2rem; margin: 2rem 0 1rem; }
.offre-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.offre-name { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 700; color: var(--cream); }
.offre-price { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.offre-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 1rem; }
.offre-list { list-style: none; }
.offre-list li { font-size: 0.82rem; color: var(--muted); line-height: 1.9; position: relative; padding-left: 1rem; }
.offre-list li::before { content: '–'; position: absolute; left: 0; color: var(--dark-muted); }

.options-label { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.75rem; display: block; }
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1rem; }
.option { background: var(--bg-card); padding: 1rem; }
.option-name { font-size: 0.82rem; font-weight: 500; color: var(--cream); margin-bottom: 0.2rem; }
.option-desc { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.4rem; line-height: 1.4; }
.option-price { font-size: 0.82rem; font-weight: 500; color: var(--gold); }

.devis-block { border: 1px solid var(--border-light); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1px; background: var(--bg-2); }
.devis-title { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; color: var(--cream); margin-bottom: 0.25rem; }
.devis-desc { font-size: 0.78rem; color: var(--muted); }

.pour-qui-list { list-style: none; margin-top: 1.5rem; }
.pour-qui-list li { font-size: 0.88rem; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0.9rem 0 0.9rem 1.75rem; position: relative; }
.pour-qui-list li:last-child { border-bottom: none; }
.pour-qui-list li::before { position: absolute; left: 0; }
.pour-qui-list li.yes::before { content: '✓'; color: var(--gold); }
.pour-qui-list li.no::before { content: '✗'; color: var(--dark-muted); }

.crosslink { border: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; background: var(--bg-2); }
.crosslink-text { font-size: 0.82rem; color: var(--muted); }
.crosslink-link { font-size: 0.82rem; color: var(--gold); transition: color 0.2s; }
.crosslink-link:hover { color: var(--gold-light); }

/* BOUTONS — pastille arrondie unifiée sur tout le site (cf. accueil + offres) */
.btn-primary { display: inline-block; padding: 0.8rem 1.9rem; background: var(--gold); border-radius: 999px; font-size: 0.82rem; color: var(--bg); font-weight: 500; letter-spacing: 0.04em; transition: background 0.2s, transform 0.2s; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-secondary { display: inline-block; padding: 0.8rem 1.9rem; border: 1px solid var(--border-light); border-radius: 999px; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; transition: all 0.2s; }
.btn-secondary:hover { border-color: var(--gold-dim); color: var(--cream-dim); }
.btn-outline { display: inline-block; padding: 0.55rem 1.25rem; border: 1px solid var(--border-light); border-radius: 999px; font-size: 0.78rem; color: var(--muted); transition: all 0.2s; }
.btn-outline:hover { border-color: var(--gold); color: var(--cream-dim); }
.btn-gold { display: inline-block; padding: 0.6rem 1.4rem; background: var(--gold); border-radius: 999px; font-size: 0.8rem; color: var(--bg); font-weight: 500; transition: background 0.2s, transform 0.2s; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }

/* CTA */
.cta-block { padding: 4rem 3rem; text-align: center; background: var(--bg-2); position: relative; overflow: hidden; border: 1px solid var(--border); }
.cta-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.cta-title { font-family: 'Fraunces', serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--cream); margin-bottom: 0.75rem; }
.cta-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.cta-body { font-size: 0.88rem; color: var(--muted); max-width: 380px; margin: 0 auto 2rem; line-height: 1.85; }

/* ENCART DOUBLE AUDIENCE — home */
.audience-section { max-width: 1100px; margin: 0 auto; padding: 3rem 2.5rem 0; }
.audience-block { padding: 4rem 3rem; text-align: center; background: var(--bg-2); border: 1px solid var(--border); position: relative; overflow: hidden; }
.audience-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.audience-block .section-label { justify-content: center; margin-bottom: 1.5rem; }
.audience-block .section-label::before { display: none; }
.audience-block .section-title { text-align: center; margin-bottom: 1.5rem; }
.audience-diptyque { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 660px; margin: 2.5rem auto; position: relative; }
.audience-diptyque::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); }
.audience-col { padding: 0 2rem; text-align: left; }
.audience-col-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.audience-col-text { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.85; }
.audience-conclude { font-family: 'Fraunces', serif; font-style: italic; text-align: center; font-size: 0.95rem; color: var(--cream-dim); max-width: 640px; margin: 0 auto; line-height: 1.85; }

/* PORTFOLIO (agences + futur créations) */
.cat-section { padding-top: 4rem; border-top: 0.5px solid var(--border); margin-top: 4rem; }
.cat-section:first-child { border-top: none; margin-top: 2rem; }
.cat-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.cat-label::before { content: ''; display: block; width: 28px; height: 0.5px; background: var(--gold); }

.case { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); margin-bottom: 1.5rem; border: 1px solid var(--border); }
.case.reverse { direction: rtl; }
.case.reverse > * { direction: ltr; }
.case-body { background: var(--bg-2); padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.case-video { background: var(--bg-2); }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 100%; min-height: 260px; overflow: hidden; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.case-client { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.case-title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: var(--cream); margin-bottom: 0.75rem; line-height: 1.3; }
.case-context { font-size: 0.82rem; color: var(--muted); line-height: 1.75; margin-bottom: 0.75rem; }
.case-detail { font-size: 0.75rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.75rem; }
.case-highlight { font-size: 0.78rem; color: var(--gold); font-style: italic; }

.case-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; gap: 1px; background: var(--border); }
.case-photos .photo-cell:first-child { grid-column: 1 / -1; aspect-ratio: auto; }
.photo-cell { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: var(--bg-2); }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.photo-cell:hover img { transform: scale(1.03); }

.case-full { background: var(--border); margin-bottom: 1.5rem; border: 0.5px solid var(--border); }
.case-full-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.case-full-mosaic { margin-top: 1px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); }

.lightbox { display: none; position: fixed; inset: 0; background: rgba(8, 6, 3, 0.96); z-index: 9999; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 60px rgba(0,0,0,0.6); }
.lightbox-close { position: absolute; top: 1.5rem; right: 1.75rem; width: 40px; height: 40px; background: none; border: 1px solid var(--gold-dim); color: var(--gold); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.lightbox-close::before, .lightbox-close::after { content: ''; position: absolute; width: 16px; height: 1px; background: var(--gold); transition: background 0.2s; }
.lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }
.lightbox-close:hover { border-color: var(--gold); background: var(--gold); }
.lightbox-close:hover::before, .lightbox-close:hover::after { background: var(--bg); }

.portfolio-cta { margin-top: 5rem; padding: 3rem 2.5rem; border: 0.5px solid var(--border-light); background: var(--bg-2); text-align: center; }
.portfolio-cta-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; color: var(--cream); margin-bottom: 0.75rem; }
.portfolio-cta-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.portfolio-cta-text { font-size: 0.85rem; color: var(--muted); max-width: 480px; margin: 0 auto 1.5rem; line-height: 1.75; }

.coming-soon { border: 0.5px dashed var(--border-light); padding: 2rem; text-align: center; color: var(--muted); font-size: 0.82rem; font-style: italic; }

.portfolio-stats { margin-top: 1.5rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.portfolio-stats span { color: var(--gold); margin: 0 0.5rem; }

@media (max-width: 768px) {
  .case { grid-template-columns: 1fr; direction: ltr; }
  .case.reverse { direction: ltr; }
  .case-video { order: -1; }
  .video-wrap { min-height: 200px; }
  .case-full-top { grid-template-columns: 1fr; }
  .case-full-mosaic { grid-template-columns: 1fr 1fr; }
  .portfolio-cta { padding: 2.5rem 1.5rem; }
}

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; }
.footer-links a { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.footer-links a:hover { color: var(--cream-dim); }
.footer-location { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .approche-grid { grid-template-columns: 1fr; gap: 3rem; }
  .offres-grid { grid-template-columns: 1fr; }
  .temoignages-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  nav { padding: 0 1.25rem; }
  .nav-burger { display: flex; }

  /* ===== MENU PLEIN ÉCRAN (mobile) ===== */
  /* dimensions explicites en vh/vw : le backdrop-filter du nav en fait le bloc
     conteneur des enfants fixed, donc inset:0 ne couvrirait que la hauteur du nav. */
  .nav-links {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    overflow-y: auto; z-index: 105; padding: 4.5rem 1.5rem 2.5rem;
    background: radial-gradient(120% 80% at 50% 0%, rgba(200,151,42,0.10), transparent 60%), rgba(11,8,3,0.99);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.34s ease, transform 0.34s ease, visibility 0s linear 0.34s;
  }
  body.menu-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity 0.34s ease, transform 0.34s ease;
  }
  /* chaque entrée : grand titre Fraunces, apparition décalée */
  .nav-links li { display: block; gap: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
  body.menu-open .nav-links li { opacity: 1; transform: none; }
  body.menu-open .nav-links li:nth-child(1) { transition-delay: 0.10s; }
  body.menu-open .nav-links li:nth-child(2) { transition-delay: 0.16s; }
  body.menu-open .nav-links li:nth-child(3) { transition-delay: 0.22s; }
  body.menu-open .nav-links li:nth-child(4) { transition-delay: 0.28s; }
  body.menu-open .nav-links li.nav-rec { transition-delay: 0.36s; }
  .nav-links li:not(:last-of-type)::after { display: none; }
  .nav-links a { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.02em; text-transform: none; color: var(--cream); }
  .nav-links a.active { color: var(--gold); }
  /* dans le menu plein écran, l'or du texte suffit : pas de soulignement sous les grands titres */
  .nav-links a::after { display: none; }
  .nav-slider { display: none; }
  .nav-links .nav-cta { padding: 0.7rem 2rem; border-color: var(--gold-dim); font-size: 1.1rem; color: var(--gold); border-radius: 999px; }
  .nav-links .nav-cta:hover { background: var(--gold); color: var(--bg); }
  /* ligne REC en pied de panneau */
  .nav-links li.nav-rec { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem;
    font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
  .nav-links li.nav-rec .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.6s infinite; }
  body.menu-open { overflow: hidden; }
  .page-header { padding: 3rem 1.25rem 2.5rem; }
  .page-header-plain { padding: 3rem 1.25rem 2.5rem; }
  .content { padding: 0 1.25rem; }
  .sep { padding: 0 1.25rem; }
  .hero { padding: 4rem 1.25rem; }
  .forfaits { grid-template-columns: 1fr; }
  .offre-header { flex-direction: column; }
  .devis-block { flex-direction: column; align-items: flex-start; }
  .crosslink { flex-direction: column; }
  .cta-block { padding: 3rem 1.5rem; }
  .audience-section { padding: 3rem 1.25rem 0; }
  .audience-block { padding: 3rem 1.5rem; }
  footer { padding: 2rem 1.25rem; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .audience-diptyque { grid-template-columns: 1fr; gap: 2rem; }
  .audience-diptyque::before { top: 50%; bottom: auto; left: 0; right: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
  .audience-col { padding: 0; text-align: center; }
  .chiffres { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page-title { font-size: 2rem; }
  .options-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== HERO SPLIT — mutualisé (pages offres + a-propos) ===== */
.hero-split { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.hero-split .header-inner { padding-left: 2rem; }
.hero-image { aspect-ratio: 4/5; background-color: var(--bg-2); background-size: cover; background-position: center; width: 100%; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-image { aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; }
}

/* ===== OFFER-SPOTLIGHT — bloc mis en avant (offres-video + offres-photo) ===== */
.offer-spotlight { border: 1.5px solid var(--gold); padding: 0; margin: 1rem 0 4rem; background: var(--bg-2); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; }
.content > section.offer-spotlight { border-bottom: 1.5px solid var(--gold); }
.offer-spotlight::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 1; }
.offer-spotlight-content { padding: 3rem 3rem; }
.offer-spotlight-image { background-size: cover; background-position: center; background-color: var(--bg-3); min-height: 380px; }
.offer-spotlight-tag { display: inline-block; font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; background: var(--gold); color: var(--bg); padding: 4px 12px; margin-bottom: 1.25rem; }
.offer-spotlight-title { font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 1rem; }
.offer-spotlight-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.offer-spotlight-body { font-size: 0.88rem; color: var(--muted); line-height: 1.85; margin-bottom: 2rem; }
.offer-spotlight-prices { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.offer-spotlight-price-item { display: flex; flex-direction: column; gap: 0.25rem; }
.offer-spotlight-price-label { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-muted); }
.offer-spotlight-price-val { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: var(--gold); }
@media (max-width: 768px) {
  .offer-spotlight { grid-template-columns: 1fr; }
  .offer-spotlight-content { padding: 2rem 1.5rem; }
  .offer-spotlight-image { min-height: 240px; order: -1; }
}

/* ===== OFFRE-BLOCK — blocs alternés image/texte (offres-video + offres-photo) ===== */
.offres-list { padding: 1rem 0 3rem; }
.section-intro { font-size: 0.85rem; color: var(--muted); max-width: 540px; line-height: 1.85; margin-bottom: 2.5rem; }
.offre-block { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3rem 0; border-bottom: 0.5px solid var(--border); }
.offre-block:last-child { border-bottom: none; }
.offre-block.reversed .offre-block-image { order: 2; }
.offre-block.align-top { align-items: start; }
.offre-block.align-center { align-items: center; }
.offre-block.align-bottom { align-items: end; }
.offre-block-image { aspect-ratio: 1/1; background-size: cover; background-position: center; background-color: var(--bg-3); position: relative; }
.offre-block-content { padding: 0; max-width: 460px; }
.offre-block.reversed .offre-block-content { margin-left: auto; }
.offre-block-tag { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; display: block; }
.offre-block-title { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 0.5rem; }
.offre-block-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.offre-block-sub { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: 1rem; }
.offre-block-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.85; margin-bottom: 1.5rem; }
.offre-block-prices { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.offre-block-price { font-size: 0.75rem; padding: 4px 10px; border: 0.5px solid var(--border-light); color: var(--cream-dim); background: var(--bg-2); }
.offre-block-cta { font-size: 0.82rem; color: var(--gold); transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
.offre-block-cta:hover { color: var(--gold-light); }
@media (max-width: 768px) {
  .offre-block { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .offre-block.reversed .offre-block-image { order: 0; }
  .offre-block.reversed .offre-block-content { margin-left: 0; }
}

/* ===== LEGAL — mentions-legales + cgv ===== */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 5rem 2.5rem; }
.legal-section { padding: 2.5rem 0; border-bottom: 0.5px solid var(--border); }
.legal-section:last-child { border-bottom: none; }
.legal-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: var(--cream); margin-bottom: 1.25rem; }
.legal-body { font-size: 0.88rem; color: var(--muted); line-height: 1.9; margin-bottom: 0.75rem; }
.legal-body strong { font-weight: 500; color: var(--cream-dim); }
.legal-body a { color: var(--gold); }
.legal-body a:hover { color: var(--gold-light); }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-table th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-muted); text-align: left; padding: 0.75rem 1rem; border-bottom: 0.5px solid var(--border); font-weight: 400; }
.legal-table td { font-size: 0.85rem; color: var(--muted); padding: 0.75rem 1rem; border-bottom: 0.5px solid var(--border); vertical-align: top; }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--cream-dim); font-weight: 400; white-space: nowrap; }
@media (max-width: 768px) {
  .legal-wrap { padding: 3rem 1.25rem; }
  .legal-table th, .legal-table td { padding: 0.6rem 0.5rem; font-size: 0.78rem; }
}

/* ===== CONTACT — mutualisé (contact + contact-agences) ===== */
.contact-wrap { max-width: 1100px; margin: 0 auto; padding: 5rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.fs-success { display: none; padding: 1rem; background: rgba(200,151,42,0.08); border: 0.5px solid var(--gold); font-size: 0.85rem; color: var(--gold); margin-bottom: 1rem; }
.fs-error-global { display: none; padding: 1rem; background: rgba(163,45,45,0.08); border: 0.5px solid #a32d2d; font-size: 0.85rem; color: #f09595; margin-bottom: 1rem; }
@media (max-width: 768px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 1.25rem; }
}

/* ===== COMPOSANT VIDÉO — examples + cartes + modal (l-eclat, dans-la-lumiere, la-signature) ===== */
/* SECTION EXEMPLES VIDÉO */
.examples-intro { font-size: 0.88rem; color: var(--muted); max-width: 640px; line-height: 1.85; margin-bottom: 2rem; }
.examples-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0 1rem; }
.video-card { background: var(--bg-2); border: 1px solid var(--border); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background 0.25s; cursor: pointer; }
.video-card:hover { background: var(--bg-3); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(19, 15, 8, 0.7); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; transition: background 0.25s, transform 0.25s; pointer-events: none; }
.video-card:hover .video-play { background: var(--gold); transform: translate(-50%, -50%) scale(1.05); }
.video-play svg { width: 16px; height: 16px; fill: var(--gold); transition: fill 0.25s; margin-left: 2px; }
.video-card:hover .video-play svg { fill: var(--bg); }
.video-meta { padding: 1.1rem 1.4rem 1.4rem; }
.video-tag { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; display: block; }
.video-title { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; color: var(--cream); margin-bottom: 0.4rem; line-height: 1.3; transition: color 0.25s; }
.video-card:hover .video-title { color: var(--gold); }
.video-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.65rem; }
.video-quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.82rem; color: var(--cream-dim); border-left: 2px solid var(--gold-dim); padding-left: 0.75rem; line-height: 1.55; }
@media (max-width: 768px) { .examples-videos { grid-template-columns: 1fr; gap: 1.5rem; } }

/* MODAL LIGHTBOX VIDÉO */
.video-modal { position: fixed; inset: 0; background: rgba(8, 6, 3, 0.96); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 2rem; }
.video-modal.active { display: flex; }
.video-modal-content { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16/9; background: #000; box-shadow: 0 0 60px rgba(0,0,0,0.6); }
.video-modal-content iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-close { position: absolute; top: 1.5rem; right: 1.75rem; width: 40px; height: 40px; background: none; border: 1px solid var(--gold-dim); color: var(--gold); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.video-modal-close::before, .video-modal-close::after { content: ''; position: absolute; width: 16px; height: 1px; background: var(--gold); transition: background 0.2s; }
.video-modal-close::before { transform: rotate(45deg); }
.video-modal-close::after { transform: rotate(-45deg); }
.video-modal-close:hover { border-color: var(--gold); background: var(--gold); }
.video-modal-close:hover::before, .video-modal-close:hover::after { background: var(--bg); }

/* ===== GALERIE PHOTO — mosaïque (la-ruche, le-flash) + variante .portraits (la-pose) ===== */
/* GALERIE PHOTO — Mosaïque 6 cols, mix paysage 3:2 et portrait 2:3 */
.gallery-intro { font-size: 0.88rem; color: var(--muted); max-width: 640px; line-height: 1.85; margin-bottom: 2rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); margin: 2rem 0 1rem; }
.gallery-item { display: block; background: var(--bg-2); overflow: hidden; position: relative; cursor: pointer; }
.gallery-item.paysage { grid-column: span 3; aspect-ratio: 3/2; }
.gallery-item.portrait { grid-column: span 2; aspect-ratio: 2/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.3s ease; }
.gallery-item:hover img { transform: scale(1.04); opacity: 0.92; }
.gallery-item::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(200,151,42,0); transition: box-shadow 0.3s; pointer-events: none; }
.gallery-item:hover::after { box-shadow: inset 0 0 0 1px rgba(200,151,42,0.4); }
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 1px; }
  .gallery-item.paysage, .gallery-item.portrait { grid-column: span 1; }
}
.gallery-grid.portraits { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.portraits .gallery-item { aspect-ratio: 2/3; }
@media (max-width: 600px) { .gallery-grid.portraits { grid-template-columns: 1fr; } }

/* ============================================ */
/* FOND DORÉ + SÉPARATEURS CINÉMA — repris de l'accueil, valables sur tout le site */
/* ============================================ */
.bokeh { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(200,151,42,0.09), transparent 70%);
  filter: blur(30px); animation: drift 16s ease-in-out infinite alternate;
  /* Le flou est figé sur son propre calque : sans ça, le navigateur recalcule un
     blur(30px) plein écran à chaque image de l'animation. */
  will-change: transform; }
/* translate3d plutôt que translateY : déplacement pris en charge par le compositeur. */
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-44px,0); } }
/* mobile : moins de flou à repeindre (2 halos au lieu de 4, flou plus léger) */
@media (max-width: 768px) {
  .bokeh { filter: blur(22px); }
  .bokeh:nth-of-type(3), .bokeh:nth-of-type(4) { display: none; }
}

.sep-film { position: relative; width: 100%; max-width: min(980px, 92vw); height: 56px;
  margin: 1.5rem auto; padding: 0; overflow: hidden;
  border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  background: rgba(28,22,9,0.45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
.sep-film .film-strip { position: relative; display: flex; height: 100%; align-items: stretch;
  width: max-content; animation: filmscroll 7s linear infinite; will-change: transform; }
.sep-film .film-strip::before, .sep-film .film-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(200,151,42,0.36) 7px 16px, transparent 16px 22px); }
.sep-film .film-strip::before { top: 4px; } .sep-film .film-strip::after { bottom: 4px; }
.sep-film .frame { flex: 0 0 88px; width: 88px; border-left: 1px solid rgba(200,151,42,0.16); }
@keyframes filmscroll { from { transform: translateX(0); } to { transform: translateX(-88px); } }
.sep-wave { display: flex; justify-content: center; align-items: center; gap: 6px; height: 56px;
  width: 100%; max-width: min(980px, 92vw); margin: 1.5rem auto; overflow: hidden; }
.sep-wave b { width: 3px; border-radius: 3px; background: var(--gold); flex: 0 0 auto;
  transform-origin: center; animation: eq 1s ease-in-out infinite; }
@keyframes eq { 0% { transform: scaleY(0.3); } 25% { transform: scaleY(0.9); } 50% { transform: scaleY(0.5); } 75% { transform: scaleY(1); } 100% { transform: scaleY(0.35); } }
/* point clignotant (REC) — disponible sur toutes les pages */
@keyframes blink { 50% { opacity: 0.15; } }

/* ============================================ */
/* TRANSITION ENTRE PAGES — fondu doux (Firefox ne gérant pas les
   transitions natives entre documents, on la fait en CSS + site.js). */
/* L'arrivée est une animation pure : elle se termine toujours d'elle-même,
   aucun risque de page bloquée invisible si un script échoue. Pendant le fondu,
   c'est le fond de <html> (nuit dorée) qui tient l'écran, jamais du blanc. */
/* ============================================ */
@keyframes page-entree { from { opacity: 0; } to { opacity: 1; } }
/* Seul le CONTENU participe au fondu. Le chrome partagé (nav, halos, bannière
   cookies) est identique d'une page à l'autre : en le laissant hors du fondu, il
   paraît immobile pendant la transition — le menu « reste », seul le contenu voyage. */
html.js main, html.js footer { animation: page-entree 0.3s ease; }
/* départ, posé par site.js au clic sur un lien interne : animation coupée pour
   que le fondu de sortie ne soit pas retenu par l'animation d'entrée en cours */
/* pointer-events:none : le contenu devenu invisible ne doit plus capter de clics
   pendant les 200 ms de sortie (un second clic re-ciblerait la navigation à l'aveugle) */
html.page-sortie main, html.page-sortie footer { animation: none; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }

/* ============================================ */
/* RÉVÉLATION AU SCROLL — pages internes (activée par js/site.js) */
/* État initial posé en JS uniquement : sans JS, rien n'est masqué. */
/* ============================================ */
.reveal-init { opacity: 0; transform: translateY(18px); }
.reveal-in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }

/* ============================================ */
/* MOUVEMENT RÉDUIT — couverture complète du site */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-init { opacity: 1; transform: none; }
}