/* L’Événement DJ, v4 « Pinède », troisième passe : « la piste, la nuit tombée ».
   La palette ne bouge pas : gris-vert froid, vert-noir pour le texte, un seul
   accent vert pin (#285943) pour les boutons, les liens et les prix ; la nuit
   (#0F1A15) pour les scènes du soir. Une seule famille, Outfit.
   Ce qui change est le motif : LA LUMIÈRE DE SCÈNE. Faisceaux de lyres sur la
   photo du seuil, iris d’un projecteur à l’ouverture et entre deux pages,
   paragraphe qui s’allume mot à mot, pochettes de vinyle dont le disque sort. La lumière est un blanc chaud
   (--lumiere) toujours translucide : ce n’est jamais une surface ni un fond,
   c’est ce qu’un projecteur pose sur la nuit. Jamais de néon, jamais de violet.
   Une seule forme d’angle : 6 px sur tout ce qui est contenu dans la grille ; ce
   qui touche le bord de l’écran reste droit ; les disques sont ronds parce que
   ce sont des disques.
   Contrastes relevés : encre 15,1:1 sur le fond ; encre douce 5,7 (5,1 sur la
   pierre) ; pin 7,2 (6,4 sur la pierre) ; surface sur pin 7,8 ; sur la nuit,
   clair 15,5, clair doux 8,5, pin clair 9,3 ; un mot pas encore allumé
   (--eteint) 3,5, réservé au grand corps (24 px et plus, seuil AA de 3:1). */
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@property --iris{syntax:"<length>";inherits:false;initial-value:0px}

:root{
  --fond:#F1F3F1;--surface:#FAFBFA;--pierre:#E3E8E4;
  --encre:#13201A;--encre-douce:#55625A;
  --pin:#285943;--pin-fonce:#1E4533;
  --nuit:#0F1A15;--clair:#ECF0ED;--clair-doux:#A9B6AE;--pin-clair:#9DC4AE;--eteint:#67706B;
  --lumiere:255 248 236;
  --filet:rgb(19 32 26/.12);--filet-fort:rgb(19 32 26/.24);
  /* le texte lit des jetons, que .sombre redéfinit */
  --t-texte:var(--encre);--t-doux:var(--encre-douce);--t-accent:var(--pin);--t-filet:var(--filet);--t-filet-fort:var(--filet-fort);
  --t-bouton:var(--pin);--t-bouton-texte:var(--surface);--t-inverse:var(--fond);
  --police:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gouttiere:clamp(1.25rem,4.5vw,4rem);--large:78rem;--entete:4.25rem;--barre:0rem;
  --bord:max(var(--gouttiere),calc((100% - var(--large))/2));
  --rayon:.375rem;
  --courbe:cubic-bezier(.22,.68,.12,1);
  /* le disque : sillons, reflet qui tourne avec lui, rond central à l’encre pin */
  --d:clamp(9.5rem,12.5vw,13.5rem);
  --disque:radial-gradient(circle closest-side,var(--fond) 0 2.4%,rgb(15 26 21/.9) 2.6% 3.6%,var(--pin) 3.8% 31%,rgb(236 240 237/.16) 31.5%,rgb(15 26 21/0) 32.5%),conic-gradient(from 20deg,rgb(var(--lumiere)/0),rgb(var(--lumiere)/.15) 28deg,rgb(var(--lumiere)/0) 62deg 180deg,rgb(var(--lumiere)/.09) 210deg,rgb(var(--lumiere)/0) 246deg),repeating-radial-gradient(circle closest-side,rgb(236 240 237/.045) 0 1px,rgb(15 26 21/0) 1px 3px),var(--nuit);
  --disque-ombre:0 0 0 1px rgb(236 240 237/.1),0 20px 40px -24px rgb(0 0 0/.7);
  interpolate-size:allow-keywords;
}
.sombre,.en-tete[data-ton="sombre"],.en-tete[data-ton="photo"],.seuil-plein{--t-texte:var(--clair);--t-doux:var(--clair-doux);--t-accent:var(--pin-clair);--t-filet:rgb(236 240 237/.14);--t-filet-fort:rgb(236 240 237/.3);--t-bouton:var(--clair);--t-bouton-texte:var(--nuit);--t-inverse:var(--nuit)}
.sombre{background:var(--nuit);color:var(--t-texte)}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 1.5rem)}
body{background:var(--fond);color:var(--t-texte);font:400 1.0625rem/1.65 var(--police);-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:300;line-height:1.08;letter-spacing:-.022em;color:var(--t-texte);text-wrap:balance}
h2{font-size:clamp(2.1rem,1.3rem + 2.4vw,3.5rem)}
h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);font-weight:400;letter-spacing:-.012em;line-height:1.2}
h4{font-size:1.125rem;font-weight:500;letter-spacing:-.005em;line-height:1.3}
p{text-wrap:pretty}
strong{font-weight:500}
:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px;border-radius:var(--rayon)}
::selection{background:var(--pin);color:var(--surface)}

/* Lenis (défilement fluide, ordinateur seulement) : ses règles, recopiées de
   lenis.css 1.3.27 pour ne pas charger une feuille de plus. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* -- Grille, sections, têtes */
