/* ==========================================================================
   Jami's Events - feuille de style partagée
   Charte graphique validée : Bodoni Moda (titrage) + Archivo (texte courant)
   Palette adaptative clair/sombre (cf. charte graphique, page « 02 - Couleurs »)
   ========================================================================== */

@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-600i.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:url('../fonts/bodoni-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --paper:#FAF6EC; --paper-raised:#F1E9D8; --paper-clair:#FFFFFF; --ink:#1B1712; --ink-soft:#675E4E;
  --gold:#93732C; --gold-bright:#B78F3E; --hairline:rgba(27,23,18,.16);
  --band-bg:#14110C; --band-ink:#F3ECDD; --band-ink-soft:#B8A98A; --band-gold:#D8B25E;
  --shadow: 0 20px 60px rgba(20,17,12,.14);
  --font-display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body:'Archivo', Arial, Helvetica, sans-serif;
  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15120D; --paper-raised:#1F1A12; --paper-clair:#241E15; --ink:#F1E9D8; --ink-soft:#B4A688;
    --gold:#D8B25E; --gold-bright:#ECC978; --hairline:rgba(241,233,216,.16);
    --shadow: 0 20px 60px rgba(0,0,0,.45);
  }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* L'en-tete est en position:fixed (101 px une fois solidifie). Sans cette marge,
   une arrivee par ancre (#mariages, #celebrations...) depose le titre sous l'en-tete. */
:root{ --header-h:101px; }
[id]{ scroll-margin-top:calc(var(--header-h) + 18px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

/* Empêche un titre de casser sur plusieurs lignes, uniquement à partir d'une largeur d'écran
   où la place ne manque pas (jamais en dessous de 641px, pour ne pas faire déborder la page
   sur mobile - voir la même logique que le seuil mobile déjà utilisé ailleurs dans ce fichier). */
@media (min-width:641px){ .nowrap-desktop{ white-space:nowrap; } }
@media (min-width:960px){ .nowrap-wide{ white-space:nowrap; } }
/* Phrase longue de contact.html - testée empiriquement (Playwright) avant de figer le seuil. */
@media (min-width:1400px){ .nowrap-contact{ white-space:nowrap; max-width:none; } }
/* Titre d'accueil en capitales (« WAOUH ») : seuil mesuré empiriquement (coupure du .hero à 745px). */
@media (min-width:820px){ .nowrap-hero{ white-space:nowrap; } }
/* Sur petits écrans, un libellé de bouton long doit pouvoir revenir à la ligne plutôt que déborder. */

.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--band-bg); padding:10px 18px; z-index:1000; font-size:.85rem; letter-spacing:.04em; }
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Type scale ---------- */
.eyebrow{ font-family:var(--font-body); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); }
h1, .h1{ font-size:clamp(2.4rem, 3.4vw + 1.2rem, 4.6rem); letter-spacing:.001em; }
h2, .h2{ font-size:clamp(1.9rem, 1.6vw + 1.3rem, 2.7rem); }
h3, .h3{ font-size:clamp(1.15rem, .5vw + 1rem, 1.5rem); }
.lede{ font-size:clamp(1.05rem, .4vw + .95rem, 1.25rem); color:var(--ink-soft); max-width:46em; }
.italic-quote{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.2rem, 1vw + 1rem, 1.7rem); line-height:1.5; }
.small{ font-size:.88rem; }
.muted{ color:var(--ink-soft); }
.gold{ color:var(--gold); }

/* ---------- Buttons & links ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.95em 1.7em; font-family:var(--font-body); font-weight:700; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; white-space:nowrap; }
.btn-primary{ background:var(--gold); color:var(--band-bg); }
.btn-primary:hover{ background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 24px rgba(147,115,44,.28); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--gold); }
.btn-outline:hover{ border-color:var(--gold-bright); background:var(--paper-raised); color:var(--gold); transform:translateY(-2px); }
.btn-on-dark{ background:transparent; color:var(--band-ink); border-color:rgba(243,236,221,.5); }
.btn-on-dark:hover{ border-color:var(--band-gold); color:var(--band-gold); transform:translateY(-2px); }
.btn-sm{ padding:.7em 1.3em; font-size:.74rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }
/* Sur petits écrans, un libellé de bouton long doit revenir à la ligne plutôt
   que déborder. Placé APRÈS .btn : à spécificité égale, c'est l'ordre qui tranche. */
@media (max-width:640px){ .btn{ white-space:normal; text-align:center; max-width:100%; } }
/* Libellé volontairement descriptif (SEO) : sur mobile il tient en 2 lignes
   plutôt qu'en 3, sans toucher aux autres boutons. */
@media (max-width:640px){ .btn.btn-long{ font-size:.76rem; padding:.8em 1.1em; letter-spacing:.06em; } }

