/* ============================================================
   FUSION.CSS — Casino Événements
   Socle de design pour les pages refondues (accueil, piliers
   entreprise et particuliers). Portage de maquettes/assets/maquette.css
   et des deux blocs <style> de maquettes/accueil-fusion.html (lignes
   29 à 169) et maquettes/particuliers-fusion.html (lignes 19 à 102),
   dédoublonnés. Créé à l'étape 1b du contrat pilotage/routage/
   refonte-3-pages-contrat.md (section 3.1), 2026-09-17.

   RÈGLES DE CONFINEMENT (contrat 3.1.3) :
   - Chaque sélecteur commence par ".page-fusion main" (y compris dans
     les @media) : aucune règle ne peut toucher l'en-tête, le pied de
     page, le menu mobile ou une autre page.
   - Les jetons de design (--ink, --gold, --r-md, etc.) sont déclarés
     sur ".page-fusion main", jamais sur :root.
   - Aucun @font-face ici : les polices sont déclarées une fois dans
     base.css (étape 1a). Le texte courant et les titres utilisent
     var(--font-body) / var(--font-heading) (Plus Jakarta Sans, les
     deux pointent vers la même famille) ; le mot d'accent italique
     utilise var(--font-accent) (Instrument Serif italique).
   - .btn, .btn-gold, .btn-ghost, .btn-full, .btn-sm entrent en
     collision avec la production (assets/css/components.css) : ils
     sont ici .mq-btn, .mq-btn-gold, .mq-btn-ghost, .mq-btn-full,
     .mq-btn-sm. Les autres modificateurs de bouton de la maquette
     (.btn-lg, .btn-line) suivent la même convention : .mq-btn-lg,
     .mq-btn-line.

   HAUTEUR D'EN-TÊTE : le hero plein écran et les éléments "sticky"
   (colonne FAQ, encart prix) utilisent var(--header-height) et
   var(--topbar-height) (définis dans base.css), jamais une hauteur
   d'en-tête de maquette codée en dur : l'en-tête réel du site est
   fixed (pas sticky) et pousse le contenu via un padding-top sur le
   body, avec une hauteur qui change selon le breakpoint.

   MODE D'EMPLOI POUR LES INTÉGRATEURS (étapes 3, 4, 5) — un composant
   par ligne, à quoi il sert :

   Structure de page
   - .page-fusion main             ancre de confinement + jetons de design (fond seulement ; la typo de base vit sur .sec, .hero-full, .band-light, .clients)
   - .wrap                         conteneur centré (largeur --wrap, gouttière --gut)
   - .narrow                       variante étroite du wrap (colonnes de texte, 820px)
   - .sec / .sec-alt                section standard / section à fond légèrement dégradé
   - .sec-head                     en-tête de section (titre à gauche, chapeau à droite dès 1100px)
   - .eyebrow (+ .eb-long)          sur-titre de section en petites capitales, tiret avant/après
   - h2.big / h3.mid                titres de section / sous-titres
   - .lede                         chapeau de section (paragraphe d'intro)
   - .ital                         mot d'accent en italique (police d'accent, doré clair)
   - .gold                         utilitaire couleur dorée sur un texte inline

   Boutons
   - .mq-btn (+ .mq-btn-gold, .mq-btn-ghost, .mq-btn-full, .mq-btn-sm,
     .mq-btn-lg, .mq-btn-line)     boutons de la maquette, renommés (collision avec .btn de production)

   Hero
   - .hero-full (+ .hero-full--page)  hero plein écran (accueil) / hero de page intérieure, plus bas
   - .hero-img                     conteneur de l'image de fond (picture), assombrie et dégradée
   - .hero-full-in                 colonne de contenu centrée du hero
   - .hero-title (+ em)             titre du hero ; l'accent italique est le <em> à l'intérieur
   - .hero-sub                     sous-titre du hero
   - .hero-acts                    ligne de boutons du hero (CTA devis + téléphone)
   - .hero-facts (+ .fact-prix)     liste de repères en pastilles ("450 € HT / la table")
   - .ttc / .ttc-inline             montant TTC secondaire (bloc sous le HT / en ligne entre parenthèses)
   - .hero-scroll                  indicateur de défilement (accueil uniquement)

   Bande claire et deux portes
   - .band-light                   section à fond clair (pour les .door2)
   - .doors2 / .door2               grille des deux portes ; .door2-prive / .door2-pro pour la couleur du pip
   - .pip / .go                     picto d'entête de porte / lien "Voir la page"

   Bande de références et bande de chiffres
   - .clients / .clients-in / .lab   bande "Ils nous ont fait confiance"
   - .stats / .stat                 bande de 4 chiffres clés

   Étapes (rendu exclusivement par includes/etapes.php)
   - .mq-steps / .mq-step           liste ordonnée numérotée (01, 02...), numéro généré en CSS

   Compris / options / prix
   - .inclus / .inclus-duo          bloc à deux colonnes "compris" / "en option"
   - .inclus-liste (+ .opt-titre,
     .opt-liste, .opt-note)         liste à puces dorées ; variante grisée pour les options
   - .legal-note                   encart "jeu 100% factice" (bordure dorée à gauche)
   - .prix-encart / .num            encart de prix sticky (colonne droite d'une section de vente)
   - .lien-or                      lien texte doré générique

   Tables vendues une par une
   - .sells / .sell (+ .sell--large) grille des tables ; la première peut occuper deux colonnes
   - .sell-img / .cap               image de la table + pastille de capacité
   - .sell-body / .promise / .pour  corps de carte, accroche en italique, ligne "à mettre..."
   - .sell-foot / .prix             pied de carte (prix + lien devis)
   - .sells-more                   ligne de conclusion sous la grille (texte + bouton)

   Jeux en bande (variante compacte, page particuliers)
   - .games / .game / .game-txt     bande de vignettes jeu (image + titre + phrase courte)

   Occasions / pour qui
   - .occas / .occas-col            deux colonnes "entreprise" / "particuliers" (accueil)
   - .occas-list / .occas-liens     liste d'occasions dans une colonne + phrase de maillage
   - .occas-liste                  grille de cartes d'occasions (page particuliers)
   - .card                         carte générique (bordure, fond dégradé, titre, texte, lien doré)

   Avis / preuve sociale
   - .proof / .proof-more           grille de 3 avis tronqués + ligne d'intro (non utilisée par
                                     l'accueil, qui garde le carrousel de production, cf contrat 3.1.4.1)
   - .avis-grid                    grille de 2 colonnes pour la variante "moins de 4 avis" (piliers)
   - .quote / .quote-stars          carte de citation (étoiles, texte, pied auteur) ; sert aussi de
                                     citation isolée (blockquote) hors section avis
   - .av / .who / .src              pastille d'initiale, nom, source de l'avis
   - .groupe-note                  mention groupe Newvibes sous les avis

   Réalisations (variante V2 de la maquette)
   - .works2 / .work2 / .work2-body / .work2-chiffres  grille de 3 réalisations, image + chiffres clés

   Budget (rendu exclusivement par includes/budget-table.php)
   - .mq-budget-wrap / .mq-budget / .mq-budget-note   tableau de la grille tarifaire + note

   FAQ (mise en page uniquement : l'accordéon lui-même reste .faq-item de production)
   - .faq-layout / .faq-intro / .faq-cta   colonne d'intro fixe à gauche, questions à droite dès 1000px

   Blog
   - .blog3 / .post / .post-body / .temps   grille de 3 articles

   Maillage
   - .mesh / .annu                 nuage de liens (zones) / ligne d'annuaires partenaires

   En bref / bandeaux de texte
   - .essentiel                    encart "l'essentiel" (bordure dorée à gauche, fond surface)
   - .ticks                        liste à puces "Ce que vous recevez" (losange doré)

   Page particuliers uniquement
   - .lieu-duo / .lieu-bloc         bloc "Le lieu" (texte + photo, ou texte seul)

   CLASSES DE MAQUETTE VOLONTAIREMENT ÉCARTÉES (ne pas les utiliser) :
   - .hero, .hero-grid, .price, .price-num, .price-body, .works, .work,
     .work-txt, .cta, .cta-acts, .doors, .door, .duo, .toc, .crumb,
     .chips        anciennes versions (V1) ou composants non utilisés par
                    les <section> des deux maquettes fusion (superseded)
   - .devis-layout, .nav, .topbar, .header, le bandeau de maquette
     (.mockbar), .head*, .burger, .menu-mobile, .foot*, .brand*
                    en-tête/pied de page/menu mobile : ceux du site (R8)
   - .bet, .bet-top, .bet-24, .bet-note, .bet-legal, .field, .field-row
                    "carte de devis" de la maquette : la vraie section
                    utilise includes/devis-form.php (contrat 3.1.4.2)
   - .contact3, .c3i, .ico          doublonnent .devis-info/.devis-contacts
                    de production (même section, contrat 3.1.4.2)
   - .faq, .faq summary, .faq details, .faq details p  l'accordéon reste
                    .faq-item de production (contrat 3.1.4.3)
   - .confirm-tag    étiquette "à confirmer" de la maquette : la TVA à
                    20 % est confirmée par le client (contrat 3.3), plus
                    aucune étiquette de ce type sur le site (règle P2)
   - .fam-pro, .fam-prive, --accent, --accent-soft, --felt, .acc, .card-tag,
     .cards, .c2, .c3, .c4  système d'accent par famille et grille de
                    cartes générique : non utilisés par les sections des
                    deux maquettes (les .door2 codent leurs couleurs en
                    dur, sans passer par --accent)
   ============================================================ */

