/* =========================================================
   styles.css  (J:\pwa-v2\assets\styles.css)
   Feuille de style globale : accueil + calculateur + guide
   ========================================================= */

/* ----------------- Base typographie + layout ----------------- */

/* Taille de base un peu réduite pour tout le site */
html {
  font-size: 15px;
}

/* Option : encore un peu plus petit uniquement dans l'appli installée (PWA standalone) */
@media (display-mode: standalone) {
  html {
    font-size: 14px;
  }
}

body {
  background: linear-gradient(135deg, #cce7e7, #85bcbf);
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #264d4d;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 15px 8px;
}

/* Carte blanche principale qui contient chaque page */
.container {
  background: white;
  border-radius: 15px;
  padding: 18px 20px 24px 20px;
  max-width: 950px;
  min-width: 320px;
  width: 100%;
  box-shadow: 9px 9px 20px #759292,
              -9px -9px 20px #dbffff;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  color: #1f4d4d;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.3rem;
  }
}

/* ======================================================================
   CALCULATEUR : formulaires génériques (calc + guide)
   ====================================================================== */

/* CALCULATEUR : rangées de formulaire génériques */
.form-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* CALCULATEUR : bloc label + champ générique */
.form-group {
  flex: 1;
  min-width: 160px;
  max-width: none;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
}

/* CALCULATEUR : petits blocs (pneus, etc.) */
.form-group-small {
  flex: 1;
  min-width: 150px;
  max-width: 230px;
}

/* CALCULATEUR : champs génériques input + select (appliqué à tout le site) */
input,
select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 0.9rem;
  border: 1.4px solid #b4d2d2;
  border-radius: 6px;
  transition: border-color 0.3s ease;
}

/* CALCULATEUR : règle globale sur les select (min/max largeur) */
select {
  min-width: 140px;
  max-width: 100%;
}

input:focus,
select:focus {
  border-color: #4db8b8;
  outline: none;
}

/* CALCULATEUR : boutons génériques */
button {
  width: 100%;
  padding: 10px;
  margin-top: 14px;
  background: #199a9a;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  box-shadow: 0 8px 10px -6px #159292;
  transition: background 0.3s ease;
}

button:hover {
  background: #137a7a;
}

/* CALCULATEUR : ligne d’actions générique (Calculer + autres boutons) */
.actions-ligne {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* CALCULATEUR : boutons secondaires génériques (Aide, Export, etc.) */
.btn-secondaire {
  width: auto;
  padding: 6px 10px;
  font-size: 0.9rem;
  margin-top: 0;
  box-shadow: none;
  background: #ffffff;
  color: #199a9a;
  border: 1px solid #199a9a;
}

/* ======================================================================
   CALCULATEUR : layout général (2 colonnes comme le guide)
   ====================================================================== */

/* CALCULATEUR : conteneur principal des deux colonnes (gauche = vélo/trajet, droite = chiens) */
.calc-form-2cols .calc-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* cohérent avec guide-layout */
}

/* CALCULATEUR : colonnes verticales (empilent les blocs dans chaque colonne) */
.calc-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem; /* cohérent avec guide-col */
}

/* CALCULATEUR : largeur de base des colonnes */
.calc-col-gauche {
  flex: 1 1 320px;
}

.calc-col-droite {
  flex: 1 1 360px;
}

/* CALCULATEUR : responsive, 1 seule colonne sur petits écrans */
@media (max-width: 768px) {
  .calc-form-2cols .calc-cols {
    flex-direction: column;
  }

  .calc-col-gauche,
  .calc-col-droite {
    flex: 1 1 100%;
  }
}

/* ======================================================================
   CALCULATEUR : bloc Actions / export
   ====================================================================== */

/* CALCULATEUR : ajustement bouton principal dans le bloc actions */
.bloc-actions #btn-calculer {
  width: auto;
  padding: 8px 14px;
  font-weight: 600;
}

/* CALCULATEUR : boutons secondaires dans le bloc actions */
.bloc-actions .btn-secondaire {
  width: auto;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.bloc-actions .form-row .form-group-small {
  flex: 0 1 180px;
}

/* CALCULATEUR : tous les boutons de ce fieldset ne sont plus en pleine largeur */
.bloc-actions button {
  width: auto;
  display: inline-block;
}

/* CALCULATEUR : style du bouton Calculer (visuel principal turquoise, compact) */
#btn-calculer {
  background: #199a9a;
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
}

/* CALCULATEUR : bloc Actions / export — version mobile */
@media (max-width: 600px) {
  .bloc-actions .form-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;      /* rapproche verticalement */
    column-gap: 4px;
    margin-bottom: 4px;
  }

  .bloc-actions .form-row .form-group-small {
    flex: 1 1 100%;   /* chaque bloc prend toute la largeur */
    margin-bottom: 2px;
  }

  /* On masque les labels vides " " pour éviter une ligne supplémentaire */
  .bloc-actions .form-group-small .field-label {
    display: none;
  }

  /* On resserre un peu les contrôles eux-mêmes */
  #exportFormat,
  #btn-export,
  #btn-clear-hist {
    margin-top: 2px;
  }
}

/* ======================================================================
   CALCULATEUR : bloc Vélo (ligne pneus)
   ====================================================================== */

/* CALCULATEUR : ligne "pneus" du bloc vélo (largeur mm + pouces + crampons) */
.bloc-velo .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

/* CALCULATEUR : petits blocs pneus ne doivent pas prendre toute la place */
.bloc-velo .form-group-small {
  flex: 0 1 auto;
  min-width: 140px;
  max-width: 180px; /* plus étroit pour laisser la place à la case crampons */
}

/* CALCULATEUR : rétrécir légèrement les deux menus de largeur */
#largeurPneu,
#largeurPneuPouces {
  max-width: 170px; /* au lieu des 230px possibles via form-group-small */
}

