/* ============================================================
   JU.EN.VIE — AFFILIATE HUB
   Feuille de style unique. Thème sombre chaud signature.
   Organisation :
   1. Variables et fondations
   2. Éléments de base
   3. Header et navigation
   4. Hero
   5. Cartes catégories (accueil)
   6. Toolbar (recherche, filtres, tri)
   7. Sections et cartes produit
   8. Badges
   9. Réseaux sociaux
   10. Footer
   11. Composants flottants (toast, retour en haut)
   12. Animations et accessibilité
   13. Guides de voyage (cartes de la page guides.html)
   14. Article guide (pages guide-*.html)
   15. Comparatifs et codes promo
   16. Menu mobile
   17. Fiche produit dépliable
   18. Méga menu
   19. Signature animée de l'entête
   20. Animations de lecture des articles
   21. Frise animée et pastille de statut
   ============================================================ */

/* ---------- 1. Variables et fondations ---------- */

:root {
  /* Couleurs primaires */
  --orange-feu: #E8601C;
  --coucher-soleil: #F4874B;
  --orange-glow: #FFA96B;
  --sunset-profond: #C94A11;
  --or-dore: #F5C842;

  /* Neutres chauds */
  --nuit-profonde: #1A1208;
  --terre-chaude: #2C1F0E;
  --brun-mid: #7A5C3A;
  --sable-chaud: #FDF6ED;
  --lumiere-chaude: #F9EDD9;
  --blanc: #FFFFFF;

  /* Rôles */
  --fond: var(--nuit-profonde);
  --fond-carte: #241A0C;
  --fond-carte-hover: #2E2110;
  --texte: var(--sable-chaud);
  --texte-secondaire: #D9C7A9;
  --texte-tertiaire: #B39A72;
  --bordure-douce: rgba(255, 169, 107, 0.14);

  /* Dégradés signature */
  --degrade-hero: linear-gradient(135deg, #1A1208 0%, #2C1F0E 40%, #C94A11 100%);
  --degrade-accent: linear-gradient(135deg, #F4874B 0%, #F5C842 100%);

  /* Typo */
  --font-titre: "Playfair Display", Georgia, serif;
  --font-corps: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Signature de marque, reprise du portfolio juenvie.com :
     Cormorant Garamond en italique light, tout en minuscules. */
  --font-signature: "Cormorant Garamond", Georgia, serif;

  /* Rythme */
  --rayon: 18px;
  --rayon-petit: 12px;
  --ombre-carte: 0 10px 30px rgba(0, 0, 0, 0.25);
  --ombre-glow: 0 8px 32px rgba(232, 96, 28, 0.28);
  --transition: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* Grain léger, appliqué en calque fixe sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 2. Éléments de base ---------- */

a {
  color: var(--orange-glow);
  text-decoration: none;
}

a:hover {
  color: var(--or-dore);
}

:focus-visible {
  outline: 3px solid var(--or-dore);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--orange-feu);
  color: var(--blanc);
}

.conteneur {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* Label de section : Inter UPPERCASE letter-spacé orange */
.label-section {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  display: block;
  margin-bottom: 0.75rem;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--orange-feu);
  /* Texte sombre plutôt que blanc : le blanc sur cet orange ne donnait que
     3,43 de contraste, en dessous du seuil de 4,5. Le sombre monte à 5,4. */
  color: var(--nuit-profonde);
  padding: 0.75rem 1.25rem;
  border-radius: var(--rayon-petit);
  font-weight: 700;
}

.lien-evitement:focus {
  top: 1rem;
  color: var(--nuit-profonde);
}

/* ---------- 3. Header et navigation ---------- */

/* L'entête reste collée en haut pendant le défilement. Le fond translucide
   avec flou garde le contenu lisible en dessous sans masquer la page. */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.7rem 0;
  background: rgba(26, 18, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}

/* Dès qu'on a défilé, l'entête s'opacifie et se sépare du contenu. */
.entete.defile {
  background: rgba(26, 18, 8, 0.95);
  border-bottom-color: var(--bordure-douce);
}

@media (min-width: 860px) {
  .entete {
    padding: 1rem 0;
  }
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Wordmark identique à celui du portfolio : Cormorant Garamond italique
   light, minuscules, très légèrement letter-spacé. */
.logo {
  font: italic 300 1.75rem/1.1 var(--font-signature);
  color: var(--sable-chaud);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
}

/* Le fichier logo-entete.png est le logo recadré au plus près du dessin :
   à taille d'affichage égale, le soleil est 44% plus grand que dans
   assets/logo.png, qui garde sa large marge crème pour les usages où elle
   est nécessaire (favicon, icône d'application, pied de page).
   L'anneau plus marqué et le léger gain de contraste détachent la pastille
   claire du fond sombre de l'entête. */
.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  filter: contrast(1.12) saturate(1.1);
  box-shadow: 0 0 0 2px rgba(255, 169, 107, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.35);
  transition: box-shadow var(--transition);
}

.logo:hover .logo-img {
  box-shadow: 0 0 0 2px var(--orange-glow), 0 0 16px rgba(232, 96, 28, 0.45);
}

.logo:hover {
  color: var(--orange-glow);
}

.nav-principale ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
}

.nav-principale a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--texte-secondaire);
  transition: color var(--transition), background var(--transition);
}

.nav-principale a:hover {
  color: var(--sable-chaud);
  background: rgba(255, 169, 107, 0.1);
}

.nav-principale a[aria-current="page"] {
  color: var(--orange-glow);
  background: rgba(255, 169, 107, 0.12);
  font-weight: 700;
}

/* ---------- 4. Hero ---------- */

.hero {
  position: relative;
  z-index: 0;
  background: var(--degrade-hero);
  border-radius: 0 0 32px 32px;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Halo lumineux signature */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  width: 60rem;
  height: 60rem;
  right: -25rem;
  top: -30rem;
  background: radial-gradient(circle, rgba(248, 135, 75, 0.25) 0%, transparent 65%);
  animation: derive-halo-1 22s ease-in-out infinite;
  will-change: transform;
}

.hero::after {
  width: 34rem;
  height: 34rem;
  left: -18rem;
  bottom: -20rem;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.14) 0%, transparent 65%);
  animation: derive-halo-2 28s ease-in-out infinite;
  will-change: transform;
}

/* Photo hero en transparence, fondue dans le dégradé sunset.
   Léger zoom continu, effet cinématique, jamais brusque. */
.photo-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.34;
  z-index: -3;
  animation: zoom-lent 26s ease-in-out infinite alternate;
  will-change: transform;
}

.voile-hero {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(26, 18, 8, 0.2) 0%, rgba(26, 18, 8, 0.06) 45%, rgba(26, 18, 8, 0.55) 100%),
    linear-gradient(135deg, rgba(26, 18, 8, 0.6) 0%, rgba(44, 31, 14, 0.25) 50%, rgba(201, 74, 17, 0.4) 100%);
}

.hero-contenu {
  max-width: 620px;
}

/* Entrée séquencée du hero au chargement (seulement si JS actif, pour
   ne jamais masquer le contenu quand JavaScript est absent). */
.js .hero-contenu > * {
  animation: entree-douce 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.js .hero-contenu > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero-contenu > *:nth-child(2) { animation-delay: 0.14s; }
.js .hero-contenu > *:nth-child(3) { animation-delay: 0.23s; }
.js .hero-contenu > *:nth-child(4) { animation-delay: 0.32s; }
.js .hero-contenu > *:nth-child(5) { animation-delay: 0.41s; }
.js .hero-contenu > *:nth-child(6) { animation-delay: 0.50s; }

.hero h1 {
  font: 800 clamp(2.3rem, 7vw, 3.8rem) / 1.12 var(--font-titre);
  color: var(--blanc);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  color: var(--orange-glow);
}

/* Le mot mis en valeur est rempli par le dégradé de la marque plutôt que
   par un orange plein. La règle est sous @supports : un navigateur qui ne
   sait pas découper un fond sur du texte garde la couleur pleine, au lieu
   d'afficher un mot transparent, donc invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background-image: var(--degrade-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.hero .sous-titre {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.65rem;
}

.hero .micro-texte {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 1.75rem;
  max-width: 46ch;
}

.hero .stats-hero {
  display: flex;
  gap: 2rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.hero .stat b {
  display: block;
  font: 800 2rem var(--font-corps);
  color: var(--orange-glow);
  line-height: 1.2;
}

.hero .stat span {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
}

/* Hero incarné des pages catégories : une photo de Julien (ou du terrain)
   à côté du titre. Pastille ronde et compacte sur mobile pour ne pas
   repousser le titre sous la ligne de flottaison, cadre vertical à côté
   du texte dès qu'il y a de la place. */
.hero-grille {
  display: grid;
  gap: 1.4rem;
}

.hero-grille .hero-contenu {
  max-width: 620px;
}

.cadre-portrait {
  /* Ce n'est plus une pastille de 112 px mais une vraie image d'ouverture.
     Elle se place sous le texte : mise au-dessus, elle repousserait le titre
     hors du premier écran, or c'est le titre qui porte le message. */
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 169, 107, 0.45);
  box-shadow: 0 18px 44px rgba(10, 6, 2, 0.5);
}

.cadre-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Chaque photo a son point d'ancrage : le visage doit rester dans le
     cadre quel que soit le format de découpe. */
  object-position: var(--cadrage-portrait, 50% 25%);
}

.js .cadre-portrait {
  animation: entree-douce 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards;
}

.portrait-sport {
  --cadrage-portrait: 50% 16%;
}

.portrait-creation {
  --cadrage-portrait: 50% 0%;
}

.portrait-voyage {
  --cadrage-portrait: 50% 48%;
}

/* Bouton principal */
.btn-principal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--degrade-accent);
  color: var(--nuit-profonde);
  font: 800 1rem var(--font-corps);
  cursor: pointer;
  box-shadow: var(--ombre-glow);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Reflet lumineux qui balaie le bouton au survol */
.btn-principal::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-160%) rotate(8deg);
  pointer-events: none;
}

.btn-principal:hover::after {
  animation: brillance 0.9s ease;
}

.btn-principal:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(232, 96, 28, 0.4);
  color: var(--nuit-profonde);
}

