/* assets/celebration.css — LA VARIANTE CÉLÉBRATION de la base graphique.
   Même largeur, même header, mêmes boutons que l'accueil (assets/base.css) :
   la page redéfinit les couleurs et ajoute ses composants, comme
   assets/wedding.css. La nuit de fête : noir chaud, bordeaux, or, crème —
   la palette des flyers MGR Célébration et du nouveau logo MGR Events
   (septembre 2026). Plus vivante que /mariage, jamais « DJ discount » : pas
   de dégradé décoratif, pas d'animation permanente — les blocs apparaissent
   en douceur au défilement, une fois, et c'est tout.
   Contrastes vérifiés (AA) : or sur noir 8,3:1, or sur bordeaux 5,9:1,
   crème sur bordeaux 11,8:1, petit texte doré sur crème 5,2:1. */

:root{
  --fond:#0E0C0B; --fond-2:#171311;
  --or:#C9A45C; --or-fonce:#7A5F24;
  --clair:#F3EDE2; --clair-2:#E9DDC6;
  --encre:#1A1512; --encre-2:#5C534A;
  --texte:#F3EDE2; --texte-2:rgba(243,237,226,.74); --texte-3:rgba(243,237,226,.55);
  --bord:rgba(243,237,226,.14); --bord-clair:rgba(26,21,18,.16);
  --bordeaux:#5A1020; --bordeaux-vif:#7A1A2C;
  --action-fond:var(--or); --action-texte:var(--encre);
}
html{color-scheme:dark}
#prestations{scroll-margin-top:84px}

/* ── Header : le logo MGR Events Paris, et l'univers à côté ────────────── */
.marque{gap:.9rem}
.marque .logo{display:flex;align-items:center;min-height:44px}
.marque .univers-nom{display:flex;align-items:center;min-height:44px;padding-left:.9rem;border-left:1px solid var(--bord);font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--or);transition:color var(--t)}
.marque .univers-nom:hover{color:var(--texte)}
/* Quatre liens + la marque + le bouton ne tiennent pas en dessous de
   1000 px : le menu passe au burger plus tôt que sur l'accueil (mêmes
   règles que base.css à 860 px). */
@media(max-width:1000px){
  .nav-liens,.nav .nav-cta{display:none}
  .burger{display:inline-flex}
  .nav-mobile{border-top:1px solid var(--bord);padding:.5rem var(--gout) 1rem}
  .nav-mobile.ouvert{display:block}
  .nav-mobile a{display:flex;align-items:center;min-height:48px;font-size:1.05rem;border-bottom:1px solid var(--bord)}
  .nav-mobile .nav-cta{display:inline-flex;margin-top:1rem;width:100%;justify-content:center;border-bottom:0}
}
@media(max-width:380px){.marque{gap:.6rem}.marque img{height:34px}.marque .univers-nom{padding-left:.6rem;letter-spacing:.22em}}

/* ── Surfaces et boutons ───────────────────────────────────────────────── */
.surface-fete{background:var(--bordeaux);color:var(--texte)}
.surface-sombre{background:var(--fond-2)}
/* L'or ne tient pas sur la crème : les accents des surfaces claires passent au bordeaux. */
.surface-claire h2 em{color:var(--bordeaux)}
.btn-bordeaux{background:var(--bordeaux);color:var(--clair)}
.btn-bordeaux:hover{background:var(--bordeaux-vif)}
.btn-or:hover,.nav-cta:hover{background:#D8B872}
.note-petite{font-size:.86rem;color:var(--texte-3);margin-top:1rem}
.centre{text-align:center}

/* ── Premier écran : trois phrases, et « un seul interlocuteur » ──────── */
.hero h1{line-height:1.04}
.hero .eyebrow{line-height:1.8}
.interlocuteur{display:flex;align-items:center;justify-content:space-between;gap:.8rem 2rem;flex-wrap:wrap;margin-top:2.2rem;padding:1.1rem 0;border-top:1px solid var(--or);border-bottom:1px solid var(--bord)}
/* margin/max-width : sinon ce paragraphe hérite de `.hero p` (centré, 560 px). */
.interlocuteur p{margin:0;max-width:none;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-3)}
.interlocuteur ul{display:flex;flex-wrap:wrap;align-items:center}
.interlocuteur li{display:flex;align-items:center}
.interlocuteur li+li::before{content:'·';color:var(--or);margin:0 .75rem}
.interlocuteur a{display:inline-flex;align-items:center;min-height:44px;font-size:.86rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:color var(--t)}
.interlocuteur a:hover{color:var(--or)}
/* Sur téléphone la liste passe sur deux lignes : des espaces plutôt que des
   points, pour qu'aucune ligne ne commence par « · ». */
