/* ---------- variables ---------- */
:root{
  --blanc:#ffffff;
  --voile:#f4f7fb;
  --argent:#c5cdd8;
  --argent-fonce:#78838f;
  --or:#b8892a;
  --or-clair:#e3c473;
  --bleu:#173a6b;
  --bleu-vif:#2f63ad;
  --bleu-pale:#e6eef8;
  --encre:#16202e;
  --encre-doux:#4d5a6a;
  --ligne:#dfe5ed;
  --ombre:0 1px 0 rgba(23,58,107,.04), 0 8px 24px -16px rgba(23,58,107,.3);
}

:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --blanc:#0f1720;
    --voile:#16212e;
    --argent:#39465a;
    --argent-fonce:#97a5b6;
    --or:#e0c076;
    --or-clair:#f2dda4;
    --bleu:#8fb5e8;
    --bleu-vif:#4f8ada;
    --bleu-pale:#1c2b3d;
    --encre:#eaf0f7;
    --encre-doux:#b4c0cd;
    --ligne:#243243;
    --ombre:0 8px 24px -16px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"]{
  --blanc:#0f1720; --voile:#16212e; --argent:#39465a; --argent-fonce:#97a5b6;
  --or:#e0c076; --or-clair:#f2dda4; --bleu:#8fb5e8; --bleu-vif:#4f8ada;
  --bleu-pale:#1c2b3d; --encre:#eaf0f7; --encre-doux:#b4c0cd;
  --ligne:#243243; --ombre:0 8px 24px -16px rgba(0,0,0,.8);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{
  font-family:Cinzel,Georgia,"Times New Roman",serif;
  font-weight:700;line-height:1.2;margin:0;letter-spacing:.01em
}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.4rem,3.5vw,2rem)}
h3{font-size:1.05rem;font-weight:500}
p{margin:0 0 1rem}
a{color:var(--bleu-vif)}
.wrap{width:min(1060px,92vw);margin-inline:auto}
.prose{max-width:62ch}

/* ---------- filet doré ---------- */
.filet{
  height:2px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--argent) 12%,var(--bleu) 34%,var(--or) 50%,var(--bleu) 66%,var(--argent) 88%,transparent);
}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--blanc) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.bar{display:flex;align-items:center;gap:1.25rem;padding:.7rem 0;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit;margin-right:auto}
.marque .nom{font-family:Cinzel,serif;font-weight:700;font-size:1.05rem;line-height:1.1}
.marque .serveur{display:block;font-family:Inter,sans-serif;font-size:.72rem;font-weight:500;color:var(--argent-fonce);letter-spacing:.06em}
nav.site{display:flex;gap:.25rem;flex-wrap:wrap}
nav.site a{
  text-decoration:none;color:var(--encre-doux);font-size:.92rem;font-weight:500;
  padding:.45rem .8rem;border-radius:2px;border:1px solid transparent;
}
nav.site a:hover{color:var(--encre);border-color:var(--ligne)}
nav.site a[aria-current="page"]{
  color:var(--bleu);border-color:var(--argent);
  background:var(--bleu-pale);
  box-shadow:inset 0 -2px 0 var(--bleu);
}

/* ---------- vues ---------- */
.vue{display:none;padding-bottom:4rem}
.vue.active{display:block}

/* ---------- héros ---------- */
.heros{
  position:relative;text-align:center;
  padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--bleu) 12%,transparent), transparent 60%),
    radial-gradient(70% 55% at 50% 4%, color-mix(in srgb,var(--or) 10%,transparent), transparent 70%),
    linear-gradient(var(--voile),var(--blanc));
  border-bottom:1px solid var(--ligne);
}
.heros::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--bleu) 30%,var(--or) 50%,var(--bleu) 70%,transparent);
}
.heros .devise{
  font-family:Cinzel,serif;font-size:.85rem;color:var(--bleu);
  letter-spacing:.14em;margin-bottom:1.25rem;
}
.heros h1{margin-bottom:.6rem}
.heros h1 .ligne2{
  display:block;font-size:.42em;font-weight:500;color:var(--argent-fonce);
  letter-spacing:.2em;margin-top:.9rem;
}
.heros p{color:var(--encre-doux);margin-inline:auto;max-width:54ch}
.crest{width:104px;height:auto;margin:0 auto 1.4rem;display:block}

/* ---------- logo guilde ---------- */
.emblem{
  width:34px;height:34px;flex:none;object-fit:cover;border-radius:3px;
  border:1px solid var(--or);box-shadow:0 0 0 1px var(--bleu-pale);
}
.logo-guilde{
  display:block;width:min(430px,78vw);height:auto;margin:0 auto 1.75rem;
  border-radius:4px;border:1px solid var(--or);
  box-shadow:0 0 0 4px var(--blanc), 0 0 0 5px var(--argent), 0 18px 40px -22px rgba(23,58,107,.65);
}
.sceau{
  width:88px;height:88px;object-fit:cover;border-radius:50%;
  display:block;margin:0 auto 1.25rem;
  border:2px solid var(--or);box-shadow:0 0 0 4px var(--blanc), 0 0 0 5px var(--argent);
}

/* ---------- boutons ---------- */
.actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.93rem;
  padding:.7rem 1.5rem;border-radius:2px;cursor:pointer;font-family:Inter,sans-serif;
  border:1px solid var(--bleu);
  background:linear-gradient(180deg,var(--bleu-vif),var(--bleu));
  color:#fff;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or-clair) 55%,transparent);
}
.btn:hover{filter:brightness(1.1)}
.btn.fantome{
  background:none;color:var(--bleu);border-color:var(--argent);box-shadow:none
}
.btn.fantome:hover{border-color:var(--or);filter:none}