.link-underline{ position:relative; text-decoration:none; }
.link-underline::after{ content:''; position:absolute; left:0; right:0; bottom:-.15em; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Header ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:200; padding:22px 0; transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; }
.site-header .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header .brand{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-decoration:none; letter-spacing:.01em; color:var(--band-ink); transition:color .3s; }
.site-header:not(.is-solid) .brand{ color:#fff; }
.site-header.is-solid{ padding:14px 0; background:var(--paper); box-shadow:var(--shadow); border-bottom-color:var(--hairline); }
.site-header.is-solid .brand{ color:var(--ink); }
.site-header.no-hero{ background:var(--paper); border-bottom-color:var(--hairline); padding:14px 0; }
.site-header.no-hero .brand{ color:var(--ink); }

/* Logo au-dessus du texte de la marque (en-tête + pied de page) */
.brand{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.brand-logo{ height:100px; width:auto; display:block; transition:height .35s var(--ease); }
.site-header.is-solid .brand-logo{ height:72px; }
.footer-brand .brand-logo{ height:100px; }

.main-nav{ display:flex; align-items:center; gap:34px; }
/* Six entrées de menu : on resserre progressivement plutôt que de laisser un libellé
   passer à la ligne (mesuré entre 1024 et 1440 px). */
@media (min-width:1100px) and (max-width:1300px){ .main-nav{ gap:20px; } .main-nav a, .nav-group-btn{ font-size:.76rem; letter-spacing:.05em; } }
@media (min-width:1100px){ .main-nav a{ white-space:nowrap; } }

/* ---------- Groupe de menu déroulant (Astuces & lieux) ----------
   Le parent est un <button> : il ouvre la liste, il ne mène à aucune page. */
.nav-group{ position:relative; display:flex; align-items:center; }
.nav-group-btn{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--band-ink-soft); transition:color .3s; white-space:nowrap;
}
.site-header.is-solid .nav-group-btn, .site-header.no-hero .nav-group-btn{ color:var(--ink-soft); }
.nav-group-btn:hover, .nav-group.is-current > .nav-group-btn, .nav-group-btn[aria-expanded="true"]{ color:var(--band-gold); }
.site-header.is-solid .nav-group-btn:hover, .site-header.is-solid .nav-group.is-current > .nav-group-btn,
.site-header.is-solid .nav-group-btn[aria-expanded="true"],
.site-header.no-hero .nav-group-btn:hover, .site-header.no-hero .nav-group.is-current > .nav-group-btn,
.site-header.no-hero .nav-group-btn[aria-expanded="true"]{ color:var(--gold); }
.nav-caret{ transition:transform .3s; flex:none; }
.nav-group-btn[aria-expanded="true"] .nav-caret{ transform:rotate(180deg); }

@media (min-width:1100px){
  .nav-submenu{
    position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
    margin:0; padding:10px 0; list-style:none; min-width:246px;
    background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius);
    box-shadow:0 18px 44px rgba(28,24,18,.16);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, transform .22s, visibility .22s;
    z-index:120;
  }
  .nav-submenu::before{ content:''; position:absolute; left:0; right:0; top:-8px; height:8px; }
  .nav-group:hover > .nav-submenu,
  .nav-group:focus-within > .nav-submenu,
  .nav-group.is-open > .nav-submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
  .nav-submenu a{
    display:block; padding:9px 20px; font-size:.78rem; letter-spacing:.05em;
    color:var(--ink-soft) !important; white-space:nowrap;
  }
  .nav-submenu a:hover, .nav-submenu a[aria-current="page"]{ color:var(--gold) !important; background:var(--paper-raised); }
}
.main-nav a{ text-decoration:none; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--band-ink-soft); transition:color .3s; }
.site-header.is-solid .main-nav a, .site-header.no-hero .main-nav a{ color:var(--ink-soft); }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--band-gold); }
.site-header.is-solid .main-nav a:hover, .site-header.is-solid .main-nav a[aria-current="page"],
.site-header.no-hero .main-nav a:hover, .site-header.no-hero .main-nav a[aria-current="page"]{ color:var(--gold); }
.main-nav .btn{ margin-left:6px; }
.main-nav .btn[aria-current="page"]{ box-shadow:0 0 0 2px var(--band-gold) inset; }
.site-header.is-solid .main-nav .btn[aria-current="page"], .site-header.no-hero .main-nav .btn[aria-current="page"]{ box-shadow:0 0 0 2px var(--gold) inset; }
/* Le bouton "Devis en ligne" est aussi un <a>, donc la règle générique de couleur des
   liens de nav (ci-dessus) le percutait et remplaçait son texte foncé par un texte
   doré clair - illisible sur son propre fond doré. On force ici la couleur de texte
   correcte du bouton EN PERMANENCE (pas seulement sur sa propre page), avec une
   spécificité supérieure à cette règle générique. */
.main-nav a.btn{ color:var(--band-bg); }
.site-header.is-solid .main-nav a.btn, .site-header.no-hero .main-nav a.btn{ color:var(--band-bg); }

.nav-toggle{ display:none; width:48px; height:48px; border:1px solid rgba(243,236,221,.35); background:transparent; border-radius:50%; position:relative; cursor:pointer; }
.site-header.is-solid .nav-toggle, .site-header.no-hero .nav-toggle{ border-color:var(--hairline); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:11px; right:11px; height:1.5px; background:#fff; transition:transform .3s, opacity .3s, background .3s; }
.site-header.is-solid .nav-toggle span, .site-header.is-solid .nav-toggle span::before, .site-header.is-solid .nav-toggle span::after,
.site-header.no-hero .nav-toggle span, .site-header.no-hero .nav-toggle span::before, .site-header.no-hero .nav-toggle span::after{ background:var(--ink); }
.nav-toggle span{ top:50%; transform:translateY(-50%); }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); background:#fff; }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); background:#fff; }

@media (max-width:1099px){
  .main-nav{ position:fixed; inset:0; top:0; background:var(--band-bg); flex-direction:column; justify-content:center; gap:30px; transform:translateY(-100%); transition:transform .5s var(--ease); }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav a{ font-size:1.1rem; color:var(--band-ink); }
  .main-nav .btn{ margin-left:0; margin-top:10px; }
  .nav-toggle{ display:block; z-index:210; }
  .site-header.is-solid .nav-toggle span, .site-header.is-solid .nav-toggle span::before, .site-header.is-solid .nav-toggle span::after{ background: var(--ink); }
  .nav-toggle[aria-expanded="true"]{ position:relative; }
  .nav-toggle[aria-expanded="true"] span::before, .nav-toggle[aria-expanded="true"] span::after{ background:var(--band-ink); }

  /* Sur mobile le menu est déjà une colonne : le groupe se déplie sur place. */
  .main-nav{ gap:17px; overflow-y:auto; padding:80px 24px 28px; justify-content:flex-start; }
  .nav-group{ flex-direction:column; align-items:center; width:100%; }
  .nav-group-btn{ font-size:1.1rem; color:var(--band-ink); }
  .nav-group-btn:hover, .nav-group.is-current > .nav-group-btn, .nav-group-btn[aria-expanded="true"]{ color:var(--band-gold); }
  .nav-submenu{
    list-style:none; margin:0; padding:0; width:100%; max-width:320px;
    display:grid; gap:0; overflow:hidden; max-height:0; transition:max-height .35s var(--ease), margin .35s var(--ease);
  }
  .nav-group.is-open > .nav-submenu{ max-height:340px; margin-top:12px; }
  .nav-submenu li + li{ border-top:1px solid rgba(243,236,221,.14); }
  .main-nav .nav-submenu a{
    display:block; padding:10px 6px; font-size:.9rem; text-transform:none; letter-spacing:.02em;
    color:var(--band-ink-soft); text-align:center;
  }
  .main-nav .nav-submenu a[aria-current="page"]{ color:var(--band-gold); }
}

