/* web/odr.css — l'onglet ODR de l'Administration. Va avec web/odr.js.

   Tout est sous le préfixe « odx- » : .vide, .case et .grille existent déjà
   dans app.css, et reprendre un nom pris casse une mise en page ailleurs sans
   rien dire. Aucune couleur n'est écrite ici — tout passe par les variables
   du thème, le clair suit donc sans une ligne de plus.

   L'écran s'écrit d'abord pour le téléphone, sur une colonne. Les grilles
   n'arrivent qu'au-delà de 701 px : bornées là, elles ne traversent pas la
   section téléphone d'app.css. */

.odx { gap: var(--e4); }
.odx h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 15px;
}
.odx svg { flex: none; }

/* --- L'en-tête ----------------------------------------------------------- */

.odx-entete { display: flex; flex-direction: column; gap: var(--e3); }
.odx-entete-haut {
  display: flex; flex-direction: column; gap: var(--e3);
}
.odx-titre {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em;
}
.odx-entete-haut p { max-width: 52ch; margin: 0; line-height: 1.5; }

.odx-chiffres { display: flex; gap: 8px; }
.odx-chiffre {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--surf-2);
}
.odx-chiffre b {
  font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums;
}
.odx-chiffre span { font-size: 11px; color: var(--txt-3); }

.odx-saison { display: flex; flex-direction: column; gap: 6px; }
.odx-saison-txt {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--txt-2);
}
.odx-saison-txt b { color: var(--txt); font-weight: 620; }
.odx-jauge {
  height: 6px; border-radius: var(--r-p);
  background: var(--surf-3); overflow: hidden;
}
.odx-jauge i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--acc-vif);
}
.odx-presse .odx-saison-txt b { color: var(--alerte-txt); }
.odx-presse .odx-jauge i { background: var(--alerte); }

.odx-releve {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: var(--e3); border-top: 1px solid var(--bord);
}
.odx-releve .petit { line-height: 1.5; }
.odx-releve .petit svg { vertical-align: -3px; color: var(--bon-txt); }

.odx-alertes { display: flex; flex-direction: column; gap: 8px; }

/* --- Le simulateur ------------------------------------------------------- */

.odx-simu { display: flex; flex-direction: column; gap: var(--e3); }
.odx-simu-tete p { margin: 4px 0 0; }
.odx-simu-corps { display: flex; flex-direction: column; gap: var(--e3); }
.odx-simu-saisie { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.odx-simu-saisie .segmente { flex-wrap: wrap; }
.odx-simu-saisie input[type="date"] { max-width: 190px; }
.odx-simu-reponse {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: var(--e3);
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--surf-2);
}

.odx-attente {
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  color: var(--txt-3); text-align: center; font-size: 13px;
}
.odx-attente p { margin: 0; }

/* Les quatre tons d'un verdict. Un seul endroit les nomme : la pastille, le
   liseré de la carte et le bandeau de la réponse lisent la même variable. */
.odx-ton-bon    { --odx-c: var(--bon);     --odx-t: var(--bon-txt); }
.odx-ton-info   { --odx-c: var(--acc-vif); --odx-t: var(--acc-vif); }
.odx-ton-alerte { --odx-c: var(--alerte);  --odx-t: var(--alerte-txt); }
.odx-ton-muet   { --odx-c: var(--txt-3);   --odx-t: var(--txt-2); }

.odx-bilan {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--odx-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--odx-c) 34%, transparent);
}
.odx-bilan b { color: var(--odx-t); font-size: 15px; }
.odx-bilan span { font-size: 13px; color: var(--txt-2); }

.odx-verdict {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bord); border-radius: var(--r-s);
  border-left: 3px solid var(--odx-c);
  background: var(--surf-1);
}
.odx-verdict-tete {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.odx-verdict-tete b { font-size: 14px; }
.odx-pastille {
  font-size: 11px; font-weight: 620;
  padding: 2px 9px; border-radius: var(--r-p);
  color: var(--odx-t);
  background: color-mix(in srgb, var(--odx-c) 14%, transparent);
}
.odx-montant { margin-left: auto; font-size: 12px; color: var(--txt-2); }

.odx-raisons, .odx-demander ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.odx-raisons li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--txt-2); line-height: 1.4;
}
.odx-raisons i { flex: none; display: inline-flex; margin-top: 1px; }
.odx-raisons i svg { width: 15px; height: 15px; }
.odx-ok  { color: var(--bon-txt); }
.odx-ko  { color: var(--danger-txt); }
.odx-nsp { color: var(--alerte-txt); }

