/* ==========================================================================
   studio-dedicace.com — feuille de style unique
   1. Tokens          5. Boutons & formulaires
   2. Reset & base    6. Hero
   3. Layout          7. Sections de la page d'accueil
   4. Header/Footer   8. Espace client & admin
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Palette reprise du logo studio-dedicace.com : dégradé ambre → orange
   (dominante) et magenta → violet (l'égaliseur), sur fond sombre.
   Tous les couples texte/fond respectent un contraste WCAG AA (4.5:1).
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs — thème sombre cinématique */
  --bg:            #0b0a12;
  --bg-elevated:   #131019;
  --surface:       #1a141f00;
  --surface-solid: #1a141f;
  --surface-2:     #241b2c;
  --border:        #33263c;
  --border-soft:   #291f31;

  --text:          #f8f4f2;
  --text-muted:    #bdb0b8;
  --text-dim:      #8d8090;

  /* Magenta → violet : boutons secondaires, focus, liens */
  --primary:       #d6336c;
  --primary-600:   #8b2f9e;
  --primary-300:   #ff8fb8;
  --primary-soft:  rgba(214, 51, 108, .14);

  /* Ambre → orange : couleur d'accent principale, reprise du logo.
     Le nom « gold » est conservé pour ne pas casser les classes existantes. */
  --gold:          #f97316;
  --gold-300:      #fbbf24;
  --gold-soft:     rgba(249, 115, 22, .14);
  --on-gold:       #2b1102;   /* texte sombre sur aplat orange : contraste 6,3:1 */

  /* L'orange sert à deux usages opposés : APLAT (bouton, pastille) et TEXTE
     (intertitres, icônes, anneau de focus). Sur fond clair, l'orange vif
     n'atteint pas 4,5:1 en texte : --gold-ink est sa version lisible.
     Sur fond sombre, les deux se confondent. */
  --gold-ink:      #f97316;

  /* Surfaces translucides, du plus discret au plus marqué.
     En thème clair, ce sont des voiles NOIRS et non blancs. */
  --tint-05:       rgba(255, 255, 255, .015);
  --tint-1:        rgba(255, 255, 255, .028);
  --tint-2:        rgba(255, 255, 255, .035);
  --tint-3:        rgba(255, 255, 255, .055);
  --tint-4:        rgba(255, 255, 255, .095);

  --card-bg:        linear-gradient(160deg, rgba(35, 30, 58, .82), rgba(20, 17, 36, .82));
  --card-bg-strong: linear-gradient(170deg, rgba(40, 33, 70, .92), rgba(18, 15, 34, .95));

  --header-bg:       rgba(11, 10, 18, .72);
  --header-bg-solid: rgba(11, 10, 18, .94);
  --nav-mobile-bg:   rgba(13, 11, 24, .985);
  --footer-bg:       rgba(9, 8, 16, .6);
  --quote-bg:        rgba(0, 0, 0, .22);
  --modal-backdrop:  rgba(6, 5, 12, .74);

  /* Halos d'ambiance du fond de page */
  --halo-1: rgba(249, 115, 22, .16);
  --halo-2: rgba(214, 51, 108, .16);
  --halo-3: rgba(139, 47, 158, .16);

  --ok:            #4ade80;
  --ok-soft:       rgba(74, 222, 128, .13);
  --warn:          #fbbf24;
  --warn-soft:     rgba(251, 191, 36, .13);
  --danger:        #f87171;
  --danger-soft:   rgba(248, 113, 113, .13);
  --info:          #60a5fa;
  --info-soft:     rgba(96, 165, 250, .13);

  /* Couleur du TEXTE des bandeaux. Distincte de la couleur d'etat ci-dessus,
     qui sert aux pastilles et aux bordures : un vert pale lisible sur fond
     sombre devient invisible sur fond clair. */
  --ok-ink:        #b9f6d0;
  --warn-ink:      #ffe6ab;
  --danger-ink:    #ffc9c9;
  --info-ink:      #cfe2ff;

  /* Typographie */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  clamp(2.5rem, 7vw, 4.5rem);

  /* Espacement — rythme de 4px */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;    --sp-12: 8rem;

  /* Rayons, ombres, transitions */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .34);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, .46);
  --shadow-glow: 0 12px 40px rgba(214, 51, 108, .32);

  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 420ms cubic-bezier(.22, .61, .36, 1);

  --container: 1440px;
  --header-h: 100px;  /* hauteur calee sur le logo (70 px + respiration) */

  /* Couches */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --------------------------------------------------------------------------
   1 bis. THÈME CLAIR
   Activé par l'attribut data-theme="light" sur <html>, posé côté serveur
   d'après un cookie (voir inc/header.php). Aucun clignotement au chargement :
   la bonne palette est déjà là au premier pixel affiché.

   Le hero fait exception et reste sombre dans les deux thèmes : son texte
   blanc se superpose à des photos et vidéos, un fond clair le rendrait
   illisible. C'est un choix, pas un oubli.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg:            #faf7f6;
  --bg-elevated:   #ffffff;
  --surface:       #ffffff00;
  --surface-solid: #ffffff;
  --surface-2:     #f2ebe8;
  --border:        #e3d9d5;
  --border-soft:   #eee7e4;

  --text:          #1c1219;
  --text-muted:    #5c505a;
  --text-dim:      #736670;

  /* Versions assombries : sur fond clair, les teintes vives du thème sombre
     tomberaient sous le seuil de lisibilité. */
  --primary:       #c2185b;
  --primary-600:   #7b2d8e;
  --primary-300:   #a81b52;   /* couleur des liens : 6,7:1 sur le fond clair */
  --primary-soft:  rgba(194, 24, 91, .10);

  --gold:          #f97316;   /* inchangé : c'est un APLAT, avec texte sombre */
  --gold-300:      #fbbf24;
  --gold-ink:      #b8430a;   /* version texte : 5,1:1 sur le fond clair */
  --gold-soft:     rgba(249, 115, 22, .12);

  --ok:            #15803d;
  --ok-soft:       rgba(21, 128, 61, .10);
  --warn:          #a16207;
  --warn-soft:     rgba(161, 98, 7, .10);
  --danger:        #b91c1c;
  --danger-soft:   rgba(185, 28, 28, .09);
  --info:          #1d4ed8;
  --info-soft:     rgba(29, 78, 216, .09);

  /* Voiles NOIRS et non blancs : sur fond clair, éclaircir ne creuse
     aucune profondeur, il faut assombrir. */
  --tint-05:       rgba(28, 18, 25, .015);
  --tint-1:        rgba(28, 18, 25, .03);
  --tint-2:        rgba(28, 18, 25, .045);
  --tint-3:        rgba(28, 18, 25, .07);
  --tint-4:        rgba(28, 18, 25, .11);

  --card-bg:        linear-gradient(160deg, #ffffff, #fdfbfa);
  --card-bg-strong: linear-gradient(170deg, #ffffff, #fbf5f2);

  --header-bg:       rgba(250, 247, 246, .82);
  --header-bg-solid: rgba(250, 247, 246, .96);
  --nav-mobile-bg:   rgba(255, 255, 255, .985);
  --footer-bg:       #f4edea;
  --quote-bg:        rgba(28, 18, 25, .04);
  --modal-backdrop:  rgba(40, 28, 36, .42);

  /* Halos beaucoup plus discrets : à pleine intensité sur du blanc,
     ils viraient au fluo. */
  --halo-1: rgba(249, 115, 22, .07);
  --halo-2: rgba(214, 51, 108, .06);
  --halo-3: rgba(139, 47, 158, .05);

  /* Ombres portées réelles, alors que le thème sombre s'appuie sur la lumière */
  --shadow-sm: 0 1px 3px rgba(40, 28, 36, .07);
  --shadow-md: 0 8px 24px rgba(40, 28, 36, .10);
  --shadow-lg: 0 20px 50px rgba(40, 28, 36, .14);
  --shadow-glow: 0 10px 30px rgba(194, 24, 91, .22);
}

/* --- Ajustements propres au thème clair -------------------------------- */

/* Bandeaux : texte foncé, bordure franche. Les teintes pâles du thème sombre
   tombaient à 1,15:1 sur fond clair, soit un texte pratiquement invisible. */
:root[data-theme="light"] {
  --ok-ink:     #14532d;
  --warn-ink:   #713f12;
  --danger-ink: #7f1d1d;
  --info-ink:   #1e3a8a;
}
:root[data-theme="light"] .alert--success { border-color: rgba(21, 128, 61, .30); }
:root[data-theme="light"] .alert--error   { border-color: rgba(185, 28, 28, .28); }
:root[data-theme="light"] .alert--info    { border-color: rgba(29, 78, 216, .26); }
:root[data-theme="light"] .alert--warn    { border-color: rgba(161, 98, 7, .30); }

/* Le hero s'éclaircit lui aussi : voile clair sur le média, texte foncé.
   Sans cela, la page entière était claire sauf un grand bloc sombre en tête. */
:root[data-theme="light"] .hero__scrim {
  background:
    linear-gradient(to right, rgba(250, 247, 246, .78) 0%, rgba(250, 247, 246, .58) 46%, rgba(250, 247, 246, .04) 100%),
    linear-gradient(to top,   rgba(250, 247, 246, .92) 2%, rgba(250, 247, 246, .04) 52%, rgba(250, 247, 246, .22) 100%);
}
@media (max-width: 767px) {
  :root[data-theme="light"] .hero__scrim {
    background: linear-gradient(to top, rgba(250, 247, 246, 1) 12%, rgba(250, 247, 246, .80) 60%, rgba(250, 247, 246, .90) 100%);
  }
}
:root[data-theme="light"] .hero__inner,
:root[data-theme="light"] .hero__title { color: var(--text); }
:root[data-theme="light"] .hero__text  { color: var(--text-muted); }
:root[data-theme="light"] .hero__proof { color: var(--text-muted); }
:root[data-theme="light"] .scroll-cue  { color: var(--text-dim); }

/* Le dégradé du titre part de l'ambre, trop pâle sur du blanc : on l'assombrit. */
:root[data-theme="light"] .hero__title .accent {
  background: linear-gradient(105deg, #d97706, #ea580c 55%, #be185d);
  -webkit-background-clip: text; background-clip: text;
}

/* Les puces du carousel, blanches, disparaîtraient sur le voile clair */
:root[data-theme="light"] .hero__dot::after { background: rgba(28, 18, 25, .22); }
:root[data-theme="light"] .hero__dot:hover::after { background: rgba(28, 18, 25, .45); }

/* Le badge de prix : l'ambre tombe à 1,4:1 sur le hero clair. On passe à
   l'orange encre, et on opacifie le fond pour qu'il tienne aussi quand la
   photo transparaît derrière. */
:root[data-theme="light"] .hero__price {
  background: rgba(255, 251, 247, .92);
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}
:root[data-theme="light"] .hero__price b { color: var(--gold-ink); }

/* Les cartes gagnent une bordure plus franche : sans profondeur lumineuse,
   c'est le trait qui les détache du fond. */
:root[data-theme="light"] .card { box-shadow: var(--shadow-sm); }

/* Le bandeau de réassurance et le pied de page se distinguent par un aplat */
:root[data-theme="light"] .marquee-band { background: #f6f0ed; }

/* Les champs de formulaire doivent rester blancs, pas grisés */
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .textarea { background: #ffffff; }
:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .select:focus,
:root[data-theme="light"] .textarea:focus { background: #ffffff; }

/* Le bouton « contour » : un fond blanc plutôt qu'un voile clair invisible */
:root[data-theme="light"] .btn--outline { background: #ffffff; }
:root[data-theme="light"] .btn--outline:hover { background: var(--surface-2); }

/* La modale est une surface pleine, pas un dégradé sombre */
:root[data-theme="light"] .modal { background: #ffffff; }

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit toujours l'emporter : sans cette règle, tout élément
   auquel on donne `display: flex` (alertes, messages d'erreur) resterait
   visible malgré `hidden`. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Halos d'ambiance en arrière-plan de page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%,   var(--halo-1), transparent 62%),
    radial-gradient(760px 460px at 92% 4%,    var(--halo-2), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, var(--halo-3), transparent 66%);
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: clamp(1.875rem, 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-lg); }

p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-300); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-ink); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li + li { margin-top: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--sp-6) 0; }

strong { color: var(--text); font-weight: 600; }
small  { font-size: var(--fs-xs); }

/* Icônes du sprite SVG */
svg[aria-hidden="true"] { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Accessibilité : focus toujours visible */
:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: var(--z-toast);
  background: var(--gold); color: var(--on-gold); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full); font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); color: var(--on-gold); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: 880px; }
.container--tight  { max-width: 560px; }

/* Marges laterales plus genereuses sur grands ecrans */
@media (min-width: 1024px) { .container { padding-inline: var(--sp-6); } }
@media (min-width: 1600px) { .container { padding-inline: var(--sp-8); } }

.section { padding-block: var(--sp-10); }
.section--tight { padding-block: var(--sp-8); }

@media (min-width: 768px) {
  .section { padding-block: var(--sp-11); }
}

.section-head { max-width: 760px; margin-bottom: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7;
}
.section-head--center .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7;
}

.lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 62ch; }
.section-head--center .lead { margin-inline: auto; }

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }

