/* ═══════════════════════════════════════════════════════════════
   PORTAL.CSS — socle partagé des pages publiques Can-Inspec
   (formulaire/, reparations/). Tokens + composants communs :
   nav, hero, carte, champs, boutons, priorités, footer, spinner.
   Chaque page garde uniquement ses styles spécifiques en local.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#003366;--blue:#0066CC;--green:#3aaa35;--red:#cc2200;--amber:#e67e00;
  --light:#f4f7fb;--white:#fff;--text:#1a1a1a;--muted:#5a6b7e;--border:#d0dce8;
  --navy-600:#0a4a85;--lime-50:#eef9ed;
  --radius-sm:9px;--radius-md:12px;--radius-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'Open Sans',sans-serif;background:var(--light);color:var(--text);min-height:100vh;padding-bottom:env(safe-area-inset-bottom);}

/* Feedback tactile : le :active remplace le hover sur mobile (gants). */
button:active,.mat-row:active,.choice-card:active,.sidebar-item:active{transform:scale(0.97);}
button:focus-visible,.mat-row:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* ── NAV ── */
nav{background:var(--navy);height:56px;padding:0 1rem;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--green);}
.nav-logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:white;letter-spacing:0.5px;}
.nav-logo em{color:var(--green);font-style:normal;}

/* ── HERO ── */
.form-hero{background:var(--navy);padding:3rem 2rem 4rem;text-align:center;border-bottom:4px solid var(--green);}
.form-hero h1{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:800;color:white;margin-bottom:6px;}
.form-hero p{font-size:14px;color:rgba(255,255,255,0.75);}

/* ── CARTE ── */
.form-card{max-width:600px;margin:-2rem auto 3rem;background:white;border-radius:var(--radius-lg);box-shadow:0 8px 36px rgba(0,51,102,0.13),0 2px 8px rgba(0,0,0,0.06);padding:1.75rem;}

/* ── CHAMPS ── */
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;color:var(--muted);}
.field input,.field select,.field textarea{border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:16px;font-family:'Open Sans',sans-serif;color:var(--text);background:white;outline:none;transition:border-color 0.15s,box-shadow 0.15s;width:100%;-webkit-appearance:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,204,0.1);}

/* ── BOUTONS ── */
.btn-primary{padding:12px 20px;background:var(--navy);color:white;border:none;border-radius:var(--radius-sm);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;min-height:44px;}
.btn-primary:hover{background:var(--blue);}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;}
.btn-outline{padding:12px 18px;min-height:44px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:white;color:var(--muted);font-size:13px;font-family:'Montserrat',sans-serif;font-weight:600;cursor:pointer;}

/* ── PRIORITÉS (réparation) ── */
.prio-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.prio-btn{padding:14px 8px;border-radius:10px;border:2px solid var(--border);background:white;cursor:pointer;transition:all 0.15s;text-align:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:var(--muted);min-height:44px;}
.prio-btn.active-bas{background:#edf7ed;border-color:var(--green);color:#1a6b1a;}
.prio-btn.active-moyen{background:#fff7ee;border-color:var(--amber);color:#7a4400;}
.prio-btn.active-urgent{background:#fff0ee;border-color:var(--red);color:#7a0000;}
.prio-icon{font-size:22px;margin-bottom:4px;display:block;}

/* ── FOOTER ── */
footer{background:var(--navy);color:rgba(255,255,255,0.75);text-align:center;font-size:12px;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));margin-top:3rem;border-top:3px solid var(--green);}
footer span{color:var(--green);}

/* ── SPINNER ── */
@keyframes spin{to{transform:rotate(360deg)}}