/* ===== Polices auto-hébergées =====
   Les deux familles étaient chargées depuis fonts.googleapis.com, en requête
   bloquante avant le premier rendu du texte. Auto-hébergées, elles suppriment
   un aller-retour DNS et TLS vers deux domaines tiers, cessent de transmettre
   l'adresse IP du visiteur à Google, et rendent le site autonome : il n'a plus
   aucune dépendance externe à l'exécution.

   Fraunces et DM Sans sont des polices VARIABLES : un seul fichier couvre
   toute la plage de graisses (d'où le font-weight en intervalle ci-dessous).
   Ajouter une graisse au site ne coûte donc pas un octet de plus.

   Les fichiers latin-ext ne sont téléchargés que si la page contient un glyphe
   hors Latin-1. Le français n'en contient aucun : un visiteur ne charge que
   les trois fichiers latin. Voir assets/fonts/LISEZ-MOI.txt, et les deux
   licences OFL déposées à côté des fichiers.

   Remplacer une police impose de CHANGER SON NOM DE FICHIER : /assets est
   servi avec un cache de 30 jours. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* L'italique de Fraunces sert aux mots dorés des h1, aux citations d'avis et à
   la phrase-clé de la section « à propos ». Jusqu'ici la graisse 600 n'était
   pas chargée : les mots dorés des h1 étaient inclinés artificiellement par le
   navigateur. Le fichier étant variable, la corriger ne coûte rien. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Toty Animation — Élégant événementiel ===== */
:root {
  --navy: #010048;
  --navy-soft: #0d0d5c;
  --navy-deep: #00002e;
  --gold: #FFDF5A;
  --gold-soft: #F5C935;
  --gold-muted: #D4B84A;
  --cream: #FAF7F0;
  --paper: #FFFFFF;
  --ink: #1A1A2E;
  --text-soft: #55556E;

  --font-display: 'Fraunces', serif;
  --font-body: 'DM Sans', sans-serif;

  /* Échelle typographique — une seule source de vérité.
     Ne jamais écrire une taille de police en dur ailleurs. */
  --fs-xs:   0.75rem;    /* 12px — eyebrow, tag, mentions légales */
  --fs-sm:   0.875rem;   /* 14px — méta, sources d'avis, notes */
  --fs-base: 1rem;       /* 16px — corps de texte, cartes, liens */
  --fs-md:   1.125rem;   /* 18px — chapô, réponses FAQ, intro */
  --fs-h3:   1.375rem;   /* 22px */
  --fs-h2:   clamp(1.75rem, 3vw, 2.25rem);   /* 28 → 36px */
  --fs-h1:   clamp(2.25rem, 4.6vw, 3.5rem);  /* 36 → 56px */

  /* Échelle d'espacement — grille de 8px (aucune valeur hors de cette liste). */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --section-y: var(--space-9);  /* rythme vertical des sections, réduit en mobile */

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 30px rgba(1, 0, 72, 0.08);
  --shadow-lift: 0 16px 44px rgba(1, 0, 72, 0.14);
  --radius-lg: 22px;   /* cadres vidéo : plus généreux que celui des cartes */
  --container-max: 1140px;   /* le .container, et la zone des visuels .portrait qui s'y aligne */

  /* Fonds composés. Le dégradé navy habille cinq blocs (les deux héros, les
     prestations, la FAQ, le pied de page) et le voile doré les deux héros.
     Les écrire en variables évite qu'une retouche de l'un oublie les autres. */
  --gradient-navy: linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  --glow-gold: radial-gradient(ellipse at 70% 20%, rgba(255, 223, 90, 0.10) 0%, transparent 55%);

  /* Liserés et texte contextuels. Seules les valeurs servant à plusieurs
     endroits sont remontées ici : une couleur utilisée une seule fois reste
     écrite sur place, un token n'y ajouterait que de l'indirection. */
  --border-soft: rgba(1, 0, 72, 0.08);        /* liseré discret sur fond clair */
  --border-strong: rgba(1, 0, 72, 0.16);      /* le même, renforcé quand une carte blanche est posée sur du blanc */
  --border-gold-dark: rgba(255, 223, 90, 0.4);/* liseré doré, sur fond navy uniquement */
  --text-on-navy: rgba(250, 247, 240, 0.86);  /* texte courant hors carte, sur fond navy */

  /* Deux durées, pas davantage : le survol et le repli des composants. */
  --t-fast: .2s;
  --t-slow: .25s;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Focus clavier visible partout : navy par défaut (fonds clairs et cartes
   blanches), doré uniquement pour ce qui est posé à même un fond navy. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.hero :focus-visible,
.page-hero :focus-visible,
footer :focus-visible,
.prestations .section-head :focus-visible,
.faq .section-head :focus-visible {
  outline-color: var(--gold);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.12; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

/* Lien d'évitement : premier élément focusable, invisible tant qu'il n'a pas le focus. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  font-size: var(--fs-base);
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* il faisait 42px : cible tactile au ras du seuil */
  padding: var(--space-1) var(--space-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--t-fast) ease;
}
.skip-link:focus { top: 0; }

/* Texte réservé aux lecteurs d'écran, invisible à l'écran. Sert à annoncer
   l'ouverture d'un nouvel onglet sur le lien de prise de rendez-vous. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ===== Cards ===== */
.panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--paper);
}

/* ===== Motifs partagés =====
   Trois dessins servaient à plusieurs sections et étaient réécrits à chaque
   fois, à plusieurs centaines de lignes d'écart. Ils vivent ici : ce sont des
   primitives, pas des éléments d'une section. Chaque section ne déclare plus
   que ce qui lui est propre, à sa place dans l'ordre de la page. */

/* 1. Carte blanche posée sur un fond navy. Même dessin que .panel, mais une
   ombre plus dense : les ombres douces du site ne se voient pas sur du navy.
   Ces deux-là ne portent pas .panel dans le HTML, justement pour cette ombre. */
.prest-item,
.faq-item {
  background: var(--paper);
  color: var(--ink);          /* la carte impose son propre contexte de texte */
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 20, 0.28);
}