.conteneur{width:100%;max-width:calc(var(--large) + 2*var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:clamp(5rem,9vw,8.5rem)}
.fond-surface{background:var(--surface)}
.fond-pierre{background:var(--pierre)}
.tete{display:grid;gap:1.1rem;max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.intro{color:var(--t-doux);font-size:1.125rem;max-width:38rem}
.ouverture{font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);font-weight:300;line-height:1.5;letter-spacing:-.01em;max-width:44rem}
.texte-ample{font-size:clamp(1.12rem,1rem + .45vw,1.35rem);font-weight:300;line-height:1.6;letter-spacing:-.005em}

/* -- Liens et boutons. Le bouton s’allume du côté où le pointeur entre (le
   rond de lumière part de --px/--py, posés par site.js) et l’attire un peu :
   un retour d’action, comme un pad qu’on effleure. */
.lien{text-decoration:underline 1px;text-decoration-color:var(--t-filet-fort);text-underline-offset:.28em;transition:text-decoration-color .3s,color .3s}
.lien:hover,.lien:focus-visible{text-decoration-color:currentColor;color:var(--t-accent)}
.lien-fleche{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-weight:500;color:var(--t-accent);text-decoration:none}
.lien-fleche span{text-decoration:underline 1px transparent;text-underline-offset:.3em;transition:text-decoration-color .3s}
.lien-fleche:hover span,.lien-fleche:focus-visible span{text-decoration-color:currentColor}
.fleche{width:1.6rem;height:.7rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;transition:translate .45s var(--courbe)}
.lien-fleche:hover .fleche,.lien-fleche:focus-visible .fleche,.articles a:hover .fleche,.articles a:focus-visible .fleche{translate:.35rem 0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.bouton{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.8rem 1.4rem;border-radius:var(--rayon);font-size:.98rem;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:box-shadow .3s,color .35s .05s}
.bouton::before{content:"";position:absolute;z-index:-1;left:var(--px,50%);top:var(--py,50%);width:240%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;scale:0;background:var(--pin-clair);transition:scale .6s var(--courbe)}
.bouton:active{translate:0 1px}
.bouton-principal{background:var(--t-bouton);color:var(--t-bouton-texte)}
.bouton-secondaire{color:var(--t-texte);box-shadow:inset 0 0 0 1px var(--t-filet-fort)}
.bouton-secondaire::before{background:var(--t-texte)}
.bouton:focus-visible::before{scale:1}
.bouton-principal:focus-visible{color:var(--nuit)}
.bouton-secondaire:focus-visible{color:var(--t-inverse)}
@media (hover:hover){
  .bouton:hover::before{scale:1}
  .bouton-principal:hover{color:var(--nuit)}
  .bouton-secondaire:hover{color:var(--t-inverse);box-shadow:inset 0 0 0 1px var(--t-texte)}
}
.seuil-plein .bouton-secondaire{background:rgb(15 26 21/.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* -- En-tête. Son ton suit la section qu’il recouvre (site.js pose data-ton) :
   clair par défaut, transparent sur la photo du seuil, nuit sur les sections
   sombres. Sans script, il reste clair partout. */
.evitement{position:fixed;left:1rem;top:1rem;z-index:100;padding:.8rem 1.2rem;border-radius:var(--rayon);background:var(--encre);color:var(--clair);translate:0 -220%;transition:translate .3s}
.evitement:focus{translate:none}
.en-tete{position:fixed;inset:0 0 auto;z-index:50;color:var(--t-texte)}
.en-tete::before{content:"";position:absolute;inset:0;background:rgb(241 243 241/.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--t-filet);transition:background-color .45s,box-shadow .45s}
.en-tete[data-ton="sombre"]::before{background:rgb(15 26 21/.9)}
.en-tete[data-ton="photo"]::before{background:rgb(15 26 21/0);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-js] body:has(.seuil-plein) .en-tete:not([data-ton]){--t-texte:var(--clair);--t-accent:var(--pin-clair);--t-filet-fort:rgb(236 240 237/.3);--t-bouton:var(--clair);--t-bouton-texte:var(--nuit);--t-inverse:var(--nuit)}
:root[data-js] body:has(.seuil-plein) .en-tete:not([data-ton])::before{background:rgb(15 26 21/0);box-shadow:none;backdrop-filter:none}
:root[data-menu-ouvert] .en-tete{--t-texte:var(--encre);--t-accent:var(--pin);--t-filet:var(--filet);--t-filet-fort:var(--filet-fort);--t-bouton:var(--pin);--t-bouton-texte:var(--surface);--t-inverse:var(--fond)}
:root[data-menu-ouvert] .en-tete::before{background:var(--fond);box-shadow:0 1px 0 var(--filet)}
.en-tete-ligne{position:relative;display:flex;align-items:center;gap:1.5rem;height:var(--entete);max-width:calc(var(--large) + 2*var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}
.logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font-size:1.3rem;font-weight:500;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.logo-dj{margin-left:.28em;font-weight:300}
.tel{display:inline-flex;align-items:center;min-height:44px;font-weight:500;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--t-accent)}
.bouton-menu{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:0 .25rem;border:0;background:none;font-weight:500;cursor:pointer}
.bouton-menu-icone{position:relative;width:1.35rem;height:.55rem}
.bouton-menu-icone::before,.bouton-menu-icone::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:translate .4s var(--courbe),rotate .4s var(--courbe)}
.bouton-menu-icone::before{top:0}.bouton-menu-icone::after{bottom:0}
[aria-expanded="true"] .bouton-menu-icone::before{translate:0 .21rem;rotate:45deg}
[aria-expanded="true"] .bouton-menu-icone::after{translate:0 -.21rem;rotate:-45deg}
@media (max-width:63.99em){
  :root{--barre:4.25rem}
  .menu{position:fixed;inset:0;z-index:-1;display:grid;align-content:center;padding:var(--entete) var(--gouttiere) calc(var(--barre) + 2rem);background:var(--fond);opacity:0;visibility:hidden;transition:opacity .4s var(--courbe),visibility .4s}
  :root[data-menu-ouvert] .menu{opacity:1;visibility:visible}
  .menu ul{display:grid;gap:.2rem}
  .menu a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(2.2rem,9vw,3rem);font-weight:300;letter-spacing:-.03em;text-decoration:none;color:var(--encre)}
  .menu a[aria-current="page"]{color:var(--pin)}
  .menu li{opacity:0;translate:0 .75rem;transition:opacity .5s var(--courbe),translate .6s var(--courbe)}
  :root[data-menu-ouvert] .menu li{opacity:1;translate:none}
  .menu li:nth-child(2){transition-delay:.05s}.menu li:nth-child(3){transition-delay:.1s}.menu li:nth-child(4){transition-delay:.15s}
  /* téléphone et devis restent hors du menu : une barre fixe en bas */
  .actions-entete{position:fixed;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:var(--barre);padding:.5rem var(--gouttiere) calc(.5rem + env(safe-area-inset-bottom));background:rgb(250 251 250/.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--filet);color:var(--encre);--t-texte:var(--encre);--t-accent:var(--pin);--t-bouton:var(--pin);--t-bouton-texte:var(--surface);--t-inverse:var(--fond)}
  .actions-entete .bouton{min-height:2.85rem;padding-inline:1.1rem}
  .pied{padding-bottom:calc(var(--barre) + 2rem + env(safe-area-inset-bottom))}
}
@media (min-width:64em){
  :root{--entete:4.5rem}
  .bouton-menu{display:none}
  .menu ul{display:flex;gap:1.6rem}
  .menu a{display:inline-flex;align-items:center;min-height:44px;font-size:.98rem;text-decoration:underline 1px transparent;text-underline-offset:.45em;transition:text-decoration-color .3s}
  .menu a:hover,.menu a:focus-visible,.menu a[aria-current="page"]{text-decoration-color:currentColor}
  .actions-entete{display:flex;align-items:center;gap:1.25rem;margin-left:.75rem}
}

/* -- Seuil : la photo plein cadre (accueil) ou le grand partage (prestations) */
.seuil{position:relative}
.titre-seuil{font-size:clamp(2.5rem,1.2rem + 3.9vw,4.6rem);font-weight:300;line-height:1.02;letter-spacing:-.032em}
.chapo{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.55;max-width:33rem;color:var(--t-doux)}
.seuil-photo{display:block;overflow:hidden;background:var(--pierre)}
.seuil-photo img{width:100%;height:100%;object-fit:cover}
.seuil-plein{display:grid;align-items:end;min-height:calc(100svh - var(--barre));padding-top:var(--entete);color:var(--t-texte);isolation:isolate;overflow:clip;--t-doux:rgb(236 240 237/.92)}
.seuil-plein .seuil-photo{position:absolute;inset:0;z-index:-1;background:var(--nuit);transform-origin:50% 64%}
.seuil-plein .seuil-photo img{object-position:50% 56%}
/* voile au-dessus des faisceaux : un trait sombre sous l’en-tête, le bas gauche
   où repose le texte, et l’assombrissement du défilement (--enfonce) */
.seuil-plein::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(15 26 21/.55),rgb(15 26 21/0) 9rem),linear-gradient(10deg,rgb(15 26 21/.88) 8%,rgb(15 26 21/.52) 38%,rgb(15 26 21/0) 66%),rgb(15 26 21/calc(var(--enfonce,0)*.7))}
.seuil-plein .seuil-texte{display:grid;gap:1.4rem;justify-items:start;padding-block:3rem clamp(2.5rem,8vh,5.5rem)}
@media (max-width:47.99em){.seuil-plein::after{background:linear-gradient(180deg,rgb(15 26 21/.55),rgb(15 26 21/0) 7rem),linear-gradient(0deg,rgb(15 26 21/.92),rgb(15 26 21/.7) 45%,rgb(15 26 21/0) 80%),rgb(15 26 21/calc(var(--enfonce,0)*.7))}}
.seuil-plein .titre-seuil{max-width:13.5em}
.seuil-partage{display:grid;padding-top:var(--entete)}
.seuil-partage .seuil-texte{display:grid;gap:1.35rem;justify-items:start;align-content:end;padding:clamp(1.5rem,5vh,3rem) var(--gouttiere) clamp(2.5rem,6vh,4rem)}
.seuil-partage .titre-seuil{font-size:clamp(2.2rem,1rem + 2.4vw,3.1rem);line-height:1.05}
.seuil-partage .seuil-photo{position:relative;isolation:isolate;aspect-ratio:4/5;max-height:80svh}
.cadre-jeremy{object-position:48% 40%}
.ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9rem;color:var(--t-doux)}
.ariane li+li::before{content:"/";margin-right:.5rem;opacity:.6}
.ariane a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:62em){
  .seuil-partage{grid-template-columns:minmax(0,1fr) minmax(0,40%);min-height:100svh;padding-left:var(--bord)}
  .seuil-partage .seuil-texte{padding:3rem clamp(2rem,5vw,5rem) clamp(4rem,13vh,8rem) 0}
  .seuil-partage .seuil-photo{aspect-ratio:auto;max-height:none;height:calc(100svh - var(--entete))}
}
/* -- Seuil des pages intérieures (mariage, entreprise) : CENTRÉ. Deux essais
   l'ont précédé le 9 novembre 2026 : texte en bas à gauche face à une photo
   (« trop vide »), puis le même avec des repères et une photo incrustée
   (« c'est décentré, j'aime pas »). D'où une composition symétrique, et des
   repères qui disent ce qu'on vient chercher (formules et prix, ou formats) à
   la place du bouton secondaire qui menait au même endroit. Rien n'est
   inventé : prix et formats sont ceux de la page. */
.reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:34rem;border-top:1px solid var(--t-filet-fort)}
.reperes li+li{border-left:1px solid var(--t-filet)}
.reperes a{display:grid;align-content:start;gap:.2rem;min-height:44px;padding:.9rem .75rem .25rem 0;color:var(--t-texte);text-decoration:none}
.reperes li+li a{padding-left:1rem}
.repere-nom{font-size:.875rem;line-height:1.3;color:var(--t-doux);transition:color .3s}
.repere-valeur{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);font-weight:400;letter-spacing:-.015em;line-height:1.2;color:var(--t-accent)}
.reperes a:hover .repere-nom,.reperes a:focus-visible .repere-nom{color:var(--t-texte)}
.reperes-formats{display:flex;flex-wrap:wrap;gap:.5rem;max-width:36rem;border-top:0}
.reperes-formats li+li{border-left:0}
.reperes-formats a,.reperes-formats li+li a{display:inline-flex;align-items:center;padding:.55rem .95rem;border-radius:var(--rayon);box-shadow:inset 0 0 0 1px var(--t-filet-fort);font-size:.9375rem;line-height:1.2;transition:box-shadow .3s,color .3s}
.reperes-formats a:hover,.reperes-formats a:focus-visible{box-shadow:inset 0 0 0 1px var(--t-accent);color:var(--t-accent)}
@media (max-width:47.99em){
  .reperes a{padding-right:.5rem}
  .reperes li+li a{padding-left:.65rem}
  .repere-valeur{font-size:1.05rem}
  /* les cinq formats en une rangée qu'on fait glisser, plutôt qu'une colonne
     qui repousse la photo hors de l'écran */
  .reperes-formats{flex-wrap:nowrap;justify-self:stretch;width:auto;max-width:none;margin-inline:calc(-1*var(--gouttiere));padding-inline:var(--gouttiere);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gouttiere);scrollbar-width:none}
  .reperes-formats::-webkit-scrollbar{display:none}
  .reperes-formats li{flex:none;scroll-snap-align:start}
}
/* Pinède, centré : la mise en scène de l'accueil (photo plein cadre sous un
   voile de nuit), le texte au milieu. Le voile est plus dense au centre, là
   où se pose le texte. */
.seuil-plein.seuil-centre{align-items:center;text-align:center}
.seuil-centre .seuil-texte{justify-items:center;padding-block:clamp(2.5rem,7vh,4.5rem)}
.seuil-centre .ariane ol{justify-content:center}
.seuil-centre .titre-seuil{max-width:15em;margin-inline:auto;font-size:clamp(2.5rem,1rem + 3.6vw,4.75rem);text-wrap:balance}
.seuil-centre .chapo{max-width:36rem;margin-inline:auto}
.seuil-centre .actions{justify-content:center}
.seuil-centre .reperes{margin-inline:auto}
.seuil-centre .reperes a,.seuil-centre .reperes li+li a{justify-items:center;padding-inline:.75rem;text-align:center}
.seuil-centre .reperes-formats{justify-content:center}
.seuil-plein.seuil-centre .seuil-photo img{object-position:50% 50%}
.seuil-plein.seuil-centre::after{background:radial-gradient(ellipse 72% 66% at 50% 52%,rgb(15 26 21/.76),rgb(15 26 21/.52) 62%,rgb(15 26 21/.4)),linear-gradient(180deg,rgb(15 26 21/.55),rgb(15 26 21/0) 9rem),rgb(15 26 21/calc(var(--enfonce,0)*.7))}
@media (max-width:47.99em){.seuil-centre .reperes-formats{justify-content:flex-start}}

/* -- Les lyres : les projecteurs asservis de la photo s’allument. Chaque
   faisceau part de la tête d’une vraie lyre (site.js la retrouve dans l’image
   recadrée, data-tete en fractions de la photo) et monte dans les arbres, où
   la brume le rend visible ; il balaie lentement, en blanc chaud translucide,
   avec un halo sur la tête. Fondus en « écran » sur la photo seule et passés
   sous le voile, ils ne touchent pas au contraste du titre. Sans script, ils
   n’existent pas : on ne sait pas où sont les têtes.
   La tête se pose par `translate`, jamais par left/top : site.js n’écrit --lx
   et --ly qu’après la première image, et un faisceau de 56vh sur 115vh qui
   change de left/top compte comme un décalage de mise en page (CLS de 0,31
   sur ordinateur et de 0,5 sur mobile, mesuré le 10 novembre 2026). Tant que
   --lx n’est pas écrit, le faisceau attend hors du cadre, que .lyres rogne. */
