/* assets/base.css — LA BASE GRAPHIQUE DU SITE, partagée par l'accueil et
   /mariage. Extraite telle quelle de index.html : largeur, header, boutons,
   typographie, sections, mosaïque, fiches DJ, formulaire, pied de page.
   Une page qui change de palette redéfinit les variables de :root dans son
   propre fichier (assets/wedding.css) — elle ne réécrit pas ces règles. */
/* ═══════════════════════════════════════════════════════════════════════
   DIRECTION ESTHÉTIQUE — cf. brief « Direction esthétique du site MGR ».
   Noir profond, or discret, titres à empattements. Surfaces claires pour
   lire et saisir. Pas d'effet de verre, pas de dégradé décoratif, pas
   d'animation permanente : la qualité vient des espacements, des
   alignements et des cadrages.
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --fond:#111210; --fond-2:#181916;
  --or:#C7AC72; --or-fonce:#A88E58;
  --clair:#F5F4EF; --clair-2:#ECEAE3;
  --encre:#20211E; --encre-2:#5D5E58;
  --texte:#F5F4EF; --texte-2:rgba(245,244,239,.72); --texte-3:rgba(245,244,239,.5);
  --bord:rgba(245,244,239,.14); --bord-clair:rgba(32,33,30,.16);
  --erreur:#B4432F;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --wrap:1180px; --gout:clamp(20px,4vw,48px);
  --rayon:14px; --rayon-s:10px;
  --t:.18s ease;
  /* L'action principale de la page, pour les composants partagés qui ne
     connaissent pas le thème (le bandeau cookies, assets/consent.js) :
     ici l'or, sur /mariage l'encre. */
  --action-fond:var(--or); --action-texte:var(--encre);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--fond);color:var(--texte);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
.surface-claire :focus-visible{outline-color:var(--encre)}
section{scroll-margin-top:84px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gout)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;color:var(--or)}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or);font-weight:500}
.surface-claire .eyebrow{color:var(--or-fonce)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--or);color:var(--encre);padding:.6rem 1rem;border-radius:8px;z-index:200;font-weight:600}
.skip:focus{top:12px}

/* ── Boutons : deux niveaux, pas plus ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.5rem;border-radius:var(--rayon-s);font-weight:600;font-size:.95rem;line-height:1;transition:background var(--t),color var(--t),border-color var(--t)}
.btn-or{background:var(--or);color:var(--encre)}
.btn-or:hover{background:#D4BB85}
.btn-encre{background:var(--encre);color:var(--clair)}
.btn-encre:hover{background:#33342F}
.btn-ligne{color:var(--texte);border-bottom:1px solid var(--or);border-radius:0;padding:0;min-height:0;line-height:1.7}
.btn-ligne:hover{color:var(--or)}
.surface-claire .btn-ligne{color:var(--encre);border-bottom-color:var(--or-fonce)}
.surface-claire .btn-ligne:hover{color:var(--or-fonce)}

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--fond);border-bottom:1px solid var(--bord)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:72px}
.marque{display:flex;align-items:center;gap:.8rem;min-height:44px}
.marque img{height:24px;width:auto}
.marque b{font-weight:600;letter-spacing:.2em;font-size:.82rem;display:block;line-height:1.2}
.marque small{display:block;font-size:.62rem;letter-spacing:.28em;color:var(--or);line-height:1.2;margin-top:2px}
.nav-liens{display:flex;gap:1.9rem;font-size:.95rem}
.nav-liens a{padding:.6rem 0;color:var(--texte-2);transition:color var(--t)}
.nav-liens a:hover,.nav-liens a[aria-current]{color:var(--texte)}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1.3rem;border-radius:var(--rayon-s);background:var(--or);color:var(--encre);font-weight:600;font-size:.92rem;transition:background var(--t)}
.nav-cta:hover{background:#D4BB85}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px}
.burger span{display:block;width:20px;height:2px;background:var(--texte);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--texte)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav-mobile{display:none}
@media(max-width:860px){
  .nav-liens,.nav .nav-cta{display:none}
  .burger{display:inline-flex}
  .nav-mobile{display:none;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}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-texte{text-align:center;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.6rem);margin:1.1rem 0 1.4rem}
.hero p{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--texte-2);max-width:560px;margin:0 auto}
.hero-actions{display:flex;gap:1.6rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:2rem}
/* Trois largeurs différentes, UNE hauteur : la rangée fixe la hauteur, les photos la remplissent. Sans ça, le bas de la rangée est en dents de scie. */
.hero-photos{display:grid;grid-template-columns:.9fr 1.3fr .8fr;grid-auto-rows:clamp(300px,36vw,520px);gap:12px;margin-top:clamp(2.6rem,6vw,4.5rem)}
.photo{position:relative;overflow:hidden;border-radius:var(--rayon);background:var(--fond-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.1rem .9rem;font-size:.92rem;font-weight:500;color:var(--clair);
  /* Le seul dégradé de la page : un voile sous la légende, pour qu'elle reste lisible sur n'importe quelle photo. Fonctionnel, pas décoratif. */
  background:linear-gradient(to top,rgba(17,18,16,.78),rgba(17,18,16,0))}
.hero-photos .photo{height:100%}
@media(max-width:700px){
  .hero-photos{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(200px,52vw,300px)}
  .hero-photos .photo:first-child{grid-column:1/-1}
}
.confiance{display:flex;align-items:center;gap:1.4rem 2.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--bord);font-size:.95rem;color:var(--texte-2)}
.confiance small{font-size:.78rem;color:var(--texte-3);letter-spacing:.04em}

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec{padding:clamp(3.6rem,8vw,6.5rem) 0}
.surface-claire{background:var(--clair);color:var(--encre)}
.sec-tete{display:grid;grid-template-columns:1.3fr 1fr;gap:1.5rem 3rem;align-items:end;margin-bottom:2.4rem}
.sec-tete h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:.8rem}
.sec-tete p{color:var(--texte-2);max-width:420px}
.surface-claire .sec-tete p{color:var(--encre-2)}
@media(max-width:760px){.sec-tete{grid-template-columns:1fr}}

