:root {
  --fond: #f5f5f3;
  --carte: #ffffff;
  --texte: #1f2328;
  --texte-doux: #5c6672;
  --bord: #e2e3e0;
  --accent: #2f5d50;
  --accent-clair: #e8f0ed;
  --rouge: #b03a2e;
  --rouge-clair: #fbeae8;
  --vert: #2d7a4f;
  --orange: #b4700f;
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 0; }
h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }

/* --- Structure ---------------------------------------------------------- */
.entete {
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 10;
}
.entete-interieur {
  max-width: 1200px; margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.marque { font-weight: 650; color: var(--texte); text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.pied { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem 2rem; color: var(--texte-doux); font-size: .8rem; }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1.2rem;
  box-shadow: var(--ombre);
}
.grille { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .grille-2 { grid-template-columns: 1fr 1fr; } }

/* --- Boutons ------------------------------------------------------------ */
.bouton, button.bouton {
  display: inline-block; padding: .45rem .9rem; border-radius: 6px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  text-decoration: none; font-size: .88rem; font-family: inherit; cursor: pointer;
}
.bouton:hover { background: var(--fond); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-principal:hover { background: #26493f; }
.bouton-danger { color: var(--rouge); border-color: #e7c8c3; }
.bouton-danger:hover { background: var(--rouge-clair); }
.bouton-petit { padding: .25rem .55rem; font-size: .78rem; }

/* --- Formulaires -------------------------------------------------------- */
.champs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ.large { grid-column: 1 / -1; }
label { font-size: .82rem; font-weight: 600; color: var(--texte-doux); }
.aide { font-size: .75rem; color: var(--texte-doux); font-weight: 400; }
input, select, textarea {
  font-family: inherit; font-size: .92rem; padding: .45rem .55rem;
  border: 1px solid var(--bord); border-radius: 6px; background: #fff; color: var(--texte);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }

/* --- Messages ----------------------------------------------------------- */
.message, .erreur {
  padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem;
}
.message { background: var(--accent-clair); border: 1px solid #cfe0d9; }
.erreur { background: var(--rouge-clair); border: 1px solid #e7c8c3; color: #7d2b22; }
.erreur ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* --- Tableau ------------------------------------------------------------ */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--bord); white-space: nowrap; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); font-weight: 650; }
th a { color: inherit; text-decoration: none; display: inline-flex; gap: .25rem; }
th a:hover { color: var(--accent); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #fafaf8; }
td.nombre, th.nombre { text-align: right; }
.vignette { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: block; }
.vignette-vide { width: 56px; height: 42px; border-radius: 4px; background: var(--fond); border: 1px dashed var(--bord); }

.positif { color: var(--rouge); }   /* prix au-dessus du marche = defavorable */
.negatif { color: var(--vert); }    /* prix en dessous du marche = favorable */

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 99px;
  font-size: .73rem; font-weight: 600; border: 1px solid var(--bord); background: var(--fond);
}
.badge-bonne { background: #e6f4ec; border-color: #bcdccb; color: var(--vert); }
.badge-moyenne { background: #fdf3e2; border-color: #ecd7ae; color: var(--orange); }
.badge-faible { background: var(--rouge-clair); border-color: #e7c8c3; color: var(--rouge); }

/* --- Fiche -------------------------------------------------------------- */
.donnees { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem 1.2rem; }
.donnee .cle { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); }
.donnee .valeur { font-size: 1rem; font-weight: 600; }
.chiffre-cle { font-size: 1.6rem; font-weight: 680; letter-spacing: -.01em; }

/* Galerie du formulaire (toutes les vignettes au meme rang). */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.galerie img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; cursor: zoom-in; }
.galerie figure { margin: 0; position: relative; }

/* Galerie de la fiche : une photo mise en avant, les autres en vignettes. */
.galerie-fiche { display: grid; gap: .6rem; }
@media (min-width: 800px) {
  .galerie-fiche { grid-template-columns: 2fr 1fr; align-items: start; }
}
.galerie-fiche figure { margin: 0; }
.photo-vedette img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 6px; display: block; cursor: zoom-in;
}
.galerie-secondaires {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.galerie-secondaires img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; display: block; cursor: zoom-in;
}
.galerie-fiche img:hover { opacity: .92; }

.liste-points { margin: 0; padding-left: 1.1rem; }
.source {
  font-size: .78rem; color: var(--texte-doux); border-top: 1px solid var(--bord);
  padding-top: .6rem; margin-top: .9rem;
}

/* --- Detail de l'offre -------------------------------------------------- */
.detail-offre td:first-child { white-space: normal; }
.detail-offre .explication { display: block; font-size: .78rem; color: var(--texte-doux); white-space: normal; }
.detail-offre tr.total td { font-weight: 700; border-top: 2px solid var(--texte); border-bottom: none; }

/* --- Visionneuse -------------------------------------------------------- */
.visionneuse {
  position: fixed; inset: 0; background: rgba(15, 18, 20, .92);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 2rem;
}
.visionneuse.ouverte { display: flex; }
.visionneuse img {
  max-width: 100%; max-height: 100%; border-radius: 6px;
  object-fit: contain; user-select: none;
}
.visionneuse button {
  position: absolute; background: rgba(255, 255, 255, .15); border: none; color: #fff;
  cursor: pointer; border-radius: 50%; line-height: 1; display: flex;
  align-items: center; justify-content: center;
}
.visionneuse button:hover { background: rgba(255, 255, 255, .28); }
.visionneuse-fermer { top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; font-size: 1.4rem; }
.visionneuse-nav {
  top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem;
  font-size: 2.2rem; padding-bottom: .2rem;
}
.visionneuse-nav.precedent { left: 1rem; }
.visionneuse-nav.suivant { right: 1rem; }
.visionneuse-compteur {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: #fff; background: rgba(0, 0, 0, .45); padding: .2rem .7rem;
  border-radius: 99px; font-size: .82rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .visionneuse { padding: 1rem; }
  .visionneuse-nav { width: 2.4rem; height: 2.4rem; font-size: 1.7rem; }
  .visionneuse-nav.precedent { left: .3rem; }
  .visionneuse-nav.suivant { right: .3rem; }
}

/* --- Connexion ---------------------------------------------------------- */
.connexion { max-width: 380px; margin: 12vh auto; }
.connexion .carte { padding: 1.6rem; }

/* --- Encart méthodologique du tableau de bord --------------------------- */
/* Les deux blocs sont empiles, chacun sur toute la largeur : cote a cote,
   le tableau de la formule d'offre s'ecrasait et devenait illisible. */
.methode { margin-top: 1.5rem; }
.methode > .carte { margin-bottom: 1.2rem; }
/* Sur un ecran large, le texte explicatif se lit mieux en deux colonnes que
   sur une seule ligne de 1 200 px. */
@media (min-width: 1000px) {
  .methode .colonnes-texte { column-count: 2; column-gap: 2.5rem; }
  .methode .colonnes-texte > * { break-inside: avoid; }
}
/* Sur un ecran tres large, on borne le tableau : sinon le montant se retrouve
   a 1 000 px de son libelle et la ligne devient penible a suivre. */
.methode .detail-offre { max-width: 860px; }
.methode .detail-offre td:first-child { width: 58%; }
.methode .detail-offre td:last-child { width: 42%; white-space: normal; }
.methode h2 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--texte); }
.methode p { margin: .6rem 0; }
.methode .aide { font-size: .85rem; }
.methode table { font-size: .84rem; }
.methode td { white-space: normal; vertical-align: top; }
.methode td:last-child { white-space: nowrap; color: var(--texte-doux); }
.methode .liste-points li { margin-bottom: .25rem; }

.etapes { margin: .8rem 0; padding-left: 1.2rem; font-size: .88rem; }
.etapes > li { margin-bottom: .6rem; }
.etapes ul { margin: .35rem 0; padding-left: 1.1rem; color: var(--texte-doux); }
.etapes ul li { margin-bottom: .2rem; }

/* --- Galerie du formulaire : reordonnable par glisser-deposer ----------- */
.galerie-edition {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.vignette-edition {
  margin: 0; position: relative; padding: .4rem;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--carte); cursor: grab;
}
.vignette-edition:active { cursor: grabbing; }
.vignette-edition img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 5px; display: block; pointer-events: none;
}
.vignette-edition .rang {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(31, 35, 40, .75); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1;
  padding: .2rem .4rem; border-radius: 4px;
}
.vignette-edition .poignee {
  position: absolute; top: .55rem; right: .75rem;
  color: #fff; opacity: .75; font-size: .95rem; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Les deux boutons ne tiennent pas cote a cote dans une colonne etroite :
   ils passent a la ligne au lieu de deborder sur la vignette voisine. */
.actions-vignette {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem;
}
.actions-vignette .bouton, .actions-vignette .badge {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
}
.vignette-edition.en-deplacement { opacity: .4; }
.vignette-edition.cible { outline: 2px dashed var(--accent); outline-offset: 2px; }