/* ---------- Hero (bandeau signature marbré) ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; color:var(--band-ink);
  /* Repli de sécurité : si les couches de dégradé ci-dessous ne pouvaient pas être
     interprétées par un moteur de rendu (ex. certains générateurs de PDF), ce fond
     uni reste appliqué et le texte clair garde un contraste correct. */
  background-color:var(--band-bg);
  background:
    radial-gradient(ellipse 60% 50% at 16% 18%, rgba(216,178,94,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 86% 82%, rgba(216,178,94,.11), transparent 58%),
    repeating-linear-gradient(128deg, rgba(243,236,221,.045) 0px, rgba(243,236,221,.045) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(38deg, rgba(216,178,94,.045) 0px, rgba(216,178,94,.045) 1px, transparent 1px, transparent 13px),
    var(--band-bg);
  overflow:hidden;
}
.hero::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.35), transparent 70%); pointer-events:none; }
.hero .container{ position:relative; z-index:2; padding-top:110px; padding-bottom:70px; }
.hero .eyebrow{ color:var(--band-gold); }
.hero h1{ color:#fff; margin-top:14px; }
.hero .lede{ color:var(--band-ink-soft); margin-top:22px; }
.hero .rule{ width:64px; height:1px; background:var(--band-gold); margin:26px 0; opacity:.8; }
.hero .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.hero .container > *{ opacity:0; animation:heroIn 1s var(--ease) forwards; }
.hero .eyebrow{ animation-delay:.15s; }
.hero h1{ animation-delay:.3s; }
.hero .rule{ animation-delay:.5s; }
.hero .lede{ animation-delay:.6s; }
.hero .hero-actions{ animation-delay:.75s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .hero .container > *{ animation:none; opacity:1; } }
.hero-scroll{ position:absolute; left:50%; bottom:38px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--band-ink-soft); font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; z-index:2; }
.hero-scroll .line{ width:1px; height:38px; background:linear-gradient(var(--band-gold), transparent); animation:scrollpulse 2.2s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* L'indicateur « Découvrir » est en position absolue, calé en bas du hero.
   Sur un hero de sous-page (52vh) il retombait systématiquement sur les boutons,
   et sur un écran court il faisait de même sur l'accueil. Il n'a de sens que
   sur un hero plein écran suffisamment haut. */
.hero.hero-sub .hero-scroll{ display:none; }
@media (max-height:760px){ .hero-scroll{ display:none; } }
.hero.hero-sub{ min-height:52vh; }
.hero.hero-sub .container{ padding-top:130px; padding-bottom:60px; }

/* subtle canvas shimmer layer sits behind content, above background */
.hero canvas.shimmer{ position:absolute; inset:0; z-index:1; opacity:.55; pointer-events:none; }

/* ---------- Sections & layout helpers ---------- */
section{ position:relative; }
.section{ padding:24px 0; }
.section-tight{ padding:64px 0; }
@media (max-width:640px){ .section{ padding:72px 0; } .section-tight{ padding:48px 0; } }
.section-head{ max-width:none; margin-bottom:54px; }
/* Le titre peut occuper toute la colonne (il est dimensionné pour tenir sur une
   ligne) ; c'est le chapeau qui garde une longueur de ligne lisible. */
.section-head > .lede{ max-width:46em; }
.section-head.center > .lede{ margin-left:auto; margin-right:auto; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:14px; }
.section-head h2{ margin-bottom:16px; }

.raised{ background:var(--paper-raised); }
/* Partie 1 de la page « Astuces & lieux » : fond plus clair que le corps de page,
   pour qu'elle se lise comme un bloc à part avant le bandeau noir de la partie 2. */
.partie-claire{ background:var(--paper-clair); }
.partie-claire + .partie-claire{ padding-top:0; }
/* Chapeau de section occupant toute la largeur de la colonne. */
.section-head.pleine-largeur{ max-width:none; }
.lede-large{ max-width:none; }
.band-section{ background-color:var(--band-bg); background:var(--band-bg); color:var(--band-ink); }
.band-section .eyebrow{ color:var(--band-gold); }
.band-section .muted{ color:var(--band-ink-soft); }

.grid{ display:grid; gap:40px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

hr.hairline{ border:none; border-top:1px solid var(--hairline); margin:0; }

/* ---------- Reveal on scroll ----------
   Scopé à .js (classe posée par un script inline dans <head>, avant peinture)
   pour que tout le contenu reste visible par défaut si JavaScript est
   indisponible - dégradation progressive plutôt que contenu invisible. */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.js .reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
/* Filet de sécurité : classe posée par le script inline du <head> si main.js ne s'exécute pas.
   Les contenus animés restent alors visibles (jamais de page vide si le JavaScript échoue). */
html.js-failed .reveal,
html.js-failed .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.55s; }

/* ---------- Cards ---------- */
.card{ background:var(--paper); border:1px solid var(--hairline); padding:34px 30px; border-radius:var(--radius); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card .num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); margin-bottom:14px; display:block; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:.95rem; }

.pillar{ text-align:left; }
.pillar .icon{ width:46px; height:46px; margin-bottom:20px; }

/* offer / service line item (reprend le registre du catalogue) */
.offer{ border-top:1px solid var(--hairline); padding:26px 0; }
.offer:last-child{ border-bottom:1px solid var(--hairline); }
.offer .row{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; }
.offer .name{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; }
.offer .price{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--gold); }
.offer .tag{ font-family:var(--font-body); font-style:italic; font-size:.85rem; color:var(--gold); margin-top:4px; }
.offer .desc{ font-size:.95rem; color:var(--ink-soft); margin-top:8px; max-width:64ch; }
.offer .inc{ font-size:.84rem; color:var(--ink-soft); margin-top:8px; }
.offer .inc b{ color:var(--ink); }

/* testimonial */
.testimonial{ background:var(--paper); border:1px solid var(--hairline); padding:32px 28px; position:relative; display:flex; flex-direction:column; gap:18px; }
.testimonial .badge-example{ position:absolute; top:16px; right:16px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--band-bg); background:var(--gold); padding:4px 10px; border-radius:20px; }
.testimonial .quote{ font-family:var(--font-display); font-style:italic; font-size:1.12rem; line-height:1.55; }
.testimonial .who{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.testimonial .avatar{ width:44px; height:44px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--gold); font-weight:600; flex-shrink:0; }
.testimonial .who .name{ font-weight:700; font-size:.92rem; }
.testimonial .who .meta{ font-size:.78rem; color:var(--ink-soft); }
.testimonial-note{ font-size:.85rem; color:var(--ink-soft); background:var(--paper-raised); padding:16px 20px; border-left:2px solid var(--gold); margin-bottom:44px; }

/* ---------- Avis Google ---------- */
.note-google{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:var(--paper-raised);
  border-left:2px solid var(--gold); padding:24px 28px; }
.note-google p{ flex:1 1 320px; font-size:.92rem; color:var(--ink-soft); line-height:1.7; margin:0; }
.note-google-score{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto; min-width:132px; }
.note-google-score .etoiles-grandes{ color:var(--gold); letter-spacing:.2em; font-size:1.5rem; line-height:1; }
.note-google-score .score-lien{ font-size:.78rem; font-weight:600; color:var(--ink-soft); text-align:center;
  line-height:1.5; margin-top:10px; padding:4px 0; text-decoration:none; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s; }
.note-google-score .score-lien:hover{ color:var(--gold); border-bottom-color:var(--gold); }

.avis-lien{ display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:600; letter-spacing:.03em;
  color:var(--ink-soft); text-decoration:none; transition:color .3s; }
.avis-lien:hover{ color:var(--gold); }

/* ---------- Confort tactile (cibles isolées >= 24 px) ----------
   Le remplissage vertical agrandit la zone cliquable sans déplacer le texte :
   sur un lien en ligne, le padding déborde de la ligne sans la pousser. */
.avis-lien{ padding:4px 0; }
.footer-social a{ padding:5px; margin:-5px; }
.footer-bottom-links a{ padding:4px 0; }
.footer-legal-line a{ padding:5px 0; }
p > a.link-underline:only-child{ padding:5px 0; }
.fil-ariane a{ padding:5px 0; }
.avis-lien .g-mark{ flex:none; }

