/* =====================================================================
   esquiz — feuille de style (vanilla CSS, pas de framework, pas de build)
   Structure reprise du socle Iris/step-up (validé en prod), identité
   Esquiz : fond papier crème, encre, accent ocre, vert sauge pour les
   succès, cartes arrondies 14 px, police système.
   Module 1 : socle auth + accueil artistes, volontairement sobre — la
   vraie identité (mascotte, typographie) arrive au module 2.
   Les couleurs reprennent content/esquiz-style.css (variables des leçons).
   ===================================================================== */

:root {
  --papier:     #F7F3EC;   /* fond « carnet » (= --esquiz-papier)        */
  --carte:      #FFFFFF;
  --encre:      #2B2B33;   /* encre du croquis (= --esquiz-encre)        */
  --gris:       #6E6759;
  --bord:       #E5DCCC;   /* filets (= --esquiz-bord)                   */
  --ocre:       #C97B2D;   /* accent de marque (= --esquiz-ocre)         */
  --ocre-fonce: #A56223;
  --ocre-pale:  #F6E9DA;
  /* Échelle sémantique « positif » (succès / validation) : vert sauge,
     indépendante de l'accent de marque ocre. */
  --sauge:       #5F7A61;  /* (= --esquiz-sauge)                         */
  --sauge-fonce: #4A614C;
  --sauge-pale:  #E9EFE9;
  --ambre:      #B07811;
  --ambre-pale: #FAF3E3;
  --rouge:      #B4432F;
  --rouge-pale: #FBEAE6;
  --ombre: 0 1px 3px rgba(43, 43, 51, .07), 0 6px 20px rgba(43, 43, 51, .05);
  --rayon: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }

a { color: var(--ocre-fonce); }

h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 14px; }
h2 { font-size: 16px; font-weight: 800; margin: 18px 0 8px; }

/* --------------------------------------------------------------------
   Barre appli
   -------------------------------------------------------------------- */
.appbar {
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Logo texte « Esquiz » (le blason/mascotte arrive au module 2). */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--ocre);
  text-decoration: none;
}
.logo span { color: var(--encre); }

/* Artiste courant dans la barre (avatar émoji + prénom). */
.artiste-courant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ocre-pale);
  color: var(--ocre-fonce);
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  font-weight: 600;
  font-size: 14px;
}
.artiste-avatar { font-size: 18px; line-height: 1; }

.appbar-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--gris);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}
.nav-link:hover { background: var(--ocre-pale); color: var(--ocre-fonce); }
.nav-link.actif { background: var(--ocre-pale); color: var(--ocre-fonce); }
.nav-link.deconnexion { color: var(--rouge); }
.nav-link.deconnexion:hover { background: var(--rouge-pale); color: var(--rouge); }

/* Bouton neutre habillé en lien (ex. Déconnexion : formulaire POST + CSRF). */
button.btn-lien {
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
}

/* --------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------- */
.contenu {
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 14px 48px;
}

.carte {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.carte-etroite { max-width: 30rem; }

.aide { color: var(--gris); font-size: 12.5px; margin: .4rem 0 .9rem; }

/* --------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------- */
.msg {
  border-radius: 10px;
  padding: .7rem .95rem;
  margin-bottom: 14px;
  font-size: 14px;
}
.msg ul { margin: 0; padding-left: 1.2rem; }
.msg.ok            { background: var(--sauge-pale); color: var(--sauge-fonce); }
.msg.erreur        { background: var(--rouge-pale); color: var(--rouge); }
.msg.avertissement { background: var(--ambre-pale); color: var(--ambre); }

/* --------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------- */
.champ { margin-bottom: .9rem; }

.champ label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris);
  margin-bottom: .25rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 10px;
}
.champ textarea { min-height: 5.5em; resize: vertical; }

/* Sélecteur d'avatar (création d'artiste) : grille de radios émoji.
   L'input radio reste accessible (focus-visible sur le <span>). */