/* ----- JETONS DE DESIGN + BASE TYPO (portée : .page-fusion main) ----- */
.page-fusion main {
  --ink: #0d0b07;
  --ink-2: #14110b;
  --surface: #1a1610;
  --surface-2: #211c14;
  --line: rgba(240, 228, 200, 0.10);
  --line-gold: rgba(212, 175, 55, 0.28);
  --gold-deep: #8a6d1c;
  --cream: #f4eee0;
  --cream-soft: #cfc6b2;
  --cream-mute: #8e8574;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  /* Largeur de conteneur "grands écrans" (révision du 2026-09-16) :
     remplace la valeur d'origine (1180px) de la maquette. */
  --wrap: 1440px;
  --gut: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --accent-scale: 1.05;

  display: block;
  background: var(--ink);
}

/* Typographie de base : portée limitée aux quatre conteneurs au design des
   maquettes (.sec, .hero-full, .band-light, .clients). Correctif de la
   vérification du 2026-09-17 : posée sur tout <main>, elle écrasait les
   marges, graisses et couleurs des composants de production insérés dans
   ces pages (avis, devis, FAQ, réalisations, articles, sections seo-*).
   Règle pour les intégrateurs : un composant de production ne se place
   JAMAIS à l'intérieur de l'un de ces quatre conteneurs. */