.btn-principal:active {
  transform: translateY(0) scale(0.99);
}

/* ---------- 5. Cartes catégories (accueil) ---------- */

.section-categories {
  padding: clamp(2.25rem, 5vw, 3rem) 0 1.5rem;
}

.grille-categories {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.carte-categorie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  min-height: 230px;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-top: 4px solid var(--orange-feu);
  border-radius: var(--rayon);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition);
}

/* Photo de fond très sombre et fondue, à l'image du hero mais plus
   discrète : elle donne une texture sans jamais gêner la lecture. */
.carte-categorie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(20, 13, 6, 0.72) 0%, rgba(20, 13, 6, 0.62) 45%, rgba(20, 13, 6, 0.88) 100%),
    var(--fond-photo, none);
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  transition: opacity var(--transition), transform var(--transition);
}

.carte-voyage {
  --fond-photo: url("../assets/photos/categorie-voyage.jpg");
}

.carte-sport {
  --fond-photo: url("../assets/photos/categorie-sport.jpg");
}

.carte-creation {
  --fond-photo: url("../assets/photos/categorie-creation-coworking.jpg");
}

.carte-australie {
  --fond-photo: url("../assets/photos/categorie-australie.jpg");
}

.carte-guides {
  --fond-photo: url("../assets/photos/categorie-guides.jpg");
}

.carte-categorie:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--ombre-glow);
}

/* Au survol, la photo se révèle un peu et respire (léger zoom). */
.carte-categorie:hover::before {
  opacity: 1;
  transform: scale(1.04);
}

.carte-categorie h3 {
  margin-top: auto;
  font: 700 1.9rem var(--font-titre);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--sable-chaud);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.carte-categorie h3 a {
  color: inherit;
}

/* Étend la zone cliquable à toute la carte */
.carte-categorie h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carte-categorie p {
  color: var(--texte-secondaire);
  font-size: 0.95rem;
  max-width: 34ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.carte-categorie .pied-carte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  width: 100%;
  color: var(--orange-glow);
  font-weight: 700;
  font-size: 0.92rem;
}

.carte-categorie .compteur {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--texte-tertiaire);
}

.carte-categorie .fleche {
  transition: transform var(--transition);
}

.carte-categorie:hover .fleche {
  transform: translateX(5px);
}

/* Cinq univers sur une grille de six colonnes : trois cartes de deux
   colonnes sur la première ligne, deux cartes de trois colonnes sur la
   seconde. Une grille en trois colonnes laisserait un trou à droite. */
@media (min-width: 720px) {
  .grille-categories {
    grid-template-columns: repeat(6, 1fr);
  }

  .grille-categories > .carte-categorie {
    grid-column: span 2;
  }

  .grille-categories > .carte-categorie:nth-child(4),
  .grille-categories > .carte-categorie:nth-child(5) {
    grid-column: span 3;
  }
}

/* ---------- 6. Toolbar (recherche, filtres, tri) ---------- */

/* Sur mobile la toolbar défile avec la page : avec les puces sur
   plusieurs lignes, la garder collée mangerait un tiers de l'écran.
   Sur desktop (une seule ligne) elle reste collée en haut. */
.toolbar {
  z-index: 20;
  padding: 0.85rem 0;
  background: rgba(26, 18, 8, 0.92);
  border-bottom: 1px solid var(--bordure-douce);
}

@media (min-width: 720px) {
  .toolbar {
    position: sticky;
    top: 0;
  }
}

@supports (backdrop-filter: blur(12px)) {
  .toolbar {
    background: rgba(26, 18, 8, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.toolbar .conteneur {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ligne-recherche {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.champ-recherche {
  position: relative;
  flex: 1;
}

.champ-recherche svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 17px;
  height: 17px;
  color: var(--texte-tertiaire);
  pointer-events: none;
}

.champ-recherche input {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 1rem 0.65rem 2.7rem;
  border: 1px solid var(--bordure-douce);
  border-radius: 999px;
  background: var(--fond-carte);
  color: var(--texte);
  font: 400 1rem var(--font-corps);
  transition: border-color var(--transition);
}

.champ-recherche input::placeholder {
  color: var(--texte-tertiaire);
}

.champ-recherche input:focus {
  outline: none;
  border-color: var(--orange-feu);
  box-shadow: 0 0 0 3px rgba(232, 96, 28, 0.25);
}

/* Sur mobile, les puces s'enroulent sur plusieurs lignes : tout est
   visible d'un coup, aucun défilement horizontal. Sur desktop elles
   tiennent sur une ligne (défilable au cas où). */
.filtres-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding-bottom: 0.25rem;
}

@media (min-width: 720px) {
  .filtres-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fondu au bord droit : signale qu'il reste des puces à faire défiler */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }

  .filtres-chips::-webkit-scrollbar {
    display: none;
  }
}

.chip {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--bordure-douce);
  border-radius: 999px;
  background: transparent;
  color: var(--texte-secondaire);
  font: 600 0.88rem var(--font-corps);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}

.chip:hover {
  border-color: var(--orange-feu);
  color: var(--sable-chaud);
}

.chip[aria-pressed="true"] {
  background: rgba(232, 96, 28, 0.14);
  border-color: var(--orange-feu);
  color: var(--orange-glow);
  font-weight: 700;
}

/* ---------- 7. Sections et cartes produit ---------- */

.zone-liens {
  padding: 2.25rem 0 3rem;
}

.section-souscategorie {
  margin-bottom: 2.75rem;
}

.section-souscategorie > h2 {
  font: 700 clamp(1.45rem, 4vw, 1.9rem) var(--font-titre);
  color: var(--sable-chaud);
  margin-bottom: 1.1rem;
}

/* Panneaux de mise en avant : « Mes indispensables » (haut des pages
   catégories) et collection contextuelle (accueil). Même traitement
   visuel pour rester cohérent : encart chaud, distinct des sections
   ordinaires. Le halo doré en coin signale « sélection ». */
.section-collection {
  padding: 0.5rem 0 1rem;
}

.section-indispensables,
.section-collection .conteneur {
  position: relative;
  padding: 1.6rem 1.35rem 1.8rem;
  border: 1px solid rgba(245, 200, 66, 0.28);
  border-radius: var(--rayon);
  background:
    radial-gradient(135% 130% at 0% 0%, rgba(244, 135, 75, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(44, 31, 14, 0.6), rgba(26, 18, 8, 0.35));
  overflow: hidden;
  isolation: isolate;
}

.section-indispensables {
  margin-bottom: 2.75rem;
}

/* Collection PVT Australie : drapeau australien en filigrane dans le
   coin haut droit. Même logique que les photos de fond : très fondu,
   réchauffé (sépia) pour rester dans la palette sunset, et effacé
   progressivement par un masque pour ne jamais gêner la lecture. */
[data-collection-bloc="pvt-australie"] .conteneur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/drapeau-australie.png") top right / min(440px, 96%) auto no-repeat;
  filter: sepia(0.5) saturate(0.7) brightness(0.9);
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(130% 110% at 100% 0%, #000 0%, transparent 68%);
  pointer-events: none;
}

.entete-indispensables h2,
.section-collection h2 {
  font: 700 clamp(1.45rem, 4vw, 1.9rem) var(--font-titre);
  color: var(--sable-chaud);
  margin-top: 0.2rem;
}

.entete-indispensables p,
.intro-collection {
  color: var(--texte-secondaire);
  font-size: 0.95rem;
  margin-top: 0.35rem;
  max-width: 60ch;
}

.section-indispensables .grille-liens,
.section-collection .grille-liens {
  margin-top: 1.2rem;
}

/* Deux cartes par ligne dès le mobile pour limiter le scroll vertical,
   trois sur grand écran. align-items:stretch (défaut) : les cartes d'une
   même rangée font la même hauteur (alignées côte à côte), mais chaque
   rangée s'adapte à son contenu — pas de vide imposé par la carte la plus
   haute de la page. */
.grille-liens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (min-width: 720px) {
  .grille-liens {
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .grille-liens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.carte-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-left: 4px solid var(--orange-feu);
  border-radius: var(--rayon-petit);
  padding: 1.15rem 1.15rem 1rem;
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition);
}

.carte-lien:hover {
  transform: translateY(-3px) scale(1.015);
  background: var(--fond-carte-hover);
  box-shadow: var(--ombre-glow);
}

/* Toute la carte est cliquable (vers le lien de parrainage) quand elle
   a un vrai lien. La navigation est gérée en JS ; les boutons de copie
   du code gardent leur propre action. */
.carte-cliquable {
  cursor: pointer;
}

/* Carte « Bientôt » : atténuée, mais pas sur toute sa hauteur. L'opacité
   porte sur son identité (icône, titre, accroche, badges) et sur son
   bouton, pas sur la fiche dépliable, dont le texte doit rester lisible
   même sans lien de parrainage derrière. Une opacité posée sur .carte-lien
   entière ne pourrait pas être annulée sur un enfant. */
.carte-lien.a-venir {
  border-left-color: var(--brun-mid);
}

.carte-lien.a-venir .entete-carte,
.carte-lien.a-venir .accroche,
.carte-lien.a-venir .badges-carte,
.carte-lien.a-venir .anciennete,
.carte-lien.a-venir .avantage-promo,
.carte-lien.a-venir .actions-carte {
  opacity: 0.62;
}

.carte-lien.a-venir:hover {
  transform: none;
  box-shadow: var(--ombre-carte);
}

.entete-carte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icone-lien {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244, 135, 75, 0.22), rgba(245, 200, 66, 0.12));
  border: 1px solid var(--bordure-douce);
}

.icone-lien.initiale {
  font: italic 700 1.3rem var(--font-titre);
  color: var(--orange-glow);
}

/* Logo de marque : chip clair pour que les logos sombres ou blancs
   restent lisibles quelle que soit la couleur de la marque. */
.icone-lien.avec-logo {
  background: var(--sable-chaud);
  border-color: transparent;
  padding: 7px;
}

.icone-lien.avec-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.carte-lien h3 {
  font: 700 1.08rem var(--font-corps);
  color: var(--sable-chaud);
  line-height: 1.3;
}

.carte-lien .accroche {
  font: italic 600 0.92rem var(--font-titre);
  color: var(--orange-glow);
}

.badges-carte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Mention de l'avantage : légende centrée sous le bouton Découvrir.
   Ton neutre chaud (taupe) volontairement discret et distinct des
   accents orange/dorés du reste de la carte. */
.avantage-promo {
  margin-top: 0.55rem;
  text-align: center;
  color: var(--texte-tertiaire);
  font: 700 0.72rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Ligne code copiable : la pastille dorée ET le bouton copier à côté
   déclenchent la même copie du code (deux cibles, une seule action).
   margin-top:auto ancre le bloc code+bouton+avantage en bas de carte,
   pour un alignement uniforme quand les cartes font la même hauteur. */
.ligne-code {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: auto;
}

/* Quand un bouton suit la ligne de code, c'est elle qui absorbe l'espace
   libre : le bouton reste collé juste en dessous. */
.ligne-code + .actions-carte {
  margin-top: 0;
}

/* Dans la ligne, la pastille s'étire à la même hauteur que le bouton */
.ligne-code .code-promo {
  align-self: auto;
}

.btn-copier-code {
  border: 1px dashed var(--or-dore);
  color: var(--or-dore);
  background: rgba(245, 200, 66, 0.09);
}

.btn-copier-code:hover {
  border-color: var(--or-dore);
  color: var(--or-dore);
  background: rgba(245, 200, 66, 0.18);
}

/* Code promo copiable */
.code-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 1px dashed var(--or-dore);
  border-radius: var(--rayon-petit);
  background: rgba(245, 200, 66, 0.09);
  color: var(--or-dore);
  font: 700 0.9rem var(--font-corps);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--transition);
}