.avis-brefs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; margin:0; padding:0; }
.avis-bref{ list-style:none; padding:22px 24px; border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
.avis-bref .quote-bref{ font-family:var(--font-display); font-style:italic; font-size:1.02rem; line-height:1.5; }
.avis-bref .who-bref{ font-size:.78rem; color:var(--ink-soft); margin-top:10px; }
.avis-bref .who-bref b{ color:var(--ink); }
.avis-bref .avis-lien{ margin-top:10px; }
@media (max-width:640px){
  .avis-bref{ border-left:0; padding:20px 0; }
  .note-google{ padding:22px 20px; gap:20px; }
}

/* network / partner card ("équipe" honnête) */
.network-card{ display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-top:1px solid var(--hairline); }
.network-card:last-child{ border-bottom:1px solid var(--hairline); }
.network-card .glyph{ width:48px; height:48px; border-radius:50%; background:var(--paper-raised); border:1px dashed var(--hairline); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--gold); font-size:1.2rem; flex-shrink:0; overflow:hidden; position:relative; }
.network-card .glyph::before{ content:''; position:absolute; inset:0; background:
   repeating-linear-gradient(128deg, rgba(147,115,44,.07) 0px, rgba(147,115,44,.07) 1px, transparent 1px, transparent 6px); }
.network-card .glyph img, .network-card .glyph > span{ position:relative; z-index:1; }
.network-card h3{ font-size:1.05rem; margin-bottom:4px; }
.network-card p{ color:var(--ink-soft); font-size:.92rem; }

/* photo placeholder */
.photo-slot{ aspect-ratio:4/5; background:linear-gradient(155deg, var(--paper-raised), var(--paper)); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; position:relative; overflow:hidden; min-width:0; }
.photo-slot picture{ display:block; width:100%; height:100%; }
.photo-slot img{ min-width:0; width:100%; height:100%; object-fit:cover; }
.photo-slot::before{ content:''; position:absolute; inset:0; background:
   repeating-linear-gradient(128deg, rgba(147,115,44,.05) 0px, rgba(147,115,44,.05) 1px, transparent 1px, transparent 10px); }
.photo-slot .monogram{ font-family:var(--font-display); font-size:3.4rem; color:var(--gold); position:relative; z-index:1; }
.photo-slot .cap{ position:relative; z-index:1; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-top:14px; }
.photo-slot.wide{ aspect-ratio:16/10; }
/* Illustration pleine largeur des pages « Astuces » : le cadre épouse le
   format réel de la photo (aspect-ratio posé en ligne), donc ni bande vide
   ni recadrage destructeur. */
.photo-slot.illu{ padding:0; }
.photo-slot.illu::before{ display:none; }
.photo-slot.compact-65{ width:65%; justify-self:center; }
.offer .photo-slot{ aspect-ratio:2/1; padding:16px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px; }
.field .hint{ font-size:.78rem; color:var(--ink-soft); margin-top:6px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field input[type=number], .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--hairline); background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:.96rem; border-radius:var(--radius); transition:border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(147,115,44,.14); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.choice{ position:relative; display:flex; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice .choice-card{ display:flex; align-items:center; justify-content:center; width:100%; border:1px solid var(--hairline); padding:16px 14px; text-align:center; border-radius:var(--radius); font-size:.88rem; font-weight:600; line-height:1.35; transition:border-color .3s, background .3s, color .3s; }
.choice input:checked + .choice-card{ border-color:var(--gold); background:var(--paper-raised); color:var(--gold); }
.choice input:focus-visible + .choice-card{ outline:2px solid var(--gold); outline-offset:2px; }

.checkline{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--ink-soft); }
.checkline input{ width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--gold); cursor:pointer; }

.form-msg{ display:none; padding:16px 18px; border-radius:var(--radius); font-size:.9rem; margin-top:18px; }
.form-msg.success{ display:block; background:rgba(147,115,44,.12); color:var(--gold); border:1px solid rgba(147,115,44,.3); }
.form-msg.error{ display:block; background:rgba(180,60,40,.1); color:#b3402a; border:1px solid rgba(180,60,40,.3); }
@media (prefers-color-scheme: dark){ .form-msg.error{ color:#e2836c; } }

/* devis stepper */
.stepper{ display:flex; align-items:center; gap:8px; margin-bottom:48px; flex-wrap:wrap; }
.stepper .step{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--ink-soft); }
.stepper .step .dot{ width:28px; height:28px; border-radius:50%; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.85rem; transition:background .3s, border-color .3s, color .3s; }
.stepper .step.is-active .dot{ background:var(--gold); border-color:var(--gold); color:var(--band-bg); }
.stepper .step.is-done .dot{ background:transparent; border-color:var(--gold); color:var(--gold); }
.stepper .step.is-active{ color:var(--ink); font-weight:700; }
.stepper .sep{ width:24px; height:1px; background:var(--hairline); }
.devis-step{ display:none; }
.devis-step.is-active{ display:block; animation:fadein .5s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.devis-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:36px; gap:14px; flex-wrap:wrap; }
.devis-nav .btn{ white-space:normal; line-height:1.3; }
.devis-nav > span:empty{ display:none; }
@media (max-width:620px){
  .devis-nav{ flex-direction:column-reverse; align-items:stretch; gap:12px; }
  .devis-nav .btn{ width:100%; }
}
.recap-block{ background:var(--paper-raised); padding:16px 22px; }
.prefill-note{ background:var(--paper-raised); border-left:3px solid var(--gold); padding:14px 18px; margin-bottom:26px; font-size:.9rem; color:var(--ink-soft); }
.prefill-note b{ color:var(--ink); font-weight:600; }
.recap-block .rk{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.recap-block .rv{ margin-top:3px; font-weight:600; }

/* FAQ accordion */
.faq-item{ border-top:1px solid var(--hairline); }
.faq-item:last-child{ border-bottom:1px solid var(--hairline); }
.faq-item summary{ cursor:pointer; padding:22px 0; font-family:var(--font-display); font-size:1.05rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-family:var(--font-body); font-weight:300; font-size:1.4rem; color:var(--gold); transition:transform .35s var(--ease); flex-shrink:0; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .faq-a{ padding-bottom:24px; color:var(--ink-soft); max-width:64ch; font-size:.95rem; }

/* legal pages */
.legal-body h2{ font-size:1.3rem; margin-top:44px; margin-bottom:14px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--ink-soft); font-size:.96rem; margin-bottom:14px; }
.legal-body li{ list-style:disc; margin-left:1.3em; }
.legal-body strong{ color:var(--ink); }
.legal-updated{ font-size:.82rem; color:var(--ink-soft); margin-bottom:40px; }
.legal-toc{ background:var(--paper-raised); padding:22px 24px; margin-bottom:40px; }
.legal-toc a{ display:block; font-size:.9rem; padding:6px 0; text-decoration:none; color:var(--ink-soft); }
.legal-toc a:hover{ color:var(--gold); }
.legal-flag{ border:1px dashed var(--gold); background:rgba(147,115,44,.08); padding:16px 18px; font-size:.86rem; margin:18px 0; }
.legal-flag b{ color:var(--gold); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--band-bg); color:var(--band-ink); padding:80px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(243,236,221,.14); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:40px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--font-body); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--band-gold); margin-bottom:18px; }
.footer-brand .brand{ font-family:var(--font-display); font-size:1.5rem; color:var(--band-ink); }
.footer-brand .footer-tagline{ font-family:var(--font-display); font-style:italic; color:var(--band-gold); font-size:.95rem; margin-top:10px; }
.footer-brand p{ color:var(--band-ink-soft); font-size:.88rem; margin-top:14px; max-width:32ch; }
.footer-brand .footer-tagline + p{ margin-top:10px; }
.footer-grid a{ display:block; color:var(--band-ink-soft); text-decoration:none; font-size:.88rem; padding:5px 0; transition:color .3s; }
.footer-grid a:hover{ color:var(--band-gold); }
/* Sous-pages d'« Astuces & lieux » : décalées et allégées pour montrer la
   hiérarchie sans alourdir la colonne de navigation. */