/* Carte générique */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: var(--sp-7); }
.card--flat { background: var(--bg-elevated); box-shadow: none; }

/* --------------------------------------------------------------------------
   4. HEADER / FOOTER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base);
}
.site-header.is-scrolled {
  background: var(--header-bg-solid);
  border-bottom-color: var(--border-soft);
}
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}

/* Logo. Le fichier est un PNG transparent au ratio ~2,13:1 ; on le pilote
   uniquement par sa hauteur pour qu'il reste net à toutes les tailles. */
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--text);
  flex: none;
}
.brand:hover { color: var(--text); }

.brand__logo {
  height: 70px; width: auto;
  transition: transform var(--t-fast);
}
.brand:hover .brand__logo { transform: scale(1.03); }

.brand--footer .brand__logo { height: 96px; }

@media (max-width: 900px) { .brand__logo { height: 52px; } }
@media (max-width: 380px) { .brand__logo { height: 44px; } }

/* Liens de compte de la navigation : ils font doublon avec le bouton de
   l'en-tete sur grand ecran, et ne servent que dans le menu mobile. */
@media (min-width: 901px) { .nav__account { display: none; } }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--text); background: var(--tint-3); }
.nav a[aria-current="page"] { color: var(--text); background: var(--primary-soft); }

/* Un bouton place dans la navigation garde SA couleur de texte : la regle
   « .nav a » ci-dessus est plus specifique que « .btn » et l'ecrasait, ce qui
   donnait un libelle sombre sur aplat colore en theme clair. */