.page-fusion main :where(.sec, .hero-full, .band-light, .clients) {
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
}

@media (min-width: 1700px) {
  .page-fusion main {
    --wrap: 1560px;
  }
}

.page-fusion main :where(.sec, .hero-full, .band-light, .clients) :is(h1, h2, h3, h4) {
  color: var(--cream);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
  margin: 0;
}

.page-fusion main :where(.sec, .hero-full, .band-light, .clients) p {
  margin: 0 0 1.05em;
}

/* ----- CONTENEURS ----- */
.page-fusion main .wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.page-fusion main .narrow {
  max-width: 820px;
}

/* ----- SECTIONS ----- */
.page-fusion main .sec {
  padding: clamp(64px, 9vw, 118px) 0;
  position: relative;
}

/* Section courte : un titre, une phrase, un bouton (invitation au devis de la page particuliers) */
.page-fusion main .sec--compact {
  padding: clamp(36px, 4.4vw, 60px) 0;
}

.page-fusion main .sec--compact h2 {
  margin-bottom: 14px;
}

.page-fusion main .sec-alt {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}

.page-fusion main .sec-head {
  display: grid;
  gap: 14px 72px;
}

.page-fusion main .sec-head .big {
  margin-bottom: 0;
}

.page-fusion main .sec-head .lede {
  margin: 0;
}

@media (min-width: 1100px) {
  .page-fusion main .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.page-fusion main .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.page-fusion main .eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

.page-fusion main h2.big {
  font-size: clamp(30px, 4.4vw, 52px);
  margin-bottom: 18px;
}

.page-fusion main h3.mid {
  font-size: clamp(21px, 2.3vw, 27px);
  margin-bottom: 10px;
}

.page-fusion main .lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--cream-soft);
  /* 68ch : révision "grands écrans" du 2026-09-16 (remplace 60ch d'origine) */
  max-width: 68ch;
}

.page-fusion main .ital {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: calc(1em * var(--accent-scale));
  line-height: .95;
  color: var(--gold-light);
  letter-spacing: 0;
}

.page-fusion main .gold {
  color: var(--gold);
}

.page-fusion main .lien-or {
  color: var(--gold);
}

/* ----- BOUTONS (renommés : collision avec .btn de production) ----- */
.page-fusion main .mq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
}

.page-fusion main .mq-btn:hover {
  transform: translateY(-2px);
}

.page-fusion main .mq-btn-gold {
  background: linear-gradient(160deg, var(--gold-light), var(--gold));
  color: #241c05;
  box-shadow: 0 10px 34px rgba(212, 175, 55, .22);
}

.page-fusion main .mq-btn-ghost {
  border-color: var(--line-gold);
  color: var(--cream);
  background: rgba(255, 255, 255, .02);
}

.page-fusion main .mq-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.page-fusion main .mq-btn-full {
  width: 100%;
}

.page-fusion main .mq-btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

.page-fusion main .mq-btn-lg {
  padding: 17px 38px;
  font-size: 16.5px;
  letter-spacing: .005em;
}

.page-fusion main .mq-btn-line {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.page-fusion main .mq-btn-line:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

/* ----- IMAGE DE FOND DU HERO (picture assombrie, réutilisée par .hero-full) ----- */
.page-fusion main .hero-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .20;
}

.page-fusion main .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06);
}

.page-fusion main .hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--ink) 26%, rgba(13, 11, 7, .62) 62%, rgba(13, 11, 7, .9));
}

/* ----- HERO PLEIN ÉCRAN -----
   min-height tient compte de l'en-tête réel du site (fixed, hauteur variable
   selon le breakpoint : var(--header-height) + var(--topbar-height), définies
   dans base.css), pas d'une hauteur d'en-tête de maquette codée en dur. */
.page-fusion main .hero-full {
  position: relative;
  /* Contexte d'empilement propre : sans lui, l'image en z-index -1 passe sous le fond
     de .page-fusion main et disparaît (constaté à la vérification du 2026-09-17). */
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(540px, calc(86dvh - var(--header-height) - var(--topbar-height)), 880px);
  display: grid;
  place-items: center;
  text-align: center;
}

