/* ==========================================================================
   Top 5, style « Carnet » (01/10/2026) : direction D « Classement replié »
   (maquette _migration/maquette_top5.html), version finie de Claude Design
   (_migration/design_handoff_top5/README.md). Fil d'Ariane, niveau de
   difficulté et étoiles : tableau-carnet.css, chargée avant.
   ========================================================================== */

.top5 {
    background: var(--hr-papier);
    color: var(--hr-texte);
    font: 400 16px/1.6 var(--hr-font-texte);
}
.top5__conteneur { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.top5 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

/* Liste du fil d'Ariane remise à zéro, comme sur le tableau (le thème y
   met 23 px de marge basse et un interligne de 26 px) */
.top5 .hr-ariane__liste { margin: 0; padding: 0; list-style: none; line-height: inherit; }

/* Espaces et polices de l'en-tête communs au tableau, à la carte du pays et
   au Top 5 (François, 01/10/2026) : fil d'Ariane de tableau-carnet.css,
   21 px puis 36 px autour du titre (25 et 30 sur mobile) */
.top5 .top5__titre {
    max-width: 900px;
    margin: 21px auto 0;
    padding: 0;
    font: 600 var(--hr-fs-h1)/var(--hr-lh-h1) var(--hr-font-titre);
    letter-spacing: -.01em;
    color: var(--hr-encre);
    text-align: center;
    text-wrap: balance;
}
.top5__intro {
    max-width: 760px;
    margin: 36px auto 0;
    font: 400 var(--hr-fs-intro)/var(--hr-lh-intro) var(--hr-font-texte);
    color: var(--hr-texte);
    text-align: center;
    text-wrap: pretty;
}
.top5__intro p { margin: 0 0 12px; padding: 0; }
.top5__intro p:last-child { margin-bottom: 0; }
.top5__renvoi {
    max-width: 760px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hr-texte-2);
    text-align: center;
}
.top5__renvoi a, .top5__intro a, .top5__conclusion a, .top5__texte a, .top5__alerte a {
    color: var(--hr-petrole);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Les rangées ─────────────────────────────────────────────────────── */

.top5__liste { margin-top: 48px; border-bottom: 1px solid var(--hr-bordure); }
/* Sans conclusion, pas de filet après la cinquième (François, 01/10/2026) */
.top5__liste:last-child { border-bottom: 0; }
.top5__liste:last-child .top5__rangee:last-child { padding-bottom: 8px; }
.top5__rangee {
    display: grid;
    /* Photo et texte en proportion (5 / 9) : 360 px de photo à 1 200 px et
       plus (Claude Design), la photo rétrécit avec la fenêtre au lieu du
       seul texte (François, 01/10/2026) */
    grid-template-columns: 64px minmax(0, 5fr) minmax(0, 9fr);
    column-gap: 24px;
    padding: 40px 0;
    border-top: 1px solid var(--hr-bordure);
}
.top5__rang {
    font: 600 64px/.8 var(--hr-font-titre);
    font-variant-numeric: lining-nums;
    color: var(--hr-texte-3);
    text-align: right;
}
.top5__rangee--un .top5__rang { color: var(--hr-petrole); }
.top5__photo { display: block; }
.top5__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--hr-r-sm);
    background: var(--hr-filet);
}
.top5__corps { min-width: 0; padding-left: 8px; }
.top5__haut { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.top5__region {
    font: 600 12px/1.3 var(--hr-font-texte);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hr-texte-3);
}
.top5__haut .hr-tableau__etoiles { font-size: 16px; }
.top5 .top5__nom {
    margin: 8px 0 0;
    padding: 0;
    font: 600 26px/1.25 var(--hr-font-titre);
    color: var(--hr-encre);
    text-wrap: pretty;
}
.top5__nom a { color: inherit; text-decoration: none; transition: color var(--hr-transition); }
.top5__nom a:hover { color: var(--hr-petrole); }

/* Difficulté et chiffres : une ligne, séparés par « · » */
.top5__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 12px;
    padding-bottom: 5px;   /* + 5 px avant l'encadré ou le texte (François, 01/10/2026) ; une marge fusionnerait avec la suivante */
    font-size: 15px;
    line-height: 24px;
}
.top5__meta-ligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.top5__sep { color: var(--hr-texte-3); }
.top5__meta .hr-tableau__niveau { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--hr-texte); }
.top5__meta .hr-tableau__niveau i { gap: 2px; }
.top5__meta .hr-tableau__niveau b { border-radius: 1px; }
.top5__chiffres b { font-weight: 500; color: var(--hr-encre); font-variant-numeric: tabular-nums; }
.top5__via { color: var(--hr-texte-2); }
.top5__via b { font-weight: 600; color: var(--hr-encre); }