/* 2. Cercle d'icône des cartes de prestations, sur fond navy comme sur fond clair. */
.prest-item .icon,
.detail-card .icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(1, 0, 72, 0.05);
  border: 1px solid rgba(212, 184, 74, 0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

/* 3. Le filet court et centré qui sépare deux blocs d'une MÊME section. Jamais
   pleine largeur : une ligne d'un bord à l'autre recréerait la coupure entre
   deux sections qu'on cherche justement à éviter. La marge reste déclarée sur
   place, elle seule change d'un usage à l'autre. */
.clients::before,
.section-more::before,
.scope::before {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  background: var(--gold-muted);
  border-radius: var(--radius-pill);
}

/* 4. Visuel détouré de Thomas (.portrait), septembre 2026. Dix emplacements :
   le héros et la FAQ des cinq pages qui ont les deux blocs. La section porte
   .avec-portrait, jamais une règle sur .hero, .page-hero ou .faq en général.
   Les dix-huit fichiers d'assets/studio/ partagent le gabarit 600 × 989 :
   remplacer un visuel se limite au nom de fichier et au texte alternatif.
   Règles de composition : rien derrière le sujet (ni halo, ni ombre, ni
   filtre), coupé net par le bord bas de la section, tête jamais coupée,
   échelle réglée sur la largeur. Sous 1080px le visuel n'existe pas et ces
   sections redeviennent exactement ce qu'elles étaient : tout ce qui suit est
   donc enfermé dans le media query, y compris la compaction de l'accordéon. */
.portrait-zone { display: none; }
@media (min-width: 1081px) {
  .avec-portrait { position: relative; overflow: hidden; }
  .avec-portrait > .container { position: relative; z-index: 2; }
  .portrait-zone {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--container-max);
    z-index: 1;
    pointer-events: none;
  }
  .portrait { position: absolute; right: 0; bottom: 0; }
  .portrait img { width: 100%; height: auto; display: block; }

  /* Deux largeurs, en pourcentage de la zone, et pas une troisième. À 32 %, un
     fichier de 600px s'affiche à 365px : 1,64× de calibrage, sous la règle du
     double. Assumé : dépasser demanderait des exports en 1200px. */
  /* Héros : pas de largeur, le visuel y est dimensionné par la hauteur (voir
     plus bas). */
  .faq .portrait { width: 32%; }
  /* FAQ courte (5 questions, accueil seulement) : le bloc est plus bas, le
     visuel reprend la largeur des héros pour garder la même proportion. */
  .faq.faq-courte .portrait { width: 28%; }

  /* Héros : hauteur commune de 760px, contenu centré, colonne de texte
     plafonnée à 62 % (la grille du conteneur tient lieu de plafond : le h1
     garde ses 22ch à l'intérieur).
     Le visuel est ANCRÉ AU SUR-TITRE : la tête doit arriver à sa hauteur, sur
     chaque page et à chaque largeur (demande de Julien, 15 septembre 2026). Le
     sur-titre ne tombe pas au même endroit d'une page à l'autre, puisque le
     contenu est centré et que les titres n'ont pas la même longueur : une
     largeur en pourcentage ne pouvait donc pas tenir cet alignement. La section
     passe en grille à trois rangées (vide, texte, vide) ; la zone du visuel
     couvre la rangée du texte et celle du dessous, et descend jusqu'au bord de
     la section en reprenant son padding bas. L'image en prend toute la
     hauteur : sa largeur en découle. Les dix-huit fichiers ont la tête au ras
     du haut du cadre, c'est ce qui rend l'ancrage juste. */
  .hero.avec-portrait,
  .page-hero.avec-portrait {
    min-height: 760px;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
  }
  .hero.avec-portrait > .container,
  .page-hero.avec-portrait > .container { grid-row: 2; grid-column: 1; width: 100%; }
  .hero.avec-portrait > .portrait-zone,
  .page-hero.avec-portrait > .portrait-zone {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    grid-row: 2 / 4;
    grid-column: 1;
    justify-self: center;
    margin-bottom: calc(-1 * var(--space-9));   /* padding bas de .hero */
  }
  .page-hero.avec-portrait > .portrait-zone { margin-bottom: calc(-1 * var(--space-8)); }   /* padding bas de .page-hero */
  .hero .portrait,
  .page-hero .portrait { top: 0; }
  .hero .portrait img,
  .page-hero .portrait img { width: auto; height: 100%; }

  /* Bande d'appel avec visuel (page mariage, 15 septembre 2026). Retenue par
     Julien après comparaison de quatre maquettes : texte à gauche, mariée à
     droite, posée comme dans les FAQ (zone absolue, visuel ancré en bas à
     droite, coupé net par le bord de la bande).
     - Bande à hauteur de héros (760px), texte centré verticalement, colonne de
       texte à 52 % pour laisser la place au visuel.
     - Recadrage « zoom » juste sous le bouquet : le cadre ne montre le fichier
       que jusqu'à 740px sur 989 (bouquet 715, feuilles 718), via aspect-ratio
       et overflow, sans toucher au fichier. À 46 %, le visuel fait 524 × 647 à
       1440 : la hauteur des visuels des héros.
     Valeurs propres à mariee-portrait-pied : À RECALCULER si le visuel change.
     Écartées sur rendu réel : visuel ancré au sur-titre à côté du texte (trop
     petit), puis visuel centré sous le texte (bande de plus de 950px). */
  .cta-band.avec-portrait {
    min-height: 760px;
    display: flex;
    align-items: center;
  }
  .cta-band.avec-portrait > .container { width: 100%; }
  .cta-band.avec-portrait .inner {
    text-align: left;
    max-width: var(--container-max);
    display: grid;
    grid-template-columns: 52%;
    justify-items: start;
  }
  .cta-band.avec-portrait p { margin: 0 0 var(--space-4); }
  .cta-band .portrait { overflow: hidden; }
  /* Largeur et coupe propres à chaque photo, portées par une classe sur le
     .portrait : la mise en page de la bande est commune, le recadrage non.
     Pour chaque photo, la largeur est calée pour montrer environ 640 à 650px
     de haut à 1440, la hauteur des visuels des héros. À RECALCULER si la photo
     change. */
  /* Mariage : mariee-portrait-pied (600 × 989), coupée juste sous le bouquet
     (bouquet 715px, feuilles 718, coupe 740). 524 × 647 à 1440. */
  .cta-band .portrait.recadre-mariee { width: 46%; aspect-ratio: 600 / 740; }
  /* Galerie : duo-animateurs-energie (600 × 1294, hors gabarit commun), coupée
     sous les baskets de Thomas (908 à 935px selon le pied, coupe 960).
     399 × 638 à 1440. */
  .cta-band .portrait.recadre-duo { width: 35%; aspect-ratio: 600 / 960; }
  .page-hero.avec-portrait > .container { display: grid; grid-template-columns: 62%; justify-items: start; }
  /* Héros anniversaire (animateur-dj-bras-leve), recadré en « zoom » le
     19 septembre 2026 à la demande de Julien : en pied, jean compris, le sujet
     paraissait plus petit que sur les autres pages. Le bras levé dépasse la
     tête, l'ancrage au sur-titre ne peut donc pas s'appliquer ici :
     - la zone couvre tout le héros (padding compris) et le visuel part 16px
       sous son bord haut, main entière ; il est dimensionné sur la hauteur du
       héros, pas sur la position du sur-titre, qui varie avec le titre ;
     - le cadre ne montre le fichier que jusqu'à 800px sur 989, juste sous la
       main qui tient la console (jean coupé) : 558 × 744 à toute largeur, la
       tête à la taille de celle des autres héros ;
     - le visuel mord jusqu'à 100px sur la marge de droite quand elle existe
       (au-delà de 1140px), et la colonne de texte descend à 52 % : sans ces
       deux réglages, le coude recouvrait le chapô.
     Valeurs propres à ce fichier : À RECALCULER si ce visuel est remplacé. */
  .page-hero.recadre-dj > .container { grid-template-columns: 52%; }
  .page-hero.recadre-dj > .portrait-zone {
    grid-row: 1 / 4;
    margin-top: calc(-1 * var(--space-8));
    margin-bottom: calc(-1 * var(--space-8));
  }
  .page-hero.recadre-dj .portrait {
    top: var(--space-2);
    right: clamp(-100px, calc(570px - 50vw), 0px);
    overflow: hidden;
  }
  .page-hero.recadre-dj .portrait img { height: calc(100% * 989 / 800); }
  .hero.avec-portrait .hero-grid { grid-template-columns: 62%; }

  /* FAQ : colonne resserrée et questions fermées plus basses, pour laisser au
     visuel 440px de vide à droite dans un conteneur de 1140. */
  .faq.avec-portrait .faq-list { max-width: 700px; }
  .faq.avec-portrait .faq-item summary { padding: var(--space-2) 0; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;              /* cible tactile confortable */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: .02em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Variante compacte : pour un bouton posé dans du texte courant
   (même gabarit que le bouton de la nav). */
.btn-sm {
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
}

.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { background: var(--navy-soft); }
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(1, 0, 72, 0.25); }
.btn-ghost:hover { border-color: var(--navy); }
.hero .btn-ghost, .page-hero .btn-ghost { color: var(--cream); border-color: rgba(255, 255, 255, 0.35); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
/* Sur un héro navy, le bouton principal est doré : navy sur navy ne se verrait pas. */
.hero .btn-primary,
.page-hero .btn-primary { background: var(--gold); color: var(--navy); }
.hero .btn-primary:hover,
.page-hero .btn-primary:hover { background: var(--gold-soft); }

/* ===== Header ===== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: 1140px;
  margin: 0 auto;
  gap: var(--space-3);
}
/* min-height explicite : au-dessus de 380px le logo fait 28px et la cible
   atteint 44 avec les marges, mais sous 380px il descend a 24 et elle
   tombait a 40. La barre fait deja 44 de haut a cause du bouton de menu :
   cette ligne ne deplace rien, elle etend la zone cliquable. */
.logo-link { display: flex; align-items: center; min-height: 44px; padding: var(--space-1) 0; flex-shrink: 0; }
/* Logo : c'est la LARGEUR qui compte (248px), les seuils 1080 et 380px sont
   mesurés dessus. Le logo étant plus allongé (744 × 69), la hauteur suit. */
.logo-link img { height: 23px; width: auto; }
nav.links {
  display: flex;
  gap: var(--space-4);
  font-weight: 500;
  font-size: var(--fs-base);
  white-space: nowrap;
}
nav.links a {
  text-decoration: none;
  padding: var(--space-1) 0;      /* cible tactile agrandie */
  position: relative;
  color: var(--ink);
}
nav.links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-muted);
  transition: width var(--t-slow) ease;
}
nav.links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: var(--space-2); }
.nav-cta .btn { min-height: 44px; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }


.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(1, 0, 72, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1.8px;
  background: var(--navy);
  margin: 0 auto;
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: var(--cream);
  transition: max-height var(--t-slow) ease;
}
.mobile-menu.open { max-height: 420px; border-top: 1px solid var(--border-soft); }
.mobile-menu a {
  font-weight: 500;
  font-size: var(--fs-base);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);   /* 52px de haut : confortable au pouce */
  border-bottom: 1px solid rgba(1,0,72,.06);
}

/* Fond doré : le FAB flotte aussi bien au-dessus des sections navy que claires */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.4;
  white-space: nowrap;          /* le libellé doit tenir sur une seule ligne */
  text-decoration: none;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-lift);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease, visibility var(--t-slow);
}
/* Masqué tant que le héros ou le bloc de rendez-vous est à l'écran (script en
   bas des pages) : il doublait leur bouton et recouvrait la ligne de preuve du
   héros dès l'arrivée. visibility le sort aussi de la tabulation. */
.mobile-fab.masque {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--space-2));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-fab { transition: none; }
}

/* ===== Hero ===== */
.hero {
  background: var(--glow-gold), var(--gradient-navy);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--space-9) 0;
}
.bulb-ring { position: absolute; inset: 0; pointer-events: none; }
.bulb {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  opacity: .55;
  box-shadow: 0 0 14px 4px rgba(255, 223, 90, 0.35);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
/* Règle de contraste : sur fond clair, texte navy + liseré doré ;
   le doré n'est utilisé comme couleur de texte QUE sur fond sombre. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid rgba(212, 184, 74, 0.55);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
  background: transparent;
  text-wrap: balance;   /* « Maître de cérémonie » fait passer le sur-titre sur 2 lignes en mobile : coupure équilibrée */
}
.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--gold);
  border-color: var(--border-gold-dark);
}
.hero h1 {
  color: var(--cream);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.hero p.lead {
  font-size: var(--fs-md);
  max-width: 52ch;
  color: var(--text-on-navy);
  margin: 0 0 var(--space-5);
  font-weight: 300;
  line-height: 1.6;
}
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* Bandeau de réassurance, TOUJOURS après le bouton du héros (règle du
   16 septembre 2026) : trois repères vérifiables séparés par « · ».
   Chaque repère est un <span> insécable, et une espace insécable précède le
   point médian : le bandeau passe à la ligne entre deux repères, jamais au
   milieu (« Plus de / 100 soirées », « Île- / de-France »), et aucune ligne
   ne commence par un point. */
.hero-proof {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-on-navy);
}
.hero-proof > span { white-space: nowrap; }
.hero-proof-stars { color: var(--gold); letter-spacing: 2px; margin-right: var(--space-1); }