/* CALCULATEUR : ligne pour la case à cocher pneus à crampons */
.checkbox-ligne {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* CALCULATEUR : case crampons dans le bloc vélo */
.bloc-velo .checkbox-ligne {
  justify-content: flex-start;
}

/* CALCULATEUR : responsive bloc vélo, se casse proprement sur 2 lignes */
@media (max-width: 650px) {
  .bloc-velo .form-row {
    flex-direction: row;
  }
}

/* ======================================================================
   CALCULATEUR : bloc Chiens de traction (cartes, lignes internes)
   ====================================================================== */

/* CALCULATEUR : 2 cartes de chiens côte à côte sur desktop, 1 seule sur mobile */
.bloc-chiens .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* CALCULATEUR : carte visuelle pour chaque chien */
.chien-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;            /* espacement interne vertical */
  flex: 1 1 320px;         /* largeur mini, sinon partage l'espace */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  background-color: #f8f9fb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* CALCULATEUR : légère variation de couleur entre les deux chiens */
.chien-card.chien1 {
  background-color: #f5f8ff;  /* bleu très léger */
}

.chien-card.chien2 {
  background-color: #f7fff5;  /* vert très léger */
}

/* CALCULATEUR : rangées internes des profils chiens (ligne haut + ligne bas) */
.chien-profil-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: flex-end;
}

/* ======================================================================
   CALCULATEUR : ligne haut Chiens (Sexe / Lettre / Race)
   ====================================================================== */

/* CALCULATEUR : ligne haut Chiens (Sexe / Lettre / Race) */
.ligne-chiens-haut {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: flex-start;  /* Aligne tous les items sur le HAUT */
}

.ligne-chiens-haut .champ-lettre-race,
.ligne-chiens-haut .champ-race,
.ligne-chiens-haut .champ-sexe {
  align-self: flex-start;
}

/* CALCULATEUR : bloc Sexe (compact) */
.ligne-chiens-haut .champ-sexe {
  flex: 0 0 85px; 
}

/* CALCULATEUR : sexe en colonne verticale (radio M/F) */
.sexe-inline.sexe-vertical,
.champ-sexe .radio-sexe {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sexe-inline span,
.champ-sexe .field-label {
  font-size: 0.9rem;
}

.sexe-inline label,
.champ-sexe .radio-sexe label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

/* ======================================================================
   CALCULATEUR : ligne bas Chiens (Poids / Âge / Forme / Fréquence)
   ====================================================================== */

/* CALCULATEUR : conteneur de la ligne bas (Poids + âge + forme + fréquence) */
.ligne-chiens-bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

/* CALCULATEUR : bloc Poids, vertical, largeur limitée */
.poids-inline {
  display: flex;
  flex-direction: column;
}

.poids-inline input {
  max-width: 90px;
}

/* CALCULATEUR : petits blocs de la ligne bas (form-group compact) */
.ligne-chiens-bas .compact-field {
  flex: 0 1 auto;
}

/* CALCULATEUR : responsive Chiens, replis propre sur écrans étroits */
@media (max-width: 650px) {
  .chien-profil-row {
    align-items: flex-start;
  }

  .ligne-chiens-haut {
    flex-wrap: wrap;
  }

  .ligne-chiens-haut .champ-race {
    flex: 1 1 100%;  /* Race passe sur toute la largeur quand ça manque de place */
  }
}

/* ======================================================================
   CALCULATEUR : résultat et historique
   ====================================================================== */

#resultat {
  background: #dff6f6;
  padding: 6px 10px;       /* un peu moins de padding vertical */
  margin-top: 8px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.2;        /* lignes légèrement rapprochées */
  box-shadow: inset 3px 3px 7px #b5dede,
              inset -3px -3px 7px #f0ffff;
  white-space: normal;
}

#resultat p {
  margin: 2px 0;           /* moins d’espace entre les paragraphes */
}

#history {
  background: #d7eeef;
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.3em;
  max-height: 380px;   /* au lieu de 260px */
  overflow-y: auto;
  box-shadow: inset 2px 2px 5px #a8d7d7,
              inset -2px -2px 5px #efffff;
}

.verdict-safe    { color: #2e7d32; font-weight: 700; }
.verdict-warning { color: #ff9800; font-weight: 700; }
.verdict-danger  { color: #d32f2f; font-weight: 700; }

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 8px;
}

.history-header h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #226d68;
}

.history-header button {
  width: auto;
  padding: 6px 14px;
  font-size: 0.9rem;
  margin-left: 12px;
  box-shadow: none;
  border-radius: 6px;
}

.hist-item {
  padding: 4px 0;
  border-bottom: 1px dashed #aacaca;
  margin-bottom: 4px;
}

.hist-item:last-child {
  border-bottom: none;
}

.hist-item p.hist-line {
  margin: 2px 0;
}

.hist-item p.hist-section {
  margin-top: 6px;
}

.hist-item p.hist-title {
  margin-bottom: 4px;
}

/* ======================================================================
   CALCULATEUR : bloc formule
   ====================================================================== */

#formule {
  margin-top: 18px;
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 10px;
  background: #fefefe;
  border-radius: 14px;
  box-shadow: 0 2px 10px #aacaca;
  color: #236f6f;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: justify;
}

#formule h3 {
  text-align: center;
  margin-bottom: 16px;
  font-weight: 700;
  color: #1f5858;
}

#formula-mjx {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 10px;
  padding: 6px;
  color: #114477;
  background: #f2faff;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
  max-width: 95%;
}



/* =========================================================
   SECTION BLOCS COLORÉS (communs)
   ========================================================= */

.bloc {
  border-radius: 10px;
  padding: 6px 12px 8px 12px;   /* un peu moins haut et un peu moins large */
  margin-bottom: 6px;           /* au lieu de 8px */
  border: 1px solid rgba(0,0,0,0.05);
}

.bloc legend {
  font-weight: 600;
  padding: 0 6px;
}