.code-promo:hover {
  background: rgba(245, 200, 66, 0.18);
}

.code-promo .etiquette {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--texte-tertiaire);
}

/* ---------- Cartes compactes en 2 colonnes (mobile) ----------
   Sous 640px, deux cartes par ligne : on resserre l'espacement, on
   réduit un peu les éléments et on limite le résumé à 2 lignes. La
   pastille de code passe en pleine largeur (le bouton copier séparé,
   trop à l'étroit à cette largeur, est masqué : un tap sur la pastille
   copie déjà le code). */
@media (max-width: 639px) {
  .carte-lien {
    gap: 0.5rem;
    padding: 0.8rem 0.8rem 0.85rem;
    border-left-width: 3px;
  }

  .entete-carte {
    gap: 0.5rem;
  }

  .icone-lien {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    border-radius: 9px;
  }

  .icone-lien.avec-logo {
    padding: 4px;
  }

  .carte-lien h3 {
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }


  .ligne-code .code-promo {
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    min-height: 44px;
    padding: 0.28rem 0.5rem;
    font-size: 0.78rem;
  }

  /* Label « CODE » masqué sur mobile : la pastille dorée pointillée se
     reconnaît déjà comme un code, et ça laisse la place au code lui-même. */
  .code-promo .etiquette {
    display: none;
  }

  /* Sélecteur plus spécifique que .btn-icone (défini plus bas) pour
     bien masquer le bouton copier séparé sur mobile. */
  .ligne-code .btn-copier-code {
    display: none;
  }

  /* Boutons Découvrir / Bientôt : texte réduit, la carte garde sa taille. */
  .carte-lien .btn-lien {
    min-height: 44px;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
  }

  .carte-lien .badge {
    font-size: 0.64rem;
    padding: 0.18rem 0.55rem;
  }

  /* 0,62 rem valait 9,9 px, le plus petit texte du site, sur un argument
     commercial. Remonté au plancher de 12 px. */
  .avantage-promo {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  /* Puces de filtre : plus compactes pour tenir sur 2-3 lignes sans
     défilement horizontal. */
  .chip {
    min-height: 44px;
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
  }
}

/* Actions */
.actions-carte {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Boutons « Découvrir » en contour : l'accent orange plein est réservé
   à un seul bouton par écran (le CTA du hero, la carte vedette). Ici,
   une bordure orange sur fond transparent — l'aplat n'apparaît qu'au
   survol. Plus de reflet balayant ni d'ombre glow : le orange redevient
   rare, donc lisible. */
.btn-lien {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--orange-feu);
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--orange-glow);
  font: 800 0.92rem var(--font-corps);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn-lien:hover {
  background: var(--orange-feu);
  border-color: var(--orange-feu);
  color: var(--nuit-profonde);
  transform: translateY(-1px);
}

.btn-lien.desactive {
  background: transparent;
  border-color: var(--bordure-douce);
  color: var(--texte-tertiaire);
  cursor: default;
}

.btn-lien.desactive:hover {
  transform: none;
  background: transparent;
  border-color: var(--bordure-douce);
  color: var(--texte-tertiaire);
}

.btn-icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 46px;
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte-secondaire);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
    background var(--transition);
}

.btn-icone:hover {
  border-color: var(--orange-feu);
  color: var(--orange-glow);
  background: rgba(232, 96, 28, 0.1);
}

.btn-icone svg {
  width: 18px;
  height: 18px;
}

/* ---------- Carte vedette (indispensable mis en avant) ----------
   Un bandeau pleine largeur en tête des « Mes indispensables » : il
   casse volontairement la grille uniforme et porte le seul bouton
   plein de la page. Le nom passe en serif, l'icône et l'accroche
   grandissent — la sélection se voit d'un coup d'œil. */
.carte-vedette {
  grid-column: 1 / -1;
  gap: 0.7rem;
  padding: 1.6rem 1.5rem;
  border-left-width: 5px;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(244, 135, 75, 0.12), transparent 60%),
    var(--fond-carte);
}

.carte-vedette .icone-lien {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 1.6rem;
}

.carte-vedette h3 {
  font: 700 clamp(1.35rem, 3.5vw, 1.75rem) var(--font-titre);
  color: var(--sable-chaud);
}

.carte-vedette .accroche {
  font-size: 1.02rem;
  max-width: 54ch;
}

.carte-vedette .actions-carte {
  align-self: flex-start;
}

.carte-vedette .btn-lien {
  flex: 0 0 auto;
  min-width: 210px;
}

/* La vedette garde un bouton plein : c'est le CTA principal de la page. */
.carte-vedette .btn-lien:not(.desactive) {
  background: var(--orange-feu);
  border-color: transparent;
  color: var(--nuit-profonde);
}

.carte-vedette .btn-lien:not(.desactive):hover {
  background: var(--coucher-soleil);
  border-color: transparent;
}

@media (min-width: 720px) {
  .carte-vedette {
    padding: 1.9rem 2rem;
  }
}

/* Message aucun résultat */
.aucun-resultat {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--texte-secondaire);
}

.aucun-resultat.visible {
  display: block;
}

.aucun-resultat b {
  display: block;
  font: 700 1.4rem var(--font-titre);
  color: var(--sable-chaud);
  margin-bottom: 0.4rem;
}

/* ---------- 8. Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font: 700 0.72rem var(--font-corps);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-prefere {
  background: rgba(245, 200, 66, 0.16);
  color: var(--or-dore);
  border: 1px solid rgba(245, 200, 66, 0.45);
}

.badge-qualite-prix {
  background: rgba(244, 135, 75, 0.16);
  color: var(--orange-glow);
  border: 1px solid rgba(244, 135, 75, 0.45);
}

.badge-debutant {
  background: rgba(253, 246, 237, 0.1);
  color: var(--lumiere-chaude);
  border: 1px solid rgba(253, 246, 237, 0.3);
}

.badge-professionnel {
  background: rgba(201, 74, 17, 0.25);
  color: var(--orange-glow);
  border: 1px solid rgba(201, 74, 17, 0.6);
}

.badge-plus-utilise {
  background: var(--degrade-accent);
  color: var(--nuit-profonde);
  border: 1px solid transparent;
}

.badge-voyage,
.badge-running,
.badge-creation {
  background: rgba(232, 96, 28, 0.14);
  color: var(--orange-glow);
  border: 1px solid rgba(232, 96, 28, 0.4);
}


/* ---------- 9. Réseaux sociaux ---------- */

.liens-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
}

.liens-reseaux a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--bordure-douce);
  border-radius: 999px;
  background: var(--fond-carte);
  color: var(--texte-secondaire);
  font: 600 0.9rem var(--font-corps);
  transition: border-color var(--transition), color var(--transition),
    transform var(--transition);
}

.liens-reseaux a:hover {
  border-color: var(--orange-feu);
  color: var(--sable-chaud);
  transform: translateY(-2px);
}

.section-reseaux {
  padding: 1.5rem 0 3rem;
}

.section-reseaux h2 {
  font: 700 1.5rem var(--font-titre);
  color: var(--sable-chaud);
  margin-bottom: 1rem;
}

/* ---------- 10. Footer ---------- */

.pied-page {
  background: var(--terre-chaude);
  border-top: 1px solid var(--bordure-douce);
  padding: 2.5rem 0 2rem;
  margin-top: 2rem;
}

.pied-page .conteneur {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pied-page .liens-reseaux a {
  background: rgba(26, 18, 8, 0.5);
}

.logo-footer {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
}

.logo-footer img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity var(--transition), transform var(--transition);
}

.logo-footer:hover img {
  opacity: 1;
  transform: scale(1.08);
}

.mention-affiliation {
  font-size: 0.85rem;
  color: var(--texte-tertiaire);
  max-width: 62ch;
}

.signature-marque {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-feu);
  /* Laisse la place au bouton retour en haut sur mobile */
  padding-right: 4.5rem;
}

/* ---------- 11. Composants flottants ---------- */

/* Toast de confirmation (copie de lien, partage) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  z-index: 60;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background: var(--sable-chaud);
  color: var(--nuit-profonde);
  font: 700 0.92rem var(--font-corps);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  translate: -50% 12px;
  pointer-events: none;
  transition: opacity var(--transition), translate var(--transition);
}

.toast.visible {
  opacity: 1;
  translate: -50% 0;
}

/* Retour en haut */
.retour-haut {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 50;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--degrade-accent);
  color: var(--nuit-profonde);
  cursor: pointer;
  box-shadow: var(--ombre-glow);
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition: opacity var(--transition), translate var(--transition),
    transform var(--transition);
}

