/* Espace client : tableau de bord (web/espace/templates/espace/base.html) et pages d'entrée (entree.html : connexion, inscription,
   mot de passe). Aux couleurs du site (jetons.css) sans en reprendre la mise en page : papier, panneaux clairs à trait fin, un seul
   bleu pour l'action et la page en cours. Sans site.css. Tous les composants : /fr/espace/composants/ (personnel).
   Système de design de la gestion (#103) : jetons et composants g-… de commun.css (cartes, badges de statut, tableaux, menu de
   l'utilisateur, thème) ; les composants propres à l'espace ci-dessous en reprennent les rayons, traits et ombres. */
.espace{--r:14px;--r-sm:10px}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15.5px/1.55 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
h1{font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.015em;font-variation-settings:"wdth" 112}
h2{font-size:18px;line-height:1.25;font-weight:700;font-variation-settings:"wdth" 106}
h3{font-size:15.5px;line-height:1.3;font-weight:700}
p{margin:0}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}
.sous{color:var(--ink-2);line-height:1.5}
.sous a{color:var(--blue);font-weight:600}
.page-tete .sous{margin-top:6px}
.evite{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 14px;border-radius:var(--r-sm);background:var(--blue);color:var(--blue-ink);font-weight:600;text-decoration:none}
.evite:focus{top:12px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* marque : symbole « Déjà, la clé » + nom ; sur fond sombre, symbole tout en clair */
.brand{--lg-trait:var(--ink);--lg-accent:var(--blue);display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.brand .logo{width:28px;height:28px;flex:none}
.brand span{font:800 19px/1 var(--f);font-variation-settings:"wdth" 112;letter-spacing:-.015em;white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand{--lg-accent:var(--ink)}}
:root[data-theme="dark"] .brand{--lg-accent:var(--ink)}

/* boutons : un seul principal par écran (bleu), secondaire au trait encre, discret au trait fin, danger en rouge */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:600 15px/1 var(--f);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{border-color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.btn.primary:hover{background:var(--blue-2);border-color:var(--blue-2);box-shadow:0 6px 18px color-mix(in srgb,var(--blue) 28%,transparent)}
.btn.discret{border-color:var(--line)}
.btn.discret{background:transparent}
.btn.discret:hover{border-color:var(--ink-2);background:var(--panel)}
.btn.danger{border-color:color-mix(in srgb,var(--err) 55%,var(--line));color:var(--err)}
.btn.danger:hover{background:color-mix(in srgb,var(--err) 8%,var(--panel))}
.btn.big{min-height:52px;padding:0 24px;font-size:16px}
.btn[disabled]{opacity:.65;cursor:progress}
.btn .ico{width:18px;height:18px}
.lien{border:0;padding:0;background:none;color:var(--blue);font:600 14.5px/1.4 var(--f);text-decoration:none;cursor:pointer}
.lien:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* formulaires : étiquette visible au-dessus, champ de 16 px (pas de zoom sur téléphone), erreur sous le champ */
.form{display:grid;gap:14px}
.form .btn{width:100%}
.form .actions .btn{width:auto;flex:1 1 auto}
.form>.lien{justify-self:start}
.etroit{max-width:480px}
.champ{display:grid;gap:6px;font-size:13.5px;font-weight:600}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:400 16px/1.2 var(--f);appearance:none;-webkit-appearance:none;transition:border-color .15s}
.champ textarea{min-height:110px;padding:12px 14px;line-height:1.5}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--ink-2)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.champ [aria-invalid="true"]{border-color:var(--err)}
.avec-voir{position:relative}
.avec-voir input{padding-right:92px}
.voir{position:absolute;right:6px;bottom:5px;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--blue);font:600 13.5px/1 var(--f);cursor:pointer}
.voir:hover{background:var(--panel-2)}
.case{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.case input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.case a{color:var(--blue);font-weight:600}
/* choix à cocher en pastilles (questions d'accueil) ; « Autre » ouvre le champ « Précisez » */
.puces{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.puces legend{padding:0;margin-bottom:10px;font-weight:700;font-size:16px;line-height:1.35}
.puces legend .aide{display:block;margin-top:2px}
.puces legend h1{margin-bottom:6px}
.puces-liste{display:flex;flex-wrap:wrap;gap:8px}
.puce{position:relative;display:inline-flex;cursor:pointer}
.puce input{position:absolute;opacity:0;width:1px;height:1px}
.puce span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel);font-size:14.5px;line-height:1.3;transition:border-color .15s,background .15s}
.puce:hover span{border-color:var(--ink-2)}
.puce input:checked+span{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--panel));color:var(--blue);font-weight:600}
.puce input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.questions{gap:24px}
.aide{font-size:13px;line-height:1.45;color:var(--ink-2);font-weight:400}
.aide a{color:var(--blue);font-weight:600}
.err{font-size:14px;color:var(--err);font-weight:600}
.ou{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:13.5px}
.ou::before,.ou::after{content:"";flex:1;border-top:1px solid var(--line)}
.google .btn{width:100%}
.google .btn svg{width:20px;height:20px;flex:none}
.bas{display:flex;flex-wrap:wrap;gap:0 20px;font-size:14.5px}
.bas a,.bas .lien{display:inline-flex;align-items:center;min-height:40px}
.bas a{color:var(--blue);font-weight:600;text-decoration:none}
.bas a:hover{text-decoration:underline}
.depliant summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14.5px}
.depliant[open] summary{margin-bottom:12px}

