/* =====================================================================
   MG & Co Studio — feuille de style de la page d'accueil
   ---------------------------------------------------------------------
   Sommaire :
     1.  Variables (couleurs, polices, textures)  -> :root
     2.  Base et remise a zero
     3.  Surfaces bois (.mur, .planche, .rivet)
     4.  Typographie (h1, h2, h3, p)
     5.  Barre de navigation (.barre)
     6.  Banniere d'accueil (.hero, .panneau, .accroche)
     7.  Boutons (.bouton)
     8.  Bandeau fiche facon HUD (.hud, .jauge)
     9.  Sections courantes (.duo, .cadre, .liste-nue)
    10.  Cartes du studio (.trio, .carte)
    11.  Contact et pied de page
    12.  Adaptatif (media queries)

   Pour changer l'ambiance generale, il suffit de modifier les variables
   du bloc :root ci-dessous : tout le reste s'y refere.
   ===================================================================== */

:root{
  --nuit:#120E09;
  --bois:#22190F;
  --bois-clair:#3A2A19;
  --fer:#6E6355;
  --fer-clair:#9A8C79;
  --or:#F0A81B;
  --or-vif:#FFC53D;
  --or-pale:#FFDD93;
  --parchemin:#E4D7BC;
  --jungle:#5C7A45;
  --texte:#CFC0A2;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --corps:'Barlow','Helvetica Neue',Arial,sans-serif;
  --pixel:'Silkscreen','Courier New',monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='400' height='120' filter='url(%23f)' opacity='0.6'/%3E%3C/svg%3E");
}
:root:not([data-theme="light"]){color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--nuit);
  color:var(--texte);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--or-vif);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--or-vif);outline-offset:3px}

.enveloppe{width:min(1180px,92vw);margin-inline:auto}

/* ---------- surfaces bois ---------- */
.mur{
  position:relative;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 35%,rgba(0,0,0,.6)),
    repeating-linear-gradient(90deg,#1E160D 0 118px,#241A0F 118px 120px,#150F08 120px 124px),
    #1E160D;
}
.mur::before{
  content:"";position:absolute;inset:0;
  background-image:var(--fibre);
  background-size:400px 120px;
  opacity:.16;mix-blend-mode:overlay;pointer-events:none;
}
.planche{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,220,150,.07),rgba(0,0,0,.35)),
    repeating-linear-gradient(180deg,#31240F 0 6px,#2A1F0D 6px 11px),
    #2E2210;
  border:1px solid #100B05;
  border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,214,150,.13);
}
.planche::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  background-image:var(--fibre);background-size:420px 130px;
  opacity:.2;mix-blend-mode:overlay;pointer-events:none;
}
/* rivets de fer */
.rivet{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#B6A48A,#5B5044 55%,#241D14);
  box-shadow:0 1px 2px rgba(0,0,0,.8), inset 0 -1px 1px rgba(0,0,0,.5);
}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;margin:0;letter-spacing:.01em}
h1{font-size:clamp(2.9rem,7.2vw,5.6rem);color:var(--parchemin);text-transform:uppercase}
h2{font-size:clamp(2rem,4.6vw,3.3rem);color:var(--or);text-transform:uppercase}
h3{font-size:1.45rem;color:var(--or-pale);text-transform:uppercase;letter-spacing:.02em}
p{margin:0 0 1.05em;max-width:62ch}

