/* Carte à emporter (E5). Feuille autonome : elle sert aussi dans le fichier hors ligne, sans
   rp.css ; toutes les classes portent le préfixe cc- (aucun conflit avec rp.css, chargée après
   celle-ci par ordre alphabétique) ; aucune classe de rp.css n'est redéfinie ici. Valeurs : les jetons (--rp-*). Plein soleil : le texte utile
   en texte sur sombre (14,78:1), le secondaire seulement pour les libellés (7,93:1). */

.cc-carte {
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  background: var(--rp-sombre);
  color: var(--rp-sombre-texte);
  border-radius: var(--rp-rayon-grand);
  padding: var(--rp-espace-5) var(--rp-espace-4);
  display: flex;
  flex-direction: column;
  gap: var(--rp-espace-3);
  font-family: var(--rp-police-texte);
  line-height: 1.3;
}
.cc-hors-ligne .cc-carte { margin: 0 auto; border-radius: 0; min-height: 100vh; }
.cc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rp-espace-3); flex-wrap: wrap; }
.cc-eyebrow { font-size: var(--rp-taille-mention); letter-spacing: 1.5px; text-transform: uppercase; color: var(--rp-sombre-texte-secondaire); }
.cc-pret { font-size: var(--rp-taille-secondaire); font-weight: 600; color: var(--rp-sombre-accent); }
.cc-nom { margin: 0; font-family: var(--rp-police-titres); font-weight: 650; font-size: 24px; line-height: 1.15; }
.cc-quand { font-size: var(--rp-taille-corps); }
.cc-temps-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rp-espace-3); flex-wrap: wrap; margin-top: var(--rp-espace-2); }
.cc-temps { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-chiffre-carte); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-faits { font-size: var(--rp-taille-corps); font-weight: 600; }
.cc-qualifie { font-size: var(--rp-taille-secondaire); }
.cc-libelle { font-size: var(--rp-taille-mention); letter-spacing: 1px; text-transform: uppercase; color: var(--rp-sombre-texte-secondaire); }

/* La consigne de départ : un bloc bordé, sans fond de couleur (§2.7), le plus gros texte après le temps. */
.cc-consigne {
  border: 2px solid var(--rp-sombre-accent);
  border-radius: var(--rp-rayon-moyen);
  padding: var(--rp-espace-3) var(--rp-espace-4);
  display: flex;
  flex-direction: column;
  gap: var(--rp-espace-1);
}
.cc-consigne-valeur { font-size: 22px; font-weight: 600; line-height: 1.2; }
.cc-consigne-note { font-size: var(--rp-taille-corps); }

/* Les temps de passage, en tête (choix n° 8). */
.cc-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rp-espace-2); }
.cc-repere { border: 1px solid var(--rp-sombre-ligne); border-radius: var(--rp-rayon-moyen); padding: var(--rp-espace-2) var(--rp-espace-3); }
.cc-passage-temps { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-titre-bloc); font-variant-numeric: tabular-nums; }
.cc-notes { font-size: var(--rp-taille-corps); }

/* Une ligne par zone : où (et son petit relief), la valeur suivie en grand et le passage, les mots. */
.cc-lignes { display: flex; flex-direction: column; }
.cc-ligne { padding: var(--rp-espace-3) 0; border-top: 1px solid var(--rp-sombre-ligne); display: flex; flex-direction: column; gap: var(--rp-espace-1); }
.cc-ligne-haut { display: flex; justify-content: space-between; align-items: center; gap: var(--rp-espace-3); }
.cc-ou-bloc { display: flex; flex-direction: column; min-width: 0; }
.cc-km { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-secondaire); color: var(--rp-sombre-texte-secondaire); }
.cc-ou { font-size: var(--rp-taille-corps); font-weight: 600; }
.cc-schema { width: 96px; height: 32px; flex: none; display: block; }
.cc-ligne-milieu { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rp-espace-3); flex-wrap: wrap; }
.cc-valeur { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-chiffre-secondaire); line-height: 1.15; font-variant-numeric: tabular-nums; }
.cc-passage { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-corps); white-space: nowrap; }
.cc-petit { font-family: var(--rp-police-texte); font-size: var(--rp-taille-mention); color: var(--rp-sombre-texte-secondaire); }
.cc-mot { font-size: var(--rp-taille-secondaire); }
.cc-deja { font-size: var(--rp-taille-mention); color: var(--rp-sombre-texte-secondaire); }
.cc-pied { font-size: var(--rp-taille-secondaire); color: var(--rp-sombre-texte-secondaire); border-top: 1px solid var(--rp-sombre-ligne); padding-top: var(--rp-espace-3); }

/* Dans l'app : la carte à 430 px, la colonne claire à côté ; au téléphone, l'une sous l'autre. */
.cc-grille { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 360px); gap: var(--rp-ecart-grille); align-items: start; }
.cc-bouton {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--rp-espace-5);
  border-radius: var(--rp-rayon-moyen); background: var(--rp-accent); color: var(--rp-surface);
  font-weight: 600; text-decoration: none;
}
.cc-bouton:hover { background: var(--rp-accent-fonce); color: var(--rp-surface); }
@media (max-width: 767px) {
  .cc-grille { grid-template-columns: minmax(0, 1fr); }
  .cc-grille .cc-carte { max-width: none; }
}

/* --- Carte pro (le parcours sur la carte) ------------------------------------------------ */
.cp-carte { width: 100%; height: 440px; border-radius: var(--rp-rayon-moyen); overflow: hidden; }
.cp-profil { width: 100%; height: 170px; }
.cp-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--rp-taille-secondaire); }
.cp-legende li { display: flex; justify-content: space-between; gap: var(--rp-espace-3); align-items: center; padding: 4px var(--rp-espace-2); border-radius: 4px; color: #13201F; }
.cp-legende .cp-km { font-family: var(--rp-police-chiffres); font-weight: 500; white-space: nowrap; }
.cp-pastille { display: inline-block; width: 28px; height: 6px; border-radius: 3px; margin-right: var(--rp-espace-2); vertical-align: middle; outline: 1px solid #2b2b2b; }
@media (max-width: 767px) {
  .cp-carte { height: 320px; }
}