.bloc-velo {
  background: #e3f2fd;
}

.bloc-trajet {
  background: #fff3e0;
}

.bloc-chiens {
  background: #e8f5e9;
  /* margin-top: 2px;    espace au-dessus du bloc données chiens */
}

/* Petit ? d'info */
.info {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
  border-radius: 50%;
  border: 1px solid #777;
  padding: 0 4px;
  display: inline-block;
  line-height: 1rem;
}

/* =========================================================
   SECTION EN-TÊTE / NAV COMMUNE
   ========================================================= */

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.header-top h1 {
  margin: 0;
  flex: 1 0 auto;
}

.header-actions {
  display: flex;
  gap: 6px;
}

/* Header local des vues */
/* Espace sous la nav locale avant le premier bloc du calculateur */
.calc-header-local {
  margin-bottom: 10px;
}

.calc-header-local + .bloc-trajet {
  margin-top: 6px;
}

.guide-header-local h2,
.calc-header-local h2 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}

/* Nav locale (Accueil / Calc / Guide) */
.top-nav {
  display: flex;
  justify-content: flex-end;  /* aligne les boutons à droite */
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.top-nav .nav-link {
  width: auto;
  padding: 4px 8px;
  margin-top: 0;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  background: #d7eeef;
  color: #264d4d;
}

/* Nav beta-test */
.top-nav .nav-link:hover {
  background: #bcdfe1;
}

.nav-link-dev {
  font-size: 0.8rem;
  background: #e8f5e9;          /* vert léger pour signaler "beta" */
  color: #225c3a;
}
.nav-link-dev:hover {
  background: #d2ebd7;
}


/* Coloration du titre selon la vue */
#header-main.header-route-calc h1 {
  color: #0066cc;
}

#header-main.header-route-guide h1 {
  color: #008000;
}

#header-main.header-route-home h1 {
  color: inherit;
}

/* Bouton install du pack (PWA) */
.install-btn {
  position: relative;
  width: auto;
  padding: 6px 10px;
  font-size: 0.8rem;
  margin-top: 0;
  background: #199a9a;
  border-radius: 8px;
  box-shadow: none;
}

/* Bouton pack (piloté par JS) */
#btn-install-pack {
  display: inline-flex;
}

/* Infobulle au survol du bouton d’install */
.install-tooltip {
  position: absolute;
  right: 0;
  top: 120%;
  max-width: 260px;
  background: #004d40;
  color: #fff;
  padding: 6px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.header-top:hover .install-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.install-info {
  margin-left: 4px;
  font-weight: 700;
}

/* Footer */
#site-footer {
  max-width: 90%;
  margin: 10px auto 0 auto;
  padding: 6px 8px;
  font-size: 0.75rem;
  text-align: center;
}

.help-content {
  max-height: 75vh;
  overflow-y: auto;
  font-size: 0.9rem;
}

.help-section {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: inset 1px 1px 3px #e0f0f0, inset -1px -1px 3px #ffffff;
}

.help-green  { background: #e8f5e9; }
.help-blue   { background: #e3f2fd; }
.help-yellow { background: #fff8e1; }
.help-pink   { background: #fce4ec; }

.help-section h2 {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  color: #1f4d4d;
}
.help-section h3 {
  margin: 6px 0 4px 0;
  font-size: 0.95rem;
  color: #226d68;
}
.help-section p {
  margin: 3px 0;
  line-height: 1.35;
}
.help-section ul,
.help-section ol {
  margin: 3px 0 3px 16px;
  padding: 0;
}
.help-section li {
  margin: 2px 0;
}

/* Optionnel: page-break pour impression, adapté à ton shell PWA */
.page-break {
  border-top: 1px dashed #b4d2d2;
  margin: 12px 0;
}

@media print {
  .help-content {
    max-height: none;
    overflow: visible;
  }
  .page-break {
    page-break-after: always;
    border-top: none;
    margin: 0;
  }
}

/* =========================================================
   SECTION ACCUEIL : cartes, intro, publics, infos techniques
   ========================================================= */

#intro-accueil {
  text-align: left;
  margin-bottom: 22px;
  background: #e3f2fd;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.9rem;
  line-height: 1.5;
}

#intro-accueil h2 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  color: #1f4d4d;
}

#intro-accueil p {
  margin: 4px 0;
  text-align: justify;
}

#apps-accueil {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin: 10px 0 18px 0;
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #264d4d;
  padding: 14px 14px 16px 14px;
  background: #f8ffff;
  border-radius: 14px;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.25s;
  border: 2px solid transparent;
  margin: 4px 0;
}

.app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  border-color: #199a9a;
}

.app-hero {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 8px;
}

.app-logo {
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
}

.app-card h2 {
  margin: 6px 0 4px 0;
  font-size: 1.05rem;
  color: #1f4d4d;
  text-align: center;
}

.app-card p {
  margin: 0;
  color: #456;
  font-size: 0.85rem;
  text-align: center;
}

.app-link {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #199a9a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.app-card:hover .app-link {
  background: #137a7a;
}

/* Bloc publics concernés */
#publics-accueil {
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: #e8f5e9;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

#publics-accueil h3 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: #226d68;
}

#publics-accueil ul {
  padding-left: 18px;
  margin: 0;
}

#publics-accueil li {
  margin-bottom: 3px;
}

/* Bloc infos techniques */
#infos-techniques {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f4fbff;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

#infos-techniques h3 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: #215c7a;
}

#infos-techniques ul {
  padding-left: 18px;
  margin: 0;
}

#infos-techniques li {
  margin-bottom: 4px;
}

/* Carte organigramme / encadré technique */
.org-card {
  margin-top: 8px;
  border-radius: 10px;
  padding: 8px 10px;
  background: radial-gradient(circle at top left, rgba(56,189,248,0.10), rgba(15,23,42,0.98));
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  color: #e5e7eb;
}