.footer-grid a.footer-sous{ padding-left:14px; font-size:.82rem; position:relative; }
.footer-grid a.footer-sous::before{ content:''; position:absolute; left:0; top:50%; width:7px; height:1px; background:currentColor; opacity:.5; }
.footer-legal-line{ color:var(--band-ink-soft); font-size:.88rem; line-height:1.9; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:24px; font-size:.78rem; color:var(--band-ink-soft); }
.footer-bottom a{ color:var(--band-ink-soft); text-decoration:none; }
.footer-bottom a:hover{ color:var(--band-gold); }
.footer-bottom-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Cookie banner ---------- */
.cookie-banner{ position:fixed; left:20px; right:20px; bottom:20px; z-index:500; max-width:560px; margin:0 auto; background:var(--band-bg); color:var(--band-ink); padding:26px 28px; box-shadow:0 20px 50px rgba(0,0,0,.35); border:1px solid rgba(243,236,221,.14); transform:translateY(140%); transition:transform .6s var(--ease); }
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner p{ font-size:.86rem; color:var(--band-ink-soft); margin-bottom:18px; }
.cookie-banner a{ color:var(--band-gold); text-decoration:underline; }
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-banner .btn:focus-visible{ outline:2px solid var(--band-gold); outline-offset:3px; }
/* filet de securite : meme si un bouton du bandeau garde .btn-outline,
   il ne doit jamais retomber en texte sombre sur fond sombre */
.cookie-banner .btn-outline{ color:var(--band-ink); border-color:rgba(243,236,221,.5); }
.cookie-banner .btn-outline:hover{ background:rgba(243,236,221,.07); border-color:var(--band-gold); color:var(--band-gold); }
@media (max-width:420px){ .cookie-actions .btn{ flex:1 1 100%; } }

/* ---------- Misc ---------- */
/* ---------- Ouverture de chapitre (page Astuces & lieux) ----------
   Bandeau sombre pleine largeur : il coupe nettement la partie « guides »
   de la partie « ressources communes ». */
.chapitre{ padding:78px 0; margin:24px 0 0; }
.chapitre-inner{ max-width:760px; }
.chapitre-inner h2{ margin:14px 0 18px; }
.chapitre-inner .lede{ color:var(--band-ink-soft); }
.chapitre-badges{ margin-top:30px; }
.chapitre-badges .badge{
  border-color:rgba(243,236,221,.3); color:var(--band-ink); text-decoration:none; transition:border-color .3s, color .3s;
}
.chapitre-badges .badge:hover{ border-color:var(--band-gold); color:var(--band-gold); }
.badge-fort{ font-weight:700; border-color:var(--gold); color:var(--gold); }
@media (max-width:640px){ .chapitre{ padding:56px 0; } }

/* Titres à garder sur une seule ligne. Seuils mesurés avec Playwright sur le
   rendu réel : en dessous, le retour à la ligne est préférable au débordement. */
/* ---------- Titres sur une seule ligne ----------
   --k  : largeur du titre en cadratins, calculée à la génération à partir des
          métriques réelles de la fonte Bodoni Moda 600 ;
   --dispo : largeur utile de la colonne qui contient le titre.
   Le corps retenu est donc « largeur / k », borné par la taille nominale en
   haut et par 65 % de celle-ci en bas. Pas de white-space:nowrap : si le
   plancher est atteint, le titre revient à la ligne, jamais il ne déborde. */
.titre-ajuste{
  --fs-nom: clamp(1.9rem, 1.6vw + 1.3rem, 2.7rem);
  --dispo: min(1132px, calc(100vw - 48px));
  font-size: max(calc(var(--fs-nom) * .65), min(var(--fs-nom), calc((var(--dispo) - 3px) / var(--k))));
}
h1.titre-ajuste{ --fs-nom: clamp(2.4rem, 3.4vw + 1.2rem, 4.6rem); }
@media (max-width:640px){ .titre-ajuste{ --dispo: min(1132px, calc(100vw - 40px)); } }

.badge-list{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; padding:7px 14px; border:1px solid var(--hairline); color:var(--ink-soft); }
.stat{ text-align:left; }
.stat .n{ font-family:var(--font-display); font-size:2.4rem; color:var(--gold); }
.stat .l{ font-size:.82rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.divider-marble{ height:120px; background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(216,178,94,.10), transparent 60%),
    repeating-linear-gradient(128deg, rgba(243,236,221,.04) 0px, rgba(243,236,221,.04) 1px, transparent 1px, transparent 9px),
    var(--band-bg); }

.map-embed{ border:1px solid var(--hairline); filter:grayscale(.4) contrast(1.05); width:100%; aspect-ratio:16/9; }
@media (prefers-color-scheme: dark){ .map-embed{ filter:grayscale(.5) invert(.92) contrast(.9); } }

.skeleton-cal{ border:1px solid var(--hairline); background:var(--paper-raised); padding:40px 30px; text-align:center; }
.skeleton-cal .icon{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold); margin-bottom:16px; }

::selection{ background:var(--gold); color:var(--band-bg); }

/* ---------- Page guide « Astuces & lieux » ---------- */
.fil-ariane{ font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:18px; }
.fil-ariane a{ text-decoration:none; border-bottom:1px solid transparent; }
.fil-ariane a:hover{ border-bottom-color:currentColor; }
.fil-ariane span[aria-current]{ color:var(--ink); }
.check-list li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-soft); }
.check-list li::before{ content:''; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--gold); }
/* Lien sortant vers le site officiel d'un lieu : le domaine est visible, l'icône
   signale l'ouverture dans un nouvel onglet. */
.lieu-lien{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:.84rem; font-weight:600; color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(147,115,44,.32); padding-bottom:2px; transition:border-color .3s, color .3s;
}
.lieu-lien span{ text-decoration:none; }
.lieu-lien:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-bright); }
.lieu-card{ display:flex; flex-direction:column; }
.lieu-card .eyebrow{ color:var(--gold); }
.callout-box{ background:var(--paper-raised); border-left:2px solid var(--gold); padding:20px 24px; font-size:.95rem; color:var(--ink-soft); }
.callout-box b{ color:var(--ink); }
.grille-format{ width:100%; border-collapse:collapse; font-size:.92rem; }
.grille-format th{ text-align:left; padding:12px 14px; font-family:var(--font-body); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); border-bottom:2px solid var(--gold); }
.grille-format td{ padding:14px; border-bottom:1px solid var(--hairline); color:var(--ink-soft); vertical-align:top; }
.grille-format td:first-child{ color:var(--ink); font-weight:600; }
.scroll-hint{ display:none; }
@media (max-width:760px){ .scroll-hint{ display:block; } }
/* ---------- Parcours « De l'idée à la réalisation » ----------
   Une vraie séquence : la numérotation et le trait de liaison encodent l'ordre,
   qui porte ici une information (chaque étape suppose la précédente). */