@media(max-width:560px){.interlocuteur ul{column-gap:1.3rem}.interlocuteur li+li::before{display:none}}

/* ── 1. Les événements : six occasions, sur le bordeaux de la fête ─────── */
.occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.occasion{display:flex;flex-direction:column;gap:.7rem;min-height:210px;padding:clamp(1.3rem,2.4vw,1.8rem);border:1px solid rgba(243,237,226,.3);border-radius:var(--rayon);transition:border-color var(--t),background var(--t),transform var(--t)}
.occasion b{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.08;color:var(--or)}
.occasion span{color:var(--texte-2)}
.occasion small{margin-top:auto;align-self:flex-start;padding-bottom:.15rem;border-bottom:1px solid var(--or);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.occasion:hover{border-color:var(--or);background:rgba(243,237,226,.06);transform:translateY(-2px)}
@media(max-width:900px){.occasions{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.occasions{grid-template-columns:1fr}.occasion{min-height:0}}

/* ── 2. Une expérience pensée autour de vous ──────────────────────────── */
.experience{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.experience-intro h2{font-size:clamp(1.9rem,4vw,3rem);margin:.8rem 0 1rem}
.experience-intro p{color:var(--encre-2);max-width:460px;margin-bottom:1.6rem}
.experience-liste{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem}
.experience-liste li{padding-top:1rem;border-top:1px solid var(--bord-clair)}
.experience-liste b{display:block;font-weight:600;font-size:1.05rem;margin-bottom:.3rem}
.experience-liste span{color:var(--encre-2)}
@media(max-width:860px){.experience{grid-template-columns:1fr}}
@media(max-width:520px){.experience-liste{grid-template-columns:1fr}}

/* ── 3. DJ & ambiance : les univers en damier, comme les flyers ───────── */
.univers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:clamp(2.6rem,6vw,4.2rem)}
.univers li{--t-fond:var(--clair);--t-texte:var(--encre);--t-texte-2:var(--encre-2);
  display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;min-height:190px;padding:clamp(1.1rem,2vw,1.5rem);border-radius:var(--rayon);background:var(--t-fond);color:var(--t-texte)}
.univers b{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1}
.univers span{font-size:.93rem;color:var(--t-texte-2)}
/* Le damier dépend du nombre de colonnes : sur quatre, 1-3-6-8 en bordeaux. */
.univers li:is(:nth-child(8n+1),:nth-child(8n+3),:nth-child(8n+6),:nth-child(8n+8)){--t-fond:var(--bordeaux);--t-texte:var(--texte);--t-texte-2:var(--texte-2)}
@media(max-width:900px){
  /* minmax(0,…) : sans lui, « Généraliste » en grand corps élargit sa
     colonne et la page déborde sur les petits téléphones. */
  .univers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .univers b{font-size:clamp(1.35rem,6.2vw,2.4rem)}
  .univers li:nth-child(n){--t-fond:var(--clair);--t-texte:var(--encre);--t-texte-2:var(--encre-2)}
  .univers li:is(:nth-child(4n+1),:nth-child(4n+4)){--t-fond:var(--bordeaux);--t-texte:var(--texte);--t-texte-2:var(--texte-2)}
}
@media(max-width:420px){.univers{gap:10px}.univers li{min-height:150px;padding:14px}.univers span{font-size:.88rem}}

.ages-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.ages-grille .photo{aspect-ratio:4/5;max-height:560px}
/* Un portrait de DJ : cadré sur le visage quand la photo passe en bandeau
   (téléphone), comme les fiches DJ de l'accueil. */
.ages-grille .photo img{object-position:center 22%}
.ages h3{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:1.3rem}
.ages dl{border-top:1px solid var(--bord)}
.ages dl div{display:grid;grid-template-columns:130px 1fr;gap:.2rem 1.2rem;padding:1rem 0;border-bottom:1px solid var(--bord)}
.ages dt{padding-top:.4em;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.ages dd{color:var(--texte-2)}
.ages dd b{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.25;color:var(--texte)}
.note{margin-top:1.3rem;color:var(--texte-2)}
.note em{font-style:italic;color:var(--or)}
@media(max-width:760px){.ages-grille{grid-template-columns:1fr}.ages-grille .photo{aspect-ratio:16/11}}
@media(max-width:420px){.ages dl div{grid-template-columns:1fr}}

/* ── 4 à 6. Un texte, une grande photo ────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.duo-photo{aspect-ratio:4/5;max-height:640px}
.duo-texte h2{font-size:clamp(1.9rem,4vw,3rem);margin:.8rem 0 1rem}
.duo-texte>p{color:var(--texte-2);font-size:1.05rem;max-width:520px}
.points{display:grid;gap:.6rem;margin:1.4rem 0 1.8rem}
.points li{position:relative;padding-left:1.3rem}
.points li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--or)}
.duo-actions{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.duo{grid-template-columns:1fr}.duo-photo{max-height:none}}

/* Le prix d'appel du photobooth, à la taille des flyers. */
.prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem;margin:1.6rem 0 .2rem}
.prix-de{width:100%;font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.prix-montant{font-family:var(--serif);font-size:clamp(3.6rem,8vw,5.6rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.prix-mention{font-size:1rem;font-weight:600;color:var(--texte-2)}

/* ── 7. Réalisations : la mosaïque de la base, vidéos comprises ───────── */
.photo video{display:block;width:100%;height:100%;object-fit:cover}
.mosaique .photo img{transition:transform .6s ease}
.mosaique .photo:hover img{transform:scale(1.03)}

/* ── 8. Comment ça fonctionne ─────────────────────────────────────────── */
.deroule{list-style:none;counter-reset:pas;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:2.4rem}
.deroule li{counter-increment:pas;display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.2rem,2.4vw,1.6rem);background:#FFF;border:1px solid var(--bord-clair);border-radius:var(--rayon)}
.deroule li::before{content:counter(pas,decimal-leading-zero);font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--bordeaux)}
.deroule b{font-weight:600;font-size:1.08rem;line-height:1.3}
.deroule p{color:var(--encre-2);font-size:.96rem}
@media(max-width:900px){.deroule{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.deroule{grid-template-columns:1fr}}

/* ── 9. Avis ───────────────────────────────────────────────────────────── */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.temoin{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.2rem,2.4vw,1.7rem);background:var(--fond-2);border:1px solid var(--bord);border-radius:var(--rayon)}
.temoin blockquote{font-size:1rem;line-height:1.65}
.temoin blockquote::before{content:'“';display:block;height:1.6rem;font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--or)}
.temoin figcaption{color:var(--texte-2);font-size:.9rem}
.temoin figcaption b{color:var(--texte);font-weight:600}
.source{margin-top:1.2rem;font-size:.85rem;color:var(--texte-3)}
@media(max-width:900px){.avis{grid-template-columns:1fr}}

/* ── 10. Le devis : l'intro sur le bordeaux, le formulaire sur la crème ── */
.surface-fete .projet-intro p,.surface-fete .projet-intro address{color:var(--texte-2)}
.surface-fete .projet-intro address a{color:var(--texte);border-bottom-color:var(--or)}
.garanties{display:grid;gap:.5rem;margin-top:1.4rem}
.garanties li{position:relative;padding-left:1.3rem;font-weight:500}
.garanties li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--or)}
.carte-form{background:var(--clair);border-color:transparent;color:var(--encre);color-scheme:light}
.carte-form :focus-visible{outline-color:var(--encre)}
.etapes{flex-wrap:wrap}
@media(max-width:480px){.etapes{gap:.4rem .9rem;letter-spacing:.08em}}
.aide{margin-top:.35rem;font-size:.82rem;color:var(--encre-2)}
.champ legend small,.champ label small{margin-left:.4rem;font-size:.76rem;font-weight:400;letter-spacing:0;text-transform:none}
.rappel{margin:-.4rem 0 1.2rem;padding:.7rem .95rem;background:#FFF;border-radius:var(--rayon-s);font-size:.92rem;font-weight:500}
.rappel[hidden]{display:none}
/* Les choix en pastilles : la pastille, c'est le <span> — l'état coché se
   lit sans :has(), sur tous les navigateurs. */
.choix{display:flex;flex-wrap:wrap;gap:.5rem}
.choix label{position:relative;display:inline-flex;margin:0;cursor:pointer}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--bord-clair);border-radius:999px;background:#FFF;color:var(--encre);font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;transition:border-color var(--t),background var(--t),color var(--t)}
.choix label:hover span{border-color:var(--encre)}
.choix input:checked+span{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--clair)}
.choix input:focus-visible+span{outline:2px solid var(--encre);outline-offset:2px}
.merci:focus{outline:0}

/* ── La barre « Demander mon devis », téléphone et tablette ───────────── */
.barre-devis{display:none}
@media(max-width:1000px){
  .barre-devis{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.7rem var(--gout) calc(.7rem + env(safe-area-inset-bottom,0px));background:var(--fond);border-top:1px solid var(--bord);transform:translateY(110%);transition:transform .25s ease}
  .barre-devis.visible{transform:none}
  .barre-devis .btn{width:100%}
  footer{padding-bottom:calc(2rem + 76px)}
}

/* ── Apparition au défilement (jamais sous « mouvement réduit ») ──────── */
/* `translate` et non `transform` : les cartes gardent leur léger
   soulèvement au survol. */
.js-reveal [data-reveal]{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s ease}
.js-reveal [data-reveal].vu{opacity:1;translate:none}