/* La meme ecriture que poqovitch.fr : une antique a empattements pour les
   titres, une geometrique pour le texte, des angles droits partout, et deux
   themes qui suivent le systeme. Les valeurs sont reprises telles quelles
   pour que passer d'un site a l'autre ne se sente pas. */

:root {
  --fond: #ffffff;
  --carte: #ffffff;
  --champ: #ffffff;
  --zone: #f7f6f4;
  --trait: #e8e5e0;
  --texte: #16150f;
  --texte-doux: #8a857c;
  --lien: #56524a;
  --accent: #16150f;
  --accent-texte: #ffffff;
  --danger: #a5413c;
  --erreur-fond: #fbf1f0;
  --erreur-trait: #eed7d5;
  --police-titre: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, Georgia, serif;
  --police-texte: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ombre: 0 1px 2px rgba(22, 21, 15, 0.04), 0 12px 28px -18px rgba(22, 21, 15, 0.22);
  --inversion-logo: invert(1);
}

/* Deux sources pour le theme, dans cet ordre :
 *
 *   1. la preference du systeme, suivie tant que rien n'a ete choisi ;
 *   2. le choix du bouton, pose sur <html> et retenu dans le navigateur.
 *
 * Le second bloc vient APRES le premier pour l'emporter. La palette sombre
 * est donc ecrite deux fois : sans preprocesseur, un bloc de declarations ne
 * se reutilise pas, et c'est exactement ce que fait poqovitch.fr. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) { color-scheme: dark; }
  :root:not([data-theme='clair']) {
    --fond: #000000;
    --carte: #121212;
    --champ: #0b0b0b;
    --zone: #1c1c1b;
    --trait: #272725;
    --texte: #f2f0eb;
    --texte-doux: #9b968d;
    --lien: #c4bfb5;
    --accent: #f2f0eb;
    --accent-texte: #101010;
    --danger: #e37c74;
    --erreur-fond: #2a1b1a;
    --erreur-trait: #4a302d;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 28px -18px rgba(0, 0, 0, 0.9);
    --inversion-logo: none;
  }
}

:root[data-theme='sombre'] { color-scheme: dark; }
:root[data-theme='sombre'] {
    --fond: #000000;
    --carte: #121212;
    --champ: #0b0b0b;
    --zone: #1c1c1b;
    --trait: #272725;
    --texte: #f2f0eb;
    --texte-doux: #9b968d;
    --lien: #c4bfb5;
    --accent: #f2f0eb;
    --accent-texte: #101010;
    --danger: #e37c74;
    --erreur-fond: #2a1b1a;
    --erreur-trait: #4a302d;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 28px -18px rgba(0, 0, 0, 0.9);
    --inversion-logo: none;
}

* { box-sizing: border-box; }

/* Le navigateur cache les elements porteurs de « hidden » par un
   display:none ; mais TOUTE regle d'auteur le bat, fut-elle moins
   specifique. Sans ce rappel, un simple « .ajout { display: flex } »
   rendrait le formulaire visible meme cache — ce qui est arrive. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.application {
  max-width: 960px;
  margin: 0 auto;
  padding:
    calc(32px + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    96px
    calc(24px + env(safe-area-inset-left, 0px));
}

/* — L'en-tete — */

.entete {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--trait);
}
.entete .cote { display: flex; align-items: center; }
.entete .cote.droite { justify-content: flex-end; }
.logo { margin: 0; line-height: 0; justify-self: center; }

/* Le bouton de theme : une icone nue, sans contour ni aplat, comme sur
   poqovitch.fr — c'est la couleur seule qui dit l'etat. */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte-doux);
  cursor: pointer;
  transition: color 0.15s ease;
}
.bouton-icone:hover { color: var(--texte); }
.bouton-icone svg { width: 18px; height: 18px; }

/* Le bouton de la serrure porte un mot, et un mot ne se dessine pas : il
   prend l'antique des titres plutot que la police du texte courant. */
.bouton-menu {
  padding: 0 6px;
  height: 38px;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font-family: var(--police-titre);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}
.bouton-menu:hover { color: var(--texte); }
.bouton-menu.actif { color: var(--texte); }
.logo img { width: 40px; height: 40px; display: block; filter: var(--inversion-logo); }

/* — Les cartes — */

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre);
  padding: 22px;
  margin-bottom: 22px;
}

.titre-section {
  margin: 0 0 16px;
  font-family: var(--police-titre);
  font-size: 19px;
  font-weight: 600;
}

/* — Les champs — */