.retour-haut.visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.retour-haut:hover {
  transform: scale(1.08);
}

.retour-haut svg {
  width: 20px;
  height: 20px;
}

/* ---------- 12. Animations et accessibilité ---------- */

/* Keyframes réutilisables. Toutes n'animent que transform et opacity,
   composés par le GPU, pour rester à 60 FPS y compris sur mobile. */
@keyframes entree-douce {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes derive-halo-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-2.5rem, 1.8rem) scale(1.1);
    opacity: 1;
  }
}

@keyframes derive-halo-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate(2.2rem, -1.6rem) scale(1.14);
    opacity: 1;
  }
}

@keyframes zoom-lent {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.11);
  }
}

@keyframes defile {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes brillance {
  from {
    transform: translateX(-160%) rotate(8deg);
  }
  to {
    transform: translateX(320%) rotate(8deg);
  }
}

/* Apparition au scroll en cascade : uniquement quand JS est actif.
   Le décalage --stagger (0 à 2, posé par le JS selon la colonne)
   crée l'effet de vague ligne par ligne. */
.js .revele {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--stagger, 0) * 60ms);
}

.js .revele.visible {
  opacity: 1;
  transform: none;
}

/* Bande de logos défilante (carrousel de marques, accueil) */
.bande-marques {
  padding: 1.6rem 0 1.85rem;
  border-block: 1px solid var(--bordure-douce);
  background: rgba(26, 18, 8, 0.35);
  overflow: hidden;
}

.label-marques {
  text-align: center;
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  margin-bottom: 1.4rem;
  padding-inline: 1rem;
}

.marquee {
  display: flex;
  align-items: center;
  /* Marge verticale : laisse respirer le soulèvement au survol et son
     ombre sans que le haut du logo soit rogné par overflow:hidden. */
  padding-block: 18px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}

.marquee-piste {
  display: flex;
  flex-shrink: 0;
  animation: defile 48s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-piste {
  animation-play-state: paused;
}

.marque-item {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  margin-right: 1.5rem;
  border-radius: 14px;
  /* Tuile crème chaude et uniforme pour toutes les marques : les logos
     (clairs, sombres ou colorés) restent lisibles sans jamais rendre
     de gros carré blanc criard. overflow:hidden coupe net les coins
     des logos à fond plein (Booking, Garmin…). */
  background: var(--lumiere-chaude);
  border: 1px solid rgba(255, 169, 107, 0.22);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  opacity: 0.88;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition), opacity var(--transition);
}

.marque-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.marque-item:hover,
.marque-item.actif {
  transform: translateY(-5px);
  opacity: 1;
  border-color: var(--orange-glow);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 169, 107, 0.35);
}

/* Une marque est sélectionnée (clic/tap) : on fige le défilement le
   temps d'afficher son nom, et on l'affiche juste sous les logos. */
.bande-marques.nom-actif .marquee-piste {
  animation-play-state: paused;
}

.nom-marque {
  margin: 0.75rem 1rem 0;
  min-height: 1.2em;
  text-align: center;
  font: 700 13px var(--font-corps);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-glow);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.bande-marques.nom-actif .nom-marque {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Coupe net les animations en boucle plutôt que de les jouer
     en accéléré (source de scintillement). */
  .hero::before,
  .hero::after,
  .photo-hero,
  .marquee-piste,
  .js .cadre-portrait,
  .js .hero-contenu > * {
    animation: none !important;
  }

  .js .hero-contenu > * {
    opacity: 1;
    transform: none;
  }

  .js .revele {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

/* Confort desktop */
@media (min-width: 720px) {
  .toolbar .conteneur {
    flex-direction: row;
    align-items: center;
  }

  /* flex-basis explicite : sans elle, les puces (nowrap, non rétrécissables)
     écrasent le champ de recherche à ~60px. Le champ garde une largeur
     confortable, les puces défilent dans l'espace restant. */
  .ligne-recherche {
    flex: 1 1 280px;
    min-width: 240px;
    flex-direction: row;
  }

  .filtres-chips {
    padding-bottom: 0;
  }

  .hero {
    padding: 4.5rem 0 5rem;
  }
}

/* Dès qu'il y a de la largeur, le portrait passe à droite du titre en
   cadre vertical, légèrement incliné pour casser la rigueur de la grille. */
@media (min-width: 860px) {
  .hero-grille {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 400px);
    align-items: center;
    gap: 3rem;
  }

  .hero-grille .hero-contenu {
    grid-column: 1;
    grid-row: 1;
  }

  .cadre-portrait {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 5;
    border-radius: 26px;
    border-width: 1px;
    transform: rotate(-1.5deg);
  }
}

/* ---------- 13. Guides de voyage ---------- */

.section-guides {
  padding: clamp(2.25rem, 5vw, 3rem) 0 clamp(2rem, 5vw, 3rem);
}

.grille-guides {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .grille-guides {
    grid-template-columns: repeat(2, 1fr);
  }
}

.carte-guide {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.carte-guide:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-glow);
}

/* Toute la carte est cliquable : le lien enveloppe photo et texte, pas
   besoin de JavaScript comme sur les cartes produit. */
.lien-guide {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.lien-guide:hover {
  color: inherit;
}

.photo-guide {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Dégradé de repli : tant que la photo n'est pas déposée dans
     assets/photos/guides/, la carte reste présentable. */
  background: var(--degrade-hero);
}

.photo-guide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.carte-guide:hover .photo-guide img {
  transform: scale(1.05);
}

.corps-guide {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem 1.35rem;
  flex: 1;
}

.pays-guide {
  font: 700 12px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
}

.carte-guide h3 {
  font: 700 1.4rem/1.2 var(--font-titre);
  color: var(--blanc);
}

.carte-guide p {
  color: var(--texte-secondaire);
  font-size: 0.95rem;
}

.pied-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 700;
  color: var(--orange-glow) !important;
}

.pied-guide .fleche {
  transition: transform var(--transition);
}

.carte-guide:hover .fleche {
  transform: translateX(4px);
}

.note-guides {
  margin-top: 1.75rem;
  color: var(--texte-tertiaire);
  font-size: 0.92rem;
}

/* ---------- 14. Article guide ---------- */

.hero-article {
  border-radius: 0 0 32px 32px;
}

.fil-ariane {
  margin-bottom: 1.5rem;
}

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.fil-ariane li + li::before {
  content: "›";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.4);
}

.fil-ariane a {
  color: rgba(255, 255, 255, 0.78);
}

.article-guide {
  max-width: 720px;
  margin: clamp(2rem, 5vw, 3rem) auto clamp(3rem, 7vw, 4.5rem);
}

.sommaire {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-left: 3px solid var(--orange-feu);
  border-radius: var(--rayon-petit);
  padding: 1.25rem 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}

.sommaire h2 {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  margin-bottom: 0.85rem;
}

.sommaire ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--texte-tertiaire);
}

.sommaire li {
  margin-bottom: 0.35rem;
}

.sommaire a {
  color: var(--texte-secondaire);
}

.sommaire a:hover {
  color: var(--or-dore);
}

.section-article {
  /* scroll-margin : quand on arrive par une ancre du sommaire, le titre
     passe sous l'entête fixe au lieu de se cacher derrière. */
  scroll-margin-top: 6rem;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}

.section-article h2 {
  font: 700 clamp(1.5rem, 4vw, 1.9rem)/1.25 var(--font-titre);
  color: var(--blanc);
  margin-bottom: 0.9rem;
}

.section-article h3 {
  font: 700 1.15rem var(--font-corps);
  color: var(--sable-chaud);
  margin: 1.5rem 0 0.5rem;
}

.section-article p,
.section-article li {
  color: var(--texte-secondaire);
  line-height: 1.75;
}

/* Un badge garde sa couleur propre même dans un article. La règle ci dessus
   est plus spécifique que « .badge-plus-utilise » et l'écrasait : le texte
   passait en beige clair sur un fond orange, donc illisible. */
.section-article .badge-plus-utilise {
  color: var(--nuit-profonde);
}

.section-article .badge-prefere {
  color: var(--or-dore);
}

.section-article .badge-debutant {
  color: var(--lumiere-chaude);
}

.section-article .badge-qualite-prix,
.section-article .badge-professionnel,
.section-article .badge-voyage,
.section-article .badge-running,
.section-article .badge-creation {
  color: var(--orange-glow);
}

.section-article p + p {
  margin-top: 1rem;
}

.section-article ul,
.section-article ol {
  margin: 1rem 0;
  padding-left: 1.3rem;
}

.section-article li + li {
  margin-top: 0.4rem;
}

/* Repère visuel des parties encore vides. Rien de tout ça ne doit rester
   le jour où l'article est publié. */
/* Les blocs « à écrire » sont les pense bêtes de Julien, pas du contenu.
   Ils sont masqués par défaut : une page en ligne ne doit jamais afficher
   « À compléter » à un lecteur ni à Google. Ils réapparaissent en local,
   ou sur n'importe quelle page en ajoutant ?brouillon à l'URL.
   Voir initialiserModeBrouillon() dans js/main.js. */
.a-ecrire {
  display: none;
  font-style: italic;
  color: var(--brun-mid) !important;
  border-left: 2px dashed rgba(255, 169, 107, 0.3);
  padding-left: 0.85rem;
}

.mode-brouillon .a-ecrire {
  display: block;
}

/* Repère visuel pour ne pas oublier qu'on est en mode brouillon. */
.mode-brouillon .a-ecrire::before {
  content: "À écrire";
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 169, 107, 0.16);
  color: var(--orange-glow);
  font: 700 0.68rem var(--font-corps);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: 2px;
}

.encadre-ressources {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.encadre-ressources .btn-lien {
  display: inline-flex;
  margin-top: 0.5rem;
}

/* Offre d'accompagnement, en fin de guide. Volontairement plus appuyée que
   l'encadré des ressources : c'est la seule chose à vendre sur la page. */
.encadre-offre {
  background: linear-gradient(150deg, var(--terre-chaude) 0%, var(--fond-carte) 62%);
  border: 1px solid rgba(232, 96, 28, 0.35);
  border-radius: var(--rayon);
  padding: 1.75rem;
}

.encadre-offre .label-offre {
  display: block;
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  margin-bottom: 0.65rem;
}

.encadre-offre h2 {
  margin-top: 0;
}

.encadre-offre .prix-offre {
  color: var(--texte-tertiaire);
  font-size: 0.92rem;
}

.encadre-offre .actions-offre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}