/* ---------- barre de navigation ---------- */
.barre{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#191207,#100C06);
  border-bottom:2px solid #443A2B;
  box-shadow:0 6px 18px rgba(0,0,0,.65);
}
.barre .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.marque{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--or);letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.marque span{color:var(--fer-clair)}
.menu{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.menu a{
  font-family:var(--corps);font-weight:600;font-size:.94rem;
  color:var(--texte);text-decoration:none;padding:.25rem 0;
  border-bottom:2px solid transparent;
}
.menu a:hover,.menu a:focus-visible{color:var(--or-vif);border-bottom-color:var(--or)}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero .enveloppe{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.panneau{transform-origin:50% 8%;animation:pose 1.15s cubic-bezier(.22,1.2,.36,1) both;filter:drop-shadow(0 26px 40px rgba(0,0,0,.75))}
@keyframes pose{
  0%{transform:rotate(-7deg) translateY(-42px) scale(.94);opacity:0}
  55%{opacity:1}
  70%{transform:rotate(2.2deg) translateY(0) scale(1)}
  85%{transform:rotate(-1.1deg)}
  100%{transform:rotate(0deg) translateY(0) scale(1);opacity:1}
}
.accroche{max-width:34ch}
.accroche h1{margin-bottom:1.1rem}
.accroche h1 em{font-style:normal;color:var(--or);display:block}
.chapeau{font-size:1.14rem;color:#BDAD8E;margin-bottom:1.8rem}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- boutons ---------- */
.bouton{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:1.22rem;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  padding:.62rem 1.7rem;border-radius:3px;cursor:pointer;
  transition:transform .13s ease, box-shadow .13s ease, background .13s ease;
}
.bouton-or{
  color:#1A1206;
  background:linear-gradient(180deg,var(--or-vif),#D18F12);
  border:1px solid #8C5E09;
  box-shadow:0 4px 0 #744E08, 0 10px 20px rgba(0,0,0,.5);
}
.bouton-or:hover,.bouton-or:focus-visible{transform:translateY(2px);box-shadow:0 2px 0 #744E08,0 6px 14px rgba(0,0,0,.5)}
.bouton-fer{
  color:var(--parchemin);
  background:linear-gradient(180deg,#3B3125,#251E15);
  border:1px solid #574A38;
  box-shadow:0 4px 0 #16110B, 0 10px 20px rgba(0,0,0,.45);
}
.bouton-fer:hover,.bouton-fer:focus-visible{transform:translateY(2px);box-shadow:0 2px 0 #16110B,0 6px 14px rgba(0,0,0,.45);color:var(--or-vif)}

/* ---------- bandeau fiche (style HUD du jeu) ---------- */
.hud{background:linear-gradient(180deg,#0D0A06,#151009);border-block:2px solid #3E3425;padding:1.35rem 0}
.hud .enveloppe{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.jauge{position:relative;padding:.75rem 1rem .8rem}
.jauge .rivet{width:9px;height:9px}
.jauge .rivet:nth-of-type(1){top:7px;left:7px}
.jauge .rivet:nth-of-type(2){top:7px;right:7px}
.jauge .rivet:nth-of-type(3){bottom:7px;left:7px}
.jauge .rivet:nth-of-type(4){bottom:7px;right:7px}
.jauge dt{font-family:var(--pixel);font-size:.6rem;color:#9C8A6A;margin-bottom:.4rem}
.jauge dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.32rem;color:var(--or-vif);text-transform:uppercase;line-height:1.05}

/* ---------- sections ---------- */
section{padding:clamp(3.4rem,7vw,6rem) 0}
.titre-section{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:1.8rem}
.titre-section::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#6B5A3C,transparent)}

.duo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.duo.inverse{grid-template-columns:1.15fr 1fr}
.cadre{position:relative;padding:14px;border-radius:4px}
.cadre img{border-radius:2px;border:1px solid #0A0703;box-shadow:0 10px 26px rgba(0,0,0,.6)}
.cadre .rivet:nth-of-type(1){top:9px;left:9px}
.cadre .rivet:nth-of-type(2){top:9px;right:9px}
.cadre .rivet:nth-of-type(3){bottom:9px;left:9px}
.cadre .rivet:nth-of-type(4){bottom:9px;right:9px}
.legende{font-size:.87rem;color:#95866A;margin:.75rem 0 0;font-style:italic}

.liste-nue{list-style:none;padding:0;margin:0 0 1.4rem}
.liste-nue li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;max-width:58ch}
.liste-nue li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--or);transform:rotate(45deg);
}

/* ---------- studio : trois planches ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.carte{position:relative;padding:1.9rem 1.5rem 1.7rem}
.carte .rivet:nth-of-type(1){top:11px;left:11px}
.carte .rivet:nth-of-type(2){top:11px;right:11px}
.carte h3{margin-bottom:.7rem}
.carte p{margin:0;font-size:.97rem;color:#B9A984}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,#0E0A06,#160F07)}
.contact .enveloppe{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center}
.contact h2{margin-bottom:.8rem}

/* ---------- pied ---------- */
footer{background:#0A0704;border-top:2px solid #332B1F;padding:1.9rem 0;font-size:.87rem;color:#7E7059}
footer .enveloppe{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
footer a{color:#A8956F;text-decoration:none}
footer a:hover{color:var(--or-vif)}

/* ---------- adaptatif ---------- */
@media (max-width:920px){
  .hero .enveloppe{grid-template-columns:1fr;text-align:center}
  .accroche{max-width:none;margin-inline:auto}
  .accroche p{margin-inline:auto}
  .actions{justify-content:center}
  .panneau{order:-1}
  .duo,.duo.inverse{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .hud .enveloppe{grid-template-columns:repeat(2,1fr)}
  .contact .enveloppe{grid-template-columns:1fr}
  .menu{gap:1.1rem}
  .liste-nue li{margin-inline:auto}
}
@media (max-width:560px){
  .menu{display:none}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}