.lyres{position:absolute;inset:0;z-index:-1;display:none;overflow:hidden;pointer-events:none;mix-blend-mode:screen;transform-origin:50% 64%}
:root[data-js] .lyres{display:block}
.lyre{position:absolute;left:0;top:0;width:56vh;height:115vh;translate:calc(var(--lx,-100vw) - 50%) calc(var(--ly,0px) - 100%);transform-origin:50% 100%;rotate:var(--repos);background:conic-gradient(from -9deg at 50% 100%,rgb(var(--lumiere)/0),rgb(var(--lumiere)/var(--force,.36)) 9deg,rgb(var(--lumiere)/0) 18deg);-webkit-mask:linear-gradient(0deg,#000 4%,rgb(0 0 0/.55) 40%,transparent 82%);mask:linear-gradient(0deg,#000 4%,rgb(0 0 0/.55) 40%,transparent 82%)}
.lyre::after{content:"";position:absolute;left:50%;bottom:0;width:7rem;height:7rem;margin:0 0 -3.5rem -3.5rem;border-radius:50%;background:radial-gradient(circle closest-side,rgb(var(--lumiere)/.55),rgb(var(--lumiere)/.14) 38%,rgb(var(--lumiere)/0))}
.lyre:nth-child(1){--repos:-16deg;--de:-30deg;--a:2deg;--duree:9.5s;--decal:-2s;--force:.28}
.lyre:nth-child(2){--repos:-6deg;--de:-24deg;--a:14deg;--duree:12s;--decal:-7s}
.lyre:nth-child(3){--repos:10deg;--de:28deg;--a:-8deg;--duree:10.5s;--decal:-4s}
@media (max-width:47.99em){.lyre{width:44vh}.lyre:nth-child(3){display:none}.lyre:nth-child(1){--de:-26deg;--a:-2deg}.lyre:nth-child(2){--de:24deg;--a:2deg}}
@keyframes balaye{from{rotate:var(--de)}to{rotate:var(--a)}}

/* -- Photos : rognées, arrondies, et dévoilées à l’entrée dans l’écran */
.photo{position:relative;overflow:hidden;border-radius:var(--rayon);background:var(--pierre)}
.photo img{width:100%;height:100%;object-fit:cover}
.bande{position:relative;overflow:hidden;height:clamp(17rem,44vw,34rem);background:var(--pierre)}
.bande img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}

/* -- Mariages et entreprises : la salle s’allume (le paragraphe de Jeremy, mot à
   mot, au défilement), puis les deux univers en regard */
.univers{padding-top:0}
.salle{padding-block:clamp(4.5rem,10vw,9rem) clamp(5rem,10vw,8.5rem);margin-bottom:clamp(4.5rem,9vw,8rem)}
.salle h2{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.allume{max-width:58rem;font-size:clamp(1.55rem,1.05rem + 1.7vw,2.6rem);font-weight:300;line-height:1.32;letter-spacing:-.02em}
.mot-a{transition:color .25s}
:root[data-js] .allume .mot-a{color:var(--eteint)}
:root[data-js] .allume .mot-a.allume-mot{color:var(--clair)}
.univers-grille{display:grid;gap:3.5rem}
.univers-grille article{display:grid;gap:1.6rem;align-content:start}
.univers-mariage .photo{aspect-ratio:4/5}
.univers-entreprise .photo{aspect-ratio:5/4}
.univers-texte{display:grid;gap:.85rem;justify-items:start;max-width:32rem}
.univers-texte p,.etapes p,.formats-liste p,.groupe-liste p,.colonnes-texte .points,.pochette-texte p{color:var(--t-doux)}
.groupe-liste .prix{color:var(--t-accent)}
@media (min-width:62em){
  .univers-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,7vw,7rem)}
  .univers-entreprise{margin-top:clamp(8rem,18vw,16rem)}
}

/* -- Étapes : la tête reste en place pendant que les étapes défilent. Sur
   l’accueil, une forme d’onde s’y joue au rythme de la lecture (l’énergie de
   la soirée monte d’étape en étape) ; sur la page entreprise, une tranche de
   console dont le fader suit le volume de chaque temps. */
.etapes-grille{display:grid;gap:2.5rem}
.etapes-cote{display:grid;gap:2rem;align-content:start}
.etapes-photo{aspect-ratio:4/3}
.etapes li{display:grid;gap:.4rem;padding-block:1.6rem;border-top:1px solid var(--t-filet-fort)}
.etapes h3{font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);font-weight:300;transition:color .5s}
@media (min-width:48em){.etapes li{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:2rem;align-items:baseline}}
@media (min-width:62em){
  .etapes-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .etapes-cote{position:sticky;top:calc(var(--entete) + 2.5rem)}
  .instrument-pret .etapes li:not(.actif) h3{color:var(--t-doux)}
}
.onde,.fader{display:none}
@media (min-width:62em){
  .onde{display:block;position:relative;max-width:26rem;padding-bottom:1.25rem}
  .onde svg{width:100%;height:4.75rem;overflow:visible}
  .onde path{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}
  .onde-fond{stroke:var(--t-filet-fort)}
  .onde-jouee{stroke:var(--t-accent)}
  .onde-tete{position:absolute;left:0;top:-.35rem;height:5.45rem;width:1.5px;background:var(--t-texte);box-shadow:0 0 10px 1px rgb(var(--lumiere)/.9);will-change:transform}
  .onde-reperes{position:absolute;inset:auto 0 0;height:.55rem}
  .onde-reperes span{position:absolute;bottom:0;width:1.5px;height:100%;background:var(--t-filet-fort);transition:background-color .4s}
  .onde-reperes span.actif{background:var(--t-accent)}
  .etapes-cote:has(.fader){grid-template-columns:minmax(0,1fr) auto;column-gap:1rem}
  .etapes-cote:has(.fader) h2{grid-column:1/-1}
  .fader{display:flex;gap:.85rem;padding:1.1rem .9rem;border-radius:var(--rayon);background:var(--nuit)}
  .fader-rail{position:relative;width:2.6rem}
  .fader-rail::before{content:"";position:absolute;left:50%;top:.7rem;bottom:.7rem;width:4px;margin-left:-2px;border-radius:2px;background:#000;box-shadow:0 0 0 1px rgb(236 240 237/.1)}
  .fader-rail::after{content:"";position:absolute;inset:.7rem 0;background:repeating-linear-gradient(180deg,rgb(236 240 237/.3) 0 1px,rgb(15 26 21/0) 1px 10%);-webkit-mask:linear-gradient(90deg,#000 0 22%,transparent 22% 78%,#000 78%);mask:linear-gradient(90deg,#000 0 22%,transparent 22% 78%,#000 78%)}
  .fader-bouton{position:absolute;z-index:1;left:0;right:0;top:0;height:1.4rem;border-radius:var(--rayon);background:linear-gradient(180deg,var(--clair),var(--clair-doux));box-shadow:0 6px 12px -4px rgb(0 0 0/.8);will-change:transform}
  .fader-bouton::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;margin-top:-1px;background:var(--nuit)}
  .vumetre{position:relative;width:.4rem;margin-block:.7rem;background:rgb(236 240 237/.08);-webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 5px);mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 5px)}
  .vumetre-niveau{position:absolute;inset:0;transform-origin:50% 100%;scale:1 0;background:linear-gradient(0deg,var(--pin-clair) 60%,var(--clair));will-change:scale}
}

/* -- Formules : le Pack Mariage en grand, les deux autres en second plan.
   Chaque carte est une pochette : sur ordinateur, au survol ou au focus, le
   disque glisse hors du haut de la pochette en tournant. Il ne passe jamais sur
   le texte (la place est réservée au-dessus), le prix reste lisible. */