/* Sans ça, .btn-lien hériterait de son flex: 1 et s'étirerait bizarrement. */
.encadre-offre .actions-offre .btn-lien,
.encadre-offre .actions-offre .btn-principal {
  flex: 0 1 auto;
}
/* Le bouton vers la page des formules occupe sa propre ligne : c'est la
   destination principale, le mail et l'Instagram passent en dessous. */
.encadre-offre .actions-offre .cta-offre {
  flex: 1 1 100%;
}

@media (max-width: 460px) {
  .encadre-offre .actions-offre .btn-lien,
  .encadre-offre .actions-offre .btn-principal {
    flex: 1 1 100%;
  }
}

/* Les trois formules d'accompagnement. Colonnes égales dès qu'il y a de la
   largeur, empilées en dessous, avec celle du milieu mise en avant. */
.formules {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

@media (min-width: 760px) {
  .formules {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

/* Au delà, le bloc s'élargit au delà de la colonne de lecture, en restant
   aligné sur le conteneur du site. Sans ça, chaque carte ferait 229 px. */
@media (min-width: 1000px) {
  .formules {
    --largeur-formules: min(1120px, 100vw - 2.5rem);
    width: var(--largeur-formules);
    margin-inline: calc((100% - var(--largeur-formules)) / 2);
  }
}

.formule {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.formule-mise-en-avant {
  border-color: rgba(232, 96, 28, 0.45);
  background: linear-gradient(160deg, var(--terre-chaude) 0%, var(--fond-carte) 65%);
  box-shadow: var(--ombre-carte);
}

.formule-nom {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  margin: 0 0 0.5rem;
}

.formule-prix {
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.formule-prix b {
  display: block;
  font: 800 1.5rem var(--font-corps);
  color: var(--texte);
}

.formule-prix span {
  font-size: 0.8rem;
  color: var(--texte-tertiaire);
}

.formule-pitch {
  font-weight: 600;
  color: var(--texte-secondaire);
}

.formule p {
  font-size: 0.94rem;
}

.formule-intro {
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--texte-secondaire);
}

/* Liste des prestations. Le tiret de puce est un caractère décoratif, pas de
   la ponctuation : il est masqué aux lecteurs d'écran par aria-hidden. */
.formule-detail {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.94rem;
}

.formule-detail li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--texte-secondaire);
  line-height: 1.5;
}

.formule-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-feu);
}

/* Le cadre de la prestation, collé en bas pour aligner les trois cartes. */
.formule-cadre {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bordure-douce);
  font-size: 0.85rem;
  color: var(--texte-tertiaire);
}

.note-tarif {
  font-size: 0.9rem;
  color: var(--texte-tertiaire);
}


/* ---------- Pages d'accompagnement ---------- */
/* Ces blocs servent les deux pages de vente, accompagnement.html et
   accompagnement-pvt-australie.html. Rien ici n'est propre à une page :
   si un troisième accompagnement arrive un jour, il réutilise tout. */

/* Les deux boutons du hero. Empilés sur mobile pour rester attrapables
   au pouce, côte à côte dès qu'il y a la place. */
.hero .actions-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.hero .actions-hero .btn-principal,
.hero .actions-hero .btn-lien {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width: 560px) {
  .hero .actions-hero .btn-principal,
  .hero .actions-hero .btn-lien {
    flex: 0 1 auto;
  }
}

.hero .reassurance {
  margin-top: 0.9rem;
  font: 700 0.82rem var(--font-corps);
  letter-spacing: 0.02em;
  color: var(--orange-glow);
}

.hero .actions-hero + .reassurance + .micro-texte {
  margin-top: 0.35rem;
  font-style: italic;
}

/* La phrase pivot de la page. Elle doit se lire seule, sans contexte. */
.message-cle {
  font: 700 clamp(1.45rem, 4.6vw, 2.05rem)/1.3 var(--font-titre);
  color: var(--blanc);
  margin: 0 0 1.2rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--orange-feu);
}

.message-cle em {
  font-style: italic;
  color: var(--orange-glow);
}

/* Grille de points courts : un titre, une phrase. Sert aux bénéfices,
   aux pièges évités et au contenu d'une préparation. */
.grille-points {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  margin: 1.4rem 0 0;
}

@media (min-width: 560px) {
  .grille-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grille-points .point {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 1rem 1.1rem;
}

.grille-points .point b {
  display: block;
  font: 700 1rem/1.35 var(--font-corps);
  color: var(--orange-glow);
  margin-bottom: 0.3rem;
}

.grille-points .point span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

/* Variante pour six bénéfices courts : trois colonnes quand l'écran suit. */
@media (min-width: 860px) {
  .grille-points-serree {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Avant et après. Le contraste des deux colonnes porte la démonstration,
   donc la première est volontairement plus terne que la seconde. */
.mention-exemple {
  font: 700 0.78rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--texte-tertiaire);
  margin-bottom: 1.1rem;
}

.avant-apres {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  margin: 0 0 1.2rem;
}

@media (min-width: 720px) {
  .avant-apres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.bloc-avant,
.bloc-apres {
  border-radius: var(--rayon);
  padding: 1.25rem;
}

.bloc-avant {
  background: rgba(253, 246, 237, 0.04);
  border: 1px solid var(--bordure-douce);
}

.bloc-apres {
  background: linear-gradient(160deg, var(--terre-chaude) 0%, var(--fond-carte) 65%);
  border: 1px solid rgba(232, 96, 28, 0.45);
  box-shadow: var(--ombre-carte);
}

.etiquette-etape {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 0.7rem;
  color: var(--texte-tertiaire);
}

.bloc-apres .etiquette-etape {
  color: var(--orange-glow);
}

.citation-exemple {
  font: 400 1rem/1.6 var(--font-corps);
  font-style: italic;
  color: var(--texte);
  margin: 0 0 0.9rem;
}

.liste-avant,
.liste-apres {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.liste-avant li,
.liste-apres li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.4rem;
  line-height: 1.55;
  color: var(--texte-secondaire);
}

/* Les deux signes sont décoratifs : ils doublent une information déjà
   portée par les intitulés « ce qui arrive » et « ce que je renvoie ». */
.liste-avant li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--texte-tertiaire);
  font-weight: 700;
}

/* La liste des étapes de l'exemple. C'est elle qui porte la démonstration :
   on doit voir six lignes devenir quatre, sans avoir à lire un chiffre. */
.titre-etapes {
  margin: 1rem 0 0.6rem;
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--texte-tertiaire);
}

.bloc-apres .titre-etapes {
  color: var(--orange-glow);
}

.etapes {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.etapes li {
  position: relative;
  padding: 0 0 0.55rem 1.5rem;
  font: 700 0.98rem/1.3 var(--font-corps);
  color: var(--texte);
}

.etapes li:last-child {
  padding-bottom: 0;
}

/* Le point et le trait dessinent le trajet. Purement décoratifs :
   l'ordre est déjà porté par l'ordre des éléments de la liste. */
.etapes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texte-tertiaire);
}

.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: calc(0.42em + 10px);
  bottom: 2px;
  width: 1px;
  background: var(--bordure-douce);
}

.etapes-gardees li::before {
  background: var(--degrade-accent);
}

.etapes-gardees li:not(:last-child)::after {
  background: linear-gradient(180deg, rgba(255, 169, 107, 0.5), rgba(255, 169, 107, 0.12));
}

.etapes-retirees {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--texte-tertiaire);
}

.etapes-retirees s {
  color: var(--texte-tertiaire);
  text-decoration-thickness: 1.5px;
}

.etapes-retirees s + s {
  margin-left: 0.5rem;
}

.liste-apres li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #7FC98A;
  font-weight: 700;
}

/* Les questions d'arbitrage. Chacune se lit comme une objection résolue. */
.liste-arbitrages {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
}

.liste-arbitrages li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2.1rem;
  border-bottom: 1px solid var(--bordure-douce);
  color: var(--texte);
  font-weight: 600;
  line-height: 1.6;
}

.liste-arbitrages li:last-child {
  border-bottom: 0;
}

.liste-arbitrages li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 12px var(--font-corps);
  color: var(--nuit-profonde);
  background: var(--degrade-accent);
}

/* Le badge de la formule recommandée. Posé au dessus du nom, il ne
   déborde pas de la carte pour ne pas casser l'alignement des trois. */
.formule-badge {
  align-self: flex-start;
  margin: 0 0 0.6rem;
}

/* Le bouton de chaque formule, collé en bas de carte. */
.formule-action {
  margin-top: 0.9rem;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Sur le PVT il n'y a qu'une formule. La carte prend toute la colonne de
   lecture au lieu d'un tiers, et son bouton ne s'étire pas sur 720 px. */
.offre-unique {
  margin: 1.5rem 0 1.25rem;
}

.offre-unique .formule {
  padding: 1.6rem;
}

.offre-unique .formule-action {
  width: auto;
  align-self: flex-start;
  padding-inline: 1.9rem;
}

@media (max-width: 559px) {
  .offre-unique .formule-action {
    width: 100%;
    align-self: stretch;
  }
}

/* Relance de conversion en fin de section. */
.bande-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  background: var(--fond-carte);
  border: 1px solid rgba(232, 96, 28, 0.35);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}

.bande-cta p {
  margin: 0;
  font-weight: 700;
  color: var(--texte);
}

.bande-cta .btn-principal {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width: 620px) {
  .bande-cta p {
    flex: 1 1 auto;
  }

  .bande-cta .btn-principal {
    flex: 0 0 auto;
  }
}

/* FAQ en accordéon natif : aucun script, et le contenu reste dans le HTML
   pour les moteurs de recherche même quand le bloc est replié. */
.faq-item {
  border-bottom: 1px solid var(--bordure-douce);
}

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.2rem 1rem 0;
  font: 700 1rem/1.5 var(--font-corps);
  color: var(--texte);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 1.35rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--orange-glow);
  border-bottom: 2px solid var(--orange-glow);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--or-dore);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--orange-glow);
  outline-offset: 3px;
  border-radius: var(--rayon-petit);
}

