/* ELDIG, habillage des pages publiques (connexion, inscription, mots de passe, confirmation,
   CGU, confidentialité, 404). Même monde que l'accueil "La loge marquée" : voir DESIGN.md.
   Mur chaulé, toit de tôle, feuille blanche épinglée pour les formulaires, bleu marqueur pour agir. */

@font-face{font-family:"Bricolage Grotesque";src:url(/polices/titres-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/polices/texte-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/polices/texte-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat Brush";src:url(/polices/pinceau-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --chaux:#EDECE6; --joint:#D6D4CB; --tole:#8F999D; --tole-clair:#B7BEC1; --tole-fonce:#6F787C;
  --terre:#9A3D24; --sur-terre:#F7E7DD;
  --marqueur:#1D55B5; --marqueur-fonce:#17479A; --vert:#2A7034;
  --encre:#1D1D1B; --gris:#55534E; --papier:#FFFFFF; --indice:#6B675F;
  --erreur-fond:#F8DCD6; --erreur-encre:#7A1F12;
  --ok-fond:#E3F1E4; --ok-encre:#1F5A29;
  --info-fond:#E2E9F6; --info-encre:#17479A;
  --titre:"Bricolage Grotesque", "Arial Narrow", sans-serif;
  --texte:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --main:"Caveat Brush", "Comic Sans MS", cursive;
  --mur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg stroke='%23D6D4CB' stroke-width='2' fill='none'%3E%3Cpath d='M0 1H92M0 47H92M1 0V46M47 46V92'/%3E%3C/g%3E%3C/svg%3E");
  --tole-motif:repeating-linear-gradient(90deg, var(--tole) 0 7px, var(--tole-clair) 7px 11px, var(--tole) 11px 18px);
  --ombre-feuille:0 14px 26px rgba(30,30,25,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--chaux) var(--mur);background-size:92px 92px;color:var(--encre);font:400 17px/1.6 var(--texte);caret-color:var(--marqueur)}
a{color:var(--marqueur);text-underline-offset:3px;text-decoration-thickness:2px}
::selection{background:var(--marqueur);color:#fff}
:focus-visible{outline:3px solid var(--marqueur);outline-offset:3px}
.g{width:100%;max-width:1120px;margin:0 auto;padding-left:max(18px, env(safe-area-inset-left,0px));padding-right:max(18px, env(safe-area-inset-right,0px))}
main{flex:1}

/* toit de tôle */
.toit{background:var(--tole-motif);border-bottom:4px solid var(--tole-fonce);box-shadow:0 6px 10px rgba(0,0,0,.12);padding-top:env(safe-area-inset-top,0px)}
.toit .g{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.logo{font-family:var(--titre);font-weight:800;font-size:32px;letter-spacing:-.01em;line-height:1.15;color:var(--encre);background:var(--chaux);padding:0 10px;text-decoration:none}
.logo span{color:var(--marqueur)}
.plaque{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:2px;background:var(--chaux);color:var(--encre);font-weight:700;font-size:16px;text-decoration:none}
.plaque:hover{background:#fff}

/* pages de compte : titre sur le mur, feuille épinglée */
.compte{padding-block:30px 44px}
.compte .g{max-width:500px;display:grid;gap:12px}
.compte h1{font-family:var(--titre);font-weight:800;font-size:clamp(32px,8.6vw,46px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.compte .sous{color:var(--gris);background:var(--chaux)}
.note-main{font-family:var(--main);color:var(--marqueur);font-size:25px;line-height:1.1;transform:rotate(-3deg);transform-origin:left center;justify-self:start}
.feuille{margin-top:10px;background:var(--papier);border-radius:6px;padding:22px 20px 24px;box-shadow:var(--ombre-feuille);display:grid;gap:16px}
@media(min-width:600px){.feuille{padding:28px 28px 30px}}

.alerte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:3px;font-weight:700;font-size:16px;line-height:1.45}
.alerte .fas{flex:none;margin-top:4px}
.alerte.erreur{background:var(--erreur-fond);color:var(--erreur-encre)}
.alerte.succes{background:var(--ok-fond);color:var(--ok-encre)}
.alerte.info{background:var(--info-fond);color:var(--info-encre);font-weight:400}
.alerte.info strong{font-weight:700}

form{display:grid;gap:16px}
.champ{display:grid;gap:6px}
.champ > label{font-weight:700;font-size:16px}
.facultatif{font-weight:400;color:var(--gris);font-size:14px}
.saisie{position:relative}
.saisie input{width:100%;min-height:52px;padding:0 12px;border:2px solid var(--encre);border-radius:3px;background:#fff;color:var(--encre);font:400 17px var(--texte)}
.saisie input::placeholder{color:var(--indice)}
.saisie input:focus-visible{outline:3px solid var(--marqueur);outline-offset:2px}
.saisie.avec-oeil input{padding-right:54px}
.oeil{position:absolute;right:2px;top:2px;bottom:2px;width:50px;display:grid;place-items:center;border:0;border-radius:0 2px 2px 0;background:transparent;color:var(--gris);font-size:19px;cursor:pointer}
.oeil:hover{color:var(--encre)}
.lien-aide{justify-self:end;font-size:15px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 22px;border:0;border-radius:3px;font-family:var(--titre);font-weight:800;font-size:19px;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s ease, transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.75;cursor:progress}
.btn-bleu{background:var(--marqueur);color:#fff}
.btn-bleu:hover{background:var(--marqueur-fonce)}
.btn-trait{background:var(--chaux);color:var(--encre);border:3px solid var(--encre)}
.btn-trait:hover{background:#fff}

.ou{display:flex;align-items:center;gap:12px;color:var(--gris);font-size:15px}
.ou::before,.ou::after{content:"";flex:1;height:2px;background:var(--joint)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 16px;border:2px solid var(--encre);border-radius:3px;background:#fff;color:var(--encre);font-weight:700;font-size:clamp(15px,4.6vw,17px);white-space:nowrap;text-decoration:none}
.btn-google .fab{color:#4285F4;font-size:19px}
.btn-google:hover{background:var(--chaux)}
.bascule{text-align:center;background:var(--chaux);justify-self:center;padding:2px 6px;margin-top:6px}
.bascule a{font-weight:700}
.retour{justify-self:center;font-weight:700;min-height:44px;display:inline-flex;align-items:center;gap:8px}

.case{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.case input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--marqueur)}

/* force du mot de passe (les couleurs de la barre viennent du script de la page) */
.force{display:grid;gap:6px;margin-top:4px}
.force-fond{height:6px;background:var(--joint);border-radius:3px;overflow:hidden}
.strength-bar{height:100%;width:0;transition:width .25s ease}
.strength-label{font-size:14px;color:var(--gris)!important}
.regles{list-style:none;display:grid;gap:4px;font-size:15px;color:var(--gris)}
.regles li{display:flex;align-items:center;gap:8px}
.regles li .fas{font-size:8px;color:var(--joint)}
.regles li.ok{color:var(--ok-encre);font-weight:700}
.regles li.ok .fas{color:var(--ok-encre)}

/* état final (compte créé, mot de passe changé, email confirmé) */
.etat{display:grid;gap:12px}
.etat h2{font-family:var(--titre);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.01em}
.etat-marque{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px}
.etat-success .etat-marque{background:var(--ok-fond);color:var(--ok-encre)}
.etat-already .etat-marque{background:var(--info-fond);color:var(--info-encre)}
.etat-expired .etat-marque{background:#FFF1D6;color:#7A4B00}
.etat-invalid .etat-marque{background:var(--erreur-fond);color:var(--erreur-encre)}

/* pages de lecture : CGU, confidentialité */
.lecture{padding-block:30px 48px}
.lecture .g{max-width:780px}
.lecture-tete{display:grid;gap:8px;margin-bottom:22px}
.lecture-tete h1{font-family:var(--titre);font-weight:800;font-size:clamp(32px,7vw,54px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.lecture-tete .sous{color:var(--gris);background:var(--chaux);justify-self:start}
.document{background:var(--papier);border-radius:6px;box-shadow:var(--ombre-feuille);padding:24px 20px 30px}
@media(min-width:700px){.document{padding:38px 44px 44px}}
.document .maj{font-family:var(--main);color:var(--marqueur);font-size:22px;line-height:1.2;transform:rotate(-2deg);transform-origin:left center;display:inline-block}
.document h2{font-family:var(--titre);font-weight:800;font-size:23px;line-height:1.2;letter-spacing:-.01em;margin-top:32px;margin-bottom:8px;text-wrap:balance}
.document p{margin-bottom:10px;max-width:40em}
.document ul{margin:6px 0 12px 1.2em;display:grid;gap:6px;max-width:40em}
.document ul ul{margin-top:8px}
.document li::marker{color:var(--terre)}
.resume{margin-top:18px;background:var(--chaux);border-radius:3px;padding:14px 16px}
.resume p{margin:0}
.liens-bas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.liens-bas .btn{width:auto;flex:1 1 220px}

/* 404 : la loge vide */
.introuvable{padding-block:40px 56px}
.introuvable .g{max-width:640px;display:grid;gap:14px;position:relative}
.loge-vide{position:relative;user-select:none}
.loge-vide .chiffre{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(110px,34vw,200px);line-height:.9;letter-spacing:-.04em;color:var(--terre);opacity:.18}
.loge-vide .note-main{position:absolute;left:52%;top:22%;font-size:clamp(30px,8vw,44px)}
.introuvable h1{font-family:var(--titre);font-weight:800;font-size:clamp(32px,8vw,48px);line-height:1.05;letter-spacing:-.02em}
.introuvable p{background:var(--chaux);max-width:34em}
.introuvable .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.introuvable .actions .btn{width:auto;flex:1 1 200px}

/* pied */
.pied-mini{background:var(--encre);color:#D9D6CF;border-top:6px solid var(--tole);padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:15px}
.pied-mini .g{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between}
.pied-mini nav{display:flex;flex-wrap:wrap;gap:0 18px}
.pied-mini a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.pied-mini a:hover{text-decoration:underline}