/* =========================================================
   FEUILLE DE STYLE DU SITE "TROUVER LA BONNE PAIRE DE CHAUSSURES"
   ========================================================= */

/* ---------- 1. Les variables ----------
   :root désigne toute la page. On y range nos couleurs dans des "variables"
   (elles commencent par --). Pour changer une couleur partout sur le site,
   il suffit de la modifier ICI. Le mode sombre (section 2) les remplace. */
:root {
  --couleur-principale: #a8823f;   /* or : boutons, réponses choisies, filets */
  --couleur-secondaire: #c9a35b;   /* or clair : fin des barres dorées */
  --degrade: linear-gradient(135deg, #a8823f, #c9a35b);   /* le dégradé doré des boutons */
  --couleur-fond: #f7f3ea;         /* ivoire : fond de la page */
  --fond-page: #f7f3ea;            /* le fond complet de la page (un dégradé en mode sombre) */
  --couleur-carte: #fffdf8;        /* blanc cassé : fond des blocs de questions */
  --couleur-pale: #f1e7d2;         /* or très pâle : réponse choisie */
  --couleur-texte: #1a1814;        /* presque noir : texte principal */
  --couleur-texte-doux: #756e60;   /* gris chaud : textes d'aide */
  --couleur-bordure: #e2d8c4;      /* beige : contours */
  --bordure-pastille: #d8ccb4;     /* beige un peu plus foncé : contour des pastilles */
  --couleur-case-vide: #e9e1cf;    /* beige : cases vides des jauges */
  --fond-bandeau: #1a1814;         /* noir : bandeaux de l'accueil et des résultats */
  --bordure-bandeau: transparent;  /* contour des bandeaux (visible en mode sombre) */
  --or-sur-bandeau: #c9a35b;       /* or : petits textes posés sur les bandeaux noirs */
  --texte-sur-or: #1a1814;         /* texte des boutons dorés */
  --ombre: 0 12px 40px rgba(60, 45, 20, 0.08);            /* ombre douce : les cartes "flottent" */
  --ombre-premiere: 0 20px 50px rgba(60, 45, 20, 0.12);   /* ombre plus marquée de la carte n°1 */
  --reflet-or: rgba(201, 163, 91, 0.28);                  /* reflet qui traverse la carte n°1 */
  --arrondi: 4px;                  /* coins à peine arrondis : plus élégant */
  --police-titres: "Playfair Display", Georgia, serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Le mode sombre : noir et or ----------
   Cette "media query" s'applique seulement si le téléphone ou l'ordinateur
   est réglé en mode sombre. On change juste les variables : tout le site suit. */
@media (prefers-color-scheme: dark) {
  :root {
    --couleur-principale: #c9a35b;
    --couleur-secondaire: #e6c88a;
    --degrade: linear-gradient(135deg, #c9a35b, #e6c88a);
    --couleur-fond: #0d0d0f;
    /* radial-gradient : une lueur dorée très légère en haut de la page */
    --fond-page: radial-gradient(1200px 600px at 50% -10%, #1d1a14, #0d0d0f 60%);
    --couleur-carte: #16161a;
    --couleur-pale: #2a2418;
    --couleur-texte: #f3efe6;
    --couleur-texte-doux: #a39e93;
    --couleur-bordure: #2c2b30;
    --bordure-pastille: #3a3830;
    --couleur-case-vide: #2c2b30;
    --fond-bandeau: transparent;
    --bordure-bandeau: #2c2b30;
    --or-sur-bandeau: #e6c88a;
    --texte-sur-or: #0d0d0f;
    --ombre: 0 20px 50px rgba(0, 0, 0, 0.5);
    --ombre-premiere: 0 0 0 1px rgba(201, 163, 91, 0.25), 0 30px 60px rgba(0, 0, 0, 0.6);
    --reflet-or: rgba(232, 200, 130, 0.18);
  }
}

/* ---------- 3. Réglage de base ----------
   box-sizing: border-box fait que la largeur d'un élément INCLUT ses marges intérieures.
   Sans ça, les calculs de taille deviennent vite casse-tête. Le * veut dire "tous les éléments". */
* {
  box-sizing: border-box;
}

/* Quand on clique sur "Commencer", la page glisse doucement jusqu'aux questions. */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;                                  /* supprime la marge blanche par défaut du navigateur */
  font-family: var(--police-texte);           /* "Inter" : sobre et très lisible */
  font-size: 17px;
  line-height: 1.5;                           /* espace entre les lignes : plus confortable à lire */
  color: var(--couleur-texte);                /* var(...) utilise une variable définie plus haut */
  background: var(--fond-page);
  background-attachment: fixed;               /* le fond ne défile pas avec la page */
}

/* Les titres utilisent la police élégante "Playfair Display". */
h1,
h2,
h3,
legend {
  font-family: var(--police-titres);
}

/* ---------- 4. La largeur du contenu ----------
   On limite la largeur pour que les lignes ne soient pas trop longues sur grand écran,
   et margin: 0 auto centre le bloc horizontalement. padding = marge intérieure. */
header,
main,
footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- 5. Les animations ----------
   @keyframes décrit une animation : ici, l'élément apparaît en glissant un peu vers le haut. */
@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Les éléments qui apparaissent en douceur. */
.accueil,
#suite-questions fieldset,
.bandeau-resultats {
  animation: apparition 0.5s ease-out both;
}

/* Si la personne a demandé moins d'animations dans les réglages de son appareil,
   on les coupe toutes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- 6. L'accueil ----------
   Le grand bandeau noir en haut de la page du questionnaire, avec un fin cadre doré. */
header {
  padding-top: 20px;
}

.accueil {
  position: relative;           /* pour placer le cadre et la petite ligne du haut (voir plus bas) */
  padding: 60px 22px 44px;
  border: 1px solid var(--bordure-bandeau);
  border-radius: var(--arrondi);
  color: #f3efe6;
  text-align: center;
  background: var(--fond-bandeau);
}

/* L'illustration du coureur, centrée au-dessus du titre.
   Elle arrive en glissant un peu depuis la gauche, comme s'il entrait en courant. */
.illustration-coureur {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;                   /* garde les proportions du dessin */
  margin: 0 auto 8px;
  animation: entree-coureur 1s ease-out both;
}

@keyframes entree-coureur {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ::before ajoute un fin cadre doré, 10px à l'intérieur du bandeau.
   pointer-events: none : le cadre ne gêne pas les clics sur le bouton. */
.accueil::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 163, 91, 0.35);
  pointer-events: none;
}

/* ::after écrit une petite ligne en majuscules espacées en haut du bandeau. */
.accueil::after {
  content: "Conseil running · Édition 2026";
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--or-sur-bandeau);
}

h1 {
  font-size: 2rem;              /* rem = multiple de la taille de texte de base */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: #f3efe6;
}

.accueil-texte {
  margin: 0 auto;
  max-width: 34em;
  color: #a39e93;
}

/* Les 3 étapes, côte à côte. display: flex aligne les éléments sur une ligne. */
.etapes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;              /* passent à la ligne si l'écran est trop étroit */
  gap: 10px 18px;
  list-style: none;             /* enlève les numéros automatiques de la liste */
  padding: 0;
  margin: 22px 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;       /* lettres espacées */
  text-transform: uppercase;    /* en majuscules */
  color: var(--or-sur-bandeau);
}