.org-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #38bdf8;
  margin-bottom: 4px;
}

.org-note {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* =========================================================
   SECTION ROADMAP
   ========================================================= */

/* Blocs <pre> lisibles pour arborescences / pseudo-code */
.roadmap-section pre {
  margin: 4px 0 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #020617;
  color: #e5e7eb;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-x: auto;
}

/* Roadmap – diagrammes */
.roadmap-diagram-img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid #334155;
  display: block;
  margin: 8px 0 10px 0;
  cursor: zoom-in;
}

/* Modale d’image (zoom) */
.roadmap-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.roadmap-modal-backdrop.is-visible {
  display: flex;
}

.roadmap-modal-img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 10px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.75);
  cursor: zoom-out;
}

/* Conteneur global roadmap */
.roadmap-content {
  max-width: 980px;
  margin: 0 auto 20px auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Bloc de section (carte) */
.roadmap-section {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(15,23,42,0.99));
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.9);
}

.roadmap-section h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #e5e7eb;
}

.roadmap-section h4 {
  margin: 10px 0 4px 0;
  font-size: 0.95rem;
  color: #e5e7eb;
}

/* Paragraphes standard (vert doux légèrement éclairci) */
.roadmap-section p {
  margin: 4px 0 6px 0;
  color: #d7fbe8; /* vert très clair, pas agressif */
}

/* Paragraphes d’intro PWA (couleur distincte) */
.roadmap-section .pwa-intro {
  color: #a5f3fc; /* bleu-vert clair pour bloc PWA */
}

/* Listes un chouïa plus neutres pour ne pas saturer */
.roadmap-section ul,
.roadmap-section ol {
  margin: 4px 0 6px 18px;
  padding: 0;
  color: #e0f2f1; /* vert-bleu pâle */
}

.roadmap-section ul.pwa-intro,
.roadmap-section ul.pwa-intro li {
  color: #a5f3fc; /* même teinte que p.pwa-intro */
}

.roadmap-section li {
  margin: 2px 0;
}

/* Notes un peu moins sombres, mais encore secondaires */
.roadmap-section .subtle {
  font-size: 0.82rem;
  color: #b2dfdb;
}

.diagram {
  margin-top: 6px;
  margin-bottom: 8px;
}

/* ou bien pour une ombre plus légère :
.roadmap-section {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.8);
}
*/

/* =========================================================
   SECTION RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width: 650px) {
  .form-row {
    flex-direction: column;
    gap: 4px;
  }

  .container {
    padding: 10px 3vw;
  }

  #formule {
    padding: 8px 2vw;
  }

  #resultat,
  #history {
    padding: 10px 3vw;
  }

  #graphique {
    flex-direction: column;
  }

  .graph-slot {
    border-right: none;
    border-bottom: 1px solid #d0ecef;
  }

  .graph-slot:last-child {
    border-bottom: none;
  }

  #intro-accueil,
  #publics-accueil,
  #infos-techniques {
    font-size: 0.85rem;
  }

  #intro-accueil h2 {
    font-size: 1.05rem;
  }

  #publics-accueil h3,
  #infos-techniques h3 {
    font-size: 0.95rem;
  }

  #apps-accueil {
    gap: 10px;
  }

  .app-card {
    padding: 6px 8px 8px 8px;
    max-width: 200px;
    width: 75%;
    margin: 4px auto;
  }

  .app-hero {
    width: 100%;
    max-width: 200px;
    max-height: 90px;
    height: auto;
    object-fit: contain;
    margin-bottom: 4px;
  }

  .app-logo {
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
  }

  .app-card h2 {
    font-size: 0.85rem;
    margin: 3px 0 2px 0;
  }

  .app-card p {
    font-size: 0.75rem;
  }

  .app-link {
    margin-top: 4px;
    padding: 4px 7px;
    font-size: 0.75rem;
  }
}

/* Le conteneur global de la vue (#app) sert de référence */
#app {
  position: relative; /* si ce n'est pas déjà le cas */
}

/* Style commun : forme & apparence du bouton */
/* Bouton flottant Aide (comme avant) */
.help-to-top-floating {
  position: absolute;          /* ancré à #app */
  right: -1.2rem;              /* un peu à droite du contenu */
  bottom: -1.5rem;             /* légèrement au-dessus du bas de #app */
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.8);
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 1050px) {
  .help-to-top-floating {
    right: 0.1rem;
    bottom: -0.4rem;
	transform: none;
  }
}

.help-to-top-floating:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Bouton spécifique Roadmap : aligné sur la colonne centrale en desktop */
/* Style de base des boutons flottants */
.roadmap-to-top {
  position: fixed; /* Reste fixé à l'écran */
  bottom: 2rem;
  z-index: 900;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  cursor: pointer;
  /* Centrage par rapport au contenu de 950px */
  left: 50%;
  transform: translateX(475px); 
}

/* On cache le bouton "fantôme" s'il n'est pas dans le bon contexte (optionnel selon votre JS) */
body > .roadmap-to-top {
  display: flex;
}

/* Bouton 1 : Remonter (en bas) */
.roadmap-to-top {
  bottom: 2rem;
}

/* Bouton 2 : Aide (plus haut pour ne pas chevaucher) */
.help-to-top-floating {
  bottom: 5.5rem;
}

/* Ajustement pour les écrans plus petits que le container (950px) */
@media (max-width: 1050px) {
  .roadmap-to-top, 
    left: auto;
    right: 1rem;
    transform: none;
  }
}

/* =========================================================
   SECTION COMMUNE : graphismes / sponsors
   ========================================================= */

#graphique-accueil,
#graphique-calculateur,
#graphique-guide {
  margin: 10px 0 0 0;
  min-height: 70px;
  width: 100%;
  background: #edf9fa;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  color: #226d68;
  font-size: 0.85em;
  box-shadow: 0 1px 6px #bde6e6;
  overflow: hidden;
}