.odx-demander {
  padding: 8px 10px; border-radius: var(--r-xs);
  background: var(--surf-2);
}
.odx-demander ul { margin-top: 4px; }
.odx-demander li {
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.4;
}
.odx-demander li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--odx-c);
}
.odx-form {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12px; color: var(--acc-vif); text-decoration: none;
}
.odx-form:hover { text-decoration: underline; }
.odx-form svg { width: 14px; height: 14px; }

.odx-ecartees { font-size: 13px; color: var(--txt-2); }
.odx-ecartees summary { cursor: pointer; padding: 4px 0; color: var(--txt-3); }
.odx-ecartee {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 0; border-top: 1px solid var(--bord);
}
.odx-ecartee b { font-size: 13px; color: var(--txt); font-weight: 600; }

/* --- Le catalogue -------------------------------------------------------- */

.odx-catalogue { display: flex; flex-direction: column; gap: var(--e3); }
.odx-rayons { display: flex; gap: 6px; flex-wrap: wrap; }
.odx-rayon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-p);
  border: 1px solid var(--bord); background: transparent;
  color: var(--txt-2); font: inherit; font-size: 13px; cursor: pointer;
}
.odx-rayon:hover { color: var(--txt); border-color: var(--bord-fort); }
.odx-rayon.actif {
  color: var(--txt); background: var(--acc-sourd); border-color: var(--acc-bord);
}
.odx-rayon i {
  font-style: normal; font-size: 11px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

.odx-grille { display: grid; grid-template-columns: 1fr; gap: var(--e3); }

.odx-carte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.odx-dort > :not(.odx-pied):not(.odx-reglage) { opacity: .5; }
.odx-carte-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.odx-rayon-nom {
  font-size: 11px; font-weight: 620; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-3);
}
.odx-mode {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 620;
  padding: 3px 9px; border-radius: var(--r-p);
}
.odx-mode svg { width: 13px; height: 13px; }
.odx-mode-seule {
  color: var(--bon-txt);
  background: color-mix(in srgb, var(--bon) 13%, transparent);
}
.odx-mode-main { color: var(--txt-2); background: var(--surf-3); }

.odx-nom { font-size: 15px; font-weight: 620; line-height: 1.3; }
.odx-gain {
  font-size: 19px; font-weight: 680; letter-spacing: -.01em;
  line-height: 1.25; margin-bottom: 4px;
}
.odx-ligne {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--txt-2); line-height: 1.45;
}
.odx-ligne svg { width: 15px; height: 15px; margin-top: 1px; color: var(--txt-3); }
.odx-ligne b { color: var(--txt); font-weight: 620; }
.odx-ligne.muet { color: var(--txt-3); }
.odx-ligne.odx-ko, .odx-ligne.odx-ko svg { color: var(--danger-txt); }

.odx-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--bord);
}

.odx-creer input { flex: 1; min-width: 200px; }

/* --- Le réglage d'une ODR ------------------------------------------------ */

.odx-reglage {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px; padding-top: var(--e3);
  border-top: 1px solid var(--bord);
}
.odx-reglage h3 { margin-top: 10px; font-size: 14px; }
.odx-reglage > p { margin: -4px 0 0; line-height: 1.5; max-width: 78ch; }
.odx-reglage textarea, .odx-reglage select { width: 100%; }
.odx-qui { flex-wrap: wrap; align-self: flex-start; }
.odx-condition { display: flex; flex-direction: column; gap: 4px; }
.odx-fin { margin-top: 10px; }
.odx-rang { margin-top: 10px; }