/* ===== Segments ===== */
.segments { padding: var(--section-y) 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head h2 { color: var(--navy); }
.section-head > p:not(.rating-line) { color: var(--text-soft); margin: var(--space-2) 0 0; max-width: 60ch; }
.section-head .rating-line {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--navy);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-base);
  letter-spacing: .02em;
}

.segment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.segment-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
  background: var(--paper);
}
.segment-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.segment-card .tag {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--navy);
  border: none;
  padding: 0;
  display: inline-block;
  margin-bottom: var(--space-2);
  background: transparent;
}
.segment-card h3 { margin-bottom: var(--space-1); color: var(--navy); }
.segment-card p { font-size: var(--fs-base); margin: 0; color: var(--text-soft); }

/* ===== Prestations ===== */
.prestations {
  padding: var(--section-y) 0;
  background: var(--gradient-navy);
  color: var(--cream);
}
.prestations .section-head .eyebrow { color: var(--gold); border-color: var(--border-gold-dark); }
.prestations .section-head h2 { color: var(--cream); }
.prest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
/* Carte blanche posée sur le fond navy : une carte translucide sur du bleu
   ne se détachait pas. Même traitement que .detail-card des pages intérieures. */
.prest-item {
  padding: var(--space-4) var(--space-3);
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.prest-item:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0, 0, 20, 0.36); }
.prest-item h3 { color: var(--navy); margin-bottom: var(--space-1); }
.prest-item p { font-size: var(--fs-base); color: var(--text-soft); margin: 0; }
/* Phrase de liaison sous les cartes de prestations (posée sur le fond navy,
   donc liens en doré : la règle de contraste de la charte). */
.prest-note {
  margin: var(--space-5) 0 0;
  max-width: 68ch;
  color: var(--text-on-navy);
}
.prest-note a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Ambiance video ===== */
.ambiance { padding: var(--section-y) 0; }
.ambiance-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-7);
  align-items: center;
}
.ambiance-video-frame {
  max-width: 280px;
  margin: 0 auto;
  padding: var(--space-1);
  background: var(--navy);
  border: none;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}
.ambiance-video-frame video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: var(--navy-deep);
}
.ambiance-copy h2 { margin-bottom: var(--space-2); color: var(--navy); }
.ambiance-copy p { max-width: 56ch; color: var(--text-soft); margin: 0; }
.ambiance-copy .btn { margin-top: var(--space-3); }

/* ===== About teaser ===== */
.about-teaser { padding: var(--section-y) 0; background: var(--paper); }
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-7);
  align-items: center;
}
.about-grid img {
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  border: 6px solid var(--cream);
  height: auto;
}
.about-copy h2 { margin-bottom: var(--space-3); color: var(--navy); }
.about-copy p { font-size: var(--fs-md); max-width: 62ch; color: var(--text-soft); margin: 0 0 var(--space-4); }
/* Phrase-clé de la section à propos : isolée, elle porte seule. */
.about-copy .about-claim {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.35;
  color: var(--navy);
  max-width: 42ch;
  margin: var(--space-3) 0;
}

/* ===== Clients (bandeau de logos, en pied de la section Avis) =====
   Un seul bloc continu avec les avis. La séparation est un filet COURT et
   centré : un filet pleine largeur recréerait la coupure entre deux sections
   qu'on cherchait justement à supprimer. Doré, en usage purement décoratif. */
.clients {
  margin-top: var(--space-7);
  overflow: hidden;
}
.clients::before { margin: 0 auto var(--space-6); }
.clients-intro {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--space-7);
  color: var(--text-soft);
  font-size: var(--fs-md);
}

/* Les logos entrent et sortent en fondu au lieu d'être coupés net aux bords. */
.logo-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
/* Durée calée sur la longueur de la piste : en changeant la taille des
   vignettes, ajuster la durée pour garder la même vitesse de défilement. */
.logo-track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: scroll-left 36s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
/* Exception à la règle des cartes : pas d'ombre ici. Les vignettes étant
   alignées, leurs ombres se cumulaient en une bande grise sous la rangée. */
.logo-slot {
  width: 200px;
  height: 112px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  flex-shrink: 0;
}
.logo-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(35%);
  opacity: .85;
  transition: filter var(--t-slow) ease, opacity var(--t-slow) ease;
}
.logo-slot:hover img { filter: grayscale(0%); opacity: 1; }
.logo-slot.dark { background: var(--navy); }
/* Bandeau posé dans une section blanche (page bar) : une vignette blanche sur
   fond blanc ne se lit plus que par sa bordure. On la renforce, comme le fait
   déjà .scope-plus, au lieu de teinter la vignette : la charte veut une carte
   blanche partout, et c'est le contour qui la détache ici. */
