/* eSIM Podium — design V4 (validé le 19/10/2026) : Outfit, palette Bleu franc, logo « la découpe ».
   Jamais de violet ni de dégradé ; voiles des photos unis ; rien ne passe sur du texte. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bleu: #2563EB; --bleu-fonce: #1D4ED8; --bleu-clair: #7DA2F5; --nuit: #0F172A; --fond: #F6F8FC; --doux: #EAF0FF;
  --ligne: #E2E8F0; --texte: #0F172A; --gris: #475569; --gris-clair: #64748B; --or: #F5B700; --argent: #CBD5E1; --bronze: #E3B58C;
  --police: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --approche: -0.015em;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--police); background: var(--fond); color: var(--texte); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: var(--bleu-fonce); }
:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nc { text-transform: none; }
.bouton .nc { display: contents; }   /* dans un bouton (flex), « eSIM » reste dans le même bloc de texte que les mots voisins */
.conteneur { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.aller-contenu { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; color: var(--texte); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.aller-contenu:focus { left: 12px; }
.bandeau-apercu { background: #FFF4CC; color: #7A5A00; text-align: center; font-size: 13.5px; font-weight: 600; padding: 8px 14px; }

/* ---------------------------------------------------------------- boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font: 600 15.5px var(--police); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.bouton-principal { background: var(--bleu); color: #fff; }
.bouton-principal:hover { background: var(--bleu-fonce); }
.bouton-secondaire { background: #fff; color: var(--texte); border-color: var(--ligne); }
.bouton-secondaire:hover { border-color: #CBD5E1; }

/* ---------------------------------------------------------------- en-tête */
.entete { background: #fff; border-bottom: 1px solid var(--ligne); position: relative; z-index: 20; }
.entete-ligne { min-height: 72px; display: flex; align-items: center; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); font-size: 24px; font-weight: 700; letter-spacing: var(--approche); white-space: nowrap; flex: none; }
.logo .symbole { width: 32px; height: 32px; flex: none; }
.logo .e { color: var(--bleu); }
.logo-clair { color: #fff; font-size: 22px; }
.logo-clair .e { color: var(--bleu-clair); }
.recherche { position: relative; }
.recherche-nav { flex: 1 1 280px; max-width: 380px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--fond); color: var(--gris); }
.recherche-nav:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 15px var(--police); color: var(--texte); outline: none; -webkit-appearance: none; appearance: none; }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche input::placeholder { color: var(--gris-clair); }
.nav-principale ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-principale a { color: var(--texte); text-decoration: none; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.nav-principale a:hover { color: var(--bleu); }
.nav-principale { margin-left: auto; }
.entete-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.choix-langue { position: relative; }
.choix-langue summary { list-style: none; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 12px; font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; user-select: none; }
.choix-langue summary::-webkit-details-marker { display: none; }
.choix-langue[open] summary { border-color: var(--bleu); }
.choix-langue .sep { margin: 0 5px; }
.detail-court { display: none; }
.panneau { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); padding: 12px; z-index: 40; }
.panneau-titre { margin: 4px 6px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-clair); }
.panneau ul { list-style: none; margin: 0 0 6px; padding: 0; }
.panneau a, .panneau button { display: flex; width: 100%; align-items: center; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--texte); text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; }
.panneau a:hover, .panneau button:hover { background: var(--fond); }
.panneau a[aria-current="true"], .panneau button[aria-pressed="true"] { background: var(--doux); color: var(--bleu-fonce); font-weight: 600; }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--texte); cursor: pointer; border-radius: 10px; }
.menu-mobile { border-top: 1px solid var(--ligne); background: #fff; }
.menu-mobile ul { list-style: none; margin: 0; padding: 6px 0 12px; }
.menu-mobile a { display: block; padding: 13px 2px; color: var(--texte); text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--ligne); }
.menu-mobile li:last-child a { border-bottom: 0; color: var(--bleu-fonce); }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14); z-index: 45; max-height: 330px; overflow: auto; color: var(--texte); text-align: left; }
.suggestions li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 9px; cursor: pointer; font-weight: 500; font-size: 15.5px; }
.suggestions li img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--doux); }
.sugg-prix { margin-left: auto; font-size: 13.5px; color: var(--gris); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- héros */
.heros { padding: 20px 20px 0; }
.heros-cadre { position: relative; max-width: 1360px; margin: 0 auto; min-height: 560px; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--nuit); }
.diapo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.diapo.active { opacity: 1; }
.heros-voile { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.5); }
.heros-contenu { position: relative; z-index: 1; width: 100%; max-width: 820px; padding: 60px 24px 104px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: #fff; }
.pastille { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); font-size: 13.5px; font-weight: 600; }
.pastille::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34D399; }
.heros h1 { margin: 0; font-size: 54px; line-height: 1.08; font-weight: 600; letter-spacing: var(--approche); }
.heros .chapo { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.recherche-grande { width: 100%; max-width: 760px; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 9px 9px 22px; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); color: var(--bleu); }
.recherche-grande input { height: 52px; font-size: 18px; }
.recherche-grande .bouton { min-height: 56px; padding: 0 28px; border-radius: 13px; font-size: 17px; }
.populaires { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.populaires > span { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.puce-pays { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--ligne); background: #fff; color: var(--texte); font: 600 14px var(--police); cursor: pointer; white-space: nowrap; }
.puce-pays img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.drapeau-ligne { display: inline-block; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; object-fit: cover; vertical-align: -4px; }   /* drapeau devant un nom de pays, dans un tableau */
.puce-pays.active { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.heros .puce-pays { height: 38px; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.heros .puce-pays:hover { background: rgba(255, 255, 255, 0.24); }
.heros-bas { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.legende { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(8, 12, 24, 0.55); font-size: 13.5px; font-weight: 600; }
.legende img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.carrousel-commandes { display: flex; align-items: center; gap: 10px; }
.points { display: flex; align-items: center; }
.point { position: relative; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.point::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 3px; background: rgba(255, 255, 255, 0.5); transition: width .2s; }
.point.actif::after { width: 20px; background: #fff; }
.point.actif { width: 30px; }
.fleche { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(8, 12, 24, 0.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fleche:hover { background: rgba(8, 12, 24, 0.55); }

/* ---------------------------------------------------------------- bande des fournisseurs */
.bande-marques { padding-top: 22px; }
.bande-cadre { background: #fff; border: 1px solid var(--ligne); border-radius: 20px; padding: 16px 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.surtitre { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.bande-cadre ul { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bande-cadre li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.bande-cadre img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.bande-cadre li > a { display: inline-flex; flex-direction: inherit; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.bande-cadre li > a:hover { color: var(--bleu-fonce); }

/* ---------------------------------------------------------------- sections */
.section { padding: 56px 0 0; }
.section-serree { padding-top: 48px; }
.section-blanche { background: #fff; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 64px 0; margin-top: 64px; }
.section-blanche + .section { padding-top: 64px; }
/* deux sections blanches qui se suivent (pré-lancement : calculateur puis FAQ) forment un seul bloc, sans bande grise */
.section-blanche:has(+ .section-blanche) { border-bottom: 0; }
.section-blanche + .section-blanche { margin-top: 0; border-top: 0; padding-top: 0; }
main:has(> .section-blanche:last-child) + .pied { margin-top: 0; }
.section-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section h2 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: var(--approche); }
.section .h2-petit { font-size: 28px; }
.sous-titre { margin: 6px 0 0; font-size: 16px; color: var(--gris); }

/* destinations */
.onglets { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; }
.onglets button { height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--texte); font-weight: 600; font-size: 14px; cursor: pointer; }
.onglets button[aria-selected="true"] { background: var(--nuit); color: #fff; }
.grille-pays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.carte-pays, .carte-region { position: relative; display: block; width: 100%; height: 96px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--nuit); color: #fff; text-align: left; font: inherit; }
.carte-pays { cursor: pointer; }
a.carte-pays { text-decoration: none; }
.carte-region { height: 120px; }
.carte-pays > img, .carte-region > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-monde > img { opacity: .9; }
.voile { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.46); transition: background .2s; }
.carte-pays:hover .voile { background: rgba(8, 12, 24, 0.34); }
.carte-contenu { position: relative; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; }
.carte-region .carte-contenu { justify-content: space-between; padding: 0 16px 0 18px; }
.drapeau { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); flex: none; }
.carte-nom { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.2; }
.carte-region .carte-nom { display: block; font-size: 19px; }
.carte-detail { display: block; font-size: 13.5px; opacity: .88; }
.pastille-prix { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.voir-plus { display: none; width: 100%; margin-top: 12px; }
.grille-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grille-regions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.monde-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.monde-bloc p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--gris); }

/* podium */
.puces-podium { display: flex; flex-wrap: wrap; gap: 8px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
.offre { background: #fff; border: 1px solid var(--ligne); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.offre-premiere { border: 2px solid var(--bleu); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14); }
.offre-premiere .offre-prix { padding: 18px 0; }
.offre-tete { display: flex; align-items: center; gap: 8px; }
.rang { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--nuit); }
.rang-1 { background: var(--or); } .rang-2 { background: var(--argent); } .rang-3 { background: var(--bronze); }
.offre-titre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--gris); }
.etiquette { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--doux); color: var(--bleu-fonce); font-size: 12.5px; font-weight: 600; }
.offre-marque { display: flex; align-items: center; gap: 12px; }
.offre-marque img { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne); object-fit: contain; flex: none; }
.offre-nom { margin: 0; font-size: 20px; font-weight: 600; }
.offre-donnees { margin: 2px 0 0; font-size: 14px; color: var(--gris); }
.offre-prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix-grand { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--bleu); }
.offre-detail { font-size: 14.5px; font-weight: 500; color: var(--gris); }
.offre-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.offre-points li { display: flex; align-items: center; gap: 8px; }
.offre-points svg { color: var(--bleu); flex: none; }
.offre .bouton { width: 100%; }
.mention { margin: 22px 0 0; font-size: 13.5px; color: var(--gris); }
.mention a { font-weight: 600; }

/* codes et comparatifs */
.grille-codes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.carte-code { background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.code-marque { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.code-marque img { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ligne); object-fit: contain; }
.code-offre { margin: 0; min-height: 50px; font-size: 19px; line-height: 1.3; font-weight: 600; }
.code-boite { display: flex; align-items: center; height: 46px; border: 1.5px dashed #93B4F5; border-radius: 12px; overflow: hidden; }
.code-valeur { flex: 1; min-width: 0; padding: 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .18em; color: #94A3B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-valeur.revele { color: var(--texte); letter-spacing: .06em; }
.code-bouton { height: 100%; padding: 0 14px; border: 0; background: var(--bleu); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.code-bouton:hover { background: var(--bleu-fonce); }
.code-verifie { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.point-vert { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.grille-duels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte-duel { background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; }
.duel-logos { flex: none; display: flex; align-items: center; }
.duel-logos img { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne); background: #fff; object-fit: contain; }
.vs { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 -6px; border-radius: 50%; background: var(--nuit); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.duel-texte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.duel-titre { font-size: 17px; font-weight: 600; }
.duel-sujet { font-size: 14px; color: var(--gris); }

/* calculateur et étapes */
.calc-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; margin-bottom: 64px; }
.calc-texte h2 { margin-bottom: 14px; }
.calc-texte p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gris); }
.calc { background: var(--fond); border: 1px solid var(--ligne); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.calc-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.calc-ligne output { color: var(--bleu-fonce); }
.calc input[type="range"] { width: 100%; margin: 4px 0 0; accent-color: var(--bleu); height: 28px; cursor: pointer; }
.calc-bornes { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--gris); }
.calc-libelle { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.usages { display: flex; flex-wrap: wrap; gap: 8px; }
.usage { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne); background: #fff; color: var(--texte); font-weight: 600; font-size: 14px; cursor: pointer; }
.usage[aria-pressed="true"] { background: var(--doux); color: var(--bleu-fonce); border-color: #BFD0FB; }
.calc-resultat { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; background: var(--nuit); color: #fff; }
.calc-petit { display: block; font-size: 14px; opacity: .8; }
.calc-valeur { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.etapes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.etapes li { background: var(--fond); border: 1px solid var(--ligne); border-radius: 18px; padding: 22px; display: flex; gap: 14px; }
.etape-n { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--doux); color: var(--bleu-fonce); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.etapes h3 { margin: 0; font-size: 18px; font-weight: 600; }
.etapes p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--gris); }

/* guides, FAQ, alertes, confiance */
.grille-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carte-guide { background: #fff; border: 1px solid var(--ligne); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.carte-guide img { width: 100%; height: 200px; object-fit: cover; }
.carte-guide > div { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.guide-duree { margin: 0; font-size: 13px; font-weight: 600; color: var(--bleu-fonce); }
.carte-guide h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; }
.carte-guide p:not(.guide-duree) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.faq-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.encart { margin-top: 18px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.encart-titre { margin: 0; font-size: 17px; font-weight: 600; }
.encart p:not(.encart-titre) { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--gris); }
.faq-item { border-bottom: 1px solid var(--ligne); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 600; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-signe { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fond); }
.faq-signe::before, .faq-signe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: var(--bleu-fonce); transform: translate(-50%, -50%); }
.faq-signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-signe::after { display: none; }
.faq-item p { margin: 0 0 18px; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--gris); }
.alertes { background: #fff; border: 1px solid var(--ligne); border-radius: 24px; padding: 30px 32px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.alertes-texte { flex: 1 1 360px; }
.alertes-texte p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--gris); }
.alertes-form { flex: 1 1 560px; display: flex; gap: 10px; flex-wrap: wrap; }
.alertes-form select, .alertes-form input { height: 50px; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--fond); font: 500 15px var(--police); color: var(--texte); }
.alertes-form select { flex: 0 0 210px; font-weight: 600; }
.alertes-form input { flex: 1 1 220px; min-width: 0; }
.alertes-retour { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 500; color: var(--bleu-fonce); }
.section-confiance { padding: 24px 0 64px; }
.confiance { border-radius: 24px; background: var(--nuit); color: #fff; padding: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-items: start; }
.confiance-titre { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: var(--approche); }
.confiance a { color: var(--or); font-weight: 600; text-decoration: none; }
.confiance-item { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.confiance > div > p:not(.confiance-titre):not(.confiance-item) { margin: 0; font-size: 15px; line-height: 1.6; opacity: .78; }

/* pied */
/* clair, fondu dans la page ; en bas, l'aéroport au pied du Fuji (ciel transparent) devant le nom de la marque en grand,
   et les mentions dans un bandeau blanc posé sur la piste */
.pied { background: var(--fond); color: var(--gris); border-top: 1px solid var(--ligne); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; padding-top: 52px; padding-bottom: 12px; font-size: 14.5px; }
.pied-marque p { margin: 12px 0 0; max-width: 380px; line-height: 1.6; }
.pied-titre { margin: 0 0 10px; color: var(--texte); font-weight: 600; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--bleu-fonce); }
.pied-scene { position: relative; overflow: hidden; margin-top: 28px; }
.pied-dessin { position: relative; max-width: 1600px; margin: 0 auto; }
.pied-nom { position: absolute; left: 50%; top: 0; z-index: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none; user-select: none;
  font-size: min(12.5vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: #E2E9F6; }
.pied-illustration { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.pied-bas-cadre { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 22px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14); font-size: 13px; color: var(--gris); }
.pied-bas p { margin: 0; max-width: 900px; }
.pied-bas p:last-child { flex: none; font-weight: 600; color: var(--texte); }
@media (min-width: 1601px) {
  .pied-illustration { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
}

/* pages de texte et 404 */
.prose { padding: 56px 0 72px; }
.texte { max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--ligne); border-radius: 24px; padding: 44px 48px; }
.texte h1 { margin: 0 0 16px; font-size: 40px; line-height: 1.15; font-weight: 600; letter-spacing: var(--approche); }
.texte h2 { margin: 34px 0 10px; font-size: 24px; font-weight: 600; letter-spacing: var(--approche); }
.texte p, .texte li { font-size: 16.5px; line-height: 1.7; color: #334155; }
.texte .chapo { font-size: 19px; line-height: 1.6; color: var(--gris); }
.texte ul { padding-left: 20px; }
.texte li { margin-bottom: 8px; }
.maj { margin-top: 2.4em; font-size: 14px; color: var(--gris-clair) !important; }
.introuvable { padding: 96px 0; text-align: center; }
.introuvable h1 { margin: 0 0 12px; font-size: 40px; font-weight: 600; letter-spacing: var(--approche); }
.introuvable .chapo { margin: 0 0 24px; font-size: 18px; color: var(--gris); }

/* annonces (toast) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: min(560px, calc(100% - 32px)); background: var(--nuit); color: #fff; padding: 14px 18px; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); font-size: 15px; line-height: 1.5; }
.toast a { color: var(--bleu-clair); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- tablette */
@media (max-width: 1240px) {
  .nav-principale { display: none; }
  .burger { display: inline-flex; }
  .entete-actions { margin-left: auto; }
  .bande-cadre ul { flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
}
@media (max-width: 1080px) {
  .grille-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-duels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-regions-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .offre-rang-1 { order: -1; }
  .offre-premiere .offre-prix { padding: 0; }
  .calc-grille, .faq-grille { grid-template-columns: 1fr; gap: 28px; }
  .faq-grille { gap: 0; }
  .faq-intro { display: contents; }
  .faq-liste { order: 1; margin-top: 14px; }
  .faq-intro .encart { order: 2; margin-top: 22px; }
  .confiance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heros h1 { font-size: 46px; }
}
@media (max-width: 900px) {
  .grille-pays:not(.tout) .carte-pays:nth-child(n+13) { display: none; }
  .voir-plus { display: flex; }
  .grille-guides { grid-template-columns: 1fr; }
  .carte-guide { flex-direction: row; gap: 14px; }
  .carte-guide img { width: 132px; height: auto; min-height: 120px; flex: none; }
  .carte-guide > div { justify-content: center; }
  .etapes { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  .conteneur { padding: 0 14px; }
  .entete-ligne { flex-wrap: wrap; gap: 8px; min-height: 0; padding-top: 8px; padding-bottom: 12px; }
  .logo { font-size: 21px; order: 1; }
  .logo .symbole { width: 26px; height: 26px; }
  .entete-actions { order: 2; }
  .recherche-nav { order: 3; flex: 1 1 100%; max-width: none; }
  .choix-langue .sep, .choix-langue .code-devise { display: none; }
  .choix-langue summary { height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
  .heros { padding: 12px 12px 0; }
  .heros-cadre { min-height: 470px; border-radius: 22px; }
  .heros-contenu { padding: 36px 16px 64px; gap: 14px; }
  .heros h1 { font-size: 33px; line-height: 1.1; }
  .heros .chapo { display: none; }
  .pastille { font-size: 12.5px; padding: 6px 12px; }
  .recherche-grande { flex-wrap: wrap; padding: 8px; gap: 8px; border-radius: 16px; }
  .recherche-grande .loupe { margin-left: 12px; }
  .recherche-grande input { flex: 1 1 calc(100% - 60px); font-size: 17px; }
  .recherche-grande .bouton { flex: 1 1 100%; min-height: 52px; font-size: 16px; }
  .populaires > span { display: none; }
  .heros .puce-pays { height: 34px; font-size: 13px; gap: 6px; padding: 0 11px 0 5px; }
  .heros .puce-pays img { width: 22px; height: 22px; }
  .populaires .puce-pays:nth-of-type(n+4) { display: none; }
  .heros-bas { left: 14px; right: 14px; bottom: 14px; }
  .legende { padding: 0; background: none; font-size: 12.5px; }
  .legende img { display: none; }
  .fleche { display: none; }
  .bande-marques { padding-top: 14px; }
  .bande-cadre { padding: 14px 10px 12px; }
  .surtitre { font-size: 12px; text-align: center; }
  .bande-cadre ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; }
  .bande-cadre li { flex-direction: column; gap: 5px; font-size: 11.5px; }
  .bande-cadre img { width: 30px; height: 30px; border-radius: 8px; }
  .section { padding-top: 30px; }
  .section-serree { padding-top: 30px; }
  .section-blanche { padding: 32px 0; margin-top: 34px; }
  .section-blanche + .section { padding-top: 32px; }
  .section h2 { font-size: 26px; }
  .section .h2-petit { font-size: 22px; }
  .sous-titre { font-size: 14px; }
  .section-tete { margin-bottom: 14px; }
  .onglets { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onglets button { padding: 0; }
  .grille-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .carte-pays { height: 88px; border-radius: 14px; }
  .carte-pays .carte-contenu { padding: 10px 11px; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto 1fr; column-gap: 7px; align-items: center; }
  .carte-pays .drapeau { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
  .carte-pays .carte-nom { font-size: 15px; }
  .carte-pays.sans-prix .carte-contenu { grid-template-rows: 1fr; }
  .carte-pays .pastille-prix { grid-column: 1 / -1; align-self: end; justify-self: start; height: 26px; padding: 0 9px; font-size: 12.5px; }
  .grille-regions, .grille-regions-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .carte-region { height: 96px; border-radius: 14px; }
  .carte-region .carte-contenu { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 10px 11px; }
  .carte-region .carte-nom { font-size: 16px; }
  .carte-detail { font-size: 12px; }
  .carte-region.sans-prix .carte-contenu { justify-content: center; }
  .carte-region .pastille-prix { height: 26px; padding: 0 9px; font-size: 12.5px; }
  .monde-bloc { grid-template-columns: 1fr; }
  .podium { gap: 12px; }
  .offre { padding: 16px; gap: 12px; border-radius: 18px; }
  .prix-grand { font-size: 28px; }
  .grille-codes, .grille-duels { grid-template-columns: 1fr; gap: 10px; }
  .code-offre { min-height: 0; font-size: 17px; }
  .calc { padding: 16px; }
  .calc-resultat { flex-direction: column; align-items: stretch; }
  .calc-resultat .bouton { width: 100%; }
  .calc-grille { margin-bottom: 36px; }
  .carte-guide img { width: 104px; min-height: 112px; }
  .carte-guide > div { padding: 12px 12px 12px 0; gap: 5px; }
  .carte-guide h3 { font-size: 15.5px; }
  .carte-guide p:not(.guide-duree) { display: none; }
  .faq-item summary { font-size: 15.5px; padding: 14px 0; }
  .detail-long { display: none; }
  .detail-court { display: inline; }
  .faq-item p { font-size: 14.5px; }
  .alertes { padding: 18px 16px; gap: 14px; border-radius: 18px; }
  .alertes-form, .alertes-texte { flex: 1 1 100%; }
  .alertes-form select, .alertes-form input, .alertes-form .bouton { flex: 1 1 100%; }
  .section-confiance { padding: 16px 0 0; }
  .confiance { grid-template-columns: 1fr; padding: 22px 18px; gap: 14px; border-radius: 20px; }
  .confiance > div + div { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .pied { margin-top: 28px; }
  .pied-grille { padding-top: 28px; padding-bottom: 6px; gap: 22px; }
  /* téléphone : les mentions passent au-dessus du dessin, qui finit la page, cadré sur la pagode et le Fuji */
  .pied-scene { display: flex; flex-direction: column; }
  .pied-bas-cadre { position: static; order: -1; margin: 16px 0 6px; }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
  .pied-illustration { height: 220px; object-fit: cover; object-position: 18% bottom; }
  .pied-nom { font-size: 16.5vw; top: 4px; }
  .prose { padding: 24px 0 40px; }
  .texte { padding: 24px 18px; border-radius: 18px; }
  .texte h1 { font-size: 30px; }
  .texte h2 { font-size: 21px; }
  .introuvable { padding: 64px 0; }
  .introuvable h1 { font-size: 30px; }
}
/* ---------------------------------------------------------------- pages destination */
.dest-heros { padding: 20px 20px 0; }
.dest-cadre { position: relative; max-width: 1360px; margin: 0 auto; min-height: 340px; border-radius: 28px; overflow: hidden; display: flex; align-items: flex-end; background: var(--nuit); }
.dest-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-contenu { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 44px 40px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.fil a { color: #fff; text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.dest-contenu h1 { margin: 0; max-width: 820px; font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: var(--approche); }
.dest-contenu .chapo { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.dest-maj { margin: 0; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); font-size: 13.5px; font-weight: 600; }
.dest-maj .point-vert { background: #34D399; }
.dest-grille { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.voyage { position: sticky; top: 20px; background: #fff; }
.voyage-titre { margin: 0 0 4px; font-size: 22px !important; }
.classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ligne-offre { display: grid; grid-template-columns: 34px minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 16px 18px; }
.ligne-offre:first-child { border: 2px solid var(--bleu); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12); }
.rang-n { background: var(--fond); border: 1px solid var(--ligne); color: var(--gris); font-size: 14px; }
.lo-marque { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lo-marque img { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne); object-fit: contain; flex: none; }
.lo-nom { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 17px; font-weight: 600; }
.lo-reseau { margin: 2px 0 0; font-size: 13px; color: var(--gris); }
.lo-titre { margin: 0; font-size: 16px; font-weight: 600; }
.lo-detail { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--gris); }
.lo-prix { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.prix-ligne { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--bleu); white-space: nowrap; }
.lo-unite { font-size: 13px; font-weight: 500; color: var(--gris); white-space: nowrap; }
.ligne-offre .bouton { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.classement-vide { margin: 0; padding: 22px; background: #fff; border: 1px dashed var(--ligne); border-radius: 18px; color: var(--gris); }
.tous-forfaits { display: flex; flex-direction: column; gap: 10px; }
.bloc-fournisseur { border: 1px solid var(--ligne); border-radius: 16px; background: var(--fond); }
.bloc-fournisseur summary { list-style: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 30px; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; }
.bloc-fournisseur summary::-webkit-details-marker { display: none; }
.bloc-fournisseur summary img { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ligne); background: #fff; object-fit: contain; }
.bloc-fournisseur[open] .faq-signe::after { display: none; }
.bf-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 16.5px; font-weight: 600; }
.bf-info { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.bf-releve { font-size: 13px; color: var(--gris); white-space: nowrap; }
.bf-corps { padding: 0 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.table-forfaits { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; font-size: 14.5px; }
.table-forfaits th { text-align: left; padding: 10px 14px; background: var(--doux); color: var(--bleu-fonce); font-size: 13px; font-weight: 600; }
.table-forfaits td { padding: 9px 14px; border-top: 1px solid var(--ligne); }
.table-forfaits td:nth-child(3) { font-weight: 600; }
.table-forfaits td:nth-child(4) { color: var(--gris); }
.section-fin { padding-bottom: 72px; }
.autres-destinations { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--ligne); }
.autres-puces { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
a.puce-pays { text-decoration: none; }
a.puce-pays:hover { border-color: #CBD5E1; }
@media (max-width: 1240px) {
  .ligne-offre { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ligne-offre .bouton { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 1080px) {
  .dest-grille { grid-template-columns: 1fr; gap: 22px; }
  .voyage { position: static; }
}
@media (max-width: 640px) {
  .dest-heros { padding: 12px 12px 0; }
  .dest-cadre { min-height: 300px; border-radius: 22px; }
  .dest-contenu { padding: 18px 16px 22px; gap: 10px; }
  .dest-contenu h1 { font-size: 30px; }
  .dest-contenu .chapo { font-size: 15px; }
  .fil { font-size: 12.5px; }
  .dest-maj { font-size: 12.5px; padding: 6px 12px; }
  .ligne-offre { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; border-radius: 16px; }
  .ligne-offre .rang { width: 30px; height: 30px; font-size: 14px; }
  .lo-marque { grid-column: 2 / 3; }
  .lo-marque img { width: 36px; height: 36px; border-radius: 10px; }
  .lo-nom { font-size: 16px; }
  .lo-forfait { grid-column: 1 / 3; grid-row: 2; align-self: center; }
  .lo-prix { grid-column: 3; grid-row: 1; }
  .prix-ligne { font-size: 21px; }
  .ligne-offre .bouton { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; min-height: 40px; padding: 0 14px; font-size: 14px; }
  .voyage { padding: 16px; gap: 10px; }
  .voyage .calc-resultat { display: none; }            /* le titre du podium dit déjà le besoin */
  .voyage-titre { font-size: 19px !important; }
  .bloc-fournisseur summary { grid-template-columns: 32px minmax(0, 1fr) 30px; gap: 4px 10px; padding: 10px 12px; }
  .bloc-fournisseur summary img { width: 32px; height: 32px; grid-row: 1 / 3; }
  .bf-info { grid-column: 2; grid-row: 2; font-size: 13px; }
  .bf-releve { display: none; }
  .bloc-fournisseur .faq-signe { grid-column: 3; grid-row: 1 / 3; }
  .bf-corps { padding: 0 10px 12px; }
  .table-forfaits { font-size: 13px; }
  .table-forfaits th, .table-forfaits td { padding: 8px 8px; }
  .section-fin { padding-bottom: 40px; }
  .autres-destinations { margin-top: 32px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diapo { transition: none; }
}

/* page destination, nouveau gabarit : podium dans l'en-tête, filtres, liste, fournisseurs point par point, comparaison */
.dest-heros-v2 .dest-cadre { min-height: 470px; }
.dest-heros-v2 .dest-contenu { padding-bottom: 176px; }
.podium-tete { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.podium-tete h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: var(--approche); color: #fff; }
.podium-pour { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.84); }
.podium-zone { position: relative; z-index: 2; max-width: 1180px; margin: -150px auto 0; padding: 0 24px; }
/* la marche 1 prend toute la hauteur, les deux autres gardent la leur, posées sur la même ligne : la silhouette du logo */
.podium-pays { list-style: none; margin: 0; padding: 0; align-items: end; }
.podium-pays .marche-1 { order: 2; align-self: stretch; padding-top: 30px; }
.podium-pays .marche-2 { order: 1; }
.podium-pays .marche-3 { order: 3; }
.podium-pays .offre { box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14); }
.podium-pays .offre-premiere { box-shadow: 0 22px 48px rgba(37, 99, 235, 0.24); }
.podium-pays .offre .bouton { margin-top: auto; }
.podium-pays .offre-points li { align-items: flex-start; }
.podium-pays .offre-points svg { margin-top: 3px; }
.podium-vide { margin: 0; padding: 22px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; color: var(--gris); }
.podium-zone .mention { text-align: center; }
.badge-specialiste { display: inline-flex; align-items: center; width: max-content; max-width: 100%; margin: 4px 0 2px; padding: 3px 10px; border-radius: 999px;
  background: var(--doux); color: var(--bleu-fonce); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.comp-grille { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.filtres { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; background: #fff;
  border: 1px solid var(--ligne); border-radius: 20px; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 14px; }
.filtres-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filtres-tete h2 { margin: 0; font-size: 19px; }
.lien-bouton { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--bleu); cursor: pointer; }
.filtre { margin: 0; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.filtre legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.filtre output { font-size: 14px; font-weight: 600; color: var(--bleu-fonce); }
.filtre input[type="range"] { width: 100%; margin: 0; height: 28px; accent-color: var(--bleu); cursor: pointer; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-choix { position: relative; }
.puce-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.puce-choix span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne);
  background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.puce-choix input:checked + span { background: var(--doux); color: var(--bleu-fonce); border-color: #BFD0FB; }
.puce-choix input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.case { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; cursor: pointer; }
.case input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--bleu); }
.case img { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--ligne); object-fit: contain; }
.case .nb { margin-left: auto; font-size: 13px; color: var(--gris-clair); }
.note-filtre { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.calcul summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--bleu); }
.calcul summary::-webkit-details-marker { display: none; }
.calcul .usages { margin: 10px 0 0; }
.calcul-resultat { margin: 10px 0; font-size: 14px; font-weight: 600; }
.calcul .bouton { min-height: 40px; }
.filtres-pied { display: none; }
.resultats { min-width: 0; }
.resultats-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.compte { margin: 0; font-size: 17px; font-weight: 600; }
.resultats-actions { display: flex; align-items: center; gap: 10px; }
.tri { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.tri select { min-height: 42px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; font: inherit; font-size: 14.5px; color: var(--texte); cursor: pointer; }
.bouton-filtres { display: none; min-height: 42px; }
.liste-forfaits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.forfait { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, 0.85fr) auto; grid-template-areas: "marque forfait prix actions";
  align-items: center; gap: 16px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: 14px 16px; }
.fo-marque { grid-area: marque; display: flex; align-items: center; gap: 12px; min-width: 0; }
.fo-marque img { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--ligne); object-fit: contain; }
.fo-nom { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 600; }
.fo-medaille { width: 24px; height: 24px; font-size: 12.5px; }
.fo-forfait { grid-area: forfait; min-width: 0; }
.fo-titre { margin: 0; font-size: 15.5px; font-weight: 600; }
.fo-specs { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.45; color: var(--gris); }
.fo-prix { grid-area: prix; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.fo-unite { font-size: 13px; color: var(--gris); white-space: nowrap; }
.fo-actions { grid-area: actions; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.fo-actions .bouton { min-height: 42px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.fo-comparer { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; font-size: 13.5px; color: var(--gris); cursor: pointer; }
.fo-comparer input { margin: 0; width: 16px; height: 16px; accent-color: var(--bleu); }
.plus-forfaits { width: 100%; margin-top: 12px; }
.liste-vide { padding: 22px 24px; background: #fff; border: 1px dashed var(--ligne); border-radius: 18px; display: flex; align-items: center; gap: 20px; }
.liste-vide > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.liste-vide p { margin: 0; color: var(--gris); }

.tiroir { position: fixed; z-index: 30; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content;
  max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--nuit);
  color: #fff; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.32); }
.tiroir-texte { min-width: 0; font-size: 14px; }
.tiroir .bouton { min-height: 42px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; }
.tiroir-vider { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.tiroir .bouton-principal:disabled { opacity: 0.5; cursor: not-allowed; }
.dialogue { width: min(1040px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 22px; color: var(--texte); }
.dialogue::backdrop { background: rgba(15, 23, 42, 0.55); }
.dialogue-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  background: #fff; border-bottom: 1px solid var(--ligne); }
.dialogue-tete h2 { margin: 0; font-size: 22px; }
.dialogue-tete .bouton { min-height: 40px; }
.dialogue-corps { overflow-x: auto; padding: 4px 20px 20px; }
.table-comparaison { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.table-comparaison th, .table-comparaison td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ligne); }
.table-comparaison tbody th { width: 170px; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.table-comparaison .bouton { min-height: 42px; }
.dc-fournisseur { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.dc-fournisseur img { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--ligne); object-fit: contain; }
.dc-fournisseur > span { display: flex; flex-direction: column; align-items: flex-start; }
.np { color: var(--gris-clair); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sans-defilement { overflow: hidden; }

.matrice .np { white-space: nowrap; }
.matrice-zone { overflow-x: auto; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; }
.matrice { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 14px; }
.matrice th, .matrice td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ligne); }
.matrice tbody tr:last-child th, .matrice tbody tr:last-child td { border-bottom: 0; }
.matrice thead th { background: var(--doux); color: var(--bleu-fonce); font-size: 13px; font-weight: 600; white-space: nowrap; }
.matrice thead th:first-child { position: sticky; left: 0; z-index: 2; }
.matrice tbody th { position: sticky; left: 0; z-index: 1; min-width: 190px; background: #fff; font-weight: 600; }
.m-fournisseur { display: flex; align-items: center; gap: 10px; }
.m-fournisseur img { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ligne); object-fit: contain; }
.m-fournisseur > span { display: flex; flex-direction: column; align-items: flex-start; }
.m-des, .m-bascule { display: none; }
.matrice.repliable .m-bascule { display: block; position: absolute; inset: -14px -16px; width: calc(100% + 32px); background: transparent; border: 0; border-radius: 16px; cursor: pointer; }
.matrice.repliable .m-bascule::after { content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.matrice.repliable tr.ouvert .m-bascule { bottom: auto; height: calc(100% + 14px); }
.matrice.repliable tr.ouvert .m-bascule::after { transform: translateY(-30%) rotate(-135deg); }
.matrice.repliable .m-bascule:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

/* le podium selon la durée du séjour */
.onglets-sejour { display: flex; gap: 4px; width: max-content; max-width: 100%; margin-bottom: 16px; padding: 4px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; }
.onglet { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--gris); cursor: pointer; white-space: nowrap; }
.onglet[aria-selected="true"] { background: var(--bleu); color: #fff; }
.onglet:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.sejour-pour { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--gris); }
.minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr); grid-template-areas: "rang logo info" "prix prix prix" "bouton bouton bouton";
  align-items: center; gap: 10px 12px; padding: 16px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; }
.mini:first-child { border: 2px solid var(--bleu); }
.mini .rang { grid-area: rang; }
.mini-logo { grid-area: logo; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--ligne); object-fit: contain; }
.mini-info { grid-area: info; min-width: 0; }
.mini-cat { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.mini-nom { margin: 0; font-size: 16.5px; font-weight: 600; }
.mini-forfait { margin: 0; font-size: 13.5px; color: var(--gris); }
.mini .badge-specialiste { margin: 2px 0; }
.mini-prix { grid-area: prix; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mini-unite { font-size: 13px; color: var(--gris); white-space: nowrap; }
.mini-bouton { grid-area: bouton; min-height: 44px; }

/* les prix en chiffres */
.chiffres-pays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chiffre-carte { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; }
.chiffre-titre { margin: 0; font-size: 14px; font-weight: 600; color: var(--gris); }
.chiffre-valeur { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--bleu); font-variant-numeric: tabular-nums; }
.chiffre-detail { margin: 0; font-size: 14px; color: var(--gris); }
.barres-bloc { margin-top: 16px; padding: 20px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; }
.barres-titre { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.barres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.barre { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 160px); align-items: center; gap: 14px; }
.barre-nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; font-weight: 600; }
.barre-nom img { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--ligne); object-fit: contain; }
.barre-piste { height: 12px; overflow: hidden; border-radius: 999px; background: var(--doux); }
.barre-remplie { display: block; height: 100%; border-radius: 999px; background: var(--bleu); transition: width .3s ease; }
.barre:first-child .barre-remplie { background: var(--or); }
.barre-prix { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.barre-forfait { font-size: 12.5px; font-weight: 500; color: var(--gris); }
.note-barres { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gris); }
.faq-v2 .faq-intro .sous-titre { margin-bottom: 4px; }
@media (max-width: 1080px) { .chiffres-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .barre-remplie { transition: none; } }

@media (max-width: 1080px) {
  .comp-grille { grid-template-columns: 1fr; }
  .filtres { display: none; }
  .filtres-ouverts .filtres { display: flex; position: fixed; inset: 0; z-index: 50; max-height: none; border: 0; border-radius: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
  .filtres-pied { display: block; position: sticky; bottom: 0; margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--ligne); }
  .filtres-pied .bouton { width: 100%; }
  .bouton-filtres { display: inline-flex; }
  .forfait { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque prix" "forfait forfait" "actions actions"; gap: 10px 14px; }
  .fo-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .fo-actions .bouton { flex: 1; }
}
/* téléphone et petite tablette : la marche 1 en grand, les marches 2 et 3 en lignes compactes, l'une sous l'autre (pas de carrousel) */
@media (max-width: 860px) {
  .dest-heros-v2 .dest-cadre { min-height: 0; }
  .dest-heros-v2 .dest-contenu { padding-bottom: 26px; }
  .podium-zone { margin-top: 14px; padding: 0 14px; }
  .podium-pays { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin: 0 auto; }
  .podium-pays .offre { order: 0; align-self: stretch; padding: 16px; gap: 12px; border-radius: 18px; }
  .podium-pays .marche-1 { padding-top: 16px; }
  .podium-pays .offre-premiere .offre-prix { padding: 2px 0; }
  .podium-pays .marche-2, .podium-pays .marche-3 { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tete tete" "marque prix" "bouton bouton"; align-items: center; gap: 10px 12px; }
  .podium-pays .marche-2 .offre-tete, .podium-pays .marche-3 .offre-tete { grid-area: tete; }
  .podium-pays .marche-2 .offre-marque, .podium-pays .marche-3 .offre-marque { grid-area: marque; min-width: 0; }
  .podium-pays .marche-2 .offre-nom, .podium-pays .marche-3 .offre-nom { font-size: 18px; }
  .podium-pays .marche-2 .offre-prix, .podium-pays .marche-3 .offre-prix { grid-area: prix; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .podium-pays .marche-2 .prix-grand, .podium-pays .marche-3 .prix-grand { font-size: 24px; }
  .podium-pays .marche-2 .offre-points, .podium-pays .marche-3 .offre-points { display: none; }
  .podium-pays .marche-2 .bouton, .podium-pays .marche-3 .bouton { grid-area: bouton; margin-top: 0; min-height: 44px; }
  .minis { grid-template-columns: 1fr; }
  .mini { grid-template-columns: 30px 40px minmax(0, 1fr) auto; grid-template-areas: "rang logo info prix" "bouton bouton bouton bouton"; }
  .mini-prix { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
}
@media (max-width: 760px) {
  /* les fournisseurs point par point : une fiche par fournisseur */
  .matrice-zone { overflow: visible; background: none; border: 0; border-radius: 0; }
  .matrice { display: block; min-width: 0; }
  .matrice thead { display: none; }
  .matrice tbody { display: flex; flex-direction: column; gap: 10px; }
  .matrice tr { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--ligne); border-radius: 16px; }
  .matrice tbody th { display: block; position: static; min-width: 0; padding: 0 0 10px; border: 0; }
  .matrice td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 8px 0; border: 0; border-top: 1px solid var(--ligne); }
  .matrice td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--gris); }
  .matrice .np { white-space: normal; }
  .matrice .m-des { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--gris); }
  .matrice.repliable tbody th { position: relative; padding: 0 34px 0 0; }
  .matrice.repliable tr.ouvert th { padding-bottom: 10px; }
  .matrice.repliable tr:not(.ouvert) td { display: none; }
}
@media (max-width: 640px) {
  .podium-tete h2 { font-size: 21px; }
  .resultats-actions { width: 100%; justify-content: space-between; }
  .resultats-tete { position: sticky; top: 0; z-index: 6; margin: 0 -14px 12px; padding: 10px 14px; background: var(--fond); border-bottom: 1px solid var(--ligne); }
  .fo-comparer, .case, .puce-choix span { min-height: 44px; }
  .filtre input[type="range"] { height: 40px; }
  .onglets-sejour { width: 100%; }
  .onglet { flex: 1; padding: 0 6px; font-size: 13.5px; }
  .chiffres-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chiffre-carte { padding: 14px; }
  .chiffre-valeur { font-size: 24px; }
  .chiffre-titre, .chiffre-detail { font-size: 13px; }
  .barres-bloc { padding: 16px; }
  .barre { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom prix" "piste piste"; gap: 6px 10px; }
  .barre-nom { grid-area: nom; }
  .barre-prix { grid-area: prix; }
  .barre-piste { grid-area: piste; }
  /* la comparaison en plein écran, libellés au-dessus des valeurs */
  .dialogue { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  .dialogue-tete { padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; }
  .dialogue-corps { padding: 0 6px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .table-comparaison.etroite { min-width: 0; table-layout: fixed; }
  .table-comparaison.etroite thead th { padding: 12px 8px; vertical-align: bottom; }
  .table-comparaison.etroite .dc-libelle th { padding: 12px 8px 2px; border-bottom: 0; font-size: 12.5px; font-weight: 600; color: var(--gris); }
  .table-comparaison.etroite td { padding: 2px 8px 12px; font-size: 14px; overflow-wrap: anywhere; }
  .table-comparaison.etroite .dc-fournisseur { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; }
  .table-comparaison.etroite .prix-ligne { font-size: 19px; }
  .table-comparaison.etroite .bouton { width: 100%; min-height: 44px; padding: 0 6px; font-size: 14px; }
  .tri span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tiroir { left: 14px; right: 14px; width: auto; transform: none; }
  .tiroir-texte { flex: 1; }
}

/* ---------------------------------------------------------------- l'« âme » (20/10) : l'hirondelle, les stickers au feutre, deux fonds
   Tout est décoratif et ne passe jamais sur un texte : un titre garde sa marge pour son sticker, la mascotte se pose à côté. */
.mascotte, .sticker-titre { pointer-events: none; user-select: none; -webkit-user-select: none; }
.avec-sticker { position: relative; }
.avec-sticker > div:first-child { padding-right: 140px; }
.sticker-titre { position: absolute; right: 0; top: -16px; width: auto; height: 96px; max-width: 124px; object-fit: contain;
  transform: rotate(7deg); filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.18)); }
.sticker-titre.penche-g { transform: rotate(-7deg); }
/* topographie claire tout en haut des pages à photo d'en-tête : autour de la photo et du podium, puis fondue dans le fond (retour
   d'Arthur, 20/10 : posée sur la deuxième section, elle faisait une barrière) ; carte du monde sur une bande nuit */
main:has(> .dest-heros, > .heros) { position: relative; --topo-net: 520px; --topo-fin: 980px; --topo-img: url(/img/ame/fond-topo.webp); --topo-taille: max(1500px, 100%) auto; }
/* dans un pseudo-élément, sous le contenu : un fond décoratif n'est pas « le plus grand élément » de l'écran (LCP), la photo l'est */
main:has(> .dest-heros, > .heros)::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--topo-fin); pointer-events: none;
  background: linear-gradient(to bottom, rgba(246, 248, 252, 0) 0, rgba(246, 248, 252, 0) var(--topo-net), var(--fond) var(--topo-fin)),
    var(--topo-img) center top / var(--topo-taille) no-repeat; }
.section-nuit { background: var(--nuit) url(/img/ame/fond-carte.webp) center 170px / max(1500px, 100%) auto no-repeat; padding-bottom: 64px; }
.section-nuit + .section-blanche { margin-top: 0; border-top: 0; }
.section-nuit .section-tete h2 { color: #fff; }
.section-nuit .sous-titre { color: rgba(255, 255, 255, 0.78); }
.section-nuit .chiffre-carte, .section-nuit .barres-bloc { border-color: transparent; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
/* la mascotte : à droite de l'en-tête sur grand écran, posée sur la marche 1 sur téléphone */
.mascotte-heros { position: absolute; right: 6%; bottom: 184px; z-index: 1; width: auto; height: 160px; filter: drop-shadow(0 16px 24px rgba(8, 12, 24, 0.38)); }
.mascotte-marche { display: none; }
.mascotte-faq { display: block; width: auto; height: 150px; margin: 28px 0 0 26px; filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.16)); }
.mascotte-vide { flex: none; width: auto; height: 110px; }
.mascotte-perdu { display: block; width: auto; height: 170px; margin: 0 auto 18px; }
@media (max-width: 1099px) {
  .mascotte-heros { display: none; }
}
@media (max-width: 1080px) {
  .mascotte-faq { order: 3; height: 112px; margin: 24px 0 0 6px; }
}
@media (max-width: 860px) {
  .mascotte-marche { display: block; position: absolute; right: 24px; top: -60px; z-index: 3; width: auto; height: 74px;
    filter: drop-shadow(0 8px 12px rgba(8, 12, 24, 0.3)); }
  .section-nuit { background-position: center 230px; background-size: 900px auto; padding-bottom: 40px; }
}
@media (max-width: 640px) {
  main:has(> .dest-heros, > .heros) { --topo-net: 380px; --topo-fin: 820px; --topo-img: url(/img/ame/fond-topo-1000.webp); --topo-taille: 1000px auto; }
  .avec-sticker > div:first-child { padding-right: 84px; }
  .sticker-titre { top: -6px; right: 2px; height: 62px; max-width: 76px; }
  .mascotte-vide { height: 84px; }
  .liste-vide { gap: 14px; padding: 18px; }
  .mascotte-perdu { height: 130px; }
}

/* ---------------------------------------------------------------- fiches fournisseur (21/10)
   En-tête nuit sur la carte du monde en points (un fournisseur ne s'illustre pas par une photo), chiffres clés posés sur son bord
   comme le podium des pages pays ; puis ses podiums, ses pays, ses prix, ce qu'il annonce. Mêmes fonds et même alternance. */
/* la topographie derrière l'en-tête, fondue plus tôt que sur les pages pays (l'en-tête est plus court) : jamais posée sur une section */
main:has(> .fiche-heros) { --topo-net: 300px; --topo-fin: 600px; }
.fiche-heros .dest-cadre { min-height: 0; background: var(--nuit) url(/img/ame/fond-carte.webp) center 38% / max(1500px, 100%) auto no-repeat; }
.fiche-heros .dest-contenu { padding-top: 30px; padding-bottom: 116px; }
.fiche-heros .dest-cadre::before { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); }   /* voile uni : le texte d'abord */
.fiche-titre { display: flex; align-items: center; gap: 18px; }
.fiche-titre h1 { max-width: 640px; }
.fiche-heros .chapo { max-width: 640px; }
.fiche-logo { flex: none; display: flex; width: 76px; height: 76px; padding: 9px; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.fiche-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.fiche-actions .dest-maj { align-self: center; }
.fiche-mention { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.fiche-chiffres { position: relative; z-index: 2; max-width: 1180px; margin: -78px auto 0; padding: 0 24px; }
.fiche-chiffres .chiffre-carte { box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14); }
.mascotte-fiche { position: absolute; right: 8%; bottom: 104px; z-index: 1; width: auto; height: 170px; filter: drop-shadow(0 16px 24px rgba(8, 12, 24, 0.38)); }
.fiche-bref { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fiche-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fiche-carte { min-width: 0; padding: 20px 22px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; }
.fiche-carte h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.fiche-podiums .mention { margin-top: 12px; }
.podiums-zone { overflow-x: auto; }
.podiums-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.podiums-table th, .podiums-table td { padding: 14px 10px; text-align: center; border-bottom: 1px solid var(--ligne); }
.podiums-table thead th { padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.podiums-table thead th:first-child, .podiums-table tbody th { padding-left: 0; text-align: left; }
.podiums-table tbody th { font-weight: 600; }
.podiums-table tbody tr:last-child > * { border-bottom: 0; }
.pm-n { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--bleu); font-variant-numeric: tabular-nums; }
.pm-u { font-size: 12.5px; color: var(--gris); }
.podiums-aucun { margin: 0; color: var(--gris); }
.fiche-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fiche-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.fiche-points svg { flex: none; margin-top: 2px; }
.fiche-points.forts svg { color: #16A34A; }
.fiche-points.a-savoir svg { color: var(--bleu); }
.matrice-pays { min-width: 1120px; }
.matrice .m-drapeau { border: 0; border-radius: 50%; object-fit: cover; }
.matrice th a { color: inherit; text-decoration: none; }
.matrice th a:hover { color: var(--bleu-fonce); text-decoration: underline; }
/* sur téléphone, le nom déplie la fiche ; le lien (page pays, fiche du fournisseur) est alors dans la fiche dépliée */
.matrice td.m-seul-mobile { display: none; }
.m-sous { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--gris); }
.matrice-pays .m-forfait { white-space: nowrap; }
.medailles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.medailles li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 999px; background: var(--fond);
  border: 1px solid var(--ligne); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.medailles .rang { width: 22px; height: 22px; font-size: 12px; }
.barre-nom img.barre-drapeau { border: 0; border-radius: 50%; object-fit: cover; }
/* cartes de hauteurs différentes (une liste de paliers, une répartition par pays) : en colonnes, sans carte étirée à moitié vide */
.conditions { columns: 3; column-gap: 12px; margin: 0; }
.condition { break-inside: avoid; margin: 0 0 12px; padding: 16px 18px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 16px; }
.condition .rep { display: block; }
.condition .rep + .rep { margin-top: 4px; }
.condition dt { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.condition dd { margin: 0; font-size: 15px; line-height: 1.5; }
.paliers { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.palier-n { color: var(--gris); }
a.puce-fournisseur img { border-radius: 7px; object-fit: contain; }
@media (max-width: 1099px) { .mascotte-fiche { display: none; } }
@media (max-width: 1080px) {
  .fiche-bref { grid-template-columns: 1fr; }
  .conditions { columns: 2; }
}
@media (max-width: 860px) {
  .fiche-heros .dest-contenu { padding-bottom: 26px; }
  .fiche-chiffres { margin-top: 14px; padding: 0 14px; }
}
@media (max-width: 640px) {
  .fiche-heros .dest-contenu { padding-top: 18px; }
  .fiche-titre { gap: 12px; }
  .fiche-logo { width: 58px; height: 58px; padding: 7px; border-radius: 16px; }
  .fiche-logo img { border-radius: 9px; }
  .fiche-carte { padding: 16px; }
  .podiums-table th, .podiums-table td { padding: 10px 5px; }
  .podiums-table thead th { font-size: 12px; white-space: normal; }
  .podiums-table tbody th { font-size: 13.5px; }
  .pm-n { font-size: 21px; }
  .pm-u { font-size: 11.5px; }
  .conditions { columns: 1; }
  .condition { padding: 14px 16px; }
}
@media (max-width: 760px) {
  .matrice-pays { min-width: 0; }
  .matrice-pays .m-forfait { white-space: normal; }
  .matrice td.m-seul-mobile { display: block; padding: 10px 0 2px; border-top: 1px solid var(--ligne); }
  .matrice td.m-seul-mobile::before { content: none; }
  .matrice td.m-seul-mobile a { font-weight: 600; }
  .matrice.repliable tr:not(.ouvert) td.m-seul-mobile { display: none; }
}
@media (max-width: 640px) {
  main:has(> .fiche-heros) { --topo-net: 300px; --topo-fin: 640px; }
}

/* accueil : le podium du moment sur une bande nuit (les vrais podiums des pages pays, 21/10) */
.section-podium { margin-top: 64px; }
.section-podium .puces-podium { margin: 0 0 22px; }
.section-nuit .puce-pays.active { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.section-nuit .mention { color: rgba(255, 255, 255, 0.74); }
.section-nuit .mention a { color: #fff; }
.section-podium .lien-podium { font-weight: 600; }
.podium-accueil { max-width: 1180px; margin: 0 auto; }
@media (max-width: 640px) {
  .section-podium { margin-top: 40px; }
  .section-podium .puces-podium { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 18px; padding: 0 14px 4px; scrollbar-width: none; }
  .section-podium .puces-podium::-webkit-scrollbar { display: none; }
  .section-podium .puces-podium .puce-pays { flex: none; }
}

/* pages régionales (21/10) : en-tête sur la carte du monde (comme les fiches), podium posé sur son bord (comme les pays), « Vos pays » */
.region-heros .dest-cadre { min-height: 470px; }
.region-heros .dest-contenu { padding-bottom: 176px; }
main:has(> .region-heros) { --topo-net: 520px; --topo-fin: 980px; }
.podium-pays-choisis { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: #fff; }
.offre-couverture { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--bleu-fonce); }
.filtre-pays input[type="text"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff;
  font: inherit; font-size: 15px; color: var(--texte); }
.filtre-pays input[type="text"]:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.pays-choisis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pays-choisis:empty { display: none; }
.pays-choisis li { display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--doux);
  color: var(--bleu-fonce); font-size: 14px; font-weight: 600; }
.retirer-pays { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 600 18px/1 var(--police); cursor: pointer; }
.retirer-pays:hover { background: #fff; }
.pays-message { color: var(--bleu-fonce); }
.matrice-produits { min-width: 1080px; }
.m-fort { display: block; font-weight: 700; }
.pays-produit { margin-top: 4px; }
.pays-produit summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bleu-fonce); }
.pays-produit p { margin: 6px 0 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.pays-cles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.pays-cles .oui > span:first-child { color: #15803D; font-weight: 700; }
.pays-cles .non { color: var(--gris); }
a.puce-region { padding-left: 14px; }
a.carte-region { text-decoration: none; }
a.carte-region:hover .voile { background: rgba(8, 12, 24, 0.34); }
@media (max-width: 860px) {
  .region-heros .dest-cadre { min-height: 0; }
  .region-heros .dest-contenu { padding-bottom: 26px; }
}
@media (max-width: 760px) { .matrice-produits { min-width: 0; } }
@media (max-width: 640px) {
  main:has(> .region-heros) { --topo-net: 380px; --topo-fin: 820px; }
  .pays-produit p { max-width: none; }
}

/* ---------------------------------------------------------------- tableaux de données (guides, fiches) : sur téléphone, les tableaux de
   conditions s'empilent par fournisseur, chaque valeur avec son titre de colonne */
.table-zone { margin: 14px 0 10px; overflow-x: auto; }
.table-zone:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 12px; }
.table-donnees { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ligne); border-radius: 12px;
  font-size: 14.5px; line-height: 1.45; }
.table-donnees th { text-align: left; padding: 10px 12px; background: var(--doux); color: var(--bleu-fonce); font-size: 13px; font-weight: 600; vertical-align: bottom; }
.table-donnees thead th:first-child { border-top-left-radius: 11px; }
.table-donnees thead th:last-child { border-top-right-radius: 11px; }
.table-donnees td, .table-donnees tbody th { padding: 9px 12px; border-top: 1px solid var(--ligne); vertical-align: top; text-align: left; }
.table-donnees tbody th { background: none; color: var(--texte); font-size: 14.5px; font-weight: 600; }
.table-donnees .prix { font-weight: 600; }
.table-detail { display: block; font-size: 12.5px; font-weight: 400; color: var(--gris); }
a.carte-guide { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.carte-guide:hover { border-color: var(--bleu); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
a.carte-guide:hover h3 { color: var(--bleu-fonce); }
@media (max-width: 640px) {
  .table-donnees { font-size: 13.5px; }
  .table-donnees th, .table-donnees td, .table-donnees tbody th { padding: 8px; }
  .table-donnees.empile thead { display: none; }
  .table-donnees.empile, .table-donnees.empile tbody, .table-donnees.empile tr, .table-donnees.empile th, .table-donnees.empile td { display: block; }
  .table-donnees.empile tr { padding: 10px 12px; border-top: 1px solid var(--ligne); }
  .table-donnees.empile tr:first-child { border-top: 0; }
  .table-donnees.empile tbody th, .table-donnees.empile td { padding: 2px 0; border-top: 0; }
  .table-donnees.empile tbody th { padding-bottom: 4px; }
  .table-donnees.empile td::before { content: attr(data-titre) ": "; color: var(--gris); font-weight: 500; }
  :lang(fr) .table-donnees.empile td::before { content: attr(data-titre) "\00a0: "; }
}

/* ---------------------------------------------------------------- guides (21/10 au soir, refonte) : l'en-tête photo des pages pays avec la
   mascotte du guide et 3 chiffres posés sur son bord, un sommaire, un outil interactif, des infographies et des classements tirés de nos
   données, des encadrés, la FAQ et l'appel final. Rien n'est posé sur un texte ; la mascotte se cache sur téléphone (elle revient à la fin). */
.guide-heros .dest-cadre { min-height: 450px; }
.guide-heros .dest-contenu { padding-bottom: 132px; }
.guide-heros .dest-contenu h1 { max-width: 780px; }
.guide-pastille { margin: 0; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 14px; font-weight: 600;
  color: rgba(255, 255, 255, 0.9); }
.guide-etiquette { padding: 4px 10px; border-radius: 8px; background: var(--bleu); color: #fff; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.mascotte-guide { bottom: 142px; height: 176px; }
.guide-essentiel { position: relative; z-index: 2; max-width: 1180px; margin: -100px auto 0; padding: 0 24px; }
.chiffres-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chiffres-guide:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 18px; }
.chiffres-guide .chiffre-carte, .chiffres-trois .chiffre-carte { padding: 20px 22px; border-color: transparent; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14); }
.chiffres-guide .chiffre-valeur { font-size: 32px; }
.guide-sommaire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.sommaire-titre { flex: none; margin-right: 6px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--gris); }
.guide-sommaire a { padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); color: var(--texte); font-size: 14.5px;
  font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
.guide-sommaire a:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.guide-bloc { scroll-margin-top: 80px; }
.guide-note { margin: 16px 0 0; max-width: 860px; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.guide-intro { margin: 0 0 20px; max-width: 900px; font-size: 17px; line-height: 1.65; }
.section-nuit .guide-intro { color: rgba(255, 255, 255, 0.86); }
/* l'outil : réglages à gauche, résultat à droite (bande nuit sur la carte du monde) */
.outil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
.outil-reglages { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 22px; }
.reglage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.reglage-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reglage-titre { margin: 0; font-size: 15px; font-weight: 600; }
.reglage-valeur { font-size: 15px; font-weight: 700; color: var(--bleu-fonce); }
.reglage select, .reglage input[type="date"] { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff;
  font: 500 15.5px var(--police); color: var(--texte); }
.reglage input[type="range"] { width: 100%; accent-color: var(--bleu); }
.usage-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--ligne); }
.usage-nom { margin: 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 600; }
.usage-nom small { font-size: 12.5px; font-weight: 400; color: var(--gris); }
.niveaux { display: inline-flex; gap: 3px; padding: 3px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; }
.niveau { min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: 600 13.5px var(--police); color: var(--gris); cursor: pointer; }
.niveau[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.niveau:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.outil-resultat { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 22px; color: #fff;
  background: linear-gradient(rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.78)), url(/img/ame/fond-carte.webp) center / 1000px auto no-repeat, var(--nuit); }
.resultat-titre { margin: 0; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.resultat-valeur { margin: 0; font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.resultat-detail { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.78); }
.conso-barre { display: flex; height: 14px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.conso-segment { display: block; height: 100%; background: var(--c); transition: width .25s ease; }
.conso-cartes { --c: #DCE6FD; } .conso-reseaux { --c: #9DB9F8; } .conso-video { --c: #5B8DEF; } .conso-partage { --c: #2F6BEA; }
.conso-legende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px;
  font-size: 14px; color: rgba(255, 255, 255, 0.86); }
.conso-legende li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conso-legende b { margin-left: auto; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pastille-conso { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.resultat-conseil { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); font-size: 15px; font-weight: 600; }
/* les meilleures offres du voyage : les marches du podium des pages pays */
.outil-offres { margin-top: 40px; }
.offres-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.offres-tete h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: var(--approche); }
.offres-pour { margin: 4px 0 0; font-size: 15px; color: var(--gris); }
.reglage-pays { min-width: 260px; }
.podium-guide { transition: opacity .2s; }
.podium-guide[aria-busy="true"] { opacity: .45; }
.offres-etat { margin: 12px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--fond); color: var(--gris); }
.offres-tous { margin: 22px 0 0; }
/* le duel illimité / forfait data */
.outil-duel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.duel-besoin { margin: 0; font-size: 16px; font-weight: 600; color: var(--gris); }
.duel-cartes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.duel-carte { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; }
.duel-illimite { border: 2px solid var(--bleu); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.14); }
.duel-titre { margin: 0; font-size: 14px; font-weight: 600; color: var(--gris); }
.duel-condition { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.duel-carte .bouton { margin-top: auto; width: 100%; }
.duel-vide { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.duel-ou { align-self: center; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--doux); color: var(--bleu-fonce); font-weight: 700; }
.duel-verdict { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--nuit); color: #fff; font-size: 17px; font-weight: 600; line-height: 1.45; }
.duel-verdict:empty { display: none; }
/* le calendrier d'activation : une frise de 5 étapes */
.outil-calendrier { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.outil-calendrier-resultat { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.outil-calendrier-resultat > .bouton { align-self: flex-start; }
.calendrier { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.calendrier::before { content: ''; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 2px; background: var(--doux); }
.cal-etape { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.cal-point { position: relative; z-index: 1; width: 32px; height: 32px; margin-top: 10px; border-radius: 50%; background: #fff; border: 3px solid var(--bleu);
  box-shadow: 0 0 0 5px #fff; }
.cal-activation .cal-point { background: var(--bleu); }
.cal-identite .cal-point { border-color: var(--bleu-clair); }
.cal-etape > div { padding: 14px 18px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 16px; }
.cal-etape h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cal-etape p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.cal-sans-type { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--fond); color: var(--gris); }
/* infographies et encadrés */
.reperes-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.reperes { list-style: none; margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--ligne); border-radius: 22px; }
.repere { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: center; }
.repere + .repere { padding-top: 18px; border-top: 1px solid var(--ligne); }
.repere-nom { margin: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 600; }
.repere-nom small { font-size: 13px; font-weight: 400; color: var(--gris); }
.repere-barres { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.repere-ligne { display: grid; grid-template-columns: 80px minmax(0, 1fr) 104px; align-items: center; gap: 10px; font-size: 13.5px; }
.repere-niveau { color: var(--gris); }
.repere-valeur { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.repere-piste { height: 12px; overflow: hidden; border-radius: 999px; background: var(--doux); }
.repere-remplie { display: block; height: 100%; border-radius: 999px; }
.repere-r_un_peu { background: var(--bleu-clair); }
.repere-r_beaucoup { background: var(--bleu); }
.encadre { padding: 20px 22px; border-radius: 20px; background: var(--doux); border: 1px solid #D6E2FD; }
.encadre-titre { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--bleu-fonce); }
.encadre p:not(.encadre-titre) { margin: 0; font-size: 15px; line-height: 1.6; }
.table-durees { font-size: 15.5px; }
.table-durees td, .table-durees tbody th { padding: 14px 16px; }
.cellule-go { font-weight: 700; font-variant-numeric: tabular-nums; }
.cellule-illimite { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--doux); color: var(--bleu-fonce); font-size: 13px; font-weight: 700; }
.chiffres-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.table-bloc .table-zone { margin: 0; }
.barres-debit .barre-sans .barre-remplie { background: var(--or); }
.barres-debit .barre-prix { font-size: 14.5px; }
/* classements : les meilleures eSIM du guide */
.classement { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.classement-carte { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; }
.section-blanche .classement-carte { background: var(--fond); }
.classement-tete { display: flex; align-items: center; gap: 12px; }
.classement-tete img { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne); background: #fff; object-fit: contain; }
.classement-nom { margin: 0; font-size: 19px; font-weight: 600; }
.classement-corps { display: flex; flex-direction: column; gap: 4px; }
.classement-chiffre { margin: 0; font-size: 17px; font-weight: 700; color: var(--bleu-fonce); }
.classement-detail { margin: 0; font-size: 14px; color: var(--gris); }
.classement-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.classement-actions .bouton { flex: 1 1 auto; min-height: 44px; font-size: 14.5px; }
.badges-regles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge-regle { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.badge-oui { background: #E7F8EF; color: #11643E; }
.badge-neutre { background: var(--doux); color: var(--bleu-fonce); }
.badge-attention { background: #FDECEC; color: #9F1D1D; }
/* conseils, étapes, pièges */
.conseils { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.conseils li { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; }
.section-blanche .conseils li { background: var(--fond); }
.conseil-n { width: 38px; height: 38px; border-radius: 12px; background: var(--doux); color: var(--bleu-fonce); display: flex; align-items: center;
  justify-content: center; font-size: 17px; font-weight: 700; }
.conseils h3 { margin: 0; font-size: 17px; font-weight: 600; }
.conseils p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.etapes-guide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pieges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 980px; }
.pieges li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid #F3D4D4; border-radius: 18px; }
.piege-signe { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #FDECEC;
  color: #B42318; font-weight: 800; }
.pieges p { margin: 0; font-size: 15.5px; line-height: 1.55; }
/* l'appel final */
.guide-fin { padding: 64px 0 72px; }
.fin-carte { display: flex; align-items: center; gap: 28px; padding: 34px 40px; border-radius: 28px; color: #fff;
  background: linear-gradient(90deg, var(--nuit) 35%, rgba(15, 23, 42, 0.45) 100%), url(/img/ame/fond-carte.webp) right -160px center / 1100px auto no-repeat, var(--nuit); }
.fin-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fin-texte h2 { margin: 0; color: #fff; }
.fin-texte > p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, 0.82); }
.mascotte-fin { order: 2; flex: none; width: auto; height: 150px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35)); }
.guide-fin .autres-titre { margin: 52px 0 18px; }
/* une section claire posée juste avant une bande nuit garde son espace */
.guide-bloc:not(.section-blanche):not(.section-nuit) + .section-nuit { margin-top: 64px; }
@media (min-width: 761px) { .barres-debit .barre { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 230px); } }
.grille-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .outil, .outil-calendrier { grid-template-columns: 1fr; }
  .outil-resultat { position: static; }
  .classement { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conseils, .etapes-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes-grille { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .guide-heros .dest-cadre { min-height: 0; }
  .guide-heros .dest-contenu { padding-bottom: 110px; }
  .duel-cartes { grid-template-columns: 1fr; }
  .duel-ou { justify-self: center; }
  .pieges, .grille-autres { grid-template-columns: 1fr; }
  .fin-carte { flex-direction: column; align-items: stretch; padding: 26px 20px; }
  .mascotte-fin { order: 0; align-self: center; height: 112px; }
  .chiffres-trois { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .guide-heros .dest-contenu { padding-bottom: 96px; }
  .guide-essentiel { margin-top: -78px; padding: 0 12px; }
  /* les 3 chiffres défilent sur une ligne (le premier en entier, le suivant qui dépasse invite à glisser) */
  .chiffres-guide { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .chiffres-guide .chiffre-carte { flex: 0 0 80%; scroll-snap-align: start; padding: 14px 16px; }
  .chiffres-guide .chiffre-valeur { font-size: 26px; }
  .guide-sommaire { flex-wrap: nowrap; overflow-x: auto; margin-top: 22px; padding-bottom: 4px; scrollbar-width: none; }
  .guide-sommaire a { flex: none; }
  .outil-reglages, .outil-resultat { padding: 18px; }
  .resultat-valeur { font-size: 46px; }
  .conso-legende { grid-template-columns: minmax(0, 1fr); }
  .table-durees { font-size: 14px; }
  .table-durees td, .table-durees tbody th { padding: 10px 8px; }
  .usage-ligne { grid-template-columns: 1fr; gap: 8px; }
  .niveaux { width: 100%; }
  .niveau { flex: 1; padding: 0 6px; }
  .reglage-pays { min-width: 0; width: 100%; }
  .classement, .conseils, .etapes-guide { grid-template-columns: 1fr; }
  .repere { grid-template-columns: 1fr; gap: 8px; }
  .repere-ligne { grid-template-columns: 58px minmax(0, 1fr) 108px; }
  .repere-valeur { font-size: 12.5px; white-space: nowrap; }
  .guide-fin { padding: 40px 0 48px; }
}
}

/* téléphones (21/10, test 360) : la source sous la date, les puces sans image, le filtre et les marques de la liste */
.tel-maj { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tel-source { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.tel-source a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.puce-texte { padding: 0 14px; }
.puce-forte { background: var(--doux); color: var(--bleu-fonce); border-color: #BFD0FB; }
.tel-filtre { max-width: 520px; margin: 0 0 28px; }
.tel-filtre input { width: 100%; height: 48px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--ligne); border-radius: 12px; font: 500 16px var(--police); background: #fff; color: var(--texte); }
.tel-filtre input:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.tel-marques { display: grid; gap: 36px; }
.tel-marque h3 { margin: 0 0 12px; font-size: 20px; }
.tel-marque h3 a { color: inherit; text-decoration: none; }
.tel-marque h3 a:hover { color: var(--bleu); }
.table-tel th a { color: var(--texte); text-decoration: none; font-weight: 600; }
.table-tel th a:hover { color: var(--bleu); text-decoration: underline; }

/* Refonte des pages liées à une destination (22/10) : logo dans l'en-tête, introduction, chiffres, bouton de ligne, cartes des destinations */
.heros-logo { display: inline-flex; align-items: center; align-self: flex-start; margin: 0; padding: 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(8, 12, 24, 0.25); }
.heros-logo img { display: block; height: 38px; width: auto; max-width: 200px; }
.dest-maj a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* le verdict des pages opérateur × destination */
.verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.verdicts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.verdicts-1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.verdict-carte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08); }
.verdict-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.verdict-situation { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--gris); }
.verdict-logo { flex: none; height: 32px; width: auto; max-width: 96px; object-fit: contain; }
.verdict-reponse { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--texte); }
.verdict-esim .verdict-reponse { color: var(--bleu); }
.verdict-texte { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--gris); }
.verdict-carte .bouton { margin-top: auto; }
.verdict-esim { border: 2px solid var(--bleu); }
.verdicts + .mention { margin-top: 12px; }
@media (max-width: 900px) { .verdicts, .verdicts-2 { grid-template-columns: minmax(0, 1fr); } .verdict-reponse { font-size: 24px; } }
.section-intro { max-width: 70ch; margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--texte); }
.chiffres-section { margin: 0 0 22px; }
.bouton-ligne { min-height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.grille-pays-op { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .grille-pays-op { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* page de chaque opérateur : où Internet est inclus */
.zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.zones-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zones-1 { grid-template-columns: minmax(0, 1fr); }
.zone-carte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06); }
.zone-n { margin: 0; font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--bleu); font-variant-numeric: tabular-nums; }
.zone-aucun .zone-n { color: var(--texte); }
.zone-carte h3 { margin: 0; font-size: 19px; }
.zone-texte { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.zone-carte .autres-puces { margin-top: 6px; }
@media (max-width: 900px) { .zones, .zones-2 { grid-template-columns: minmax(0, 1fr); } }
/* tableaux empilés sur mobile : le bouton d'offre d'une ligne, sans son titre de colonne, sur toute la largeur */
@media (max-width: 640px) {
  .table-donnees.empile td:has(.bouton-ligne) { padding-top: 8px; }
  .table-donnees.empile td:has(.bouton-ligne)::before { content: none; }
  .table-donnees.empile .bouton-ligne { display: flex; width: 100%; justify-content: center; }
}
/* trois chiffres sur deux colonnes : le dernier prend la ligne entière (pas de ligne à moitié vide) */
@media (max-width: 1080px) { .fiche-chiffres .chiffres-pays > .chiffre-carte:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* pages marque × pays : en bref (tuiles), listes de forfaits sans scripts, logos des autres fournisseurs */
.bref-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bref { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; background: #fff; border: 1px solid var(--ligne); border-radius: 16px; }
.bref-label { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.bref-valeur { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--texte); overflow-wrap: anywhere; }
.bref-valeur .prix { color: var(--bleu); }
.bref-valeur .np { color: var(--gris-clair); font-weight: 600; }
.bref-detail { margin: 0; font-size: 13.5px; color: var(--gris); }
@media (max-width: 1080px) { .bref-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bref { padding: 12px 14px; } .bref-valeur { font-size: 16.5px; } }
.liste-statique { margin-bottom: 8px; }
.section .h2-suite { margin-top: 30px; }
.plus-forfaits { margin: 4px 0 8px; }
.plus-forfaits > summary { list-style: none; display: inline-flex; cursor: pointer; }
.plus-forfaits > summary::-webkit-details-marker { display: none; }
.plus-forfaits[open] > summary { margin-bottom: 12px; }
/* face-à-face SIM locale contre eSIM */
.vs-points { margin: 6px 0 4px; }
.vs-carte .verdict-texte { color: var(--texte); font-weight: 600; }
/* deux conseils : deux colonnes (pas de rangée à moitié vide) */
@media (min-width: 641px) { .conseils.conseils-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* logos dans les tableaux : fournisseurs (carrés) et opérateurs (proportions libres) */
.logo-ligne { display: inline-block; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; object-fit: contain; vertical-align: -5px; }
.logo-op-ligne { display: inline-block; height: 18px; width: auto; max-width: 64px; margin-right: 8px; object-fit: contain; vertical-align: -3px; }
/* trois conseils : trois colonnes, puis une seule (pas de rangée à moitié vide) */
@media (min-width: 1081px) { .conseils.conseils-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .conseils.conseils-n3 { grid-template-columns: minmax(0, 1fr); } }
/* « notre analyse » : du texte courant, à la largeur de lecture */
.analyse { max-width: 760px; display: grid; gap: 14px; }
.analyse p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--texte); }
@media (max-width: 640px) { .analyse p { font-size: 16px; } }

/* Lisibilité du chapeau des en-têtes (retour d'Arthur, 22/10) : un encadré sombre sous le texte, en blanc, les montants en gras ;
   un voile plus marqué du côté du texte sur les photos */
.dest-contenu .chapo { align-self: flex-start; padding: 14px 18px; border-radius: 16px; background: rgba(8, 12, 24, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.dest-contenu .chapo strong, .dest-contenu .chapo .prix { font-weight: 700; color: #fff; }
.dest-heros-v2 .heros-voile { background: linear-gradient(100deg, rgba(8, 12, 24, 0.82) 0%, rgba(8, 12, 24, 0.62) 48%, rgba(8, 12, 24, 0.34) 100%); }
.heros .chapo { color: #fff; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.heros-voile { background: rgba(8, 12, 24, 0.56); }
@media (max-width: 760px) {
  .dest-heros-v2 .heros-voile { background: linear-gradient(180deg, rgba(8, 12, 24, 0.78) 0%, rgba(8, 12, 24, 0.64) 100%); }
  .dest-contenu .chapo { padding: 12px 14px; font-size: 15.5px; line-height: 1.55; border-radius: 14px; }
}

/* L'analyse des pages opérateur × destination, en blocs */
.analyse-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.analyse-bloc { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 22px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 18px; }
.analyse-bloc:last-child:nth-child(odd) { grid-column: 1 / -1; }
.analyse-bloc h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.analyse-bloc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--texte); }
.analyse-alerte { background: #FFF5F3; border-color: #F4C7BD; }
.analyse-alerte h3 { color: #B42318; }
.liste-durees { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste-durees li { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 14px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; }
.ld-duree { font-size: 13px; font-weight: 700; color: var(--bleu-fonce); }
.ld-offre { font-size: 14.5px; line-height: 1.45; color: var(--texte); min-width: 0; }
.ld-prix { font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.duels li { display: grid; gap: 7px; padding: 12px 14px; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; }
.duel-duree { font-size: 13px; font-weight: 700; color: var(--bleu-fonce); }
.duel-ligne { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.duel-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-op .barre-remplie { background: var(--gris-clair); }
.duel-ligne strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.points-pays { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.points-pays li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.points-pays li svg { flex: none; margin-top: 4px; color: var(--bleu); }
.analyse-note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
@media (max-width: 900px) { .analyse-grille { grid-template-columns: minmax(0, 1fr); } .analyse-bloc { padding: 16px; } }
@media (max-width: 640px) {
  .liste-durees li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .ld-duree { grid-column: 1 / -1; }
  .duel-ligne { grid-template-columns: 64px minmax(0, 1fr) auto; }
}

/* Lecture sur téléphone : introductions plus courtes à l'œil, tableaux empilés en paires libellé / valeur */
@media (max-width: 640px) {
  .section-intro { font-size: 15.5px; line-height: 1.6; margin-bottom: 14px; }
  .table-donnees.empile td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; }
  .table-donnees.empile td::before, :lang(fr) .table-donnees.empile td::before { content: attr(data-titre); font-size: 12.5px; line-height: 1.4; }
  .table-donnees.empile td:has(.bouton-ligne) { display: block; padding-top: 8px; }
  .table-donnees.empile td:has(.bouton-ligne)::before { content: none; }
}
/* les barres des duels gardent leur place dans la ligne (la règle « grid-area: piste » des barres de prix ne s'applique pas ici) */
.duel-ligne .barre-piste { grid-area: auto; }
/* l'analyse en deux colonnes équilibrées (sans hauteurs forcées ni trous) */
@media (min-width: 901px) {
  .analyse-grille { display: block; columns: 2; column-gap: 16px; }
  .analyse-grille .analyse-bloc { break-inside: avoid; margin-bottom: 16px; }
}
.plus-lignes { margin-top: 10px; }
.plus-lignes > summary { list-style: none; display: inline-flex; cursor: pointer; }
.plus-lignes > summary::-webkit-details-marker { display: none; }
.plus-lignes[open] > summary { margin-bottom: 10px; }
/* longues listes repliées sur téléphone (app.js) */
@media (max-width: 760px) { [data-replier].plie > :nth-child(n+11) { display: none !important; } }
.plus-bouton { margin-top: 12px; }
@media (min-width: 761px) { .plus-bouton { display: none; } }
/* sur téléphone, la FAQ va droit aux questions (la mascotte reste sur grand écran) */
@media (max-width: 640px) { .faq-intro .mascotte-faq { display: none; } }
/* une seule barre par ligne (opérateurs comparés entre eux) */
.duels-simples li { gap: 0; padding: 8px 12px; }
.duels-simples .duel-duree { display: none; }
.duels-simples .duel-ligne { grid-template-columns: 120px minmax(0, 1fr) auto; }
@media (max-width: 640px) { .duels-simples .duel-ligne { grid-template-columns: 92px minmax(0, 1fr) auto; } }
/* les noms des barres lisibles sur téléphone (« GoMoWorld », « Bouygues Telecom ») */
@media (max-width: 640px) {
  .duel-ligne { grid-template-columns: 86px minmax(0, 1fr) auto; }
  .duels-simples .duel-ligne { grid-template-columns: 118px minmax(0, 1fr) auto; }
  .duel-nom { font-size: 13px; }
}