.page-fusion main .hero-full .hero-img {
  opacity: .42;
}

.page-fusion main .hero-full .hero-img::after {
  background:
    linear-gradient(180deg, rgba(13, 11, 7, .72), rgba(13, 11, 7, .42) 38%, rgba(13, 11, 7, .92)),
    radial-gradient(70% 55% at 50% 55%, transparent, rgba(13, 11, 7, .55));
}

.page-fusion main .hero-full-in {
  position: relative;
  padding: clamp(80px, 10vh, 120px) var(--gut);
  max-width: 1240px;
}

.page-fusion main .hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  font-size: clamp(32px, 5.2vw, 68px);
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5);
  margin: 0 0 22px;
}

.page-fusion main .hero-title em {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: calc(1em * var(--accent-scale));
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold-light);
  margin: .02em 0 -.04em;
}

.page-fusion main .hero-full .hero-sub {
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(16.5px, 1.5vw, 19.5px);
  color: #e9e2d2;
}

.page-fusion main .hero-full .eyebrow {
  color: var(--gold-light);
}

.page-fusion main .hero-full .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

.page-fusion main .hero-acts {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.page-fusion main .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
  justify-content: center;
}

.page-fusion main .hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  background: rgba(255, 255, 255, .02);
}

.page-fusion main .hero-facts li b {
  color: var(--gold);
  font-weight: 600;
}

.page-fusion main .hero-facts li.fact-prix {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  line-height: 1.25;
  padding-block: 5px;
}

.page-fusion main .hero-facts li.fact-prix .ttc {
  grid-column: 1 / -1;
  font-size: 11.5px;
  margin-top: 0;
}

.page-fusion main .ttc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream-mute);
  margin-top: 2px;
  line-height: 1.3;
}

.page-fusion main .ttc-inline {
  color: var(--cream-mute);
  font-size: .92em;
  white-space: nowrap;
}

.page-fusion main .hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.page-fusion main .hero-scroll::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(rgba(255, 255, 255, .5), transparent);
}

/* Hero de page intérieure : plus bas que celui de l'accueil */
.page-fusion main .hero-full--page {
  min-height: clamp(320px, calc(56dvh - var(--header-height) - var(--topbar-height)), 560px);
}

.page-fusion main .hero-full--page .hero-title {
  font-size: clamp(27px, 4.1vw, 54px);
}

.page-fusion main .hero-full--page .hero-full-in {
  padding-top: clamp(56px, 7vh, 86px);
  padding-bottom: clamp(46px, 6vh, 72px);
}

@media (max-width: 700px) {
  .page-fusion main .hero-full {
    min-height: auto;
    place-items: start center;
  }

  .page-fusion main .hero-full-in {
    padding: 40px var(--gut) 44px;
  }

  .page-fusion main .hero-full .eyebrow {
    font-size: 11px;
    letter-spacing: .16em;
  }

  .page-fusion main .hero-full .eyebrow::before,
  .page-fusion main .hero-full .eyebrow::after {
    display: none;
  }

  .page-fusion main .eb-long {
    display: none;
  }

  .page-fusion main .hero-title {
    font-size: clamp(34px, 11.5vw, 50px);
    margin-bottom: 16px;
  }

  .page-fusion main .hero-full .hero-sub {
    font-size: 16px;
    line-height: 1.55;
  }

  .page-fusion main .hero-acts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .page-fusion main .hero-acts .mq-btn {
    width: 100%;
    justify-content: center;
  }

  .page-fusion main .hero-full .hero-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
  }

  .page-fusion main .hero-facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
  }

  .page-fusion main .hero-facts li b {
    font-size: 19px;
  }

  .page-fusion main .hero-facts li span {
    font-size: 12.5px;
    color: var(--cream-mute);
  }

  .page-fusion main .hero-scroll {
    display: none;
  }
}

/* ----- BANDE CLAIRE ----- */
.page-fusion main .band-light {
  background: linear-gradient(180deg, #f6f1e6, #efe7d6);
  color: #3a3227;
  padding: clamp(34px, 4.4vw, 58px) 0;
}

.page-fusion main .band-light h2,
.page-fusion main .band-light h3 {
  color: #141009;
}

.page-fusion main .band-light .eyebrow {
  color: #8a6d1c;
}

.page-fusion main .band-light .eyebrow::before {
  background: #8a6d1c;
}

/* ----- LES DEUX PORTES, version compacte sur fond clair ----- */
.page-fusion main .doors2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 26px);
}