.formules{display:grid;gap:2.5rem}
.formule{position:relative;display:grid;align-content:start}
.formule-pochette{position:relative;z-index:1;display:grid}
.formule-corps{display:grid;gap:.8rem;align-content:start;justify-items:start}
.formule-nom{font-size:clamp(1.45rem,1.25rem + .7vw,1.9rem);font-weight:400}
.formule-lien{text-decoration:none}
.formule-lien::after{content:"";position:absolute;inset:0;z-index:2}
.formule-lien:focus-visible{outline:none}
.formule:has(.formule-lien:focus-visible) .formule-pochette{outline:2px solid var(--t-accent);outline-offset:4px;border-radius:var(--rayon)}
.formule-pochette:hover .formule-lien{color:var(--t-accent)}
.formule-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;color:var(--t-doux);font-size:.95rem}
.formule-prix strong{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);font-weight:300;letter-spacing:-.035em;line-height:1.05;color:var(--t-accent);white-space:nowrap}
.formule-accroche{font-size:1.1rem}
.formule-liste{display:grid;gap:.3rem;margin-top:.4rem;color:var(--t-doux)}
.formule-mention{margin-top:.5rem;font-weight:500;color:var(--t-accent)}
.formule-devis{margin-top:.6rem}
.formule-phare .formule-pochette{overflow:hidden;border-radius:var(--rayon);background:var(--surface);box-shadow:0 0 0 1px var(--filet),0 28px 60px -44px rgb(15 26 21/.4)}
.fond-surface .formule-phare .formule-pochette{background:var(--fond)}
.formule-phare .formule-corps{padding:clamp(1.5rem,3vw,2.75rem)}
.formule-phare .formule-nom{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);font-weight:300;letter-spacing:-.025em}
.formule-phare .formule-prix strong{font-size:clamp(2.6rem,1.8rem + 2.6vw,4rem)}
.formule-photo{aspect-ratio:16/10;border-radius:0}
.insecable{white-space:nowrap}
.formules-autres{display:grid;gap:2.5rem;align-content:start}
.formules-autres .formule-pochette{padding-top:1.5rem;border-top:1px solid var(--t-filet-fort);background:var(--fond)}
.fond-surface .formules-autres .formule-pochette{background:var(--surface)}
.sous-formules{margin-top:2rem}
.disque{display:none}
@media (min-width:48em){.formule-phare .formule-liste{display:block;columns:2;column-gap:2.25rem}.formule-phare .formule-liste li{break-inside:avoid;padding-block:.15rem}}
@media (min-width:62em){
  .formules-accueil{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .formules-accueil .formule-phare .formule-pochette{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .formules-accueil .formule-phare .formule-liste{columns:1}
  .formule-phare .formule-photo{aspect-ratio:auto;min-height:22rem}
  .formule-phare .formule-photo img{position:absolute;inset:0}
  .formules-completes .formule-phare .formule-pochette{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .formules-completes .formules-autres{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:1rem}
}
@media (hover:hover) and (pointer:fine) and (min-width:48em){
  .formules{padding-top:calc(var(--d)*.5)}
  .formules-autres{gap:calc(var(--d)*.62 + 1.5rem)}
  .formules-completes .formules-autres{margin-top:calc(var(--d)*.62 + 1rem)}
  .disque{display:block;position:absolute;z-index:0;top:0;right:clamp(1.25rem,7%,3.5rem);width:var(--d);aspect-ratio:1;border-radius:50%;background:var(--disque);box-shadow:var(--disque-ombre);translate:0 -8%;transition:translate 1s var(--courbe),rotate 1.6s var(--courbe)}
  .formule:hover .disque,.formule:focus-within .disque{translate:0 -60%;rotate:220deg}
}

/* -- Options : une liste de prix à deux colonnes, sans filet par ligne */
.options{display:grid;gap:2rem;margin-top:clamp(3.5rem,7vw,6rem)}
.options-cote{display:grid;gap:1rem;align-content:start}
.options-cote h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);font-weight:300}
.partenaire{padding:1.1rem 1.25rem;border-radius:var(--rayon);background:var(--pierre);max-width:30rem}
.tarifs{font-size:.95rem;color:var(--t-doux)}
.tarifs-entreprise{margin-top:1.25rem;color:var(--t-doux);max-width:44rem}
.tarifs-entreprise strong{color:var(--t-texte);font-weight:500}
.options-liste{display:grid;gap:.15rem 3rem;align-content:start}
.options-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.55rem}
.prix{color:var(--t-accent);white-space:nowrap;text-align:right}
.prix strong{font-weight:500}
.a-partir{color:var(--t-doux);font-size:.88em}
@media (min-width:48em){.options-liste{grid-template-columns:1fr 1fr}}
@media (min-width:62em){.options{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(3rem,6vw,6rem)}}

/* -- Le bandeau : le vocabulaire de la soirée, qui défile plus vite quand on
   défile et change de sens avec le défilement (site.js). Sans script : une
   ligne immobile. */
.bandeau{overflow:clip;padding-block:clamp(2.5rem,6vw,4.5rem)}
.bandeau-piste{display:flex;width:max-content;font-size:clamp(2.6rem,1.4rem + 5vw,6.75rem);font-weight:200;line-height:1.1;letter-spacing:-.04em;white-space:nowrap;will-change:transform}
.bandeau-piste span{padding-inline:.42em}
.bandeau-piste span:nth-child(even){font-weight:400;color:var(--encre-douce)}

/* -- Animations : trois groupes, chacun sa photo. Sur ordinateur, les photos
   fixes s’effacent : celle de l’animation survolée suit le pointeur. */
.groupes{display:grid;gap:clamp(3.5rem,7vw,6rem)}
.groupe{display:grid;gap:2rem 3rem;padding-top:2rem;border-top:1px solid var(--t-filet-fort)}
.groupe-tete{display:grid;gap:1.5rem;align-content:start}
.groupe-tete h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);font-weight:300;letter-spacing:-.022em}
.groupe-photo{aspect-ratio:3/2}
.groupe-liste{display:grid;gap:1.75rem 3rem;align-content:start}
.groupe-liste li{display:grid;gap:.35rem;align-content:start}
.groupe-liste h4{transition:color .35s}
.animation-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem}
@media (min-width:48em){.groupe-liste{grid-template-columns:1fr 1fr}.groupe-photo{aspect-ratio:4/5;max-width:20rem}}
@media (min-width:62em){
  .groupe{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.groupe-photo{max-width:none}
  :root[data-survol] .groupe-photo{display:none}
  :root[data-survol] .groupe-liste:hover li:not(:hover) h4{color:var(--t-doux)}
}

/* -- Colonnes (préparation), points, matériel, énoncé */
.colonnes{display:grid;gap:1.5rem 4rem;margin-top:clamp(3rem,6vw,5rem)}
.colonnes-texte{display:grid;gap:2rem}
.points li{padding-block:.9rem;border-top:1px solid var(--t-filet-fort);font-size:1.08rem}
.preparation{padding-top:0}
@media (min-width:62em){.colonnes{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.colonnes:first-child{margin-top:0}

/* -- Coordonnées (contact) : la liste des lieux, la valeur en grand à gauche */
.coordonnees a{text-decoration-thickness:1px}

/* -- Formulaire de devis (contact) : les champs courts par deux sur
   ordinateur, les longs sur toute la largeur. Mêmes angles que les boutons
   (--rayon), même vert pin pour le focus que pour les liens. */
.formulaire{display:grid;gap:1.25rem 1.25rem;align-content:start}
@media (min-width:40em){.formulaire{grid-template-columns:repeat(2,minmax(0,1fr))}.champ-large,.verification,.mention-rgpd,.boutons{grid-column:1/-1}}
.champ{display:grid;gap:.45rem;align-content:start}
.champ > label{font-size:.95rem;font-weight:500}
.obligatoire{color:var(--pin)}
.champ input,.champ select,.champ textarea{width:100%;min-height:3rem;padding:.75rem .95rem;border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--surface);color:var(--encre);font:inherit;font-size:1rem;line-height:1.4;transition:border-color .25s,box-shadow .25s}
.champ textarea{min-height:9rem;resize:vertical}
.champ select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:linear-gradient(45deg,transparent 50%,var(--encre-douce) 50%),linear-gradient(135deg,var(--encre-douce) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 50%,calc(100% - .9rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--encre-douce)}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:none;border-color:var(--pin);box-shadow:0 0 0 3px rgb(40 89 67/.18)}
.champ-aide{font-size:.9rem;color:var(--t-doux)}
.mention-rgpd{font-size:.88rem;line-height:1.55;color:var(--t-doux);max-width:46rem}
.boutons{display:flex;flex-wrap:wrap;gap:.75rem}
button.bouton{border:0;cursor:pointer}
/* Piège à robots : hors écran, jamais atteint au clavier (tabindex -1). */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Le widget Turnstile vit dans un shadow DOM fermé : ni :empty ni :has() ne
   le voient. Le conteneur reste hors de la grille (sinon une rangée vide
   et 22 px de saut au premier clic) tant que le widget n'annonce pas qu'il a
   quelque chose à faire cliquer (site.js, before-interactive-callback). */
.verification:not(.est-visible){display:none}
.formulaire-cote{display:grid;gap:1.25rem;align-content:start}
@media (min-width:62em){.formulaire-cote{position:sticky;top:calc(var(--entete) + 2rem)}}
.merci-urgent{margin-bottom:2rem;max-width:40rem}

/* -- Pages de texte (mentions légales, vie privée) : un bloc par rubrique,
   le titre à gauche et ses lignes à droite sur ordinateur */
.page-texte{padding-top:calc(var(--entete) + clamp(2.5rem,6vw,5rem))}
.page-texte h1{margin-block:1rem 1.25rem;font-size:clamp(2.4rem,1.4rem + 3vw,4rem)}
.page-texte > .conteneur > .intro{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.bloc-texte{display:grid;gap:1.25rem 3rem;padding-block:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--t-filet-fort)}
.bloc-texte h2{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem);font-weight:400;letter-spacing:-.012em}
.bloc-texte dl{display:grid;gap:1.1rem;max-width:44rem}
.bloc-texte dt{font-weight:500}
.bloc-texte dd{margin-top:.2rem;color:var(--t-doux)}
@media (min-width:62em){.bloc-texte{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.materiel-grille{display:grid;gap:2.5rem;align-items:center}
.materiel-texte{display:grid;gap:1.4rem}
.materiel-photo{aspect-ratio:3/4;max-height:44rem}
@media (min-width:62em){.materiel-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem)}}
.enonce-titre{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.enonce{font-size:clamp(1.35rem,1.05rem + 1.3vw,2.2rem);font-weight:300;line-height:1.42;letter-spacing:-.018em;max-width:58rem}

/* -- Zone : les communes en deux colonnes, en grand corps */
.zone-grille{display:grid;gap:2.5rem}
.zone-tete{margin-bottom:0}
.communes{columns:2;column-gap:2rem;font-size:clamp(1.15rem,.95rem + .9vw,1.75rem);font-weight:300;line-height:1.75;letter-spacing:-.012em}
.communes li{break-inside:avoid}
@media (max-width:29.99em){.communes{font-size:min(1.05rem,4.2vw);column-gap:1rem}.communes li{white-space:nowrap}}
@media (min-width:62em){.zone-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem);align-items:end}}
/* Ses quatre départements (réponse du 10 novembre 2026) : le Var d'abord, sur
   toute la largeur, les trois autres en dessous, plus courts. */