.nav a.btn,
.nav a.btn:hover { color: var(--btn-fg); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Bouton de bascule clair / sombre.
   Les deux icônes sont superposées ; seule celle du thème à venir s'affiche,
   ce qui évite tout décalage de largeur au changement. */
.theme-toggle {
  position: relative;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  flex: none;
  background: var(--tint-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover { background: var(--tint-4); color: var(--gold-ink); border-color: var(--gold-ink); }

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 20px; height: 20px;
  transition: opacity var(--t-base), transform var(--t-base);
}
/* Thème sombre actif -> on propose le clair : soleil visible */
.theme-toggle svg:first-of-type  { opacity: 1; transform: none; }
.theme-toggle svg:last-of-type   { opacity: 0; transform: rotate(-90deg) scale(.6); }
/* Thème clair actif -> on propose le sombre : lune visible */
:root[data-theme="light"] .theme-toggle svg:first-of-type { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="light"] .theme-toggle svg:last-of-type  { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; transform: none !important; }
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--tint-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text); cursor: pointer;
  transition: background var(--t-fast);
}
.nav-toggle:hover { background: var(--tint-4); }

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    background: var(--nav-mobile-bg);
    -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: var(--sp-4); font-size: var(--fs-md); border-radius: var(--r-md); }
  .nav .btn { margin-top: var(--sp-3); justify-content: center; }
  .header-actions .btn--ghost { display: none; }
}

