/* La console LightHouse : le système visuel de blog.gouvaert.fr.
   Le bandeau vert à motif du blog, plat, sans arrondi ni ombre, capitales
   espacées de 3px pour ce qui guide, et la pile Effra, Helvetica pour ce qui
   se lit : aucune police n'est téléchargée, comme sur le blog. La carte a sa propre feuille,
   qui suppose celle-ci chargée. */

:root {
  color-scheme: light;
  --mint: #1ABD9C;
  --mint-dark: #12876F;
  --mint-pale: #E2F6F1;
  --ground: #F6F7F8;
  --card: #FFFFFF;
  --ink: #232D37;
  --title: #4B555F;
  --meta: #68717B;
  --line: #E6E9EC;
  --red: #B43B3B;
  --red-pale: #FBEAEA;
  --amber: #A9840F;
  --amber-pale: #FBF3DC;
  --ombre: 0 3px 18px rgba(5, 10, 15, .07);
  --l-landing: #6E7D88;
  --l-bronze: #A0652F;
  --l-silver: #7F8B94;
  --l-gold: #A9840F;
  --l-green: #2E8B57;
  --l-red: #B43B3B;
  --sans: Effra, Helvetica, Arial, sans-serif;
  --mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
/* Un élément masqué le reste, quel que soit son display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 18px/1.55 var(--sans);
}

a { color: var(--mint-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mint-dark);
  outline-offset: 3px;
}
code {
  font: 400 .86em var(--mono);
  background: var(--mint-pale);
  color: #1D4E40;
  padding: .05em .3em;
  overflow-wrap: anywhere;
}
pre {
  background: var(--ink);
  color: #E6F4EF;
  padding: 1.1rem 1.3rem;
  margin: 0;
  overflow-x: auto;
  font: 400 .88rem/1.65 var(--mono);
}

/* --- La page : un bandeau menthe, puis le contenu ------------------------- */
.page {
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  /* Le motif du blog : une tuile de 350px posée sur le vert, répétée. */
  background: var(--mint) url("../img/motif.png") repeat;
  background-size: 350px 350px;
  color: #fff;
  padding: 2.8rem 1.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  overflow-y: auto;
}
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; color: #fff; text-decoration: none; }
.brand svg { width: 46px; height: 46px; }
.brand strong { font: 300 27px/1.2 var(--sans); letter-spacing: -.005em; }
.brand small {
  font: 700 12px/1.6 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.side ol a, .side ol span.etape, .side .lien-barre {
  display: block;
  color: #fff;
  text-decoration: none;
  font: 700 12px/1.5 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: .45rem .5rem;
  opacity: .85;
  background: none;
  border: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.side ol a span, .side ol span.etape span { font-variant-numeric: tabular-nums; opacity: .7; margin-right: .5em; }
.side ol a:hover, .side .lien-barre:hover { opacity: 1; }
.side [aria-current="page"], .side [aria-current="step"] {
  /* Le lien courant, comme sur le blog : souligné, rien d'autre. */
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}
.side ol span.etape { cursor: default; }
.side ol span.etape.faite { opacity: .95; }

.side .foot {
  margin-top: auto;
  font: 400 14px/1.5 var(--sans);
  text-align: center;
  opacity: .95;
  display: grid;
  gap: .2rem;
}
.side .foot a, .side .foot button {
  color: #fff;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
.side .qui { font-weight: 600; }

/* --- Le contenu ----------------------------------------------------------- */
main {
  padding: 3rem clamp(1.2rem, 4.5vw, 4rem) 2.5rem;
  max-width: 64rem;
  min-width: 0;
}
.kicker {
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--mint-dark);
  margin: 0 0 1rem;
}
h1 {
  font: 600 clamp(28px, 3.4vw, 40px)/1.3 var(--sans);
  letter-spacing: -.2px;
  color: var(--ink);
  margin: 0 0 1rem;
  text-wrap: balance;
  max-width: 24ch;
}
.lede {
  font-weight: 400;
  font-size: 20px;
  color: var(--meta);
  line-height: 1.5;
  margin: 0 0 2.4rem;
  max-width: 44rem;
}
.label {
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--meta);
  margin: 2.4rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.label:first-child { margin-top: 0; }
.label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
p { max-width: 46rem; }

/* Les cartes des articles du blog : blanches, arrondies, ombre douce. */
.card {
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--ombre);
  padding: 1.6rem 1.8rem 1.8rem;
  max-width: 46rem;
}
.card + .card { margin-top: 1.4rem; }
h2, .card h2 {
  font: 600 20px/26px var(--sans);
  letter-spacing: -.005em;
  color: var(--title);
  margin: 0 0 .9rem;
}

.note {
  background: var(--mint-pale);
  border-radius: 6px;
  border-left: 5px solid var(--mint);
  padding: .9rem 1.2rem;
  max-width: 46rem;
  margin: 1.4rem 0 0;
}
.note p { margin: 0; }
.note.alerte { background: var(--amber-pale); border-left-color: var(--amber); }
.note.erreur { background: var(--red-pale); border-left-color: var(--red); }

/* --- Les formulaires ------------------------------------------------------ */
.champ { display: grid; gap: .35rem; margin: 0 0 1.1rem; }
.champ > span {
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--meta);
}
.champs-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0 1rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
  width: 100%;
  font: 400 18px/1.4 var(--sans);
  color: var(--ink);
  padding: .62rem .8rem;
  border: 1px solid var(--line);
  background: var(--ground);
  border-radius: 6px;
}
input:focus, select:focus { outline: 2px solid var(--mint-dark); outline-offset: 0; background: #fff; }
input.code { font: 600 1.05rem/1.4 var(--mono); letter-spacing: .06em; }

.case { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; cursor: pointer; }
.case input { margin: .35rem 0 0; accent-color: var(--mint-dark); }
.case small { display: block; color: var(--meta); }

.aide { color: var(--meta); font-size: 14px; font-weight: 500; margin: -.6rem 0 1rem; }
.error-message { color: var(--red); font-size: .9rem; margin: .1rem 0 0; }
input.form-error, select.form-error { border-color: var(--red); }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.3rem; }

