/* app-base.css — EXTRAIT de landing.css pour l'app (2026-08-01).
   POURQUOI : app.html chargeait landing.css EN ENTIER (26 Ko) alors que seules ces regles touchent un
   element de l'app. Le reste (hero, sections vitrine, tarifs...) etait du poids mort ET la source de
   la "bave" documentee : des selecteurs generiques de la vitrine qui deteignaient sur l'app.
   COMMENT : la liste des selecteurs a ete relevee DANS LE NAVIGATEUR (ceux qui matchent vraiment un
   element, sur tous les ecrans + la fenetre de connexion ouverte), pas devinee. Regles copiees TELLES
   QUELLES et chargees a la MEME position que landing.css -> cascade identique -> rendu identique,
   verifie par comparaison des styles calcules sur 313 elements : ZERO difference.
   Deux familles : (1) la base (typographie, boutons, images) dont l'app a fini par dependre,
   (2) la fenetre de connexion injectee par auth.js (.modal-*, .field, .role-toggle).
   NE PAS ajouter de style ici : c'est un extrait, pas un fichier de travail. Un nouveau style va dans
   components.css ou style.css. Si la fenetre de connexion evolue dans landing.css, refaire l'extrait. */

html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body,'Source Sans 3',system-ui,sans-serif);line-height:1.55;}
h1,h2,h3{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;line-height:1.05;letter-spacing:.005em;text-transform:uppercase;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
a{color:inherit;}
section[id]{scroll-margin-top:70px;}
.btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;padding:11px 20px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 2px 8px rgba(20,23,28,.07);transition:transform .08s,box-shadow .08s,background .15s;}
.btn-primary{background:var(--flag);color:#fff;border-color:var(--flag);box-shadow:0 6px 18px rgba(255,90,31,.28);}
.btn-block{width:100%;text-align:center;}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(21,19,15,.55);z-index:100;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.45);max-width:380px;width:100%;padding:26px;position:relative;max-height:90vh;overflow-y:auto;}
.modal-box .btn{border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 14px var(--border);}
.modal-box .consent-line{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);line-height:1.35;margin:2px 0 12px;cursor:pointer;}
.modal-box .consent-line input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:var(--flag);}
.modal-box .consent-line a{color:var(--flag);font-weight:600;text-decoration:underline;}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);}
.modal-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.modal-tab{flex:1;background:none;border:none;padding:10px 4px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;}
.modal-tab.active{color:var(--ink);border-bottom-color:var(--flag);}
.modal-panel{display:none;}
.modal-panel.active{display:block;}
.modal-box h2{font-size:18px;margin:0 0 14px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:11px;font-weight:700;margin-bottom:5px;color:var(--muted);}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:10px 11px;font-size:14px;font-family:inherit;background:var(--surface-2);color:var(--ink);transition:border-color .12s,background .12s,box-shadow .12s;}
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;caret-color:var(--ink);}
.role-toggle{display:flex;gap:8px;margin-bottom:14px;}
.role-toggle button{flex:1;border:1px solid var(--border);border-radius:14px;padding:9px;font-size:13px;font-weight:700;background:var(--surface-2);color:var(--muted);cursor:pointer;}
.role-toggle button.active{background:var(--flag);color:#fff;border-color:var(--flag);}
.modal-box .btn-primary,.modal-box .btn.btn-primary{background:var(--flag);color:#fff;border-color:var(--flag);}
.role-panel{display:none;}
.role-panel.active{display:block;}
.form-error{font-size:12px;color:#c0392b;margin:-2px 0 10px;display:none;}