.parcours{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; counter-reset:etape; margin-top:6px; padding:0; }
.parcours li{ counter-increment:etape; position:relative; padding-top:54px; list-style:none; }
.parcours li::before{
  content:counter(etape,decimal-leading-zero);
  position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold); background:var(--paper);
  font-family:var(--font-display); font-size:.92rem;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.parcours li:not(:last-child)::after{
  content:''; position:absolute; top:19px; left:38px; right:-26px; height:1px; background:var(--hairline);
}
.parcours h3{ font-size:1.02rem; margin-bottom:8px; }
/* Colonnes côte à côte : un titre sur 2 lignes ne doit pas décaler le paragraphe
   voisin, on réserve donc la hauteur de 2 lignes. */
@media (min-width:641px){ .parcours h3{ min-height:2.3em; } }
.parcours p{ font-size:.88rem; line-height:1.65; color:var(--ink-soft); }
@media (max-width:1000px){ .parcours{ grid-template-columns:repeat(2,1fr); row-gap:34px; } 
  .parcours li:nth-child(2n)::after, .parcours li:last-child::after{ display:none; } }
@media (max-width:640px){
  .parcours{ grid-template-columns:1fr; gap:0; }
  .parcours li{ padding-top:2px; padding-left:56px; padding-bottom:26px; }
  .parcours li::before{ top:0; }
  .parcours li:not(:last-child)::after{ display:block; top:40px; bottom:0; left:19px; right:auto; width:1px; height:auto; }
}

.retro-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.retro-step{ background:var(--paper-raised); border-top:2px solid var(--gold); padding:24px; }
.retro-step .check-list li{ font-size:.92rem; margin-bottom:8px; }
.grille-format td.heure{ color:var(--gold); font-weight:700; font-family:var(--font-body); font-variant-numeric:tabular-nums; white-space:nowrap; }


/* ==========================================================================
   Complément du 01/10/2026 : comparatif des formules (services.html), listes de
   « points à vérifier », bloc « comparer vos devis » (astuces mariage) et section
   « soirée de fin d'année » (astuces entreprise). Tout passe par les variables
   de la charte : clair et sombre se règlent seuls, aucune couleur en dur.
   ========================================================================== */

/* ---------- Comparatif des formules ----------
   Cinq rubriques identiques pour chaque formule d'une catégorie. Grand écran : trois
   cartes côte à côte dont les rubriques restent alignées (sous-grille). Petit écran :
   les cartes se font défiler horizontalement dans leur propre cadre, rubriques toujours
   alignées d'une carte à l'autre ; la page elle-même ne défile jamais de côté. */
.compare{ margin-top:64px; }
.compare-title{ font-size:clamp(1.25rem,.6vw + 1.05rem,1.7rem); margin-bottom:10px; }
.compare-intro{ color:var(--ink-soft); font-size:.95rem; max-width:64ch; }
.compare-hint{ display:none; margin-top:16px; font-size:.8rem; font-style:italic; color:var(--ink-soft); }
.compare-wrap{ margin:20px -20px 0; padding:2px 20px 8px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:20px; overscroll-behavior-x:contain; }
.compare-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw,340px); column-gap:14px;
  width:max-content; align-items:stretch; }
.cmp-card{ scroll-snap-align:start; background:var(--paper); border:1px solid var(--hairline);
  border-top:2px solid var(--gold); padding:22px 20px 20px; display:grid; grid-row:span 7;
  grid-template-rows:subgrid; row-gap:0; }
.cmp-head{ padding-bottom:16px; }
.cmp-name{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.22; }
.cmp-tag{ font-style:italic; font-size:.84rem; color:var(--ink-soft); margin-top:3px; }
.cmp-price{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.2;
  color:var(--gold); margin-top:10px; }
.cmp-price small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.72rem;
  color:var(--ink-soft); margin-top:2px; }
.cmp-dl{ display:grid; grid-row:span 5; grid-template-rows:subgrid; margin:0; row-gap:0; }
.cmp-row{ border-top:1px solid var(--hairline); padding:13px 0 14px; }
.cmp-row dt{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink); margin:0 0 6px; }
.cmp-row dd{ margin:0; font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.cmp-row dd b{ color:var(--ink); font-weight:600; }
.cmp-row dd a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.cmp-foot{ border-top:1px solid var(--hairline); padding-top:16px; display:flex; align-items:flex-end; }
.cmp-foot .btn{ width:100%; white-space:normal; text-align:center; }
.compare-note{ margin-top:22px; max-width:78ch; font-size:.88rem; line-height:1.65; color:var(--ink-soft); }
.compare-note b{ color:var(--ink); font-weight:600; }
.compare-note a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
@media (min-width:641px){
  .compare-wrap{ margin-inline:-24px; padding-inline:24px; scroll-padding-inline:24px; }
}
@media (max-width:899px){ .compare-hint{ display:block; } }
@media (min-width:900px){
  .compare-wrap{ margin:28px 0 0; padding:0; overflow:visible; scroll-snap-type:none; }
  .compare-grid{ width:auto; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-columns:auto; column-gap:20px; }
}
/* Navigateur sans sous-grille : cartes de même hauteur, rubriques non alignées mais lisibles. */
@supports not (grid-template-rows: subgrid){
  .cmp-card{ display:flex; flex-direction:column; grid-row:auto; }
  .cmp-dl{ display:block; flex:1; }
  .cmp-foot{ margin-top:auto; }
}

/* ---------- Listes « points à vérifier » ---------- */
.verif-list{ margin:22px 0 0; padding:0; border-top:1px solid var(--hairline); }
.verif-list li{ position:relative; padding:15px 0 15px 42px; border-bottom:1px solid var(--hairline);
  font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.verif-list li::before{ content:''; position:absolute; left:3px; top:1.1rem; width:17px; height:17px;
  border:1.5px solid var(--gold); border-radius:2px; }
.verif-list li b{ color:var(--ink); font-weight:600; }

/* ---------- Bloc « comparer vos devis de mariage » ---------- */
.bloc-devis{ margin-top:48px; padding-top:40px; border-top:1px solid var(--hairline); }
.bloc-devis h3{ margin-bottom:14px; }
.bloc-devis > p + p{ margin-top:16px; }
.bloc-devis a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }

/* ---------- Section « soirée de fin d'année » ---------- */
#soiree-fin-d-annee h3{ margin:52px 0 14px; }
.formats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0 0; padding:0; }
.formats li{ background:var(--paper); border:1px solid var(--hairline); border-top:2px solid var(--gold); padding:20px 22px; }
.formats .objectif{ display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--ink-soft); margin-bottom:6px; }
.formats b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.2;
  color:var(--ink); margin-bottom:8px; }
.formats p{ font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.postes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; margin:22px 0 0; padding:0;
  border-top:1px solid var(--hairline); }