@media (max-width: 780px) {
  .page-fusion main .doors2 {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .door2 {
  position: relative;
  display: block;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, #fffdf7, #f7f0e0);
  border: 1px solid #d9c58a;
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.4vw, 34px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}

.page-fusion main .door2:hover {
  transform: translateY(-3px);
  border-color: #b8962e;
  box-shadow: 0 16px 40px rgba(90, 70, 20, .14);
}

.page-fusion main .door2 .pip {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 12px;
  color: #1b160d;
}

.page-fusion main .door2-prive .pip {
  color: #a3313f;
}

.page-fusion main .door2 h2,
.page-fusion main .door2 h3 {
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #171208;
  margin-bottom: 9px;
}

.page-fusion main .door2 p {
  font-size: 15px;
  color: #5d5344;
  margin: 0;
}

.page-fusion main .door2 p b {
  color: #8a6d1c;
  font-weight: 600;
}

.page-fusion main .door2 .ttc {
  color: #7d7261;
}

.page-fusion main .door2 .go {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a6d1c;
  border-bottom: 1px solid rgba(138, 109, 28, .35);
  padding-bottom: 2px;
}

.page-fusion main .door2:hover .go {
  color: #7a5f13;
  border-color: #7a5f13;
}

/* ----- BANDE DE RÉFÉRENCES ----- */
.page-fusion main .clients {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.page-fusion main .clients-in {
  display: flex;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-fusion main .clients-in .lab {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.page-fusion main .clients-in b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cream-soft);
  letter-spacing: .01em;
}

/* ----- BANDE DE CHIFFRES ----- */
.page-fusion main .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (max-width: 760px) {
  .page-fusion main .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-fusion main .stat {
  background: var(--ink-2);
  padding: 26px 22px;
}

.page-fusion main .stat b {
  display: block;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -.04em;
  line-height: 1;
}

.page-fusion main .stat span {
  display: block;
  font-size: 13.5px;
  color: var(--cream-mute);
  margin-top: 9px;
}

/* ----- ÉTAPES (rendu exclusivement par includes/etapes.php) -----
   Numéro "01", "02"... généré par compteur CSS, jamais par PHP. */
.page-fusion main .mq-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: 44px;
  counter-reset: mq-step;
}

@media (max-width: 860px) {
  .page-fusion main .mq-steps {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .mq-step {
  position: relative;
  padding-top: 52px;
}

.page-fusion main .mq-step::before {
  counter-increment: mq-step;
  content: counter(mq-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 6px 13px;
}

.page-fusion main .mq-step::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 66px;
  right: -14px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), transparent);
}

.page-fusion main .mq-steps .mq-step:last-child::after {
  display: none;
}

@media (max-width: 860px) {
  .page-fusion main .mq-step::after {
    display: none;
  }
}

.page-fusion main .mq-step h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.page-fusion main .mq-step p {
  font-size: 16px;
  margin: 0;
}

/* ----- COMPRIS / EN OPTION / ENCART DE PRIX ----- */
.page-fusion main .inclus {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 3.6vw, 56px);
  align-items: start;
  margin-top: 38px;
}

@media (max-width: 900px) {
  .page-fusion main .inclus {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .inclus-duo {
  display: grid;
  gap: 26px;
}

.page-fusion main .inclus-liste {
  columns: 2;
  column-gap: 34px;
}

@media (max-width: 640px) {
  .page-fusion main .inclus-liste {
    columns: 1;
  }
}

.page-fusion main .inclus-liste li {
  break-inside: avoid;
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
}

.page-fusion main .inclus-liste li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 11px;
  font-size: 11px;
  color: var(--gold);
}

.page-fusion main .inclus-liste li b {
  color: var(--cream);
  font-weight: 600;
}

.page-fusion main .opt-titre {
  margin-top: 6px;
}

.page-fusion main .opt-liste li::before {
  color: var(--cream-mute) !important;
}

.page-fusion main .opt-liste li b {
  color: var(--cream-soft) !important;
}

.page-fusion main .opt-note {
  font-size: 14.5px;
  color: var(--cream-mute);
  margin: 10px 0 0;
}

.page-fusion main .opt-note a {
  color: var(--gold);
}

.page-fusion main .legal-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  background: rgba(255, 255, 255, .015);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  margin-top: 30px;
}

.page-fusion main .legal-note p {
  margin: 0;
  font-size: 14.5px;
  color: var(--cream-mute);
}

.page-fusion main .legal-note b {
  color: var(--cream-soft);
  font-weight: 600;
}

.page-fusion main .prix-encart {
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 0% 0%, rgba(212, 175, 55, .10), transparent 60%), var(--surface);
  padding: clamp(24px, 3vw, 34px);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.page-fusion main .prix-encart .num {
  font-size: clamp(44px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--gold);
  line-height: .9;
}

.page-fusion main .prix-encart .num small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-top: 10px;
}

.page-fusion main .prix-encart .num .ttc {
  font-size: 14px;
  letter-spacing: .02em;
  margin-top: 6px;
}

.page-fusion main .prix-encart ul {
  margin: 22px 0 0;
  border-top: 1px solid var(--line);
}

.page-fusion main .prix-encart li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}

.page-fusion main .prix-encart li span:last-child {
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.page-fusion main .prix-encart li .ttc {
  font-size: 12px;
}

.page-fusion main .prix-encart .mq-btn {
  margin-top: 22px;
}

/* ----- TICKS (liste "Ce que vous recevez") ----- */
.page-fusion main .ticks li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
}