.angle .logo-slot { border-color: var(--border-strong); }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* ===== FAQ ===== */
.faq {
  padding: var(--section-y) 0;
  background: var(--gradient-navy);
  color: var(--cream);
}
.faq .section-head .eyebrow { color: var(--gold); border-color: var(--border-gold-dark); }
.faq .section-head h2 { color: var(--cream); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); max-width: 780px; }
/* Même logique que .prest-item : carte blanche sur le fond navy. */
.faq-item {
  padding: 0 var(--space-3);
  transition: box-shadow var(--t-slow) ease;
}
.faq-item:hover { box-shadow: 0 14px 38px rgba(0, 0, 20, 0.34); }
.faq-item summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--navy);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--navy);
  flex-shrink: 0;
  transition: transform var(--t-fast) ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  color: var(--text-soft);
  max-width: 68ch;
}

/* ===== Sections blanches des pages segments =====
   Même gabarit partout : une section blanche intercalée entre deux sections
   crème, qui porte l'argument propre à chaque segment.
   .impact (bar) · .preparation (mariage) · .proof (privé)
   (.constraints, qui portait la section « Vos contraintes » d'entreprise.html,
   a disparu avec elle ; sa règle a été retirée le 4 septembre 2026.)
   .angle est la seule à être partagée par les quatre pages : c'est la section
   posée juste après le héro, qui porte l'angle différenciant du segment. Elle
   doit être blanche pour ne pas enchaîner deux fonds identiques, le héro étant
   navy et la section .detail qui suit héritant du crème de body. */
.impact,
.preparation,
.proof,
.angle { padding: var(--section-y) 0; background: var(--paper); }

/* Grille d'avis resserrée quand il n'y en a que deux (page événements privés). */
.testi-grid.reduite {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

/* ===== Testimonials ===== */
.testimonials { padding: var(--section-y) 0; background: var(--cream); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
/* Avis mis en avant au-dessus de la grille : une phrase courte gagne à ne pas
   être noyée dans une carte de la même taille que les autres. */
.testi-lead {
  margin: 0 auto var(--space-6);
  padding: 0;
  max-width: 42ch;
  text-align: center;
}
.testi-lead p {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-style: italic;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}
.testi-lead cite { font-style: normal; font-weight: 600; font-size: var(--fs-base); color: var(--navy); }
.testi-lead cite .src { font-weight: 400; color: var(--text-soft); }

.testi-card {
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--paper);
}
/* Les étoiles dorées sont illisibles sur fond clair : on les pose sur une
   pastille navy. Le doré redevient un accent sur fond sombre, comme la charte.
   C'est LA seule façon d'afficher des étoiles sur le site. */
.testi-stars,
.stars-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--navy);
  color: var(--gold);
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  padding: 6px var(--space-2) 6px calc(var(--space-2) + 2px);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.testi-stars { align-self: flex-start; }
.stars-chip { vertical-align: middle; margin-right: var(--space-1); }
.testi-card p.quote {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
  color: var(--ink);
}
.testi-name {
  font-weight: 600;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: var(--navy);
}
.testi-name .src { font-weight: 400; font-size: var(--fs-sm); color: var(--text-soft); }

/* ===== Prise de rendez-vous (accueil #devis, contact #formulaire) =====
   Les classes gardent le nom « devis » : technique, invisible du visiteur, et
   les ancres en dépendent. Le formulaire a laissé la place à un lien de
   réservation : à gauche ce qu'on propose et ce que ça coûte, à droite ce qui
   se passe après le clic, puis le bouton, seul élément de ce poids. */
.devis { padding: var(--section-y) 0; background: var(--paper); }
.devis-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
}
.devis-copy h1,
.devis-copy h2 { margin-bottom: var(--space-2); color: var(--navy); }
.devis-copy p { max-width: 46ch; color: var(--text-soft); margin: 0; }
/* Même cadre que l'ancien formulaire : aplat crème et liseré discret, pas
   d'ombre ni de rayon nouveau. */