/* ---------- colonnes ---------- */
section.bloc{padding:clamp(2.5rem,6vw,4rem) 0}
.entete{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}
.entete h2{white-space:nowrap;color:var(--bleu)}
.entete .trait{flex:1;height:1px;background:linear-gradient(90deg,var(--bleu),var(--or) 45%,var(--ligne))}
.colonnes{
  display:grid;gap:2.5rem;grid-template-columns:1.25fr .85fr;align-items:start
}
@media (max-width:760px){.colonnes{grid-template-columns:1fr;gap:1.75rem}}

/* ---------- fiche ---------- */
dl.fiche{margin:0;border-top:1px solid var(--ligne)}
dl.fiche div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--ligne)
}
dl.fiche dt{color:var(--argent-fonce);font-size:.86rem;margin:0}
dl.fiche dd{margin:0;font-weight:600;font-size:.9rem;text-align:right}

/* ---------- postes ---------- */
ul.postes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
ul.postes li{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.95rem .25rem;border-bottom:1px solid var(--ligne);
}
.pion{width:28px;height:28px;flex:none}
.poste-nom{font-family:Cinzel,serif;font-weight:700;font-size:1rem}
.poste-det{
  display:block;font-family:Inter,sans-serif;font-weight:400;
  font-size:.84rem;color:var(--encre-doux)
}
.statut{
  font-size:.76rem;font-weight:600;padding:.25rem .6rem;
  border:1px solid;border-radius:999px;white-space:nowrap
}
.statut.prio{
  color:#7a5406;border-color:var(--or);
  background:color-mix(in srgb,var(--or) 16%,transparent)
}
.statut.ouvert{
  color:var(--bleu);border-color:var(--bleu-vif);
  background:var(--bleu-pale)
}
.statut.ferme{
  color:var(--argent-fonce);border-color:var(--ligne);
  background:var(--voile)
}

/* ---------- étapes ---------- */
ol.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;gap:0}
ol.etapes li{
  counter-increment:e;display:grid;grid-template-columns:auto 1fr;
  gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid var(--ligne)
}
ol.etapes li:first-child{border-top:1px solid var(--ligne)}
ol.etapes li::before{
  content:counter(e);
  font-family:Cinzel,serif;font-size:1.1rem;color:var(--bleu);
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border:1px solid var(--argent);border-radius:50%;
  background:var(--bleu-pale);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--or) 40%,transparent);
}
ol.etapes h3{
  font-family:Cinzel,serif;font-weight:700;margin-bottom:.15rem;color:var(--bleu)
}
ol.etapes p{margin:0;color:var(--encre-doux);font-size:.94rem}

/* ---------- formulaire ---------- */
form{margin-top:.5rem}
.grille{display:grid;gap:1.1rem 1.5rem;grid-template-columns:1fr 1fr}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ.large{grid-column:1/-1}
@media (max-width:640px){.grille{grid-template-columns:1fr}}
label{font-size:.85rem;font-weight:600;color:var(--encre)}
label .opt{font-weight:400;color:var(--argent-fonce)}
input,select,textarea{
  font:inherit;font-size:.94rem;color:var(--encre);
  background:var(--voile);
  border:1px solid var(--ligne);border-bottom:2px solid var(--argent);
  border-radius:2px;padding:.6rem .7rem;width:100%;
}
textarea{min-height:110px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--bleu-vif);outline-offset:1px;
  border-bottom-color:var(--bleu);background:var(--blanc);
}
.aide{font-size:.8rem;color:var(--argent-fonce)}
.pied-form{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem
}

.recap{
  margin-top:1.75rem;padding:1.4rem;border:1px solid var(--bleu-vif);
  border-top:3px solid var(--or);
  background:var(--bleu-pale);border-radius:2px;
}
.recap[hidden]{display:none}
.recap h3{
  font-family:Cinzel,serif;font-weight:700;margin-bottom:.5rem;color:var(--bleu)
}
.recap pre{
  white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.84rem;background:var(--blanc);border:1px solid var(--ligne);
  padding:.9rem;border-radius:2px;overflow-x:auto;margin:.75rem 0;
}

/* ---------- image chantier ---------- */
.atelier {
  position: relative;
  width: 100%;
  height: 600px;
  background-image: url('https://image.noelshack.com/fichiers/2026/38/3/1789573323-banni-re-de-chargement.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.atelier::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.contenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  text-align: center;
  width: 80%;
  font-size: 1.4rem;
}

/* ---------- footer ---------- */
footer.site{
  border-top:2px solid var(--bleu);
  background:linear-gradient(180deg,var(--bleu-pale),var(--voile));
  padding:2.5rem 0 1.75rem;margin-top:2rem;position:relative;
}
footer.site::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--or) 50%,transparent)
}
footer.site h3{
  color:var(--bleu);font-family:Cinzel,serif;font-weight:700;
  font-size:.95rem;margin-bottom:.6rem
}
.pieds{
  display:grid;gap:1.75rem;grid-template-columns:1.4fr 1fr 1fr
}
@media (max-width:700px){.pieds{grid-template-columns:1fr}}
footer.site p,footer.site li{
  font-size:.88rem;color:var(--encre-doux)
}
footer.site ul{
  list-style:none;margin:0;padding:0;display:grid;gap:.35rem
}
footer.site a{text-decoration:none}
footer.site a:hover{text-decoration:underline}
.mentions{
  margin-top:2rem;padding-top:1rem;border-top:1px solid var(--ligne);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--argent-fonce)
}

:focus-visible{outline:2px solid var(--or);outline-offset:2px}