/* ==========================================================================
   IN THE NAME OF LOVE PRODUCTION — Studio de publicité par iA
   Charte : identité reprise du site personnel de David Kadoche O'Sullivan
   ========================================================================== */

/* Police manuscrite « Adelia Alternate » (fichier commercial fourni par David) */
@font-face {
  font-family: "Adelia Alternate";
  src: url("fonts/adelia-alternate.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0c0c0c;
  --gold: #ecbe5b;
  --gold-soft: #f5dfa6;
  --gold-deep: #96700a;
  --gold-deep-lg: #bd7d0a; /* gold plus marqué/saturé, réservé aux gros textes/icônes (seuil de contraste 3:1) */
  --paper: #ffffff;
  --paper-soft: #faf7f0;
  --rose-vif: #d6336c;
  --red: #cf2e2e;
  --mauve: #8b6bb1;
  --text: #222222;
  --text-light: #f4f0e6;

  --accent-ia: #2563eb;    /* bleu — code couleur du Pack Présence */
  --accent-reel: #d9a441;  /* ambre profond — plateau / lumière / chaud */

  --font-script: "Alex Brush", cursive;
  --font-display: "Jost", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;

  --maxw: 1080px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.center { text-align: center; }

/* ---------- En-tête ---------- */

.site-header { position: relative; background: var(--ink); color: var(--text-light); text-align: center; padding-top: 1.6rem; }
.site-nav a.lang-switch { margin-left: .5rem; padding-left: 1.3rem; border-left: 1px solid rgba(12, 12, 12, .15); }
.brand-line {
  font-family: var(--font-script);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.brand-tagline { display: block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.brand-mark { width: 64px; height: auto; margin: .9rem auto 0; border-radius: 4px; }

/* Coeur du logo : copie animée du coeur du pied de page, calée exactement
   sur le coeur dessiné dans le logo (mêmes proportions que l'artwork). */
.brand-mark-wrap { position: relative; display: inline-block; }
.brand-mark-heart {
  position: absolute; left: calc(27.3% - 2px); top: calc(42.7% - 2px); width: 24.6%; margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 40, 40, .75)) drop-shadow(0 0 10px rgba(255, 20, 20, .45));
  transform-origin: center; animation: footer-heartbeat 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark-heart { animation: none; }
}

/* En-tête blanc — page d'accueil uniquement */
.page-home .site-header { background: var(--paper); color: var(--text); padding-top: 1.1rem; padding-bottom: 0; }
.page-home .brand-mark { width: 154px; margin: 0 auto .6rem; }
.page-home .brand-tagline {
  display: block;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  padding: .7rem 1rem;
  border-radius: 0;
  margin: 0;
  border-bottom: 1px solid rgba(12, 12, 12, .12);
}
.page-home .tagline-lead { color: var(--ink); }
/* Petits écrans : les textes en capitales très espacées (bandeau, accroches
   promo) sont les plus sensibles à l'étroitesse — on resserre légèrement,
   sans toucher aux règles desktop ci-dessus. */
@media (max-width: 420px) {
  .page-home .brand-tagline { font-size: .92rem; letter-spacing: .12em; }
  .studio-promo-eyebrow { letter-spacing: .14em; }
}

/* Bandeau vidéo — page d'accueil */
.section.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  min-height: clamp(260px, 34vh, 360px);
  display: grid;
  place-items: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* crop par le bas */
  pointer-events: none;
}
.hero:not(.hero--reel) .hero-video { object-position: center 35%; }
.hero--reel { border-top: 1px solid var(--ink); }
.hero--reel .hero-video { object-position: center 30%; }
/* Page Réalisations : bande vidéo d'ouverture — la iA se lance seule à l'arrivée,
   puis la « tournage réel » prend le relais, puis on reboucle indéfiniment. */
.hero--rea { min-height: clamp(240px, 46vw, 520px); }
.hero--rea .hero-veil {
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  isolation: isolate; transform: translateZ(0);
}
.rea-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.rea-hero-video.is-active { opacity: 1; }
.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.4rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-veil {
  width: 100%;
  padding: 1.5rem clamp(1rem, 6vw, 3rem);
  background: rgba(12, 12, 12, .5);
}
.hero-veil h1,
.hero-veil h2 { color: #fff; margin: 0 0 .5rem; }
.hero-veil .lede { color: rgba(255, 255, 255, .92); margin: 0; max-width: none; }
.hand-script { font-family: "Adelia Alternate", var(--font-script); font-size: 1.5em; line-height: 1; letter-spacing: .01em; margin: 0 .15em; }
.lede-plain-em { font-size: 1.15em; }
.lede-emph { font-size: 1.4em; font-weight: 700; letter-spacing: .01em; }
.hero-veil .reel-text { color: var(--gold); }
.hero-cta { margin: 1.7rem 0 2.4rem; }
.hero-cta .btn { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.page-home .site-nav { position: relative; background: #fff; border-bottom: 3px solid var(--ink); margin-top: 0; isolation: isolate; }
/* Faisceau LED rouge qui balaie la barre noire sous le menu (va-et-vient) */
.page-home .site-nav::after {
  content: "";
  position: absolute;
  z-index: 4;
  bottom: -3px;
  left: 0;
  width: 88px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0) 0%, #ff2a2a 36%, #ffdede 50%, #ff2a2a 64%, rgba(255, 0, 0, 0) 100%);
  box-shadow: 0 0 6px 1px rgba(255, 45, 45, .5);
  pointer-events: none;
  animation: led-sweep 4.4s ease-in-out infinite alternate;
  animation-delay: var(--led-delay, 0s);
  will-change: left; transform: translateZ(0);
}
@keyframes led-sweep {
  from { left: 0; }
  to   { left: calc(100% - 88px); }
}
/* Survol d'une rubrique : le faisceau se cale dessous et s'y fige */
.page-home .site-nav.led-parked::after {
  animation: none;
  left: var(--led-x, 50%);
  transform: translateX(-50%);
  transition: left .3s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .page-home .site-nav::after { animation: none; opacity: 0; } }
.page-home .site-nav a { position: relative; color: var(--ink); padding: .6rem .7rem; border-bottom-color: transparent; transform-origin: center bottom; transition: transform .16s ease, color .16s ease; }
.page-home .site-nav a:hover { color: var(--ink); transform: scale(1.12); }
.page-home .site-nav a:hover .nav-icon { color: #fff; background-color: #ff0000; }
.page-home .site-nav a[aria-current="page"] { color: var(--ink); transform: scale(1.12); border-bottom-color: transparent; }
.page-home .site-nav a[aria-current="page"] .nav-icon { color: #fff; background-color: #ff0000; }
.page-home .nav-toggle { background: #fff; color: var(--gold-deep); }

.site-nav { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 6px solid var(--gold); margin-top: 1.4rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.6rem; }
.site-nav a {
  display: inline-flex; flex-direction: column; align-items: center; gap: .34rem;
  padding: .7rem .55rem;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-light); text-decoration: none; border-bottom: 3px solid transparent;
}
.nav-icon { width: 21px; height: 21px; flex: 0 0 auto; box-sizing: content-box; padding: 6px; border-radius: 50%; background: transparent; transition: color .16s ease, background-color .16s ease; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav-toggle { display: none; }
@media (max-width: 640px) {
  .nav-toggle {
    display: block; width: 100%; background: var(--ink); color: var(--gold); border: 0;
    font-family: var(--font-display); letter-spacing: .25em; text-transform: uppercase; font-size: .85rem;
    padding: .9rem; cursor: pointer;
  }
  .site-nav ul { display: none; padding-bottom: .6rem; }
  .site-nav.open ul { display: flex; flex-direction: column; align-items: center; }
}

/* ---------- Sections ---------- */

main { padding-bottom: 3rem; }
.section { padding: 3.2rem 0 2.4rem; }
.section--soft { background: var(--paper-soft); }
.section--contact-form { background: #cf2e2e; }
.section--contact-form label { color: #fff; }
.label-hint { font-weight: 400; opacity: .8; font-size: .9em; }
.section--contact-form .btn { background: var(--ink); color: #fff; }
.section--contact-form .btn:hover { background: var(--gold); color: var(--ink); }
/* Page Contact : la photo court derrière le titre ET le formulaire ;
   le formulaire est encadré dans une carte — gold ou beige selon l'onglet actif. */
.image-band--contact .contact-form-wrap {
  position: relative; z-index: 1;
  line-height: 1.5;
  padding: clamp(2.4rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 5.5rem);
}

/* Onglets « Contactez-moi » / « Demande de devis » — vrais onglets de page :
   accolés à la carte du formulaire, l'onglet actif se fond dans sa couleur
   (comme un onglet de navigateur au-dessus de sa page). */
.contact-tabs { display: flex; gap: 0; max-width: 560px; margin: 0 auto; position: relative; z-index: 2; }
.contact-tab {
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .8rem 1.6rem; margin-bottom: -1px;
  border: 1px solid var(--ink); border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  background: #d9cdb0; color: var(--ink); opacity: .68;
  cursor: pointer; position: relative; top: 3px;
  transition: opacity .2s ease, top .2s ease, background .2s ease, border-color .2s ease;
}
.contact-tab + .contact-tab { margin-left: -1px; }
.contact-tab:hover { opacity: .9; }
.contact-tab.is-active { opacity: 1; top: 0; z-index: 3; }
.contact-tab[data-contact-tab="contact"].is-active { background: var(--gold); border-bottom-color: var(--gold); }
.contact-tab[data-contact-tab="devis"].is-active { background: #ece1cd; border-bottom-color: #ece1cd; }
.contact-tab[data-contact-tab="coordonnees"].is-active {
  background: color-mix(in srgb, var(--gold) 45%, white);
  border-bottom-color: color-mix(in srgb, var(--gold) 45%, white);
}

.contact-card {
  position: relative; z-index: 1; max-width: 560px; margin: 0 auto;
  background: var(--gold); border: 1px solid var(--ink); border-radius: 0 8px 8px 8px;
  padding: clamp(1.6rem, 4.5vw, 2.8rem);
  transition: background .2s ease;
}
.contact-card[data-active-tab="devis"] { background: #ece1cd; }
.contact-card[data-active-tab="coordonnees"] { background: color-mix(in srgb, var(--gold) 45%, white); }
.contact-panel-hint { margin: 0 0 1.2rem; text-align: center; color: rgba(12, 12, 12, .75); font-size: .92rem; }
/* Onglet « Coordonnées » : liste simple, pas de formulaire */
.coords-list { display: flex; flex-direction: column; gap: 1.5rem; }
.coords-item { text-align: center; }
.coords-label {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .35rem;
}
.coords-value { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); text-decoration: none; line-height: 1.5; }
a.coords-value:hover { text-decoration: underline; }
.image-band--contact label { color: var(--ink); }
.image-band--contact .label-hint { color: #3d3220; opacity: 1; }
.image-band--contact .req { color: #cf2e2e; }
.image-band--contact input,
.image-band--contact select,
.image-band--contact textarea { background: #fff; border-color: #cdbfa0; }
.image-band--contact .btn { background: var(--ink); color: #fff; }
.image-band--contact .btn:hover { background: #25d366; color: var(--ink); }

/* Encart de présentation du studio */
.section--studio { background: var(--gold); padding-top: 2.4rem; }
.section--studio-title { background: var(--paper); padding: 2.8rem 0 2rem; }

/* Bandeau image pleine largeur */
.image-band { position: relative; padding: 0; line-height: 0; overflow: hidden; background: var(--ink); height: clamp(220px, 42vh, 480px); }
.image-band > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.image-band-slides { position: absolute; inset: 0; }
.image-band-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0; transition: opacity 1.2s ease;
}
/* reel6 : visages en haut de l'image, on garde le cadrage haut */
.image-band-slide[src*="illustration_tournage_reel6"] { object-position: center top; }
/* Bandeau titre Contact : la photo remplit toute la section (titre + formulaire) */
.image-band--contact { height: auto; min-height: 0; display: block; }
#main-contact { padding-bottom: 0; }
#main-contact + footer { margin-top: 0; }
.image-band--contact > img { position: absolute; inset: 0; height: 100%; object-position: center top; }
.image-band--contact .image-band-veil { padding: 2.2rem 0 2.6rem; }
/* Page « Message envoyé » : même photo que Contact, message dans la carte gold */
.merci-card { text-align: center; border-radius: 8px; }
.merci-texte { margin: 0; font-size: 1.1rem; color: var(--ink); }
.merci-copie { margin: 1rem 0 0; font-size: .92rem; color: rgba(12, 12, 12, .75); }
.merci-actions { margin: 1.8rem 0 0; }
/* Variante « Commande confirmée » : carte plus large, encadré des éléments à préparer */
.merci-card--large { max-width: 680px; }
.merci-alerte { color: #ff2a2a; }
.merci-card--blanc { background: var(--paper); }
.merci-box {
  text-align: left; margin: 1.8rem 0 0; padding: 1.3rem 1.4rem;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(12, 12, 12, .15); border-radius: 6px;
}
.merci-box-title { margin: 0 0 .6rem; font-weight: 600; color: var(--ink); }
.merci-box ul { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.merci-box-note { margin: .8rem 0 0; font-size: .9rem; color: rgba(12, 12, 12, .75); }
.merci-note { margin: 1.4rem 0 0; font-size: .85rem; color: rgba(12, 12, 12, .75); }
.merci-card a:not(.btn) { color: var(--ink); }
/* Page tarifs : storyboard croppé en haut, bandeau à la hauteur du voile d'opacité */
.image-band--tarifs { height: auto; min-height: 0; display: block; }
.image-band--tarifs > img { position: absolute; inset: 0; object-position: center bottom; }
.image-band--tarifs .image-band-veil { padding: 2rem 0 2.3rem; }
/* Bandeau photo + voile en tête de page Tarifs (titre + sous-titre), sur le
   modèle des bandeaux d'accueil. Le bandeau est plus haut que le voile : la
   photo garde ses vraies couleurs en haut et en bas, le voile ne fait
   qu'entourer le texte, centré verticalement. */
.image-band--tarifs-photo {
  height: clamp(260px, 34vh, 360px); min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--ink);
}
.image-band--tarifs-photo > img { position: absolute; inset: 0; height: 100%; object-position: center 70%; }
.image-band--tarifs-photo .image-band-veil {
  position: relative; z-index: 1; padding: 1.1rem 0 1.3rem;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  isolation: isolate; transform: translateZ(0);
}
.image-band--tarifs-photo .image-band-veil .reel-text { color: var(--gold); }
.image-band--tarifs-photo .image-band-veil h2 {
  color: #fff; margin: 0 0 .5rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.image-band--tarifs-photo .image-band-veil .lede { color: rgba(255, 255, 255, .92); margin: 0 auto; max-width: none; }
.image-band-veil .tarifs-note { color: rgba(255, 255, 255, .78); margin: .7rem auto 0; }
.image-band-veil { position: relative; z-index: 1; width: 100%; background: rgba(12, 12, 12, .5); padding: 1.7rem 0 2.1rem; line-height: 1.45; }
.image-band-veil .wrap { text-align: center; }
.image-band-veil h1 {
  color: #fff; margin: 0 0 .55rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.image-band-veil .lede { color: rgba(255, 255, 255, .92); margin: 0 auto; max-width: none; }
.image-band-veil .lede-a { display: inline-block; white-space: nowrap; font-size: clamp(.86rem, 2.3vw, 1.15rem); }
.image-band-veil .lede-sign { display: block; margin-top: 1.1rem; }
.image-band-veil .lede .hand-script { display: inline-block; font-size: .95em; white-space: nowrap; color: #fff; }
@media (max-width: 460px) { .image-band-veil .lede-a { white-space: normal; } }
.image-band-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .image-band-slide { transition: none; } }
.image-band-title {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .5);
}

/* Page réalisations : titres hors bandeau, carrousels dans un bandeau coloré
   (rose pour l'iA, gold pour le réel) */
.rea-band { padding: clamp(2rem, 5vw, 3rem) 0 2.8rem; background: var(--ink); }
.rea-band--ia {
  border-top: 6px solid var(--rose-vif);
  border-bottom: 6px solid var(--rose-vif);
}
.rea-band--reel {
  border-top: 6px solid var(--gold);
  border-bottom: 6px solid var(--gold);
}
/* Titre du carrousel, intégré dans le bandeau noir */
.rea-band-title { color: #fff; text-align: center; margin: 0; }
.rea-band-title .reel-text { color: var(--gold); }
.rea-band .showcase { margin-top: 1.4rem; }
.rea-band .showcase-item .portfolio-caption strong { color: #fff; }
/* Boutons de commande intégrés dans le bandeau noir, sous chaque carrousel */
.rea-band-order { text-align: center; margin: clamp(1.8rem, 4vw, 2.6rem) 0 .2rem; }
.rea-band-order .btn { margin-top: 0; }
/* Filet gris de séparation entre le premier bloc de références et le carrousel suivant */
.references-band--sep { border-bottom: 1px solid #c4c4c4; }
.studio-section-title { margin: 0; color: var(--ink); }
.studio-title-signature { display: block; width: clamp(250px, 60vw, 480px); height: auto; margin: 1.1rem auto 0; }
.studio-card {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  column-gap: clamp(1.4rem, 4vw, 2.6rem);
  row-gap: 1.3rem;
  align-items: start;
  max-width: 900px;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid rgba(12, 12, 12, .09);
  border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: 0 24px 60px -34px rgba(12, 12, 12, .45);
}
.studio-logo { grid-column: 1; width: clamp(84px, 20vw, 116px); height: auto; margin-top: -.35rem; }
.studio-lede { grid-column: 2; margin: 0; }
.studio-portrait { grid-column: 1; margin: 0; }
.studio-awards { grid-column: 2; }
.studio-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 10px;
}
.brand-signature {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  font-size: .9em;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.studio-awards-title {
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 .8rem;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.studio-awards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.studio-awards li {
  font-size: .95rem;
  line-height: 1.4;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.studio-awards-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -.05rem;
  color: var(--gold-deep);
}
.studio-awards-note { color: var(--text); opacity: .55; }
.studio-awards-title--sub { margin-top: 1.5rem; }

.studio-prod { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--text); }
@media (max-width: 720px) {
  .studio-card { grid-template-columns: 1fr; row-gap: 1.3rem; text-align: center; justify-items: center; }
  .studio-logo { grid-column: 1; order: 1; margin-top: 0; }
  .studio-portrait { grid-column: 1; order: 2; max-width: 230px; margin-inline: auto; }
  .studio-lede { grid-column: 1; order: 3; }
  .studio-awards { grid-column: 1; order: 4; display: inline-block; text-align: left; }
}
.section--avantages { color: #fff; padding-top: 1.4rem; }
.section--avantages .card { color: var(--text); }
/* Code couleur « iA » : rose (aligné sur le Pack iA). Le bleu reste réservé au Pack Présence. */
.section--ia { background: var(--rose-vif); }
.section--reel { background: var(--accent-reel); }
.section--ia .card { border-top-color: var(--rose-vif); }
.section--reel .card { border-top-color: var(--accent-reel); }
.section--ink { background: var(--ink); color: var(--text-light); }
.section--ink a { color: var(--gold); }

.pill { display: inline-block; padding: .35rem 1.1rem; border-radius: 999px; font-family: var(--font-display); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--gold { background: var(--gold); color: var(--ink); }

/* « Pourquoi l'iA ? », au-dessus du bandeau rose, et les titres de cartes : même police/taille que « Un projet de publicité pour votre marque ? » */
.soft-divider-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .8rem; }
.soft-divider-title--sm,
.studio-promo h2.soft-divider-title--sm { font-size: clamp(1.25rem, 3vw, 1.7rem); }

/* Bandeau « tous les écrans » : maquettes téléphone + tablette */
.section--devices { background: var(--paper); }
.devices-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0 0 .6rem; }
.devices-stage {
  --dev-h: clamp(100px, 15vw, 165px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 2.4rem;
}
.device-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.devices-hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1.8rem 0 0;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text);
  opacity: .5;
  transition: opacity .5s ease;
}
.devices-hint svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.section--devices.is-unlocked .devices-hint { opacity: 0; }
.device-caption {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: .8rem;
  line-height: 1.35;
  letter-spacing: .03em;
  color: var(--text);
  opacity: .65;
}
.device {
  position: relative;
  background: #0c0c0c;
  box-shadow: 0 18px 40px -18px rgba(12, 12, 12, .5), inset 0 0 0 1.5px #262626;
  flex: 0 0 auto;
}
.device video { display: block; height: 100%; width: auto; object-fit: cover; background: #000; }
.device-tablet {
  height: var(--dev-h);
  border-radius: 10px;
  padding: 6px 13px;
}
.device-tablet video { aspect-ratio: 16 / 9; border-radius: 3px; }
.device-tablet::before {
  content: "";
  position: absolute;
  top: 50%; right: 6px; transform: translateY(-50%);
  width: 4px; height: 4px;
  background: #333;
  border-radius: 50%;
}
.device-phone {
  height: calc(var(--dev-h) * 1.34);
  border-radius: 16px;
  padding: 4px;
}
.device-phone video { aspect-ratio: 9 / 19.5; border-radius: 12px; }
.device-phone::before {
  content: "";
  position: absolute;
  top: 7px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 7px;
  background: #0c0c0c;
  border-radius: 0 0 6px 6px;
  z-index: 2;
}
.device video { cursor: pointer; }
@media (max-width: 620px) {
  .devices-stage { --dev-h: clamp(90px, 24vw, 130px); }
}

.pourquoi-title {
  margin: 2.6rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: var(--ink);
}
.pourquoi-subtitle {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
.subtitle-highlight { font-weight: 700; }
#titre-pourquoi .subtitle-highlight { color: var(--rose-vif); }
.ia-text { color: var(--rose-vif); }
.reel-text { color: var(--gold-deep); }
#titre-reel .subtitle-highlight { color: var(--gold-deep); }

.card-icon { display: flex; justify-content: center; color: var(--ink); margin: .2rem 0 .8rem; }
.card-icon svg { width: 40px; height: 40px; display: block; }
.card h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: none;
}

h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 2.6rem); letter-spacing: .02em; margin: 0 0 .6rem; }
h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 0; }
h3 { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; margin-top: 0; }
.lede { font-size: 1.15rem; color: #444; max-width: 640px; margin-inline: auto; }

.kicker { font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-vif); font-weight: 500; }

.btn, .btn--gold {
  display: inline-block; padding: .85rem 1.8rem; margin-top: .6rem;
  background: var(--gold); color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  border: 0; border-radius: 3px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.btn::after { content: " \2192"; }
.btn:hover, .btn--gold:hover { background: var(--rose-vif); color: #fff; }
.section--ink .btn { color: var(--ink); }
.section--ink .btn:hover { color: #fff; }

.btn--ia { background: var(--rose-vif); color: #fff; }
.btn--reel { background: var(--accent-reel); color: var(--ink); }
.btn--ia::after, .btn--reel::after { content: none; }
.btn--ia:hover { background: var(--gold); color: var(--ink); filter: none; }
.btn--reel:hover { background: #25d366; color: var(--ink); filter: none; }
/* Boutons iA de l'accueil (« En savoir + » du bandeau iA, « Commander » de l'encart
   Budget maîtrisé) : survol vert, identique au bouton « En savoir + » tournage réel */
.hero .btn--ia:hover,
.card-cta .btn--ia:hover { background: #25d366; color: var(--ink); }

/* Blocs dépliables « En savoir + » (page d'accueil) */
.expandable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.expandable.is-open { grid-template-rows: 1fr; }
.expandable-inner { overflow: hidden; min-height: 0; }

/* Bandeau références (logos clients) */
.references-band { background: var(--paper); padding: 2.2rem 0; }
.references { margin: 0; }
.references-title { font-family: var(--font-display); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); opacity: .45; margin: 0 0 1.4rem; }

/* Marquee de logos façon editclub.co : défilement horizontal continu, logos en niveaux de gris, sans cadre */
.ref-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ref-marquee-track { display: flex; width: max-content; flex-wrap: nowrap; animation: ref-scroll 34s linear infinite; }
.ref-marquee:hover .ref-marquee-track { animation-play-state: paused; }
.ref-marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.ref-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 34px; margin: 0 clamp(1.5rem, 5vw, 3.2rem); }
.ref-logo img { max-height: 34px; max-width: 148px; width: auto; display: block; filter: grayscale(1); opacity: .55; transition: opacity .3s ease; }
.ref-marquee:hover .ref-logo img { opacity: .78; }
/* Logos fournis en blanc sur fond transparent : on inverse pour les afficher en sombre sur le bandeau clair */
.ref-logo--dark img { filter: grayscale(1) invert(1) brightness(.55) contrast(1.1); opacity: .8; }
.ref-marquee:hover .ref-logo--dark img { opacity: 1; }
@keyframes ref-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ref-marquee { -webkit-mask-image: none; mask-image: none; }
  .ref-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .ref-marquee-group:nth-child(n+2) { display: none; }
}

/* Petit bandeau beige : avis clients + note Google défilants (page réalisations) */
.reviews-strip { background: #ece1cd; border-bottom: 1px solid rgba(12, 12, 12, .12); padding: .5rem 0; }
.reviews-strip-inner { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.8rem); }
.reviews-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .38rem; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.reviews-badge .g-logo { display: block; }
.reviews-badge strong { font-size: .9rem; letter-spacing: 0; }
.reviews-badge-label { color: rgba(12, 12, 12, .58); }
.review-stars { color: #f5a623; letter-spacing: .05em; font-size: .78rem; white-space: nowrap; }
.reviews-marquee { position: relative; flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-marquee-track { display: flex; width: max-content; flex-wrap: nowrap; animation: reviews-scroll 55s linear infinite; }
.reviews-marquee:hover .reviews-marquee-track { animation-play-state: paused; }
.reviews-marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.review { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem clamp(1rem, 3.2vw, 2rem); border-right: 1px solid rgba(12, 12, 12, .16); white-space: nowrap; }
.review-text { margin: 0; font-family: var(--font-body); font-style: italic; font-size: .82rem; color: var(--ink); }
.review-author { font-family: var(--font-display); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(12, 12, 12, .55); }
@keyframes reviews-scroll { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .reviews-strip-inner { flex-direction: column; gap: .35rem; }
  .reviews-marquee { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { -webkit-mask-image: none; mask-image: none; }
  .reviews-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .reviews-marquee-group:nth-child(n+2) { display: none; }
  .review { white-space: normal; }
}

/* Bouton flottant WhatsApp (toutes les pages) */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.7rem);
  top: clamp(1rem, 3vw, 1.7rem);
  z-index: 900;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .55), 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 16px 36px -8px rgba(37, 211, 102, .65), 0 6px 16px rgba(0, 0, 0, .22); }
.wa-fab:focus-visible { outline: 3px solid #0c0c0c; outline-offset: 3px; }
.wa-fab::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse { to { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
@media (max-width: 600px) { .wa-fab { width: 50px; height: 50px; } .wa-fab svg { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab::after { animation: none; } }

/* Info-bulle au survol / focus du bouton WhatsApp */
.wa-fab-tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  z-index: 1;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .03em;
  line-height: 1.2;
  white-space: nowrap;
  padding: .55rem .9rem;
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.wa-fab-tip::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left-color: var(--ink);
}
.wa-fab:hover .wa-fab-tip, .wa-fab:focus-visible .wa-fab-tip {
  opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
}
@media (max-width: 600px) { .wa-fab-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab-tip { transition: opacity .2s ease, visibility .2s; } .wa-fab:hover .wa-fab-tip, .wa-fab:focus-visible .wa-fab-tip { transform: translateY(-50%); } }

/* Bouton flottant « Remonter en haut » (créé par main.js) */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.7rem);
  bottom: clamp(1rem, 3vw, 1.7rem);
  z-index: 900;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .18);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .18s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--gold); color: var(--ink); }
.to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s; transform: none; } }

/* ---------- Grilles de cartes ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.card { background: var(--paper); border: 1px solid #e8e2d4; border-top: 6px solid var(--ink); padding: 1.6rem; }
.card h3 { margin-bottom: .5rem; text-align: center; color: var(--ink); }
.card p { margin-bottom: 0; }
.card-note { font-weight: 700; color: #FF1A47; font-size: 1.15rem; text-align: center; }
.card-note-big { color: var(--ink); }
.card-note-black { color: var(--ink); }
.card-note-big { font-size: 1.5rem; }
.card-note-ht { color: var(--ink); font-size: .82rem; font-weight: 600; letter-spacing: .04em; vertical-align: .18em; }
.card-note-with { display: block; margin-top: .25rem; font-size: .8rem; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.card-note-with a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .05rem; }
.card-note-with a:hover { color: var(--rose-vif); }
.card--beige { background: #f5eede; }
/* Encart Budget maîtrisé : le prix « 890 € » en rose */
.card--beige .card-note-big { color: var(--rose-vif); }
/* Bande blanche de séparation entre le bandeau noir « projet iA » et le hero « tournages réels » */
.band-separator { height: clamp(2.5rem, 6vw, 4.5rem); background: var(--paper); }
.card-cta { margin-top: 1.1rem; }
.card-cta .btn { margin-top: 0; }
/* Aligne la ligne d'accroche en bas des cartes « avantages » (iA et tournage réel) :
   les descriptifs ont des longueurs différentes — le descriptif grandit, l'accroche
   est calée en bas. Une réserve d'espace équivalente au bloc bouton aligne les
   cartes qui n'en ont pas. */
.section--avantages .card { display: flex; flex-direction: column; }
.section--avantages .card > p:not(.card-note):not(.card-cta) { flex: 1 0 auto; }
.section--avantages .card:not(:has(.card-cta))::after {
  content: "";
  display: block;
  min-height: 4.2rem;
}

/* LED jaune fluo : un point lumineux qui court sur le contour de tout bouton
   au survol, avec une traînée « comète » lumineuse qui s'efface derrière lui. */
@property --led-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btn { position: relative; z-index: 0; }
.btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 6px;
  padding: 3px;
  background: conic-gradient(from var(--led-angle),
    transparent 0deg,
    transparent 210deg,
    rgba(234, 255, 0, .1) 232deg,     /* fin de traînée : s'efface */
    rgba(234, 255, 0, .4) 285deg,
    rgba(234, 255, 0, .8) 322deg,
    #eaff00 344deg,
    #f8ffb0 352deg,
    #ffffff 359.3deg,                 /* cœur du point, blanc chaud */
    transparent 360deg);              /* coupure nette devant le point */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, .45))   /* liseré sombre : reste visible sur fond clair/doré */
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px rgba(234, 255, 0, 1))
    drop-shadow(0 0 16px rgba(234, 255, 0, .9))
    drop-shadow(0 0 30px rgba(234, 255, 0, .55));
  animation: led-chase 1.8s linear infinite;
}
@keyframes led-chase { to { --led-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .btn:hover::before { animation: none; opacity: .7; }
}

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 2rem; align-items: stretch; }
.price-card {
  background: var(--paper); border: 1px solid #e8e2d4; border-top: 6px solid var(--gold);
  padding: 2rem 1.6rem; display: flex; flex-direction: column; text-align: center;
}
.price-card--highlight { border-top-color: var(--rose-vif); background: var(--paper-soft); }
.price-card h3 { margin-bottom: .3rem; }
.price-tag { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); margin: .3rem 0 1.1rem; white-space: nowrap; }
.price-tag .prefix { font-size: .5em; font-weight: 400; color: #6b6b6b; letter-spacing: .04em; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; flex-grow: 1; }
.price-card li { padding: .4rem 0; border-bottom: 1px solid #eee; }
.price-card li:last-child { border-bottom: 0; }
.price-card li::before { content: "\2713  "; color: var(--gold-deep); }
.pricing-intro { max-width: 640px; margin: .2rem auto 2rem; color: #555; }

/* ---------- Page Tarifs (grille détaillée) ---------- */
.tarifs-note { color: #6b6b6b; font-size: .92rem; margin: .7rem auto 0; max-width: 520px; }
.price-tag .ht { font-size: .5em; font-weight: 400; color: #6b6b6b; letter-spacing: .04em; vertical-align: .45em; }
.price-tag .per { font-family: var(--font-body); font-size: .5em; font-weight: 400; color: #6b6b6b; letter-spacing: 0; }
.price-format { font-size: .9rem; color: #6b6b6b; margin: -.65rem 0 1.1rem; }
.price-for { font-size: .88rem; font-style: italic; line-height: 1.5; color: #666; text-align: left; margin: 0 0 1.4rem; }
.price-card .btn { margin-top: auto; }

/* Listes de prix (volume, options, droits) */
.price-list { margin: 1.6rem 0 0; padding: 0; }
.price-list--narrow { max-width: 560px; margin-inline: auto; }
.price-list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: .72rem 0; border-bottom: 1px solid #e8e2d4;
}
.price-list > div:last-child { border-bottom: 0; }
.price-list dt { margin: 0; }
.price-list dd { margin: 0; font-family: var(--font-display); font-weight: 500; white-space: nowrap; color: var(--gold-deep); }
.price-list-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(1.6rem, 5vw, 3.4rem); margin-top: 1.4rem; }
.price-list-cols h3 { margin-bottom: 0; }

/* Bloc volume : argument différenciant, mis en avant sur fond gold */
.tarifs-volume { background: var(--paper-soft); }
.tarifs-volume .kicker { color: var(--ink); opacity: .75; }
.tarifs-volume .pricing-intro { color: rgba(12, 12, 12, .8); }
.tarifs-volume .price-list > div { border-bottom-color: rgba(12, 12, 12, .18); }
.tarifs-volume .price-list dd { color: var(--ink); }
.tarifs-punch {
  margin: 1.8rem auto 0; max-width: 520px;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; color: var(--ink);
}

.tarifs-exclus { max-width: 620px; margin: 1.4rem auto 0; padding: 0; list-style: none; text-align: left; }
.tarifs-exclus li { position: relative; padding: .65rem 0 .65rem 1.5rem; border-bottom: 1px solid #e8e2d4; }
.tarifs-exclus li:last-child { border-bottom: 0; }
.tarifs-exclus li::before { content: "\2013"; position: absolute; left: .2rem; color: var(--gold-deep); }
.tarifs-tva { margin-top: 2rem; color: #777; }

/* ---------- Page Studio (pack TPE / lancement) ---------- */
.compare-wrap { overflow-x: auto; margin: 2.2rem 0 0; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; }
.compare--solo { min-width: 0; max-width: 560px; margin-inline: auto; }
.compare--solo th { width: 7.5rem; }
.compare th, .compare td { padding: .95rem 1.15rem; border-bottom: 1px solid #e8e2d4; vertical-align: top; font-size: .95rem; line-height: 1.5; }
.compare thead th { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--ink); border-bottom: 2px solid var(--ink); }
.compare thead th:first-child { border-bottom-color: transparent; }
.compare tbody th {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .08em; font-size: .7rem; color: #8a8375; white-space: nowrap; width: 8rem;
}
.compare .col-hl { background: var(--paper-soft); }

/* Bouton « + d'info » (icône neutre + libellé) + bulle d'info (formats) */
.info-btn {
  display: inline-flex; align-items: center; gap: .28rem;
  margin-left: .5rem; padding: .1rem .15rem;
  border: 0; background: transparent; cursor: pointer;
  color: var(--gold-deep); font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .03em;
  text-decoration: underline; text-underline-offset: 2px;
  vertical-align: .02em; transition: color .15s ease;
}
.info-btn svg { width: .92rem; height: .92rem; flex: 0 0 auto; }
.info-btn:hover { color: var(--ink); }
.info-pop {
  margin: auto;
  width: min(560px, 92vw);
  max-height: 85vh; overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 0; border-radius: 6px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  font-family: var(--font-body); font-weight: 400;
  font-size: .9rem; line-height: 1.6; text-align: left;
}
.info-pop::backdrop { background: rgba(12, 12, 12, .5); }
.info-pop p { margin: 0 0 .9rem; }
.info-pop p:last-child { margin-bottom: 0; }
.info-pop .info-pop-list + p { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #e8e2d4; }
.info-pop strong { color: var(--ink); }
.info-pop-list { margin: 0; padding: 0; list-style: none; }
.info-pop-list li { position: relative; margin: 0 0 .7rem; padding-left: 1.1rem; }
.info-pop-list li:last-child { margin-bottom: 0; }
.info-pop-list li::before { content: "\2022"; position: absolute; left: .1rem; color: var(--ink); font-weight: 700; }
.info-pop-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); margin-bottom: 1.1rem !important;
}
.info-pop-close {
  position: absolute; top: .45rem; right: .6rem;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #6b6b6b;
}
.info-pop-close:hover { color: var(--ink); }
.compare .row-price td { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-deep); }
.compare .row-price td.col-hl { color: var(--ink); }
.pack-badge {
  display: inline-block; margin-left: .45rem; padding: .14rem .5rem;
  border-radius: 999px; background: var(--rose-vif); color: #fff;
  font-family: var(--font-display); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}

.studio-rules { max-width: 720px; margin: 1.8rem auto 0; padding: 0; list-style: none; counter-reset: studio-rule; }
.studio-rules li { position: relative; padding: 1rem 0 1.05rem 2.7rem; border-bottom: 1px solid #e8e2d4; line-height: 1.6; }
.studio-rules li:last-child { border-bottom: 0; }
.studio-rules li::before {
  counter-increment: studio-rule; content: counter(studio-rule);
  position: absolute; left: 0; top: .95rem;
  width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .8rem;
}
.studio-rules strong { display: block; margin-bottom: .1rem; }
.studio-rules .rule-cost { color: var(--gold-deep); font-weight: 600; white-space: nowrap; }

.studio-plus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.6rem, 5vw, 3.2rem); max-width: 860px; margin-inline: auto; }
.studio-plus h3 { margin: 0 0 .5rem; }
.studio-plus p { margin: 0; color: #555; line-height: 1.6; }

/* Encart Pack iA mis en avant (page tarifs) : bandeau rose, encart blanc */
.studio-promo {
  background: var(--rose-vif);
  color: var(--ink);
}
/* Pack iA : les variables « or » sont redéfinies en rose dans l'encart, pour
   que le détail déplié (étapes, boutons, options, encarts de commande) suive
   le code couleur du pack — même principe que le cuivre du Pack Pro. */
.studio-promo--ia {
  --gold: var(--rose-vif);
  --gold-soft: #f6d3df;
  --gold-deep: var(--rose-vif);
  --gold-deep-lg: var(--rose-vif);
  background: #e27098;               /* rose adouci : même intensité que le cuivre du Pack Pro */
  background: color-mix(in srgb, var(--rose-vif) 70%, white);
}
/* Sur fond rose, texte blanc (le noir manque de contraste) */
.studio-promo--ia .btn--gold,
.studio-promo--ia .flow-eyebrow-num { color: #fff; }
.studio-promo-inner {
  --pad: clamp(1.7rem, 4vw, 2.8rem);
  padding: var(--pad) var(--pad) 0;
  background: var(--paper);
  border-left: 5px solid var(--rose-vif);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 55px -26px rgba(0, 0, 0, .35);
}
.studio-promo-eyebrow { font-family: var(--font-display); font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-vif); margin: 0 0 .5rem; }
/* Icône + titre juxtaposés (gain de hauteur) */
.studio-promo-head { display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 1.2rem); margin-bottom: .9rem; }
.studio-promo-head .pack-icon { margin: 0; flex: 0 0 auto; }
.studio-promo-head .studio-promo-eyebrow { margin: 0 0 .18rem; }
/* Intertitre « Les Packs » : même taille et police que le « Pack » de l'encart Studio */
.pricing-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  letter-spacing: .02em; text-transform: none; line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1.7rem;
}
.studio-promo h1, .studio-promo h2 { color: var(--ink); margin: 0; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; }
/* Code couleur par pack : Studio = rose */
.pack-name { color: var(--rose-vif); }
/* Titre « Pack iA » (page pack-ia) : même taille/police que l'encart Tarifs */
.pack-title { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; letter-spacing: .02em; margin: 0; }
/* Formulaire de brief Pack iA : bandeau rose (cohérence code couleur) */
#brief-ia.section--contact-form { background: #ece1cd; }
#brief-ia h2 { color: var(--ink); }
#brief-ia label { color: var(--ink); }
#brief-ia .brief-intro { color: #5a5346; }
#brief-ia .brief-group-title { color: var(--gold-deep); }
#brief-ia .req { color: #cf2e2e; }
#brief-ia .brief-foot { color: #6b6355; }
#brief-ia input,
#brief-ia select,
#brief-ia textarea { border-color: #cdbfa0; }
#brief-ia .btn:not(.btn--ghost) { background: var(--ink); color: #fff; }
#brief-ia .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(12, 12, 12, .4); }
.brief-actions { margin-top: 1.4rem; }
/* Cases d'acceptation (voie « commande » uniquement) */
.brief-consent { margin-top: 1.6rem; display: grid; gap: .75rem; }
.consent-row {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start;
  font-size: .88rem; line-height: 1.45; color: #4a4438; cursor: pointer;
}
.consent-row input[type="checkbox"] {
  margin: .15rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: #33566f;
}
.consent-row a { color: #33566f; }

/* Page CGV / documents légaux longs */
.legal-doc { max-width: 760px; margin-inline: auto; }
.legal-doc .legal-version { color: #777; font-size: .9rem; font-style: italic; margin: .3rem 0 2rem; }
.legal-doc h2 { margin: 2rem 0 .6rem; font-size: 1.12rem; }
.legal-doc p, .legal-doc li { line-height: 1.6; color: #3f3f3f; }
.legal-doc ul { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.legal-doc li { margin-bottom: .4rem; }
.legal-doc .legal-foot { margin-top: 2.6rem; font-size: .9rem; }
.legal-doc .legal-foot a { color: var(--gold-deep); }
/* Deux variantes du formulaire : « commande » (or) / « devis » (bleu ardoise) */
#brief-ia { border-top: 4px solid transparent; }
#brief-ia.mode-commande { border-top-color: var(--gold-deep); }
#brief-ia.mode-devis { border-top-color: #33566f; }
.projet-badge {
  display: table; margin: 0 auto 1.3rem; padding: .42rem 1.1rem;
  border-radius: 999px; font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: var(--ink);
}
.projet-badge--devis { background: #33566f; color: #fff; }
#brief-ia.mode-devis .brief-group-title { color: #33566f; }
/* Voie « devis » : boutons remplis bleu ardoise (rappel du code couleur) */
.lane--careful .btn--ghost,
#brief-ia.mode-devis .btn--ghost {
  background: #33566f; color: #fff; border-color: #33566f;
}
/* Bande beige d'appel juste au-dessus du formulaire de brief */
.brief-cta { background: #ece1cd; padding: clamp(1.8rem, 5vw, 2.6rem) 0; }
.brief-cta-text {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.25rem, 4vw, 1.85rem); line-height: 1.3; letter-spacing: .01em;
  color: var(--ink);
}

/* Icône d'identification par pack */
.pack-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 auto .7rem;
  border-radius: 50%; border: 2px solid currentColor;
}
.pack-icon-svg { width: 23px; height: 23px; display: block; }
.pack-icon--studio   { color: var(--rose-vif); }
.pack-icon--social   { color: var(--accent-ia); }
.pack-icon--film     { color: #cf2e2e; }
.pack-icon--campagne { color: var(--gold-deep); }

/* Slogan d'identification sous chaque formule premium (même style que l'eyebrow Studio) */
.pack-tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.35; margin: .1rem 0 .3rem;
}
.price-card--social .pack-tagline,
.price-card--social .price-format,
.price-card--social h3 { color: var(--accent-ia); }
.pricing .price-card--social { border-top-color: var(--accent-ia); }
.price-card h3 .pack-prefix { color: var(--ink); }
.price-card h3 .pack-word { font-size: 1.4em; letter-spacing: .04em; }
.price-card--film .pack-tagline,
.price-card--film .price-format,
.price-card--film h3 { color: #cf2e2e; }
.price-card--highlight.price-card--film { border-top-color: #cf2e2e; background: var(--paper); }
.price-card--campagne .pack-tagline,
.price-card--campagne .price-format,
.price-card--campagne h3 { color: var(--gold-deep); }
.pricing .price-card--campagne { border-top-color: var(--gold-deep); }
@media (max-width: 720px) { .studio-promo-head { justify-content: center; } }
/* Partie blanche : descriptif à gauche, tarif à droite */
.studio-promo-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 3rem);
}
.studio-promo-lede { color: #555; margin: 0 0 1rem; max-width: 52ch; line-height: 1.6; }
.studio-promo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .88rem; font-weight: 600; color: var(--rose-vif); }
.studio-promo-list li { position: relative; padding-left: 1.15rem; }
.studio-promo-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ink); }
.studio-promo-price { font-family: var(--font-display); font-size: 2rem; color: var(--ink); margin: 0; white-space: nowrap; line-height: 1; }
.studio-promo-price span { font-size: .5em; color: #6b6b6b; letter-spacing: .04em; }
.studio-promo-price .ht { font-size: .5em; vertical-align: .45em; }
@media (max-width: 720px) {
  .studio-promo-top { grid-template-columns: 1fr; text-align: center; }
  .studio-promo-price { margin-top: .4rem; }
}
/* Bande beige intégrée dans l'encart : bouton de dépliage centré */
.studio-promo-band {
  margin: clamp(1.5rem, 3.5vw, 2.1rem) calc(-1 * var(--pad)) 0;
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  background: #ece1cd;
  text-align: center;
}
.studio-promo-band .btn { margin: 0; }
.studio-promo-band .btn::after { content: none; }
/* Bouton « Ce que ça comprend en détail » de l'encart Pack iA : rose */
.studio-promo:not(.studio-promo--reel):not(.studio-promo--essentiel):not(.studio-promo--autre) .studio-promo-band .btn { background: var(--rose-vif); color: #fff; }
/* Page Tarifs : tous les survols de boutons en vert */
.page-tarifs .btn:hover,
.page-tarifs .btn--gold:hover,
.page-tarifs .btn--ghost:hover,
.page-tarifs .section--contact-form .btn:hover,
.page-tarifs .studio-promo:not(.studio-promo--reel) .studio-promo-band .btn:hover {
  background: #25d366; color: var(--ink);
}
.page-tarifs .btn:hover::after { color: var(--ink); }
/* Le détail « Ce que ça comprend » se déplie à l'intérieur de l'encart blanc */
.studio-promo-inner .expandable { margin: 0 calc(-1 * var(--pad)); }
.studio-promo-inner .expandable .section:last-child { padding-bottom: clamp(2rem, 5vw, 3rem); }

/* Encart Pack Tournage Réel Pro : même modèle, code couleur cuivre. Les
   variables « or » sont redéfinies à l'échelle de l'encart : tout ce qu'il
   contient (badge PRO, boutons, étapes, options, formulaire) passe au cuivre,
   sans toucher au Pack Essentiel qui garde l'or. */
.studio-promo--reel {
  --gold: #d9774a;          /* cuivre clair : fonds, boutons, textes sur noir */
  --gold-soft: #f2c6ad;
  --gold-deep: #b4532a;     /* cuivre soutenu : textes sur blanc */
  --gold-deep-lg: #b4532a;
  background: #e4a080;      /* cuivre adouci (70 % cuivre, 30 % blanc) */
  background: color-mix(in srgb, var(--gold) 70%, white);
}
.studio-promo--reel .studio-promo-inner { border-left-color: var(--gold-deep-lg); }
.studio-promo--reel .studio-promo-eyebrow,
.studio-promo--reel .pack-name,
.studio-promo--reel .studio-promo-list { color: var(--gold-deep); }
.pack-icon--reel { color: var(--gold-deep); }
/* Le "Tournage Réel" du gros titre (+ son icône) peut se permettre un gold plus
   vif : à cette taille, le seuil d'accessibilité requis descend à 3:1 au lieu
   de 4.5:1. */
.studio-promo--reel .studio-promo-head .pack-name,
.studio-promo--reel .pack-icon--reel { color: var(--gold-deep-lg); }
.studio-promo--reel .opt-price { color: var(--ink); }
.studio-promo--reel .opt-row input { accent-color: var(--gold-deep); }
#brief-reel.section--contact-form { background: var(--ink); }
#brief-reel h2 { color: #fff; }
#brief-reel .brief-intro { color: rgba(255, 255, 255, .9); }
#brief-reel .brief-group-title { color: var(--gold); }
#brief-reel .brief-foot { color: rgba(255, 255, 255, .8); }
#brief-reel .req { color: #ffd0d0; }
#brief-reel input,
#brief-reel select,
#brief-reel textarea { border-color: #4a4a4a; }
#brief-reel .btn { background: var(--gold); color: var(--ink); }
#brief-reel .btn:hover { background: #25d366; color: var(--ink); }
/* Pack Tournage Réel : reprise du modèle Pack iA (tableau, options, récap) */
.studio-promo--reel .compare--solo td { font-family: var(--font-display); color: var(--ink); }
.studio-promo--reel .compare .row-price td { color: var(--ink); }
.studio-promo--reel .opt-row:has(input:checked) { background: #f6efe0; }
.studio-promo--reel .opt-row:has(input:checked) .opt-name { color: var(--gold-deep); }
.studio-promo--reel .js-recap-opts .recap-opt { color: var(--gold-deep); }
.studio-promo--reel .recap-add-label .pack-name { color: var(--gold-deep); }
.page-tarifs .studio-promo--reel .opt-toggle[aria-expanded="true"]:hover { background: var(--gold-deep); color: #fff; }
.page-tarifs .studio-promo--reel .opt-toggle[aria-expanded="true"]:hover::after { color: #fff; }

/* Encart Pack Tournage réel Essentiel : même famille « réel » que le Pack Pro,
   même code couleur gold-deep (contraste identique sur le fond or) — la
   distinction entre « Essentiel » et « Pro » se fait par la typo du mot-clé
   (voir .pack-tier ci-dessous), pas par la couleur. */
.studio-promo--essentiel { background: color-mix(in srgb, var(--gold) 45%, white); }
.studio-promo--essentiel .studio-promo-inner { border-left-color: var(--gold-deep-lg); }
.studio-promo--essentiel .studio-promo-eyebrow,
.studio-promo--essentiel .pack-name,
.studio-promo--essentiel .studio-promo-list { color: var(--gold-deep); }
.pack-icon--essentiel { color: var(--gold-deep); }
.studio-promo--essentiel .studio-promo-head .pack-name,
.studio-promo--essentiel .pack-icon--essentiel { color: var(--gold-deep-lg); }
.studio-promo--essentiel .opt-price { color: var(--ink); }
.studio-promo--essentiel .opt-row input { accent-color: var(--gold-deep); }
.studio-promo--essentiel .compare--solo td { font-family: var(--font-display); color: var(--ink); }
.studio-promo--essentiel .compare .row-price td { color: var(--ink); font-weight: 700; }
.studio-promo--essentiel .opt-row:has(input:checked) { background: #f6efe0; }
.studio-promo--essentiel .opt-row:has(input:checked) .opt-name { color: var(--gold-deep); }
.studio-promo--essentiel .js-recap-opts .recap-opt { color: var(--gold-deep); }
.studio-promo--essentiel .recap-add-label .pack-name { color: var(--gold-deep); }
.page-tarifs .studio-promo--essentiel .opt-toggle[aria-expanded="true"]:hover { background: var(--gold-deep); color: #fff; }
.page-tarifs .studio-promo--essentiel .opt-toggle[aria-expanded="true"]:hover::after { color: #fff; }
/* Page Tarifs : onglets « Projet vidéo » / « Publicités » sous la
   photo ; chaque onglet affiche son panneau (.tarifs-panel) et sa phrase d'intro. */
.tarifs-intro { background: var(--paper); padding: clamp(1.4rem, 3.5vw, 2rem) 0; }
.tarifs-intro-prompt { font-family: var(--font-display); font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 .7rem; }
.tarifs-tabs {
  display: inline-flex; margin: 0 0 1rem; padding: 4px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--paper);
}
.tarifs-tab {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .75rem 1.5rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tarifs-tab:not(.is-active):hover { background: #25d366; color: var(--ink); }
.tarifs-tab.is-active { background: var(--ink); color: #fff; position: relative; }
/* Petite LED verte qui fait le tour de l'onglet actif (même mécanique que la
   LED des boutons : --led-angle et @keyframes led-chase, définis plus haut) */
.tarifs-tab.is-active::before {
  content: ""; position: absolute; inset: -3px; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--led-angle), transparent 0deg 230deg, rgba(37, 211, 102, .25) 290deg, #25d366 350deg, #dcffe9 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 3px #25d366);
  animation: led-chase 2.6s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tarifs-tab.is-active::before { animation: none; background: #25d366; }
}
@media (max-width: 420px) {
  .tarifs-tab { padding: .7rem .95rem; letter-spacing: .08em; font-size: .72rem; }
}
.tarifs-intro-text { margin: 0 auto; max-width: 62ch; color: #555; line-height: 1.6; }
/* Encart « Autres projets vidéo » (hors publicité, sur devis) : textes et
   filet en noir, bandeau or (--gold, couleur principale du site). Le bouton
   « Demander un devis » déplie le formulaire directement dans l'encart. */
.studio-promo--autre { background: var(--gold); }
.studio-promo--autre .studio-promo-inner { border-left-color: var(--ink); }
.studio-promo--autre .studio-promo-eyebrow,
.studio-promo--autre .studio-promo-list,
.pack-icon--autre,
.studio-promo--autre .pack-name { color: var(--ink); }
.studio-promo--autre .studio-promo-band .btn { background: var(--ink); color: #fff; }
#brief-autre.section--contact-form { background: #f6efe0; }
#brief-autre h2 { color: var(--ink); }
#brief-autre .brief-intro { color: #5a5346; }
#brief-autre .brief-group-title { color: var(--ink); }
#brief-autre label { color: var(--ink); }
#brief-autre .req { color: #cf2e2e; }
#brief-autre .brief-foot { color: #6b6355; }
#brief-autre input,
#brief-autre select,
#brief-autre textarea { border-color: #e2d9c4; }
#brief-autre .btn { background: var(--ink); color: #fff; }
#brief-autre .btn:hover { background: #25d366; color: var(--ink); }
#brief-essentiel.section--contact-form { background: #f6efe0; }
#brief-essentiel h2 { color: var(--ink); }
#brief-essentiel .brief-intro { color: #5a5346; }
#brief-essentiel .brief-group-title { color: var(--gold-deep); }
#brief-essentiel .req { color: #cf2e2e; }
#brief-essentiel .brief-foot { color: #6b6355; }
#brief-essentiel input,
#brief-essentiel select,
#brief-essentiel textarea { border-color: #e2d9c4; }
#brief-essentiel .btn { background: var(--ink); color: #fff; }

/* Distinction « Essentiel » / « Pro » dans le gros titre de chaque encart :
   même gold-deep, deux formes opposées — script manuscrit (humain, sur
   mesure, cohérent avec le "hand-script" déjà utilisé ailleurs sur le site)
   contre pastille majuscule (pro, carré, certifié). */
.pack-tier {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .48em;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-left: .4em;
  padding: .35em .75em .3em;
  border-radius: 999px;
  white-space: nowrap;
}
.pack-tier--essentiel {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold-deep-lg);
}
.pack-tier--pro {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold);
}

/* ---------- Bouton fantôme (contour) ---------- */
.btn--ghost {
  display: inline-block; padding: .8rem 1.7rem; margin-top: .6rem;
  background: transparent; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 3px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--ghost::after { content: none; }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* ---------- Pack iA : calculateur d'options + commande ---------- */
.formule-order { max-width: 560px; margin: 1.8rem auto 0; text-align: center; }
.formule-order-toggle { text-align: center; }
/* Valeurs du tableau « Ce que comprend la formule » (Pack iA) : police d'affichage (comme « Étape »), couleur noire */
.studio-promo:not(.studio-promo--reel) .compare--solo td { font-family: var(--font-display); color: var(--ink); }
/* Prix « 890 € HT » du tableau « Ce que comprend la formule » (Pack iA) : noir */
.studio-promo:not(.studio-promo--reel) .compare .row-price td { color: var(--ink); font-weight: 700; }
/* Bouton d'options : doré au repos.
   - Panneau replié : libellé « Ajout d'options + », survol vert (défaut de la page).
   - Panneau déployé : au survol le libellé devient « Aucune option - » et le fond passe au rose.
   La couleur de survol suit donc le texte affiché. */
.btn--gold.opt-toggle::after { content: "Ajout d'options +"; }
.opt-toggle[aria-expanded="true"]:hover::after { content: "Aucune option -"; }
.page-tarifs .opt-toggle[aria-expanded="true"]:hover { background: var(--rose-vif); color: #fff; }
.page-tarifs .opt-toggle[aria-expanded="true"]:hover::after { color: #fff; }
.options-hint { margin: .5rem 0 .1rem; font-size: .82rem; color: var(--ink); }
.options-box {
  border: 1px solid #e2d9c4; border-radius: 6px;
  margin: 1.1rem 0 0; padding: .4rem 1rem 1rem;
  background: var(--paper); text-align: left;
}
.options-legend {
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); padding: 0 .5rem;
}
.opt-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline;
  gap: .55rem .7rem; padding: .75rem 1rem; margin-inline: -1rem;
  border-top: 1px solid #efe9db;
  cursor: pointer; font-size: .95rem;
  transition: background .15s ease;
}
.opt-row:first-of-type { border-top: 0; }
/* Ligne activée : toute la ligne se teinte de rose */
.opt-row:has(input:checked) { background: #fdeef4; border-top-color: transparent; }
.opt-row:has(input:checked) + .opt-row { border-top-color: transparent; }
.opt-row:has(input:checked) .opt-name { color: var(--rose-vif); }
.opt-row input[type="checkbox"] { margin: 0; transform: translateY(1px); accent-color: var(--rose-vif); width: 1.05rem; height: 1.05rem; }
.opt-name small { display: block; color: #6b6b6b; font-size: .82em; letter-spacing: 0; }
.opt-name .info-btn { margin: .3rem 0 0; }
.formule-options-title,
.studio-promo h2.formule-options-title { margin-top: clamp(3.8rem, 9vw, 5.5rem); }
.opt-price { font-family: var(--font-display); color: var(--ink); white-space: nowrap; font-size: .95rem; }
/* Sélecteur de quantité sur les options multipliables (nb de voix-off, de langues…) */
.opt-qty { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.opt-qty-label {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6b6b6b;
}
.opt-qty select {
  width: auto; padding: .18rem 1.45rem .18rem .5rem; font-size: .92rem; font-weight: 500;
  font-family: var(--font-display); border: 1px solid #bbb; border-radius: 3px;
  background: #fff; cursor: pointer;
}
.opt-row:has(input:checked) .opt-qty select { border-color: var(--rose-vif); }
.opt-row:not(:has(input:checked)) .opt-qty { opacity: .4; }
.options-hint-qty {
  display: inline-block; margin-top: .4rem;
  font-size: .82rem; font-weight: 400; color: #6b6b6b; line-height: 1.5;
  letter-spacing: 0; text-transform: none; font-family: var(--font-body);
}
/* Ligne d'information : options hors liste, sur devis */
.opt-note {
  margin: .5rem 0 0; padding: .8rem 1rem 0;
  border-top: 1px solid #efe9db;
  font-size: .85rem; line-height: 1.55; color: #777;
}
.opt-note a { color: var(--rose-vif); text-underline-offset: 2px; }
.opt-note a:hover { text-decoration: none; }
/* Bandeau beige de récap sous la liste d'options : formule + options cochées + prix.
   Il occupe toute la largeur de l'encart blanc (comme la bande du bouton « détail ») :
   large bande centrée sur l'encart, débordement rogné par .expandable-inner (overflow: hidden). */
.formule-recap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 100vw;
  margin: 1.6rem 0 0;
  background: #ece1cd;
  padding: clamp(1.2rem, 3.5vw, 1.7rem) clamp(1.4rem, 6vw, 3rem);
  text-align: center;
}
/* Récapitulatif : une ligne par élément, les montants s'additionnent en colonne */
.recap-add {
  max-width: 30rem; margin: 0 auto;
  font-size: 1.02rem; line-height: 1.5; color: var(--ink);
}
.recap-add-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0; padding: .3rem 0;
}
.recap-add-line + .recap-add-line { border-top: 1px solid rgba(12, 12, 12, .1); }
.recap-add-base { padding-top: 0; }
.recap-add-label { text-align: left; }
.recap-add-label .ia-text { color: var(--rose-vif); }
.recap-add-val { white-space: nowrap; font-family: var(--font-display); }
.js-recap-opts .recap-plus { color: var(--ink); }
.js-recap-opts .recap-opt { color: var(--rose-vif); }
.formule-total {
  margin: 1.3rem 0 .2rem; font-size: 1rem; color: #555;
  display: flex; align-items: baseline; justify-content: center; gap: .6rem;
}
.formule-recap .formule-total {
  max-width: 30rem; margin: .7rem auto 0; padding-top: .7rem;
  border-top: 2px solid rgba(12, 12, 12, .25);
  justify-content: space-between;
}
@media (max-width: 520px) {
  .formule-recap .formule-total { flex-wrap: wrap; justify-content: center; }
}
.formule-total strong {
  font-family: var(--font-display); font-weight: 500; font-size: 1.8rem;
  color: var(--ink); line-height: 1;
}
.formule-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  align-items: stretch; margin-top: .8rem;
}
.formule-actions .btn,
.formule-actions .btn--ghost { margin-top: 0; }
.formule-note { margin: 1rem auto 0; max-width: 46ch; color: #777; line-height: 1.5; }
.formule-note small { font-size: .82rem; }
.formule-error {
  margin: .9rem auto 0; max-width: 46ch; color: #cf2e2e; font-size: .88rem; line-height: 1.5;
}
@media (max-width: 520px) {
  .opt-row { grid-template-columns: auto 1fr; }
  .opt-qty { grid-column: 2; justify-self: end; }
  .opt-price { grid-column: 2; text-align: right; }
  .formule-actions .btn,
  .formule-actions .btn--ghost { width: 100%; }
}

/* ---------- Parcours Pack iA en 3 étapes ---------- */
.flow-eyebrow {
  margin: 0 0 .7rem; text-align: center; line-height: 1.6;
  font-family: var(--font-display);
  font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.flow-eyebrow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; margin: 0 .45rem; vertical-align: middle;
  border-radius: 50%; background: var(--gold); color: var(--ink);
  font-size: .9rem; letter-spacing: 0;
}
.flow-timeline {
  list-style: none; margin: 1.9rem auto 0; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: left;
}
.flow-timeline li { position: relative; padding-top: 2.5rem; line-height: 1.5; font-size: .9rem; }
.flow-timeline li p { margin: 0; }
.flow-timeline strong { display: block; margin-bottom: .15rem; font-family: var(--font-display); }
.flow-timeline .info-btn { margin: .5rem 0 0; }
.flow-tl-num {
  position: absolute; top: 0; left: 0;
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .9rem;
}
.flow-timeline li::after {
  content: ""; position: absolute; top: .82rem; left: 1.9rem; right: -1.4rem; height: 2px;
  background: #e0d6bf;
}
.flow-timeline li:last-child::after { display: none; }
@media (max-width: 760px) {
  .flow-timeline { grid-template-columns: 1fr; gap: 0; max-width: 460px; }
  .flow-timeline li { padding: 0 0 1.5rem 2.6rem; }
  .flow-timeline li::after { top: 1.9rem; bottom: -.2rem; left: .82rem; right: auto; width: 2px; height: auto; }
  .flow-timeline li:last-child { padding-bottom: 0; }
}
.flow-more[aria-expanded="true"] { color: var(--ink); }
.flow-reassure {
  max-width: 620px; margin: 1.4rem auto 0; text-align: center;
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; color: var(--gold-deep);
}
/* Développement d'une étape de la frise, ouvert sous la frise (une seule à la fois) */
.flow-details { max-width: 720px; margin: 1.2rem auto 0; }
.flow-detail {
  background: var(--paper); border: 1px solid #e2d9c4; border-radius: 6px;
  padding: clamp(1.1rem, 3.5vw, 1.6rem) clamp(1.2rem, 4vw, 1.8rem);
  text-align: left;
}
.flow-detail-title {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--ink);
  margin: 0 0 .8rem;
}
.flow-detail .info-pop-list { font-size: .9rem; line-height: 1.6; color: var(--ink); }

.formule-next { margin: 1.4rem 0 0; text-align: center; font-size: .9rem; color: #777; }
.formule-next a { color: var(--gold-deep); }

.commande-recap { margin: 1.3rem auto 1.7rem; font-size: 1.2rem; }
.commande-recap .ia-text { color: var(--rose-vif); }
.commande-recap .opt-flag { color: var(--rose-vif); }

.lane-choice {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
  max-width: 860px; margin: 0 auto; text-align: left;
}
@media (max-width: 720px) { .lane-choice { grid-template-columns: 1fr; } }
.lane-choice--single { grid-template-columns: 1fr; max-width: 480px; }
.lane-choice--single .lane-note { min-height: 0; }
.lane {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid #e2d9c4; border-radius: 8px;
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
}
.lane--fast { border-color: var(--gold-deep); box-shadow: 0 14px 34px -20px rgba(194, 146, 47, .55); }
.lane-tag {
  margin: 0 0 .5rem; font-family: var(--font-display); font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep);
}
.lane--careful .lane-tag { color: #33566f; }
.lane h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.lane-desc { margin: 0 0 .9rem; line-height: 1.55; color: #444; font-size: .95rem; }
.lane-steps { margin: 0 0 1.3rem; padding: 0; list-style: none; }
.lane-steps li { position: relative; padding-left: 1.35rem; margin-bottom: .45rem; line-height: 1.45; font-size: .9rem; }
.lane-steps li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.lane .btn { margin-top: auto; width: 100%; }
/* min-height : réserve la même hauteur sous les deux boutons pour qu'ils s'alignent */
.lane-note { margin: .8rem 0 0; min-height: 2.7rem; font-size: .78rem; line-height: 1.5; color: #777; }
@media (max-width: 720px) { .lane-note { min-height: 0; } }

.brief-intro {
  max-width: 48ch; margin: -.3rem auto 1.9rem; text-align: center;
  color: rgba(255, 255, 255, .9); font-size: .9rem; line-height: 1.6;
}
.brief-group-title {
  margin: 1.8rem 0 .3rem; font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.brief-group-title:first-of-type { margin-top: 0; }
.section--contact-form .req { color: #ffd0d0; font-weight: 400; }
.brief-foot {
  color: rgba(255, 255, 255, .8); font-size: .82rem; line-height: 1.6; margin-top: 1rem;
}

/* ---------- Projet / réalisation ---------- */

.project { padding: 1.6rem; background: var(--paper); border: 1px solid #e8e2d4; border-top: 6px solid var(--gold); margin-bottom: 2rem; }
.project img.poster { border-radius: 3px; margin-bottom: 1rem; max-width: 320px; margin-inline: auto; }
.awards-box { background: var(--ink); color: #fff; border-radius: 6px; padding: 1.2rem 1.4rem; margin: 1rem 0; }

/* ---------- Vidéo (lecteur intégré ponctuel) ---------- */

.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Carrousel « showcase » (page d'accueil) ---------- */

.showcase { position: relative; display: flex; align-items: center; gap: .4rem; margin-top: 2.4rem; }
.showcase-viewport { flex: 1 1 auto; overflow: hidden; padding: 1.6rem 0 .4rem; }
.showcase-track {
  display: flex; align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.showcase-item {
  flex: 0 0 clamp(210px, 44vw, 360px);
  position: relative; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer;
  transform: scale(.8); opacity: .4; filter: saturate(.7);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s ease, filter .5s ease;
}
.showcase-item.is-center { transform: scale(1); opacity: 1; filter: none; z-index: 2; }
.showcase-item.is-far { opacity: 0; pointer-events: none; }
.showcase-item img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 6px; background: #000; box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.showcase-item .portfolio-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.showcase-item.is-center .portfolio-play { opacity: 1; }
.showcase-item .portfolio-play svg { width: 60px; height: 60px; }
.showcase-item .portfolio-tag {
  position: absolute; top: .5rem; left: .5rem; z-index: 3;
  padding: .28rem .55rem; border-radius: 3px;
  background: rgba(12, 12, 12, .68); color: #fff;
  font-family: var(--font-display); font-weight: 400; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.showcase-item .portfolio-caption { display: block; text-align: center; padding: .75rem 0 0; }
.showcase-item .portfolio-caption strong {
  font-family: var(--font-display); font-weight: 400; font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .3s ease;
}
.showcase-item.is-center .portfolio-caption strong { opacity: 1; }
.showcase-nav {
  flex: 0 0 auto; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.showcase-nav svg { width: 20px; height: 20px; }
.showcase-nav:hover { background: var(--ink); color: #fff; }

/* Accents de catégorie */
.showcase--ia .showcase-nav { border-color: var(--rose-vif); color: var(--rose-vif); }
.showcase--ia .showcase-nav:hover { background: #a61e4d; border-color: #a61e4d; color: #fff; }
.showcase--ia .portfolio-play svg > circle { fill: rgba(214, 51, 108, .72); }
.showcase--reel .showcase-nav { border-color: var(--accent-reel); color: var(--accent-reel); }
.showcase--reel .showcase-nav:hover { background: var(--accent-reel); color: var(--ink); }
.showcase--reel .portfolio-play svg > circle { fill: rgba(217, 164, 65, .82); }

@media (max-width: 560px) {
  .showcase-item { flex-basis: 72vw; }
  .showcase-nav { width: 38px; height: 38px; }
  .showcase { gap: .1rem; }
}

/* ---------- Grille portfolio (page Réalisations) ---------- */

.portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.portfolio-filter {
  flex: 1 1 240px; max-width: 340px;
  padding: 1rem 1.4rem;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.portfolio-filter:hover { background: rgba(12, 12, 12, .08); }
.portfolio-filter.is-active { background: var(--ink); color: #fff; }
.portfolio-empty { text-align: center; font-size: 1rem; margin: 1rem 0 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-bottom: 1.2rem;
}
.portfolio-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e8e2d4;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.portfolio-item[hidden] { display: none; }
.portfolio-item[data-category="ia"]::after {
  content: "iA";
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .18rem .5rem;
  border-radius: 3px;
}
.portfolio-item:hover, .portfolio-item:focus-visible { box-shadow: 0 10px 24px rgba(0, 0, 0, .15); transform: translateY(-2px); }
.portfolio-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.portfolio-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.portfolio-play svg { width: 56px; height: 56px; }
.portfolio-caption { display: block; padding: .8rem 1rem; }
.portfolio-caption strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.portfolio-caption small { display: block; margin-top: .2rem; color: var(--rose-vif); font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.caption-prefix { color: var(--ink); }

.video-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 12, .82); }
.video-modal-dialog {
  position: relative; z-index: 1;
  background: var(--paper-soft);
  max-width: 780px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  border-radius: 6px;
  padding: 1.5rem;
}
.video-modal-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--ink); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.video-modal-close:hover { background: var(--rose-vif); }
.video-modal-player { aspect-ratio: 16 / 9; background: #000; margin-bottom: 1.2rem; border-radius: 3px; overflow: hidden; }
.video-modal-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .7rem; row-gap: .2rem; margin: 0 0 .3rem; }
.video-modal-info h2 {
  margin: 0; font-size: 1.25rem; font-weight: 400;
  font-family: var(--font-display); letter-spacing: .02em;
}
.video-modal-tag {
  font-family: var(--font-display); font-weight: 400; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rose-vif);
}
.video-modal-tag:empty { display: none; }
.video-modal-title-brand { color: rgba(12, 12, 12, .62); }
.video-modal-desc { margin: 0 0 .9rem; font-size: .88rem; color: rgba(12, 12, 12, .7); line-height: 1.5; }
.video-modal-desc:empty { display: none; margin: 0; }
.video-modal-meta {
  margin: 0; padding-top: .8rem;
  border-top: 1px solid rgba(12, 12, 12, .1);
  display: grid; gap: .4rem;
}
.video-modal-meta:empty { display: none; padding: 0; border: 0; }
.video-modal-meta-row { margin: 0; display: flex; flex-wrap: wrap; column-gap: .6rem; font-size: .87rem; line-height: 1.4; }
.video-modal-meta-row dt {
  flex: 0 0 auto; min-width: 8rem; margin: 0;
  font-family: var(--font-display); font-weight: 400; font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(12, 12, 12, .62);
}
.video-modal-meta-row dd { margin: 0; flex: 1 1 200px; color: var(--ink); }
@media (max-width: 640px) {
  .video-modal { padding: 0; }
  .video-modal-dialog { max-width: none; height: 100%; max-height: none; border-radius: 0; }
}

/* ---------- Formulaire ---------- */

form { max-width: 560px; margin-inline: auto; }
label { display: block; font-family: var(--font-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 1.1rem 0 .3rem; }
input, select, textarea {
  width: 100%; padding: .7rem .8rem; font-family: var(--font-body); font-size: 1rem;
  border: 1px solid #ccc; border-radius: 3px; background: #fff;
}
textarea { resize: vertical; }

/* ---------- Pied de page ---------- */

.site-footer { background: var(--ink); color: var(--text-light); text-align: center; padding: 2.6rem 1rem 2rem; margin-top: 2rem; }
.footer-social-title { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); opacity: .65; margin: 0 0 .8rem; }
.socials { list-style: none; display: flex; justify-content: center; gap: 1.2rem; margin: 0 0 1.4rem; padding: 0; }
.socials a { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: var(--text-light); font-size: .88rem; transition: color .2s ease; }
.social-icon { width: 32px; height: 32px; transition: transform .25s ease, filter .25s ease; }
.socials a:hover { color: var(--red); }
.socials a:hover .social-icon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(255, 40, 40, .85)) drop-shadow(0 0 14px rgba(255, 20, 20, .55));
}
/* LinkedIn : survol et halo dans le bleu de la marque plutôt que le rouge générique */
.socials a.social-linkedin:hover { color: #0a66c2; }
.socials a.social-linkedin:hover .social-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)) drop-shadow(0 0 14px rgba(255, 255, 255, .55));
}
/* Instagram : survol dans le rose/violet de la marque */
.socials a.social-instagram:hover { color: #d6249f; }
.socials a.social-instagram:hover .social-icon {
  filter: drop-shadow(0 0 6px rgba(214, 36, 159, .85)) drop-shadow(0 0 14px rgba(129, 52, 175, .55));
}
.footer-heart-logo {
  display: block; width: 44px; height: auto; margin: .9rem auto;
  filter: drop-shadow(0 0 6px rgba(255, 40, 40, .85)) drop-shadow(0 0 18px rgba(255, 20, 20, .55));
  transform-origin: center; animation: footer-heartbeat 2.2s ease-in-out infinite;
}
/* Battement « lub-dub » : deux pulsations rapprochées puis une pause, comme un
   électrocardiogramme au repos (~27 battements/min pour rester discret). */
@keyframes footer-heartbeat {
  0%, 26%, 68%, 100% { transform: scale(1); }
  13% { transform: scale(1.13); }
  39% { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-heart-logo { animation: none; }
}
.footer-role { font-family: var(--font-display); letter-spacing: .06em; margin: .2rem 0; }
.footer-credit { font-size: .85rem; color: #bbb; margin: .6rem 0; }
.footer-credit a { color: #999; text-decoration: none; transition: color .2s ease; }
.footer-credit a:hover { color: var(--red); }
.footer-nav-links { font-size: .85rem; margin: 0 0 .5rem; }
.footer-nav-links a { color: #999; text-decoration: none; transition: color .2s ease; }
.footer-nav-links a:hover { color: var(--red); }
.footer-legal-link a { color: #999; font-size: .8rem; text-decoration: none; transition: color .2s ease; }
.footer-legal-link a:hover { color: var(--red); }

@media (max-width: 620px) {
  .project img.poster { max-width: 240px; }
}