/* Pied de page */
.site-footer {
  margin-top: var(--sp-10);
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  background: var(--footer-bg);
}
.footer-grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}
.footer-col h4 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: var(--sp-3); }
.footer-col a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--gold-ink); }

.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  color: var(--text-dim); font-size: var(--fs-xs);
}

.social { display: flex; gap: var(--sp-3); }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-full);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.social a:hover { color: var(--gold-ink); border-color: var(--gold-ink); background: var(--gold-soft); }

/* --------------------------------------------------------------------------
   5. BOUTONS & FORMULAIRES
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.2; text-align: center; white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { box-shadow: 0 16px 44px rgba(214, 51, 108, .46); }

.btn--gold {
  --btn-fg: var(--on-gold);
  background: linear-gradient(135deg, var(--gold-300), var(--gold));
  box-shadow: 0 12px 36px rgba(249, 115, 22, .32);
}
.btn--gold:hover { box-shadow: 0 16px 44px rgba(249, 115, 22, .46); }

.btn--outline {
  --btn-fg: var(--text);
  background: var(--tint-2);
  border-color: var(--border);
}
.btn--outline:hover { background: var(--tint-4); border-color: var(--primary-300); }

.btn--ghost {
  --btn-fg: var(--text-muted);
  background: transparent; border-color: transparent; padding-inline: var(--sp-4);
}
.btn--ghost:hover { --btn-fg: var(--text); background: var(--tint-3); }

.btn--danger { background: var(--danger-soft); border-color: rgba(248,113,113,.4); --btn-fg: var(--danger); }
.btn--danger:hover { background: rgba(248, 113, 113, .2); }

.btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-base); }
.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn.is-loading::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Formulaires */
.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field > label, .field-label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.field .req { color: var(--gold-ink); margin-left: 2px; }
.field .hint { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--tint-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-base);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.input::placeholder, .textarea::placeholder { color: var(--text-dim); }