.departements{display:grid;gap:1.75rem 2rem}
.departement h3{margin-bottom:.35rem;padding-bottom:.5rem;border-bottom:1px solid var(--t-filet-fort);font-size:.95rem;font-weight:500;letter-spacing:.01em;color:var(--t-doux)}
.departement .communes{font-size:clamp(1.1rem,.95rem + .55vw,1.45rem);line-height:1.6}
/* à partir de 36em : le Var en trois colonnes, puis les Alpes-Maritimes à gauche
   et les deux plus petits empilés à droite, une colonne chacun et sans coupure
   (« Saint-Jean-Cap-Ferrat » se cassait en deux sur deux colonnes) */
@media (min-width:36em){.departements{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.departement:first-child{grid-column:1/-1}.departement:first-child .communes{columns:3}.departement:nth-child(2){grid-row:span 2}.departement:not(:first-child) .communes{columns:1}.departement .communes li{white-space:nowrap}}
@media (max-width:29.99em){.departement .communes{font-size:min(1.05rem,4.2vw)}}

/* -- Lieux de réception où il a joué (page mariage) */
.lieux-tete{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.lieux{display:grid;border-top:1px solid var(--t-filet-fort)}
.lieux li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;padding:.9rem 0;border-bottom:1px solid var(--t-filet);font-size:clamp(1.2rem,1rem + .9vw,1.8rem);font-weight:300;letter-spacing:-.015em;line-height:1.25}
.lieux span{font-size:.95rem;font-weight:400;letter-spacing:0;color:var(--t-doux)}
@media (min-width:62em){.lieux{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,5rem)}}

/* -- Avis : un seul emplacement, mis en scène */
.avis-grille{display:grid;gap:2.5rem;align-items:center}
.avis-texte{display:grid;gap:2rem}
.avis blockquote p{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);font-weight:300;line-height:1.28;letter-spacing:-.022em}
.avis figcaption{margin-top:1.25rem;color:var(--t-doux)}
/* le second avis, en retrait du premier : un seul grand corps par section */
.avis-court{padding-top:1.75rem;border-top:1px solid var(--t-filet)}
.avis-court blockquote p{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.5;letter-spacing:-.01em}
.avis-court figcaption{margin-top:.75rem}
.avis-photo{aspect-ratio:4/5;max-height:40rem}
@media (min-width:62em){.avis-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem)}.avis-photo{grid-column:1;grid-row:1}.avis-texte{grid-column:2}}

/* -- Conseils : une liste de titres (la photo de l’article suit le pointeur) */
.articles{border-bottom:1px solid var(--t-filet-fort)}
.articles a{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:44px;padding-block:1.5rem;border-top:1px solid var(--t-filet-fort);text-decoration:none}
.articles h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.85rem);font-weight:300;transition:color .3s,translate .6s var(--courbe)}
.articles a:hover h3,.articles a:focus-visible h3{color:var(--t-accent)}
:root[data-survol] .articles a:hover h3{translate:.6rem 0}
.articles .fleche{width:2rem;color:var(--t-accent)}

/* -- Questions fréquentes */
.faq-titre{margin-bottom:clamp(2rem,4vw,3rem)}
.faq{max-width:54rem;border-bottom:1px solid var(--t-filet-fort)}
.faq details{border-top:1px solid var(--t-filet-fort)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:44px;padding-block:1.3rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.35rem);font-weight:400}
.faq summary:hover h3{color:var(--t-accent)}
.faq-signe{position:relative;width:.95rem;height:.95rem;flex:none}
.faq-signe::before,.faq-signe::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--t-accent);transition:rotate .35s var(--courbe)}
.faq-signe::after{rotate:90deg}
.faq details[open] .faq-signe::after{rotate:0deg}
.faq details p{max-width:46rem;padding-bottom:1.6rem;color:var(--t-doux)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--courbe),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* -- Section finale : la nuit, le texte d’un côté, la photo jusqu’au bord */
.final{display:grid}
.final-texte{display:grid;gap:1.25rem;justify-items:start;align-content:center;padding:clamp(3.5rem,8vw,6rem) var(--gouttiere)}
.final-texte p{max-width:30rem;font-size:1.125rem;color:var(--t-doux)}
.final-photo{position:relative;order:-1;overflow:hidden;aspect-ratio:16/10;background:var(--nuit)}
.final-photo img{width:100%;height:100%;object-fit:cover}
.tel-grand{display:inline-flex;align-items:center;min-height:44px;margin-left:.5rem;font-size:1.35rem;font-weight:300;letter-spacing:-.01em;text-decoration:none}
.tel-grand:hover{color:var(--t-accent)}
@media (min-width:62em){
  .final{grid-template-columns:minmax(0,1fr) minmax(0,54%);min-height:38rem;padding-left:var(--bord)}
  .final-texte{padding:4rem clamp(2rem,5vw,5rem) 4rem 0}
  .final-photo{order:0;aspect-ratio:auto}
}