/* ── Savoir-faire : trois parcours ────────────────────────────────────── */
.onglets{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.onglet{min-height:48px;padding:0 1.3rem;border-radius:999px;border:1px solid var(--bord-clair);color:var(--encre);font-weight:500;transition:background var(--t),color var(--t),border-color var(--t)}
.onglet:hover{border-color:var(--encre)}
.onglet[aria-selected="true"]{background:var(--encre);color:var(--clair);border-color:var(--encre)}
.panneau{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.panneau[hidden]{display:none}
.panneau .photo{aspect-ratio:4/5;max-height:560px}
.panneau h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;margin-bottom:1rem}
.panneau p{color:var(--encre-2);font-size:1.05rem}
.panneau ul{margin:1.4rem 0 1.9rem;display:grid;gap:.6rem}
.panneau li{padding-left:1.3rem;position:relative;color:var(--encre)}
.panneau li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--or-fonce)}
.panneau-actions{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.panneau{grid-template-columns:1fr}.panneau .photo{aspect-ratio:16/11}}

/* ── Réalisations : grandes photos, proportions variées ───────────────── */
/* Même principe : rangées de hauteur fixe, une grande photo prend deux colonnes. Sept photos = neuf unités = trois rangées pleines, aucun trou. */
.mosaique{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(220px,24vw,340px);gap:14px}
.mosaique .photo{height:100%}
.mosaique .photo.large{grid-column:span 2}
.mosaique figcaption{display:flex;flex-direction:column;gap:.15rem}
.mosaique figcaption span{font-size:.8rem;font-weight:400;color:rgba(245,244,239,.78)}
@media(max-width:760px){
  .mosaique{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(180px,30vw,260px)}
  .mosaique .photo.large{grid-column:1/-1}
}
@media(max-width:480px){.mosaique{grid-template-columns:1fr;grid-auto-rows:clamp(220px,62vw,300px)}}

/* ── Nos DJs : portraits, fiche au clic ───────────────────────────────── */
.djs{background:var(--fond-2)}
.grille-djs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dj{text-align:left;border-radius:var(--rayon);overflow:hidden;background:var(--fond);display:flex;flex-direction:column;transition:transform var(--t)}
.dj:hover{transform:translateY(-2px)}
.dj .photo{aspect-ratio:3/4;border-radius:0}
.dj .photo img{object-position:center 18%}
.dj-infos{padding:.95rem 1rem 1.1rem}
.dj-infos b{display:block;font-weight:600;font-size:1.02rem}
.dj-infos span{display:block;color:var(--texte-2);font-size:.88rem;margin-top:.15rem}
@media(max-width:900px){.grille-djs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.grille-djs{grid-template-columns:repeat(2,1fr);gap:10px}.dj-infos{padding:.75rem .8rem .9rem}}