button, .bouton {
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  background: var(--mint-dark);
  border: 0;
  padding: .95rem 1.3rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
}
button:hover, .bouton:hover { background: var(--ink); }
button:disabled { background: var(--line); color: var(--meta); cursor: wait; }
.bouton.second, button.second {
  background: transparent;
  color: var(--mint-dark);
  box-shadow: inset 0 0 0 1px var(--mint-dark);
}
.bouton.second:hover, button.second:hover { background: var(--mint-pale); }
.bouton.danger, button.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.bouton.danger:hover, button.danger:hover { background: var(--red-pale); }
.bouton.petit, button.petit { padding: .55rem .8rem; font-size: 11px; letter-spacing: 2px; }

/* --- Les messages --------------------------------------------------------- */
.message {
  background: var(--mint-pale);
  border-left: 5px solid var(--mint);
  padding: .8rem 1.2rem;
  margin: 0 0 1.4rem;
  max-width: 46rem;
}
.message.error { background: var(--red-pale); border-left-color: var(--red); }
.message.warning { background: var(--amber-pale); border-left-color: var(--amber); }
.message.hidden { display: none; }

/* --- Les listes ----------------------------------------------------------- */
table.liste { border-collapse: collapse; width: 100%; background: var(--card); border-radius: 8px; box-shadow: var(--ombre); overflow: hidden; }
table.liste th, table.liste td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.liste th {
  font: 700 12px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--meta);
}
table.liste tr.inactif td { color: var(--meta); }
table.liste td.fin { text-align: right; white-space: nowrap; }
table.liste td.fin form { display: inline; }
.pastille-role {
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: .3rem .5rem;
  background: var(--mint-pale);
  color: var(--mint-dark);
}
.pastille-role.admin { background: var(--ink); color: #fff; }

/* --- Le premier test ------------------------------------------------------ */
.verif { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 8px; box-shadow: var(--ombre); overflow: hidden; max-width: 46rem; }
.verif li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 13rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.verif li:last-child { border-bottom: 0; }
.verif b {
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: .3rem .45rem;
  text-align: center;
}
.verif .ok b { background: var(--mint-pale); color: var(--mint-dark); }
.verif .echec b { background: var(--red-pale); color: var(--red); }
.verif .info b { background: var(--ground); color: var(--meta); }
.verif .libelle { font-weight: 600; color: var(--title); }
.verif .detail { color: var(--meta); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.verif.en-echec { box-shadow: 0 0 0 1px var(--red), var(--ombre); }

.resultat-test { margin: 1rem 0 0; }
.resultat-test:empty { display: none; }

/* --- Connexion et pages d'erreur : le bandeau, et une seule carte --------- */
.seule main { display: flex; flex-direction: column; justify-content: center; max-width: 34rem; min-height: 100vh; }
.seule .card { max-width: none; }

@media (max-width: 880px) {
  .page { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 1.4rem 1.2rem; gap: 1rem; }
  .side ol { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .seule main { min-height: 0; }
  .verif li { grid-template-columns: 5rem 1fr; }
  .verif .detail { grid-column: 2; }
  .champs-ligne { grid-template-columns: 1fr; }
}

/* --- Les étapes numérotées ------------------------------------------------ */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 46rem; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: 1rem;
  background: var(--card);
  padding: .9rem 1.2rem;
  align-items: center;
}
.steps li::before {
  content: counter(s);
  font: 700 16px/1 var(--sans);
  color: #fff;
  background: var(--c, var(--mint));
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
}

/* --- Communs à la carte et aux pages ---------------------------------------- */
.meta { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin: .9rem 0 0; padding: 0; color: var(--meta); font: 500 16px/24px var(--sans); }
.meta li { display: flex; align-items: center; gap: .55rem; }
.meta-icone { display: inline-flex; width: 18px; height: 18px; color: var(--meta); flex: none; }
.meta-icone svg { width: 18px; height: 18px; }
/* Le bloc de code du blog : fond sombre, étiquette et COPIER. */
.code { position: relative; background: #1D1F21; border-radius: 4px; padding: 2.1rem 0 0; margin: .2rem 0 0; }
.code pre { background: none; color: #E8C9C9; margin: 0; padding: .2rem 1rem 1rem; font: 400 13px/1.6 Consolas, Monaco, "Andale Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-etiquette { position: absolute; top: .55rem; left: 1rem; font: 700 12px/1.5 Consolas, monospace; color: rgba(255, 255, 255, .8); }
.code-copier { position: absolute; top: .45rem; right: .6rem; background: transparent; color: rgba(255, 255, 255, .8); font: 700 11px/1 Consolas, monospace; letter-spacing: 1px; padding: .35rem .5rem; }
.code-copier:hover { background: rgba(255, 255, 255, .1); }
.onglets { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--line); }
.onglets button, .onglets a {
  background: transparent;
  color: var(--meta);
  font: 700 12px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .8rem .9rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
}
.onglets [aria-current="page"] { color: var(--ink); border-bottom-color: var(--mint); }
.onglets small { font-weight: 500; letter-spacing: 0; opacity: .7; }

/* --- Les modifications ------------------------------------------------------ */
.card.modif { max-width: 60rem; display: grid; gap: 1rem; }
.modif-tete { display: flex; align-items: flex-start; gap: 1rem; }
.modif-tete h2 { margin: 0; overflow-wrap: anywhere; }
.modif-tete .meta { font-size: 14px; gap: .2rem 1.2rem; margin-top: .4rem; }
.pastille-statut { margin-left: auto; font: 700 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; padding: .45rem .65rem; border-radius: 999px; background: var(--ground); color: var(--meta); white-space: nowrap; }
.statut-en_attente .pastille-statut { background: var(--amber-pale); color: #7A5B00; }
.statut-appliquee .pastille-statut { background: var(--mint-pale); color: var(--mint-dark); }
.statut-rejetee .pastille-statut { background: var(--red-pale); color: var(--red); }
table.diff { border-collapse: collapse; width: 100%; font-size: 15px; }
table.diff th, table.diff td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.diff th { font: 700 11px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--meta); }
table.diff .avant { color: var(--meta); text-decoration: line-through; }
table.diff .apres { color: var(--ink); font-weight: 600; }
.card.modif .actions { margin-top: 0; }