.etapes li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Le numéro de l'étape dans un rond au contour doré. */
.etape-numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--or-sur-bandeau);
  font-family: var(--police-titres);
}

/* Le bouton "Commencer" : doré, en majuscules espacées. */
.bouton-commencer {
  display: inline-block;
  padding: 16px 40px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-sur-or);
  background: var(--degrade);
  border-radius: 2px;
  text-decoration: none;
  transition: transform 0.15s;
}

.bouton-commencer:hover {
  transform: scale(1.04);
}

h2 {
  font-size: 1.45rem;
  font-weight: 600;
  margin: 32px 0 16px;
}

/* ---------- 7. La barre de progression ----------
   position: sticky la garde collée en haut de l'écran quand on descend. */
.progression {
  position: sticky;
  top: 0;
  z-index: 10;                  /* passe au-dessus des questions */
  padding: 10px 0 12px;
  margin-bottom: 8px;
  background-color: var(--couleur-fond);
}

.progression p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--couleur-texte-doux);
}

.progression-fond {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--couleur-case-vide);
}

/* La partie dorée : sa largeur est changée par app.js.
   transition anime le remplissage. */
.progression-barre {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--couleur-principale), var(--couleur-secondaire));
  transition: width 0.4s ease;
}

/* ---------- 8. Les blocs de questions ----------
   Chaque <fieldset> devient une "carte" sobre, sans ombre. */
fieldset {
  background-color: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--arrondi);
  padding: 18px 18px 14px;
  margin: 0 0 16px;
  min-width: 0;                 /* sans ça, un fieldset peut déborder de l'écran sur téléphone */
}

/* La question. float: left la place DANS la carte au lieu de sur son contour. */
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Ce qui suit la question repart bien en dessous d'elle. */
legend + * {
  clear: both;
}

small {
  color: var(--couleur-texte-doux);
}