.graph-slot {
  flex: 1;
  padding: 6px 8px;
  box-sizing: border-box;
  text-align: center;
  border-right: 1px solid #d0ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.graph-slot:last-child {
  border-right: none;
}

.graph-slot strong {
  display: block;
  margin-bottom: 2px;
}

.graph-slot span {
  font-size: 0.8em;
}

/* Logos des partenaires / clubs / fabricants */
.logo-sponsor {
  max-width: 100%;
  max-height: 120px;
  height: auto;
  display: block;
  cursor: pointer;
}

/* Modal logos */
.logo-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}

.logo-modal.open {
  display: flex;
}

.logo-modal img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 15px #000;
  border-radius: 8px;
  background: #fff;
}

/* Bouton Fermer de la modale LOGO */
.logo-modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1010;
  line-height: 1;
  transition: transform 0.2s;
}

.logo-modal-close:hover {
  color: #ff4d4d;
  transform: scale(1.2);
}

/* Conteneur de la modale logo */
.logo-modal {
  display: none;
  position: fixed;
  z-index: 1000; /* Supérieur aux boutons flottants (900) */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

/* =========================================================
   SECTION IMPRESSION (calc + guide)
   ========================================================= */

@media print {
  body {
    background: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
  }

  body > *:not(.container) {
    display: none !important;
  }

  .container > *:not(#fiche-resultats):not(#footer-container) {
    display: none !important;
  }

  .hist-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  #fiche-resultats,
  #fiche-resultats * {
    display: block !important;
  }

  #fiche-resultats {
    box-shadow: none !important;
    border-radius: 0;
    width: 100%;
    max-width: 18cm;
    margin: 0 auto;
    font-size: 0.9rem;
  }

  #resultat,
  #history {
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff;
  }

  body.export-fiche {
    background: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
  }

  body.export-fiche .container {
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    max-width: 18cm;
    margin: 0 auto;
  }

  body.export-fiche #fiche-resultats {
    font-size: 0.9rem;
  }

  body.export-fiche .hist-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  body.export-fiche #history {
    max-height: none;
    overflow: visible;
  }

  @page {
    size: A4;
    margin: 1cm;
  }
}

/* =========================================================
   SECTION GUIDE HARNAIS (unique)
   ========================================================= */

/* ----- Layout général du guide ----- */

/* 2 colonnes sur desktop, 1 sur mobile */
.guide-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* au lieu de 1rem */
}

.guide-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem; /* au lieu de 1rem */
}

.guide-col-gauche {
  flex: 1 1 320px;
}

.guide-col-droite {
  flex: 1 1 360px;
}

/* Responsive : 1 colonne sur petits écrans (guide) */
@media (max-width: 768px) {
  .guide-layout {
    flex-direction: column;
  }

  .guide-col-gauche,
  .guide-col-droite {
    flex: 1 1 100%;
  }
}

/* ----- Conteneurs de champs du guide ----- */

/* Ligne flex générique dans le guide */
.guide-container .form-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;        /* au lieu de 0.5rem */
}

/* Bloc label + input/select */
.guide-container .compact-field {
  display: flex;
  flex-direction: column;
  min-width: 90px;
  max-width: 180px;
}

.guide-container .xsmall-field { flex: 0 0 90px; }
.guide-container .small-field  { flex: 0 0 120px; }
.guide-container .medium-field { flex: 1 1 160px; }

/* Champs du guide : hauteur homogène et compacte */
.guide-container input,
.guide-container select {
  height: 26px;
  padding: 2px 6px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

/* Limiter la largeur des selects et inputs dans le guide harnais */
.guide-container select {
  width: auto;
  max-width: 220px;
}

.guide-container .bloc-chiens input[type="number"],
.guide-container .bloc-chiens input[type="text"] {
  width: auto;
}

/* ----- Bloc chien (3 lignes) ----- */

/* Champs numériques du chien plus étroits */
.guide-container .bloc-chiens input[type="number"] {
  max-width: 90px;
}

/* Poids encore plus compact (2 chiffres) */
#poidsChien {
  max-width: 70px;
}

/* Mesures spécifiques */
#tourEncolure,
#demiEncolure,
#tourPoitrail,
#longDos {
  max-width: 80px;
}