.faq-item > p {
  margin: 0 0 1.1rem;
  padding-right: 2.2rem;
}

/* Retours clients. Le bloc est en commentaire dans le HTML tant qu'il n'y
   a pas de vrais retours à publier : ce style attend son heure. */
.retour-client {
  margin: 0;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 1.1rem 1.2rem;
}

.retour-client p {
  font-style: italic;
  color: var(--texte);
  margin: 0 0 0.6rem;
}

.retour-client cite {
  font: 700 0.8rem var(--font-corps);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--texte-tertiaire);
}

/* Le comparatif des formules a quatre colonnes : il respire mieux en
   débordant de la colonne de lecture, comme les cartes de formules. */
@media (min-width: 1000px) {
  #comparatif .tableau-comparatif {
    --largeur-comparatif: min(1120px, 100vw - 2.5rem);
    width: var(--largeur-comparatif);
    margin-inline: calc((100% - var(--largeur-comparatif)) / 2);
  }
}

/* En dessous, le tableau défile dans son propre cadre. On le dit, sinon
   la quatrième colonne passe inaperçue. */
.indice-defilement {
  display: block;
  font-size: 0.8rem;
  color: var(--texte-tertiaire);
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 720px) {
  .indice-defilement {
    display: none;
  }
}

/* Sur petit écran, le comparatif défile forcément : quatre colonnes de texte
   ne rentrent pas dans 390 px. On fige alors la colonne des intitulés, sinon
   on ne sait plus quelle ligne on est en train de lire. */
@media (max-width: 719px) {
  #comparatif .tableau-comparatif thead th:first-child,
  #comparatif .tableau-comparatif tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--fond-carte);
    box-shadow: 1px 0 0 var(--bordure-douce);
  }

  #comparatif .tableau-comparatif th,
  #comparatif .tableau-comparatif td {
    padding: 0.7rem 0.8rem;
  }
}

/* Vidéo YouTube dans un article. Tant qu'on n'a pas cliqué, ce n'est qu'une
   image et un lien : aucun script YouTube chargé, aucun cookie posé. */
.video-youtube {
  margin: 1.75rem auto;
  /* Volontairement plus étroite que la colonne de lecture : la vidéo complète
     le texte, elle ne le remplace pas. */
  max-width: 480px;
}

.video-youtube a,
.video-youtube iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}

.video-youtube a {
  position: relative;
  background: var(--fond-carte);
}

.video-youtube img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le bouton de lecture, dessiné en CSS pour éviter une image de plus. */
.video-youtube .lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: rgba(26, 18, 8, 0.72);
  border: 1.5px solid rgba(255, 169, 107, 0.55);
  backdrop-filter: blur(4px);
  transition: background var(--transition), transform var(--transition);
}

.video-youtube .lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--sable-chaud);
}

.video-youtube a:hover .lecture,
.video-youtube a:focus-visible .lecture {
  background: var(--orange-feu);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-youtube a:hover .lecture::after,
.video-youtube a:focus-visible .lecture::after {
  border-left-color: var(--blanc);
}

.video-youtube figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texte-tertiaire);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .video-youtube .lecture {
    transition: none;
  }
}

.autres-guides h2 {
  font: 700 11px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-glow);
  margin-bottom: 1rem;
}

.autres-guides ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.autres-guides a {
  display: block;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 0.9rem 1.1rem;
  color: var(--sable-chaud);
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}

.autres-guides a:hover {
  background: var(--fond-carte-hover);
  transform: translateX(3px);
  color: var(--or-dore);
}

.autres-guides .pays-guide {
  display: block;
  margin-bottom: 0.15rem;
}

/* Titre et description du lien étaient tous deux en ligne : le texte se lisait
   « Quelle assurance voyage choisirPlafonds, franchise… », sans espace ni
   respiration. Chacun prend sa ligne, avec la hiérarchie qui va avec. */
.autres-guides a b {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--sable-chaud);
}

.autres-guides a span:not(.pays-guide) {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

/* Variante sans liste : les liens sont enfants directs du bloc et se
   touchaient, faute de gouttière. */
.autres-guides > a + a {
  margin-top: 0.75rem;
}

/* Applications citées dans un article. Même chip clair que les logos de
   marque des cartes produit, pour que les logos sombres ou blancs restent
   lisibles. Si le fichier manque, l'attribut onerror du HTML remet un
   emoji à la place. */
.grille-apps {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

@media (min-width: 560px) {
  .grille-apps {
    grid-template-columns: 1fr 1fr;
  }
}

.carte-app {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 0.9rem 1rem;
}

/* Le titre seul ne faisait que 20 px de haut. Le lien est étiré sur toute la
   carte : on tape n'importe où, rien ne change à l'œil. Chaque carte ne
   contient qu'un seul lien, donc rien n'est recouvert. */
.carte-app h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.icone-app {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  border-radius: 10px;
  background: var(--sable-chaud);
  padding: 6px;
}

.icone-app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.carte-app h3 {
  font: 700 1rem var(--font-corps);
  margin-bottom: 0.15rem;
}

.carte-app h3 a {
  color: var(--sable-chaud);
}

.carte-app h3 a:hover {
  color: var(--or-dore);
}

.carte-app p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  line-height: 1.55;
}

/* Photos dans le corps d'un article. Les paysages prennent toute la
   colonne de lecture, les portraits sont bridés pour ne pas transformer
   l'article en couloir vertical. */
.photo-article {
  margin: 1.75rem 0;
}

.photo-article img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.photo-article.portrait img {
  max-width: 440px;
  margin-inline: auto;
}

.photo-article figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texte-tertiaire);
  text-align: center;
}

/* Deux photos côte à côte : utile pour deux portraits pris au même
   endroit, qui se répondent mieux en duo qu'empilés. */
.duo-photos {
  display: grid;
  gap: 0.75rem;
  margin: 1.75rem 0;
}

@media (min-width: 560px) {
  .duo-photos {
    grid-template-columns: 1fr 1fr;
  }
}

.duo-photos .photo-article {
  margin: 0;
}

.duo-photos .photo-article.portrait img {
  max-width: 100%;
}

/* Repères d'un guide : quatre chiffres clés en tête d'article, pour donner
   le format du voyage avant même de lire. */
.reperes {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
}

.repere {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 0.9rem 1rem;
}

.repere b {
  display: block;
  font: 800 1.35rem/1.2 var(--font-corps);
  color: var(--orange-glow);
  margin-bottom: 0.2rem;
}

/* Certaines valeurs sont du texte et non un nombre : on réduit la taille
   pour qu'elles tiennent sur deux lignes au maximum. */
.repere.texte b {
  font-size: 1rem;
  line-height: 1.35;
}

.repere span {
  font: 700 10px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--texte-tertiaire);
}

/* Frise de l'itinéraire : les étapes numérotées reliées par un trait, pour
   voir le tracé d'un coup d'oeil avant d'entrer dans le détail. */
.frise {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2.25rem;
}

.frise li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.15rem 3rem;
  color: var(--sable-chaud);
  font-weight: 700;
}

.frise li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 13px var(--font-corps);
  color: var(--nuit-profonde);
  background: var(--degrade-accent);
}

/* Le trait de liaison s'arrête à la dernière étape. */
.frise li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 36px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 169, 107, 0.45), rgba(255, 169, 107, 0.06));
}

.frise li span {
  display: block;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--texte-tertiaire);
}

/* ---------- 15. Pages à forte intention (comparatifs, codes promo) ---------- */

/* Tableau comparatif : il déborde forcément sur téléphone, on le fait
   défiler dans son propre cadre plutôt que d'écraser les colonnes. */
.tableau-comparatif {
  overflow-x: auto;
  margin: 1.5rem 0 1.75rem;
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  background: var(--fond-carte);
}

.tableau-comparatif table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tableau-comparatif th,
.tableau-comparatif td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure-douce);
}

.tableau-comparatif thead th {
  font: 700 12px var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange-glow);
  white-space: nowrap;
}

.tableau-comparatif tbody th {
  color: var(--sable-chaud);
  font-weight: 700;
  white-space: nowrap;
}

.tableau-comparatif td {
  color: var(--texte-secondaire);
  line-height: 1.5;
}

.tableau-comparatif tbody tr:last-child th,
.tableau-comparatif tbody tr:last-child td {
  border-bottom: 0;
}

/* Bloc code promo mis en avant en tête de page dédiée. */
.bloc-code-promo {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-douce);
  border-top: 4px solid var(--orange-feu);
  border-radius: var(--rayon);
  padding: 1.5rem;
  text-align: center;
}

.bloc-code-promo .ligne-code {
  justify-content: center;
  margin: 1rem 0;
}

.bloc-code-promo .btn-lien {
  display: inline-flex;
}

/* Date de vérification, en pied d'article : signale au lecteur et à Google
   que la page est tenue à jour. */
.date-maj {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--bordure-douce);
  font-size: 0.85rem;
  color: var(--texte-tertiaire);
}

/* ---------- 16. Menu mobile ---------- */

/* Bouton hamburger, visible seulement quand la barre ne tient plus sur une
   ligne. Au delà, la navigation complète reprend sa place. */
.bouton-menu {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--bordure-douce);
  border-radius: 12px;
  background: rgba(255, 169, 107, 0.06);
  color: var(--sable-chaud);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.bouton-menu:hover {
  background: rgba(255, 169, 107, 0.14);
}

/* Trois barres dessinées en CSS : une vraie et deux pseudo éléments. */
.bouton-menu .barres,
.bouton-menu .barres::before,
.bouton-menu .barres::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--transition), background 0.2s;
}

.bouton-menu .barres {
  position: relative;
}

.bouton-menu .barres::before,
.bouton-menu .barres::after {
  content: "";
  position: absolute;
  left: 0;
}

.bouton-menu .barres::before { top: -6px; }
.bouton-menu .barres::after  { top: 6px; }

/* Ouvert, le hamburger devient une croix. */
.bouton-menu[aria-expanded="true"] .barres {
  background: transparent;
}