fieldset p {
  margin: 0 0 12px;
}

/* ---------- 9. Les réponses en grandes cases cliquables ----------
   Chaque réponse est un <div class="choix"> qui contient le bouton rond (input)
   et son texte (label). Le label devient une grande case ; le bouton rond est
   posé à l'intérieur, à gauche (position: absolute). */
.choix {
  position: relative;
  margin-bottom: 10px;
}

.choix label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px 12px 50px;   /* la place à gauche est pour le bouton rond */
  border: 1px solid var(--couleur-bordure);
  border-radius: 2px;
  cursor: pointer;                /* le curseur devient une petite main au survol */
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}

.choix label:hover {
  border-color: var(--couleur-principale);
}

.choix label:active {
  transform: scale(0.98);         /* la case "s'enfonce" un peu quand on appuie */
}

/* Le bouton rond ou la case à cocher, centré verticalement à gauche de la case.
   accent-color le colore avec notre or. */
.choix input {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--couleur-principale);
  cursor: pointer;
}

/* Le pictogramme doré de la réponse (dessin en trait fin, voir le haut d'index.html). */
.icone {
  display: inline-flex;
  flex-shrink: 0;                 /* le dessin garde sa taille même si le texte est long */
  color: var(--couleur-principale);
}

.icone svg {
  width: 26px;
  height: 26px;
}

/* La réponse choisie : contour doré et fond or pâle.
   Le + veut dire "le <label> placé juste après la case cochée". */
.choix input:checked + label {
  border-color: var(--couleur-principale);
  background-color: var(--couleur-pale);
  font-weight: 600;
}

/* Au clavier (touche Tab), la case qui a le focus reçoit un contour bien visible. */
.choix input:focus-visible + label {
  outline: 3px solid var(--couleur-texte);
  outline-offset: 2px;
}

/* La question 1 : "Homme" et "Femme" côte à côte, en grandes cases.
   display: grid les range en deux colonnes égales. */
.choix-deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* minmax(0, …) : ne déborde jamais de l'écran */
  gap: 12px;
  margin-bottom: 4px;
}

.choix-deux .choix {
  margin: 0;
}

.choix-deux label {
  min-height: 72px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Dans ces deux cases, l'icône est au-dessus du mot, pour tenir sur un téléphone. */
.choix-deux label {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px 14px 42px;
}

.choix-deux .icone svg {
  width: 34px;
  height: 34px;
}

/* Le schéma de la foulée (question 7) : centré, jamais plus large que le bloc. */
.schema-foulee {
  margin: 0 0 16px;
  text-align: center;
}

.schema-foulee img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;                   /* garde les proportions du dessin */
  margin: 0 auto;
}

.schema-foulee figcaption {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--couleur-texte-doux);
}

/* Le texte au-dessus des listes déroulantes. */
fieldset > label {
  display: block;
  font-size: 0.9rem;
  color: var(--couleur-texte-doux);
}

/* Les listes déroulantes prennent toute la largeur du bloc. */
select {
  display: block;
  width: 100%;
  margin: 6px 0 4px;
  padding: 14px 12px;
  font-size: 1rem;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure);
  border-radius: 2px;
  background-color: var(--couleur-carte);
  cursor: pointer;
}

select:hover {
  border-color: var(--couleur-principale);
}

/* ---------- 10. Le bouton ----------
   Doré, en majuscules espacées, comme le bouton "Commencer". */
button {
  display: block;
  width: 100%;
  padding: 18px;
  font-family: var(--police-texte);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-sur-or);
  background: var(--degrade);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.15s;  /* anime doucement le changement ci-dessous */
}

/* :hover = quand la souris survole le bouton. Il grossit très légèrement. */
button:hover {
  transform: scale(1.02);
}

/* :focus-visible = quand on arrive sur un élément au clavier (touche Tab).
   Le contour visible aide les personnes qui naviguent sans souris. */
button:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--couleur-texte);
  outline-offset: 2px;
}

/* ---------- 11. L'avertissement ----------
   Un bloc sobre avec un filet doré à gauche pour attirer l'œil. */
#avertissement {
  background-color: var(--couleur-carte);
  border-left: 2px solid var(--couleur-principale);
  border-radius: 2px;
  padding: 4px 20px;
  margin: 32px 0;
}

#avertissement h2 {
  margin-top: 16px;
  font-size: 1.1rem;
}

/* ---------- 12. Le pied de page ---------- */
footer {
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
  padding-bottom: 40px;
}