/* Ligne 1 : Sexe + Lettre + Race sur une ligne compacte */
.ligne-chiens-haut {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Sexe : bloc étroit */
.champ-sexe {
  flex: 0 0 80px;
}

.champ-sexe .field-label {
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.radio-sexe {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
}

.radio-sexe input {
  margin: 0;
}

.radio-sexe label {
  padding: 2px 4px;
  font-size: 0.8rem;
}

/* Lettre : bloc étroit */
.champ-lettre-race {
  flex: 0 0 auto;
}

/* Race : prend tout le reste de la ligne */
.champ-race {
  flex: 1 1 auto;
  max-width: 260px;
}

.champ-race select {
  width: 100%;
  max-width: 260px;
}

/* Ligne 2 : 4 mesures */
.ligne-chiens-mesures .compact-field {
  flex: 1 1 110px;
  max-width: 150px;
}

/* Ligne 3 : Poids + Morphologie + Remarque */
.ligne-chiens-bas .compact-field {
  flex: 1 1 140px;
  max-width: 220px;
}

/* Sur écrans plus petits, on laisse les lignes se découper proprement */
@media (max-width: 900px) {
  .guide-col-gauche .ligne-chiens,
  .guide-col-gauche .ligne-chiens-mesures,
  .guide-col-gauche .ligne-chiens-bas {
    flex-wrap: wrap;
  }

  .guide-container .compact-field {
    max-width: 100%;
  }
}

/* ----- Bloc harnais (marque / usage / modèle / boutons) ----- */

.bloc-harnais {
  background: #f3e8ff;
  margin-top: 6px;   /* espace au-dessus du bloc données harnais */
}

.ligne-harnais-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

/* Colonnes marque / usage / modèle */
.champ-marque {
  flex: 1 1 150px;
  max-width: 220px;
}

.champ-usage {
  flex: 1 1 160px;
  max-width: 230px;
}

.champ-modele {
  flex: 1 1 180px;
  max-width: 260px;
}

/* ----- Bloc calcul ----- */

/* Dans le bloc Calcul du guide : réduire l'espace au-dessus de la ligne de boutons */
.bloc-calcul-actions .actions-ligne {
  margin-top: 2px;   /* au lieu de 12px */
}

/* Fieldset Calcul : position + espace interne */
.bloc-calcul-actions {
  margin-top: -2px;   /* très léger remontage du bloc */
  padding-top: 2px;   /* moins d'air entre bordure et titre */
}

/* Titre "Calcul" : coller un peu plus au contenu */
.bloc-calcul-actions legend {
  margin-bottom: 0;
}

/* Boutons Calculer / Réinitialiser : pas de marge inutile au-dessus */
.bloc-calcul-actions .actions-ligne button {
  margin-top: 0;
}

/* Bouton Calculer du guide : compact */
.guide-container #btn-calculer {
  flex: 0 0 auto;
  width: auto;
  font-size: 0.85rem;
  line-height: 1.1;
  padding: 4px 10px;
  margin-top: 0;
}

/* Spécifique à la ligne Export / impression du guide */
.ligne2-harnais .small-field {
  flex: 0 0 auto;
  min-width: 150px;   /* augmente un peu si besoin */
  max-width: 220px;
}

/* Bouton Imprimer / Exporter : même format */
#btn-export {
  flex: 0 0 auto;
  width: auto;
  font-size: 0.85rem;
  line-height: 1.1;
  padding: 4px 10px;

  /* Remonter légèrement le bloc (et donc le bouton) */
  /* .bloc tablemargin-top: -4px;       /* ajuste -2, -3, -4 selon le rendu souhaité */

  /* Empêcher le texte de passer sur 2 lignes */
  white-space: nowrap;
}

/* Bouton Réinitialiser du guide (si utilisé dans le bloc harnais) */
.zone-boutons-harnais {
  flex: 0 0 auto;
}

.zone-boutons-harnais .btn-secondaire {
  font-size: 0.8rem;
  line-height: 1.1;
  padding: 3px 8px;
  margin-top: 0;
}

/* ----- Bloc Historique : filtres ----- */

/* Bloc tableaux du guide harnais (tableau de tailles) */
.bloc-tableaux {
  background: #eaf3ff;              /* bleu très clair */
}

/* Bloc historique du guide harnais */
.bloc-historique {
  background: #f4f9f4;              /* vert très clair, différent du bloc-chiens */
}

.bloc-historique #historique-filtres {
  display: flex;
  flex-wrap: wrap;        /* permet le retour à la ligne propre */
  gap: 0.5rem;            /* espace horizontal/vertical entre filtres */
}

/* Race / Marque / Modèle : colonnes flex identiques */
.bloc-historique .filtre-race-field,
.bloc-historique .filtre-marque-field,
.bloc-historique .filtre-modele-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;        /* base 180px, peut grandir/rétrécir */
  min-width: 160px;       /* évite de trop se tasser */
  max-width: 260px;
}

/* Bouton Effacer l'historique : même format que Calculer du guide */
#btn-clear-hist {
  flex: 0 0 auto;
  width: auto;
  font-size: 0.85rem;
  line-height: 1.1;
  padding: 4px 10px;
  margin-top: 0;
  
  /* Espacement horizontal supplémentaire */
  margin-left: 1rem;   /* ou margin-right: 0.5rem; selon le sens souhaité */
}