.bouton-menu[aria-expanded="true"] .barres::before {
  transform: translateY(6px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] .barres::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 859px) {
  /* Sur mobile la navigation devient un panneau qui se déplie sous la barre,
     plutôt que six pastilles qui débordent sur trois lignes. */
  .nav-principale {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s var(--transition);
  }

  .nav-principale > ul {
    overflow: hidden;
    flex-direction: column;
    /* nowrap est indispensable : en colonne avec une hauteur plafonnée,
       un flex-wrap hérité répartirait les rubriques sur plusieurs colonnes
       au lieu de les faire défiler. */
    flex-wrap: nowrap;
    gap: 2px;
    min-height: 0;
  }

  .nav-principale.ouvert {
    grid-template-rows: 1fr;
  }

  /* Une rubrique dépliée peut rendre la liste plus haute que l'écran :
     on la plafonne et on la rend défilante, plutôt que de laisser l'entête
     collée devenir plus grande que la fenêtre. */
  .nav-principale.ouvert > ul {
    padding: 0.6rem 0 0.3rem;
    max-height: calc(100vh - 5.5rem);
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-principale a {
    width: 100%;
    border-radius: var(--rayon-petit);
    font-size: 1rem;
    padding: 0.55rem 0.9rem;
  }

  /* Le lien de la page courante reste repérable dans la liste dépliée. */
  .nav-principale a[aria-current="page"] {
    background: rgba(255, 169, 107, 0.16);
  }
}

@media (min-width: 860px) {
  .bouton-menu {
    display: none;
  }
}

/* Le mouvement du panneau suit la préférence système. */
@media (prefers-reduced-motion: reduce) {
  .nav-principale,
  .bouton-menu .barres,
  .bouton-menu .barres::before,
  .bouton-menu .barres::after {
    transition: none;
  }
}

/* ---------- 17. Fiche produit dépliable ---------- */

/* Preuve d'usage, juste sous les badges. Volontairement sobre : c'est
   une information de crédibilité, pas un argument commercial. */
.anciennete {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  color: var(--texte-tertiaire);
  font: 600 0.76rem var(--font-corps);
}

.anciennete::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or-dore);
  flex-shrink: 0;
}

/* La fiche s'appuie sur <details> natif : pas une ligne de JavaScript,
   le contenu replié reste dans le HTML donc lisible par Google, et le
   clavier fonctionne sans rien ajouter. */
.fiche {
  border-top: 1px solid var(--bordure-douce);
  padding-top: 0.6rem;
}

/* padding vertical : la cible tactile fait ainsi une quarantaine de
   pixels de haut au lieu de la seule hauteur du texte, ce qui la rend
   atteignable au pouce sur téléphone. */
.fiche-resume {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  /* C'est le geste le plus fréquent des pages comparatives : il lui faut
     une vraie zone tactile. */
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--orange-glow);
  font: 700 0.8rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color var(--transition);
}

/* Le marqueur natif diffère selon les navigateurs : on le retire des
   deux côtés et on dessine notre propre chevron. */
.fiche-resume::-webkit-details-marker {
  display: none;
}

.fiche-resume::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

.fiche[open] .fiche-resume::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.fiche-resume:hover {
  color: var(--or-dore);
}

.fiche-resume:focus-visible {
  outline: 2px solid var(--orange-glow);
  outline-offset: 3px;
  border-radius: 4px;
}

.fiche-corps {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texte-secondaire);
}

/* L'avis perso est la seule voix à la première personne de la fiche :
   il garde le serif italique utilisé partout pour la parole de Julien. */
.fiche-avis {
  font: italic 400 0.98rem/1.5 var(--font-titre);
  color: var(--texte);
  border-left: 2px solid var(--orange-feu);
  padding-left: 0.75rem;
}

.fiche-titre {
  color: var(--texte-tertiaire);
  font: 700 0.7rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
}

.fiche-corps ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fiche-corps li {
  position: relative;
  padding-left: 1.15rem;
}

.fiche-corps li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.fiche-usages li::before {
  content: "›";
  color: var(--orange-glow);
}

.fiche-plus li::before {
  content: "+";
  color: #7FC98A;
}

.fiche-moins li::before {
  content: "−";
  color: var(--texte-tertiaire);
}

/* Avantages et limites côte à côte dès qu'il y a la place. Sur une carte
   de grille en trois colonnes, la place manque : ils restent empilés. */
.fiche-balance {
  display: grid;
  gap: 0.8rem;
}

.fiche-pour-qui {
  background: rgba(255, 169, 107, 0.07);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
}

.fiche-pour-qui span {
  display: block;
  color: var(--or-dore);
  font: 700 0.68rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.2rem;
}

/* La carte vedette occupe toute la largeur de la grille : à partir de la
   tablette, ses avantages et ses limites tiennent côte à côte. En dessous,
   deux colonnes donneraient des lignes de dix caractères : on empile. */
@media (min-width: 720px) {
  .carte-vedette .fiche-balance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }
}

/* Sur téléphone la grille reste à deux colonnes : des cartes d'environ
   160 px, parfaites pour parcourir, impossibles à lire dès qu'on déplie
   une fiche. La carte dont la fiche est ouverte prend donc toute la
   largeur, et se resserre dès qu'on la referme. Les navigateurs sans
   :has() gardent simplement l'ancien comportement. */
@media (max-width: 719px) {
  .grille-liens .carte-lien:has(.fiche[open]) {
    grid-column: 1 / -1;
  }
}

/* Rappel : les cartes « Bientôt » gardent leur fiche à pleine lisibilité.
   C'est voulu, le conseil vaut même sans lien de parrainage derrière, et
   c'est ce contenu que Google indexe. L'atténuation de ces cartes est
   ciblée sur leur identité et leur bouton, voir .carte-lien.a-venir. */

@media (prefers-reduced-motion: reduce) {
  .fiche-resume,
  .fiche-resume::after {
    transition: none;
  }
}

/* ---------- 18. Méga menu ---------- */

/* Le HTML des panneaux est écrit en dur dans chaque page : les liens sont
   suivis par Google et la navigation fonctionne sans JavaScript. Le style
   ci dessous gère deux formes très différentes : un panneau flottant sur
   grand écran, un accordéon dans la liste sur téléphone. */

.nav-item {
  position: relative;
}

.nav-item-deroulant {
  display: flex;
  align-items: center;
}

/* Chevron d'ouverture, séparé du lien : le lien mène toujours à la page
   pilier, le bouton ne fait qu'ouvrir le panneau. Deux gestes distincts
   pour deux intentions distinctes. */
.bouton-deroulant {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -0.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-tertiaire);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.bouton-deroulant svg {
  width: 14px;
  height: 14px;
}

.bouton-deroulant:hover {
  color: var(--orange-glow);
}

.bouton-deroulant:focus-visible {
  outline: 2px solid var(--orange-glow);
  outline-offset: 2px;
}

/* Pilier de la page courante : la rubrique parente reste signalée même
   quand on est sur une de ses pages filles (ex. le visa sous Australie). */
.nav-item-deroulant.section-active > a {
  color: var(--orange-glow);
}

.megamenu-titre {
  color: var(--or-dore);
  font: 700 0.7rem var(--font-corps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.6rem;
}

.megamenu ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Colonne promotionnelle, présente dans tous les panneaux : les codes
   actifs deviennent atteignables depuis n'importe quelle page du site. */
.megamenu-rail {
  background: rgba(255, 169, 107, 0.06);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon-petit);
  padding: 1rem;
}

.megamenu-promos a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  transition: background var(--transition);
}

.megamenu-promos a:hover {
  background: rgba(255, 169, 107, 0.1);
}

.megamenu-promos b {
  display: block;
  color: var(--sable-chaud);
  font: 700 0.88rem var(--font-corps);
}

.megamenu-promos span {
  display: block;
  color: var(--texte-tertiaire);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Sélecteur volontairement plus spécifique que « .megamenu a », défini plus
   bas, qui écrasait la couleur sombre et rendait le bouton illisible sur son
   fond orange. */
.megamenu a.megamenu-cta {
  display: block;
  margin-top: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  text-align: center;
  background: var(--degrade-accent);
  color: var(--nuit-profonde);
  font: 700 0.82rem var(--font-corps);
  transition: filter var(--transition);
}

.megamenu-cta:hover {
  filter: brightness(1.08);
}

/* Onglet mis en avant, seul élément coloré de la barre : c'est la page
   qui rapporte, elle doit se distinguer des rubriques de contenu. */
.nav-principale a.nav-bons-plans {
  color: var(--or-dore);
  border: 1px solid rgba(245, 200, 66, 0.4);
  background: rgba(245, 200, 66, 0.08);
  font-weight: 700;
}

.nav-principale a.nav-bons-plans:hover {
  background: rgba(245, 200, 66, 0.16);
  color: var(--or-dore);
}

/* ----- Grand écran : panneau flottant ----- */
@media (min-width: 860px) {
  /* Le panneau prend toute la largeur de la fenêtre et se cale sous
     l'entête. Ancré à son onglet, il sortait de l'écran sur les rubriques
     de droite : ici la question ne se pose plus, quelle que soit la
     rubrique et quelle que soit la largeur de l'écran.
     position: static sur l'onglet est indispensable, sinon le panneau se
     positionnerait par rapport à lui et non par rapport à l'entête. */
  .nav-item {
    position: static;
  }

  /* L'onglet est prolongé jusqu'au bas de l'entête pour qu'il touche le
     panneau. Sans ça, la souris traverserait le rembourrage de l'entête,
     perdrait le survol, et le panneau se refermerait avant d'être atteint.
     La marge négative annule le décalage visuel du rembourrage ajouté. */
  .nav-item-deroulant {
    padding-bottom: 1rem;
    margin-bottom: -1rem;
  }

  .megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--fond-carte);
    border-top: 1px solid var(--bordure-douce);
    border-bottom: 1px solid var(--bordure-douce);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition),
      visibility var(--transition);
  }

  .nav-item-deroulant:hover > .megamenu,
  .nav-item-deroulant:focus-within > .megamenu,
  .nav-item-deroulant.deroule > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Colonnes fixées plutôt qu'auto-fit : chaque panneau a la même forme,
     deux colonnes de liens puis le rail promotionnel. Largeur alignée sur
     celle du contenu des pages, pour que le menu retombe sur la même grille. */
  .megamenu-grille {
    display: grid;
    grid-template-columns: 1fr 1fr 17rem;
    gap: 2.5rem;
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
    padding: 2rem 0 2.2rem;
  }

  .megamenu a {
    display: block;
    padding: 0.35rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: 8px;
    color: var(--texte-secondaire);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
  }

  .megamenu ul a:hover {
    color: var(--sable-chaud);
    background: rgba(255, 169, 107, 0.1);
  }

  .nav-item-deroulant.deroule .bouton-deroulant,
  .nav-item-deroulant:hover .bouton-deroulant {
    color: var(--orange-glow);
    transform: rotate(180deg);
  }
}