.rangee { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
.champ.etroit { flex: 0 1 120px; }

label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

input, select {
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 0;
  background: var(--champ);
  color: var(--texte);
  font: 15px var(--police-texte);
  min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bouton {
  padding: 10px 18px;
  border: 0;
  background: var(--accent);
  color: var(--accent-texte);
  font: 15px var(--police-texte);
  cursor: pointer;
}
.bouton:hover { opacity: 0.88; }

.lien {
  border: 0;
  background: none;
  padding: 10px 2px;
  color: var(--lien);
  font: 14px var(--police-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien:hover { color: var(--texte); }
.lien.danger { color: var(--danger); }

/* — Le simulateur, en tableur — */

/* Beaucoup de poissons tiennent mal dans une page : le tableau defile
   lateralement plutot que de comprimer ses colonnes jusqu'a l'illisible. */
.tableur {
  overflow-x: auto;
  margin: 0 -22px;
  padding: 0 22px;
}

.tableur table {
  border-collapse: collapse;
  min-width: 100%;
}

.tableur th,
.tableur td {
  border: 1px solid var(--trait);
  padding: 9px 12px;
  text-align: right;
  white-space: nowrap;
}

/* La gouttiere nomme les lignes, comme dans un tableur. Elle reste collee a
   gauche quand on fait defiler les colonnes, sans quoi on perdrait de vue ce
   que chaque ligne represente. */
.tableur .gouttiere {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--carte);
  border-left: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.tableur thead th { background: var(--zone); vertical-align: bottom; }
.tableur thead .gouttiere { background: var(--carte); }

.tableur .nom-colonne {
  display: block;
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 600;
  color: var(--texte);
}
.tableur .prix-colonne {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

/* Le champ occupe toute la cellule : c'est la cellule qui porte le cadre,
   comme dans un tableur ou l'on tape « dans » la grille. */
.tableur td input {
  width: 100%;
  min-width: 72px;
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
  font: 15px var(--police-texte);
  font-variant-numeric: tabular-nums;
}
.tableur td input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Les petites fleches de l'ascenseur sont retirees : dans une case etroite
   elles se touchent par erreur, au doigt surtout, et elles mangeaient la
   place du chiffre.
 *
 * Le champ reste un « number » : c'est lui qui fait surgir le clavier
 * numerique sur un telephone. Seule son apparence change — WebKit par ses
 * pseudo-elements, Firefox et les autres par « appearance: textfield ». Les
 * touches flechees du clavier continuent d'incrementer, elles ne genent
 * personne. */
.tableur td input::-webkit-outer-spin-button,
.tableur td input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.tableur td input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.tableur .total-colonne {
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

.total-general {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 18px;
}
.total-general .intitule {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.total-general strong {
  font-size: 30px;
  font-weight: 600;
  /* Chiffres tabulaires : le total change a chaque frappe, et des chiffres
     de largeurs inegales le feraient sautiller. */
  font-variant-numeric: tabular-nums;
}

/* — La liste des prix — */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait);
}
.liste li:last-child { border-bottom: 0; }
.liste .nom { flex: 1 1 auto; font-weight: 500; }
/* Un montant ne se coupe pas entre son nombre et son symbole : sur un
   telephone, « 105,00 » et « $ » se retrouvaient sur deux lignes. */
.liste .prix { font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste .actions { display: flex; gap: 12px; }

/* En edition, la ligne devient deux champs : le nom s'etire, le prix reste
   etroit, exactement comme en lecture. */
.liste li.edition { flex-wrap: wrap; }
.liste li input[type="text"] { flex: 1 1 160px; }
.liste li input.prix-saisi { flex: 0 1 110px; }

.vide { color: var(--texte-doux); font-size: 14.5px; margin: 0; }

/* Les deux groupes de prix dans la meme carte : un trait les separe, plutot
   qu'une carte chacun — ils repondent a la meme question, et deux cadres de
   plus alourdiraient la page. */
.groupe-prix + .groupe-prix {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
}
.titre-groupe {
  margin: 0 0 12px;
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 600;
  color: var(--texte-doux);
}

.ajout {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
}

/* — Divers — */

.erreur {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--erreur-trait);
  background: var(--erreur-fond);
  color: var(--danger);
  font-size: 14.5px;
}

.connexion label { display: block; margin-bottom: 5px; }

@media (max-width: 560px) {
  .application { padding-left: 16px; padding-right: 16px; }
  .carte { padding: 18px; }
  .tableur { margin: 0 -18px; padding: 0 18px; }
}