/* Labels des filtres d'historique */
.bloc-historique .filtre-race-field label,
.bloc-historique .filtre-marque-field label,
.bloc-historique .filtre-modele-field label {
  font-size: 0.8rem;
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Selects des filtres : prennent toute la largeur de leur bloc */
.bloc-historique .filtre-race-field select,
.bloc-historique .filtre-marque-field select,
.bloc-historique .filtre-modele-field select {
  width: 100%;
  max-width: 100%;
}

/* Bloc "Réinitialiser" des filtres */
.bloc-historique .filtre-reset-field {
  display: flex;
  flex-direction: column;
  flex: 0 0 130px;        /* bloc étroit mais stable */
  
  /* Remonter légèrement le bloc (et donc le bouton) */
  margin-top: -4px;       /* ajuste -2, -3, -4 selon le rendu souhaité */
}

.bloc-historique .filtre-reset-field .btn-secondaire {
  width: 100%;
  margin-top: 0;
}

/* Sur écrans plus étroits, on empile proprement les 4 blocs */
@media (max-width: 700px) {
  .bloc-historique #historique-filtres {
    flex-direction: column;
  }

  .bloc-historique .filtre-race-field,
  .bloc-historique .filtre-marque-field,
  .bloc-historique .filtre-modele-field,
  .bloc-historique .filtre-reset-field {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

/* Alignement lien fabricant + vignette dans le guide harnais */
.fabricant-vignette-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Conteneur de vignette : petite boîte fixe */
.visuel-container {
  flex: 0 0 auto;
  width: 140px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Image de vignette : toujours contenue dans la boîte */
.visuel-container img,
#vignette {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Sur écrans étroits, repasser en 1 colonne empilée */
@media (max-width: 700px) {
  .fabricant-vignette-ligne {
    flex-direction: column;
    align-items: flex-start;
  }

  .visuel-container {
    width: 160px;
    height: 100px;
  }
}

/* ----- Mini-menu lettre : spécifique ----- */

/* Mini-menu lettre : compact mais avec flèche native */
#filtre-lettre-race {
  width: 50px;              /* un peu plus large */
  min-width: 50px;
  max-width: 50px;
  box-sizing: border-box;

  padding: 0 4px;
  font-size: 0.8rem;
  height: 24px;

  /* On laisse l’apparence native pour garder la flèche */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;

  text-align: center;       /* centre la lettre */
}

/* Bloc 0 : intro / avertissement du guide dans la colonne gauche */
.bloc-avis-guide {
  background: #fffdf3;
  border: 1px solid rgba(0,0,0,0.05);
  font-size: 0.82rem;
  line-height: 1.4;

  padding: 4px 10px 4px 10px;  /* peu de padding vertical */
  margin-bottom: 4px;          /* très peu d’espace sous le bloc */
}

/* Réduire la marge du paragraphe interne */
.bloc-avis-guide p {
  margin: 2px 0 0 0;
}

/* Bloc Résultat (guide) : descendre très légèrement sous Calcul */
.guide-container .bloc-resultats {
  margin-top: 2px;
}

/* =========================================================
   SECTION GUIDE HARNAIS TABLEAUX
   ========================================================= */

.tableau-tailles-modele {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.tableau-tailles-modele th,
.tableau-tailles-modele td {
  border: 1px solid #ccc;
  padding: 4px 6px;
  text-align: center;
  font-size: 0.85rem;
}

.tableau-tailles-modele th {
  background-color: #f3f3f3;
}

.tableau-note {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  font-style: italic;
}

/* =========================================================
   SECTION DISCLAIMER
   ========================================================= */

.harnais-disclaimer-callout {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.4;
  border-radius: 8px;
  background: #0b1020;
  border: 1px solid #1f2937;
  color: #e5e7eb;
}

.harnais-disclaimer-callout a {
  font-weight: 600;
  color: #fbbf24;
  text-decoration: none;
}

.harnais-disclaimer-callout a:hover {
  text-decoration: underline;
}

/* =========================================================
   SECTION RESULTATS V2.2 (CARTES & SCORES 3D)
   ========================================================= */

/* Conteneur principal des résultats */
.bloc-resultats-container {
  min-height: 50px;
}

.placeholder-resultat {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
}

.resultats-header h3 {
  margin: 10px 0 5px 0;
  font-size: 1.1rem;
  color: #199a9a;
}

.resultats-header p {
  margin: 0 0 15px 0;
  font-size: 0.85rem;
  color: #555;
}

/* --- CARTE HARNAIS --- */
.harnais-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.harnais-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Style spécifique pour le meilleur résultat */
.harnais-card.top-match {
  border: 2px solid #199a9a;
  background: #f4fcfc;
  position: relative;
}

/* Layout Carte : Image + Contenu */
.card-top {
  display: flex;
  gap: 15px;
}

.card-img-wrapper {
  flex: 0 0 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  padding: 5px;
}

.card-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* En-tête de carte */
.card-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.card-header h4 {
  margin: 4px 0 0 0;
  font-size: 1rem;
  color: #264d4d;
}

.sub-header {
  font-size: 0.75rem;
  color: #777;
  text-transform: uppercase;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  width: fit-content;
}

.badge-success {
  background: #e0f2f1;
  color: #00695c;
  border: 1px solid #b2dfdb;
}

.badge-secondary {
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #e0e0e0;
}

.badge-warning {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}

/* Résultats chiffrés (Taille + Score) */
.card-result {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.main-size {
  display: flex;
  flex-direction: column;
  background: #264d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: center;
  min-width: 50px;
}

.main-size .label { font-size: 0.6rem; text-transform: uppercase; opacity: 0.8; }
.main-size .value { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }

/* Barre de progression Score */
.match-score {
  flex: 1;
  min-width: 120px;
}

.progress-bar-bg {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 3px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #199a9a, #4db8b8);
  border-radius: 4px;
  transition: width 0.6s ease-out;
}

.score-txt {
  font-size: 0.75rem;
  color: #555;
  font-weight: 600;
}

/* Analyse textuelle (warning list) */
.card-analysis {
  font-size: 0.8rem;
  line-height: 1.3;
}

.warning-list {
  padding-left: 18px;
  margin: 4px 0 0 0;
  color: #d32f2f;
}

.text-success { color: #2e7d32; font-weight: 600; }
.text-warn { color: #ef6c00; font-weight: 700; }

/* Pied de carte (Détails + Actions) */
.card-footer-details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.btn-fabricant {
  display: inline-block;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #199a9a;
  color: #199a9a;
  text-decoration: none;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-fabricant:hover {
  background: #199a9a;
  color: #fff;
}

/* --- ANALYSE DES TAILLES (Chips) --- */
.tailles-analysis {
  margin-bottom: 8px;
}

.analysis-title {
  display: block;
  font-size: 0.7rem;
  color: #888;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 700;
}

.analysis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-list li {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  border: 1px solid transparent;
}

.analysis-list li.taille-selected {
  background: #e0f2f1;
  color: #00695c;
  border-color: #b2dfdb;
}

.analysis-list li.taille-rejet {
  background: #ffebee;
  color: #c62828;
  text-decoration: line-through;
  opacity: 0.8;
}

.analysis-list li.taille-limite {
  background: #fff8e1;
  color: #f57f17;
}

.t-name { font-weight: 700; margin-right: 3px; }
.t-reason { font-size: 0.7rem; font-style: italic; }

/* --- DÉTAILS CALCUL 3D (Accordéon) --- */
.details-formule-3d {
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #eee;
  padding: 4px 8px;
}

.details-formule-3d summary {
  font-size: 0.75rem;
  color: #199a9a;
  cursor: pointer;
  font-weight: 600;
  outline: none;
}

.content-3d {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #eee;
}

.grid-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 5px 0;
}

.grid-scores div {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  padding: 4px;
  border-radius: 4px;
}

.grid-scores .lbl { display: block; font-size: 0.65rem; color: #888; }
.grid-scores .val { display: block; font-size: 0.85rem; font-weight: 700; color: #333; }

.formula-explication {
  font-size: 0.7rem;
  color: #666;
  margin: 5px 0 0 0;
  font-style: italic;
}

/* --- ACTIONS CONTAINER --- */
.actions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.actions-secondaires {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-text {
    background: none;
    border: none;
    color: #666;
    text-decoration: underline;
    font-size: 0.8rem;
    padding: 5px;
    width: auto;
    box-shadow: none;
}

/* --- ANIMATION BOUTON PRINCIPAL --- */
.pulse-effect {
    animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% { box-shadow: 0 0 0 0 rgba(25, 154, 154, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(25, 154, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 154, 154, 0); }
}

/* --- LOADER --- */
.loading-spinner {
    padding: 20px;
    text-align: center;
    color: #199a9a;
    font-weight: 600;
    font-style: italic;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* --- RESPONSIVE MOBILE POUR CARTES --- */
@media (max-width: 480px) {
  .card-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .card-img-wrapper {
    width: 120px;
    height: 120px;
    margin-bottom: 5px;
  }

  .card-header, .card-result {
    justify-content: center;
  }
  
  .card-actions {
    justify-content: center;
  }
  
  .grid-scores {
      grid-template-columns: 1fr 1fr; /* 2x2 sur mobile */
  }
}

/* Labels avec icône info alignée sur la même ligne */
label .info {
  display: inline-block;
}

   /*=========================================================
				Bloc Mode d'emploi (calculateur)
   ========================================================= */
label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.bloc-transparent {
  background-color: transparent;
  border: none;
}

.bloc-aide {
  background: #f5fbfb;
  border-radius: 8px;
  border: 1px solid #c8e4e4;
  font-size: 0.85rem;
}

.bloc-aide .aide-liste {
  margin: 4px 0 0;
  padding-left: 1.1rem;
}

.bloc-aide .aide-liste li {
  margin: 2px 0;
}

/* --- STRUCTURE DE LA MODALE --- */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Doit être au-dessus de TOUT (y compris l'ascenseur) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* État ouvert (déclenché par votre JS) */
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative; /* Indispensable pour que la croix soit ancrée à ce bloc et non à l'écran */
  background: white;
  padding: 10px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
}

.modal-body img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 4px;
}

/* --- BOUTON FERMER MODALE --- */
button.modal-close {
  position: absolute !important;
  top: -15px !important;    /* Sort légèrement en haut du cadre blanc */
  right: -15px !important;  /* Sort légèrement à droite du cadre blanc */
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f44336 !important; /* Rouge pour être bien visible */
  color: white !important;
  border: 2px solid white !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  z-index: 2100 !important;
  padding: 0 !important;
}

button.modal-close:hover {
  background: #d32f2f !important;
  transform: scale(1.1);
}

/* CALCULATEUR : normalisation police du bloc Sexe (même taille que les autres champs) à garder à la fin */
.ligne-chiens-haut .champ-sexe,
.ligne-chiens-haut .champ-sexe .field-label,
.ligne-chiens-haut .champ-sexe .radio-sexe,
.ligne-chiens-haut .champ-sexe .radio-sexe label,
.ligne-chiens-haut .champ-sexe .radio-sexe input {
  font-size: 1rem !important;
}

/* CALCULATEUR : aligner le style du bloc résultat sur l'historique */
#resultat {
  padding: 6px 10px;
  margin-top: 8px;
}

/* Même compactage que l'historique pour les lignes du résultat */
#resultat .hist-line {
  margin: 2px 0;
  line-height: 1.3em;
}

/* Neutraliser toute ancienne règle #resultat p trop généreuse */
#resultat p {
  margin: 2px 0 !important;
}

/* Assurez-vous que le conteneur de la modale est en position relative */
.help-content, .modal-container {
  position: relative;
}

/* Bouton Ascenseur (Remonter) */
button.help-to-top {
  position: fixed !important; /* Toujours fixed pour ne pas impacter le layout */
  bottom: 20px;
  right: 20px;
  z-index: 90; /* Doit être inférieur à la modale (2000) */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* Assurez-vous qu'il n'a pas de width: 100% hérité */
}

/* ================================================
   RÉSULTATS CALCULATEUR (moduleA)
   Corrections mobile — reprenant l'approche du Guide Harnais (moduleB)
   Ajout SANS SUPPRESSION — compatible PC
   ================================================ */

/* NOUVEAU : Assurant box-sizing sur tous les conteneurs de résultat */
#resultat {
  box-sizing: border-box;
  width: 100%;
}

#history {
  box-sizing: border-box;
  width: 100%;
}

#formule {
  box-sizing: border-box;
  width: 100%;
}

/* Media 768px et moins : approche guide harnais */
@media (max-width: 768px) {
  #resultat,
  #history,
  #formule {
    width: 100%;
    box-sizing: border-box;
  }
}

/* CRITIQUE : Media 650px — Pattern du guide harnais appliqué au calculateur */
/* (DÉJÀ EXISTANT mais à vérifier que ces règles s'appliquent correctement) */
@media (max-width: 650px) {
  /* Le container utilise déjà : padding: 10px 3vw; */
  /* Le #resultat et #history doivent aussi utiliser 3vw */
  #resultat,
  #history {
    padding: 10px 3vw;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  /* Formule suit le pattern */
  #formule {
    padding: 8px 2vw;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  /* Les blocs aussi */
  .bloc {
    box-sizing: border-box;
    width: 100%;
  }

  /* Historique : texte compact comme guide */
  .hist-item {
    padding: 4px 0;
    margin-bottom: 4px;
  }

  .hist-item p {
    margin: 2px 0;
  }
}

/* TRÈS PETIT ÉCRAN : Sécurité supplémentaire */
@media (max-width: 480px) {
  /* Padding ultra-serré comme guide harnais */
  #resultat,
  #history,
  #formule {
    padding: 8px 2vw;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  .container {
    width: 100%;
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
  }
}