fieldset.choix-avatars {
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 .9rem;
}
.choix-avatars legend {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris);
  padding: 0 6px;
}
.avatar-option { display: inline-block; margin: 3px; cursor: pointer; }
.avatar-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.avatar-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 24px;
  background: var(--papier);
  border: 2px solid var(--bord);
  border-radius: 12px;
}
.avatar-option input:checked + span {
  border-color: var(--ocre);
  background: var(--ocre-pale);
}
.avatar-option input:focus-visible + span {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 0;
  background: var(--ocre-pale);
  color: var(--ocre-fonce);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #efdcc4; }

.btn-principal { background: var(--ocre); color: #fff; font-weight: 700; padding: 10px 18px; }
.btn-principal:hover { background: var(--ocre-fonce); }

.btn-succes { background: var(--sauge); color: #fff; font-weight: 600; }
.btn-succes:hover { background: var(--sauge-fonce); }

.btn:disabled { opacity: .55; cursor: not-allowed; }

.form-en-ligne { display: inline-block; margin: 0; }

/* --------------------------------------------------------------------
   Grille des artistes (accueil) — cartes-boutons « qui dessine ? »
   -------------------------------------------------------------------- */
.grille-artistes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.carte-artiste-form { margin: 0; }
.carte-artiste {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--carte);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px 10px 12px;
  cursor: pointer;
}
.carte-artiste:hover { border-color: var(--ocre-pale); }
.carte-artiste.artiste-actif { border-color: var(--ocre); background: var(--ocre-pale); }
.carte-artiste-avatar { font-size: 40px; line-height: 1.1; }
.carte-artiste-prenom { font-weight: 700; font-size: 15px; }
.carte-artiste-niveau { font-size: 12px; color: var(--gris); }

/* --------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.badge-admin { background: var(--ocre-pale); color: var(--ocre-fonce); }

/* --------------------------------------------------------------------
   Parcours (module 2) — leçons par catégorie, états visibles d'un
   coup d'œil : validée (sauge), disponible (carte cliquable), bientôt
   et verrouillée (estompées, non cliquables).
   -------------------------------------------------------------------- */
.parcours-categorie { margin-bottom: 8px; }

.grille-lecons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.carte-lecon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--carte);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 14px 14px 12px;
  color: var(--encre);
  text-decoration: none;
}
a.carte-lecon:hover { border-color: var(--ocre); }
.lecon-etat  { font-size: 26px; line-height: 1.1; }
.lecon-titre { font-weight: 700; font-size: 15px; }
.lecon-sous  { font-size: 12px; color: var(--gris); }

.carte-lecon.lecon-validee { border-color: var(--sauge); background: var(--sauge-pale); }
.carte-lecon.lecon-validee .lecon-sous { color: var(--sauge-fonce); }

.carte-lecon.lecon-bientot,
.carte-lecon.lecon-verrouillee {
  background: var(--papier);
  box-shadow: none;
  border: 2px dashed var(--bord);
  opacity: .75;
}

.badge-niveau    { background: var(--ocre-pale); color: var(--ocre-fonce); }
.badge-variante  { background: var(--sauge-pale); color: var(--sauge-fonce); }

/* --------------------------------------------------------------------
   Lecteur de leçon (module 2) — planche SVG inline + barre d'étapes.
   La page est plus large que le contenu standard : le dessin respire.
   -------------------------------------------------------------------- */
.page-lecon .contenu { max-width: 980px; }

.lecteur-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lecteur-entete h1 { margin: 0; flex: 1; }

.lecteur { padding: 14px; }

.lecteur-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lecteur-etat {
  flex: 1;
  min-width: 140px;
  text-align: center;
}
.lecteur-compteur {
  display: block;
  font-size: 12px;
  color: var(--gris);
}
.lecteur-titre-etape {
  display: block;
  font-weight: 800;
  font-size: 17px;
}

/* Astuce 💡 : bien visible sous le titre d'étape (masquée si le calque
   n'a pas de data-astuce). */
.lecteur-astuce {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--ambre-pale);
  color: var(--ambre);
  border-radius: 10px;
  padding: .65rem .9rem;
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 600;
}
.lecteur-astuce-picto { font-size: 18px; line-height: 1.2; }

/* La planche : le SVG (viewBox 2048×1401) prend toute la largeur de la
   carte, fond papier comme dans les previews du pipeline. */
.lecteur-planche {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
}
.lecteur-planche svg {
  display: block;
  width: 100%;
  height: auto;
}

.lecteur-fin { text-align: center; margin-top: 12px; }
.lecteur-bravo { font-weight: 700; margin: 0 0 8px; }
.btn-fini { font-size: 16px; padding: 12px 22px; }

/* Page « bientôt » (placeholder validation photo, M3). */
.carte-bientot { text-align: center; margin: 24px auto; }
.bientot-picto { font-size: 44px; margin: 4px 0 0; }
.carte-bientot .btn { margin: 4px; }

/* --------------------------------------------------------------------
   Page de connexion
   -------------------------------------------------------------------- */
.page-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.auth-carte {
  width: 100%;
  max-width: 24rem;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.75rem 1.5rem;
}

.auth-titre {
  margin: 0;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ocre);
}

.auth-sous-titre {
  margin: .2rem 0 1.4rem;
  text-align: center;
  color: var(--gris);
  font-size: .92rem;
}

.auth-carte .btn { width: 100%; margin-top: .4rem; }

/* --------------------------------------------------------------------
   Version discrète en pied de page
   -------------------------------------------------------------------- */
.pied-app {
  margin-top: 26px;
  text-align: center;
  color: var(--gris);
  font-size: 11px;
  opacity: .7;
}

/* Œil « afficher le mot de passe » : bouton absolu DANS le champ (le wrapper
   .champ-mdp reste sous .champ : les inputs gardent leur style). Le bouton
   est hidden tant que JS ne l'a pas révélé. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 42px; }
.champ-mdp .voir-mdp {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.champ-mdp .voir-mdp:hover,
.champ-mdp .voir-mdp[aria-pressed="true"] { opacity: 1; }

/* --------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
  .contenu { padding: 14px 10px 40px; }
  .carte { padding: 14px 12px; }
  .appbar { padding: 10px 12px; }
  .grille-artistes { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .grille-lecons { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}