/* ------------------------------------------------- Choses à faire
   Les repères pratiques passent avant le texte : c'est ce qu'on vient
   chercher, et les enterrer en bas de page revient à ne pas les donner. */
.xp-rep{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  list-style:none;margin:-28px 0 34px;padding:0;background:#dfe7ea;
  border-radius:14px;overflow:hidden;position:relative;z-index:2;
  box-shadow:0 2px 4px rgba(14,58,74,.06),0 14px 34px rgba(14,58,74,.10)}
.xp-rep li{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.xp-rl{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:#6E838C}
.xp-rv{font-size:15px;font-weight:600;color:#0E3A4A;line-height:1.3}
.xp-cons{margin:34px 0;padding:20px 24px;background:#F3F9F7;border-left:4px solid var(--turq,#3CC9CD);border-radius:0 12px 12px 0}
.xp-cons h2{margin:0 0 10px;font-size:19px}
.xp-cons ul{margin:0;padding-left:20px}
.xp-cons li{margin:5px 0}
.xp-vig{margin:28px 0;padding:16px 20px;background:#FFF4ED;border-left:4px solid #E07A3C;border-radius:0 12px 12px 0;color:#5E3A22}
.cf-f{margin:0 0 48px}
.cf-ft{font-size:24px;margin:0 0 18px}
.cf-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;list-style:none;margin:0;padding:0}
.cf-c a{display:block;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 1px 3px rgba(14,58,74,.07),0 10px 26px rgba(14,58,74,.09);transition:transform .18s,box-shadow .18s}
.cf-c a:hover,.cf-c a:focus-visible{transform:translateY(-3px);box-shadow:0 4px 8px rgba(14,58,74,.09),0 18px 40px rgba(14,58,74,.15)}
.cf-v{display:block;aspect-ratio:16/10;overflow:hidden;background:#E4EDEF}
.cf-v img,.cf-v svg{display:block;width:100%;height:100%;object-fit:cover}
.cf-t{display:block;padding:14px 16px 2px;font-size:17px;font-weight:600;color:#0E3A4A;line-height:1.25}
/* Carte à affiche : le visuel porte déjà son titre, peint dessus. On lui
   rend sa proportion d'origine — sans quoi le recadrage mange le premier
   et le dernier mot de chaque ligne — et on ne répète pas le titre en
   dessous, tout en le laissant lisible par les lecteurs d'écran. */
.cf-c-aff .cf-v{aspect-ratio:1200/630}
.cf-c-aff .cf-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cf-c-aff .cf-m{padding-top:14px}

/* ---------------------------------------- Les choses à faire sur l'accueil
   Trente affiches à la suite : la grille est plus serrée que sur la page
   dédiée, où chaque famille a son en-tête et peut respirer. */
.fa{padding:72px 0 78px;background:var(--creme,#FBF7F1)}
.fa .cf-g{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.fa .cf-t{font-size:16px;padding:12px 14px 2px}
.fa .cf-m{padding:0 14px}
.fa .cf-d{padding:7px 14px 16px;font-size:13px}
.fa-p{margin:34px 0 0;text-align:center}
@media (max-width:640px){
  .fa{padding:52px 0 56px}
  .fa .cf-g{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:13px}
  .fa .cf-d{display:none}
}
.cf-m{display:block;padding:0 16px;font-size:12px;color:#6E838C}
.cf-d{display:block;padding:8px 16px 18px;font-size:13.5px;color:#4A5C64;line-height:1.5}

/* ---------------------------------------- Filtres de randonnée
   Huit listes et trois cases : en grille fixe, la dernière passait seule
   à la ligne. Flex avec des bases courtes, comme la barre de recherche. */
.rd-f{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;
  background:#fff;border-radius:16px;padding:18px 20px;margin:0 0 30px;
  box-shadow:0 1px 3px rgba(14,58,74,.07),0 10px 26px rgba(14,58,74,.08)}
.rd-f-c{flex:1 1 150px;min-width:140px;display:flex;flex-direction:column;gap:5px}
.rd-f-c label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#6E838C}
.rd-f-c select{width:100%;padding:8px 10px;border:1px solid #d3dcdf;border-radius:9px;
  background:#fff;font-size:14px;color:#0E3A4A}
.rd-f-cases{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:4px}
.rd-f-case{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#2C4A55;cursor:pointer}
.rd-f-b{flex:1 1 100%;display:flex;align-items:center;gap:16px}
.rd-f-raz{font-size:13px;color:#6E838C}
@media(max-width:600px){.rd-f-c{flex:1 1 100%}}

/* ------------------------------------------------- Largeur du site
   Un constructeur de page installé à côté peut enfermer tout le site dans
   une colonne étroite, en posant une largeur maximale sur <body> : c'est
   ainsi qu'Elementor applique sa disposition « Boîte ». Le thème gère ses
   propres largeurs section par section et n'a aucun besoin de ce cadre ;
   on le neutralise donc, faute de quoi l'accueil s'affiche à sept cents
   pixels sur un écran qui en offre deux mille.

   Si vous voulez vraiment un site en boîte un jour, retirez ces trois
   lignes plutôt que de les contourner ailleurs. */
html,body{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
body{width:auto !important}

/* ------------------------------------- Pages de grille
   Une page faite d'un seul code court n'a pas besoin des 80 pixels de
   respiration d'une section de récit : le titre doit toucher la grille,
   sinon l'écran s'ouvre sur un trou. */
.p-large .head{margin-bottom:26px}
.entry > p:empty{display:none}
.entry .cf-f:first-child{margin-top:0}
.cf-ft{margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--ligne,#e3e8ea)}
@media(min-width:1100px){.cf-g{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}

/* ------------------------------------------------ Carte de l'île
   Le balisage avait changé sans que ces règles suivent : la liste des
   secteurs retombait sur l'affichage par défaut, c'est-à-dire des puces
   et des colonnes vides. */
.ilx-l{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.ilx-map{min-width:0}
.ilx-reel-c{height:min(66vh,560px);border-radius:18px;overflow:hidden;background:#0E3A4A;
  box-shadow:0 2px 6px rgba(14,58,74,.10),0 20px 48px rgba(14,58,74,.16)}
.ilx-reel-c .leaflet-container{height:100%;width:100%;background:#0E3A4A}
.ilx-attente{color:#cfe3e8;text-align:center;padding:48px 20px;margin:0;font-size:14px}
.ilx-src{font-size:11.5px;color:#7A8C93;margin:10px 2px 0;line-height:1.5}

.ilx-side{min-width:0}
.ilx-side-t{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:#6E838C;font-weight:600}
.ilx-f{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.ilx-f-b{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--ligne,#dfe6e8);background:#fff;cursor:pointer;font-size:13px;
  color:#5A6B72;transition:background .15s,color .15s,border-color .15s}
.ilx-f-b i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto;opacity:.45}
.ilx-f-b small{font-size:11px;opacity:.7}
.ilx-f-b.on{background:var(--c);border-color:var(--c);color:#fff}
.ilx-f-b.on i{background:#fff;opacity:1}
.ilx-f-b:hover{border-color:var(--c)}

.ilx-sect{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ilx-sect li{margin:0;padding:0;list-style:none}
.ilx-sect a{display:flex;align-items:center;gap:13px;padding:9px;border-radius:13px;
  background:#fff;border:1px solid var(--ligne,#e3e8ea);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.ilx-sect a:hover,.ilx-sect a.on{border-color:var(--c);transform:translateX(3px);
  box-shadow:0 3px 10px rgba(14,58,74,.10)}
.ilx-sect-v{width:92px;height:64px;border-radius:9px;overflow:hidden;flex:0 0 auto;
  background:var(--c);position:relative}
.ilx-sect-v img{width:100%;height:100%;object-fit:cover;display:block}
.ilx-sect-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ilx-sect-t strong{font-size:15.5px;color:#0E3A4A;line-height:1.2}
.ilx-sect-t em{font-style:normal;font-size:12.5px;color:#5A6B72;line-height:1.35}
.ilx-sect-t small{font-size:11px;color:var(--c);font-weight:600}
.ilx-admin{margin:18px 0 0;padding:11px 13px;border-radius:9px;background:#FFF6E8;
  border-left:3px solid #E0A23C;font-size:12.5px;color:#6B5324;line-height:1.5}

/* Le panneau qui s'ouvre au clic sur un secteur de la carte. */
.ilx-popup .leaflet-popup-content{margin:0;width:260px !important}
.ilx-popup .leaflet-popup-content-wrapper{padding:0;border-radius:13px;overflow:hidden}
.ilx-pop img{width:100%;height:120px;object-fit:cover;display:block}
.ilx-pop{display:flex;flex-direction:column}
.ilx-pop strong{font-size:16px;color:#0E3A4A;padding:12px 14px 2px}
.ilx-pop em{font-style:normal;font-size:13px;color:#5A6B72;padding:0 14px 8px;line-height:1.4}
.ilx-pop-c{font-size:12px;color:#6B5324;background:#FFF6E8;padding:8px 14px;line-height:1.45}
.ilx-pop a{display:block;padding:11px 14px;background:#0E3A4A;color:#fff;text-align:center;
  text-decoration:none;font-size:13.5px;font-weight:600}

@media(max-width:980px){
  .ilx-l{grid-template-columns:1fr}
  .ilx-reel-c{height:420px}
}

/* ------------------------------------- Diaporama du bandeau d'accueil
   Les photographies se superposent et se relaient en fondu. Le léger
   mouvement d'approche évite l'effet de carte postale figée, sans jamais
   assez bouger pour gêner la lecture du titre posé par-dessus. */
.hero-pile{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-pile .hero-img{opacity:0;transition:opacity 1.4s ease-in-out;will-change:opacity}
.hero-pile .hero-img.on{opacity:1}
.hero-diapo .hero-pile .hero-img.on{animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hero-pile .hero-img{transition:none}
  .hero-diapo .hero-pile .hero-img.on{animation:none}
}

/* ------------------------------------------------- L'île en direct
   Le bloc occupait un écran entier pour sept températures. Il redevient
   une bande d'information : on la lit d'un coup d'œil en passant, ce qui
   est exactement l'usage d'un relevé météo. */
.direct{padding:34px 0}
.direct-h{margin-bottom:14px}
.direct-h h2{font-size:clamp(20px,2.6vw,25px);margin-top:6px}
.direct-g{gap:8px}
@media(min-width:1060px){.direct-g{grid-template-columns:repeat(7,1fr)}}
.dcell{padding:11px 8px;gap:5px;border-radius:11px}
.dcell:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,18,19,.07)}
.dcell-i{width:28px;height:28px}
.dcell-i svg{width:16px;height:16px}
.dcell .lab{font-size:8.5px;letter-spacing:.12em}
.dcell .val{font-size:17px;margin:2px 0 1px}
.dcell .sub{font-size:10px;line-height:1.3}
.direct-b{margin-top:12px;gap:7px}
.dtag{padding:5px 12px;font-size:11.5px}
.direct-c{margin-top:12px;padding:10px 14px;font-size:13px}
.direct-s{margin-top:10px;font-size:10.5px}

/* --------------------------------------- Choisir son versant, par l'image
   Sept vignettes photo. La première tient deux colonnes : une grille de
   sept cases identiques se lit comme un tableau, et personne n'y entre
   par un endroit plutôt qu'un autre. */
.vers-g{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.vers-g{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.vers-g{grid-template-columns:repeat(4,1fr)}}
.vers-c{margin:0;padding:0;list-style:none}
.vers-c a{position:relative;display:block;height:100%;min-height:210px;border-radius:16px;
  overflow:hidden;text-decoration:none;color:#fff;background:var(--c);
  box-shadow:0 2px 5px rgba(14,58,74,.08),0 14px 32px rgba(14,58,74,.11);
  transition:transform .2s,box-shadow .2s}
.vers-c a:hover,.vers-c a:focus-visible{transform:translateY(-4px);
  box-shadow:0 6px 12px rgba(14,58,74,.10),0 22px 46px rgba(14,58,74,.18)}
.vers-v{position:absolute;inset:0;display:block;background:var(--c)}
.vers-v img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease-out}
.vers-c a:hover .vers-v img{transform:scale(1.05)}
/* Un voile du bas vers le haut : le texte reste lisible sur une photo
   claire comme sur une photo sombre, sans avoir à les choisir. */
.vers-v::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,32,42,.82) 0%,rgba(6,32,42,.42) 42%,rgba(6,32,42,.06) 100%)}
.vers-t{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;
  padding:18px 18px 16px;height:100%;justify-content:flex-end}
.vers-t strong{font-size:20px;line-height:1.15;letter-spacing:-.015em}
.vers-t em{font-style:normal;font-size:13.5px;line-height:1.4;opacity:.92}
.vers-t small{font-size:11.5px;opacity:.8;margin-top:2px}
@media(min-width:760px){
  .vers-c-g{grid-column:span 2}
  .vers-c-g a{min-height:280px}
  .vers-c-g .vers-t strong{font-size:27px}
  .vers-c-g .vers-t em{font-size:15px}
}

/* Les pages pleine largeur ouvrent sur une grille, pas sur un récit :
   quatre-vingts pixels de respiration au-dessus du titre donnent
   l'impression que la page n'a pas fini de charger. */
.p-large{padding:48px 0 72px}
.p-large .head{margin-bottom:24px}

/* ------------------------------------------- Habillage de la carte
   Les règles générales du thème — notamment img,svg{max-width:100%} et
   les styles de bouton — s'appliquaient aux commandes de Leaflet et les
   déformaient. On les remet d'aplomb, sans toucher au reste. */
.leaflet-container a,.leaflet-container button{box-shadow:none;letter-spacing:normal}
.leaflet-control-zoom a{width:30px;height:30px;line-height:30px;font-size:20px;
  padding:0;border-radius:0;background:#fff;color:#0E3A4A;text-decoration:none;
  display:block;text-align:center}
.leaflet-control-zoom a:hover{background:#f2f5f6}
.leaflet-control-zoom{border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.leaflet-control-layers{border-radius:6px}
.leaflet-control-layers-toggle{width:34px;height:34px;background-size:20px 20px}
.leaflet-control-attribution{font-size:10.5px}
/* Le nom du secteur, posé à même la carte. */
.leaflet-tooltip.ilx-nom{background:none;border:0;box-shadow:none;padding:0;
  color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(6,24,32,.9),0 0 12px rgba(6,24,32,.7);white-space:nowrap}
.leaflet-tooltip.ilx-nom::before{display:none}

/* ═══════════════════════════════════════════════════════════════════
   LES VIGNETTES SE ROGNENT PAR LA DROITE, JAMAIS PAR LA GAUCHE.

   J'ai corrigé ce défaut cinq fois ce soir, bloc par bloc, en essayant
   à chaque fois de reconnaître les affiches pour les traiter à part.
   C'était la mauvaise approche : la reconnaissance peut échouer — une
   image aux dimensions inattendues, une métadonnée absente, un cache qui
   resert l'ancienne page — et chaque échec redonne une vignette tronquée.
   Le défaut revenait donc sans fin, sous une forme un peu différente.

   La règle ci-dessous ne reconnaît rien et ne peut donc rien manquer.
   Elle part d'une observation de Cédric, plus juste que mes tentatives
   précédentes : sur ces affiches, le texte est calé à gauche. Un
   recadrage centré mange donc le début ET la fin de chaque ligne, alors
   qu'un recadrage ancré à gauche ne mange que de l'image, à droite, là
   où il n'y a rien d'écrit. « La route des Laves et le Grand Brûlé » se
   lit en entier, et les cartes gardent une hauteur régulière — ce que
   l'affichage intégral, avec ses bandes noires, ne permettait pas.

   Déclarée en fin de feuille, elle l'emporte sur tout ce qui précède.
   ═══════════════════════════════════════════════════════════════════ */

.cf-v,.rd-c-v,.ds-som-v,.f-card-v,.inc-v,.au-v,.fr-p-v{background:#0B2A33}

.cf-v img,.rd-c-v img,.ds-som-v img,.f-card-v img,.inc-v img,.au-v img,.fr-p-v img,
.cf-v svg,.rd-c-v svg,.ds-som-v svg,.f-card-v svg,.inc-v svg,.au-v svg,.fr-p-v svg{
  object-position:left center !important;
}

/* Le survol agrandissait l'image à l'intérieur d'un cadre fixe. Sans
   recadrage, ce zoom déborderait : on le remplace par un éclaircissement,
   qui donne le même signal sans déformer. */
.cf-c a:hover .cf-v img,.rd-c a:hover .rd-c-v img,
.ds-som-c:hover .ds-som-v img,.f-card a:hover .f-card-v img{
  transform:none !important;
  filter:brightness(1.06);
}

/* La grande carte d'un sommaire de dossiers garde sa mise en page en
   deux colonnes : l'image y est à côté du texte, pas au-dessus. */
@media (min-width:760px){
  .ds-som-g .ds-som-v{flex:0 0 46%}
  .ds-som-g .ds-som-v img{max-height:none}
}

/* Le bandeau d'une page « chose à faire » suit la même règle que les
   vignettes : il portait lui aussi une affiche, et la recadrait. Sur un
   téléphone, le titre « Courir un trail à La Réunion » s'y lisait
   « urir un trail La Réunion ». L'image prend donc sa propre hauteur,
   bornée, et le texte qui suit reste à sa place. */
/* Le bandeau d'une page coupe par le BAS, pas par le côté.
   Sur ces affiches, le titre est peint en bas à gauche. Le bandeau
   affiche déjà ce titre juste en dessous, en vraies lettres : la bande
   peinte n'apporte donc rien et se devine derrière, comme une ombre de
   texte. On ancre l'image en haut, et c'est le bas — donc le texte
   incrusté — qui sort du cadre. Il ne reste que la photographie. */
.ds-hero-v{background:#0B2A33}
.ds-hero-v img,.ds-hero-v svg{object-position:left top !important}

/* ─────────────────────────── Le décor dessiné du bandeau, sur téléphone
   La scène est tracée dans un cadre de 1440 par 760, c'est-à-dire pour un
   écran large. Posée dans un cadre étroit et haut, elle est agrandie pour
   le couvrir : le volcan, qui se tient au tiers de la hauteur, remonte
   alors en plein milieu du texte, et sa fumée traverse les mots. C'est ce
   qu'on voit sur un téléphone — une volute orange en travers du mot
   « ÉMOTIONS ».

   On la confine donc à la moitié basse, sous le texte, où elle fait ce
   pour quoi elle est là : un fond. Elle disparaît de toute façon dès que
   le diaporama d'accueil reçoit ses photographies. */
@media (max-width:760px){
  .hero-scene{top:auto !important;bottom:0 !important;height:56% !important}
  .hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;
    z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(237,248,249,.92) 0%,rgba(237,248,249,.55) 34%,rgba(237,248,249,0) 100%)}
  .hero-in{padding:52px 0 120px}
}