/* ---------- 13. Adaptation aux grands écrans ----------
   Une "media query" : les règles à l'intérieur ne s'appliquent que si l'écran
   fait au moins 700px de large (tablette, ordinateur). Sur téléphone, elles sont ignorées.
   On écrit d'abord pour le téléphone, puis on améliore pour les grands écrans :
   c'est la méthode "mobile d'abord". */
@media (min-width: 700px) {
  header {
    padding-top: 32px;
  }

  .accueil {
    padding: 72px 40px 56px;
  }

  h1 {
    font-size: 2.8rem;
  }
}

/* =========================================================
   14. LA PAGE DES RÉSULTATS (resultats.html)
   Tout ce qui suit ne s'applique qu'à la page des résultats, grâce à la classe
   "page-resultats" posée sur son <body>.
   ========================================================= */

/* Une page plus large que le questionnaire, pour mettre deux cartes côte à côte. */
.page-resultats header,
.page-resultats main,
.page-resultats footer {
  max-width: 1040px;
}

/* Le nom du site, en petit, qui ramène au questionnaire. */
.nom-du-site {
  margin: 0;
  font-family: var(--police-titres);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.nom-du-site a {
  color: var(--couleur-principale);
  text-decoration: none;
}

/* Le bandeau noir en haut des résultats. */
.bandeau-resultats {
  margin: 16px 0 24px;
  padding: 28px 24px;
  border: 1px solid var(--bordure-bandeau);
  border-radius: var(--arrondi);
  color: #f3efe6;
  background: var(--fond-bandeau);
}

.bandeau-resultats h1 {
  margin: 0 0 6px;
}

/* Le résumé du profil, en petites majuscules dorées. */
.bandeau-resultats p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-sur-bandeau);
}

/* Le titre reçoit le focus au chargement : pas de contour autour. */
#titre-resultats:focus {
  outline: none;
}

/* ---------- Les cartes ----------
   Sur téléphone, une carte sous l'autre. Sur grand écran, voir plus bas. */
#resultats {
  display: grid;
  gap: 20px;
}

.carte-resultat {
  background-color: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--arrondi);
  padding: 20px;
  box-shadow: var(--ombre);
  /* Les cartes apparaissent l'une après l'autre : la carte n° i attend i × 0,1 s.
     --i est donné par resultats.js. calc() fait le calcul. */
  animation: apparition 0.5s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

/* La carte n°1 est mise en avant avec un contour doré et une ombre plus marquée.
   Elle a sa propre animation d'entrée, plus marquée que les autres (voir plus bas). */