/* Avertissement (« Important : … ») sorti du pli */
.top5__alerte {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--hr-filet-froid);
    border-radius: var(--hr-r-md);
    background: var(--hr-surface);
    font-size: 15px;
    line-height: 1.6;
}

.top5__texte { margin-top: 16px; font: 400 var(--hr-fs-texte)/var(--hr-lh-texte) var(--hr-font-texte); }
.top5__texte p { margin: 0 0 12px; padding: 0; }
.top5__texte--replie {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.top5__rangee--sans-meta .top5__texte--replie { -webkit-line-clamp: 4; }
.top5__texte--replie p:last-child { margin-bottom: 0; }

.top5__lire {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    font: 500 15px var(--hr-font-texte);
    color: var(--hr-petrole);
    cursor: pointer;
    transition: color var(--hr-transition);
}
.top5__lire[hidden] { display: none; }
.top5__lire span:last-child { font-size: 12px; }
.top5__lire:hover { color: var(--hr-petrole-fonce); text-decoration: underline; text-underline-offset: 3px; }

.top5__action { margin-top: 20px; }
.top5__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--hr-r-sm);
    background: var(--hr-petrole);
    font: 600 15px var(--hr-font-texte);
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color var(--hr-transition);
}
.top5__bouton:hover { background: var(--hr-petrole-fonce); }
.top5__bouton:focus-visible, .top5__lire:focus-visible { outline: none; box-shadow: var(--hr-focus); }

.top5__conclusion {
    max-width: 760px;
    margin-top: 40px;
    font: 400 var(--hr-fs-texte)/var(--hr-lh-texte) var(--hr-font-texte);   /* comme le texte des rangées (François, 02/10/2026) */
}
.top5__conclusion p { margin: 0 0 12px; padding: 0; }

/* ── Récapitulatif : carte et tableau ────────────────────────────────── */

.top5__recap {
    margin-top: 40px;
    padding: 64px 0 0;          /* 64 px avant le pied de page : sa marge (pied-carnet.css) */
    border-top: 1px solid var(--hr-bordure);
    background: var(--hr-surface);
}
.top5__recap-entete { text-align: center; }
.top5__libelle {
    font: 600 12px/1.3 var(--hr-font-texte);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hr-texte-3);
}
.top5 .top5__recap-titre {
    margin: 8px 0 0;
    padding: 0;
    font: 600 30px/1.2 var(--hr-font-titre);
    color: var(--hr-encre);
}
.top5__recap-aide { margin: 8px 0 32px; font-size: 15px; color: var(--hr-texte-2); }
.top5__recap-aide[hidden] { display: none; }

.top5__recap-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* Côte à côte dès 1 100 px (1 000 chez Claude Design, mais à 1 000 les
   pages anglaises débordaient encore de 4 à 85 px) ; carte de 400 px au plus
   (480 chez Claude Design). Plus étroit, le tableau coupe ses mots et perd
   sa vignette (François, 01/10/2026) */
@media (min-width: 1100px) {
    .top5__recap-grille { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
}
@media (min-width: 1200px) {
    .top5__recap-grille { gap: 32px; }
}
/* Côte à côte sous 1 200 px : tableau resserré, sans vignette */
@media (min-width: 1100px) and (max-width: 1199px) {
    .top5__t-nom img { display: none; }
    .top5__tableau th, .top5__tableau td { padding-left: 4px; padding-right: 4px; }
    .top5__tableau .top5__t-avis { padding-left: 4px; }
    .top5__t-avis .hr-tableau__etoiles { font-size: 12px; }
    .top5__t-avis .hr-tableau__etoiles b { width: 12px; }
}
/* Au-dessus du tableau, la carte reste petite : elle porte peu
   d'informations (François, 01/10/2026) */
@media (max-width: 1099px) {
    .top5__recap .top5__carte { width: 100%; max-width: 480px !important; margin: 0 auto; }   /* une feuille du thème impose max-width: 100% */
}
@media (min-width: 768px) and (max-width: 1099px) {
    .top5__recap .top5__carte { height: 360px; min-height: 0; }
}
.top5__carte {
    min-height: 400px;
    border: 1px solid var(--hr-bordure);
    border-radius: var(--hr-r-md);
    overflow: hidden;
    background: #e9e5dd;
    font-family: var(--hr-font-texte);
}
/* Joints clairs entre les tuiles au quart de cran : même parade que la
   carte du pays (tuiles d'un pixel plus grandes, en fusion normale) */
.top5__carte img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }
/* Commandes de zoom au style de la carte du pays */
.top5__carte .leaflet-bar { overflow: hidden; border: 0; border-radius: var(--hr-r-md); box-shadow: var(--hr-om-controle); }
.top5__carte .leaflet-bar a { width: 36px; height: 36px; border: 0; background: #fff; font: 500 20px/36px var(--hr-font-texte); color: var(--hr-texte); }
.top5__carte .leaflet-bar a + a { border-top: 1px solid var(--hr-filet); }
.top5__carte .leaflet-bar a:hover { background: var(--hr-papier); color: var(--hr-encre); }
.top5__carte .leaflet-top .leaflet-control { margin: 12px 0 0 12px; }
.top5__carte .top5__depart { margin-top: 8px !important; }
.top5__carte .top5__depart a { display: grid; place-items: center; }

/* Repères numérotés : la couleur du tracé, chiffre blanc ; mis en avant :
   36 px. Un seul élément, jamais remplacé (le survol change une classe) */
.top5__repere { background: none; border: 0; }
.top5__repere span {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .2);
    font: 600 15px/1 var(--hr-font-titre);
    color: #fff;
}
.top5__repere--fort span { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 17px; }

