/* =====================================================================
   Espace client mfdy.digital
   Identite reprise du site : encre, or, creme. Big Shoulders + Jakarta.
   ===================================================================== */

:root{
  --bg:#0D0B06;
  --bg-carte:#14110A;
  --bg-carte-haut:#191509;
  --gold:#C8820A;
  --gold-clair:#E0A231;
  --red:#D04B1A;
  --vert:#4E9A5A;
  --cream:#F0E5C8;
  --cream-dim:rgba(240,229,200,.45);
  --cream-faint:rgba(240,229,200,.12);
  --rayon:14px;
  --gouttiere:clamp(18px, 4vw, 44px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}

/* Les navigateurs donnent 40 px de marge laterale aux <figure>. Sans ca, les
   cartes de la galerie sont ecrasees dans leur colonne et leur bouton deborde. */
figure,figcaption{margin:0}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(200,130,10,.13), transparent 62%),
    var(--bg);
  color:var(--cream);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

[hidden]{display:none !important}

a{color:inherit}

h1,h2,h3{
  font-family:"Big Shoulders Display", "Plus Jakarta Sans", sans-serif;
  font-weight:900;
  line-height:.95;
  letter-spacing:.01em;
  margin:0;
  text-transform:uppercase;
}

/* --------------------------------- Boutons -------------------------- */

.btn{
  font:inherit;
  font-weight:500;
  letter-spacing:.04em;
  border:1px solid transparent;
  border-radius:999px;
  padding:.72rem 1.4rem;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  min-height:44px;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--gold-clair); outline-offset:3px}

.btn--or{background:var(--gold); color:#0D0B06; border-color:var(--gold)}
.btn--or:hover{background:var(--gold-clair); border-color:var(--gold-clair)}
.btn--or[disabled]{opacity:.5; cursor:progress}

.btn--fantome{background:transparent; color:var(--cream-dim); border-color:var(--cream-faint)}
.btn--fantome:hover{color:var(--cream); border-color:rgba(240,229,200,.35)}

.btn--petit{padding:.5rem 1rem; font-size:.85rem; min-height:38px}

/* -------------------------------- Connexion ------------------------- */

.login{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--gouttiere);
}
.login__card{
  width:min(440px, 100%);
  background:linear-gradient(180deg, var(--bg-carte-haut), var(--bg-carte));
  border:1px solid var(--cream-faint);
  border-radius:22px;
  padding:clamp(28px, 6vw, 44px);
  text-align:center;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.login__logo{width:120px; height:auto; margin-bottom:1.6rem; opacity:.95}
.login__titre{font-size:clamp(2.4rem, 9vw, 3.2rem); color:var(--cream)}
.login__sous{color:var(--cream-dim); font-size:.95rem; margin:.9rem 0 1.9rem}
.login__form{display:grid; gap:1rem; text-align:left}
.login__msg{min-height:1.4rem; margin:1.1rem 0 0; font-size:.9rem}
.login__msg.est-ok{color:var(--gold-clair)}
.login__msg.est-erreur{color:var(--red)}
.login__aide{margin:1.6rem 0 0; font-size:.8rem; color:var(--cream-dim)}
.login__aide a{color:var(--gold)}

.champ{display:grid; gap:.45rem}
.champ__label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim)}
.champ input{
  font:inherit;
  color:var(--cream);
  background:rgba(0,0,0,.35);
  border:1px solid var(--cream-faint);
  border-radius:10px;
  padding:.8rem .95rem;
  min-height:48px;
  width:100%;
}
.champ input:focus{outline:none; border-color:var(--gold)}

/* --------------------------------- Entete --------------------------- */

.entete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem var(--gouttiere);
  max-width:var(--max);
  margin:0 auto;
  width:100%;
}
.entete__marque{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.entete__marque img{width:92px; height:auto}
.entete__marque span{
  font-family:"Big Shoulders Display", sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.9rem;
  color:var(--cream-dim);
  border-left:1px solid var(--cream-faint);
  padding-left:.8rem;
}
.entete__droite{display:flex; align-items:center; gap:.6rem}

.selecteur{
  font:inherit;
  font-size:.85rem;
  color:var(--cream);
  background:var(--bg-carte);
  border:1px solid var(--cream-faint);
  border-radius:999px;
  padding:.5rem .9rem;
  min-height:38px;
}

/* --------------------------------- Onglets -------------------------- */

.onglets{
  display:flex;
  gap:.3rem;
  padding:0 var(--gouttiere);
  max-width:var(--max);
  margin:0 auto .6rem;
  width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--cream-faint);
}
.onglets::-webkit-scrollbar{display:none}
.onglets__item{
  text-decoration:none;
  color:var(--cream-dim);
  font-size:.86rem;
  letter-spacing:.05em;
  padding:.85rem 1rem;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .18s ease, border-color .18s ease;
}
.onglets__item:hover{color:var(--cream)}
.onglets__item.est-actif{color:var(--gold); border-bottom-color:var(--gold)}

/* ------------------------------- Principal -------------------------- */

.principal{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(20px, 4vw, 42px) var(--gouttiere) 80px;
  width:100%;
}