.postes li{ padding:13px 0; border-bottom:1px solid var(--hairline); font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.postes b{ display:block; color:var(--ink); font-weight:600; font-size:.95rem; margin-bottom:2px; }
/* Nombre impair de postes : le dernier occupe toute la largeur plutôt que de laisser une case vide. */
.postes li:last-child:nth-child(odd){ grid-column:1 / -1; }
.nw{ white-space:nowrap; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.cta-row .btn{ white-space:normal; text-align:center; }
.texte-lien a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
@media (max-width:640px){
  .formats, .postes{ grid-template-columns:1fr; }
  .cta-row{ flex-direction:column; }
  .cta-row .btn{ width:100%; }
}

/* ==========================================================================
   Complément du 04/10/2026 - prix de départ par type d'événement
   (services.html#prix-depart) : une ligne par type, prix de la formule la
   plus accessible ; le sur-mesure est rappelé à part (consigne du 27/09).
   ========================================================================== */
.tarifs-types{ max-width:780px; margin:38px auto 0; padding:0; border-top:1px solid var(--hairline); }
.tarifs-types li{ border-bottom:1px solid var(--hairline); }
.tarifs-types a{ display:block; padding:15px 8px; color:inherit; text-decoration:none; transition:background-color .3s var(--ease); }
.tarifs-types a:hover{ background:var(--paper-raised); }
.tt-ligne{ display:flex; align-items:baseline; gap:14px; }
.tt-nom{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.3; }
.tt-points{ flex:1 1 auto; min-width:20px; border-bottom:1px dotted var(--gold); opacity:.6; }
.tt-prix{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.3; color:var(--gold); white-space:nowrap; }
.tt-formule{ display:block; margin-top:3px; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }
.tarifs-note{ max-width:780px; margin:22px auto 0; font-size:.9rem; line-height:1.6; color:var(--ink-soft); text-align:center; }
.tarifs-note b{ color:var(--ink); font-weight:600; }
@media (max-width:560px){
  /* Sur mobile : nom et prix restent sur une ligne quand ils tiennent ; sinon le prix
     passe à la ligne, aligné à droite, et les points de conduite remplissent la fin de ligne. */
  .tarifs-types a{ padding:13px 4px; }
  .tt-ligne{ flex-wrap:wrap; column-gap:10px; }
  .tt-nom, .tt-prix{ font-size:1.1rem; }
  .tt-prix{ margin-left:auto; }
  .tarifs-note{ text-align:left; }
}

/* Complément du 04/10/2026 (2) - en-tête : le logo ne se laisse plus écraser par le menu (il l'était entre
   901 et 1099 px) ; menu « hamburger » jusqu'à 1099 px (voir les media queries de .main-nav) ; au-delà de
   1300 px, espacement du menu ramené de 34 à 30 px pour loger le chevron du sous-menu « Prestations ». */
.site-header .brand{ flex-shrink:0; }
@media (min-width:1301px){ .main-nav{ gap:30px; } }
/* Ancres posées sur un enfant de .reveal-stagger (les formules : #coordination-jour-j, #seminaire…) : au moment
   où le navigateur calcule le défilement, l'élément est encore décalé de 24 px vers le bas (animation
   d'apparition) ; il remontait ensuite de 24 px et finissait 6 px sous l'en-tête. Marge d'arrivée augmentée d'autant. */
.reveal-stagger > [id]{ scroll-margin-top:calc(var(--header-h) + 42px); }
/* Icône du menu mobile : les deux traits du haut et du bas étaient positionnés par rapport au trait central
   (26 px de large) et non au bouton : ils ne mesuraient que 4 px (« ÷ ») et la croix de fermeture se réduisait
   à un point. Ils reprennent toute la largeur du trait central (☰ / ✕). */
.nav-toggle span::before, .nav-toggle span::after{ left:0; right:0; }
/* Sous-menu refermé par Échap : reste masqué malgré :hover / :focus-within (voir main.js, is-dismissed). */
@media (min-width:1100px){
  .nav-group.is-dismissed > .nav-submenu{ opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,8px); }
}
/* Fil d'Ariane posé sur le bandeau sombre (sous-pages Astuces et Prestations) : couleurs du bandeau dans les
   deux thèmes. En thème clair, la page courante y était quasi invisible (texte foncé sur fond foncé). */
.hero .fil-ariane{ color:var(--band-ink-soft); }
.hero .fil-ariane span[aria-current]{ color:var(--band-ink); }

/* Complément du 04/10/2026 (2) - Prestations découpées en une page d'entrée + 3 sous-pages.
   Les comparatifs des sous-pages restent dépliés (contenu identique à l'ancienne page). */
.ancre-retro{ display:block; height:0; }
/* Raccourcis de la page Prestations : chaque carte est un lien, avec un vrai bouton doré « Voir les formules »
   aligné en bas de carte ; entre 641 et 900 px (2 colonnes), la 3e carte prend toute la largeur. */
.raccourcis .card{ display:flex; flex-direction:column; }
.raccourcis .raccourci-btn{ margin-top:auto; align-self:flex-start; }
.raccourcis .card p{ margin-bottom:24px; }
.raccourcis .card:hover .raccourci-btn{ background-color:var(--btn-or-survol); background-image:linear-gradient(135deg, var(--btn-or-survol) 0%, var(--btn-or-survol-clair) 48%, var(--btn-or-survol) 100%); box-shadow:0 10px 24px rgba(147,115,44,.28); }
@media (max-width:640px){ .raccourcis .raccourci-btn{ align-self:stretch; } }
@media (min-width:641px) and (max-width:900px){ .raccourcis .card:last-child:nth-child(odd){ grid-column:1 / -1; } }

/* Complément du 04/10/2026 (3) - Boutons dorés (demande de Zaher : « le plus lisible et beau, comme le bouton
   Télécharger le catalogue (PDF) »). Fond satiné doré clair, filet doré, texte noir marbré, dans les deux thèmes.
   Contraste du texte : 7,8:1 au point le plus sombre du dégradé (4,2:1 auparavant sur #93732C en thème clair) ;
   au survol 9,4:1. Le doré des textes et filets (--gold) ne change pas. */
:root{ --btn-or:#C9A24C; --btn-or-clair:#E2C274; --btn-or-filet:#B78F3E; --btn-or-survol:#D8B25E; --btn-or-survol-clair:#ECC978; --btn-or-texte:#14110C; }
.btn-primary{
  background-color:var(--btn-or);
  background-image:linear-gradient(135deg, var(--btn-or) 0%, var(--btn-or-clair) 48%, var(--btn-or) 100%);
  border-color:var(--btn-or-filet); color:var(--btn-or-texte);
}
.btn-primary:hover{ background-color:var(--btn-or-survol); background-image:linear-gradient(135deg, var(--btn-or-survol) 0%, var(--btn-or-survol-clair) 48%, var(--btn-or-survol) 100%); color:var(--btn-or-texte); }
.main-nav a.btn-primary, .site-header.is-solid .main-nav a.btn-primary, .site-header.no-hero .main-nav a.btn-primary{ color:var(--btn-or-texte); }
.skip-link{ background:var(--btn-or); color:var(--btn-or-texte); }
.stepper .step.is-active .dot{ background:var(--btn-or); border-color:var(--btn-or-filet); color:var(--btn-or-texte); }

/* Complément du 04/10/2026 (3) - Comparatifs des sous-pages Prestations repliés : titre et chapeau visibles,
   puis un bandeau cliquable (« Vous hésitez entre plusieurs formules ? » + bouton doré) qui ouvre les cartes.
   Un lien vers #comparer-… ouvre le comparatif (main.js). La note « Prestataires » reste visible. */
.compare-details{ margin-top:20px; }
.compare-toggle{ display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap;
  list-style:none; cursor:pointer; padding:20px 24px; background:var(--paper-raised); border:1px solid var(--hairline);
  border-left:3px solid var(--gold); }
.compare-toggle::-webkit-details-marker{ display:none; }
.compare-toggle::marker{ content:''; }
.compare-invite{ flex:1 1 300px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.compare-invite b{ color:var(--ink); font-weight:600; }
.compare-toggle .compare-btn{ pointer-events:none; flex:none; }
.compare-toggle:hover .compare-btn{ background-color:var(--btn-or-survol); background-image:linear-gradient(135deg, var(--btn-or-survol) 0%, var(--btn-or-survol-clair) 48%, var(--btn-or-survol) 100%); transform:translateY(-2px); box-shadow:0 10px 24px rgba(147,115,44,.28); }
.compare-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.compare-toggle-fermer{ display:none; }
.compare-details[open] > .compare-toggle{ justify-content:flex-start; }
.compare-details[open] > .compare-toggle .compare-invite{ display:none; }
.compare-details[open] > .compare-toggle .compare-toggle-ouvrir{ display:none; }
.compare-details[open] > .compare-toggle .compare-toggle-fermer{ display:inline; }
.compare-caret{ flex:none; transition:transform .3s; }
.compare-details[open] > .compare-toggle .compare-caret{ transform:rotate(180deg); }
@media (max-width:640px){ .compare-toggle{ padding:18px; } .compare-toggle .compare-btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .compare-caret{ transition:none; } }

/* Complément du 04/10/2026 (3) - Page « Offres de Noël » (services-noel-amiens.html). */
.noel-offre{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start;
  background:var(--paper-clair); border:1px solid var(--hairline); border-top:2px solid var(--gold); padding:32px 34px; }
.raised .noel-offre{ background:var(--paper); }
.noel-dl{ margin:0; }
.noel-row{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; padding:14px 0; border-top:1px solid var(--hairline); }
.noel-row:first-child{ border-top:0; padding-top:0; }
.noel-row dt{ font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); padding-top:4px; }
.noel-row dd{ margin:0; color:var(--ink-soft); line-height:1.65; }
.noel-row dd b{ color:var(--ink); font-weight:600; }
.noel-row dd a, .noel-prix-formule a, .noel-plus a, .saison-noel-ligne a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.noel-prix{ display:flex; flex-direction:column; gap:10px; padding-left:34px; border-left:1px solid var(--hairline); }
.noel-prix p{ margin:0; }
.noel-prix-montant{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1.2; color:var(--gold); }
.noel-prix-tva{ font-size:.8rem; color:var(--ink-soft); margin-top:-6px !important; }
.noel-prix-formule{ font-size:.88rem; color:var(--ink-soft); }
.noel-prix-note{ font-size:.82rem; color:var(--ink-soft); line-height:1.55; margin-bottom:6px !important; }
.noel-prix .btn{ width:100%; white-space:normal; text-align:center; }
.noel-plus{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:44px; }
.noel-plus h3{ margin-bottom:10px; }
.noel-plus p{ color:var(--ink-soft); line-height:1.7; }
@media (max-width:899px){
  .noel-offre{ grid-template-columns:minmax(0,1fr); gap:26px; padding:26px 22px; }
  .noel-prix{ padding-left:0; border-left:0; border-top:1px solid var(--hairline); padding-top:22px; }
  .noel-plus{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:560px){ .noel-row{ grid-template-columns:minmax(0,1fr); gap:6px; } }

/* Blocs saisonniers « Noël » (accueil, Prestations, Événements professionnels) : à retirer début janvier. */
.saison-noel{ display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--paper-raised);
  border:1px solid var(--hairline); border-top:2px solid var(--gold); padding:30px 34px; }
.saison-noel-titre{ font-size:clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); margin:10px 0 14px; }
.saison-noel-liste{ list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--ink-soft); line-height:1.6; }
.saison-noel-liste b{ color:var(--ink); font-weight:600; }
.saison-noel .btn{ flex:none; }
@media (max-width:760px){ .saison-noel{ flex-direction:column; align-items:stretch; padding:26px 22px; } .saison-noel .btn{ width:100%; white-space:normal; } }
.saison-noel-ligne{ margin:36px auto 0; max-width:78ch; text-align:center; font-size:.95rem; line-height:1.6; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--hairline); padding:14px 20px; }
.saison-noel-ligne b{ color:var(--ink); font-weight:600; }
.saison-noel-ligne.gauche{ margin:0 0 44px; max-width:none; text-align:left; border-left:3px solid var(--gold); }