/* -- Pied */
.pied{padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:2rem;border-top:1px solid var(--t-filet);font-size:.98rem}
.pied-haut{display:grid;gap:2.5rem}
.pied-logo{width:11rem}
.pied-grille{display:grid;gap:2rem}
.pied-titre{margin-bottom:.4rem;font-weight:500}
.pied ul a{display:inline-flex;align-items:center;min-height:44px}
.pied-zone{margin-top:.75rem;max-width:22rem;color:var(--t-doux)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--t-filet);color:var(--t-doux);font-size:.9rem}
.pied-bas a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:48em){.pied-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:62em){.pied-haut{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}

/* -- Bulle des pages à venir */
.bulle{position:fixed;z-index:60;max-width:min(18rem,calc(100vw - 2rem));padding:.6rem .9rem;border-radius:var(--rayon);background:var(--encre);color:var(--clair);font-size:.875rem;line-height:1.35;text-align:center;pointer-events:none;translate:-50% calc(-100% - .6rem);opacity:0;transition:opacity .25s}
.bulle.dessous{translate:-50% .6rem}
.bulle.visible{opacity:1}

/* -- Le déroulé (page mariage) : un bac de vinyles. Sans script, en mouvement
   réduit et sous 62 em : une liste de pochettes, chacune avec son disque qui
   dépasse. Sur ordinateur, site.js pose .bac-vivant : la piste s’allonge, la
   scène s’épingle, et chaque temps sort du bac, avance vers l’écran et se pose
   à plat le temps d’être lu, puis cède la place au suivant. */
.journee{overflow-x:clip}
.journee-titre{margin-bottom:clamp(2.5rem,5vw,4rem)}
.bac{display:grid;gap:clamp(3.5rem,8vw,6rem)}
.pochette{display:grid;gap:1.5rem;align-items:center}
.pochette-photo{position:relative;width:min(70%,24rem);aspect-ratio:1}
.pochette-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:var(--rayon);box-shadow:0 0 0 1px rgb(236 240 237/.08),0 28px 50px -30px rgb(0 0 0/.9)}
.pochette-photo::before{content:"";position:absolute;top:4%;left:32%;width:92%;aspect-ratio:1;border-radius:50%;background:var(--disque);box-shadow:var(--disque-ombre)}
.pochette-texte{display:grid;gap:.85rem;align-content:start;max-width:30rem}
.pochette-texte h3{font-size:clamp(1.75rem,1.1rem + 2vw,3rem);font-weight:300;letter-spacing:-.03em;line-height:1.04}
.pochette-texte p{font-size:clamp(1.02rem,.98rem + .2vw,1.15rem);max-width:27rem}
@media (min-width:48em){.pochette{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(6.5rem,11vw,9rem)}.pochette-photo{width:100%}}
.bac-vivant{padding-block:0}
.bac-vivant .bac-piste{height:calc(100vh + var(--course,364vh))}
.bac-vivant .bac-scene{position:sticky;top:0;height:100vh;overflow:hidden;padding-top:calc(var(--entete) + clamp(1.25rem,4vh,2.75rem))}
.bac-vivant .bac-scene>div.conteneur{position:relative;z-index:70}
.bac-vivant .journee-titre{margin:0}
.bac-vivant .bac{position:absolute;inset:0;display:block;max-width:none;margin:0;padding:0}
.bac-vivant .pochette{position:absolute;inset:0;display:block;pointer-events:none}
.bac-vivant .pochette-photo{position:absolute;left:0;top:0;width:var(--S);height:var(--S);transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.bac-vivant .pochette-photo img{box-shadow:0 0 0 1px rgb(236 240 237/.12),0 44px 70px -34px rgb(0 0 0/.95)}
.bac-vivant .pochette-photo::before{inset:0;width:auto;aspect-ratio:auto;z-index:2;border-radius:var(--rayon);background:var(--nuit);box-shadow:none;opacity:var(--voile,0)}
.bac-vivant .pochette-photo::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--rayon);background:linear-gradient(112deg,rgb(var(--lumiere)/0) 40%,rgb(var(--lumiere)/.2) 50%,rgb(var(--lumiere)/0) 60%) no-repeat;background-size:280% 100%;background-position:var(--reflet,110%) 0;pointer-events:none}
.bac-vivant .pochette-texte{position:absolute;z-index:35;left:var(--tx);top:var(--ty);width:var(--tw);opacity:0;will-change:opacity,transform}
.bac-vivant .pochette-texte h3{font-size:clamp(2.2rem,1.1rem + 2.3vw,3.5rem)}
.bac-decor{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bac-arriere{z-index:5}
.bac-avant{z-index:30}
.bac-faisceau{position:absolute;z-index:1;left:var(--fx);top:0;width:70vh;height:var(--fh);margin-left:-35vh;pointer-events:none;mix-blend-mode:screen;background:conic-gradient(from 168deg at 50% 0,rgb(var(--lumiere)/0),rgb(var(--lumiere)/.13) 12deg,rgb(var(--lumiere)/0) 24deg);-webkit-mask:linear-gradient(180deg,transparent,#000 35%);mask:linear-gradient(180deg,transparent,#000 35%)}
.bac-dos{fill:var(--pin-fonce);opacity:.5}
.bac-cote{fill:var(--pin-fonce);opacity:.32}
.bac-face{fill:url(#bac-bois)}
.bac-arete{fill:none;stroke:rgb(var(--lumiere)/.42);stroke-width:1.5}
.bac-disque{position:absolute;z-index:39;left:0;top:0;width:calc(var(--S)*.94);aspect-ratio:1;border-radius:50%;background:var(--disque);box-shadow:0 0 0 1px rgb(236 240 237/.2),0 0 60px rgb(var(--lumiere)/.06),0 30px 60px -30px #000;opacity:0;will-change:transform;pointer-events:none}
.bac-disque::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,rgb(var(--lumiere)/0),rgb(var(--lumiere)/.13) 28deg,rgb(var(--lumiere)/0) 64deg 180deg,rgb(var(--lumiere)/.09) 214deg,rgb(var(--lumiere)/0) 250deg),repeating-radial-gradient(circle closest-side,rgb(236 240 237/.05) 0 1px,rgb(15 26 21/0) 1px 4px);-webkit-mask:radial-gradient(circle closest-side,transparent 32%,#000 33%);mask:radial-gradient(circle closest-side,transparent 32%,#000 33%)}
.bac-flaque{position:absolute;z-index:0;left:var(--rx);top:var(--ry);width:calc(var(--S)*1.9);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle closest-side,rgb(var(--lumiere)/.08),rgb(var(--lumiere)/0));pointer-events:none}

/* -- Formats (page entreprise) : la photo suit le format lu ou survolé. Sur
   ordinateur avec un pointeur, la liste devient un index en grand corps et la
   photo du format survolé suit le pointeur. */
.formats{display:grid;gap:2rem}
.formats-liste li{display:grid;gap:.4rem;padding-block:1.5rem;border-top:1px solid var(--t-filet-fort)}
.formats-liste h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);font-weight:300;transition:color .4s,translate .6s var(--courbe)}
.formats-visuel{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:.75rem;order:-1;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.formats-visuel .photo{aspect-ratio:4/5;scroll-snap-align:start}
@media (min-width:62em){
  .formats{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .formats-visuel{position:sticky;top:calc(var(--entete) + 2rem);display:block;order:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--rayon);background:var(--pierre)}
  .formats-visuel .photo{position:absolute;inset:0;border-radius:0;opacity:0;transition:opacity .8s var(--courbe)}
  .formats-visuel .photo:first-child,:root[data-js] .formats-visuel .photo.actif{opacity:1}
  :root[data-js] .formats-visuel .photo:first-child:not(.actif){opacity:0}
  :root[data-js]:not([data-survol]) .format:not(.actif) h3{color:var(--t-doux)}
  :root[data-survol] .formats{grid-template-columns:1fr}
  :root[data-survol] .formats-visuel{display:none}
  :root[data-survol] .format{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:baseline;padding-block:1.9rem}
  :root[data-survol] .formats-liste h3{font-size:clamp(1.7rem,1rem + 1.7vw,2.75rem)}
  :root[data-survol] .formats-liste:hover .format:not(:hover) h3{color:var(--t-doux)}
  :root[data-survol] .formats-liste .format:hover h3{translate:.6rem 0}
}

/* -- La photo qui suit le pointeur (listes) : elle s’ouvre en iris, comme sous
   un projecteur, et s’incline un peu dans le sens du mouvement. */
.suiveur{position:fixed;left:0;top:0;z-index:40;width:clamp(13rem,16vw,16.5rem);aspect-ratio:4/5;pointer-events:none;will-change:transform}
.suiveur-cadre{position:absolute;inset:0;overflow:hidden;border-radius:var(--rayon);background:var(--nuit);clip-path:circle(0% at 50% 50%);transition:clip-path .6s var(--courbe)}
.suiveur.visible .suiveur-cadre{clip-path:circle(72% at 50% 50%)}
.suiveur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.14;transition:opacity .45s,scale 1s var(--courbe)}
.suiveur img.actif{opacity:1;scale:1}
.suiveur-cadre::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,rgb(var(--lumiere)/.16),rgb(var(--lumiere)/0) 42%,rgb(15 26 21/.5) 100%)}

/* -- Introduction (une fois par session, posée par le script) : sur la nuit, le
   logo doré s’allume sous une douche de lumière, puis un iris s’ouvre sur la
   page. Sans script, data-intro n’existe pas ; si site.js ne vient pas, le
   rideau se lève de lui-même au bout de 2,5 s. */
:root[data-intro] body::after{content:"";position:fixed;inset:0;z-index:90;background:var(--nuit)}
:root[data-intro]:not([data-pret]) body::after{animation:leve .4s 2.5s forwards}
@keyframes leve{to{opacity:0;visibility:hidden}}
:root[data-intro] .seuil .chapo,:root[data-intro] .seuil .actions,:root[data-intro] .seuil .ariane,:root[data-intro] .seuil-photo img,:root[data-intro] .seuil .reperes{animation-play-state:paused}
.rideau{--r:-4rem;--a:0;position:fixed;inset:0;z-index:95;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgb(var(--lumiere)/0) calc(var(--r) - 1px),rgb(var(--lumiere)/var(--a)) var(--r),rgb(var(--lumiere)/0) calc(var(--r) + 9rem)),var(--nuit);-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 2.5rem));mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 2.5rem))}
.rideau-douche{position:absolute;left:50%;top:0;width:min(64rem,170vw);height:62vh;translate:-50% 0;opacity:0;background:conic-gradient(from 163deg at 50% 0,rgb(var(--lumiere)/0),rgb(var(--lumiere)/.16) 17deg,rgb(var(--lumiere)/0) 34deg);-webkit-mask:linear-gradient(180deg,rgb(0 0 0/.35),#000 70%,transparent);mask:linear-gradient(180deg,rgb(0 0 0/.35),#000 70%,transparent)}
.rideau-flaque{position:absolute;left:50%;top:50%;width:min(40rem,110vw);aspect-ratio:1;translate:-50% -50%;opacity:0;border-radius:50%;background:radial-gradient(circle closest-side,rgb(var(--lumiere)/.13),rgb(var(--lumiere)/0))}
.rideau-logo{position:relative;width:min(15rem,58vw);height:auto;opacity:.1;filter:brightness(.3)}

/* -- Mouvement : révélations lentes, photos qui se dévoilent du centre, titres
   qui montent mot à mot dans leur masque. Masqué seulement sous :root[data-js]
   et sans préférence de mouvement réduit ; si site.js ne se charge pas (pas de
   data-pret), tout réapparaît au bout de 2,5 s. Sans script, rien ne bouge. */
.mot{display:inline-block;overflow:clip;vertical-align:top;padding:.12em .06em .14em;margin:-.12em -.06em -.14em}
.mot>span,.mot-r{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  :root[data-js] [data-revele]{opacity:0;translate:0 1.5rem;transition:opacity 1s var(--courbe),translate 1.2s var(--courbe);transition-delay:calc(var(--rang,0)*110ms)}
  :root[data-js] [data-revele].vu{opacity:1;translate:none}
  :root[data-js] .devoile img{transition:clip-path 1.5s var(--courbe),scale 1.9s var(--courbe)}
  :root[data-js] .devoile:not(.vu) img{clip-path:inset(8% 8% 8% 8% round var(--rayon));scale:1.12}
  :root[data-js]:not([data-pret]) [data-revele],:root[data-js]:not([data-pret]) .devoile img{animation:filet 0s 2.5s forwards}
  .cascade>:nth-child(2){--rang:1}.cascade>:nth-child(3){--rang:2}.cascade>:nth-child(4){--rang:3}.cascade>:nth-child(5){--rang:4}
  :root[data-js] .lignes-pretes .mot>span{translate:0 110%;transition:translate 1.1s var(--courbe);transition-delay:calc(var(--l,0)*120ms + var(--retard,80ms))}
  :root[data-js] .lignes-pretes.lignes-vues .mot>span{translate:none}
  :root[data-js] .seuil .chapo,:root[data-js] .seuil .actions,:root[data-js] .seuil .ariane{animation:monte 1s var(--courbe) .5s both}
  :root[data-js] .seuil .actions{animation-delay:.65s}
  :root[data-js] .seuil .reperes{animation:monte 1s var(--courbe) .78s both}
  :root[data-js] .seuil-photo img{animation:dezoom 2.4s var(--courbe) both}
  :root[data-js] .lyre{animation:balaye var(--duree) ease-in-out var(--decal) infinite alternate}
}
@keyframes filet{to{opacity:1;translate:none;clip-path:none;scale:1}}
@keyframes monte{from{opacity:0;translate:0 1rem}}
@keyframes dezoom{from{scale:1.07}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}

/* -- Transitions de page : un iris de lumière se referme sur la page quittée,
   là où l’on a cliqué, puis se rouvre sur la suivante. Entre les deux, la nuit.
   L’en-tête passe dans l’iris avec la page : nommé à part, il se délavait dans
   le fondu de son groupe, et chaque moteur le traitait à sa façon. */
@view-transition{navigation:auto}
::view-transition{background:var(--nuit)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;-webkit-mask-image:radial-gradient(circle at var(--ix,50vw) var(--iy,50vh),#000 calc(var(--iris) - 3rem),transparent var(--iris));mask-image:radial-gradient(circle at var(--ix,50vw) var(--iy,50vh),#000 calc(var(--iris) - 3rem),transparent var(--iris))}
::view-transition-old(root){animation:iris-ferme .42s cubic-bezier(.55,0,.75,.6) both}
::view-transition-new(root){animation:iris-ouvre .6s cubic-bezier(.15,.6,.25,1) .34s both}
@keyframes iris-ferme{from{--iris:var(--iris-max,120vmax)}to{--iris:0px}}
@keyframes iris-ouvre{from{--iris:0px}to{--iris:var(--iris-max,120vmax)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;-webkit-mask-image:none;mask-image:none}}