/* Tableau */
.top5__tableau-cadre { min-width: 0; }
.top5__tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.top5__tableau th {
    padding: 12px 6px;
    border-bottom: 2px solid var(--hr-petrole);
    font: 600 12px/1.3 var(--hr-font-texte);
    letter-spacing: .06em;   /* .08 chez Claude Design : « Duration » débordait en anglais */
    text-transform: uppercase;
    color: var(--hr-texte-2);
    text-align: left;
    vertical-align: bottom;
}
.top5__tableau th.top5__t-nom { color: var(--hr-petrole); }
.top5__tableau th.top5__t-num { text-align: center; }   /* chiffres centrés, comme le circuit (François, 02/10/2026) */
.top5__tableau td {
    height: 72px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--hr-filet);
    vertical-align: middle;
    background: var(--hr-surface);
    transition: background-color var(--hr-transition);
}
.top5__tableau tbody tr:nth-child(even) td { background: var(--hr-papier); }
.top5__tableau tbody tr { cursor: pointer; }
.top5__tableau tbody tr.top5__ligne--fort td { background: var(--hr-petrole-pale); }
.top5__t-rang { width: 36px; }
.top5__t-rang span {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font: 600 13px/1 var(--hr-font-titre);
    color: #fff;
}
.top5__tableau td.top5__t-nom { min-width: 0; }
.top5__tableau th, .top5__t-nom a, .top5__t-nom-cadre > span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.top5__t-nom-cadre { display: flex; align-items: center; gap: 12px; }
.top5__t-nom img { flex: none; width: 60px; height: 40px; object-fit: cover; border-radius: 4px; }
.top5__t-nom a, .top5__t-nom-cadre > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font: 600 15px/1.3 var(--hr-font-texte);
    color: var(--hr-petrole);
    text-decoration: none;
}
.top5__t-nom-cadre > span { color: var(--hr-encre); }
.top5__t-niveau .hr-tableau__niveau { gap: 4px; font-size: 14px; }
.top5__tableau .top5__t-num { text-align: center; white-space: nowrap; }
.top5__tableau .top5__t-avis { padding-left: 24px; white-space: nowrap; }
.top5__t-avis .hr-tableau__etoiles { font-size: 14px; }
.top5__vide { color: var(--hr-texte-3); }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .top5__conteneur { padding: 0 16px; }
    /* Centrés comme sur ordinateur (François, 01/10/2026) */
    .top5 .top5__titre { margin-top: 25px; font-size: 32px; line-height: 1.1; }
    .top5__intro { margin-top: 30px; }
    .top5__renvoi { margin-top: 12px; }
    .top5__liste { margin-top: 32px; }

    /* Le rang centré entre deux filets, au-dessus de la photo pleine
       largeur, puis la région et le nom (essai C retenu par François,
       01/10/2026) ; ces filets remplacent celui qui sépare les rangées */
    .top5__rangee {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rang" "photo" "tete" "suite";
        padding: 32px 0;
        border-top: 0;
    }
    .top5__liste { border-bottom: 0; }
    .top5__rang {
        grid-area: rang;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        font-size: 40px;
        line-height: 1;
        text-align: center;
    }
    .top5__rang::before,
    .top5__rang::after { content: ""; flex: 1; height: 1px; background: var(--hr-bordure); }
    .top5__photo { grid-area: photo; }
    .top5__corps { display: contents; }
    .top5__tete { grid-area: tete; margin-top: 16px; }
    .top5__suite { grid-area: suite; }
    .top5 .top5__nom { font-size: 22px; }
    /* Difficulté (et cotation) sur une ligne, chiffres sur la suivante */
    .top5__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .top5__sep--coupure { display: none; }
    .top5__texte { margin-top: 12px; font-size: 16px; }
    .top5__lire { min-height: 44px; }
    .top5__action { margin-top: 12px; padding: 0 32px; }
    .top5__bouton { justify-content: center; width: 100%; height: 44px; font-size: 16px; }
    .top5__conclusion { font-size: 16px; }

    .top5__recap { margin-top: 32px; padding: 48px 0 0; }   /* puis 48 px : marge du pied de page */
    .top5 .top5__recap-titre { font-size: 24px; }
    .top5__recap-aide { margin: 8px 0 20px; }
    .top5__carte { min-height: 320px; height: 320px; }

    .top5__tableau .top5__t-option { display: none; }
    .top5__tableau th, .top5__tableau td { padding: 4px; }
    .top5__tableau td { height: 56px; }
    .top5__t-rang { width: 32px; }
    .top5__t-rang span { width: 24px; height: 24px; }
    .top5__t-nom img { display: none; }
    .top5__tableau td.top5__t-nom { min-width: 0; }
    .top5__t-niveau { width: 84px; }
    .top5__t-niveau .hr-tableau__niveau { font-size: 13px; }
    .top5__t-niveau .hr-tableau__niveau b { width: 8px; height: 8px; }
    .top5__tableau th.top5__t-num, .top5__tableau td.top5__t-num { width: 56px; }
}

