/* theme.css — charte « One · Groupe Colonna », commune aux pages du portail (One, Tarifs, Messagerie, Facturation…).
   Thème CLAIR par défaut (fond blanc, indigo du groupe en accent) ; thème SOMBRE avec <html data-theme="dark">.
   Adopter : <link rel="stylesheet" href="one/theme.css"> puis n'utiliser que les variables ci-dessous (jamais de couleur en dur). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');
:root{
  /* Couleurs du groupe */
  --indigo-nuit:#100f28; --indigo:#2e2a7a; --bleu-profond:#0f5f96; --ciel-groupe:#4aa5da; --or-groupe:#d9b25a;
  /* Rôles (clair) */
  --fond:#f5f6fa; --lateral:#ffffff; --carte:#ffffff; --carte-2:#f3f4f8; --survol:#eef0f6;
  --ligne:#e7e9f0; --ligne-forte:#d7dbe6;
  --texte:#16152f; --texte-2:#3b3e58; --doux:#5d6280; --tres-doux:#868aa3;
  --accent:#3a36a0; --accent-fort:#2e2a7a; --accent-doux:#eeeefb; --sur-accent:#ffffff;
  --ciel:var(--accent); --ciel-clair:#7d7ad0; --or:#946c12;
  --ok:#1d7f55; --att:#a3620a; --crit:#bf3a37;
  --voile-modal:rgba(22,21,47,.28);
  /* Canaux (lisibles avec un texte blanc) */
  --c-airbnb:#d4485f; --c-booking:#2f62c8; --c-direct:#22835a; --c-vrbo:#b26f12; --c-gites:#5d8c21; --c-autre:#6f55c2; --c-blocage:#9aa0b6;
  --blocage-1:#e3e5ee; --blocage-2:#d6d9e4; --blocage-texte:#4b4f68;
  /* Typo, rayons, ombres */
  --titre:Montserrat,"Segoe UI",system-ui,sans-serif; --texte-f:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:8px; --r:10px; --r-l:14px;
  --ombre:0 1px 2px rgba(22,21,47,.05);
  --ombre-haute:0 20px 50px -20px rgba(22,21,47,.28);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --fond:#100f28; --lateral:#0c0b20; --carte:#16153a; --carte-2:#1c1a45; --survol:#242255;
  --ligne:rgba(143,211,240,.10); --ligne-forte:rgba(143,211,240,.20);
  --texte:#eef1fb; --texte-2:#c3c9e4; --doux:#9298bf; --tres-doux:#6a6f9a;
  --accent:#4aa5da; --accent-fort:#2f8dc8; --accent-doux:rgba(74,165,218,.14); --sur-accent:#0b1530;
  --ciel:#4aa5da; --ciel-clair:#8fd3f0; --or:#d9b25a;
  --ok:#3fbf8a; --att:#e8a23a; --crit:#ef6461;
  --voile-modal:rgba(6,5,18,.55);
  --c-airbnb:#e0556d; --c-booking:#3d72e0; --c-direct:#2e9e6e; --c-vrbo:#c7821c; --c-gites:#6f9e2c; --c-autre:#8467d8; --c-blocage:#4a4f78;
  --blocage-1:#3b3f66; --blocage-2:#33365a; --blocage-texte:#b6bbdb;
  --ombre:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px -18px rgba(0,0,0,.6);
  --ombre-haute:0 24px 60px -20px rgba(0,0,0,.75);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font:400 14px/1.55 var(--texte-f);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3{font-family:var(--titre);letter-spacing:-.01em}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-fort);text-decoration:underline;text-underline-offset:3px}
a.btn:hover{text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num,.tab{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Boutons */
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--ligne-forte);background:var(--carte);color:var(--texte-2);font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{background:var(--survol);color:var(--texte)}
.btn.primaire{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.btn.primaire:hover{background:var(--accent-fort);border-color:var(--accent-fort);color:var(--sur-accent)}
.btn.icone{width:36px;padding:0;justify-content:center}
.btn svg,.ico svg{width:16px;height:16px;flex:none}
kbd{font:500 11px var(--texte-f);padding:1px 6px;border-radius:5px;border:1px solid var(--ligne-forte);background:var(--carte-2);color:var(--doux)}
/* Champs */
input,select,textarea{height:36px;background:var(--carte);border:1px solid var(--ligne-forte);border-radius:var(--r);padding:0 11px;color:var(--texte)}
textarea{height:auto;padding:9px 11px}
input::placeholder,textarea::placeholder{color:var(--tres-doux)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-doux)}
/* Cartes */
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--ombre)}
.carte>h2,.surtitre{font:600 11px/1.2 var(--texte-f);text-transform:uppercase;letter-spacing:.08em;color:var(--doux);margin:0 0 14px}
/* Étiquettes */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:500;background:var(--carte-2);color:var(--texte-2);white-space:nowrap;border:1px solid var(--ligne)}
.tag.ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:transparent;color:var(--ok)}
.tag.att{background:color-mix(in srgb,var(--att) 11%,transparent);border-color:transparent;color:var(--att)}
.tag.crit{background:color-mix(in srgb,var(--crit) 10%,transparent);border-color:transparent;color:var(--crit)}
.tag.or{background:color-mix(in srgb,var(--or) 12%,transparent);border-color:transparent;color:var(--or)}
.tag svg{width:12px;height:12px}
.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
/* Tableaux */
.tableau{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tableau th{text-align:left;color:var(--doux);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;border-bottom:1px solid var(--ligne);position:sticky;top:0;background:var(--carte);z-index:1}
.tableau td{padding:12px 16px;border-bottom:1px solid var(--ligne);white-space:nowrap;color:var(--texte-2)}
.tableau td:first-child{color:var(--texte)}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau tbody tr{transition:background .12s}.tableau tbody tr:hover td{background:var(--survol)}
.tableau .num{text-align:right}
/* État vide */
.etat-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px 16px;color:var(--doux)}
.etat-vide svg{width:34px;height:34px;color:var(--tres-doux)}
.etat-vide b{color:var(--texte-2);font-weight:600}
/* Défilement */
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--texte) 16%,transparent);border-radius:10px;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-track{background:transparent}