/* messages : info en bleu, réussite en vert, erreur en rouge ; jamais la couleur seule, le texte dit tout */
.messages{display:grid;gap:8px}
.alerte{padding:11px 14px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:var(--r-sm);background:color-mix(in srgb,var(--blue) 7%,var(--panel));font-size:14.5px;line-height:1.45}
.alerte.success{border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 9%,var(--panel))}
.alerte.error,.alerte.warning{border-color:color-mix(in srgb,var(--err) 35%,var(--line));background:color-mix(in srgb,var(--err) 8%,var(--panel))}

/* menus déroulants (langue des pages d'entrée ; menu de l'utilisateur : commun.css) : <details>, fermés par un clic ailleurs ou
   Échap (espace.js) */
.langues{position:relative}
.langues summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
.langues summary::-webkit-details-marker{display:none}
.langues summary{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font:600 13px/1 var(--m)}
.langues summary:hover{border-color:var(--ink-2)}
.langues .ico{width:16px;height:16px}
.chevron{width:14px;height:14px;transition:transform .15s}
details[open]>summary .chevron{transform:rotate(180deg)}
.langues-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:180px;max-width:calc(100vw - 24px);display:grid;padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow)}
.vers-haut>.langues-liste{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.langues-liste a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14.5px/1.2 var(--f);text-decoration:none;text-align:left;cursor:pointer;width:100%}
.langues-liste a:hover{background:var(--panel-2)}
.langues-liste a b{font:600 12px/1 var(--m);color:var(--ink-2);width:20px}
.langues-liste a[aria-current]{font-weight:600}
.langues-liste a[aria-current]::after{content:"✓";margin-left:auto;color:var(--blue)}
/* ---------- tableau de bord : barre de côté + page ; sur téléphone, barre du haut + onglets du bas ---------- */
.app{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.app-cote{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:28px;padding:20px 14px 14px;border-right:1px solid var(--line);background:var(--panel)}
.app-cote>.brand{padding:4px 10px}
.menu{display:grid;gap:2px}
.menu a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,color .15s}
.menu a:hover{background:var(--panel-2);color:var(--ink)}
.menu a[aria-current="page"]{background:color-mix(in srgb,var(--blue) 10%,var(--panel));color:var(--blue)}
.app-cote-pied{margin:auto -14px -14px}
.app-corps{min-width:0;display:flex;flex-direction:column}
.app-haut{display:none}
.app-page{width:100%;max-width:1120px;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(16px,4vw,44px) 72px;display:grid;gap:28px;align-content:start}
.app-onglets{display:none}
.page-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.page-tete .actions:empty{display:none}