.carte-premiere {
  border: 1px solid var(--couleur-principale);
  box-shadow: var(--ombre-premiere);
  position: relative;             /* sert de repère au reflet doré (::after) */
  overflow: hidden;               /* le reflet ne dépasse pas de la carte */
  animation: entree-premiere 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Les autres cartes attendent que la n°1 soit arrivée avant d'apparaître. */
.carte-resultat:not(.carte-premiere) {
  animation-delay: calc(0.5s + var(--i, 0) * 0.1s);
}

/* 1. La carte n°1 monte, grossit un tout petit peu trop, puis se pose. */
@keyframes entree-premiere {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* 2. Un reflet doré traverse la carte une fois, comme sur un objet précieux.
   ::after crée un calque vide par-dessus la carte : c'est lui qui bouge. */
.carte-premiere::after {
  content: "";
  position: absolute;
  inset: 0;                       /* couvre toute la carte */
  background: linear-gradient(110deg, transparent 35%, var(--reflet-or) 50%, transparent 65%);
  transform: translateX(-100%);   /* au départ, caché à gauche */
  pointer-events: none;           /* les clics passent à travers */
  animation: reflet 1.3s ease-in-out 0.8s both;
}

@keyframes reflet {
  to {
    transform: translateX(100%);  /* ressort à droite */
  }
}

/* 3. Le rond « 1 » apparaît d'un coup et lance une onde dorée autour de lui. */
.carte-premiere .rang {
  animation: halo-rang 1.4s ease-out 0.7s both;
}

@keyframes halo-rang {
  0% {
    transform: scale(0.4);
    opacity: 0;
    box-shadow: 0 0 0 0 var(--couleur-principale);
  }
  30% {
    transform: scale(1.18);
    opacity: 1;
  }
  45% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 16px transparent;
  }
}

/* L'en-tête de la carte : numéro, nom et prix sur une même ligne. */
.carte-entete {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Le numéro dans un rond au contour doré. */
.rang {
  flex-shrink: 0;                 /* empêche le rond de s'écraser sur petit écran */
  width: 44px;
  height: 44px;
  border-radius: 50%;             /* 50 % d'arrondi transforme un carré en cercle */
  border: 1px solid var(--couleur-principale);
  color: var(--couleur-principale);
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* min-width: 0 permet aux noms très longs de passer à la ligne au lieu de déborder. */
.carte-nom {
  min-width: 0;
}

.marque {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;      /* écrit la marque en majuscules */
  letter-spacing: 0.3em;
  color: var(--couleur-principale);
}

.carte-resultat h2 {
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0;
}

/* Le prix, en grand, poussé tout à droite par margin-left: auto. */
.prix {
  margin: 0 0 0 auto;
  font-family: var(--police-titres);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--couleur-texte);
  white-space: nowrap;            /* "140 €" ne se coupe jamais en deux lignes */
}

.photo-chaussure {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;            /* l'image entière est visible, sans être déformée */
  margin-top: 14px;
}

/* ---------- Les pastilles ----------
   Le score, le terrain, le type : de petites étiquettes à fin contour. */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.score-badge,
.pastille {
  margin: 0;
  padding: 4px 12px;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 700;
}

.score-badge {
  border: 1px solid var(--couleur-principale);
  color: var(--couleur-principale);
}

/* Les pastilles sont discrètes ; seule "Stable" est dorée, car c'est une info importante. */
.pastille {
  border: 1px solid var(--bordure-pastille);
  color: var(--couleur-texte-doux);
}

.pastille-stable {
  border-color: var(--couleur-principale);
  color: var(--couleur-principale);
}

.intro {
  font-weight: 600;
  margin: 14px 0 0;
}

/* ---------- Les jauges Amorti et Dynamisme ---------- */
.jauges {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

/* Une jauge = le nom, les 5 cases, la note. Trois colonnes sur une ligne. */
.jauge {
  display: grid;
  grid-template-columns: 6.5em 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.jauge-nom {
  color: var(--couleur-texte-doux);
}

.jauge-cases {
  display: flex;
  gap: 4px;
}

/* Des cases très fines : un simple trait doré. */
.case {
  flex: 1;
  height: 3px;
  background-color: var(--couleur-case-vide);
}

.case.pleine {
  background: linear-gradient(90deg, var(--couleur-principale), var(--couleur-secondaire));
}

.jauge-note {
  font-weight: 700;
}

/* ---------- Le drop et le poids ---------- */
.caracteristiques {
  display: flex;
  gap: 28px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--couleur-bordure);
}

.caracteristiques dt {
  font-size: 0.75rem;
  color: var(--couleur-texte-doux);
}

.caracteristiques dd {
  margin: 0;
  font-weight: 700;
}

/* ---------- Les explications ---------- */
.carte-resultat h4 {
  margin: 16px 0 4px;
  font-size: 0.95rem;
}

.carte-resultat ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.95rem;
}

/* Les alertes en gris, pour les distinguer des points forts. */
.alertes {
  color: var(--couleur-texte-doux);
}

.note-modele {
  font-size: 0.85rem;
  color: var(--couleur-texte-doux);
  margin: 12px 0 0;
}

/* Le lien vers la fiche officielle, habillé en bouton à contour doré. */
.lien-fiche {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 18px;
  border: 1px solid var(--couleur-principale);
  border-radius: 2px;
  color: var(--couleur-principale);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.lien-fiche:hover {
  background-color: var(--couleur-principale);
  color: var(--texte-sur-or);
}

.conseil-essai {
  margin: 0;
  font-size: 0.9rem;
  color: var(--couleur-texte-doux);
}

.aucun-resultat {
  background-color: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--arrondi);
  padding: 20px;
}

/* Le bouton "Recommencer" : c'est un lien <a>, habillé comme le bouton principal. */
.zone-recommencer {
  text-align: center;
  margin: 24px 0 0;
}

.bouton-recommencer {
  display: inline-block;
  padding: 16px 36px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-sur-or);
  background: var(--degrade);
  border-radius: 2px;
  text-decoration: none;
  transition: transform 0.15s;
}

.bouton-recommencer:hover {
  transform: scale(1.03);
}

/* ---------- Sur grand écran : deux cartes par ligne ----------
   La carte n°1 et les phrases sous les cartes prennent toute la largeur
   (grid-column: 1 / -1 = de la première à la dernière colonne). */
@media (min-width: 800px) {
  #resultats {
    grid-template-columns: 1fr 1fr;
  }

  .carte-premiere,
  .conseil-essai,
  .aucun-resultat {
    grid-column: 1 / -1;
  }

  .carte-resultat {
    padding: 24px 28px;
  }

  .carte-premiere h2 {
    font-size: 2rem;
  }

  .bandeau-resultats {
    padding: 40px 36px;
  }
}