.page-fusion main .ticks li:last-child {
  border-bottom: 0;
}

.page-fusion main .ticks li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--gold);
  font-size: 12px;
}

.page-fusion main .ticks li b {
  color: var(--cream);
  font-weight: 600;
}

/* ----- LES TABLES, vendues une par une ----- */
.page-fusion main .sells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: 40px;
}

@media (max-width: 980px) {
  .page-fusion main .sells {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .page-fusion main .sells {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .sell {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(170deg, var(--surface), rgba(20, 17, 11, .55));
  display: flex;
  flex-direction: column;
  transition: border-color .25s, transform .25s var(--ease);
}

.page-fusion main .sell:hover {
  border-color: var(--line-gold);
  transform: translateY(-4px);
}

.page-fusion main .sell-img {
  position: relative;
}

.page-fusion main .sell-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  opacity: .88;
}

.page-fusion main .sell-img .cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(10, 8, 5, .78);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.page-fusion main .sell-body {
  padding: clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.page-fusion main .sell h3 {
  font-size: 23px;
  margin-bottom: 4px;
}

.page-fusion main .sell h3 a {
  color: inherit;
  text-decoration: none;
}

.page-fusion main .sell h3 a:hover {
  color: var(--gold-light);
}

.page-fusion main .sell .promise {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--gold-light);
  margin: 0 0 12px;
}

.page-fusion main .sell p {
  font-size: 15.5px;
  color: var(--cream-soft);
  margin: 0 0 16px;
}

.page-fusion main .sell .pour {
  font-size: 14.5px;
  color: var(--cream-mute);
  margin: 0 0 18px;
}

.page-fusion main .sell .pour b {
  color: var(--cream-soft);
  font-weight: 600;
}

.page-fusion main .sell-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-fusion main .sell-foot .prix {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--gold);
}

.page-fusion main .sell-foot .prix span {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--cream-mute);
}

.page-fusion main .sell-foot .prix .ttc {
  font-size: 12.5px;
}

.page-fusion main .sell-foot a {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
}

.page-fusion main .sell-foot a:hover {
  color: var(--gold);
}

.page-fusion main .sell--large {
  grid-column: span 2;
  flex-direction: row;
}

.page-fusion main .sell--large .sell-img {
  flex: 0 0 46%;
}

.page-fusion main .sell--large .sell-img img {
  height: 100%;
  aspect-ratio: auto;
}

.page-fusion main .sell--large .sell-body {
  justify-content: center;
}

.page-fusion main .sell--large h3 {
  font-size: 29px;
}

.page-fusion main .sell--large .promise {
  font-size: 27px;
}

@media (max-width: 980px) {
  .page-fusion main .sell--large {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .page-fusion main .sell--large {
    flex-direction: column;
  }

  .page-fusion main .sell--large .sell-img {
    flex: none;
  }

  .page-fusion main .sell--large .sell-img img {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 640px) {
  .page-fusion main .sell--large {
    grid-column: span 1;
  }
}

.page-fusion main .sells-more {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* ----- LES JEUX, en bande horizontale (variante compacte) ----- */
.page-fusion main .games {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

@media (max-width: 980px) {
  .page-fusion main .games {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .page-fusion main .games {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .game {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
  display: block;
  transition: border-color .25s, transform .25s var(--ease);
}

.page-fusion main .game:hover {
  border-color: var(--line-gold);
  transform: translateY(-4px);
}

.page-fusion main .game img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  opacity: .86;
}

.page-fusion main .game-txt {
  padding: 15px 16px 18px;
}

.page-fusion main .game-txt h3 {
  font-size: 17.5px;
  margin-bottom: 5px;
}

.page-fusion main .game-txt p {
  font-size: 13.5px;
  color: var(--cream-mute);
  margin: 0;
}

/* ----- POUR QUI / OCCASIONS (accueil : deux colonnes) ----- */
.page-fusion main .occas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
  margin-top: 38px;
}

@media (max-width: 900px) {
  .page-fusion main .occas {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .occas-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}

.page-fusion main .occas-col .pip {
  font-size: 22px;
  color: var(--gold);
}

/* h2 sur l'accueil (correction A2 : deux H2 distincts), h3 dans la maquette */
.page-fusion main .occas-col :is(h2, h3) {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 8px 0 12px;
}

.page-fusion main .occas-col > p {
  color: var(--cream-soft);
  font-size: 16px;
}

.page-fusion main .occas-list {
  list-style: none;
  margin: 14px 0 22px;
  padding: 0;
}

.page-fusion main .occas-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--cream-mute);
}

.page-fusion main .occas-list li b {
  display: block;
  color: var(--cream);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 3px;
}

.page-fusion main .occas-liens {
  margin-top: auto;
  font-size: 14.5px;
  color: var(--cream-mute);
}

.page-fusion main .occas-liens a {
  color: var(--gold);
}

/* ----- OCCASIONS (page particuliers : grille de cartes génériques) ----- */
.page-fusion main .occas-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 34px;
}

@media (max-width: 980px) {
  .page-fusion main .occas-liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .page-fusion main .occas-liste {
    grid-template-columns: 1fr;
  }
}

/* ----- CARTE GÉNÉRIQUE ----- */
.page-fusion main .card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, var(--surface), rgba(20, 17, 11, .5));
  padding: clamp(20px, 2.2vw, 28px);
  transition: border-color .25s, transform .25s var(--ease);
}

.page-fusion main .card:hover {
  border-color: var(--line-gold);
  transform: translateY(-3px);
}

.page-fusion main .card h3 {
  font-size: 20px;
  margin: 9px 0 8px;
}

.page-fusion main .card p {
  font-size: 15.5px;
  margin: 0;
  color: var(--cream-soft);
}

.page-fusion main .card a {
  color: var(--gold);
}

/* ----- PREUVE / AVIS -----
   .proof (grille de 3 avis tronqués) n'est pas utilisée par l'avis de
   l'accueil, qui garde le carrousel de production (contrat 3.1.4.1) ;
   elle reste disponible si un pilier en a besoin. .avis-grid est la
   grille "moins de 4 avis" prévue par le contrat 3.5. .quote sert aussi
   de citation isolée (blockquote) hors section avis. */
.page-fusion main .proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

@media (max-width: 920px) {
  .page-fusion main .proof {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .proof-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 26px;
  align-items: center;
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--cream-mute);
}

.page-fusion main .proof-more a {
  color: var(--gold);
}

.page-fusion main .avis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 34px;
}

