/*
Theme Name: Miss Mister Mélanine
Theme URI: https://missmistermelanine.com
Author: Comité Miss Mister Mélanine
Description: Thème officiel du concours Miss Mister Mélanine (Bénin) : page d'accueil animée, catégories, galerie, calendrier et formulaire de candidature avec photo. Les candidatures sont enregistrées dans le tableau de bord (menu « Candidatures ») et envoyées par e-mail.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: missmistermelanine
*/

/* Identité noir et or reprise du logo ; une bande aux cinq carnations porte la page ; colonne de 1080px */
:root{
  --bg:#080605; --surface:#15100C; --ink:#F4E9DA; --muted:#BFAE98; --line:#2E241B;
  --gold:#D9AE3F; --gold2:#F3D47A; --gold3:#A9781C; --green:#3DBE84; --red:#F06B5B; --cta-ink:#120C06;
  --display:"Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --t1:clamp(2.2rem, 6vw, 4.2rem); --t2:clamp(1.7rem, 3.8vw, 2.6rem); --t3:1.2rem;
  --s1:#3B2219; --s2:#A8673F; --s3:#F2DCCB; --s4:#E4A982; --s5:#5A3424; --s5p:#F1D3BF;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
section[id]{scroll-margin-top:80px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Drapeau */
.flag{display:flex;height:5px}
.flag span{flex:1}
.flag span:nth-child(1){background:#0C7A4B;flex:.4}
.flag span:nth-child(2){background:#E8C11C}
.flag span:nth-child(3){background:#D2382A}

/* Barre de navigation collante */
.topbar{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.topbar.scrolled{background:rgba(8,6,5,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.admin-bar .topbar{top:32px}
@media (max-width:782px){.admin-bar .topbar{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.78rem;letter-spacing:.32em;color:var(--gold);text-decoration:none}
.mark{height:34px;width:auto;display:block;mix-blend-mode:lighten}
.navlinks{display:flex;gap:22px;flex-wrap:wrap;font-weight:600;font-size:.93rem}
.navlinks a{text-decoration:none;color:var(--muted);position:relative;padding-block:4px;transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a.cta{color:var(--gold)}
.menuBtn{display:none;background:none;border:1.5px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 16px;font:600 .9rem var(--body);cursor:pointer}
@media (max-width:860px){
  .menuBtn{display:block}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:rgba(8,6,5,.97);border-bottom:1px solid var(--line);padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px))}
  .navlinks a{padding-block:12px;border-bottom:1px solid var(--line);font-size:1.05rem}
  .topbar.open .navlinks{display:flex}
  .topbar.open{background:rgba(8,6,5,.97)}
}

/* Hero */
.hero{padding-block:24px 64px;display:grid;gap:26px;position:relative}
.hero::before{content:"";position:absolute;inset:-120px 0 auto;height:520px;background:radial-gradient(closest-side at 35% 45%,rgba(217,174,63,.14),transparent);pointer-events:none;z-index:-1}
.logo{display:block;width:min(540px,100%);height:auto;mix-blend-mode:lighten}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:48px;align-items:center;padding-top:40px}
  .hero > *{grid-column:1}
  .hero > .logo{grid-column:2;grid-row:1 / span 5;justify-self:end;width:100%}
  .hero > .heroPhoto{grid-column:1 / -1;margin-top:12px}
}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.76rem;font-weight:700;color:var(--gold)}
.hero h1{font-size:var(--t1);font-weight:600;letter-spacing:-.005em;max-width:16ch}
.goldtext{font-style:italic;background:linear-gradient(100deg,var(--gold3) 0%,var(--gold) 30%,#FFF1C2 45%,var(--gold) 60%,var(--gold3) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.thesis{font-size:clamp(1.1rem,2.2vw,1.35rem);max-width:40ch;color:var(--muted)}
.thesis strong{color:var(--ink)}
.heroRow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--cta-ink);border:0;border-radius:999px;padding:14px 26px;font:700 1rem var(--body);text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(217,174,63,.6)}
.btn:hover::after{left:120%}
.btn.ghost{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn.small{padding:8px 16px;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* Compte à rebours */
.countdown{display:grid;gap:10px}
.countdown .label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(217,174,63,.6);animation:pulse 2s infinite}
.countdown.open .dot{background:var(--green);box-shadow:0 0 0 0 rgba(61,190,132,.6)}
.countdown.closed .dot{background:var(--red);animation:none}
.cd{display:flex;gap:10px;flex-wrap:wrap}
.cd div{min-width:72px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.cd b{display:block;font:600 1.7rem/1.1 var(--display);color:var(--gold2);font-variant-numeric:tabular-nums}
.cd small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Photo de couverture */
.heroPhoto{margin:0;border-radius:20px;overflow:hidden;display:grid;position:relative;box-shadow:0 30px 80px -40px rgba(217,174,63,.35)}
.heroPhoto img{display:block;width:100%;height:auto;aspect-ratio:1080/719;object-fit:cover;max-width:100%}
.spectrum{display:grid;grid-template-columns:repeat(5,1fr);height:12px}
.spectrum div{transform-origin:left}
.sw1{background:var(--s1)} .sw2{background:var(--s2)} .sw3{background:var(--s3)}
.sw4{background:var(--s4);background-image:radial-gradient(circle at 20% 30%,#B8653A 0 2px,transparent 3px),radial-gradient(circle at 60% 55%,#B8653A 0 1.6px,transparent 2.6px),radial-gradient(circle at 40% 80%,#B8653A 0 1.8px,transparent 2.8px);background-size:34px 30px}
.sw5{background:var(--s5);background-image:radial-gradient(ellipse 38% 28% at 30% 30%,var(--s5p) 60%,transparent 62%),radial-gradient(ellipse 30% 40% at 75% 70%,var(--s5p) 60%,transparent 62%),radial-gradient(ellipse 18% 14% at 20% 82%,var(--s5p) 60%,transparent 62%)}

/* Sections */
section{padding-block:72px;border-top:1px solid var(--line)}
.sechead{display:grid;gap:12px;margin-bottom:32px}
.sechead h2{font-size:var(--t2);font-weight:600}
.lead{color:var(--muted);max-width:62ch}
.mission{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.mission > div{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:1.5px solid var(--gold3)}
.mission h3{font-size:var(--t3);font-weight:600}
.mission p{color:var(--muted)}
.quote{margin-top:44px;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.35;max-width:30ch;text-wrap:balance}
.quote span{color:var(--gold)}

/* Catégories */
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.cat{display:grid;gap:12px;align-content:start}
.cat .chip{aspect-ratio:1/1;max-width:min(100%,150px);width:100%;border-radius:50%;box-shadow:0 0 0 1.5px var(--line);transition:transform .45s var(--ease),box-shadow .45s}
.cat:hover .chip{transform:translateY(-6px) rotate(-8deg) scale(1.04);box-shadow:0 0 0 2px var(--gold),0 18px 40px -18px rgba(217,174,63,.6)}
.cat h3{font-size:1.1rem;font-weight:600}
.cat p{color:var(--muted);font-size:.95rem}
.sexe{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-weight:600}
.pill{border:1.5px solid var(--line);border-radius:999px;padding:6px 16px;background:var(--surface)}
@media (max-width:820px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.gallery figure{margin:0;display:grid;gap:10px}
.gallery .frame{overflow:hidden;border-radius:16px}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:1080/719;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{color:var(--muted);font-size:.92rem}

/* Cartes dates / contact */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.date{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:6px;align-content:start;transition:border-color .3s,transform .3s var(--ease)}
.date:hover{border-color:var(--gold3);transform:translateY(-3px)}
.date .k{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--muted)}
.date .v{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--gold2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.date .n{color:var(--muted);font-size:.92rem}

/* Formulaire */
.cform{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,4vw,36px)}
.cform > fieldset.all{border:0;padding:0;margin:0;display:grid;gap:18px;min-width:0}
.cform > fieldset.all[disabled]{opacity:.55}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.cform label{display:grid;gap:6px;font-weight:600;font-size:.95rem;min-width:0}
.cform input,.cform select,.cform textarea{font:400 1rem var(--body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.cform textarea{min-height:110px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 4px rgba(217,174,63,.15)}
.cform fieldset.group{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.cform legend{font-weight:600;font-size:.95rem;margin-bottom:8px;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{display:flex;align-items:center;gap:8px;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;background:var(--bg);transition:border-color .2s,transform .2s var(--ease)}
.choices label:hover{transform:translateY(-1px)}
.choices label:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold2)}
.choices input{width:auto;accent-color:var(--gold)}
.consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important}
.consent input{width:auto!important;margin-top:5px;accent-color:var(--gold)}
.hint{color:var(--muted);font-size:.88rem;font-weight:400}
.cform input[type=file]{padding:10px;cursor:pointer}
.cform input[type=file]::file-selector-button{font:700 .9rem var(--body);background:var(--gold);color:var(--cta-ink);border:0;border-radius:999px;padding:8px 16px;margin-right:12px;cursor:pointer}
.photoPreview{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.photoPreview img{width:120px;height:150px;object-fit:cover;border-radius:12px;border:1.5px solid var(--gold);animation:pop .4s var(--ease)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.notice{border-radius:16px;padding:18px 20px;display:grid;gap:6px;margin-bottom:18px;border:1.5px solid var(--gold3);background:var(--surface)}
.notice.err{border-color:var(--red)}
.notice.ok{border-color:var(--green)}
.notice strong{font-family:var(--display);font-size:1.2rem}
.formErr{color:var(--red);font-weight:600}
.success{display:grid;gap:14px;justify-items:start;text-align:left;background:var(--surface);border:1.5px solid var(--green);border-radius:20px;padding:clamp(22px,5vw,44px)}
.success .crown{font-size:2.4rem;line-height:1;animation:pop .6s var(--ease)}
.success h3{font-size:clamp(1.5rem,3vw,2rem)}

/* Pages internes */
.page-content{padding-block:56px 80px;max-width:760px}
.page-content h1{font-size:var(--t2);margin-bottom:24px}

footer.site{border-top:1px solid var(--line);padding-block:32px 40px;color:var(--muted);font-size:.92rem}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,174,63,.55)}70%{box-shadow:0 0 0 12px rgba(217,174,63,0)}100%{box-shadow:0 0 0 0 rgba(217,174,63,0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes tick{0%{transform:translateY(-35%);opacity:.2}100%{transform:none;opacity:1}}

@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .9s var(--ease) both}
  .hero > .logo{animation:fadeScale 1.1s var(--ease) both}
  .hero > :nth-child(2){animation-delay:.25s}
  .hero > :nth-child(3){animation-delay:.38s}
  .hero > :nth-child(4){animation-delay:.5s}
  .hero > :nth-child(5){animation-delay:.62s}
  .hero > :nth-child(6){animation-delay:.74s}
  .hero > :nth-child(7){animation-delay:.86s}
  .heroPhoto img{animation:kenburns 2.8s var(--ease) both}
  .heroPhoto .spectrum div{animation:grow .7s var(--ease) both}
  .heroPhoto .spectrum div:nth-child(1){animation-delay:1.1s}
  .heroPhoto .spectrum div:nth-child(2){animation-delay:1.2s}
  .heroPhoto .spectrum div:nth-child(3){animation-delay:1.3s}
  .heroPhoto .spectrum div:nth-child(4){animation-delay:1.4s}
  .heroPhoto .spectrum div:nth-child(5){animation-delay:1.5s}
  .goldtext{animation:shimmer 6s ease-in-out 1.2s infinite}
  .cd b.tick{animation:tick .35s var(--ease)}

  /* Apparition au défilement (seulement si JavaScript actif) */
  .js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i, 0) * 90ms)}
  .js .reveal.in{opacity:1;transform:none}
  .js .cat.reveal .chip{transform:scale(.6) rotate(-30deg);transition:transform .9s var(--ease);transition-delay:calc(var(--i, 0) * 90ms + 120ms)}
  .js .cat.reveal.in .chip{transform:none}
  .js .cat.reveal.in:hover .chip{transform:translateY(-6px) rotate(-8deg) scale(1.04);transition-delay:0s}
  .js .mission > div.reveal{border-top-color:transparent;transition:opacity .8s var(--ease),transform .8s var(--ease),border-color 1.2s var(--ease);transition-delay:calc(var(--i, 0) * 120ms)}
  .js .mission > div.reveal.in{border-top-color:var(--gold3)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
}

/* Bande au-dessus de la barre collante (encoche des téléphones) */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:60;background:var(--bg)}

/* Nos reines */
.queens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-bottom:18px}
.queen{margin:0;display:grid;gap:14px;align-content:start}
.qframe{position:relative;border-radius:22px;overflow:hidden;padding:2px;background:linear-gradient(140deg,var(--gold2),var(--gold3) 35%,var(--gold) 65%,var(--gold2));box-shadow:0 30px 70px -40px rgba(217,174,63,.55)}
.qframe img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;max-width:100%;transition:transform 1.1s var(--ease)}
.queen:hover .qframe img{transform:scale(1.04)}
.qframe::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,241,194,.38) 50%,transparent 62%);transform:translateX(-130%)}
.queen figcaption{display:grid;gap:4px;justify-items:start}
.queen strong{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:600;color:var(--gold2);line-height:1.2}
.crownTag{font-size:1.5rem;line-height:1}
.credit{color:var(--muted);font-size:.85rem;margin-bottom:40px}
@media (max-width:560px){.queens{grid-template-columns:1fr}}

/* Réseaux dans le pied de page */
.social{display:flex;gap:18px;flex-wrap:wrap}
.social a{color:var(--gold);text-decoration:none;font-weight:600}
.social a:hover{text-decoration:underline}

@media (prefers-reduced-motion:no-preference){
  .js .queen.reveal.in .qframe::after{animation:sheen 1.8s var(--ease) calc(var(--i, 0) * 200ms + 500ms) both}
  .js .queen.reveal .crownTag{display:inline-block;transform:translateY(-14px) scale(.4);opacity:0;transition:transform .8s var(--ease),opacity .6s;transition-delay:calc(var(--i, 0) * 200ms + 700ms)}
  .js .queen.reveal.in .crownTag{transform:none;opacity:1}
}
@keyframes sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}