/* Complément du 05/10/2026 - Encadré en tête des sous-pages Mariages (wedding planner, salons du mariage) et
   Événements professionnels (team building). */
.atouts-page{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:18px 44px;
  margin:0 0 44px; padding:24px 28px; background:var(--paper-raised); border-left:3px solid var(--gold); }
.atouts-page h3{ font-size:clamp(1.1rem, .4vw + 1rem, 1.3rem); margin-bottom:8px; }
.atouts-page p{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.65; }
.atouts-page a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
@media (max-width:640px){ .atouts-page{ padding:20px 18px; } }
/* Boutons dorés identiques partout : le lien d'évitement (visible au clavier) prend exactement le même rendu. */
.skip-link{ background-color:var(--btn-or);
  background-image:linear-gradient(135deg, var(--btn-or) 0%, var(--btn-or-clair) 48%, var(--btn-or) 100%);
  border:1px solid var(--btn-or-filet); color:var(--btn-or-texte); }
/* Bouton « Devis en ligne » de l'en-tête sur la page devis : plus d'anneau « page courante » qui le distinguait des
   autres boutons dorés (l'attribut aria-current reste, pour les lecteurs d'écran). */
.main-nav .btn-primary[aria-current="page"], .site-header.is-solid .main-nav .btn-primary[aria-current="page"],
.site-header.no-hero .main-nav .btn-primary[aria-current="page"]{ box-shadow:none; }
.main-nav .btn-primary[aria-current="page"]:hover, .site-header.is-solid .main-nav .btn-primary[aria-current="page"]:hover,
.site-header.no-hero .main-nav .btn-primary[aria-current="page"]:hover{ box-shadow:0 10px 24px rgba(147,115,44,.28); }
/* Bouton « Devis en ligne » de l'en-tête : il héritait de la graisse (600) et de l'espacement (.07em, .05em entre 1100
   et 1300 px) des liens du menu ; il prend ceux de tous les boutons dorés (700, .08em). Sa taille reste celle du menu. */
.main-nav a.btn-primary{ font-weight:700; letter-spacing:.08em; }