@media (max-width: 760px) {
  .page-fusion main .avis-grid {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .quote {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}

.page-fusion main .quote p {
  font-size: 15.5px;
  color: var(--cream-soft);
  flex: 1;
  font-style: normal;
}

.page-fusion main .quote-stars {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.page-fusion main .quote footer {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.page-fusion main .quote .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.page-fusion main .quote .who {
  font-size: 14.5px;
  color: var(--cream);
  font-weight: 600;
}

.page-fusion main .quote .src {
  font-size: 12.5px;
  color: var(--cream-mute);
}

.page-fusion main .groupe-note {
  font-size: 14.5px;
  color: var(--cream-mute);
  margin-top: 22px;
}

.page-fusion main .groupe-note a {
  color: var(--gold);
}

/* ----- RÉALISATIONS (grille V2) ----- */
.page-fusion main .works2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 34px;
}

@media (max-width: 900px) {
  .page-fusion main .works2 {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .work2 {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s;
}

.page-fusion main .work2:hover {
  border-color: var(--line-gold);
}

.page-fusion main .work2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.page-fusion main .work2-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.page-fusion main .work2-body .tag {
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-fusion main .work2-body h3 {
  font-size: 19px;
  margin: 0;
}

.page-fusion main .work2-body p {
  font-size: 15px;
  color: var(--cream-mute);
  margin: 0;
}

.page-fusion main .work2-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.page-fusion main .work2-chiffres span {
  font-size: 12.5px;
  border: 1px solid var(--line-gold);
  color: var(--cream-soft);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ----- BUDGET (rendu exclusivement par includes/budget-table.php) ----- */
.page-fusion main .mq-budget-wrap {
  overflow-x: auto;
}

.page-fusion main .mq-budget {
  width: 100%;
  border-collapse: collapse;
  margin-top: 26px;
  font-size: 16px;
}

.page-fusion main .mq-budget th,
.page-fusion main .mq-budget td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.page-fusion main .mq-budget thead th {
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--line-gold);
}

.page-fusion main .mq-budget tbody tr:hover {
  background: rgba(255, 255, 255, .02);
}

.page-fusion main .mq-budget tbody th {
  color: var(--cream-soft);
  font-weight: 400;
}

.page-fusion main .mq-budget td:last-child {
  color: var(--cream);
}

/* Montant principal en gras, équivalent HT ou TTC dessous (révision du 2026-09-17 :
   trois colonnes au lieu de quatre, pour tenir à 390 px sans défilement). */
.page-fusion main .mq-budget-main {
  display: block;
  font-weight: 600;
  white-space: nowrap;
}

.page-fusion main .mq-budget-sub {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--cream-mute);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .page-fusion main .mq-budget {
    font-size: 15px;
  }

  .page-fusion main .mq-budget th,
  .page-fusion main .mq-budget td {
    padding: 12px 8px;
  }

  .page-fusion main .mq-budget th:first-child,
  .page-fusion main .mq-budget td:first-child {
    padding-left: 0;
  }

  .page-fusion main .mq-budget thead th {
    font-size: 11px;
    letter-spacing: .1em;
  }
}

.page-fusion main .mq-budget-note {
  font-size: 14.5px;
  color: var(--cream-mute);
  margin-top: 14px;
}

/* ----- FAQ : mise en page uniquement (l'accordéon reste .faq-item, production) ----- */
.page-fusion main .faq-layout {
  display: grid;
  gap: 30px 80px;
}

.page-fusion main .faq-intro .lede {
  margin-top: 14px;
}

.page-fusion main .faq-cta {
  margin-top: 22px;
}

@media (min-width: 1000px) {
  .page-fusion main .faq-layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .page-fusion main .faq-intro {
    position: sticky;
    top: calc(var(--header-height) + 24px);
  }
}

/* ----- BLOG (grille de 3 articles) ----- */
.page-fusion main .blog3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 34px;
}

@media (max-width: 900px) {
  .page-fusion main .blog3 {
    grid-template-columns: 1fr;
  }
}

.page-fusion main .post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-fusion main .post img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.page-fusion main .post-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.page-fusion main .post-body .tag {
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-fusion main .post-body h3 {
  font-size: 18px;
  margin: 0;
  line-height: 1.3;
}

.page-fusion main .post-body h3 a {
  color: var(--cream);
  text-decoration: none;
}

.page-fusion main .post-body h3 a:hover {
  color: var(--gold-light);
}

.page-fusion main .post-body p {
  font-size: 14.5px;
  color: var(--cream-mute);
  margin: 0;
}

.page-fusion main .post-body .temps {
  font-size: 13px;
  color: var(--cream-mute);
  margin-top: auto;
  padding-top: 8px;
}

/* ----- MAILLAGE (zones + annuaires) ----- */
.page-fusion main .mesh {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-fusion main .mesh a {
  font-size: 14px;
  text-decoration: none;
  color: var(--cream-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  transition: color .2s, border-color .2s;
}

.page-fusion main .mesh a:hover {
  color: var(--gold);
  border-color: var(--line-gold);
}

.page-fusion main .annu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.page-fusion main .annu span {
  font-size: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.page-fusion main .annu a {
  font-size: 13.5px;
  color: var(--cream-mute);
  text-decoration: none;
}

.page-fusion main .annu a:hover {
  color: var(--gold);
}

/* ----- BANDEAU "L'ESSENTIEL" (en bref, bas de page) ----- */
.page-fusion main .essentiel {
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 20px 24px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 30px 0 0;
}

.page-fusion main .essentiel p {
  margin: 0;
  font-size: 16px;
  color: var(--cream-soft);
}

.page-fusion main .essentiel b {
  color: var(--cream);
  font-weight: 600;
}

/* ----- LE LIEU (page particuliers uniquement) ----- */
.page-fusion main .lieu-bloc {
  margin-top: 30px;
}

.page-fusion main .lieu-bloc h3 {
  margin-bottom: 10px;
}

.page-fusion main .lieu-bloc p {
  font-size: 16px;
}

.page-fusion main .lieu-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  margin-top: 30px;
}

.page-fusion main .lieu-duo img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

@media (max-width: 880px) {
  .page-fusion main .lieu-duo {
    grid-template-columns: 1fr;
  }
}

/* ----- MENTION SOUS LES AVIS (contrat 5.2) -----
   Paragraphe <p class="reviews-mention"> placé dans la section d'avis de
   production, juste avant .reviews-footnote. Ajouté par la session principale
   lors de la vérification de l'étape 1b (2026-09-17). */
.page-fusion main .reviews-mention {
  margin: var(--space-xl) auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--white-muted);
}
.page-fusion main .reviews-mention + .reviews-footnote {
  margin-top: var(--space-md);
}

/* ----- COMPOSANTS DE PRODUCTION DANS LES PAGES FUSION (vérification du 2026-09-17) -----
   Les sections de production gardées telles quelles (avis, réalisations, devis, articles,
   sections seo-* des piliers) héritent des titres en capitales de base.css : sur une page au
   design des maquettes, leurs titres suivent la casse des maquettes. Mise en page inchangée. */
.page-fusion main :is(h1, h2, h3):not([class*="-label"]) {
  text-transform: none;
}

/* Colonne d'information du devis : titre « Ce que vous recevez » détaché du bloc tarif,
   mention de gratuité alignée sur la liste */
.page-fusion main .devis-info .mid {
  margin: var(--space-xl) 0 var(--space-sm);
}

.page-fusion main .devis-info .devis-form-footnote {
  text-align: left;
}

/* Grille d'avis des piliers (moins de 4 avis) : texte intégral, sans la coupure à 6 lignes
   du carrousel (accueil.css), puisque la grille n'a pas de bouton « Lire la suite ». */
.page-fusion main .avis-grid .review-card-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Vignettes de tables sous l'en-tête de section (même respiration que .sells) */
.page-fusion main .sec-head + .games {
  margin-top: 40px;
}

/* Sous-titre qui suit directement un titre de section (blocs de texte des piliers) */
.page-fusion main .big + .mid {
  margin-top: clamp(24px, 3vw, 34px);
}

/* Réalisation seule dans la grille (page particuliers : une réalisation liée) : la carte
   garde la largeur d'une carte ordinaire au lieu de s'étirer sur toute la ligne, et reste
   centrée quel que soit le nombre de colonnes de la grille. */
.page-fusion main .realisations-grid > .carte-realisation:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 420px;
  justify-self: center;
}