/* Fiche DJ : <dialog> natif — focus, Échap et fond gérés par le navigateur */
dialog.fiche{border:0;padding:0;background:transparent;max-width:min(92vw,880px);width:100%;margin:auto}
dialog.fiche::backdrop{background:rgba(17,18,16,.82)}
.fiche-corps{display:grid;grid-template-columns:1fr 1.1fr;background:var(--clair);color:var(--encre);border-radius:var(--rayon);overflow:hidden}
.fiche-corps .photo{border-radius:0;aspect-ratio:3/4;min-height:100%}
.fiche-corps .photo img{object-position:center 15%}
.fiche-texte{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1rem}
.fiche-texte h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.fiche-ligne{display:grid;grid-template-columns:110px 1fr;gap:.4rem 1rem;font-size:.98rem}
.fiche-ligne dt{color:var(--encre-2);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding-top:.2em}
.fiche-actions{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:.6rem}
.fiche-corps .btn-ligne{color:var(--encre);border-bottom-color:var(--or-fonce)}
.fiche-corps .btn-ligne:hover{color:var(--or-fonce)}
.fermer{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;background:rgba(32,33,30,.08);color:var(--encre);display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1}
.fermer:hover{background:rgba(32,33,30,.16)}
@media(max-width:640px){.fiche-corps{grid-template-columns:1fr}.fiche-corps .photo{aspect-ratio:4/3}}

/* ── Votre projet : formulaire en deux étapes ─────────────────────────── */
.projet-grille{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.projet-intro h2{font-size:clamp(1.9rem,4vw,3rem);margin:.8rem 0 1rem}
.projet-intro p{color:var(--encre-2);max-width:420px}
.projet-intro address{font-style:normal;margin-top:1.6rem;color:var(--encre-2);font-size:.95rem}
.projet-intro address a{color:var(--encre);font-weight:500;border-bottom:1px solid var(--or-fonce)}
.carte-form{background:#FFF;border:1px solid var(--bord-clair);border-radius:var(--rayon);padding:clamp(1.3rem,3vw,2.2rem)}
.etapes{display:flex;gap:1.2rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:1.6rem}
.etapes span[aria-current]{color:var(--encre);font-weight:600}
.etape[hidden]{display:none}
.champ{margin-bottom:1.1rem}
.champ label,.champ legend{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:.45rem}
.champ input,.champ textarea{width:100%;min-height:50px;padding:.8rem .95rem;border:1px solid var(--bord-clair);border-radius:var(--rayon-s);font:inherit;color:var(--encre);background:#FFF;transition:border-color var(--t)}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ textarea:focus{border-color:var(--encre);outline:0}
.champ [aria-invalid="true"]{border-color:var(--erreur)}
.erreur{display:none;color:var(--erreur);font-size:.86rem;margin-top:.4rem}
.erreur.visible{display:block}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.deux{grid-template-columns:1fr}}
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.types label{position:relative;display:flex;align-items:center;min-height:52px;padding:0 1rem;border:1px solid var(--bord-clair);border-radius:var(--rayon-s);cursor:pointer;font-weight:500;font-size:.98rem;letter-spacing:0;text-transform:none;color:var(--encre);margin:0;transition:border-color var(--t),background var(--t)}
.types input{position:absolute;opacity:0;width:1px;height:1px}
.types label:hover{border-color:var(--encre)}
.types input:checked+span{font-weight:600}
.types label:has(input:checked){border-color:var(--encre);background:var(--clair)}
.types label:has(input:focus-visible){outline:2px solid var(--encre);outline-offset:2px}
.puce{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .5rem .35rem .9rem;border-radius:999px;background:var(--encre);color:var(--clair);font-size:.92rem;font-weight:500}
.puce button{width:28px;height:28px;border-radius:50%;background:rgba(245,244,239,.18);display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1}
.puce button:hover{background:rgba(245,244,239,.32)}
.puce-zone{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;min-height:44px;margin-bottom:1.1rem}
.puce-zone small{color:var(--encre-2)}
.indice{font-size:.9rem;color:var(--encre-2);margin:-.3rem 0 1.1rem;padding:.8rem .95rem;background:var(--clair);border-radius:var(--rayon-s)}
.indice a{color:var(--encre);font-weight:500;border-bottom:1px solid var(--or-fonce)}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.retour{display:inline-flex;align-items:center;min-height:48px;color:var(--encre-2);font-weight:500}
.retour:hover{color:var(--encre)}
.form-note{font-size:.82rem;color:var(--encre-2);margin-top:1rem}
.merci{text-align:center;padding:1.5rem 0}
.merci h3{font-size:1.8rem;margin-bottom:.6rem}
.merci p{color:var(--encre-2)}
@media(max-width:860px){.projet-grille{grid-template-columns:1fr}}

/* ── Pied de page ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--bord);padding:2.4rem 0 2rem}
footer .wrap{display:flex;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;align-items:center;font-size:.92rem;color:var(--texte-2)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
footer nav a{padding:.5rem 0;transition:color var(--t)}
footer nav a:hover{color:var(--texte)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}