.input:hover, .select:hover, .textarea:hover { border-color: #3a3358; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--tint-3);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9a3c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}
.select option { background: var(--surface-2); color: var(--text); }

.input.has-error, .select.has-error, .textarea.has-error {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field-error {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--danger);
}
.field-error svg { width: 1em; height: 1em; }

/* Choix visuels (radio en cartes) */
.choices { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice { position: relative; }
.choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choice span {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--tint-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: all var(--t-fast);
}
.choice input:hover + span { border-color: #3a3358; color: var(--text); }
.choice input:focus-visible + span { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.choice input:checked + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--primary);
}
.choice input:checked + span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* Case à cocher */
.checkbox { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.checkbox input {
  width: 22px; height: 22px; margin: 2px 0 0; flex: none;
  accent-color: var(--primary); cursor: pointer;
}
.checkbox span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }

/* Messages (flash / alertes) */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.alert svg { width: 1.25em; height: 1.25em; margin-top: 2px; }
.alert--success { background: var(--ok-soft);     border-color: rgba(74,222,128,.36);  color: var(--ok-ink); }
.alert--error   { background: var(--danger-soft); border-color: rgba(248,113,113,.36); color: var(--danger-ink); }
.alert--info    { background: var(--info-soft);   border-color: rgba(96,165,250,.36);  color: var(--info-ink); }
.alert--warn    { background: var(--warn-soft);   border-color: rgba(251,191,36,.36);  color: var(--warn-ink); }

/* Étiquettes de statut */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--ok    { background: var(--ok-soft);     color: #6ee7a4; border-color: rgba(74,222,128,.3); }
.badge--info  { background: var(--info-soft);   color: #8ec0ff; border-color: rgba(96,165,250,.3); }
.badge--warn  { background: var(--warn-soft);   color: #fcd34d; border-color: rgba(251,191,36,.3); }
.badge--muted { background: rgba(255,255,255,.06); color: var(--text-dim); border-color: var(--border); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92dvh, 860px);
  display: flex; align-items: center;
  padding-block: var(--sp-10) var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--bg); }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 8s linear;
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide img, .hero__slide video {
  width: 100%; height: 100%; object-fit: cover;
}

.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Diapositive vidéo : fondu simple, sans le lent zoom appliqué aux photos —
   une vidéo bouge déjà, un zoom par-dessus donnerait le tournis.
   La durée doit rester alignée sur la constante FADE de assets/js/app.js. */
.hero__slide--video,
.hero__slide--video.is-active {
  transform: none;
  transition: opacity 1s ease;
}

/* Voile de lisibilité — indispensable au contraste du texte */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(11,10,18,.94) 0%, rgba(11,10,18,.78) 46%, rgba(11,10,18,.42) 100%),
    linear-gradient(to top,   rgba(11,10,18,1) 2%, rgba(11,10,18,.15) 55%, rgba(11,10,18,.66) 100%);
}
@media (max-width: 767px) {
  .hero__scrim { background: linear-gradient(to top, rgba(11,10,18,.99) 12%, rgba(11,10,18,.72) 60%, rgba(11,10,18,.86) 100%); }
}

.hero__inner { position: relative; max-width: 720px; }

/* Le contenu du hero se superpose a des photos et des videos sombres : son
   texte reste clair dans les DEUX themes. Sans cette regle, le titre passerait
   en sombre sur fond sombre des qu'on active le theme clair. */
.hero__inner,
.hero__title,
.hero__proof,
.scroll-cue { color: #f8f4f2; }

.hero__proof { color: #d5ccd3; }
.scroll-cue  { color: #b6abb4; }

.hero__title { margin-bottom: var(--sp-5); }
.hero__title .accent {
  font-style: italic;
  background: linear-gradient(105deg, var(--gold-300), var(--gold) 55%, var(--primary-300));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__text {
  font-size: var(--fs-md); color: #d7d2ea;
  max-width: 54ch; margin-bottom: var(--sp-6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-7); }

.hero__price {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--gold); border-radius: var(--r-full);
  background: var(--gold-soft);
  color: var(--gold-300); font-weight: 600; font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.hero__price b { font-size: var(--fs-lg); font-family: var(--font-display); color: var(--gold-300); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
}
.hero__proof span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__proof svg { color: var(--ok); width: 1.1em; height: 1.1em; }

/* Puces du carousel */
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: var(--sp-6);
  display: flex; justify-content: center; gap: var(--sp-3);
  z-index: 2;
}
.hero__dot {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.hero__dot::after {
  content: ""; display: block;
  width: 30px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  transition: background var(--t-base), width var(--t-base);
}
.hero__dot:hover::after { background: rgba(255, 255, 255, .55); }
.hero__dot[aria-current="true"]::after { background: var(--gold); width: 46px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-4);
  transform: translateX(-50%);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (max-width: 767px) {
  .hero { min-height: 88dvh; align-items: flex-end; padding-bottom: var(--sp-10); }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__dots { bottom: var(--sp-3); }
  .scroll-cue { display: none; }
}

/* --------------------------------------------------------------------------
   7. SECTIONS DE LA PAGE D'ACCUEIL
   -------------------------------------------------------------------------- */

/* Bandeau de réassurance */
.marquee-band {
  border-block: 1px solid var(--border-soft);
  background: var(--tint-1);
  padding-block: var(--sp-5);
}
.trust-row {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.trust-item svg { width: 26px; height: 26px; color: var(--gold-ink); margin-bottom: var(--sp-1); }
.trust-item b { font-size: var(--fs-sm); color: var(--text); }
.trust-item span { font-size: var(--fs-xs); color: var(--text-dim); }

/* Étapes du processus */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: var(--sp-6);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.step:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.step__num {
  counter-increment: step;
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: var(--sp-4);
  border-radius: 14px;
  background: var(--primary-soft);
  border: 1px solid rgba(214, 51, 108, .4);
  color: var(--gold-ink);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
}
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p  { font-size: var(--fs-sm); color: var(--text-muted); }

/* Occasions */
.occasions { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Sur grand ecran, on plafonne a 4 colonnes : au-dela, les cartes s'etirent
   et la grille de 8 occasions perd son equilibre (5 + 3). */
@media (min-width: 1000px) { .occasions { grid-template-columns: repeat(4, 1fr); } }
.occasion {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--tint-1);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.occasion:hover { transform: translateY(-3px); border-color: var(--gold-ink); background: var(--gold-soft); }
.occasion svg { width: 28px; height: 28px; color: var(--gold-ink); }
.occasion b { display: block; font-size: var(--fs-base); color: var(--text); }
.occasion small { color: var(--text-dim); }

/* Extraits audio */
.samples { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sample {
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card-bg);
}
.sample__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sample__icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--primary-soft); color: var(--gold-ink);
}
.sample__head b { display: block; font-size: var(--fs-sm); }
.sample__head small { color: var(--text-dim); }
.sample audio { width: 100%; height: 42px; }
.sample__empty {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  color: var(--text-dim); font-size: var(--fs-sm);
}

/* Tarif */
.pricing {
  position: relative;
  max-width: 560px; margin-inline: auto;
  padding: var(--sp-8) var(--sp-7);
  border: 1px solid rgba(249, 115, 22, .34);
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px 300px at 50% -10%, rgba(249, 115, 22, .16), transparent 65%),
    var(--card-bg-strong);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.pricing__tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-4);
  background: linear-gradient(135deg, var(--gold-300), var(--gold));
  color: var(--on-gold); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.pricing__amount {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 5rem); font-weight: 600; line-height: 1;
  background: linear-gradient(140deg, var(--gold-300), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-block: var(--sp-3) var(--sp-2);
}
.pricing__note { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.pricing__list { list-style: none; padding: 0; margin: 0 0 var(--sp-7); text-align: left; }
.pricing__list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.pricing__list li:last-child { border-bottom: 0; }
.pricing__list svg { color: var(--ok); margin-top: 3px; }

/* Témoignages */
.quotes { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.quote {
  padding: var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--tint-1);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.quote__stars { display: flex; gap: 3px; color: var(--gold-ink); }
.quote__stars svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.quote p { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; line-height: 1.7; }
.quote footer { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.quote__avatar {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary), var(--primary-600));
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.quote__avatar + div b { display: block; font-size: var(--fs-sm); }
.quote__avatar + div small { color: var(--text-dim); }

/* FAQ */
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: none; border: 0;
  color: var(--text); font-family: var(--font-body);
  font-size: var(--fs-md); font-weight: 600; text-align: left;
  cursor: pointer;
  transition: color var(--t-fast);
}
.faq-item__q:hover { color: var(--gold-ink); }
.faq-item__q svg { flex: none; color: var(--gold-ink); transition: transform var(--t-base); }
.faq-item__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-item__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow);
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a.is-open { grid-template-rows: 1fr; }
.faq-item__a p {
  padding-bottom: var(--sp-5);
  color: var(--text-muted); font-size: var(--fs-sm);
}

/* Appel à l'action final */
.cta-band {
  position: relative;
  padding: var(--sp-9) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(214, 51, 108, .3), transparent 68%),
    var(--card-bg-strong);
  text-align: center;
  overflow: hidden;
}
.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band .lead { margin-inline: auto; margin-bottom: var(--sp-6); }

/* Animation d'apparition au défilement */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   8. ESPACE CLIENT & ADMIN
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--sp-7);
}
.page-head h1 { font-size: clamp(2rem, 5vw, var(--fs-2xl)); margin-bottom: var(--sp-2); }
.page-head p { color: var(--text-muted); margin: 0; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--gold-ink); }
.breadcrumb svg { width: 14px; height: 14px; }