.sur-titre{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  color:var(--gold);
  margin:0 0 .6rem;
}
.titre{font-size:clamp(2.4rem, 7vw, 4rem); color:var(--cream)}
.titre-section{
  font-size:clamp(1.3rem, 3.4vw, 1.7rem);
  color:var(--cream);
  margin:2.6rem 0 1rem;
}
.chapo{color:var(--cream-dim); max-width:60ch; margin:1rem 0 2rem; font-size:.98rem}

/* --------------------------------- Tuiles --------------------------- */

.tuiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1rem;
}
.tuile{
  display:block;
  text-decoration:none;
  background:linear-gradient(180deg, var(--bg-carte-haut), var(--bg-carte));
  border:1px solid var(--cream-faint);
  border-radius:var(--rayon);
  padding:1.4rem;
  transition:border-color .2s ease, transform .2s ease;
}
.tuile:hover{border-color:rgba(200,130,10,.5); transform:translateY(-2px)}
.tuile__nombre{
  font-family:"Big Shoulders Display", sans-serif;
  font-size:3rem;
  line-height:1;
  color:var(--gold);
  display:block;
}
.tuile__nom{
  display:block;
  margin-top:.5rem;
  font-weight:500;
  color:var(--cream);
  letter-spacing:.02em;
}
.tuile__note{display:block; color:var(--cream-dim); font-size:.85rem; margin-top:.2rem}

/* --------------------------------- Listes --------------------------- */

.liste{display:grid; gap:.7rem}

.ligne{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--bg-carte);
  border:1px solid var(--cream-faint);
  border-radius:var(--rayon);
  padding:1rem 1.1rem;
  flex-wrap:wrap;
}
.ligne__corps{flex:1 1 260px; min-width:0}
.ligne__titre{
  font-weight:500;
  color:var(--cream);
  margin:0;
  overflow-wrap:anywhere;
}
.ligne__meta{
  color:var(--cream-dim);
  font-size:.83rem;
  margin:.25rem 0 0;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}
.ligne__actions{display:flex; gap:.5rem; flex-wrap:wrap}

.pastille{
  display:inline-flex;
  align-items:center;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:999px;
  padding:.22rem .7rem;
  border:1px solid currentColor;
}
.pastille--attente{color:var(--gold)}
.pastille--paye,.pastille--accepte,.pastille--en_ligne{color:var(--vert)}
.pastille--refuse,.pastille--suspendu{color:var(--red)}
.pastille--neutre{color:var(--cream-dim)}

.vide{
  border:1px dashed var(--cream-faint);
  border-radius:var(--rayon);
  padding:2.4rem 1.4rem;
  text-align:center;
  color:var(--cream-dim);
  font-size:.92rem;
}

/* --------------------------------- Site ----------------------------- */

.carte-site{
  background:linear-gradient(180deg, var(--bg-carte-haut), var(--bg-carte));
  border:1px solid var(--cream-faint);
  border-radius:20px;
  overflow:hidden;
}
.carte-site__apercu{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  border-bottom:1px solid var(--cream-faint);
  background:#000;
}
.carte-site__corps{padding:clamp(20px, 4vw, 32px)}
.carte-site__url{
  color:var(--gold);
  text-decoration:none;
  font-size:1.05rem;
  overflow-wrap:anywhere;
}
.carte-site__url:hover{text-decoration:underline}
.infos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1.1rem;
  margin:1.6rem 0;
  padding:1.4rem 0;
  border-top:1px solid var(--cream-faint);
  border-bottom:1px solid var(--cream-faint);
}
.infos__cle{
  display:block;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:.3rem;
}
.infos__valeur{color:var(--cream); overflow-wrap:anywhere}

/* -------------------------------- Filtres --------------------------- */

.filtres{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.6rem}
.filtre{
  font:inherit;
  font-size:.84rem;
  color:var(--cream-dim);
  background:transparent;
  border:1px solid var(--cream-faint);
  border-radius:999px;
  padding:.45rem 1rem;
  cursor:pointer;
  min-height:38px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.filtre:hover{color:var(--cream)}
.filtre.est-actif{color:#0D0B06; background:var(--gold); border-color:var(--gold)}

/* -------------------------------- Galerie --------------------------- */

.galerie{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:1rem;
}
.visuel{
  background:var(--bg-carte);
  border:1px solid var(--cream-faint);
  border-radius:var(--rayon);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.visuel__vignette{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  background:#000;
  display:block;
}
.visuel__placeholder{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35);
  font-family:"Big Shoulders Display", sans-serif;
  font-size:1.6rem;
  color:var(--cream-dim);
  letter-spacing:.1em;
}
.visuel__corps{padding:.8rem .9rem; display:grid; gap:.5rem}
.visuel__nom{font-size:.85rem; color:var(--cream); overflow-wrap:anywhere; margin:0}
.visuel__meta{font-size:.75rem; color:var(--cream-dim); margin:0}

/* ---------------------------------- Pied ---------------------------- */

.pied{
  max-width:var(--max);
  margin:0 auto;
  padding:1.4rem var(--gouttiere) 2.4rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid var(--cream-faint);
  color:var(--cream-dim);
  font-size:.8rem;
}
.pied a{color:var(--cream-dim); text-decoration:none}
.pied a:hover{color:var(--gold)}

/* ------------------------------ Chargement -------------------------- */

.chargement{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--bg);
  z-index:50;
  transition:opacity .3s ease;
}
.chargement[hidden]{display:none}
.chargement__point{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--gold);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(.6); opacity:.35}
  50%{transform:scale(1); opacity:1}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}