.rdv {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
/* Les trois étapes : l'ordre est réel, c'est le seul endroit du bloc où une
   numérotation se justifie. Même dessin que .steps (page mariage), réduit à
   une ligne : pastille navy, chiffre doré, fil --gold-muted d'une pastille à
   la suivante, pas de fil sous la dernière. */
.rdv-etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.rdv-etapes li {
  counter-increment: etape;
  position: relative;
  min-height: var(--space-4);
  padding-left: calc(var(--space-4) + var(--space-2));
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 500;
}
.rdv-etapes li::before {
  content: counter(etape);
  content: counter(etape) / "";   /* <ol> annonce déjà le rang : pas de doublon */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rdv-etapes li::after {
  content: '';
  position: absolute;
  left: 15px;                      /* centre de la pastille de 32px, fil de 2px */
  top: var(--space-4);
  bottom: calc(var(--space-3) * -1);
  width: 2px;
  background: var(--gold-muted);
}
.rdv-etapes li:last-child::after { content: none; }
.rdv-objection { margin: 0; color: var(--text-soft); }
.rdv .btn { justify-self: start; }
/* Mention et recours : lisibles mais nettement en retrait du bouton. */
.rdv-mention,
.rdv-recours { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.rdv-mention { margin-top: calc(var(--space-1) * -1); }   /* rattachée au bouton */
.rdv-mention a,
.rdv-recours a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Un numéro ou une adresse coupés en deux lignes se relisent mal. */
.rdv-recours a { white-space: nowrap; }

/* ===== Page hero (pages intérieures) ===== */
.page-hero {
  background: var(--glow-gold), var(--gradient-navy);
  color: var(--cream);
  padding: var(--space-8) 0;
}
.page-hero h1 {
  color: var(--cream);
  margin-bottom: var(--space-3);
  /* 22ch et non 20 : les titres des pages segments portent désormais le métier
     et la zone, ils sont plus longs. À 20ch, celui de la page mariage tombait
     sur quatre lignes. On reste très en deçà de la largeur du conteneur. */
  max-width: 22ch;
}
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero .lead {
  font-size: var(--fs-md);
  max-width: 56ch;
  color: var(--text-on-navy);
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

/* ===== Angle du segment (section posée juste après le héro) =====
   Une colonne de texte, pas une grille de cartes : c'est un argument qui se
   lit, pas une liste qui se survole. Fond blanc hérité du groupe ci-dessus. */
.angle-body { max-width: 68ch; }
.angle-body p { color: var(--text-soft); margin: 0 0 var(--space-3); }
/* Encart de rassurance : dernière ligne de la section, en carte blanche.
   Elle répond à l'objection qui reste après l'argument, elle ne le résume pas. */
.angle-body .angle-note {
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  color: var(--navy);
  font-weight: 600;
}

/* ===== Détail prestations (pages intérieures) ===== */
.detail { padding: var(--section-y) 0; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.detail-card {
  padding: var(--space-4) var(--space-3);
  background: var(--paper);
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.detail-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.detail-card h3 { color: var(--navy); margin-bottom: var(--space-1); }
.detail-card p { font-size: var(--fs-base); color: var(--text-soft); margin: 0; }
/* Grille dont le nombre de cartes n'est pas un multiple du nombre de colonnes :
   la dernière rangée se centre au lieu de laisser un trou à droite. Passage en
   flex plutôt qu'en grille, seule façon de centrer une rangée incomplète. Les
   largeurs restent calées sur celles de la grille, à chaque palier (voir la
   section Responsive, où les deux paliers sont repris). */
.detail-grid.centre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.detail-grid.centre > * { flex: 0 1 calc((100% - var(--space-3) * 2) / 3); }
/* Lien contextuel en pied de section : évite que les pages segments soient
   des culs-de-sac. Survit au masquage des sections photo vides. */
.detail-note {
  margin: var(--space-5) 0 0;
  color: var(--text-soft);
  font-size: var(--fs-base);
}
.detail-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Deux notes qui se suivent (lien croisé vers un autre segment, puis renvoi
   vers la galerie) : elles forment un même pied de section, pas deux blocs. */
.detail-note + .detail-note { margin-top: var(--space-2); }

/* Renvoi social en pied de section : une phrase courte, puis un vrai bouton.
   Le CTA social ne se pose qu'aux endroits ou le visiteur vient de regarder du
   contenu et voudra en voir plus : sous la video d'ambiance de l'accueil et
   sous la grille video de la galerie. Partout ailleurs il detourne de la
   demande de rendez-vous, qui reste l'objectif du site. Le bouton est un
   .btn-ghost.btn-sm : secondaire par rapport au CTA de conversion, qui garde
   le .btn-primary. */
.social-cta { margin-top: var(--space-6); }
.social-cta p {
  color: var(--text-soft);
  font-size: var(--fs-base);
  max-width: 60ch;
  margin: 0 0 var(--space-3);
}

/* ===== Impact (page bar & resto) =====
   Section blanche intercalée entre deux sections crème : elle répond à la seule
   question du gérant, « est-ce que ça me rapporte ». Réutilise .detail-grid et
   .detail-card pour ne pas créer un énième dessin de carte. */

/* Second bloc d'une section, séparé par un filet court et centré (jamais
   pleine largeur : ça recréerait une coupure entre deux sections).
   Partagé : page anniversaires, en pied des formats pour le karaoké à
   domicile, et page galerie. */
.section-more {
  margin-top: var(--space-8);
  max-width: 62ch;
}
.section-more::before { margin: 0 0 var(--space-5); }
.section-more h3 { color: var(--navy); margin-bottom: var(--space-2); }
.section-more p { color: var(--text-soft); margin: 0 0 var(--space-2); }

/* ===== Contraintes (page entreprise) =====
   Même traitement que .impact : section blanche intercalée entre deux
   sections crème. Grille en 2 colonnes, les questions étant plus longues
   que des titres de cartes classiques. */
.constraint-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
/* Carte seule sur sa rangée, sur toute la largeur de la grille : même dessin,
   même écart que les autres. Page bar, cinquième carte « La communication ». */
.constraint-grid > .pleine-largeur { grid-column: 1 / -1; }

/* Liste d'occasions : des pastilles qui aident le visiteur à se reconnaître
   et élargissent la surface de référencement. */
.occasions { margin-bottom: var(--space-6); }
.occasions h3 { color: var(--navy); margin-bottom: var(--space-2); }
/* Un paragraphe avant les pastilles : la liste seule ne porte aucun poids
   sémantique, elle ne dit ni ce qui est le plus demandé ni ce qui s'adapte. */
.occasions p { color: var(--text-soft); margin: 0 0 var(--space-3); max-width: 68ch; }
.occasion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.occasion-list li {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid rgba(1, 0, 72, 0.12);
  border-radius: var(--radius-pill);
  padding: 6px var(--space-2);
}

/* ===== Préparation (page mariage) =====
   La méthode est l'argument central de cette page : elle transforme une
   promesse en déroulé observable. Section blanche entre deux sections crème. */

/* Étapes : un déroulé se lit de haut en bas. En grille 2x2, l'ordre de
   lecture devenait ambigu (en ligne ? en colonne ?) et la progression
   disparaissait, alors que c'est tout l'intérêt du bloc. Colonne unique,
   largeur limitée pour garder une ligne de texte confortable, et un fil doré
   qui relie les pastilles pour rendre la séquence lisible d'un coup d'œil. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  gap: var(--space-4);
}
.step {
  position: relative;
  padding-left: calc(48px + var(--space-3));
  min-height: 48px;
}
/* Fil vertical d'une pastille à la suivante : usage décoratif du doré,
   jamais du texte. Pas de fil sous la dernière étape. */
.step::before {
  content: '';
  position: absolute;
  left: 23px;
  top: var(--space-6);
  bottom: calc(var(--space-4) * -1);
  width: 2px;
  background: var(--gold-muted);
}
.step:last-child::before { content: none; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;            /* la pastille passe au-dessus du fil */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le repère temporel : un numéro dit l'ordre, pas le moment. */
.step-when {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-1);
}
.step h3 { color: var(--navy); margin-bottom: var(--space-1); }
.step p { color: var(--text-soft); margin: 0; }

/* Périmètre de la prestation : aucun prix, juste un cadre que les mariés
   peuvent comparer avec les autres devis reçus. C'est un contenu d'une autre
   nature que le déroulé (un périmètre, pas une chronologie) : il lui faut une
   respiration, d'où le filet court et centré du site plutôt qu'un simple
   écart. Jamais de filet pleine largeur, il recréerait une coupure de section. */
.scope { margin-top: var(--space-8); }
.scope::before { margin: 0 auto var(--space-5); }
.scope-intro {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  color: var(--text-soft);
}
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
/* Les deux colonnes disent l'inverse l'une de l'autre et avaient exactement
   le même dessin : il fallait lire les titres pour savoir laquelle est
   laquelle. Le rempli dit « inclus », le contour dit « en option ». */
.scope-col {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
}
.scope-in { background: var(--cream); }
.scope-plus { background: transparent; border-color: var(--border-strong); }
.scope-col h3 { color: var(--navy); margin-bottom: var(--space-1); }
.scope-note {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0 0 var(--space-3);
}
/* Puces porteuses de sens : la coche marque l'acquis, le plus marque l'ajout.
   Douze disques gris identiques ne distinguaient rien. */
.scope-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-soft);
}
.scope-col li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-1);
}
.scope-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.scope-in li::before { content: '\2713'; color: var(--navy); }
.scope-plus li::before { content: '+'; color: var(--text-soft); }

/* ===== Galerie : photos & vidéos ===== */
.gallery { padding: var(--section-y) 0; background: var(--paper); }
.gallery.alt { background: var(--cream); }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.photo-grid img {
  width: 100%;
  height: auto;          /* neutralise l'attribut height du HTML pour que
                            aspect-ratio impose bien le cadrage 4/3 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
/* Grilles réduites : tant que la galerie n'a pas de quoi remplir trois
   colonnes, on resserre la mise en page plutôt que d'afficher des trous.
   Retirer la classe .reduite dans le HTML quand il y a assez de visuels. */
.photo-grid.reduite { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.video-grid.reduite { grid-template-columns: 1fr; max-width: 280px; }

.photo-placeholder {
  aspect-ratio: 4 / 3;
  border: 1.5px dashed rgba(1, 0, 72, 0.22);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  background: var(--cream);
}
.gallery.alt .photo-placeholder { background: var(--paper); }
.photo-placeholder .ph-icon { font-size: var(--fs-h3); opacity: .5; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.video-slot {
  padding: var(--space-1);
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.video-slot video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: var(--navy-deep);
}
/* ===== Bande CTA (pages intérieures) ===== */
.cta-band { padding: var(--section-y) 0; background: var(--cream); }
.cta-band .inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-band h2 { color: var(--navy); margin-bottom: var(--space-2); }
.cta-band p { color: var(--text-soft); font-size: var(--fs-md); margin: 0 auto var(--space-4); max-width: 52ch; }
/* Rangée de boutons dans une bande centrée (page 404 : liens vers les pages). */
.cta-band .hero-ctas { justify-content: center; margin-top: var(--space-4); }

/* ===== Lien carte (accueil → pages) ===== */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;              /* toujours collé en bas de la carte */
  padding-top: var(--space-3);
  min-height: 24px;
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  color: var(--navy);
  transition: color var(--t-fast) ease, gap var(--t-fast) ease;
}
.card-link:hover { color: var(--navy-soft); gap: var(--space-2); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Page contact =====
   Le bloc de prise de rendez-vous est la première chose visible, les
   informations viennent après : elles ajoutent de la profondeur sans repousser
   l'action. */
.contact-infos { padding: var(--section-y) 0; background: var(--cream); }

/* ===== Legal pages ===== */
.legal-page { padding: var(--space-7) 0 var(--section-y); }
/* Page de service : titre volontairement plus sobre que ceux des heros. */
.legal-page h1 { font-size: var(--fs-h2); margin-bottom: var(--space-1); color: var(--navy); }
.legal-page .updated { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--space-6); }
.legal-page h2 { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); color: var(--navy); }
.legal-page p, .legal-page li { font-size: var(--fs-base); max-width: 70ch; color: var(--text-soft); }
.legal-page ul { padding-left: var(--space-3); }
.legal-page a.back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;          /* il faisait 26px : c est un lien autonome, pas un lien dans une phrase */
  margin-bottom: var(--space-3);
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
}
.legal-page a.back:hover { color: var(--navy-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Footer =====
   Trois colonnes denses plutôt que quatre clairsemées : qui je suis, ce que
   je fais, comment on se parle. Les coordonnées brutes (téléphone, email,
   SIRET) vivent dans les mentions légales, pas ici : un footer n'est pas un
   formulaire administratif, et la prise de rendez-vous reste le point d'entrée. */
footer {
  position: relative;
  background: var(--gradient-navy);
  color: rgba(250, 247, 240, 0.78);
  padding: var(--space-9) 0 var(--space-4);
}
/* Badge en médaillon, à cheval sur la limite entre la dernière section et le
   pied de page (choix de Julien le 16 septembre 2026, parmi trois maquettes).
   La moitié haute repose sur le fond clair de la section précédente, où le
   cercle navy ressort. Le padding haut du footer (96px, 80px sous 620px) loge
   la moitié basse. Décoratif : alt vide, le logo texte porte déjà le nom. */
.footer-badge {
  position: absolute;
  top: 0;
  left: 50%;
  width: 128px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 20, 0.35));
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-grid img { height: 23px; width: auto; margin-bottom: var(--space-2); }
.footer-brand p { font-size: var(--fs-base); margin: 0; max-width: 34ch; }
/* Zone d'intervention : un prestataire local se situe, c'est un signal de
   confiance. Elle remplace la puce « Le Plessis-Robinson (92) » qui traînait
   dans la liste de contacts sans être un lien. */
.footer-brand .footer-zone {
  margin-top: var(--space-2);
  color: rgba(250, 247, 240, 0.6);
  font-size: var(--fs-sm);
}
/* Titres de colonnes en h2 : le footer suit <main>, un h4 y sautait deux
   niveaux. L'apparence ne change pas, seule la structure du document. */
footer h2 {
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-base);
}
/* Les liens faisaient 42px de haut, avec 4px morts entre deux d'entre eux :
   la cible etait a la fois trop courte et discontinue. min-height sur le lien
   lui-meme les rend contigus et les porte a 44px, et le pied de page y gagne
   meme une dizaine de pixels par colonne. */
footer li { padding: 0; }
footer a {
  text-decoration: none;
  transition: color var(--t-fast) ease;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0;
}
footer a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(250, 247, 240, 0.68);
  display: flex;
  justify-content: space-between;
  align-items: center;   /* les liens font 44px de haut : sans ça, le copyright
                            restait collé en haut, 15px au-dessus des liens */
  flex-wrap: wrap;
  gap: var(--space-2);
}
.footer-legal a { padding: 4px 0; }
.nowrap { white-space: nowrap; }

/* ===== Responsive ===== */
/* Le rythme vertical se resserre avec l'écran : --section-y pilote toutes
   les sections d'un coup, il n'y a aucune valeur de padding à retoucher ailleurs. */
/* Bascule de la navigation en menu burger.
   Seuil propre à la nav, plus haut que celui des grilles de contenu : avec
   cinq entrées, la barre déborde en dessous de 1080px et comprimait le logo. */
@media (max-width: 1080px) {
  nav.links { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: flex; }
  .mobile-fab { display: block; }
  /* Le médaillon du pied de page mord de 52 à 64px sur la dernière section : sans
     ce supplément, il arrivait à 12px du bouton de la bande d'appel sur mobile.
     Rien au-dessus de 1080px, où l'écart est déjà de 32px et où les bandes à
     visuel ont une hauteur fixe qu'il ne faut pas toucher. */
  main > section:last-child { padding-bottom: calc(var(--section-y) + var(--space-3)); }
  .nav-cta .btn-primary { display: none; }
  /* Réserve sous le bouton flottant, pour qu'il ne cache pas la ligne légale.
     Portée par le pied de page et non par le body : sur le body, elle prenait
     son fond crème et dessinait une bande claire sous le navy (19 sept. 2026). */
  footer { padding-bottom: calc(var(--space-4) + var(--space-8)); }
}

@media (max-width: 1000px) {
  :root { --section-y: var(--space-8); }   /* 80px */
  .segment-grid { grid-template-columns: repeat(2, 1fr); }
  .prest-grid, .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid.centre > * { flex-basis: calc((100% - var(--space-3)) / 2); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .clients { margin-top: var(--space-6); }
  .clients::before { margin-bottom: var(--space-5); }
}
@media (max-width: 900px) {
  .hero { padding: var(--space-8) 0; }
  .hero h1 br { display: none; }
  .page-hero { padding: var(--space-7) 0; }
  .page-hero h1 br { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-grid img { max-width: 200px; margin: 0 auto; }
  .ambiance-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .devis-wrap { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps { gap: var(--space-3); }
  .scope-grid { grid-template-columns: 1fr; }
  /* La colonne identité passe pleine largeur, les deux listes restent
     côte à côte : en 2 colonnes strictes, « Contact » se retrouvait seul
     sur une ligne avec une demi-largeur de vide à côté. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
}
/* Sous 380px, la barre d en-tete debordait de 20px et le bouton du menu se
   retrouvait rogne par l overflow-x du body : le logo fait 248px a 28px de
   haut et ne peut pas retrecir (flex-shrink: 0), ce qui laissait 272px pour
   248 + 24 + 44. Le seuil couvre les trois largeurs de telephone reelles ou
   ca se produisait : 320, 360 et 375. Au-dessus de 380px, la barre tient
   avec au moins 17px de marge, mesure. */
@media (max-width: 380px) {
  .nav-row { padding: var(--space-2); }
  .logo-link img { height: 20px; }
}

@media (max-width: 620px) {
  :root { --section-y: var(--space-7); }   /* 64px : plus d'air perdu sur petit écran */
  .container { padding: 0 var(--space-2); }
  .hero, .page-hero { padding: var(--section-y) 0; }
  .segment-grid,
  .prest-grid,
  .detail-grid,
  /* Bascule alignee sur .detail-grid depuis le 4 septembre 2026 : cette grille
     tombait en une colonne des 900px, heritage de la section « Vos contraintes »
     de la page entreprise, dont les cartes portaient des textes longs. Elle sert
     desormais des cartes courtes, a cote d'une .detail-grid qui tient deux
     colonnes jusqu'a 620px : les deux sections basculaient a des largeurs
     differentes, ce qui se voyait sur toute la plage tablette. */
  .constraint-grid,
  .testi-grid,
  .photo-grid,
  .video-grid { grid-template-columns: 1fr; }
  .detail-grid.centre > * { flex-basis: 100%; }
  .photo-grid.reduite { grid-template-columns: 1fr; max-width: none; }
  .testi-grid.reduite { grid-template-columns: 1fr; }
  .video-slot { max-width: 260px; margin: 0 auto; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  footer { padding-top: var(--space-8); }
  .footer-badge { width: 104px; }
  /* Bouton pleine largeur : confortable au pouce, et sa largeur ne dépend
     plus de l'état (survol, focus) mais du cadre. */
  .rdv { padding: var(--space-3); }
  .rdv .btn { justify-self: stretch; }
  .section-head { margin-bottom: var(--space-5); }
  .clients { margin-top: var(--space-5); }
  .clients::before { margin-bottom: var(--space-4); }
  .clients-intro { margin-bottom: var(--space-6); }
  /* Vignettes un cran plus petites : à 200px, une seule tenait à l'écran. */
  .logo-slot { width: 168px; height: 96px; padding: var(--space-2); }
  .logo-track { gap: var(--space-5); }
  .hero-ctas .btn, .page-hero .btn { width: 100%; }   /* boutons pleine largeur, plus faciles à viser */
  .footer-legal { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}