/* sections et panneaux */
.section{display:grid;gap:14px}
.section-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panneau{display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--g-ombre)}
.panneau-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panneau-tete .sous{flex-basis:100%;font-size:14.5px}
.panneau-corps{padding:20px}
.panneau>.actions{padding:16px 20px;border-top:1px solid var(--line)}

/* fiche : libellé en petites capitales, valeur dessous ; en lignes sur ordinateur */
.fiche{margin:0;display:grid}
.fiche>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:4px 20px;align-items:center;padding:14px 20px}
.fiche>div+div{border-top:1px solid var(--line)}
.fiche dt{font:500 12px/1.3 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fiche dd{margin:0;overflow-wrap:anywhere}
.fiche .google .btn{width:auto}

/* chiffres : tuiles de compte (plans disponibles…) */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.chiffre{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.chiffre span{font-size:13.5px;color:var(--ink-2)}
.chiffre b{font:500 30px/1.1 var(--m);font-variant-numeric:tabular-nums}
.chiffre small{font-size:12.5px;color:var(--ink-2)}

/* étiquettes d'état : le badge de statut de la gestion (g-statut), pastille + mot (jamais la couleur seule) */
.etiquette{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;
  justify-self:start;max-width:100%;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);--c:var(--ink-2)}
.etiquette::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.etiquette.bleu{--c:var(--blue)} .etiquette.ok{--c:var(--ok)} .etiquette.err{--c:var(--err)}
.g-statut{justify-self:start;max-width:100%;white-space:normal}

/* cartes de plan : vignette (vue du dessus), titre, détail, état */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.carte-plan{display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--g-ombre);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.carte-plan:hover{border-color:var(--blue);transform:translateY(-1px)}
.vignette{aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:10px;padding:14px;background:var(--plan);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:13px}
.vignette .planche{width:100%;height:100%}
.vignette.attente{background:repeating-linear-gradient(-45deg,var(--plan) 0 10px,var(--panel-2) 10px 20px)}
.vignette.photo{padding:0;overflow:hidden;display:block}.vignette.photo img{width:100%;height:100%;object-fit:cover;display:block}
.jauge{display:block;width:60%;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.jauge i{display:block;width:var(--p,0%);height:100%;background:var(--blue);transition:width .6s}
.carte-plan-tx{display:grid;gap:6px;align-content:start;padding:14px 16px 16px}
.carte-plan-tx b{font-size:15.5px}
.carte-plan-tx .num,.carte-plan-tx .date{font-size:13px;color:var(--ink-2)}

/* état vide : tireté du dépôt (MARQUE.md), une phrase, une action */
.vide{display:grid;justify-items:center;gap:10px;padding:clamp(36px,7vw,72px) 20px;border:2px dashed var(--line);border-radius:var(--r);text-align:center}
.vide p{color:var(--ink-2);max-width:46ch}
.vide .actions{justify-content:center;margin-top:8px}
.vide-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:16px;background:color-mix(in srgb,var(--blue) 10%,var(--panel));color:var(--blue)}
.vide-ico .ico{width:28px;height:28px}

/* plan au trait (panneau des pages d'entrée, vignettes) */
.planche{display:block;--pl-mur:var(--ink);--pl-fin:var(--ink-2);--pl-cote:var(--blue)}
.planche .pl-zone{fill:color-mix(in srgb,var(--pl-cote) 10%,transparent)}
.planche .pl-mur{fill:none;stroke:var(--pl-mur);stroke-width:6;stroke-linecap:square}
.planche .pl-cloison{fill:none;stroke:var(--pl-mur);stroke-width:3;stroke-linecap:square}
.planche .pl-baie,.planche .pl-porte{fill:none;stroke:var(--pl-fin);stroke-width:1.2}
.planche .pl-cote{fill:none;stroke:var(--pl-cote);stroke-width:1.2}
.planche .pl-txt{font:500 11px var(--m);fill:var(--pl-fin)}
.planche .pl-txt.cote{fill:var(--pl-cote)}

/* ---------- pages d'entrée : formulaire à gauche, panneau de la marque à droite ---------- */
.entree{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.entree-cote{display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:20px clamp(20px,5vw,56px) 24px;background:var(--panel)}
.entree-haut{display:flex;align-items:center;justify-content:space-between;gap:16px}
.entree-centre{display:grid;align-content:center;justify-items:center;padding-block:12px}
.entree-carte{width:100%;max-width:420px;display:grid;gap:18px}
.entree-carte h1{font-size:clamp(28px,3.2vw,36px)}
.entree-pied{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:13px;color:var(--ink-2)}
.entree-pied a{text-decoration:none}
.entree-pied a:hover{color:var(--ink);text-decoration:underline}
.entree-marque{--quad:color-mix(in srgb,var(--night-ink) 6%,transparent);position:relative;overflow:hidden;display:grid;grid-template-rows:1fr auto;gap:32px;padding:clamp(32px,5vw,64px);background:var(--night) linear-gradient(var(--quad) 1px,transparent 1px) -1px -1px/32px 32px;color:var(--night-ink)}
.entree-marque::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--quad) 1px,transparent 1px) -1px -1px/32px 32px;pointer-events:none}
.entree-marque>*{position:relative}
.entree-marque .planche{--pl-mur:var(--night-ink);--pl-fin:var(--night-2ink);--pl-cote:var(--night-blue);align-self:center;justify-self:center;width:min(100%,520px);height:auto}
.entree-marque-tx{display:grid;gap:16px;max-width:30ch}
.entree-slogan{font:800 clamp(28px,3vw,40px)/1.05 var(--f);font-variation-settings:"wdth" 112;letter-spacing:-.015em}
.entree-marque ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--night-2ink);font-size:15px}
.entree-marque li{display:flex;gap:10px;align-items:baseline}
.entree-marque li::before{content:"";flex:none;width:14px;border-top:1.5px solid var(--night-blue);transform:translateY(-4px)}