.odx-saisons { display: flex; flex-direction: column; gap: 8px; }
.odx-saison-ligne {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: var(--r-s);
  background: var(--surf-2);
}
.odx-saison-ligne label {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.odx-saison-ligne label span { font-size: 11px; color: var(--txt-3); }
.odx-saison-ligne input { width: 100%; min-width: 0; }
.odx-saison-ligne .odx-large { grid-column: 1 / -1; }
.odx-neuve { align-self: center; }

/* --- Ce que Larry ne sait pas encore ------------------------------------- */

.odx-questions { display: flex; flex-direction: column; gap: 10px; }
.odx-questions p { margin: 0; line-height: 1.5; max-width: 78ch; }
.odx-qliste { display: flex; flex-direction: column; }
.odx-q {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0; border-top: 1px solid var(--bord);
  font-size: 13.5px;
}
.odx-q > div { display: flex; gap: 5px; flex-wrap: wrap; }

/* --- Au-delà du téléphone ------------------------------------------------ */

@media (min-width: 701px) {
  .odx-entete-haut {
    flex-direction: row; justify-content: space-between; align-items: flex-start;
  }
  .odx-chiffres { flex: none; }
  .odx-chiffre { flex: none; min-width: 112px; }
  .odx-releve {
    flex-direction: row; align-items: center; justify-content: space-between;
  }
  .odx-grille { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  /* La carte qu'on règle prend toute la largeur : ses cases à cocher ne
     tiennent pas dans une colonne de trois cents pixels. */
  .odx-ouverte { grid-column: 1 / -1; }
  .odx-saison-ligne {
    grid-template-columns: repeat(3, minmax(130px, 150px)) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  }
  .odx-saison-ligne .odx-large { grid-column: auto; }
  .odx-q {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--e3);
  }
  .odx-q > div { flex: none; max-width: 50%; justify-content: flex-end; }
}

@media (min-width: 1100px) {
  .odx-simu-corps {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

/* --- Les ODR sur la vente ------------------------------------------------

   Une ligne par ODR dans la fiche « Vendu ». Hors de l'Administration, donc
   sous un autre prefixe : « odv- ». La ligne tient sur un telephone sans
   rien changer — le nom se replie, le montant passe dessous. */

.odv { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.odv[hidden] { display: none; }
.odv-ligne {
  border: 1px solid var(--bord); border-radius: var(--r-s);
  background: var(--surf-2);
}
.odv-ligne:has(.odv-tete input:checked) {
  border-color: var(--acc-bord); background: var(--acc-sourd);
}
.odv-tete {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; cursor: pointer;
}
.odv-tete input { flex: none; margin: 0; }
.odv-nom { flex: 1 1 160px; min-width: 0; font-size: 14px; font-weight: 620; }
.odv-gain { font-size: 12.5px; color: var(--txt-2); }

.odv-detail { border-top: 1px solid var(--bord); }
.odv-detail summary {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--acc-vif);
}
.odv-detail summary::-webkit-details-marker { display: none; }
.odv-detail summary::after {
  content: "\203A"; margin-left: auto; font-size: 16px; line-height: 1;
  transition: transform .15s;
}
.odv-detail[open] summary::after { transform: rotate(90deg); }
.odv-detail summary svg { width: 15px; height: 15px; flex: none; }
.odv-detail > :not(summary) { margin: 0 12px; }
.odv-detail > :last-child { margin-bottom: 12px; }
.odv-titre {
  padding-top: 8px; font-size: 11px; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3);
}
.odv-question {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; cursor: pointer;
  font-size: 13.5px; line-height: 1.4;
}
.odv-question input { flex: none; margin: 2px 0 0; }
.odv-question:has(input:checked) span { color: var(--txt-3); text-decoration: line-through; }
.odv-droit { padding-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--txt-2); }
.odv-limite { display: flex; align-items: center; gap: 6px; padding-top: 10px; color: var(--alerte-txt); }
.odv-limite svg { width: 14px; height: 14px; flex: none; }

/* « .champ label » d'app.css pose ses marges et sa casse sur tout label du
   formulaire : ces deux-la sont des lignes a cocher, pas des intitules. */
.odv label.odv-tete, .odv label.odv-question {
  margin: 0; text-transform: none; letter-spacing: 0; color: var(--txt);
}
.odv label.odv-question {
  align-items: center; margin: 0 12px; padding: 6px 0;
  font-size: 13.5px; font-weight: 400;
}

/* La question « ODR » est rangee dans une grille a deux colonnes avec les
   autres precisions de la vente : sa liste restait coincee dans la colonne de
   gauche, la moitie de la fenetre vide a cote. Elle prend toute la largeur. */
.champ:has(> .odv) { grid-column: 1 / -1; min-width: 0; }
.champ:has(> .odv) > .segmente { align-self: flex-start; }