/* Liste de commandes */
.order-list { display: grid; gap: var(--sp-4); }

.order-card {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--tint-1);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.order-card:hover { border-color: var(--primary); background: rgba(214, 51, 108, .08); transform: translateY(-2px); }
.order-card__ref {
  font-family: var(--font-display); font-size: var(--fs-lg);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.order-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.order-card__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.order-card__meta svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .order-card { grid-template-columns: 1fr; }
  .order-card .btn { width: 100%; }
}

/* Détail de commande */
.detail-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 940px) {
  /* La colonne laterale est bornee : sans plafond, elle s'etire inutilement
     sur les grands ecrans au detriment du contenu principal. */
  .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
}

.brief-list { display: grid; gap: 0; }
.brief-row {
  display: grid; gap: var(--sp-2);
  grid-template-columns: 190px 1fr;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.brief-row:last-child { border-bottom: 0; }
.brief-row dt { color: var(--text-dim); }
.brief-row dd { margin: 0; color: var(--text); white-space: pre-line; }
@media (max-width: 620px) { .brief-row { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* Suivi de commande */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-7);
  margin: 0;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
}
.timeline li::after {
  content: ""; position: absolute; left: 7px; top: 22px; bottom: 2px;
  width: 2px; background: var(--border-soft);
}
.timeline li:last-child::after { display: none; }
.timeline li.is-done { color: var(--text); }
.timeline li.is-done::before { border-color: var(--ok); background: var(--ok); }
.timeline li.is-current::before {
  border-color: var(--gold-ink); background: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-soft);
}
.timeline b { display: block; font-size: var(--fs-sm); }
.timeline small { color: var(--text-dim); }