/* ---------- téléphone et tablette ---------- */
@media (max-width:900px){
  .entree{grid-template-columns:minmax(0,1fr)}
  .entree-marque{display:none}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app-cote{display:none}
  .app-haut{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:env(safe-area-inset-top,0px) 12px 0 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(8px)}
  .app-haut .brand{min-height:44px}
  .app-haut .g-compte-boite a,.app-haut .g-compte-sortie{min-height:44px}
  .app-haut .g-compte-theme button{width:44px;height:40px}
  .app-haut .g-compte-sous summary,.app-haut .g-compte-liste a{min-height:44px}
  .app-haut .g-compte-nom,.app-haut .g-compte-bouton>.ico{display:none}
  .app-haut .g-compte-bouton{padding:4px;min-height:44px;min-width:44px;justify-content:center}
  .app-page{padding:20px 16px calc(96px + env(safe-area-inset-bottom,0px));gap:22px}
  .app-onglets{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:0 8px env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px)}
  .app-onglets a{display:grid;justify-items:center;align-content:center;gap:3px;min-height:60px;color:var(--ink-2);font-size:12px;font-weight:600;text-decoration:none}
  .app-onglets a[aria-current="page"]{color:var(--blue)}
  .app-onglets .ico{width:22px;height:22px}
  .page-tete{align-items:flex-start}
  .page-tete>.actions{width:100%}
  .page-tete>.actions .btn{flex:1 1 auto}
  .fiche>div{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .panneau-tete{padding:14px 16px}
  .panneau-corps{padding:16px}
}
@media (max-width:420px){
  .brand span{font-size:17px}
  .brand .logo{width:26px;height:26px}
  .entree-cote{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* plans à lancer : plus de pastille une fois le plan offert reçu (#103), une phrase discrète */
.restants{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.restants .ico{width:18px;height:18px}
.vide .restants{margin-top:6px;font-size:13.5px}
.offert-carte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 24px;padding:clamp(20px,3vw,32px);border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:var(--r);background:color-mix(in srgb,var(--blue) 6%,var(--panel))}
.offert-carte .vide-ico{margin:0}
.offert-tx{display:grid;gap:8px}
.offert-tx h2{font-size:clamp(20px,2.2vw,24px)}
.offert-tx p{color:var(--ink-2);max-width:60ch}
.offert-tx small{font-size:13px;color:var(--ink-2)}
@media (max-width:640px){
  .offert-carte{grid-template-columns:minmax(0,1fr)}
  .offert-carte .actions,.offert-carte .btn{width:100%}
}
@media (max-width:360px){.app-haut .brand span{display:none}}

/* ---------- dépôt d'un plan (plans/deposer.html, depot.js) ---------- */
.depot-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.depot{display:grid;gap:14px}
.depot-zone{position:relative;display:grid;justify-items:center;align-content:center;gap:12px;min-height:340px;padding:40px 24px;border:2px dashed var(--line);border-radius:var(--r);background:var(--panel);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.depot-zone:hover,.depot-zone:focus-within{border-color:var(--blue)}
.depot-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.depot-zone.survol{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--panel))}
.depot-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:color-mix(in srgb,var(--blue) 10%,var(--panel));color:var(--blue)}
.depot-ico .ico{width:30px;height:30px}
.depot-titre{font-size:clamp(19px,2.2vw,23px);font-weight:800;font-variation-settings:"wdth" 108}
.depot-titre .tel,.depot-survol{display:none}
.depot-zone.survol .depot-titre{display:none}.depot-zone.survol .depot-survol{display:block;font-size:20px;font-weight:800;color:var(--blue)}
.depot-zone .aide{max-width:44ch}
.depot-zone .btn{margin-top:6px;pointer-events:none}
.depot-choisi{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px 20px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.depot-apercu{display:grid;place-items:center;align-content:center;gap:4px;width:132px;aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--plan);color:var(--ink-2);overflow:hidden}
.depot-apercu .ico{width:40px;height:40px}
.depot-apercu.image{display:block;background:#fff}
.depot-apercu.image img{width:100%;height:100%;object-fit:contain}
.depot-fichier{display:grid;gap:4px;justify-items:start;min-width:0}
.depot-fichier b{font-size:16px;overflow-wrap:anywhere}
.depot-fichier .num{font-size:13px;color:var(--ink-2)}
.depot-lancer,.depot-envoi{grid-column:1/-1;display:grid;gap:8px}
.depot-lancer .btn{width:100%}
.depot-cote{display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.depot-etapes{margin:0;padding:0;list-style:none;counter-reset:e;display:grid;gap:14px}
.depot-etapes li{counter-increment:e;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 12px}
.depot-etapes li::before{content:counter(e);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);font:600 13px/1 var(--m)}
.depot-etapes b{font-size:14.5px}
.depot-etapes span{font-size:13.5px;color:var(--ink-2);line-height:1.45}

/* barre d'avancement : envoi, chantier */
.barre{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.barre i{display:block;height:100%;width:0;border-radius:inherit;background:var(--blue);transition:width .25s linear}
.barre.grande{height:12px}

/* ---------- suivi d'un plan (plans/suivi.html, suivi.js) ---------- */
.retour{display:inline-block;margin-bottom:10px;font-size:14px}
.suivi{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.suivi-principal{display:grid;gap:16px;min-width:0}
.chantier .panneau-corps{display:grid;gap:14px}
.chantier-haut{display:flex;align-items:baseline;gap:16px;min-height:44px}
.chantier-pct{font-size:clamp(30px,4vw,40px);font-weight:500;line-height:1}
.chantier-pct small{margin-left:3px;font-size:.55em;color:var(--ink-2)}
.chantier-phrase{color:var(--ink-2);transition:opacity .25s}
.chantier-phrase.fondu{opacity:0}
.lu{display:grid;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--line)}
.lu h3{font-size:14px}
.pieces{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pieces li{display:inline-flex;gap:6px;align-items:baseline;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:13.5px;animation:apparait .35s ease both}
.pieces .num{font-size:12px;color:var(--ink-2)}
@keyframes apparait{from{opacity:0;transform:translateY(4px)}}
.notes{margin:0;padding:0 0 0 18px;display:grid;gap:6px;color:var(--ink-2);font-size:13.5px}
.notes:empty{display:none}
.suivi-etapes{padding:18px 20px}
.etapes{margin:0;padding:0;list-style:none;display:grid}
.etapes li{position:relative;display:grid;gap:2px;padding:0 0 18px 30px;color:var(--ink-2)}
.etapes li:last-child{padding-bottom:0}
.etapes li::before{content:"";position:absolute;left:4px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--panel)}
.etapes li:not(:last-child)::after{content:"";position:absolute;left:10px;top:21px;bottom:2px;border-left:2px solid var(--line)}
.etapes b{font-size:14.5px;font-weight:600}
.etapes span{font-size:13px;line-height:1.45}
.etapes li.fait{color:var(--ink)}
.etapes li.fait::before{border-color:var(--ok);background:var(--ok)}
.etapes li.fait:not(:last-child)::after{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.etapes li.encours{color:var(--ink)}
.etapes li.encours::before{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent);animation:pulse 1.6s ease-in-out infinite}
.etapes li.attente::before{border-color:var(--blue);background:var(--panel)}
.etapes li.attente{color:var(--blue)}
.etapes li.arret::before{border-color:var(--err);background:var(--err)}
/* finitions : plan arrêté, présenté comme terminé par l'équipe (plans/etat.py) */
.finitions .panneau-corps{display:grid;gap:18px}
.finitions-tete{display:flex;gap:16px;align-items:flex-start}
.finitions-tete h2{font-size:clamp(19px,2.2vw,22px);margin:2px 0 4px}
.finitions-tete p{color:var(--ink-2)}
.finitions-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--blue) 12%,var(--panel));color:var(--blue)}
.finitions-ico .ico{width:26px;height:26px}
.finitions .barre{height:6px}
.finitions-etapes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.finitions-etapes li{display:grid;gap:4px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
.finitions-etapes .rond{display:grid;place-items:center;width:34px;height:34px;margin-bottom:6px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)}
.finitions-etapes .rond .ico{width:18px;height:18px}
.finitions-etapes b{font-size:14.5px}
.finitions-etapes span:not(.rond){font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.finitions-etapes .fait .rond{background:var(--ok);border-color:var(--ok);color:var(--panel)}
.finitions-etapes .encours{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:color-mix(in srgb,var(--blue) 6%,var(--panel))}
.finitions-etapes .encours .rond{background:var(--blue);border-color:var(--blue);color:var(--blue-ink);animation:pulse 1.6s ease-in-out infinite}
.finitions-rien{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--ok) 12%,var(--panel));color:var(--ok);font-size:14px;font-weight:600}
.finitions-rien .ico{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.finitions-etapes .encours .rond{animation:none}}
@media (max-width:640px){.finitions-etapes{grid-template-columns:minmax(0,1fr)}.finitions-etapes li{grid-template-columns:auto minmax(0,1fr);column-gap:12px}.finitions-etapes .rond{grid-row:span 2;margin:0}}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 0%,transparent)}}