/* ── Impression (François, 05/10/2026) ──────────────────────────
   Rang, photo 3:2 réduite à gauche et texte entier autour ; récapitulatif
   sur une nouvelle page, carte réduite (top5-carnet.js) au-dessus du tableau
   complet ; boutons et « Lire la suite » retirés. */
@media print {
  .top5 { background: #fff; color: #111; font-size: 11pt; }
  .top5 *, .top5 *::before, .top5 *::after { box-shadow: none !important; text-shadow: none !important; }
  .top5 [class*="top5__"], .top5 .leaflet-container * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .top5__conteneur { max-width: none; padding: 0; }
  .top5 .hr-ariane, .top5__lire, .top5__action, .top5__recap-aide, .top5 .leaflet-control-container { display: none !important; }
  .top5 a { color: inherit; text-decoration: none; }
  .top5 a[data-hote]::after { content: " (" attr(data-hote) ")"; font-size: 9.5pt; color: #444; }
  .top5 .top5__titre { margin-top: 0; font-size: 24pt; line-height: 1.12; color: var(--hr-petrole); }
  .top5__intro, .top5__renvoi, .top5__conclusion { max-width: none; font-size: 11pt; line-height: 1.45; color: #111; }
  /* Rangées : rang, photo 3:2 réduite à gauche, texte entier autour */
  .top5__liste { margin-top: 14pt; border: 0; }
  .top5__rangee { display: flow-root; position: relative; padding: 12pt 0 12pt 34pt; border-top: 1px solid #ccc; break-inside: avoid; }
  .top5__rang { position: absolute; left: 0; top: 12pt; width: 26pt; font-size: 28pt; text-align: left; color: #999; }
  .top5__rangee--un .top5__rang, .top5__rang { color: var(--hr-petrole); }
  .top5__photo { float: left; width: 34%; margin: 2pt 12pt 4pt 0; }
  .top5__photo img { border-radius: 6px; }
  .top5__corps { padding: 0; }
  .top5 .top5__nom { font-size: 14pt; color: var(--hr-petrole); margin-top: 2pt; }
  .top5__meta { margin-top: 3pt; font-size: 10pt; color: #111; }
  .top5__meta .hr-tableau__niveau { font-size: 10pt; }
  .top5__texte, .top5__texte--replie { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; margin-top: 6pt; font-size: 11pt; line-height: 1.4; color: #111; }
  .top5__texte p { margin: 0 0 6pt; }
  .top5 .hr-tableau__etoiles b.on { color: var(--hr-petrole); }
  /* Récapitulatif : nouvelle page, carte réduite au-dessus du tableau */
  .top5__recap { break-before: page; margin-top: 0; padding-top: 0; }
  .top5 .top5__recap-titre { font-size: 16pt; color: var(--hr-petrole); }
  .top5__recap-grille { display: block !important; }
  .top5__recap .top5__carte { width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 auto 12pt; border: 0; background: none; }
  .top5 .top5-carte-papier { width: var(--t5-l) !important; height: var(--t5-h) !important; zoom: var(--t5-z); margin: 0 auto; border: 1px solid #ccc; border-radius: 10px; }
  .top5__tableau { font-size: 10pt; }
  .top5__tableau th, .top5__tableau td { display: table-cell !important; }
}