/* ----- Téléphone : accordéon dans la liste ----- */
@media (max-width: 859px) {
  .nav-item-deroulant {
    flex-wrap: wrap;
  }

  .nav-item-deroulant > a {
    flex: 1;
    width: auto;
  }

  .bouton-deroulant {
    width: 44px;
    height: 44px;
    margin-left: 0;
    color: var(--texte-secondaire);
  }

  /* Même mécanique que le panneau principal : une grille qui passe de
     0fr à 1fr, seule façon d'animer une hauteur inconnue sans JavaScript. */
  .megamenu {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s var(--transition);
  }

  .megamenu-grille {
    overflow: hidden;
    min-height: 0;
  }

  .nav-item-deroulant.deroule > .megamenu {
    grid-template-rows: 1fr;
  }

  .nav-item-deroulant.deroule .bouton-deroulant {
    transform: rotate(180deg);
    color: var(--orange-glow);
  }

  .megamenu-colonne,
  .megamenu-rail {
    padding: 0.5rem 0 0.5rem 0.9rem;
    border-left: 2px solid var(--bordure-douce);
    margin: 0.3rem 0 0.3rem 0.6rem;
  }

  .megamenu-rail {
    border-left: 0;
    margin-left: 0.6rem;
  }

  .megamenu ul a {
    font-size: 0.94rem;
    padding: 0.45rem 0.7rem;
  }
}

/* Les sections des pages catégorie sont visées par les ancres du menu :
   sans cette marge, leur titre se glisserait sous l'entête collée. */
.section-souscategorie h2,
.section-indispensables {
  scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  .megamenu,
  .bouton-deroulant {
    transition: none;
  }
}

/* ---------- 19. Signature animée de l'entête ---------- */

/* Le wordmark s'écrit lettre après lettre au chargement, puis un petit
   pictogramme s'échappe sur la droite. Tout est en CSS : le JavaScript ne
   fait que découper le mot en lettres et poser le pictogramme.
   Deux garde fous : les lettres restent en opacité 0 et non en display
   none, donc la largeur est réservée dès le premier rendu et rien ne
   bouge ; et si le JavaScript ne s'exécute pas, le mot s'affiche
   normalement, sans animation. */

.logo {
  position: relative;
}

.lettre-logo {
  display: inline-block;
  opacity: 0;
  animation: frappe-lettre 0.09s ease-out forwards;
  animation-delay: calc(var(--i) * 55ms);
}

@keyframes frappe-lettre {
  from {
    opacity: 0;
    transform: translateY(0.06em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le pictogramme est en position absolue, calé juste après le mot : il ne
   prend aucune place dans le flux et ne décale donc jamais la navigation. */
.envol {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 0.3rem;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: var(--orange-glow);
  opacity: 0;
  pointer-events: none;
}

.envol svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* L'avion file vers la droite. Le pictogramme d'origine pointe vers le
   haut : la rotation de 90 degrés, reprise dans chaque étape, le remet
   dans le sens de la marche. */
.envol-avion {
  animation: vol-droite 1.8s cubic-bezier(0.3, 0, 0.6, 1) forwards;
  animation-delay: var(--depart, 0.7s);
}

@keyframes vol-droite {
  0% {
    opacity: 0;
    transform: translateX(-6px) scale(0.7) rotate(90deg);
  }
  18% {
    opacity: 0.9;
    transform: translateX(0) scale(1) rotate(90deg);
  }
  84% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateX(54px) scale(0.9) rotate(90deg);
  }
}

/* La caméra se pose, déclenche un flash, puis disparaît. Elle ne se
   déplace pas : c'est le flash qui fait l'événement. */
.envol-camera {
  animation: prise-de-vue 1.8s ease-out forwards;
  animation-delay: var(--depart, 0.7s);
}

@keyframes prise-de-vue {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  16% {
    opacity: 0.9;
    transform: scale(1);
  }
  52% {
    opacity: 0.9;
    transform: scale(1);
  }
  /* le petit sursaut du déclenchement */
  58% {
    opacity: 1;
    transform: scale(1.14);
  }
  66% {
    transform: scale(1);
  }
  88% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* Le flash lui même : un halo qui gonfle et s'éteint aussitôt. Il est
   porté par un pseudo élément, donc aucune balise en plus dans la page. */
.envol-camera::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(245, 200, 66, 0.55) 42%,
    transparent 70%
  );
  opacity: 0;
  animation: eclair 1.8s ease-out forwards;
  animation-delay: var(--depart, 0.7s);
}

@keyframes eclair {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.35);
  }
  58% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* Le coureur part sur la droite, avec un très léger rebond de foulée. */
.envol-course {
  animation: foulee 1.8s cubic-bezier(0.3, 0, 0.6, 1) forwards;
  animation-delay: var(--depart, 0.7s);
}

@keyframes foulee {
  0% {
    opacity: 0;
    transform: translate(-4px, 0) scale(0.75);
  }
  16% {
    opacity: 0.9;
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(14px, -2px) scale(1);
  }
  62% {
    transform: translate(26px, 0) scale(1);
  }
  84% {
    opacity: 0.55;
    transform: translate(38px, -2px) scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translate(52px, 0) scale(0.9);
  }
}

/* Préférence système respectée : aucune animation, le mot est là d'emblée
   et aucun pictogramme n'est inséré (voir initialiserSignature). */
@media (prefers-reduced-motion: reduce) {
  .lettre-logo {
    opacity: 1;
    animation: none;
  }

  .envol {
    display: none;
  }
}

/* ---------- 20. Animations de lecture des articles ---------- */

/* Les blocs visuels d'un guide se posent en fondu quand ils entrent à
   l'écran. Le texte courant, lui, n'est jamais animé : un paragraphe qui
   arrive en retard gêne la lecture au lieu de l'embellir.
   Tout passe par le même observateur que le reste du site (la classe
   .revele), on ne rajoute donc aucun écouteur de défilement. */

/* Variante photo : plus lente que les cartes, et avec un très léger
   agrandissement au départ, pour que l'image donne l'impression de se
   poser plutôt que d'apparaître d'un coup. */
.js .revele-photo {
  opacity: 0;
  transform: translateY(26px) scale(1.02);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--stagger, 0) * 110ms);
}

.js .revele-photo.visible {
  opacity: 1;
  transform: none;
}

/* Survol d'une photo d'article : une respiration, rien de plus. Aucun
   overflow à gérer, l'image emporte son propre arrondi en grandissant. */
.photo-article img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s ease;
}

@media (hover: hover) {
  .photo-article:hover img {
    transform: scale(1.02);
    box-shadow: var(--ombre-glow);
  }
}

/* Les étapes d'une frise arrivent l'une après l'autre, dans l'ordre de
   lecture, avec un déplacement plus court que les autres blocs.
   La seconde règle est indispensable : sans elle, ce sélecteur est plus
   spécifique que le .revele.visible générique et les étapes resteraient
   décalées de 14 pixels pour toujours. */
.js .frise li.revele {
  transform: translateY(14px);
}

.js .frise li.revele.visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .revele-photo {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .photo-article img,
  .photo-article:hover img {
    transition: none;
    transform: none;
  }
}

/* Liens utiles du pied de page. La page à propos y figure en premier :
   elle doit rester atteignable en un clic depuis n'importe quelle page,
   c'est elle qui établit qui écrit le site. */
.liens-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.4rem;
  margin: 0;
}

.liens-pied a {
  /* Zone tactile portée à 44 px : ces liens ne faisaient que 23 px de haut,
     soit la moitié de ce qu'un pouce vise sans se tromper. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
  color: var(--texte-secondaire);
  font-size: 0.88rem;
  font-weight: 600;
  transition: color var(--transition);
}

.liens-pied a:hover {
  color: var(--orange-glow);
}

/* ---------- 21. Frise qui se dessine et pastille de statut ---------- */

/* La frise d'itinéraire se construit à mesure qu'on la découvre : le
   numéro se pose, puis le trait descend jusqu'à l'étape suivante.
   Sur un guide de voyage, une ligne qui trace la route porte du sens,
   contrairement à une animation purement décorative.
   Tout est en CSS et repose sur la classe .visible déjà posée par
   l'observateur : aucune écoute de défilement en plus. */

.js .frise li::before {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}

.js .frise li.visible::before {
  opacity: 1;
  transform: none;
}

/* Le trait se déroule du haut vers le bas, juste après son numéro.
   scaleY est composé par le GPU, contrairement à une animation de
   hauteur qui déclencherait un recalcul de mise en page à chaque image. */
.js .frise li:not(:last-child)::after {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--stagger, 0) * 60ms + 180ms);
}

.js .frise li.visible:not(:last-child)::after {
  transform: scaleY(1);
}

/* Pastille de statut : une diode qui bat, et une information courte.
   Elle dit qu'une page est vivante, ce qui est précisément le reproche
   fait aux guides de voyage laissés à l'abandon. */
.pastille-statut {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid var(--bordure-douce);
  border-radius: 999px;
  background: rgba(255, 169, 107, 0.07);
  color: var(--texte-secondaire);
  font: 600 0.8rem var(--font-corps);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pastille-statut .point {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange-glow);
}

/* Le halo est un pseudo élément : il se dilate et s'efface sans jamais
   déplacer le point ni le texte à côté. */
.pastille-statut .point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange-glow);
  animation: battement 2.4s ease-out infinite;
}

@keyframes battement {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .frise li::before,
  .js .frise li:not(:last-child)::after {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pastille-statut .point::after {
    animation: none;
  }
}