/* échelle : image zoomable, deux points, loupe */
.echelle{overflow:hidden}
.echelle-vue{position:relative;height:min(62vh,620px);min-height:320px;overflow:hidden;background:var(--panel-2) radial-gradient(color-mix(in srgb,var(--ink) 10%,transparent) 1px,transparent 1px) 0 0/16px 16px;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.echelle-vue.sur-point{cursor:grab}
.echelle-vue:focus-visible{outline-offset:-3px}
.echelle-scene{position:absolute;left:0;top:0;transform-origin:0 0}
.echelle-scene img{display:block;max-width:none;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow);-webkit-user-drag:none}
.echelle-scene svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.echelle-scene .cote{stroke:#E5484D}
.echelle-scene .point{fill:rgba(229,72,77,.18);stroke:#E5484D}
.echelle-scene .halo{fill:transparent}
.echelle-scene .mire{stroke:#E5484D}
.loupe{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--ink-2),var(--shadow);pointer-events:none;background:#fff}
.echelle-zoom{position:absolute;right:12px;top:12px;display:grid;gap:6px}
.echelle-zoom .btn{min-height:40px;width:40px;padding:0;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(6px)}
.echelle-bas{display:grid;gap:12px;border-top:1px solid var(--line)}
.echelle-etat{font-weight:600;min-height:1.55em}
.echelle-etat.pret{color:var(--ok)}
.echelle-saisie{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.echelle-saisie .champ{flex:0 0 200px}
.echelle-saisie .actions{flex:1 1 auto;justify-content:flex-end}
.avec-unite{position:relative;display:block}
.avec-unite input{padding-right:40px;font-family:var(--m)}
.avec-unite span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-weight:500}
.echelle.occupe .echelle-vue{opacity:.6;pointer-events:none}

/* visite prête */
.prete{display:grid;gap:16px}
.prete-une{position:relative;display:grid;place-items:center;min-height:280px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--night);text-decoration:none}
.prete-une img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.prete-une:hover img{transform:scale(1.02)}
.prete-une .btn{position:relative;box-shadow:var(--shadow)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photos:empty{display:none}
.photos a{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.photos img{width:100%;height:100%;object-fit:cover}
.arret{display:grid;gap:12px}

/* Mes plans : carte en chantier, avancement en direct */
.vignette.attente .num{font-size:14px;color:var(--ink)}
.vignette.attente .phrase{max-width:90%;font-size:12.5px;text-align:center}

@media (max-width:860px){
  .depot-page,.suivi{grid-template-columns:minmax(0,1fr)}
  .depot-zone{min-height:260px;padding:28px 18px}
  .depot-titre .ordi{display:none}.depot-titre .tel{display:inline}
  .depot-choisi{grid-template-columns:88px minmax(0,1fr);padding:16px;gap:14px}
  .depot-apercu{width:88px}
  .suivi-etapes{padding:14px 16px}
  .echelle-vue{height:58vh;height:58dvh;min-height:300px}
  .echelle-saisie .champ{flex:1 1 100%}
  .echelle-saisie .actions .btn{flex:1 1 auto}
  .prete-une{min-height:220px;aspect-ratio:4/3}
}
@media (hover:none){.depot-titre .ordi{display:none}.depot-titre .tel{display:inline}}

/* dépôt depuis la vitrine, sans compte (web/plans/templates/plans/vitrine_*.html) */
.depot-etapes.compact{gap:10px}
.depot-plan{display:grid;gap:16px}
.apercu-plan{margin:0;display:grid;gap:6px}
.apercu-plan img{display:block;width:100%;max-height:min(46vh,420px);object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;min-height:120px}
.apercu-plan figcaption{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.depot-plan section{display:grid;gap:12px}
.depot-plan .btn.big{width:100%}
.depot-avert{margin:0;padding-left:18px;color:var(--ink-2);font-size:13.5px;display:grid;gap:4px}
.depot-avert:empty{display:none}
.volet-compte{padding-top:16px;border-top:1px solid var(--line)}
.volet-compte h2{font-size:21px}
.barre.attente{position:relative}
.barre.attente i{position:absolute;width:35%;animation:barre-attente 1.8s ease-in-out infinite alternate}
@keyframes barre-attente{from{left:0}to{left:65%}}
@media (prefers-reduced-motion:reduce){.barre.attente i{animation:none;width:100%;opacity:.5}}

/* Mon compte, Paiements (#103) */
.compte .g-carte .form{margin-top:4px}
.compte .g-doux{margin-bottom:12px}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.restants-carte{max-width:420px}
.g-tableau .lien{font-size:14px}
.visuel-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compte .form .actions .btn{flex:0 0 auto}
.g-choix-theme{max-width:620px}
.g-tableau tbody th{padding:10px 8px;text-align:left;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--g-trait) 60%,transparent)}
.g-tableau tr:last-child th{border-bottom:0}
@media (max-width:560px){.deux-champs{grid-template-columns:1fr}}
@media (max-width:767px){.g-tableau.g-cartes tbody th{padding:0;border:0}}
/* « Déposer un plan », partout (#103) : en haut de la barre de côté ; au téléphone, au milieu des onglets du bas, sous le pouce */
.app-cote>.app-deposer{margin-top:-10px}
.app-deposer[aria-current="page"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.onglet-deposer .rond{display:grid;place-items:center;width:52px;height:34px;border-radius:999px;background:var(--blue);color:var(--blue-ink);box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 30%,transparent)}
.app-onglets .onglet-deposer{color:var(--blue)}
.app-onglets .onglet-deposer .ico{width:22px;height:22px}
/* téléphone tourné : barres plus basses, la barre du haut défile avec la page, onglets en une ligne */
@media (max-width:860px) and (max-height:500px){
  .app-haut{position:relative;z-index:40;min-height:52px}
  .app-haut .g-compte-boite{max-height:calc(100dvh - 64px)}
  .app-onglets a{grid-auto-flow:column;justify-content:center;gap:8px;min-height:48px;font-size:13px}
  .onglet-deposer .rond{width:44px;height:30px}
  .app-page{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---------- assistant d'arrivée (comptes/assistant.html) : toute la page, une étape à la fois, avancement en haut ---------- */
.assistant{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto auto 1fr auto;background:var(--paper)}
.assistant-haut{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--panel)}
.assistant-pas{padding:28px clamp(16px,4vw,40px) 0}
.assistant-pas:empty{display:none}
.assistant-centre{display:grid;justify-items:center;align-content:start;padding:clamp(24px,5vh,56px) 16px 40px}
.assistant-corps{width:100%;max-width:560px;display:grid;gap:18px}
.assistant-corps h1{font-size:clamp(28px,3.4vw,40px)}
.assistant>.entree-pied{padding:18px 16px 24px}
.pas{max-width:760px;margin:0 auto;display:grid;gap:10px}
.pas-liste{margin:0;padding:0;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.pas-liste li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;color:var(--ink-2);font-size:13.5px;font-weight:600}
.pas-liste li:not(:first-child)::before{content:"";position:absolute;top:15px;right:calc(50% + 22px);left:calc(-50% + 22px);border-top:2px solid var(--line)}
.pas-liste li.fait:not(:first-child)::before,.pas-liste li.encours:not(:first-child)::before{border-color:var(--blue)}
.pas-rond{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--panel);font:600 14px/1 var(--f);color:var(--ink-2)}
.pas-rond .ico{width:18px;height:18px}
.pas-liste li.fait .pas-rond{border-color:var(--blue);background:var(--blue);color:var(--blue-ink)}
.pas-liste li.encours{color:var(--ink)}
.pas-liste li.encours .pas-rond{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%,transparent)}
.pas-court,.pas-barre{display:none}
.pas-retour{justify-self:start;max-width:560px;width:100%;margin:18px auto 0;display:block}
.pret{display:grid;justify-items:center;gap:16px;text-align:center}
.pret .vide-ico{width:72px;height:72px;border-radius:20px}
.pret .vide-ico .ico{width:36px;height:36px}
.pret form,.pret>.btn{width:100%}
.pret .btn.big{width:100%}
@media (max-width:640px){
  .pas-liste{display:none}
  .pas-court,.pas-barre{display:block}
  .pas-court{margin:0;font-size:14px;color:var(--ink-2)}
  .pas-court b{color:var(--ink)}
  .pas-barre{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
  .pas-barre i{display:block;height:100%;background:var(--blue);border-radius:inherit}
  .assistant-pas{padding-top:16px}
  .assistant-centre{padding-top:20px}
}
@media (max-height:500px){.assistant-centre{padding-top:16px}.assistant-pas{padding-top:12px}}

/* Mes plans : plan offert pas encore débloqué (revue du 08/10 : entre la grande carte d'avant et une simple ligne) : titre court,
   une phrase, un bouton ; disparaît une fois le plan offert obtenu */
.offert-moyen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 18px;border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.offert-moyen .vide-ico{margin:0;width:48px;height:48px;border-radius:14px}
.offert-moyen .vide-ico .ico{width:24px;height:24px}
.offert-moyen h2{font-size:17px;margin:0 0 2px}
.offert-moyen p{margin:0;color:var(--ink-2)}
@media (max-width:640px){.offert-moyen{grid-template-columns:auto minmax(0,1fr)}.offert-moyen .btn{grid-column:1/-1;width:100%}}