/* Fichiers livrés */
.file-item {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--tint-1);
}
.file-item__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--primary-soft); color: var(--gold-ink);
}
.file-item__info { flex: 1 1 180px; min-width: 0; }
.file-item__info b { display: block; font-size: var(--fs-sm); word-break: break-word; }
.file-item__info small { color: var(--text-dim); }
.file-item audio { width: 100%; margin-top: var(--sp-3); height: 40px; }

/* État vide */
.empty-state {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: var(--tint-05);
}
.empty-state svg { width: 46px; height: 46px; color: var(--text-dim); margin: 0 auto var(--sp-4); }
.empty-state h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.empty-state p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 42ch; margin: 0 auto var(--sp-5); }

/* Étapes du formulaire de commande */
.steps-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.steps-bar__item {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap;
}
.steps-bar__item b {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-dim);
  transition: all var(--t-base);
}
.steps-bar__item.is-active { color: var(--text); }
.steps-bar__item.is-active b { border-color: var(--gold-ink); background: var(--gold); color: var(--on-gold); }
.steps-bar__item.is-done b { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.steps-bar__sep { flex: 1 1 20px; min-width: 16px; height: 1px; background: var(--border); }

.fieldset {
  border: 0; padding: 0; margin: 0 0 var(--sp-7);
}
.fieldset > legend {
  font-family: var(--font-display); font-size: var(--fs-lg);
  padding: 0; margin-bottom: var(--sp-2);
}
.fieldset__hint { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

/* Récapitulatif collant */
.summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.summary__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.summary__row:last-of-type { border-bottom: 0; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-base); color: var(--text); font-weight: 600;
}
.summary__total b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--gold-ink); }

/* Tableau (admin) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 720px; }
.table th, .table td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-soft); }
.table th {
  background: var(--tint-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap;
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: rgba(214, 51, 108, .08); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td b { font-family: var(--font-display); font-size: var(--fs-base); }

/* Statistiques admin */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--sp-7); }
.stat {
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--tint-1);
}
.stat b {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-2xl); line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }

/* Zone de dépôt de fichier */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  border: 2px dashed var(--border); border-radius: var(--r-lg);
  background: var(--tint-1);
  text-align: center; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone svg { width: 34px; height: 34px; color: var(--gold-ink); }
.dropzone b { font-size: var(--fs-sm); }
.dropzone small { color: var(--text-dim); }
.dropzone input[type="file"] { display: none; }

/* Barre d'onglets / filtres */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.tabs a {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  transition: all var(--t-fast);
}
.tabs a:hover { border-color: var(--primary-300); color: var(--text); }
.tabs a[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); color: var(--text); }

/* Demandes de contact (back-office) */
.message-card {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--tint-1);
  transition: border-color var(--t-fast);
}
.message-card:hover { border-color: #423151; }
.message-card:target { border-color: var(--gold-ink); box-shadow: 0 0 0 3px var(--gold-soft); }

.message-body {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--quote-bg);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.message-more { margin-top: var(--sp-4); }
.message-more > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  cursor: pointer; list-style: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.message-more > summary::-webkit-details-marker { display: none; }
.message-more > summary::before { content: "▸"; transition: transform var(--t-fast); }
.message-more[open] > summary::before { transform: rotate(90deg); }
.message-more > summary:hover { color: var(--text); border-color: var(--primary-300); }
.message-more[open] > summary { margin-bottom: var(--sp-5); }

/* Galerie des médias du hero (back-office) */
.media-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.media-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--tint-1);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.media-card:hover { border-color: var(--primary-300); }

.media-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0b0a12;
}

.media-card__rank {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--gold); color: var(--on-gold);
  font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.media-card figcaption { padding: var(--sp-3) var(--sp-4) 0; }
.media-card figcaption b {
  display: block; font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-card figcaption small { color: var(--text-dim); }

.media-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.media-card__actions .btn { min-height: 36px; padding-inline: var(--sp-3); }

/* Choix de l'image d'affiche */
.poster-choices { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.poster-choice {
  position: relative;
  width: 128px; padding: 0;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: none; cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.poster-choice:hover { border-color: var(--primary-300); transform: translateY(-2px); }
.poster-choice.is-current { border-color: var(--gold-ink); }
.poster-choice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.poster-choice__flag {
  position: absolute; inset-inline-end: 6px; inset-block-start: 6px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
}
.poster-choice__flag svg { width: 14px; height: 14px; stroke-width: 3; }

/* Pastille de comptage dans les onglets du back-office */
.tab-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: var(--sp-1);
  border-radius: var(--r-full);
  background: var(--gold); color: var(--on-gold);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tabs a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tabs a svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   9. MODALE (élément <dialog> natif)
   Le navigateur gère nativement le piège de focus, la touche Échap et
   l'inertie de l'arrière-plan : rien de tout cela n'est réimplémenté en JS.
   -------------------------------------------------------------------------- */
.modal {
  width: min(660px, calc(100vw - 2 * var(--sp-4)));
  max-height: calc(100dvh - 2 * var(--sp-5));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--card-bg-strong);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}

.modal::backdrop {
  background: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Animation d'ouverture : depuis le bas sur mobile, en fondu-échelle ailleurs */
.modal[open] { animation: modal-in 260ms cubic-bezier(.22, .61, .36, 1); }
.modal[open]::backdrop { animation: fade-in 260ms ease; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  position: relative;
  padding: var(--sp-7);
  max-height: calc(100dvh - 2 * var(--sp-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: inherit;
}

.modal__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--tint-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal__close:hover {
  background: var(--tint-4);
  color: var(--text);
  border-color: var(--primary-300);
}

.modal h2 { padding-right: var(--sp-8); }

@media (max-width: 600px) {
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto auto 0;            /* collée en bas, façon feuille mobile */
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
  }
  .modal__panel { padding: var(--sp-6) var(--sp-5) var(--sp-8); max-height: 92dvh; }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }
}

/* Pot de miel anti-robots : invisible, mais pas via display:none, que
   certains robots détectent et contournent. Retiré du flux et de la
   navigation clavier, et ignoré des lecteurs d'écran (aria-hidden). */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Lien de pied de page rendu par un <button> (ouvre la modale) */
.footer-link {
  padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-sm);
  color: var(--text-muted); text-align: left; cursor: pointer;
  transition: color var(--t-fast);
}
.footer-link:hover { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   PRÉFÉRENCE : MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__slide { transform: none; }
  .hero__slide.is-active { transform: none; }
}

/* --------------------------------------------------------------------------
   IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  body::before, .site-header, .site-footer, .hero__media, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}