@font-face {
  font-family: "icons";
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/icons.ttf") format("truetype"),
       url("../fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*
Inter : font-family: 'Inter', sans-serif;
Outfit : font-family: 'Outfit', sans-serif;
Epilogue : font-family: 'Epilogue', sans-serif;
*/

:root{
  --brique:#c1666b;   /* Artisanat */
  --brique_hover:#a94f54;
  --bleu:#1e75a0;     /* Croisières / Circuits */
  --bleu_hover:#1d698f;
  --violet:#75417f;   /* Culture / Laos */
  --violet_hover:#5f3468;
  --vert:#4a7c59;     /* Nature / Farm Stay / Informations */
  --vert_hover:#3b6347;
  --jaune:#d99f3e;    /* Spiritualité / Luang Prabang */
  --jaune_hover:#bd8630;
  --orange:#e96a25;   /* Sport & Aventure */
  --orange_hover:#c7561c;
  --gris:#535359;     /* Généraliste */
  --gris_hover:#33404a;

  /* Couleur dominante par catégorie de page (voir zcore_composition_class()).
     Demande utilisateur 2026-09-17 : les 4 champs admin (?exec=configurer_
     template_travel) sont relabellises sans toucher aux noms techniques de
     variable/cle de config ci-dessous (aucune migration de donnees requise,
     les couleurs deja personnalisees par l'utilisateur restent intactes) :
     --c-info (cle couleur_section_informations) s'appelle desormais
     "Destinations" en back-office - toujours l'entree menu "Explorer" plus
     bas dans ce fichier. --c-mice (cle couleur_section_mice) s'appelle
     desormais "Informations" et gouverne l'entree menu "Plus d'infos" (a la
     place de --c-generale, cf. regles nth-child(3)/.info-dropdown plus
     bas). --c-generale (cle couleur_section_autre) s'appelle desormais
     "Autres (contenu general)" et reste la couleur par defaut de --c-page
     ci-dessous. --c-produits (cle couleur_section_produits) ajoute le
     2026-09-17 pour une future categorie de page "Produits". */
  --c-generale:var(--gris);
  --c-circuit:var(--bleu);
  --c-info:var(--brique);
  --c-mice:var(--violet);
  --c-produits:var(--jaune);
  --c-page:var(--c-generale);

  --ink:var(--gris);
  --titre:var(--gris-deep);
  --fond-autre:#faf8f4;
  --gris-bg:#eef1f2; --gris-deep:#33404a; --line:#dedad3;
  --blanc:#fff;
  /* Triplet RGB de --gris-deep, ressorti en variable car repris tel quel
     (hors var()) dans plusieurs box-shadow/overlays du fichier. */
  --ink-rgb:32,39,47;
  --radius-md:0.2em; --radius-lg:0.4em; --radius-xl:1em;
  --shadow-card:0 3px 7px rgba(var(--ink-rgb),.10);
  --shadow-card-hover:0 10px 10px rgba(var(--ink-rgb),.18);

  /* Échelle d'espacement générique, réutilisable partout où un padding/gap
     est posé "à la main" — norme fixée sur .edito-face-avant .content
     (2em, demande utilisateur du 2026-09-07) = --space-lg. Toute nouvelle
     section doit piocher dans cette échelle plutôt qu'inventer une valeur
     ad hoc, pour que les cartes/panneaux du site restent visuellement
     homogènes. */
  --space-xs:.5em; --space-sm:1em; --space-md:1.5em; --space-lg:2em; --space-xl:3em;

  --font-texte: 'Inter', 'Outfit', 'Epilogue', 'Work Sans', Arial, sans-serif; /* I want to test these options */
  --font-titres: 'Fraunces', Georgia, serif;
  --font-eyebrow: var(--font-titres);
}

/* Sommaire (lignes approximatives, à date de la v1.2.2) :
   - Couleurs/thème de page, classe .couleur/data-couleur .......... 61
   - Base (body, typo, liens, boutons, listes, icônes) ............. 81
   - Fil d'ariane .................................................. 180
   - Header (bannière, variantes dist/sommaire/recherche/generale) . 490
   - Grille/sections génériques, rythme de fond alterné ............ 1740
   - Cartes (edito/testimonial/tour/rubrique), médias recadrés ..... 1778
   - CTA (contact, googlemap, prochain événement, a-la-une) ........ 2440
   - Sommaire v1.2.0 (header/breadcrumb dédiés) ..................... 3195
   Section suivante non listée : voir les commentaires /* Titre */ au fil
   du fichier, pas de renumérotation exhaustive pour ce nettoyage. */

/* Couleur dominante par catégorie de page */
html.composition_circuit,
html.composition_circuits { --c-page:var(--c-circuit); }
html.composition_information,
html.composition_informations { --c-page:var(--c-info); }
/* composition_mice : jamais assignee a une rubrique/article (reservee),
   la categorie de page "MICE" est retiree (demande utilisateur 2026-09-17,
   remplacee par Circuits) - le sous-role "Plus d'infos" de --c-mice ci-
   dessus ne concerne que l'entree de menu, pas cette classe de page. */
html.composition_mice { --c-page:var(--c-circuit); }
html.composition_produits { --c-page:var(--c-produits); }
/* La rubrique Agenda/Calendrier (composition="calendar", id_rubrique 67 FR /
   69 EN, verifie en base) est rattachee a la categorie "Informations"
   (--c-mice, personnalise en base sur ce site - pas la valeur par defaut
   --violet, cf. [[project_template_travel_dev]]) plutot qu'a "Autres
   (contenu general)" par defaut (demande utilisateur 2026-09-17) : sans
   cette regle elle retombait sur --c-generale/gris faute de classe
   composition_calendar dediee. */
html.composition_calendar { --c-page:var(--c-mice); }

/* Classe generique "couleur" : chaque <section> du site porte cette classe
   plus un attribut data-couleur (une des 7 couleurs thematiques) qui pilote
   --c-section pour cette section. Remplace les mecanismes ad hoc utilises
   auparavant par certaines sections (style inline --c-accent, classe
   .avant-voyage codee en dur) par un seul point d'entree reutilisable. */
.couleur[data-couleur="brique"] { --c-section:var(--brique); --c-section-hover:var(--brique_hover); }
.couleur[data-couleur="bleu"]   { --c-section:var(--bleu);   --c-section-hover:var(--bleu_hover); }
.couleur[data-couleur="violet"] { --c-section:var(--violet); --c-section-hover:var(--violet_hover); }
.couleur[data-couleur="vert"]   { --c-section:var(--vert);   --c-section-hover:var(--vert_hover); }
.couleur[data-couleur="jaune"]  { --c-section:var(--jaune);  --c-section-hover:var(--jaune_hover); background: var(--blanc);}
.couleur[data-couleur="orange"] { --c-section:var(--orange); --c-section-hover:var(--orange_hover); }
.couleur[data-couleur="gris"]   { --c-section:var(--gris);   --c-section-hover:var(--gris_hover); }
/* 8e teinte, distincte des 7 couleurs thematiques fixes ci-dessus : reprend
   directement la couleur admin-configurable "Informations" (--c-mice) au
   lieu d'une valeur figee, pour les sections qui doivent suivre cette
   categorie plutot qu'une simple variete decorative (ex. section "A lire
   avant de venir" du sommaire, demande utilisateur 2026-09-17). --c-mice n'a pas de variante
   _hover dediee (couleur admin, pas un token fixe du fichier) : assombrie
   via color-mix, meme technique que html.composition_circuits #header-
   banner:before plus haut dans ce fichier. */
.couleur[data-couleur="informations"] { --c-section:var(--c-mice); --c-section-hover:color-mix(in srgb, var(--c-mice) 80%, black); }
/* 2 teintes admin-configurables supplementaires, meme principe que
   "informations" ci-dessus (demande utilisateur 2026-09-17, page sommaire) :
   "destinations" = categorie admin "Destinations" (--c-info) ; "circuits-alt"
   = categorie admin "Circuits" (--c-circuit), utilisee sur les sections en
   fond plein cadre/texte blanc (.selection_edito_a_la_une) plutot que le
   token fixe --bleu, pour suivre la vraie couleur configuree. */
.couleur[data-couleur="destinations"] { --c-section:var(--c-info); --c-section-hover:color-mix(in srgb, var(--c-info) 80%, black); }
.couleur[data-couleur="circuits-alt"] { --c-section:var(--c-circuit); --c-section-hover:color-mix(in srgb, var(--c-circuit) 80%, black); }

/* overflow-x:hidden pose uniquement sur body (ci-dessous) ne suffisait pas
   (retour utilisateur 2026-09-17, site toujours decale vers la droite en
   mobile malgre ce filet) : sur mobile, l'element qui defile reellement est
   <html>, pas <body> - tant que <html> lui-meme n'affiche pas overflow-x:
   hidden, un navigateur mobile peut elargir le "layout viewport" a la
   largeur du contenu qui deborde (marges negatives des slick-list, cf.
   .edito-slick et #circuits-slideshow-home/.mot-slideshow plus bas) au lieu
   de le clipper a la largeur de l'ecran - tout ce qui est positionne par
   rapport au bord droit (dont le bouton hamburger a.nav-toggle,
   position:fixed;right:1em plus bas dans ce fichier) se retrouve alors
   decale/coupe, meme si sa regle CSS n'a pas change. Les 2 regles doivent
   rester ensemble. */
html{ overflow-x: hidden; }
body{
  font-family:var(--font-texte);
  color:var(--ink);
  background:#f9f7f6;
  -webkit-font-smoothing:antialiased;
  /* Base ramenee de 14pt (~18.7px) a 16px le 2026-09-18 (retour utilisateur :
     police mobile "tres inegale", titres/textes en general trop grands) -
     16px aligne aussi 1em (cascade body) sur 1rem (racine html, jamais
     redefinie, cf. grid.css font-size:100%), qui servait jusqu'ici de
     reference a plusieurs titres en clamp()/rem (header-titre, header-emblem
     plus bas dans ce fichier) sans jamais correspondre a l'echelle em du
     reste du texte. */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.75em;
  /* Filet de securite anti-scroll horizontal mobile (retour utilisateur
     2026-09-17) : plusieurs blocs du theme debordent legerement de 100vw sur
     petit ecran (marges negatives des slick-list, cf. .edito-slick et
     #circuits-slideshow-home/.mot-slideshow plus bas) sans qu'aucun ancetre
     ne les recadre. overflow-x:hidden ici coupe tout debordement horizontal
     residuel au niveau du document plutot que de corriger chaque carousel
     un par un. */
  overflow-x: hidden;
}
/*  body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
  }
*/
  a {
    -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    color: var(--c-page);
    text-decoration: none;
    border-bottom: dotted 1px;
  }
    a:hover {
      border-bottom-color: transparent;
    }

  strong, b {font-weight: 700;}
  img {max-width: 100%; height: auto;}
  em, i {font-style: italic;}
  p, ul, ol, dl, table, blockquote {margin: 0 0 2em 0;}

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titres);
    color: var(--titre);
    font-weight: 800;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    letter-spacing: 0.02em;
  }

  h1 {
    font-size: 2.5em;
  }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
      color: inherit;
      text-decoration: none;
      border: 0;
    }

  h2 {
    font-size: 1.5em;
    letter-spacing: 0em;
    line-height: 1.1em;
  }

  h3 {
    font-size: 1.15em;
    letter-spacing: 0.025em;
  }

  /* h4-h6 : titres dans les blocs (cartes, etc.), harmonisés sur un seul
     gabarit — taille reprise du titre des 6 bénéfices (demande du 2026-08-21) */
  h4 {
    font-size: .95em;
  }

  sub {
    font-size: 0.8em;
    position: relative;
    top: 0.5em;
  }

  sup {
    font-size: 0.8em;
    position: relative;
    top: -0.5em;
  }

  hr {
    border-top: solid 1px rgba(124, 128, 129, 0.2);
    border: 0;
    margin-bottom: 1.5em;
  }

  blockquote {
    border-left: solid 0.5em rgba(124, 128, 129, 0.2);
    font-style: italic;
    padding: 1em 0 1em 2em;
  }

  /* Fil d'Ariane */

  /* Fond anthracite + menu horizontal generalises a #breadcrumb par defaut
     (demande utilisateur 2026-09-15, confirme "toujours" sur toutes les
     pages le 2026-09-16 - l'ancien fond bleu propre a rubrique-circuits a
     ete retire a cette occasion, voir RUBRIQUE CIRCUITS plus bas). Le
     positionnement sticky au scroll (.is-fixed) est lui aussi generalise a
     toutes les pages depuis le 2026-09-17 (script commun dans
     breadcrumb/dist.html) - voir la regle .is-fixed juste apres, qui a
     remplace les anciens blocs dupliques html.page_sommaire/
     html.rubrique_circuits. */
  #breadcrumb {
    position: relative;
    z-index: 70;
    padding: .7em 0;
    border-bottom: 0;
    background: rgba(var(--ink-rgb), .94);
    color: rgba(255, 255, 255, .85);
  }
    #breadcrumb.is-fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
  #breadcrumb .container {
    display: flex;
    align-items: center;
    /* flex-start (et non space-between) : c'est la marge auto posee sur
       ul.breadcrumb-items plus bas qui pousse le menu horizontal a droite,
       pas justify-content (sans effet sur les pages a un seul enfant, rien
       a repartir, donc aucune regression sur le fil d'ariane seul). */
    justify-content: flex-start;
    gap: 1em;
  }
  /* Menu horizontal a droite du fil d'ariane, boutons A-/A+ a gauche
     (demande utilisateur 2026-09-15). #breadcrumb .container est deja en
     flex : un simple `order` sur cet enfant suffit, sans toucher a l'ordre
     du HTML ni au JS d'injection. `.nav-secondary-wrap` est scope a
     #breadcrumb ici (pas de regle globale sur cette classe), seul contexte
     ou elle vit encore depuis la suppression de la bar2 des headers
     (2026-09-16). `.boutonstexte` recoit son `order:-1` plus bas, regroupe
     avec le reste de ses regles existantes plutot que duplique ici. Les
     drapeaux de langue, autrefois ici (.breadcrumb-lang), vivent desormais
     dans le panneau mobile du menu principal (entree "Langue", cf.
     inclure/menu-principal-desktop.html et regles .menu-entree-lang plus
     bas dans ce fichier) - demande utilisateur 2026-09-18. */
  #breadcrumb .nav-secondary-wrap { order: 1; flex-shrink: 0; }
  ul.breadcrumb-items {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto 0 0;
    padding: 0;
    font-size: .8em;
    letter-spacing: .03em;
    color: inherit;
  }
    ul.breadcrumb-items li.item { display: flex; align-items: center; }
    /* Demande utilisateur 2026-09-16 : inversion du contraste - les
       rubriques meres (liens ancetres, menant vers le contenu courant)
       ressortent en blanc vif, tandis que le contenu courant (dernier
       maillon, span non cliquable) est attenue par opacite. */
    ul.breadcrumb-items li.item.active { opacity: .7; font-weight: 500; }
    ul.breadcrumb-items a { color: var(--blanc); border-bottom-color: transparent; opacity: 1; }
    ul.breadcrumb-items a:hover { opacity: .8; }
    ul.breadcrumb-items .sep { margin: 0 .5em; opacity: .5; }
    /* Icone "maison" (SVG images/icon_home.svg) a la place du texte "Accueil"
       en tete du fil d'ariane (breadcrumb/dist.html et inc-objet.html) - lien
       icone seule, texte accessible via title/aria-label sur le <a>. */
    ul.breadcrumb-items .icon-home {
      display: inline-block;
      width: 1.6em;
      height: 1.6em;
      background: url("../images/icon_home.svg") no-repeat center / contain;
    }
    /* Demande utilisateur 2026-09-16 : l'icone Home garde son ancien
       comportement (grise au repos, blanc vif au survol), non concernee par
       l'inversion de contraste ci-dessus appliquee aux rubriques meres. */
    ul.breadcrumb-items a.icon-home { opacity: .75; }
    ul.breadcrumb-items a.icon-home:hover { opacity: 1; }

    /* Demande utilisateur 2026-09-17 : en mobile, l'icone Home du fil
       d'ariane disparait (deplacee dans le panneau mobile, cf. entree
       "Home" de inclure/menu-principal-desktop.html). */
    @media screen and (max-width: 840px) {
      ul.breadcrumb-items li.breadcrumb-home { display: none; }
    }
    /* Demande utilisateur 2026-09-18 : sur le sommaire (#ENV{type-page}
       sommaire, seule page sans id_rubrique/id_article - cf. body.html pour
       la classe et breadcrumb/dist.html pour la logique #GET{objet}), le
       fil d'ariane ne contient jamais que l'icone Home ci-dessus (masquee
       en mobile) - les drapeaux qui occupaient le reste du bandeau
       #breadcrumb en mobile ont eux aussi demenage dans le panneau (cf.
       plus haut). Ne restent alors dans #breadcrumb, en mobile sur cette
       page, que des enfants sans contenu visible (ul.breadcrumb-items vide
       et .nav-secondary-wrap, dont les enfants du plugin Responsive Nav
       sont position:fixed donc hors du flux) : seul le padding/fond de
       #breadcrumb lui-meme restait visible, en bandeau vide. On annule ici
       ce padding/fond plutot que display:none sur #breadcrumb ou
       .container, qui rendrait injoignables le bouton hamburger et le
       panneau (position:fixed, mais descendants d'un ancetre display:none =
       jamais rendus). Sur les autres pages (rubrique/article/recherche), le
       fil d'ariane affiche un vrai chemin : rien a masquer, comportement
       inchange. */
    @media screen and (max-width: 840px) {
      #breadcrumb.type-page-sommaire { padding: 0; background: transparent; }
    }

  /* Menu horizontal du fil d'ariane, style "onglets" (demande utilisateur
     2026-09-15, affinee le 2026-09-16) : la 1ere entree (Circuits) et la
     suivante (Explorer) ont chacune un contour de couleur (circuit/info),
     fond transparent par defaut ; le fond ne se remplit de cette couleur
     que lorsque le contenu courant fait partie de la rubrique concernee.
     Les autres entrees (dont Contact, en derniere position) restent sans
     contour, fond toujours transparent. Selecteurs de position (nth-child)
     plutot que des classes du plugin Menus, pour ne pas dependre des
     libelles/rangs exacts configures en back-office - la seule hypothese
     est qu'Accueil ne fait plus partie de ce menu (retire du back-office
     le 2026-09-15).
     Decalage +1 (demande utilisateur 2026-09-17) : l'entree "Home" ajoutee
     en dur dans inclure/menu-principal-desktop.html est desormais LA
     PREMIERE du DOM (nth-child(1), masquee sur cette barre par sa propre
     classe .menu-entree-home juste plus bas, visible seulement en mobile)
     pour apparaitre en tete du panneau mobile - Circuits/Explorer/"Plus
     d'infos" ci-dessous visent donc nth-child(2)/(3)/(4), pas (1)/(2)/(3).
     Enfant DIRECT (>) de .nav-secondary, pas simple descendant : le
     panneau deroulant de chaque entree (.circuit-dropdown, .mega-panel)
     contient lui-meme des .menu-entree/.menu-items__lien imbriques (sous-
     rubriques) qui seraient sinon aussi cibles par ces regles (constate le
     2026-09-15 - bug de fond corrige ici, cf. demande utilisateur). Scope
     #breadcrumb .nav-secondary uniquement, seul contexte ou cette classe
     vit encore depuis la suppression de la bar2 des headers (2026-09-16). */
  #breadcrumb .nav-secondary > .menu-entree:nth-child(2) > .menu-items__lien,
  #breadcrumb .nav-secondary > .menu-entree:nth-child(2) > .menu-items__texte {
    background: transparent;
    border: 1px solid var(--c-circuit);
    border-radius: 4px;
  }
  /* .on : classe posee nativement par le plugin Menus (menus_exposer) sur
     l'entree Circuits (type "objet", pointe une rubrique) quand la page
     courante en fait partie (rubrique elle-meme ou tout article de sa
     branche) - deja utilisee ailleurs dans ce fichier (menu-entree.on). */
  #breadcrumb .nav-secondary > .menu-entree:nth-child(2).on > .menu-items__lien,
  #breadcrumb .nav-secondary > .menu-entree:nth-child(2).on > .menu-items__texte {
    background: var(--c-circuit);
  }

  #breadcrumb .nav-secondary > .menu-entree:nth-child(3) > .menu-items__lien,
  #breadcrumb .nav-secondary > .menu-entree:nth-child(3) > .menu-items__texte {
    background: transparent;
    border: 1px solid var(--c-info);
    border-radius: 4px;
  }
  /* Explorer (entree "texte_libre") n'a pas d'equivalent natif a .on (le
     squelette du plugin menus/texte_libre.html n'appelle pas
     menus_exposer, contrairement a menus/objet.html) - "actif" est donc
     calcule a la main dans breadcrumb/dist.html (rubrique courante ou un
     de ses ancetres = Luang Prabang/Le Laos) et pose en classe
     .explorer-actif sur .nav-secondary-wrap, notre propre markup. */
  #breadcrumb .nav-secondary-wrap.explorer-actif > .nav-secondary > .menu-entree:nth-child(3) > .menu-items__lien,
  #breadcrumb .nav-secondary-wrap.explorer-actif > .nav-secondary > .menu-entree:nth-child(3) > .menu-items__texte {
    background: var(--c-info);
  }

  /* "Plus d'infos" (4e entree depuis l'ajout de Home en tete le 2026-09-17,
     entree "objet" comme Circuits : classe .on posee nativement par
     menus_exposer, pas de calcul manuel necessaire ici contrairement a
     Explorer). Couleur --c-mice (demande utilisateur 2026-09-17 : ce champ
     admin, "Informations" desormais, remplace --c-generale/"Autre" sur
     cette entree - remplace lui-meme c-generale qui remplacait jaune-or du
     2026-09-16) - assez sombre par defaut (violet) pour garder le texte
     clair sur l'etat rempli, pas de surcharge de couleur necessaire
     contrairement a jaune-or (cf. nth-child(2)/(3) ci-dessus, meme
     mecanique) ; a revoir si l'utilisateur choisit une teinte plus claire
     en back-office. */
  #breadcrumb .nav-secondary > .menu-entree:nth-child(4) > .menu-items__lien,
  #breadcrumb .nav-secondary > .menu-entree:nth-child(4) > .menu-items__texte {
    background: transparent;
    border: 1px solid var(--c-mice);
    border-radius: 4px;
  }
  #breadcrumb .nav-secondary > .menu-entree:nth-child(4).on > .menu-items__lien,
  #breadcrumb .nav-secondary > .menu-entree:nth-child(4).on > .menu-items__texte {
    background: var(--c-mice);
  }

  /* Entree "Home" ajoutee en dur EN PREMIERE POSITION dans inclure/menu-
     principal-desktop.html (demande utilisateur 2026-09-17) : masquee ici
     sur la barre desktop, reaffichee uniquement dans le media query mobile
     plus bas, ou elle apparait donc aussi en tete (classe ciblee
     directement, pas de position nth-child pour rester independante du
     nombre d'entrees "objet" de ce menu). */
  #breadcrumb .nav-secondary > .menu-entree-home { display: none; }

  /* Entree "Langue" ajoutee en dur EN DERNIERE POSITION dans inclure/menu-
     principal-desktop.html (demande utilisateur 2026-09-18) : meme
     mecanique que "Home" ci-dessus, masquee ici sur la barre desktop
     (drapeaux/liens de langue toujours accessibles via le footer,
     #footer .footer-bottom-links #menu_lang), reaffichee uniquement dans le
     panneau mobile plus bas. */
  #breadcrumb .nav-secondary > .menu-entree-lang { display: none; }

  /* Correctif utilisateur 2026-09-17 : au-dessus du palier mobile (841px,
     meme seuil que le reste du theme), le menu horizontal du fil d'ariane
     s'affichait empile verticalement (entrees non alignees) et les
     paneaux deroulants (sous-entrees) etaient abimes. Cause : le plugin
     Responsive Nav (css/responsive-nav.css.html) est mobile-first et pose,
     SANS media query, `display:block` sur son conteneur cible (classe
     .nav-collapse, ajoutee en JS sur #nav-secondary-menu) et
     `width:100%;display:block` sur chaque <li> descendant - au-dessus du
     palier il ne restaure lui-meme que `position`, jamais l'affichage,
     ecrasant le `display:flex` de `.nav-secondary`/`#breadcrumb
     .nav-secondary` ci-dessus (meme specificite a 1 classe, la regle du
     plugin passe apres dans le head). Reintroduit ici, specifique au
     desktop, sans toucher au mecanisme mobile (qui a besoin de ce
     display:block pour son empilement voulu) : id+classe suffit a
     l'emporter sur les classes seules du plugin, sans !important. */
  @media screen and (min-width: 841px) {
    #breadcrumb .nav-collapse {
      display: flex;
    }
    #breadcrumb .nav-collapse > .menu-entree {
      width: auto;
    }
  }

  /* Correctif utilisateur 2026-09-17 (suite, meme cause) : sous-entrees
     invisibles au survol sur grand ecran, tous les panneaux confondus
     (.sub-panel/.mega-panel dans Circuits/Explorer/Plus d'infos). Le meme
     conteneur .nav-collapse (#nav-secondary-menu) recoit du plugin, SANS
     media query, `overflow:hidden` (necessaire a l'animation d'accordeon
     mobile par max-height) - jamais restaure a son propre palier desktop
     (celui-ci ne touche que position/max-height, cf. correctif precedent).
     Un panneau de niveau 2 est position:absolute mais reste un enfant DOM
     de cette liste : overflow:hidden sur l'ancetre le decoupe quand meme,
     quelle que soit sa propre position - d'ou l'impression que le survol
     ne fait plus rien. Restaure overflow:visible ici, uniquement au-dessus
     du palier, sans toucher au mecanisme mobile. */
  @media screen and (min-width: 841px) {
    #breadcrumb .nav-collapse {
      overflow: visible;
    }
  }

  /* plugin boutonstexte : injecté par JS dans #breadcrumb .container (cf. javascript/boutonstexte.js).
     float:none impératif : le CSS natif du plugin (css/boutonstexte.css) pose `.boutonstexte {float:right}`
     et n'est jamais réécrit par cette règle (seule display: est reprise ici) — sans ce reset, un cache CSS
     perimé ou tout contexte ou le conteneur `#breadcrumb .container` n'est pas trouve par le JS (repli sur
     prependTo('body')) fait flotter les boutons A-/A+ en haut a droite de tout le viewport au lieu de rester
     dans le fil d'ariane (observe sur Firefox, cf. retour utilisateur du 2026-09-10). Effet d'opacite
     aligne sur l'icone Accueil (`.icon-home`, `ul.breadcrumb-items a`) le 2026-09-16 : .75 au repos, 1
     au survol, demande explicite utilisateur ce jour (remplace l'opacite pleine fixee la veille). */
  .boutonstexte { display: inline-flex; float: none; align-items: center; gap: .5em; flex-shrink: 0; order: -1; }
  .boutonstexte a { display: inline-flex; opacity: .75; border-bottom: none; }
  .boutonstexte a:hover { opacity: 1; }
  .boutonstexte img { width: 18px; height: 18px; }
  /* Demande utilisateur 2026-09-16 : boutons A-/A+ masques en version mobile
     (meme seuil que le passage au hamburger, cf. @media max-width: 840px
     plus haut - .nav-primary/.nav-secondary). */
  @media screen and (max-width: 840px) {
    .boutonstexte { display: none; }
  }

  /* Pagination */

  /* Image */


/* List */

  ol {
    list-style: decimal;
    padding-left: 1.25em;
  }

    ol li {
      padding-left: 0.25em;
    }

  ul {
    list-style: disc;
    padding-left: 1em;
  }

    ul li {
      padding-left: 0.5em;
    }

/* Icons */

/* Buttons */

  ul.buttons {
    cursor: default;
    list-style: none;
    padding-left: 0;
  }

    ul.buttons:last-child {
      margin-bottom: 0;
    }

    ul.buttons li {
      display: inline-block;
      padding: 0 0 0 1.5em;
    }

      ul.buttons li:first-child {
        padding: 0;
      }

    ul.buttons.stacked li {
      display: block;
      padding: 1.5em 0 0 0;
    }

      ul.buttons.stacked li:first-child {
        padding: 0;
      }

  /* Form */

  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea {
    -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    border: solid 1px rgba(124, 128, 129, 0.2);
    border-radius: 0;
    color: inherit;
    display: block;
    padding: 0.75em;
    text-decoration: none;
    width: 100%;
    outline: 0;
  }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    textarea:focus {
      border-color: #83d3c9;
    }

  input[type="text"],
  input[type="password"],
  input[type="email"] {
    line-height: 1em;
  }

  ::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.5;
    position: relative;
    top: 3px;
  }

  :-moz-placeholder {
    color: inherit;
    opacity: 0.5;
  }

  ::-moz-placeholder {
    color: inherit;
    opacity: 0.5;
  }

  :-ms-input-placeholder {
    color: inherit;
    opacity: 0.5;
  }

/* List */

  ol {
    list-style: decimal;
    padding-left: 1.25em;
  }

    ol li {
      padding-left: 0.25em;
    }

  ul {
    list-style: disc;
    padding-left: 1em;
  }

    ul li {
      padding-left: 0.5em;
    }


/* Icons */

  ul.icons {
    list-style: none;
    padding-left: 0;
    cursor: default;
  }

    ul.icons li {
      display: inline-block;
      line-height: 1em;
      padding-left: 0.5em;
    }

      ul.icons li:first-child {
        padding-left: 0;
      }

/* Button */

  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  button,
  .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background: none;
    border: solid 1px;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 900;
    letter-spacing: 2px;
    min-width: 18em;
    padding: 0 0.75em;
    line-height: 3.75em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    button:hover,
    .button:hover {
      background: rgba(188, 202, 206, 0.15);
      border-color: inherit;
    }

    input[type="button"].stylelight,
    input[type="submit"].stylelight,
    input[type="reset"].stylelight,
    button.stylelight,
    .button.stylelight {
      background: #83d3c9;
      border-color: #83d3c9;
      color: var(--blanc) !important;
    }

      input[type="button"].stylelight:hover,
      input[type="submit"].stylelight:hover,
      input[type="reset"].stylelight:hover,
      button.stylelight:hover,
      .button.stylelight:hover {
        background: #96dad1 !important;
        border-color: #96dad1 !important;
      }

    input[type="button"].fit,
    input[type="submit"].fit,
    input[type="reset"].fit,
    button.fit,
    .button.fit {
      width: 100%;
    }

    input[type="button"].small,
    input[type="submit"].small,
    input[type="reset"].small,
    button.small,
    .button.small {
      font-size: 0.7em;
      min-width: 14em;
      padding: 0.5em 0;
    }

    /* Effet "light-sweep" : balayage lumineux diagonal au survol,
       repris de template_travel_base/css/theme.css — classe générique
       (au lieu d'une liste de sélecteurs figée) réutilisable sur tout
       bouton plein (sidebar circuits-filtre, sommaire-circuits...). */
    .btn-light-sweep {
      position: relative;
      overflow: hidden;
    }
      .btn-light-sweep::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
        transform: skewX(-20deg);
        transition: left .6s ease;
      }
      .btn-light-sweep:hover::after {
        left: 120%;
      }

/* Wrapper */

  .wrapper {
    margin-bottom: 5em;
    padding: 5em;
  }

    .wrapper.nopadding {
      padding: 0;
    }

    /* colle au pied-de-page : seul le margin-bottom saute, padding et style-* restent actifs */
    .wrapper.cta {
      margin-bottom: 0;
    }

    /* Sur mobile, le padding desktop (5em, herite de .wrapper) grignotait a
       lui seul ~160px de largeur utile a deux, en plus du padding de
       .container (0 1.5em a <=736px, deja present dans les 5 CTA -
       cta-contact/-office/-googlemap/-a-la-une/-prochain-evenement) : le
       contenu se retrouvait ecrase sur les petits ecrans. Le lateral
       passe donc a 0 (c'est .container qui inset desormais), le
       haut/bas est fortement reduit mais pas supprime pour garder un peu
       de respiration entre ces blocs plein cadre et leurs voisins (demande
       utilisateur 2026-09-17). */
    @media screen and (max-width: 736px) {
      .wrapper.cta {
        padding: var(--space-lg) 0;
      }
    }

    .wrapper.stylebleu {background-color: var(--bleu); color: var(--blanc);}
    .wrapper.stylejaune {background-color: var(--jaune); color: #111;}
    .wrapper.stylebrique {background: var(--brique); color: var(--blanc);}
    .wrapper.styleviolet {background: var(--violet); color: var(--blanc);}
    .wrapper.styleorange {background: var(--orange); color: var(--blanc);}
    .wrapper.stylevert {background: var(--vert); color: var(--blanc);}
    .wrapper.stylegris-bg {background: var(--gris-bg); color: var(--ink);}
    .wrapper.stylegris-deep {background: var(--gris-deep); color: var(--blanc);}

    .wrapper[class*="style"] input[type="button"],
    .wrapper[class*="style"] input[type="submit"],
    .wrapper[class*="style"] input[type="reset"],
    .wrapper[class*="style"] button,
    .wrapper[class*="style"] .button {
      border-color: currentColor;
      color: inherit;
    }

    .wrapper[class*="style"] input[type="button"]:hover,
    .wrapper[class*="style"] input[type="submit"]:hover,
    .wrapper[class*="style"] input[type="reset"]:hover,
    .wrapper[class*="style"] button:hover,
    .wrapper[class*="style"] .button:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .wrapper[class*="style"] input[type="button"].stylelight,
    .wrapper[class*="style"] input[type="submit"].stylelight,
    .wrapper[class*="style"] input[type="reset"].stylelight,
    .wrapper[class*="style"] button.stylelight,
    .wrapper[class*="style"] .button.stylelight {
      background: transparent;
      border-color: var(--blanc);
      color: var(--blanc) !important;
    }

    .wrapper[class*="style"] input[type="button"].stylelight:hover,
    .wrapper[class*="style"] input[type="submit"].stylelight:hover,
    .wrapper[class*="style"] input[type="reset"].stylelight:hover,
    .wrapper[class*="style"] button.stylelight:hover,
    .wrapper[class*="style"] .button.stylelight:hover {
      background: rgba(255, 255, 255, 0.15);
    }

/* Main */

  #main {}
    #main > :last-child {margin-bottom: 0;}
    #main .sidebar section {}
      #main .sidebar section:first-child {}
      #main .sidebar section:last-child {}

/* ==========================================================
   HEADER — 3 hauteurs (100% / 80% / 40%)
   ========================================================== */

  #header-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-page);
    background-size: cover;
    background-position: center;
    color: var(--blanc);
    text-align: center;
  }
    #header-banner:before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(18,22,26,.55) 0%, rgba(18,22,26,.4) 45%, rgba(18,22,26,.65) 100%);
    }
    #header-banner .header-banner-inner {
      position: relative;
      z-index: 1;
    }

    /* Rubrique circuits / article circuit : fond du #header-banner en
       couleur "Circuits" (--c-circuit), sur ces 2 pages precisement
       (demande utilisateur 2026-09-17) - meme variable que --c-page pour
       html.composition_circuits plus haut dans ce fichier, explicitee ici
       pour ne pas dependre de la chaine generique --c-page. L'overlay
       assombrissant #header-banner:before reste inchange (degrade neutre
       partage par tous les headers, regle juste au-dessus). */
    html.composition_circuits #header-banner {
      background-color: var(--c-circuit);
    }

    /* Reveal-image : IMG/spip_fond_login.jpg est cachee en plein cadre
       derriere le banner ; .header-reveal est le hublot rond de 10em qui, en
       suivant le curseur, laisse voir la tranche de cette image qui se
       trouve a cet endroit (voir javascript/perso.js pour le calcul de
       background-position/-size - meme principe que le "spotlight hero
       reveal" classique). Cercle invisible (opacity 0, scale reduit) tant
       que la souris ne bouge pas ; apparait pendant le mouvement, se
       retracte et disparait 0.5s apres l'arret (classe reveal-active pilotee
       en JS). Position (left/top) fixee en JS a chaque mousemove, sans
       transition, pour un suivi instantane du curseur ; seules
       opacity/transform sont animees, donc toujours symetriques (pas
       d'ancrage sur un coin, contrairement a une transition de mask-size). */
    #header-banner .header-reveal {
      position: absolute;
      top: 0;
      left: 0;
      width: 10em;
      height: 10em;
      border-radius: 50%;
      z-index: 1;
      pointer-events: none;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(.4);
      transition: opacity .25s ease, transform .25s ease;
    }
      #header-banner.reveal-active .header-reveal {
        opacity: 1;
        transform: scale(1);
      }

    /* Reveal-image desactivee sur mobile (demande utilisateur 2026-09-16,
       meme seuil que le passage au hamburger, cf. @media max-width:840px
       plus bas) : effet pense pour un curseur de souris, sans equivalent
       tactile pertinent. display:none plutot qu'un simple opacity:0 pour
       eviter de charger IMG/spip_fond_login.jpg sur mobile (voir aussi le
       garde-fou correspondant dans javascript/perso.js, qui evite d'attacher
       les ecouteurs mousemove/mouseleave sous ce seuil). */
    @media screen and (max-width: 840px) {
      #header-banner .header-reveal { display: none; }
    }

  /* Header + fil d'ariane = 100% de la hauteur ecran, sur toutes les pages
     (demande utilisateur 2026-09-16 - generalise a tout le site le mecanisme
     introduit le 2026-09-15 pour la seule rubrique-circuits, qui remplacait
     alors les paliers fixes hauteur-40/80/100 ci-dessous, desormais retires
     partout - #ENV{header_hauteur} n'est plus lu par aucun header/*.html).
     La hauteur reelle du #breadcrumb (variable selon le contenu - fil
     d'ariane simple ou menu horizontal en plus - et le line-height herite)
     n'est pas une valeur simple a deviner ici en CSS : mesuree en JS au
     chargement/redimensionnement (body.html, juste apres le #breadcrumb) et
     posee dans --breadcrumb-h sur la racine du document. Le 4.5rem de repli
     ne sert que le tout premier instant avant l'execution de ce script. Pas
     de palier reduit en mobile : la demande "100% de l'ecran" s'applique a
     toutes les tailles, volontairement. */
  #header-banner.hauteur-ecran-moins-breadcrumb {
    min-height: calc(100vh - var(--breadcrumb-h, 4.5rem));
  }

  /* Séparateur décoratif (glyphe icons U+E925) entre les entrées de menu */
  .icon-separator::before {
    font-family: 'icons';
    content: "\e926";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
  }

  /* Marque "LT Travel" */
  .brand {
    font-family: var(--font-titres);
    font-size: .85em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blanc);
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }
    .brand .lt { font-weight: 700; }
    .brand .travel { font-style: italic; font-weight: 400; opacity: .85; }

  /* bar1 : barre transparente en surimpression du header, avant scroll */
  .bar1 {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 1.6em 2em 1em;
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  }
    .bar1.hidden { transform: translateY(-120%); opacity: 0; }

  .nav-primary { width: 100%; max-width: 1440px; }
    .nav-primary .menu-liste {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-primary .menu-sep {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      color: rgba(255,255,255,.5);
      font-size: .75em;
    }
    .nav-primary .menu-items__lien {
      display: inline-block;
      color: rgba(255,255,255,.92);
      font-family: var(--font-titres);
      font-size: .85em;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4em 1em;
      font-weight: 500;
      border-bottom-color: transparent;
      transition: transform .2s ease;
    }
    .nav-primary .menu-entree:hover .menu-items__lien { transform: scale(1.08); border-bottom-color: transparent; }

  .nav-secondary-wrap { display: flex; align-items: center; gap: 6px; }
  /* Boutons d'accordeon des sous-panneaux : montes dans le DOM a toutes les
     tailles (meme fond INCLURE que le menu desktop, cf. inclure/menu-
     principal-desktop.html) mais masques par defaut, reveles uniquement
     sous le palier mobile ci-dessous. Le bouton bascule du menu mobile
     lui-meme (a.nav-toggle) est insere automatiquement par le plugin actif
     Responsive Nav, pas par ce theme - voir plus bas pour son style. */
  .submenu-toggle { display: none; }
  .nav-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
    /* le padding-bottom (compensé par une marge négative) sert de pont de
       survol vers le panneau de niveau 2 sans "trou mort" à la souris */
    .nav-secondary .menu-entree { position: relative; padding-bottom: 18px; margin-bottom: -18px; }
    .nav-secondary .menu-items__lien,
    .nav-secondary .menu-items__texte {
      display: inline-block;
      color: rgba(255,255,255,.9);
      font-family: var(--font-texte);
      font-size: .8em;
      letter-spacing: 0em;
      padding: .5em .8em;
      font-weight: 500;
      border-bottom-color: transparent;
      cursor: pointer;
      transition: transform .2s ease;
    }
    .nav-secondary .menu-entree:hover > .menu-items__lien,
    .nav-secondary .menu-entree:hover > .menu-items__texte { transform: scale(1.08); border-bottom-color: transparent; }
    /* objet consulte (rubrique/article) : classe "on" posee par menus_exposer sur le <li> */
    .menu-entree.on > .menu-items__lien {}

  /* Panneaux de niveau 2 : ouverture verticale progressive au survol */
  .sub-panel {
    font-family: var(--font-texte);
    text-align: left;
    position: absolute;
    top: 100%; right: 0;
    background: var(--blanc);
    box-shadow: var(--shadow-card-hover);
    padding: 1.4em 1.6em;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    pointer-events: none;
  }
    /* Ouverture inversee tant que #breadcrumb n'est pas fixe (demande
       utilisateur 2026-09-16) : au chargement, #breadcrumb est colle au bas
       du header 100vh (cf. hauteur-ecran-moins-breadcrumb plus haut) - trop
       peu de place en dessous pour un panneau qui s'ouvre vers le bas, donc
       ouverture vers le haut par defaut ici. Des que #breadcrumb devient
       .is-fixed (colle en haut du viewport au scroll - classe posee par le
       script commun a toutes les pages, breadcrumb/dist.html depuis le
       2026-09-17), la place est de nouveau en dessous : on retombe sur
       .sub-panel ci-dessus, ouverture vers le bas inchangee. */
    #breadcrumb:not(.is-fixed) .sub-panel {
      top: auto; bottom: 100%;
      transform-origin: bottom;
    }
    .nav-secondary .menu-entree:hover .sub-panel {
      opacity: 1; visibility: visible; transform: scaleY(1); pointer-events: auto;
    }
    /* Sous-entrees (et niveaux en dessous : sous-sous-entrees, sous-sous-
       sous-entrees) toujours alignees a gauche en grand ecran aussi -
       meme correctif que celui applique en mobile plus bas (cf. commentaire
       "Correctif reel trouve le 2026-09-17" dans le media query 840px) :
       le plugin Responsive Nav pose #nav-secondary-menu ul li
       {text-align:center;} sans aucune condition de largeur d'ecran, donc
       actif aussi sur desktop - .sub-panel seul (text-align:left plus haut)
       ne suffit pas a le battre (specificite ID+2 balises du plugin >
       1 classe ici). Meme selecteur .sub-panel .menu-entree (specificite
       ID+2 classes) que le correctif mobile, qui l'emporte quel que soit
       le niveau d'imbrication (menu-entree matche aussi les <li> imbriques
       du mega-panel).
    */
    #nav-secondary-menu .sub-panel .menu-entree { text-align: left; }

  .mega-panel { display: flex; gap: 2.5em; }
    .mega-panel .mega-col {
      width: 220px;
      max-height: 60vh;
      overflow-y: auto;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .3s ease, transform .3s ease;
    }
    .nav-secondary .menu-entree:hover .mega-panel .mega-col { opacity: 1; transform: translateY(0); }
    .mega-panel .mega-col:nth-child(1) { transition-delay: .08s; }
    .mega-panel .mega-col:nth-child(2) { transition-delay: .18s; }
    .mega-panel .mega-col-titre {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-texte);
      font-size: 1.1em; font-weight: 500; letter-spacing: .04em;
      color: var(--brique);
      margin-bottom: .6em;
    }
      .mega-panel .mega-col-titre a { color: inherit; }
    .mega-panel .menu-liste { list-style: none; margin: 0; padding: 0; }
    .mega-panel .menu-items__lien {
      display: block; color: var(--ink); font-size: .85em;
      padding: .25em 0em;
      transition: background .15s ease, color .15s ease;
    }

    .mega-panel ul li { padding-left: 0; }
    .mega-panel li a.menu-items__lien { padding-left: 0; }
    .mega-panel .menu-items__lien .icon-separator,
    .mega-panel .menu-items__lien .tiret { margin-right: .4em; font-size: .75em; opacity: .5; }
    .mega-panel .menu-entree:hover > .menu-items__lien { padding-left: 0.8em; background: var(--brique); color: var(--blanc); }
    .mega-panel .menu-liste .menu-liste { padding-left: .6em; }
    .mega-panel .menu-liste .menu-liste .menu-items__lien { font-size: .8em; color: #6b747c; padding: .05em .5em; }
    .mega-panel .menu-liste .menu-liste .menu-entree:hover > .menu-items__lien { color: var(--blanc); }

  .circuit-dropdown { display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: .5em; }
    .circuit-dropdown .menu-items__lien {
      display: block; color: var(--ink); font-size: .85em;
      padding: .4em .9em;
      transition: background .15s ease, color .15s ease;
    }
    .circuit-dropdown .menu-items__lien:hover { background: var(--bleu); color: var(--blanc); }
    .circuit-dropdown .icon-separator { margin-right: .4em; font-size: .75em; opacity: .5; }
    .circuit-dropdown .menu-items__lien:hover .icon-separator { opacity: .9; }

  /* Sous-menu "Plus d'infos" : meme mecanique que .circuit-dropdown
     ci-dessus, couleur --c-mice (champ admin "Informations" desormais,
     demande utilisateur 2026-09-17 - remplace c-generale/"Autre" ici,
     lui-meme remplacait jaune-or du 2026-09-16) - assez sombre par defaut
     pour garder le texte blanc au survol, meme mecanique que
     .circuit-dropdown (pas de surcharge de couleur necessaire). */
  .info-dropdown {
    padding: .5em;
    /* min-width 200px (comme .circuit-dropdown) trop etroit pour des
       titres d'articles (plus longs que les 4 mots-cles region de
       Circuits) - largeur qui suit le contenu, plafonnee pour rester un
       "encart" de menu, pas une pleine colonne (demande utilisateur
       2026-09-16, sous-rubriques/titres passant a la ligne). */
    min-width: 200px; width: max-content; max-width: 340px;
  }
    /* items rendus en li.menu-entree (balisage natif du plugin Menus,
       repris comme dans .mega-panel .menu-liste plus haut) au lieu de
       liens nus : reset de liste + mise en colonne portes par
       .menu-liste plutot que directement sur .info-dropdown. */
    .info-dropdown .menu-liste { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
    .info-dropdown .menu-entree { padding-left: 0; }
    .info-dropdown .menu-items__lien {
      display: block; color: var(--ink); font-size: .85em;
      padding: .4em .9em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: background .15s ease, color .15s ease;
    }
    .info-dropdown .menu-items__lien:hover { background: var(--c-mice); color: var(--blanc); }
    /* Puce/separateur avant le titre : le balisage natif du plugin Menus
       (menus/objet.html) ne pose pas de span dedie pour ca (contrairement
       aux boucles maison .circuit-dropdown/.mega-panel) - meme glyphe
       "icons" (U+E926) que .icon-separator ci-dessus, pose directement en
       ::before du lien plutot qu'en surchargeant le squelette du plugin. */
    .info-dropdown .menu-items__lien::before {
      font-family: 'icons'; content: "\e926"; font-style: normal; font-weight: normal; line-height: 1;
      margin-right: .4em; font-size: .75em; opacity: .5;
    }
    .info-dropdown .menu-items__lien:hover::before { opacity: .9; }
    /* La derniere entree du sous-menu (lien retitre "Encore + d'infos"/
       "More more info" vers la rubrique elle-meme, configure directement
       dans le plugin Menus) se distingue deja visuellement par son texte -
       plus de classe -_voirtout- dediee depuis le passage au balisage
       natif #MENUS_AFFICHER_ENTREE (elle etait posee par l'ancien lien
       "Tous les articles" genere a la main, retire). */

  .lang { font-size: .75em; letter-spacing: .05em; }
  .lang.fr { color: rgba(255,255,255,.85); }
  .lang.en { color: rgba(255,255,255,.55); }

  /* Menu mobile : Responsive Nav (plugin actif, demande utilisateur
     2026-09-16 - remplace 3 tentatives maison qui ont echoue en usage reel
     malgre corrections repetees, jamais confirmees avec certitude sans
     acces navigateur cette session). Le plugin gere lui-meme, via ses
     propres feuilles de style injectees automatiquement (css/responsive-
     nav.css.html + .spip.css.html), tout le mecanisme de repli/deploiement
     (position, max-height anime, affichage du bouton bascule) - ce bloc
     n'ajoute QUE l'habillage visuel du theme par-dessus (couleurs, listes
     sobres, puces, accordeon des sous-panneaux). Configuration back-office
     necessaire (?exec=configurer_responsivenav) : selecteur cible
     #nav-secondary-menu, palier aligne sur 840px (pas le 40em par defaut du
     plugin, pour rester coherent avec le reste du theme), case
     "Menu burger" cochee (icone graphique plutot que texte). */
  @media screen and (max-width: 840px) {
    /* .nav-primary (bar1, inclure/menu-quick.html) : sans rapport avec le
       menu principal ci-dessous, masque en mobile independamment - regle
       preservee ici depuis l'ancien bloc mobile de ce fichier. */
    .nav-primary { display: none; }

    /* Bouton bascule genere automatiquement par le plugin (lien a.nav-
       toggle, insere par le JS de la bibliotheque juste avant #nav-
       secondary-menu, dans le flux normal du bandeau #breadcrumb par
       defaut) - repasse en position:fixed, en haut a droite de l'ecran
       (demande utilisateur explicite, confirmee a nouveau apres un premier
       oubli lors du passage au plugin) : #breadcrumb se trouve tout en bas
       du hero 100vh sur la plupart des pages, donc hors-ecran au
       chargement - le bouton doit rester visible et accessible sans
       scroller, pas seulement une fois le bandeau atteint. L'icone burger
       elle-meme (sprite haut/bas ferme/ouvert) vient de la case "Menu
       burger" cochee en back-office (images/menu-burger.svg,
       css/responsive-nav.spip.css.html) - hauteur du lien redimensionnee
       ici (36px, ramene de 44px le 2026-09-17 sur demande utilisateur -
       version mobile), la propriete height du plugin n'a pas de
       !important contrairement a ses regles de fond/couleur (verifie
       dans son fichier source), donc pas de conflit. */
    a.nav-toggle {
      position: fixed;
      top: 0.6em;
      right: 1em;
      width: 36px;
      height: 36px !important;
      z-index: 100;
      /* icone burger : SVG externe (fill="currentColor") charge en
         background-image par le plugin, donc la couleur CSS de l'element
         ne l'atteint pas (currentColor d'un SVG externe reste noir, sa
         valeur initiale) - on l'inverse en blanc via filter plutot que de
         dupliquer/surcharger le fichier SVG du plugin. */
      filter: invert(1);
    }
    /* Bug sprite burger/croix : la feuille du plugin fixe background-size a
       30px 60px (2 cadres de 30px empiles, cf. css/responsive-nav.spip.
       css.html), pense pour un bouton de 30px de haut. Ce theme force le
       bouton a 36px (cible tactile ci-dessus) sans agrandir le sprite, donc
       la fenetre visible (36px) deborde de 6px sur le cadre voisin : les 3
       barres fermees laissent voir le haut de la croix en dessous, et la
       croix ouverte laisse voir la derniere barre au-dessus. Agrandir le
       sprite a 36px/72px (memes proportions, cadre = 36px) fait coincider
       exactement chaque cadre avec la hauteur du bouton, sans deborder.
       Specificite superieure a celle du plugin (body a.nav-toggle:link vs
       a.nav-toggle:link) necessaire : sa propre feuille (responsive-nav.
       spip.css.html) est injectee par #INSERT_HEAD_CSS, place APRES le
       <link> de ce fichier dans inclure/head.html - a specificite egale et
       !important des deux cotes, la regle chargee en dernier l'emporterait
       sinon, meme regle ici. */
    body a.nav-toggle:link, body a.nav-toggle:focus {
      background-size: 36px 72px !important;
    }

    /* Panneau deroule : le plugin pose position:absolute en CSS (sa propre
       feuille de style) puis position:relative en JS via un style inline
       a l'ouverture (nav.style.position = opts.openPos, verifie dans son
       fichier source) - un style inline gagne normalement sur n'importe
       quelle regle externe, d'ou le !important ici pour repasser malgre
       tout en position:fixed et faire suivre le panneau sous le bouton
       desormais fixe lui-meme (sinon le panneau continuerait a s'ouvrir a
       la position naturelle de #breadcrumb dans le bandeau, potentiellement
       hors-ecran comme le bouton l'etait avant ce correctif). Largeur
       plafonnee a 85% de l'ecran (demande utilisateur), avec un maximum
       absolu de 320px pour ne pas devenir demesure sur tablette. Position
       de repos remontee (top, demande utilisateur 2026-09-18) pour suivre
       de plus pres le bouton bascule (a.nav-toggle, top:0.6em, hauteur
       36px).

       Ouverture/fermeture (demande utilisateur 2026-09-18, reformulee
       explicitement : un vrai deplacement de "top" depuis une valeur
       hors-ecran au-dessus, qui glisse jusqu'a la position de repos - pas
       un agrandissement de max-height sur place, ni un clip:rect()/auto
       (non animable vers "auto", 1ere tentative de la meme session), ni
       un simple transform sur quelques pixels (2e tentative, jugee trop
       discrete). max-height reste fixe en permanence (plus de bascule
       0 <-> calc(...)) : la visibilite est desormais entierement pilotee
       par top, ferme = top tres negatif (hors-ecran, -100vh, marge large
       car la hauteur reelle du panneau peut approcher 100vh) -> ouvert =
       top:3.2em, transitionne. Le panneau tout entier "tombe" donc depuis
       le haut jusqu'a sa position, visible de bout en bout - box-shadow
       n'a plus besoin d'etre isole sur .opened (l'ancien probleme de fuite
       de l'ombre a hauteur nulle ne se pose plus, le panneau etant deplace
       hors-ecran plutot que reduit a 0 de hauteur). */
    #nav-secondary-menu {
      position: fixed !important;
      top: -100vh !important;
      right: 1em;
      width: min(85vw, 320px);
      /* !important necessaire : le plugin injecte sa propre feuille
         <style> avec .opened{max-height:XXXpx !important} (hauteur reelle
         du contenu, calculee en JS, cf. _calcHeight() dans son fichier
         source) - sans !important ici, cette regle gagnerait a l'ouverture
         et le plafond viewport serait perdu (panneau qui deborde de
         l'ecran en position:fixed, donc inatteignable au scroll - bug deja
         rencontre et corrige le 2026-09-16, "Bug 2"). */
      max-height: calc(100vh - 4.2em) !important;
      background: rgba(var(--ink-rgb), .97);
      box-shadow: var(--shadow-card-hover);
      padding: .5em 0;
      z-index: 90;
      clip: auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      /* !important necessaire : le plugin pose lui-meme un style inline
         transition:"max-height XXXms" sur l'element (_transitions(), dans
         son fichier source JS, appele une fois a l'init si l'option
         "animate" est active) - un style inline gagne sur toute regle CSS
         non !important quelle que soit sa specificite, donc sans
         !important ici notre propre transition sur top est purement et
         simplement ignoree (aucune anomalie de specificite/cascade, juste
         un style inline plus fort). */
      transition: top .5s cubic-bezier(.4,0,.2,1) !important;
    }
      #nav-secondary-menu.opened {
        top: 3.2em !important;
      }
      #nav-secondary-menu > .menu-entree {
        position: static;
        padding-bottom: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,.1);
      }
      #nav-secondary-menu .menu-items__lien,
      #nav-secondary-menu .menu-items__texte {
        display: block;
        flex: 1 1 auto;
        padding: .9em 1.2em;
        font-size: .95em;
        text-transform: none;
        letter-spacing: 0;
      }
      #nav-secondary-menu .menu-entree:hover > .menu-items__lien,
      #nav-secondary-menu .menu-entree:hover > .menu-items__texte {
        transform: none;
      }

      /* Presentation sobre/traditionnelle demandee par l'utilisateur : le
         style "onglet" colore des entrees "objet"/texte_libre (bordure/fond
         pleins par entree, regles #breadcrumb .nav-secondary > .menu-
         entree:nth-child(N) plus haut dans ce fichier, pensees pour la
         barre desktop) doit disparaitre ici - double prefixe #breadcrumb +
         #nav-secondary-menu (2 id) pour gagner en specificite sur la regle
         desktop (1 id seulement) quel que soit le nombre de classes de
         chaque cote. Decalage +1 (Home en tete depuis le 2026-09-17, cf.
         plus haut) : Circuits/Explorer/"Plus d'infos" visent nth-
         child(2)/(3)/(4), pas (1)/(2)/(3). */
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(2) > .menu-items__lien,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(2) > .menu-items__texte,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(3) > .menu-items__lien,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(3) > .menu-items__texte,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(4) > .menu-items__lien,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(4) > .menu-items__texte,
      #breadcrumb #nav-secondary-menu > .menu-entree-home > .menu-items__lien,
      #breadcrumb #nav-secondary-menu > .menu-entree-lang > .menu-items__texte {
        background: transparent;
        border: 0;
        border-radius: 0;
        color: rgba(255,255,255,.92);
      }

      /* Entree "Home" (demande utilisateur 2026-09-17, doit apparaitre en
         1ere position) : masquee sur la barre desktop (regle plus haut dans
         ce fichier), reaffichee ici seulement, dans le panneau mobile, EN
         TETE puisqu'elle est deja la 1ere du DOM (cf. inclure/menu-
         principal-desktop.html) - meme mecanique flex/bordure que les
         entrees suivantes (regle partagee juste au-dessus). Entree "Langue"
         (demande utilisateur 2026-09-18) : meme principe, EN QUEUE puisque
         deja la derniere du DOM. */
      #breadcrumb #nav-secondary-menu > .menu-entree-home,
      #breadcrumb #nav-secondary-menu > .menu-entree-lang {
        display: flex;
      }

      /* Seule fantaisie conservee (demande utilisateur) : une puce carree
         de couleur avant chacune des entrees principales, memes couleurs
         que la barre desktop (--c-circuit/--c-info/--c-mice, cf. demande
         utilisateur 2026-09-17 pour "Plus d'infos" - suit desormais
         --c-mice/"Informations", plus --c-generale/"Autre") - posee en
         ::before sur l'element de liste (pas sur le lien) pour rester fixe
         quel que soit l'etat .on/.explorer-actif de l'entree. "Home" (1ere
         entree du DOM, ajoutee en dur - decalage +1 des 3 autres, cf. plus
         haut) reprend --c-generale, la couleur "Autres (contenu general)" -
         ciblee par sa classe, pas par nth-child(1), pour ne pas dependre du
         nombre d'entrees "objet" apres elle. "Langue" (demande utilisateur
         2026-09-18, dominante grise) reprend la meme --c-generale que
         "Home", pas de couleur dediee pour cette entree utilitaire. */
      #breadcrumb #nav-secondary-menu > .menu-entree-home::before,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(2)::before,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(3)::before,
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(4)::before,
      #breadcrumb #nav-secondary-menu > .menu-entree-lang::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        margin: 0 0 0 1.2em;
      }
      #breadcrumb #nav-secondary-menu > .menu-entree-home::before,
      #breadcrumb #nav-secondary-menu > .menu-entree-lang::before { background: var(--c-generale); }
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(2)::before { background: var(--c-circuit); }
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(3)::before { background: var(--c-info); }
      #breadcrumb #nav-secondary-menu > .menu-entree:nth-child(4)::before { background: var(--c-mice); }

      /* Drapeaux de langue (demande utilisateur 2026-09-18) : deplaces ici
         depuis le fil d'ariane (ancien .breadcrumb-lang, cf. body.html et
         commentaire de #breadcrumb .container plus haut dans ce fichier) -
         meme mecanique visuelle inchangee, liens de langue #menu_lang
         (natifs du plugin mll) remplaces par des drapeaux (texte masque,
         image de fond sur les classes langue_fr/langue_en generees par
         mll). Footer non concerne (bloc CSS separe, #footer .footer-bottom-
         links #menu_lang). */
      #nav-secondary-menu .menu-entree-lang #menu_lang {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 0 1.2em 0 0;
      }
        #nav-secondary-menu .menu-entree-lang #menu_lang a,
        #nav-secondary-menu .menu-entree-lang #menu_lang strong {
          display: inline-block;
          width: 22px;
          height: 14px;
          overflow: hidden;
          text-indent: -999px;
          white-space: nowrap;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          border-radius: 2px;
          border: 1px solid #fff;
          opacity: .8;
          transition: opacity .2s ease, transform .2s ease;
        }
        #nav-secondary-menu .menu-entree-lang #menu_lang a:hover { opacity: 1; transform: scale(1.1); }
        #nav-secondary-menu .menu-entree-lang #menu_lang .langue_fr { background-image: url("../images/flag-fr-small.png"); }
        #nav-secondary-menu .menu-entree-lang #menu_lang .langue_en { background-image: url("../images/flag-en-small.png"); }

      /* Chevron dessine en CSS (pas de glyphe de la fonte "icons" - eviter
         de deviner un glyphe non confirme), pivote quand le sous-panneau de
         son entree est deplie (.sub-open, javascript/perso.js). */
      #nav-secondary-menu .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        /* neutralise le reset generique `button{min-width:18em;...}` plus
           haut dans ce fichier (pense pour les CTA du site) - sans ca ce
           bouton (invisible, sans fond ni bordure) gonflait quand meme la
           ligne a 18em de large, poussant le chevron loin a droite. */
        min-width: 0;
        line-height: normal;
        letter-spacing: normal;
        text-transform: none;
        font-weight: normal;
        flex-shrink: 0;
        background: transparent;
        border: 0;
        padding: 0;
      }
        #nav-secondary-menu .submenu-toggle::before {
          content: "";
          width: 8px;
          height: 8px;
          border-right: 2px solid rgba(255,255,255,.85);
          border-bottom: 2px solid rgba(255,255,255,.85);
          transform: rotate(45deg);
          transition: transform .2s ease;
        }
        #nav-secondary-menu .menu-entree.sub-open > .submenu-toggle::before {
          transform: rotate(-135deg);
        }

      /* Sous-panneaux repris en accordeon (position:static, empile sous
         l'entree) au lieu du survol desktop (position:absolute) - meme
         balisage/INCLURE, seule la position/l'affichage changent ici.
         .dropdown-active (posee en JS sur #nav-secondary-menu des qu'une
         entree est depliee) leve le plafond max-height calcule par le
         plugin pour le contenu de base - mecanisme documente directement
         dans sa propre CSS (regle .opened.dropdown-active), prevu par la
         bibliotheque pour ce cas exact (sous-menu qui deplie du contenu
         apres le calcul initial de hauteur). */
      #nav-secondary-menu .sub-panel {
        display: none;
        position: static;
        width: 100%;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        background: rgba(0, 0, 0, .18);
        /* Inset gauche unique (.8em), demande utilisateur 2026-09-17 :
           seule source d'indentation de base pour tout le contenu du
           panneau (liens a plat circuit-dropdown/info-dropdown, titre
           mega-col-titre, sous-sous-entrees) - les liens eux-memes n'ont
           plus de padding-left propre (cf. plus bas), pour eviter tout
           cumul de retrait different selon le type de sous-panneau. */
        padding: .3em .8em .5em;
      }
      #nav-secondary-menu .menu-entree.sub-open > .sub-panel {
        display: block;
      }
      #nav-secondary-menu .mega-panel { flex-direction: column; gap: 1em; }
      #nav-secondary-menu .mega-panel .mega-col {
        width: auto;
        max-height: none;
        opacity: 1;
        transform: none;
      }
      #nav-secondary-menu .circuit-dropdown,
      #nav-secondary-menu .info-dropdown,
      #nav-secondary-menu .mega-panel .menu-items__lien {
        color: rgba(255,255,255,.85);
        white-space: normal;
      }
      #nav-secondary-menu .circuit-dropdown .menu-items__lien:hover,
      #nav-secondary-menu .info-dropdown .menu-items__lien:hover {
        background: transparent;
        color: var(--blanc);
      }
      #nav-secondary-menu .mega-panel .menu-entree:hover > .menu-items__lien {
        background: transparent;
        padding-left: 0;
        color: var(--blanc);
      }

      /* Correctif reel trouve le 2026-09-17 (retour utilisateur, inspection
         du <li> dans les devtools) : .nav-secondary .menu-entree, regle
         desktop non scopee plus haut dans ce fichier (~ligne 858, servait a
         l'origine de "pont" de survol vers le panneau niveau 2 sur la barre
         desktop), pose padding-bottom:18px / margin-bottom:-18px sur TOUT
         .menu-entree descendant de .nav-secondary - y compris les <li>
         imbriques de ce panneau mobile (circuit-dropdown/info-dropdown/
         mega-panel), qu'aucune regle mobile precedente ne neutralisait
         completement (seul margin-bottom avait ete remis a 0 dans les 2
         1eres passes de correctif ci-dessus, jamais padding-bottom) : ces
         18px fixes (donc insensibles a toute reduction en em du padding du
         LIEN) expliquent que les ecarts verticaux ne bougeaient pas d'une
         passe a l'autre. Reset ici en un seul point pour tout le panneau.

         2e cause reelle trouvee au meme retour (sous-entrees "toujours pas
         alignees a gauche... je ne veux plus les voir centrees") : le
         plugin Responsive Nav pose lui-meme, dans sa propre feuille
         css/responsive-nav.spip.css.html (injectee via le pipeline
         insert_head_css, jamais lue jusqu'ici car hors de ce fichier),
         -# CONFIG{responsivenav/selector,#nav}- ul li {text-align:center;}
         -> #nav-secondary-menu ul li {text-align:center;} sans aucune
         condition de largeur d'ecran : centre le texte de TOUT <li> dans un
         <ul> du panneau (mega-panel niveaux 2/3, info-dropdown - le
         circuit-dropdown n'a pas de <ul>/<li>, juste des <a> nus, d'ou son
         alignement deja correct). Aucun correctif precedent ne touchait
         text-align : tout le travail sur padding/margin ne pouvait de toute
         facon pas "aligner a gauche" un texte centre. */
      #nav-secondary-menu .sub-panel .menu-entree {
        position: static;
        padding-bottom: 0;
        margin-bottom: .1em;
        text-align: left;
      }

      /* Alignement gauche demande utilisateur (2026-09-17, retour "toujours
         pas aligne / trop d'ecarts", 3e passe) : indentation reprise depuis
         zero avec un seul mecanisme, sur le conseil direct de l'utilisateur
         (marge sur le <li>, pas cumul de paddings sur le lien) - un seul
         inset de base commun (.8em, pose sur .sub-panel ci-dessus) pour
         entrees/sous-entrees a plat/mega-col-titre/sous-sous-entrees, les
         liens eux-memes n'ajoutent plus de padding-left ; seules les sous-
         sous-sous-entrees (imbriquees sous "Luang Prabang"/"Laos") recoivent
         un margin-left supplementaire explicite sur leur <li>, seule et
         unique source de leur indentation propre. */
      #nav-secondary-menu .circuit-dropdown,
      #nav-secondary-menu .info-dropdown {
        /* padding propre du conteneur desktop (.5em, cf. regles non scopees
           plus haut) neutralise ici : seul l'inset commun de .sub-panel
           (.8em) doit compter, sinon ces 2 sous-panneaux demarrent plus a
           droite que le mega-panel (qui n'a pas de padding de conteneur
           propre) malgre le meme inset vise. */
        padding: 0;
      }
      /* Entrees 1 (circuit-dropdown) et 3 (info-dropdown) : le lien garde
         ici sa propre couleur (color:var(--ink), regle desktop pensee pour
         le fond CLAIR du dropdown survol) qui l'emporte sur la couleur
         claire posee plus haut sur le CONTENEUR (#nav-secondary-menu
         .circuit-dropdown/.info-dropdown) - une regle qui matche l'element
         lui-meme bat toujours une valeur seulement heritee du parent, quelle
         que soit la specificite de cette derniere. Contrairement a l'entree
         2 (mega-panel), qui a deja sa propre regle de couleur ciblant le
         lien (#nav-secondary-menu .mega-panel .menu-items__lien, plus haut),
         d'ou son contraste correct des le depart. Retour utilisateur
         2026-09-17 : texte peu lisible + trop colle a gauche sur ces 2
         entrees - couleur corrigee ici directement sur le lien, et un peu
         de retrait horizontal ajoute (les autres paddings du panneau restent
         purement verticaux, cf. commentaire plus haut sur l'inset unique
         .8em du .sub-panel). */
      #nav-secondary-menu .circuit-dropdown .menu-items__lien,
      #nav-secondary-menu .info-dropdown .menu-items__lien {
        /* .8em porte a 1.6em (retour utilisateur 2026-09-18, 2e passe) :
           encore trop proche de la puce du titre parent a .8em. */
        padding: .35em .3em .35em 1.6em;
        color: rgba(255,255,255,.85);
      }
      /* Retrait supplementaire (demande utilisateur 2026-09-18) : les sous-
         entrees du mega-panel (niveau 2, "Architecture unique" etc.)
         demarraient exactement sous le titre de colonne (mega-col-titre,
         qui garde son propre inset sans padding-left ci-dessous) - decalees
         un peu plus a droite pour se distinguer visuellement du titre. Les
         sous-sous-entrees (tiret, plus bas) suivent automatiquement puisque
         leur margin-left s'ajoute a ce padding via leur <li> parent. */
      #nav-secondary-menu .mega-panel .menu-liste > .menu-entree > .menu-items__lien {
        padding: .3em 0 .3em .5em;
      }
      #nav-secondary-menu .mega-col-titre {
        padding: 0;
        margin: .2em 0 .1em;
      }
      #nav-secondary-menu .mega-panel { gap: .4em; }
      #nav-secondary-menu .mega-panel .menu-liste .menu-liste {
        padding-left: 0;
        margin: 0;
      }
      #nav-secondary-menu .mega-panel .menu-liste .menu-liste .menu-entree {
        margin-left: .7em;
      }
      #nav-secondary-menu .mega-panel .menu-liste .menu-liste .menu-entree > .menu-items__lien {
        padding: .15em 0;
        font-size: .85em;
      }
  }

  /* Encart titre centré + 2 infos, au milieu du header */
  .header-titrebox {
    padding: 2em;
  }
    /* Kicker : titre de la rubrique parente, au-dessus du titre de page -
       propre a header/dist.html (rubrique/article), meme esprit que le
       kicker du hero sommaire (header/sommaire.html et header/rubrique-
       sommaire.html, scope html.composition_sommaire .header-kicker) mais
       scope ici sur les 2 classes de page que dist.html sert reellement -
       header/generale.html et header/recherche.html partagent
       .header-titrebox/.header-titre sans kicker, ne doivent pas heriter
       de cet agrandissement. Exclusion :not(.composition_sommaire) :
       une rubrique avec composition=sommaire (header/rubrique-sommaire.html)
       porte aussi .page_rubrique - sans cette exclusion, cette regle plus
       specifique (3 classes) ecraserait partiellement le style hero du bloc
       plus bas dans ce fichier malgre son ordre posterieur. */
    html.page_article:not(.composition_sommaire) .header-titrebox .header-kicker,
    html.page_rubrique:not(.composition_sommaire) .header-titrebox .header-kicker {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .8em;
      margin: 0 0 .6em;
      font-family: var(--font-texte);
      font-size: .8em;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.82);
      text-shadow: 0 1px 6px rgba(0,0,0,.3);
    }
      html.page_article:not(.composition_sommaire) .header-titrebox .header-kicker-line,
      html.page_rubrique:not(.composition_sommaire) .header-titrebox .header-kicker-line {
        width: 2em;
        height: 1px;
        background: rgba(255,255,255,.4);
      }
    html.page_article .header-titrebox .header-titre,
    html.page_rubrique .header-titrebox .header-titre {
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.15em;
    }
    .header-titrebox h1,
    .header-titrebox .header-titre {
      margin-bottom: 0.35em;
      text-shadow: 0 2px 12px rgba(0,0,0,.35);
    }
    .header-titrebox .header-infos {
      display: flex;
      justify-content: center;
      gap: 1.5em;
      font-family: var(--font-titres);
      font-size: 0.9em;
      letter-spacing: 0.05em;
      opacity: .92;
    }

    /* Header rubrique-circuits : accroche sous le titre + icones thematiques
       (demande utilisateur 2026-09-16, header/rubrique-circuits.html).
       Accroche reprise du style .header-tagline du hero sommaire plus bas
       dans ce fichier (italique, police titres) plutot que du texte courant.
       Memes classes .themes/.icon-theme/.tooltip-theme que .tour-card
       (inclure/carte-circuit-simple.html) et .circuit-info-bloc
       (inclure/article-circuit-sidebar.html), redeclarees ici scopees a
       .header-themes ; boucle du squelette sans lien a un contenu precis,
       donc toujours les 6 thematiques avec toutes leurs sous-thematiques au
       survol. Taille corrigee 2 fois le 2026-09-16 : d'abord ramenee a 44px
       (retour "trop grand"), puis reagrandie a 56px/rounded-square (retour
       "maintenant trop petit") - la bulle d'info-bulle reste en taille fixe
       (rem, pas em) dans les 2 cas, donc son texte ne bouge plus quelle que
       soit la taille de la pastille. Bulle ouverte sous la pastille (`top`),
       pas au-dessus comme .tour-card/.circuit-info-bloc : demande
       utilisateur du 2026-09-16, propre a ce contexte header. */
    .header-titrebox .header-baseline {
      font-family: var(--font-titres);
      font-style: italic;
      font-weight: 400;
      font-size: 1.05em;
      letter-spacing: normal;
      margin: 0 0 1.5em;
      opacity: .88;
      text-shadow: 0 1px 6px rgba(0,0,0,.3);
    }
    .header-titrebox .header-themes {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1em;
      margin-bottom: .3em;
    }

    /* Header rubrique-informations : titres des articles affiches en
       mots-cles/tags sous le titre (demande utilisateur 2026-09-16,
       header/rubrique-informations.html). Reprend .tag-list/.tag-pill de
       content/recherche.html (mots-cles suggeres), surcharge ici en clair
       sur fond sombre - meme logique de scoping que .header-themes juste
       au-dessus. */
    .header-titrebox .header-tags {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: .6em;
      margin: var(--space-xl) 0 .3em;
    }
    @media screen and (min-width: 981px) {
      .header-titrebox .header-tags {
        max-width: 840px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    .header-titrebox .header-tags .tag-pill {
      background: var(--blanc);
      border-color: var(--blanc);
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .header-titrebox .header-tags .tag-pill:hover,
    .header-titrebox .header-tags .tag-pill:focus {
      border-color: var(--c-page);
      color: var(--c-page);
    }
    .header-titrebox .header-themes .icon-theme {
      position: relative;
      width: 56px; height: 56px;
      border-radius: .4em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'icons';
      font-size: 2em;
      color: var(--blanc);
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
      /* background-color pose en inline par le squelette (couleur thematique) */
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .header-titrebox .header-themes .icon-theme:hover,
    .header-titrebox .header-themes .icon-theme:focus {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .header-titrebox .header-themes .tooltip-theme {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      min-width: 170px;
      max-width: 220px;
      padding: .7em .9em;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card-hover);
      background: inherit;
      color: var(--blanc);
      font-family: var(--font-texte);
      font-size: .8rem;
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .header-titrebox .header-themes .icon-theme:hover .tooltip-theme,
    .header-titrebox .header-themes .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; }
    .header-titrebox .header-themes .tooltip-titre {
      display: block;
      font-family: var(--font-titres);
      font-size: .85em;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: .5em;
    }
    .header-titrebox .header-themes .tooltip-theme ul {
      list-style: none;
      margin: 0;
      padding: 0 0 6px 0;
    }
    .header-titrebox .header-themes .tooltip-theme li {
      position: relative;
      padding-left: .9em;
      font-size: .85em;
      line-height: 1.5em;
    }
    .header-titrebox .header-themes .tooltip-theme li::before {
      content: "–";
      position: absolute;
      left: 0;
    }

  /* Champ de recherche du header/recherche.html (fichier independant de
     header/generale.html, propre a la page recherche) : centre dans le
     header-titrebox, sous les 2 barres de menu. Pas de label (placeholder
     seul = recherche en cours). Pilule blanche a bordure fine (--line),
     input transparent, bouton loupe accole a droite separe par un filet
     vertical - un seul bloc pilule, pas deux elements disjoints. */
  .header-recherche {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 360px;
    width: 600px;
    max-width: 80vw;
    margin: 1.2em auto 0;
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
  }
    .header-recherche-input {
      flex: 1 1 auto;
      min-width: 0;
      background: transparent;
      border: none;
      color: var(--ink);
      padding: .75em 1.3em;
      font-size: .95em;
      font-family: inherit;
    }
    .header-recherche-input::placeholder { color: var(--gris); opacity: .75; }
    .header-recherche-submit {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3em;
      min-width: 0;
      padding: 0;
      line-height: normal;
      border: none;
      border-left: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      transition: background .2s ease;
    }
    .header-recherche-submit:hover { background: var(--gris-bg); }

  @media screen and (max-width: 736px) {
    .header-recherche { width: 360px; }
    html.page_article:not(.composition_sommaire) .header-titrebox .header-kicker,
    html.page_rubrique:not(.composition_sommaire) .header-titrebox .header-kicker { font-size: .7em; letter-spacing: .16em; }
    html.page_article:not(.composition_sommaire) .header-titrebox .header-kicker-line,
    html.page_rubrique:not(.composition_sommaire) .header-titrebox .header-kicker-line { width: 1.4em; }
    .header-titrebox .header-themes { gap: .7em; }
    .header-titrebox .header-themes .icon-theme { width: 46px; height: 46px; font-size: 1.6em; }
  }

/* ==========================================================
   CONTENT — H1 et wrapper principal
   ========================================================== */

  #content {
    padding: 4em 0;
  }
    #content h1 {
      color: var(--titre);
    }

    /* Sommaire (v1.2.0) : chaque section gere deja son propre padding via
       .couleur, le padding-bottom generique de #content s'ajoutait a celui
       du bloc #cta (.wrapper.cta, 5em) et creait un espace trop grand entre
       la derniere section (temoignages) et le CTA. Scope composition_sommaire
       (pas page_sommaire) : meme corps de page (inclure/composition-
       sommaire-body.html) reutilise par une rubrique en composition=sommaire
       (content/rubrique-sommaire.html), meme correctif necessaire. */
    html.composition_sommaire #content {
      padding-bottom: 0;
    }

/* ==========================================================
   SIDEBARS
   ========================================================== */

  /* Espacement entre sidebar et content-main : .row (grid.css) n'a aucun
     gutter par defaut (seul .gtr-0 existe, deja a 0) - meme valeur que
     .layout-sidebar-slim pour rester coherent sur tout le site. Corrige
     au passage un manque deja present sur article-circuits (sidebar et
     content-main colles, jamais remarque car les cadres blancs de la
     sidebar suffisaient a la distinguer visuellement). */
  .layout-sidebar-normal-1,
  .layout-sidebar-normal-2 {
    gap: 2em;
  }

  /* col-3/col-9 (grid.css) totalisent deja 100% du conteneur : au moindre
     gap ajoute la somme depasse 100%, et .row (flex-wrap:wrap) fait
     passer content-main a la ligne suivante des le calcul des lignes -
     avant meme que flex-shrink n'ait sa chance de compenser. Constate en
     live (screenshot + getBoundingClientRect), pas suppose. Meme parade
     que .layout-sidebar-slim plus haut : sidebar en largeur fixe,
     content-main en flex-basis 0 qui absorbe tout le reste (conteneur
     moins sidebar moins gap). Scopee au-dessus du seuil mobile 736px pour
     laisser intact l'empilement par .col-12-mobile{width:100%}. */
  @media screen and (min-width: 737px) {
    .layout-sidebar-normal-1 .sidebar,
    .layout-sidebar-normal-2 .sidebar {
      flex: 0 0 320px;
    }
    .layout-sidebar-normal-1 .content-main,
    .layout-sidebar-normal-2 .content-main {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  /* normal-1 : tablette -> sidebar en début de contenu
     normal-2 : tablette -> sidebar en fin de contenu */
  .layout-sidebar-normal-1 .sidebar { order: -1; }
  .layout-sidebar-normal-2 .sidebar { order: 1; }

  @media screen and (max-width: 980px) {
    .layout-sidebar-normal-1 .sidebar,
    .layout-sidebar-normal-2 .sidebar {
      order: 0;
    }
    .layout-sidebar-normal-1 .sidebar { order: -1; }
    .layout-sidebar-normal-2 .sidebar { order: 1; }
  }

  /* mobile (<=736px, meme seuil que .col-12-mobile qui empile sidebar et
     content-main) : sidebar affichee apres le contenu quel que soit le
     layout (normal-1 ou normal-2) - demande utilisateur 2026-09-16,
     l'ordre desktop/tablette ci-dessus (sidebar avant le texte en
     normal-1) ne s'applique plus une fois empile. Ne concerne pas le
     panneau de filtre .layout-sidebar-slim (rubrique-circuits), garde
     au-dessus des resultats sur mobile par demande explicite anterieure. */
  @media screen and (max-width: 736px) {
    .layout-sidebar-normal-1 .sidebar,
    .layout-sidebar-normal-2 .sidebar {
      order: 1;
    }
  }

  /* Article circuit : sidebar (prix/durée/difficulté + bouton) fixe au
     scrolling pendant que le texte défile. align-self:flex-start requis
     car .row est display:flex/align-items:stretch — sans lui l'aside est
     étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px
     laissait passer la bar2 (barre de menu fixe compacte, ~90px) - bar2
     supprimee le 2026-09-16, valeur conservee telle quelle (non revisitee,
     pas d'acces navigateur pour la remesurer, cf. [[feedback-no-network-calls]]). */
  #article-circuits .sidebar {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    /* pas de sticky en mobile : la sidebar est empilée au-dessus du texte,
       pas à côté — rien à fixer pendant le scroll */
    #article-circuits .sidebar {
      position: static;
    }
  }

  /* slim : largeur fixe 200px sur grand écran, 2 blocs empilés */
  .layout-sidebar-slim {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
  }
    .layout-sidebar-slim .sidebar-slim {
      flex: 0 0 240px;
      display: flex;
      flex-direction: column;
      gap: 1.5em;
    }
    .layout-sidebar-slim .content-main {
      flex: 1 1 0;
      min-width: 0;
    }

  @media screen and (max-width: 980px) {
    .layout-sidebar-slim {
      flex-direction: column;
      flex-wrap: nowrap;
    }
    .layout-sidebar-slim .sidebar-slim {
      flex-basis: auto;
      width: 100%;
    }
    /* mobile : filtre au-dessus des résultats */
    .layout-sidebar-slim .sidebar-slim { order: -1; }
    .layout-sidebar-slim .content-main { order: 0; }
  }

  /* "fixing option on scrolling" (demande rubrique-circuits) : les 2 blocs
     de la sidebar (filtre + mini-calendrier) restent visibles ensemble
     pendant que la colonne de résultats défile. Scopé à #rubrique-circuits
     seul — le sommaire réutilise .sidebar-slim pour son propre bloc
     circuits mais n'a pas demandé ce comportement, et sa colonne de
     résultats (slideshow Slick, hauteur fixe) n'a de toute façon rien à
     dépasser pour qu'un sticky serve à quelque chose. align-self:flex-start
     est nécessaire car le parent est display:flex — sans lui l'aside est
     étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px
     laissait passer la bar2 (barre de menu fixe compacte, ~90px) - bar2
     supprimee le 2026-09-16, valeur conservee telle quelle (non revisitee,
     pas d'acces navigateur pour la remesurer, cf. [[feedback-no-network-calls]]). */
  #rubrique-circuits .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    /* pas de sticky en mobile : le filtre est empilé au-dessus des
       résultats, pas à côté — rien à fixer pendant le scroll */
    #rubrique-circuits .sidebar-slim {
      position: static;
    }
  }

  /* Rubrique circuits : 2 blocs de la sidebar-slim (filtre + mini-calendrier),
     et grille de résultats en dur (pas de slideshow ici, contrairement au
     bloc circuits du sommaire). Scopé à #rubrique-circuits : le sommaire
     réutilise déjà .sidebar-slim-bloc-2 pour son propre formulaire (déjà
     stylé via .formulaire-filtre-statique) et ne doit pas hériter d'un
     2e cadre blanc autour. */
  #rubrique-circuits .sidebar-slim-bloc-1,
  #rubrique-circuits .sidebar-slim-bloc-2 {
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
    #rubrique-circuits .sidebar-slim-bloc-1 .formulaire-filtre-statique {
      border: 0;
      border-radius: 0;
    }
    #rubrique-circuits .sidebar-slim-bloc-2 .calendrier-mini-wrap {
      padding: 1.2em 1.4em;
    }

  .tour-grid {
    display: grid;
    gap: 2em;
  }
    .tour-grid.cols3 { grid-template-columns: repeat(3, 1fr); }

  @media screen and (max-width: 1280px) {
    .tour-grid.cols3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media screen and (max-width: 640px) {
    .tour-grid.cols3 { grid-template-columns: 1fr; }
  }

  .tours-results .aucun-resultat {
    background: var(--gris-bg);
    padding: 2em;
    text-align: center;
    color: var(--gris);
  }

  .pagination {
    display: flex;
    justify-content: center;
    gap: .6em;
    margin-top: 2.5em;
  }
    .pagination a,
    .pagination strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.4em;
      height: 2.4em;
      padding: 0 .5em;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: .85em;
      font-weight: 700;
    }
    .pagination a:hover {
      border-color: var(--c-page);
      color: var(--c-page);
    }
    .pagination strong {
      /* pas de var(--c-page) ici : sur cette install, --c-generale/--c-circuit/
         --c-info/--c-mice sont ecrases a vide par le CSS genere par
         configurer_template_travel (css/travel-template.css, "Gestion des
         couleurs"), ce qui invalide --c-page site-wide (fond transparent,
         page courante illisible en blanc sur blanc) - a corriger cote
         generateur separement. */
      background: #000;
      border-color: #000;
      color: var(--blanc);
    }

/* ==========================================================
   ARTICLE CIRCUIT — intro, sidebar prix/durée/difficulté, contact
   ========================================================== */

  /* Ancre douce du bouton "Demande d'infos" (sidebar) vers #contact-circuit.
     scroll-margin-top laissait passer la bar2 (barre de menu fixe compacte,
     supprimee le 2026-09-16, valeur conservee telle quelle), même valeur
     que le top du sticky de #rubrique-circuits. */
  html { scroll-behavior: smooth; }
  #contact-circuit { scroll-margin-top: 96px; }

  .circuit-infos {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
  }
    .circuit-info-bloc {
      background: var(--blanc);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 1em 1.2em;
    }
      .circuit-info-label {
        font-family: var(--font-titres);
        font-size: .8em;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .6;
        margin-bottom: .4em;
      }
      .circuit-info-valeur {
        font-size: 1.15em;
        font-weight: 700;
      }
        .circuit-info-valeur .unit {
          font-size: .7em;
          font-weight: 500;
          opacity: .6;
        }
      .circuit-difficulte {
        list-style: none;
        padding: 0;
        margin: 0;
      }
        .circuit-difficulte li {
          padding: 0;
          margin-bottom: .3em;
          font-weight: 700;
        }
        .circuit-difficulte li:last-child { margin-bottom: 0; }

    .circuit-info-cta .button {
      display: block;
      text-align: center;
    }

    /* Icones thematiques (sidebar) : memes classes .themes/.icon-theme/
       .tooltip-theme qu'inclure/carte-circuit-simple.html (.tour-card),
       redeclarees ici car scopees a .tour-card la-bas. La bulle est ancree
       a gauche sur les 2 premieres pastilles (colonne la plus a gauche de
       la page, une bulle centree deborderait du conteneur). */
    .circuit-info-bloc .themes { display: flex; flex-wrap: wrap; gap: .6em; }
    .circuit-info-bloc .icon-theme {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 0.3em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'icons';
      font-size: .8em;
      color: var(--blanc);
      /* background-color pose en inline par le squelette (couleur thematique) */
      transition: transform .2s ease;
    }
    .circuit-info-bloc .icon-theme:hover { transform: translateY(-2px) scale(1.08); }
    .circuit-info-bloc .tooltip-theme {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      min-width: 190px;
      max-width: 260px;
      padding: .8em 1em;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card-hover);
      background: inherit;
      color: var(--blanc);
      font-family: var(--font-texte);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .circuit-info-bloc .icon-theme:hover .tooltip-theme,
    .circuit-info-bloc .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; }
    .circuit-info-bloc .icon-theme:nth-child(1) .tooltip-theme,
    .circuit-info-bloc .icon-theme:nth-child(2) .tooltip-theme {
      left: 0;
      transform: none;
    }
    .circuit-info-bloc .tooltip-titre {
      display: block;
      font-family: var(--font-titres);
      font-size: .8em;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: .5em;
    }
    .circuit-info-bloc .tooltip-theme ul {
      list-style: none;
      margin: 0;
      padding: 0 0 10px 0;
    }
    .circuit-info-bloc .tooltip-theme li {
      position: relative;
      padding-left: .9em;
      font-size: .7em;
      line-height: 1.5em;
    }
    .circuit-info-bloc .tooltip-theme li::before {
      content: "–";
      position: absolute;
      left: 0;
    }

  /* Bloc contact article circuit : formulaire Formidable "contact_circuit",
     2 fieldsets (nom "fieldset_1" / "fieldset_2" cote back-office) a 50%
     l'un a cote de l'autre. Le squelette saisies/fieldset.html du plugin
     saisies prefixe systematiquement la classe par "fieldset_" + le nom
     de la saisie (#ENV{nom}|saisie_nom2classe), d'ou la classe reelle
     "fieldset_fieldset_1" / "fieldset_fieldset_2" (verifie dans
     plugins/auto/saisies/v6.3.6/saisies/fieldset.html) - ne pas
     confondre avec la classe generique "fieldset" presente sur tous les
     fieldsets. Bouton #ENV{...} rendu par la saisies plugin dans
     <p class="boutons"> en frere de .editer-groupe (voir
     formulaires/inc-saisies-cvt.html du plugin saisies) donc deja sous les
     2 colonnes sans reglage supplementaire.
     Fond legerement teinte (var(--gris-bg), meme mecanique que
     #recherche-page .aucun-resultat) pour distinguer le bloc du texte de
     l'article au-dessus.
     La mise en 2 colonnes ne doit cibler QUE le .editer-groupe racine
     (direct enfant du <div> de inc-saisies-cvt.html, lui-meme enfant du
     <form>) : chaque fieldset genere aussi son propre .editer-groupe
     imbrique pour ses champs (meme squelette fieldset.html, ligne 30). Si
     la regle flex visait tous les .editer-groupe sans distinction, les
     champs courts de "About your journey" (dates, nb personnes, cases a
     cocher) se retrouvaient eux aussi cote a cote au lieu de s'empiler -
     d'ou le selecteur "form > div > .editer-groupe" qui ne matche que le
     niveau racine (les groupes imbriques sont enfants d'un <fieldset>, pas
     du <div> direct du <form>), laissant les champs internes en
     empilement vertical par defaut (comportement natif du plugin saisies,
     aucune regle supplementaire necessaire pour l'empilement). */
  .circuit-contact-form {
    background: var(--gris-bg);
    padding: 2em;
    border-radius: var(--radius-md);
  }
  .circuit-contact-form h3 { margin-bottom: 1em; }
  .circuit-contact-form form > div > .editer-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
  }
  .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_1,
  .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_2 {
    flex: 1 1 calc(50% - 1em);
    min-width: 0;
  }

  /* Formulaire sans fieldset (Formidable #3, "demande d'infos"/"votre
     message" de content/rubrique-informations.html) : les .editer de
     chaque champ sont alors enfants DIRECTS de ce meme .editer-groupe
     racine (pas de <fieldset> intermediaire) - sans cette regle ils
     heritaient du display:flex ci-dessus sans flex-basis dedie (seuls
     les .fieldset_fieldset_1/_2 en ont un), et se retrouvaient cote a
     cote au lieu de s'empiler. Bug releve par l'utilisateur le
     2026-09-16 sur le formulaire repete de cette page (seul appelant de
     -circuit-contact-form- avec un Formidable sans fieldset a ce jour). */
  .circuit-contact-form form > div > .editer-groupe > .editer {
    flex: 1 1 100%;
  }

  @media screen and (max-width: 736px) {
    .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_1,
    .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_2 {
      flex-basis: 100%;
    }
  }

  /* Legendes de fieldset (saisies/fieldset.html) : "About you"/"About your
     journey" en tete de colonne + "Langue"/"Main interests" (sous-groupes
     pliables) plus discrets. Toujours un <legend> nu (jamais de classe
     "editer-label" a ce niveau - voir fieldset.html ligne 24), donc jamais
     touche par le masquage de labels ci-dessous. */
  .circuit-contact-form legend {
    display: block;
    font-family: var(--font-titres);
    font-weight: 700;
    margin-bottom: 1em;
  }
  .circuit-contact-form fieldset fieldset legend {
    font-size: .8em;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .8em;
  }

  /* Espacement vertical entre chaque champ (chaque champ = un .editer
     genere par saisies/_base.html), sur les 2 colonnes. */
  .circuit-contact-form .editer { margin-bottom: var(--space-sm); }
  .circuit-contact-form .editer:last-child { margin-bottom: 0; }

  /* Labels des champs masques visuellement (seuls les placeholders
     restent visibles) - meme technique offscreen que
     #cta-contact .contact-block-form .editer-label plus haut dans ce
     fichier. Limite au tag <label> : pour une saisie checkbox/radio (ex.
     "Main interests", "Langue"), saisies/_base.html rend ce meme label
     applicatif en <legend class="editer-label label"> (conteneur_label
     "legend" - voir plugins/auto/saisies/v6.3.6/saisies/checkbox.php,
     checkbox_get_markup()) : ces choix n'ont pas de placeholder de
     substitution, donc ce texte doit rester visible, d'ou le selecteur
     "label.editer-label" plutot que ".editer-label" tout court. */
  .circuit-contact-form label.editer-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Cases a cocher ("Main interests"/"Langue") : le reset sitewide
     "input, select, textarea {appearance:none}" (grid.css) les rend
     invisibles sans re-styling explicite - meme correctif deja applique
     a .formulaire-filtre-statique input[type="radio"] plus haut dans ce
     fichier, transpose ici en checkbox. */
  .circuit-contact-form .choix {
    display: block;
    margin-bottom: .5em;
  }
  .circuit-contact-form .choix input[type="checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: auto;
    accent-color: var(--c-circuit);
  }
  .circuit-contact-form .choix label {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    cursor: pointer;
  }

  /* Bouton d'envoi centre sous les 2 colonnes, detache du bloc de champs. */
  .circuit-contact-form .boutons {
    margin-top: var(--space-lg);
    text-align: center;
  }

  /* Page Contact (content/article-contact.html) : le meme formulaire
     Formidable #1/.circuit-contact-form n'y est plus un simple bloc
     secondaire de fiche circuit mais l'objet principal de la page - repris
     en carte blanche "accueillante" avec un vrai en-tete editorial
     (.section-head/.eyebrow/.rule, meme motif que les CTA contact plus bas
     dans ce fichier) a la place du <h3> nu d'avant, et des champs qui se
     voient enfin (fond+bordure nets sur la carte blanche, placeholder
     plus soutenu) - demande utilisateur du 2026-09-10 ("formulaire trop
     laid, on ne voit pas les placeholders"). Scope sur #article-contact-page
     pour ne pas toucher le formulaire identique (memes classes) de
     content/article-circuits.html (#article-circuits), pas concerne par
     cette demande. Meme probleme et meme remede pour le formulaire "demande
     d'infos" (Formidable #3, sans fieldset) de content/rubrique-informations.html,
     etendu ici a #rubrique-informations. */
  #article-contact-page .circuit-contact-form,
  #rubrique-informations .circuit-contact-form {
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 2.6em 2.6em 2.8em;
    margin-top: var(--space-xl);
  }
  #article-contact-page .circuit-contact-form .section-head,
  #rubrique-informations .circuit-contact-form .section-head {
    margin-bottom: 2em;
  }
  #article-contact-page .circuit-contact-form .rule,
  #rubrique-informations .circuit-contact-form .rule {
    background: var(--c-info);
  }
  #article-contact-page .contact-form-intro,
  #rubrique-informations .contact-form-intro {
    margin: .8em 0 0;
    font-size: .95em;
    opacity: .7;
  }

  /* Encart formulaire repete de content/rubrique-informations.html
     (.form-pause-grid) : texte d'intro et champs cote a cote (col-4/col-8,
     meme grille que inclure/article-circuit-contact.html) plutot
     qu'empiles, pour limiter la hauteur d'un bloc qui revient toutes les 6
     fiches - demande utilisateur du 2026-09-16. Le .section-head generique
     ci-dessus (centre, filet centre par margin:auto) est pense pour un
     bloc pleine largeur au-dessus d'un formulaire, pas pour une colonne
     etroite a cote des champs : ecrase ici en aligne a gauche. Scope
     #rubrique-informations uniquement, la version pleine page de
     #article-contact-page (bloc unique, pas repete) garde l'empilement
     centre d'origine. */
  #rubrique-informations .form-pause-grid .section-head {
    text-align: left;
    max-width: none;
    margin: 0;
  }
  #rubrique-informations .form-pause-grid .section-head .rule {
    margin: 1em 0 0;
  }
  #rubrique-informations .form-pause-intro {
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 736px) {
    #rubrique-informations .form-pause-intro { margin-bottom: 1.5em; }
  }

  /* Carte trop large/imposante pour un bloc repete toutes les 6 fiches -
     demande utilisateur du 2026-09-16 : padding reduit, specifique a
     .rubrique-info-form-pause (la carte pleine page de
     #article-contact-page garde son padding d'origine). */
  #rubrique-informations .rubrique-info-form-pause.circuit-contact-form {
    padding: 1.4em 1.8em 1.6em;
  }

  /* Champs du formulaire (#FORMULAIRE_FORMIDABLE{3}) reorganises en grille
     nom+email empiles / message cote a cote, puis antispam/bouton cote a
     cote en dessous - 2 rangees de 2 blocs mitoyens plutot que
     l'empilement vertical par defaut du plugin saisies, pour un bloc plus
     horizontal et bien moins haut - demande utilisateur du 2026-09-16.
     Cible les classes .editer_<nom> generees par saisies/_base.html
     d'apres le nom de champ configure cote Formidable (formulaire #3
     "Contact General", cf. spip_formulaires.saisies : input_1=nom
     complet, input_3=email, textarea_1=message, input_6=antispam).
     Couplage fragile par nature (une renumerotation des champs en
     back-office casserait ce placage), mais aucune autre accroche stable
     n'existe sans toucher au squelette du plugin (proscrit, cf.
     .editer-groupe generique sinon). Le <div> nu entre <form> et
     .editer-groupe (saisies/formulaires/inc-saisies-cvt.html ligne 31,
     sans classe) sert de conteneur de grille ; .editer-groupe passe en
     display:contents pour que ses champs deviennent des items de cette
     grille au meme niveau que .boutons (sinon le bouton, hors de
     .editer-groupe, resterait sous la grille au lieu d'y occuper une
     case). */
  #rubrique-informations .form-pause-champs form > div {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: 1.5em;
  }
  #rubrique-informations .form-pause-champs .editer-groupe {
    display: contents;
  }
  #rubrique-informations .form-pause-champs .editer_input_1 { grid-column: 1; grid-row: 1; }
  #rubrique-informations .form-pause-champs .editer_input_3 { grid-column: 1; grid-row: 2; }
  #rubrique-informations .form-pause-champs .editer_textarea_1 { grid-column: 2; grid-row: 1 / 3; }
  #rubrique-informations .form-pause-champs .editer_input_6 { grid-column: 1; grid-row: 3; }
  #rubrique-informations .form-pause-champs .boutons {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    align-self: center;
    text-align: left;
  }
  #rubrique-informations .rubrique-info-form-pause .editer {
    margin-bottom: var(--space-xs);
  }
  #rubrique-informations .rubrique-info-form-pause.circuit-contact-form textarea {
    min-height: 76px;
  }
  @media screen and (max-width: 736px) {
    #rubrique-informations .form-pause-champs form > div {
      grid-template-columns: 1fr;
    }
    #rubrique-informations .form-pause-champs .editer_input_1,
    #rubrique-informations .form-pause-champs .editer_input_3,
    #rubrique-informations .form-pause-champs .editer_textarea_1,
    #rubrique-informations .form-pause-champs .editer_input_6,
    #rubrique-informations .form-pause-champs .boutons {
      grid-column: 1;
      grid-row: auto;
    }
    #rubrique-informations .form-pause-champs .boutons { text-align: center; }
  }

  /* Champs : le fond gris-bg de la carte d'origine + la bordure a peine
     visible de la regle generique (rgba .2, plus haut dans ce fichier)
     fondaient entierement les champs dans leur propre carte - sur du gris
     sur gris, le placeholder (color:inherit a 50% d'opacite, meme regle
     generique) devenait quasi illisible. La carte est maintenant blanche
     (ci-dessus) : on redonne aux champs un fond legerement teinte + une
     bordure nette pour qu'on voie ou cliquer, et on fonce un peu le
     placeholder pour qu'il reste net sur ce fond clair. */
  #article-contact-page .circuit-contact-form input[type="text"],
  #article-contact-page .circuit-contact-form input[type="email"],
  #article-contact-page .circuit-contact-form input[type="password"],
  #article-contact-page .circuit-contact-form textarea,
  #article-contact-page .circuit-contact-form select,
  #rubrique-informations .circuit-contact-form input[type="text"],
  #rubrique-informations .circuit-contact-form input[type="email"],
  #rubrique-informations .circuit-contact-form input[type="password"],
  #rubrique-informations .circuit-contact-form textarea,
  #rubrique-informations .circuit-contact-form select {
    background: var(--gris-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: .85em 1em;
  }
  #article-contact-page .circuit-contact-form input[type="text"]:focus,
  #article-contact-page .circuit-contact-form input[type="email"]:focus,
  #article-contact-page .circuit-contact-form input[type="password"]:focus,
  #article-contact-page .circuit-contact-form textarea:focus,
  #article-contact-page .circuit-contact-form select:focus,
  #rubrique-informations .circuit-contact-form input[type="text"]:focus,
  #rubrique-informations .circuit-contact-form input[type="email"]:focus,
  #rubrique-informations .circuit-contact-form input[type="password"]:focus,
  #rubrique-informations .circuit-contact-form textarea:focus,
  #rubrique-informations .circuit-contact-form select:focus {
    background: var(--blanc);
    border-color: var(--c-info);
  }
  #article-contact-page .circuit-contact-form textarea,
  #rubrique-informations .circuit-contact-form textarea {
    min-height: 130px;
  }
  #article-contact-page .circuit-contact-form input::-webkit-input-placeholder,
  #article-contact-page .circuit-contact-form textarea::-webkit-input-placeholder,
  #rubrique-informations .circuit-contact-form input::-webkit-input-placeholder,
  #rubrique-informations .circuit-contact-form textarea::-webkit-input-placeholder {
    color: var(--gris);
    opacity: .65;
  }
  #article-contact-page .circuit-contact-form input:-moz-placeholder,
  #article-contact-page .circuit-contact-form textarea:-moz-placeholder,
  #article-contact-page .circuit-contact-form input::-moz-placeholder,
  #article-contact-page .circuit-contact-form textarea::-moz-placeholder,
  #rubrique-informations .circuit-contact-form input:-moz-placeholder,
  #rubrique-informations .circuit-contact-form textarea:-moz-placeholder,
  #rubrique-informations .circuit-contact-form input::-moz-placeholder,
  #rubrique-informations .circuit-contact-form textarea::-moz-placeholder {
    color: var(--gris);
    opacity: .65;
  }
  #article-contact-page .circuit-contact-form input:-ms-input-placeholder,
  #article-contact-page .circuit-contact-form textarea:-ms-input-placeholder,
  #rubrique-informations .circuit-contact-form input:-ms-input-placeholder,
  #rubrique-informations .circuit-contact-form textarea:-ms-input-placeholder {
    color: var(--gris);
    opacity: .65;
  }

  /* Cases a cocher : accent-color alignee sur la couleur chaleureuse de la
     page (var(--c-info), meme teinte que l'eyebrow/le filet ci-dessus)
     plutot que le bleu circuit de la regle generique. */
  #article-contact-page .circuit-contact-form .choix input[type="checkbox"] {
    accent-color: var(--c-info);
  }

  /* Colonnes "About you"/"About your journey" separees par un filet
     vertical discret en plus du gap - lecture plus nette de 2 blocs de
     formulaire distincts plutot que 2 colonnes qui se touchent. */
  @media screen and (min-width: 737px) {
    #article-contact-page .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_2 {
      padding-left: 2em;
      border-left: 1px solid var(--line);
    }
  }

  /* Bouton d'envoi : sort du style outline generique (transparent, tres
     discret) pour un bouton plein dans la meme couleur chaleureuse que
     l'eyebrow/le filet - plus engageant sur une page dont c'est l'unique
     appel a l'action. */
  #article-contact-page .circuit-contact-form input[type="submit"],
  #article-contact-page .circuit-contact-form button[type="submit"],
  #rubrique-informations .circuit-contact-form input[type="submit"],
  #rubrique-informations .circuit-contact-form button[type="submit"] {
    background: var(--c-info);
    border-color: var(--c-info);
    color: var(--blanc);
    border-radius: var(--radius-md);
    min-width: 14em;
  }
  #article-contact-page .circuit-contact-form input[type="submit"]:hover,
  #article-contact-page .circuit-contact-form button[type="submit"]:hover,
  #rubrique-informations .circuit-contact-form input[type="submit"]:hover,
  #rubrique-informations .circuit-contact-form button[type="submit"]:hover {
    background: var(--brique_hover);
    border-color: var(--brique_hover);
  }

  @media screen and (max-width: 736px) {
    #article-contact-page .circuit-contact-form,
    #rubrique-informations .circuit-contact-form {
      padding: 1.8em 1.5em 2em;
    }
  }

  /* Documents à télécharger, fin de content */
  .documents-joints {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--line);
  }
    .documents-joints h4 {
      font-family: var(--font-titres);
      margin-bottom: 1em;
    }
    .documents-joints ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .6em;
    }
    .documents-joints li {
      display: flex;
      align-items: center;
      gap: .8em;
      padding: .8em 1em;
      background: var(--blanc);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
      .documents-joints .doc-titre { flex: 1; font-weight: 700; }
      .documents-joints .doc-meta { font-size: .8em; opacity: .6; }
      .documents-joints .doc-telecharger {
        font-size: .85em;
        font-weight: 700;
        color: var(--c-page);
        white-space: nowrap;
      }
      .documents-joints .doc-telecharger:hover { color: var(--brique); }

/* ==========================================================
   FOOTER — logo + colonnes de liens
   ========================================================== */

  #footer {
    background: #16181b;
    color: var(--blanc);
    padding: 4em 0 2em;
  }
    #footer ul li {
      padding-left: 0em;
    }
    #footer a {
      color: var(--blanc);
      opacity: .85;
      border-bottom-color: transparent;
    }
    #footer a:hover {
      opacity: 1;
    }
    #footer .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 2.6fr;
      gap: 3em;
      margin-bottom: 3em;
    }
    #footer .footer-brand {
      max-width: 300px;
    }
    #footer .footer-logo {
      font-family: var(--font-titres);
      font-style: italic;
      font-size: 1.5em;
      margin-bottom: .6em;
      display: block;
    }
    #footer .footer-tagline {
      font-size: .85em;
      line-height: 1.7em;
      opacity: .6;
      margin: 0;
    }
    /* Colonnes du footer = rendu generique du plugin menus (inclure/menu.html,
       identifiant footer_fr/footer_en choisi selon #LANG). Depth 0 = les
       colonnes elles-memes (chaque <li> = 1 colonne, son lien/texte direct =
       l'intitule de colonne) ; depth 1 = la liste de liens de chaque colonne. */
    #footer .footer-menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #footer .footer-menu[data-depth="0"] {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 2em;
    }
      #footer .footer-menu[data-depth="0"] > li > a,
      #footer .footer-menu[data-depth="0"] > li > span {
        display: block;
        font-size: 0.8em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 700;
        opacity: .8;
        margin-bottom: 1.1em;
        font-family: var(--font-texte);
      }
    #footer .footer-menu[data-depth="1"] > li {
      margin-bottom: 0.2em;
    }
      #footer .footer-menu[data-depth="1"] > li > a,
      #footer .footer-menu[data-depth="1"] > li > span {
        opacity: .55;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        font-size: 0.85em;
        text-decoration: none;
        
      }
      #footer .footer-menu[data-depth="1"] > li > a:hover {opacity: .65}
    #footer .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1em;
      border-top: solid 1px rgba(255, 255, 255, .15);
      padding-top: 1.5em;
      font-size: 0.8em;
      opacity: .7;
    }
      #footer .footer-copyright { margin: 0; }
      #footer .footer-bottom-links ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5em;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      #footer .footer-bottom-links #menu_lang {
        display: inline-flex;
        gap: .6em;
      }
        #footer .footer-bottom-links #menu_lang a,
        #footer .footer-bottom-links #menu_lang strong {
          opacity: .85;
          text-transform: uppercase;
        }

    @media screen and (max-width: 900px) {
      #footer .footer-top { grid-template-columns: 1fr; }
      #footer .footer-brand { max-width: none; }
      #footer .footer-menu[data-depth="0"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    }
    @media screen and (max-width: 640px) {
      #footer .footer-top { grid-template-columns: 1fr; }
      #footer .footer-menu[data-depth="0"] { grid-template-columns: 1fr 1fr; }
    }
    @media screen and (max-width: 736px) {
      #footer .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

/* ==========================================================
   ACCUEIL — blocs de la page sommaire
   ========================================================== */

  /* Demande utilisateur 2026-09-17 : la section intro doit prendre les
     teintes de "Destinations" (--fond-informations/--c-info) et non plus
     "brique" - cf. .benefice-icone/.benefice-face-arriere plus bas dans ce
     fichier pour les 2 autres endroits qui reprenaient --brique en dur. */
  #sommaire-intro {padding: 0; background: var(--fond-informations);}

  #sommaire-benefices,
  #sommaire-circuits,
  #sommaire-evenements,
  .sommaire-mot-headline,
  .sommaire-mot-slideshow,
  .selection_edito,
  .selection_edito_a_la_une {
    padding: 4.5em 0;
  }

  /* Rythme de fond alterné entre sections */
  /* Demande utilisateur 2026-09-17 : meme fond que la section intro
     ("Destinations", --fond-informations) pour blender visuellement les 2
     sections en haut de page - les liens/accents internes (eyebrow, cartes
     circuits) restent en couleur Circuits (--bleu), non touches ici. */
  #sommaire-circuits { background: var(--fond-informations); }
  #sommaire-evenements { background: var(--gris-bg); }
  .sommaire-mot-slideshow { background: var(--gris-bg); }

  /* Petit intitulé en majuscules au-dessus des titres de section */
  .eyebrow {
    display: block;
    font-family: var(--font-eyebrow);
    font-size: .70em;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-info);
    margin-bottom: .4em;
  }
  .section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.5em;
  }
    .section-head h2 { margin-bottom: .3em; }
    /* La petite separation reprend la couleur de sa section (--c-section,
       posee par la classe .couleur/data-couleur de la section porteuse),
       pas la couleur ambiante de la page (--c-page) - fallback sur --c-page
       pour les sections qui n'ont pas cette classe (demande utilisateur
       2026-09-17, appliquee a toutes les sections). */
    .section-head .rule {
      width: 48px;
      height: 2px;
      background: var(--c-section, var(--c-page));
      margin: 1em auto 0;
    }

  /* Cartes des selections_editoriales (modeles/selection_edito.html) : au
     survol, un pan glisse depuis le bas (titre + intro + lien) — meme
     mecanique que les 6 bénéfices, cf. .benefice / .benefice-face-arriere
     plus bas (demande du 2026-08-21 : mêmes effets, pas de zoom/ombre). */
  .edito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
  /* Base commune des "cartes" du site (fond blanc, coin arrondi, ombre légère) :
     .edito-card / .testimonial-card / .tour-card / .events-panel partagent
     exactement cette recette, seuls leurs à-côtés diffèrent (padding, layout,
     transitions). .rubrique-card n'est PAS de la partie : sa base utilise une
     bordure au lieu d'une ombre (ombre seulement au survol), donc un rendu
     différent — regroupée séparément plus bas. */
  .edito-card, .testimonial-card, .tour-card, .events-panel {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: var(--blanc);
  }

  .edito-card {
    position: relative;
    overflow: hidden;
  }
    .edito-card a { display: block; }
    .edito-face {
      display: flex;
      flex-direction: column;
    }
    .edito-face-avant {
      transition: opacity .45s ease;
    }
      .edito-face-avant .media {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        aspect-ratio: 4 / 3;
      }
      /* adaptive_images enveloppe l'image dans <picture class="adapt-img-wrapper"
         style="position:relative">, non dimensionné par defaut : sans ces règles
         chaque carte afficherait sa photo à sa taille naturelle au lieu de
         remplir son cadre. Recette commune aux 3 endroits du site qui affichent
         une image adaptive_images en fond de carte/média (.edito-face-avant,
         .edito-a-la-une-slick, .tour-card) — reprise ici une seule fois. */
      .edito-face-avant .media .adapt-img-wrapper,
      .edito-a-la-une-slick .slide .adapt-img-wrapper,
      .tour-card .media .adapt-img-wrapper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .edito-face-avant .media .adapt-img,
      .edito-a-la-une-slick .slide .adapt-img,
      .tour-card .media .adapt-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .edito-face-avant .content { padding: var(--space-lg); }
      /* separateur repris de .tour-card .divider-icon (carte-circuit-simple.html) */
      .edito-face-avant .divider-icon {
        display: flex;
        align-items: center;
        gap: .8em;
        color: var(--line);
        font-family: 'icons';
        font-size: 1.2em;
        margin: .8em 0;
      }
        .edito-face-avant .divider-icon::before,
        .edito-face-avant .divider-icon::after {
          content: '';
          flex: 1;
          height: 1px;
          background: var(--line);
        }
        .edito-face-avant .divider-icon .icon-separator { flex-shrink: 0; line-height: 1; }
      .edito-face-avant .desc {
        font-size: .85em;
        color: var(--gris-deep);
        line-height: 1.7em;
      }
    .edito-face-arriere {
      position: absolute;
      inset: 0;
      background: var(--jaune);
      color: var(--blanc);
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-lg);
      transform: translateY(100%);
      transition: transform .9s ease;
    }
      .edito-face-arriere .title {
        color: var(--blanc);
        font-size: 1.1em;
        font-weight: 700;
      }
      .edito-face-arriere .separateur {
        width: 36px;
        height: 2px;
        background: var(--blanc);
        opacity: .6;
        margin: .7em auto;
      }
      /* separateur avec icone centrale, repris de .edito-face-avant .divider-icon
         (demande du 2026-08-21) */
      .edito-face-arriere .divider-icon {
        display: flex;
        align-items: center;
        gap: .8em;
        width: 70%;
        max-width: 200px;
        color: rgba(255, 255, 255, .6);
        font-family: 'icons';
        font-size: 1.2em;
        margin: .8em 0;
      }
        .edito-face-arriere .divider-icon::before,
        .edito-face-arriere .divider-icon::after {
          content: '';
          flex: 1;
          height: 1px;
          background: rgba(255, 255, 255, .6);
        }
        .edito-face-arriere .divider-icon .icon-separator { flex-shrink: 0; line-height: 1; }
      .edito-face-arriere .desc {
        font-size: .85em;
        line-height: 1.6em;
        margin-bottom: 1em;
        text-align: justify;
      }
      .edito-face-arriere .lien {
        font-size: .85em;
      }
    .edito-card:hover .edito-face-avant { opacity: 0; }
    .edito-card:hover .edito-face-arriere { transform: translateY(0); }

  /* "A lire avant de venir" (id_conseil, inclure/section-3-edito-fixes.html
     -> modeles/selection_edito_conseils.html) : demande utilisateur
     2026-09-17, dominante "Informations" (--c-mice) au lieu de --jaune -
     .edito-face-arriere est partagee avec d'autres sections (Don't miss,
     Temoignages) qui doivent garder leur propre couleur, donc surcharge
     scopee ici via la classe .lire-avant-venir (parametre css_conteneur de
     l'INCLURE, cf. composition-sommaire-body.html) plutot que de toucher la
     regle generique .edito-face-arriere ci-dessus. .eyebrow (couleur
     "Destinations" par defaut site-large, cf. regle generique plus haut)
     idem, surchargee ici pour suivre la meme dominante que cette section. */
  .selection_edito.lire-avant-venir .eyebrow { color: var(--c-mice); }
  .selection_edito.lire-avant-venir .edito-face-arriere { background: var(--c-mice); }

  /* Variante Slick de la selection edito (inclure/section-slick-3-articles.html) :
     meme gouttiere que .edito-grid (gap: 28px) entre les cartes, via padding
     sur .slide + marge negative equivalente sur .slick-list (qui a
     overflow:hidden par defaut) pour ne pas deborder sur les bords du
     carousel - meme mecanique que #circuits-slideshow-home / .mot-slideshow. */
  .edito-slick .slide { padding: 0 14px; }
  .edito-slick .slick-list { margin: 0 -14px; }

  /* "A lire avant de venir" (id_selection=1) : rendu rapproché de la section
     .avant-voyage de squelette6.2 (fond crème, filigrane spiritualité,
     cartes plates a bordure) — n'affecte pas les autres selection_edito
     (ex. "La ferme", id_selection=2) qui gardent le style carte/ombre du site. */
  .selection_edito.avant-voyage {
    position: relative;
    overflow: hidden;
    background: #faf4e6;
  }
    .selection_edito.avant-voyage::before {
      content: "\eb82";
      font-family: 'icons';
      position: absolute;
      top: 50%;
      right: -4vw;
      transform: translateY(-50%);
      font-size: min(38vw, 520px);
      line-height: 1;
      color: var(--c-section);
      opacity: .08;
      pointer-events: none;
    }
    .selection_edito.avant-voyage .container { position: relative; z-index: 1; }
    .selection_edito.avant-voyage .edito-card {
      border-radius: 0;
      box-shadow: none;
      border: 1px solid var(--line);
    }
      .selection_edito.avant-voyage .edito-face-avant .media { border-radius: 0; }

  /* "A la une du sommaire" (id_selection=2, modeles/selection_edito_a_la_une.html) :
     meme design que la section "farm" de squelette6.2/sommaire.html (classes
     .mice/.mice-alt, cf. css/layout.css lignes 476-493) — panneau plein fond
     couleur, texte a gauche / visuel a droite en flex 50/50 — mais le #TEXTE
     unique est remplace par un slideshow Slick 1 slide a la fois des photos
     de la selection (demande du 2026-08-21). --c-section vient de la classe
     .couleur/data-couleur posee sur la section (cf. modele), pilotee par
     #ENV{couleur}. */
  .selection_edito_a_la_une {
    background: var(--c-section);
    color: var(--blanc);
  }
    .edito-a-la-une-wrap {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      gap: 56px;
      align-items: center;
      flex-wrap: wrap;
    }
      .edito-a-la-une-info {
        flex: 1;
        min-width: 300px;
      }
        .edito-a-la-une-info a { color: inherit; }
        .edito-a-la-une-info h2,
        .edito-a-la-une-info h3 { color: var(--blanc); margin: 0 0 18px; }
        .edito-a-la-une-info .desc { color: rgba(255, 255, 255, .85); line-height: 1.75em; }

      .edito-a-la-une-slideshow {
        flex: 1;
        min-width: 300px;
      }

    @media (max-width: 900px) {
      /* align-items:center (regle desktop ci-dessus, pensee pour le centrage
         vertical en ligne) devient l'axe transversal = largeur une fois en
         colonne : sans stretch, .edito-a-la-une-info/-slideshow n'ont plus de
         largeur definie (shrink-to-fit). Consequence concrete sur
         -slideshow : .slide-photo est en position:absolute (donc hors flux,
         ne contribue a aucune largeur intrinseque) et son img en width:100%
         ne peut alors pas resoudre ce pourcentage (containing block sans
         largeur definie) - le navigateur retombe sur la taille intrinseque
         de l'image (580x435, cf. .slide-photo plus haut), d'ou des photos
         enormes qui debordent et decalent toute la section sur mobile
         (remonte le 2026-09-17). stretch force une largeur definie (100% de
         .edito-a-la-une-wrap) et resout le probleme. */
      .edito-a-la-une-wrap { flex-direction: column; align-items: stretch; }
    }

    /* Pas de marge laterale sur mobile pour cette section (demande
       utilisateur 2026-09-17, meme principe que .container--benefices) :
       le fond couleur plein cadre (.selection_edito_a_la_une) doit toucher
       les bords de l'ecran, le padding du framework (.container, 0 1.5em a
       <=736px) est retire uniquement ici. */
    @media screen and (max-width: 736px) {
      .container--a-la-une { padding: 0; }
      /* Le slideshow (image plein cadre) profite du bord a bord, mais le
         titre/texte reste en retrait pour ne pas toucher l'ecran - meme
         valeur (1.5em) que le padding de container retire ci-dessus. */
      .edito-a-la-une-info { padding: 0 1.5em; }
    }

  .edito-a-la-une-slick .slide {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
    /* .slide-photo (inclure/section-1-article.html) utilise image_recadre en
       direct, pas adaptive_images : contrairement a .adapt-img-wrapper/.adapt-img
       (cf. .edito-face-avant .media un peu plus haut), l'image n'est pas
       enveloppee dans un <picture> deja dimensionne par ailleurs - sans ces
       regles elle s'affiche a sa taille native (580x435) et deborde du cadre
       sur mobile (meme famille de bug que .dont-miss-media img, cf.
       .dont-miss-media plus bas). */
    .edito-a-la-une-slick .slide-photo { position: absolute; inset: 0; }
    .edito-a-la-une-slick .slide-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s ease;
    }
    .edito-a-la-une-slick .slide:hover .slide-photo img { transform: scale(1.05); }
    /* Positionnement/recadrage commun défini plus haut (cf. .edito-face-avant
       .media .adapt-img-wrapper) — ici seul l'effet de zoom au survol est propre
       à ce carrousel. */
    .edito-a-la-une-slick .slide .adapt-img-wrapper { transition: transform .7s ease; }
    .edito-a-la-une-slick .slide:hover .adapt-img-wrapper { transform: scale(1.05); }
    .edito-a-la-une-slick .slide-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1.2em 1em .8em;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);
      color: var(--blanc);
      font-size: .9em;
      font-weight: 600;
    }
  /* Le theme "accessible-slick" (charge en plus du theme Slick classique,
     cf. plugins/auto/slick/slick_pipelines.php) rend chaque pastille via un
     span .slick-dot-icon a l'interieur du bouton, et c'est CE span qui porte
     la couleur (accessible-slick-theme.min.css : ".slick-dots li button
     .slick-dot-icon"), pas le pseudo-element ":before" du bouton lui-meme -
     cibler ":before" ici ne changeait donc rien (pastilles restees noires,
     retour utilisateur avec capture le 2026-09-17). */
  .edito-a-la-une-slick .slick-dots li button .slick-dot-icon { color: var(--blanc); opacity: .5; }
  .edito-a-la-une-slick .slick-dots li.slick-active button .slick-dot-icon { color: var(--blanc); opacity: 1; }
  .edito-a-la-une-slick .slick-prev:before,
  .edito-a-la-une-slick .slick-next:before { color: var(--blanc); }

  /* "Temoignages" (id_selection=3, modeles/selection_edito_testimonials.html) :
     fond gris clair (rythme alterne, cf. #sommaire-evenements) + grille de
     cartes blanches, guillemet decoratif en haut, citation, signature separee
     par un filet fin (nom en gras + nom du voyage en gris, ce dernier tire de
     l'objet lie via le champ url generique du back-office). */
  .selection_edito.testimonials { background: var(--gris-bg); }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }
  .testimonial-card {
    display: block;
    padding: var(--space-lg);
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease;
  }
  /* Carte cliquable vers la rubrique Temoignages complete (utilise par
     modeles/selection_edito_testimonials.html) - leger effet de survol,
     meme logique que .icon-theme:hover. */
  a.testimonial-card:hover { transform: translateY(-3px); }

  /* Diaporama Slick du sommaire (inclure/section-testimonials.html) - meme
     mecanique de gouttiere/hauteur egale entre slides que
     #rubrique-info-testimonials-slick (content/rubrique-informations.html). */
  #sommaire-testimonials-slick .slide { padding: 0 .75em; }
  #sommaire-testimonials-slick .slick-list { margin: 0 -.75em; }
  #sommaire-testimonials-slick .slick-track { display: flex; align-items: stretch; }
  #sommaire-testimonials-slick .slick-slide { height: auto; }
  #sommaire-testimonials-slick .slick-slide > div { height: 100%; }
  #sommaire-testimonials-slick .slick-slide .slide { height: 100%; }
  #sommaire-testimonials-slick .testimonial-card { height: 100%; }
    .testimonial-card .quote-icon {
      display: block;
      font-family: Georgia, serif;
      font-size: 2.4em;
      line-height: 1;
      color: var(--c-info);
      margin-bottom: .2em;
    }
    .testimonial-card .quote {
      line-height: 1.7em;
      margin: 0 0 1.4em;
    }
    .testimonial-card .testimonial-signature {
      border-top: 1px solid var(--line);
      padding-top: 1em;
    }
      .testimonial-card .testimonial-signature strong {
        display: block;
        font-family: var(--font-titres);
      }
      .testimonial-card .testimonial-signature span {
        display: block;
        font-size: .85em;
        opacity: .6;
        margin-top: .2em;
      }

  #sommaire-intro { text-align: center; }

  .intro-lead {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.2em;
    max-width: 800px;
    margin: 0 auto 3em;
  }
    .intro-texte {
      text-align: center;
    }
    .intro-texte p:last-child { margin-bottom: 0; }

  /* 6 bénéfices : rangée de cases bordées, contenu qui bascule au survol */
  .benefices-row {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
    .benefices-row > * {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

  .benefice {
    position: relative;
    height: 260px;
    cursor: default;
    overflow: hidden;
    background: var(--blanc);
  }
    .benefice-face {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-lg);
    }
    .benefice-face a {color: var(--blanc);}
    .benefice-face-avant {
      transition: opacity .45s ease;
    }
      .benefice-icone {
        font-family: 'icons';
        font-size: 2.2em;
        color: var(--c-info);
        margin-bottom: .6em;
        line-height: 1;
      }
      .benefice-titre {
        max-width: 70%;
      }
      .benefice-titre-face {
        font-size: 1.2em;
        color: var(--blanc);
        max-width: 70%;
        margin-bottom: 12px;}
      .benefice-descriptif {margin-bottom: 1em;}

    .benefice-face-arriere {
      background: var(--c-info);
      color: var(--blanc);
      font-size: .80em;
      line-height: 1.3;
      transform: translateY(100%);
      transition: transform .5s ease;
    }
    .benefice:hover {
      z-index: 1;
    }
    .benefice:hover .benefice-face-avant {
      opacity: 0;
    }
    .benefice:hover .benefice-face-arriere {
      transform: translateY(0);
    }

  /* Mobile (<=736px, palier "col-X-mobile" du framework grid.css) : la
     grille des 6 benefices passe a 2 colonnes (col-6-mobile), les cases sont
     donc bien plus etroites qu'au desktop - le padding desktop (--space-lg
     = 2em) et le max-width:70% du titre y laissaient trop peu de place au
     contenu (titre visuellement decentre/tronque). Padding reduit et titres
     recentres/elargis (demande utilisateur 2026-09-17). */
  @media screen and (max-width: 736px) {
    .benefice-face {
      padding: var(--space-sm);
    }
    .benefice-titre,
    .benefice-titre-face {
      max-width: 100%;
      text-align: center;
    }
    /* Cases bordees edge-to-edge sur mobile : pas de marge laterale sur ce
       container precis (demande utilisateur 2026-09-17), contrairement aux
       autres .container de la page qui gardent le padding du framework. */
    .container--benefices {
      padding: 0;
    }
  }

  /* Fleches slick invisibles : le plugin charge a la fois slick-theme.min.css
     (theme classique, fleche blanche prevue pour un rond de fond sombre) et
     accessible-slick-theme.min.css (fleche sur fond transparent) en meme temps
     — le ::before de slick-theme.min.css impose color:var(--blanc) qui gagne sur le
     color:#000 de la version accessible (meme specificite, charge apres),
     d'ou une fleche blanche invisible sur fond clair. Fix generique, toutes
     les slideshows slick du site — ".slick-slider" (ajoutee par slick.js sur
     le conteneur a l'init) sert juste a monter la specificite au-dessus de
     celle de slick-theme.min.css, sans !important. */
  .slick-slider .slick-prev .slick-prev-icon::before,
  .slick-slider .slick-next .slick-next-icon::before {
    color: var(--gris-deep);
  }
  .slick-slider .slick-prev:hover .slick-prev-icon::before,
  .slick-slider .slick-next:hover .slick-next-icon::before {
    color: var(--c-page);
  }

  /* Curseur "main" sur tous les slideshows slick du site, pour indiquer
     qu'on peut faire glisser (drag) le carousel — scope a .slick-track
     (pas .slick-slider entier) pour ne pas changer le curseur des
     fleches/dots a cote. */
  .slick-slider .slick-track { cursor: grab; }
  .slick-slider .slick-track:active { cursor: grabbing; }

  /* Bloc circuits (sidebar slim + slideshow) */
  #sommaire-circuits .eyebrow { text-align: center; color: var(--bleu); }
  #sommaire-circuits .rule { width: 48px; height: 2px; background: var(--c-section, var(--c-page)); margin: 1em 0 2em; }
  #circuits-slideshow-home .slide,
  .mot-slideshow .slide { padding: 0 .75em; }
  /* Le padding des .slide sert de gouttiere entre slides, mais il deborde
     aussi sur les bords exterieurs du slick (premiere/derniere slide),
     d'ou une marge disgracieuse a gauche/droite du carousel. Le
     .slick-list a overflow:hidden par defaut (slick.css) : une marge
     negative egale au padding recadre la zone visible sur les bords du
     conteneur sans toucher la gouttiere entre slides. */
  #circuits-slideshow-home .slick-list,
  .mot-slideshow .slick-list { margin: 0 -.75em; }

  /* Cartes de meme hauteur dans le slideshow : par defaut slick ne
     redimensionne pas ses slides sur la hauteur de la plus grande visible
     (contrairement a une grille CSS, stretch par defaut). On force le
     slick-track en flex + stretch, et on propage la hauteur jusqu'a
     .tour-card (repris de squelettes-V6.2/css/layout.css). */
  #circuits-slideshow-home .slick-track { display: flex; align-items: stretch; }
  #circuits-slideshow-home .slick-slide { height: auto; }
  #circuits-slideshow-home .slick-slide > div { height: 100%; }
  #circuits-slideshow-home .slick-slide .slide { height: 100%; }
  #circuits-slideshow-home .tour-card { height: 100%; }

  /* Formulaire filtre statique (sidebar) */
  .formulaire-filtre-statique {
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
    .formulaire-filtre-statique .head { padding: 1.2em 1.4em; border-bottom: 1px solid var(--line); }
    .formulaire-filtre-statique .filtre-titre {
      font-family: var(--font-titres);
      font-weight: 700;
      font-size: 1em;
    }
    .formulaire-filtre-statique .group { padding: 1.1em 1.4em; border-bottom: 1px solid var(--line); }
    .formulaire-filtre-statique .label {
      font-family: var(--font-titres);
      font-size: .7em;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gris);
      margin-bottom: .7em;
    }
    .formulaire-filtre-statique fieldset { border: 0; padding: 0; margin: 0; }
    .formulaire-filtre-statique label {
      display: flex;
      align-items: center;
      gap: .6em;
      font-size: .85em;
      padding: .1em 0;
      cursor: pointer;
    }
    .formulaire-filtre-statique input[type="radio"] {
      -moz-appearance: radio;
      -webkit-appearance: radio;
      appearance: radio;
      width: auto;
      accent-color: var(--c-circuit);
    }
    .formulaire-filtre-statique .cta { padding: 1.2em 1.4em; }
    .formulaire-filtre-statique .cta .button {
      display: block;
      width: 100%;
      background: var(--c-circuit);
      color: var(--blanc);
      border-color: var(--c-page);
      min-width: 0;
    }

  /* Sidebar circuits du sommaire : sous 980px (tablette et mobile), les
     blocs "Duration" et "Destination" du filtre statique passent cote a
     cote (au lieu d'empiles) - la sidebar passe en pleine largeur a ces
     gabarits (cf. .layout-sidebar-slim ci-dessus), assez large pour les
     accueillir sur une ligne meme en mobile (demande utilisateur
     2026-09-18). Scope a #sommaire-circuits : la page rubrique-circuits
     garde son propre empilement (colonne plus etroite, mini-calendrier en
     dessous). */
  @media screen and (max-width: 980px) {
    #sommaire-circuits .formulaire-filtre-statique {
      display: flex;
      flex-wrap: wrap;
    }
    #sommaire-circuits .formulaire-filtre-statique .head,
    #sommaire-circuits .formulaire-filtre-statique .cta {
      flex: 0 0 100%;
    }
    #sommaire-circuits .formulaire-filtre-statique .group {
      flex: 1 1 50%;
      box-sizing: border-box;
    }
    #sommaire-circuits .formulaire-filtre-statique .group:first-of-type {
      border-right: 1px solid var(--line);
    }
  }

  /* Résultats : compteur + carte circuit complète */
  .tours-results .count {
    display: inline-block;
    background: var(--c-circuit);
    border-left: 3px solid var(--c-page);
    padding: .6em 1em;
    font-size: .8em;
    font-weight: 600;
    margin-bottom: 1.2em;
    color: var(--blanc);
  }

  /* Mobile : le compteur prend toute la largeur de .tours-results (au lieu
     de se réduire à son contenu), texte centré et capitalisé (demande
     utilisateur 2026-09-18). */
  @media screen and (max-width: 736px) {
    .tours-results .count {
      display: block;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      text-transform: uppercase;
    }
  }

  .tour-card {
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
  }
    .tour-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .tour-card .media {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      aspect-ratio: 4 / 3;
    }
    /* Positionnement/recadrage commun défini plus haut (cf. .edito-face-avant
       .media .adapt-img-wrapper) ; image_recadre génère déjà un fichier 480x360
       mais le rendu écran suivrait la taille naturelle de l'image sans ces
       règles tant que le wrapper n'est pas contraint. */
    .tour-card .media a { display: block; width: 100%; height: 100%; }
    .tour-card .duration-badge {
      position: absolute;
      top: .75em; left: .75em;
      background: rgba(var(--ink-rgb),.8);
      color: var(--blanc);
      font-size: .75em;
      padding: .3em .7em;
      border-radius: var(--radius-md);
    }
    .tour-card .body { display: flex; flex-direction: column; flex: 1; padding: 1.2em; }
    .tour-card .region {
      font-family: var(--font-titres);
      font-size: .75em;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--bleu);
      margin-bottom: .4em;
    }
    .tour-card .title {
      display: block;
      border-bottom-color: transparent;
    }
    .tour-card .desc {
      font-size: .85em;
      color: var(--gris-deep);
      margin-bottom: .8em;
      line-height: 1.7em;
    }
    .tour-card .divider-icon {
      display: flex;
      align-items: center;
      gap: .8em;
      color: var(--c-circuit);
      font-family: 'icons';
      font-size: 1.2em;
      margin-top: auto;
      margin-bottom: .8em;
    }
      .tour-card .divider-icon::before,
      .tour-card .divider-icon::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-circuit);
      }
      .tour-card .divider-icon .icon-separator {
        flex-shrink: 0;
        line-height: 1;
      }
    .tour-card .meta { font-size: .85em; margin-bottom: .9em; }
    .tour-card .meta .unit { color: var(--gris); font-size: .85em; }
    .tour-card .meta .sur-devis { color: var(--gris); font-style: italic; }
    .tour-card .themes { display: flex; gap: .6em; }
    .tour-card .icon-theme {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 0.3em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'icons';
      font-size: .8em;
      color: var(--blanc);
      /* background-color pose en inline par le squelette (couleur thematique) */
      transition: transform .2s ease;
    }
    .tour-card .icon-theme:hover { transform: translateY(-2px) scale(1.08); }

    /* Info-bulle thematique : nom en majuscules + sous-thematiques a tirets,
       fond = couleur de la thematique (--#MOT_COULEURS posé en inline par le
       squelette), texte toujours blanc. */
    .tour-card .tooltip-theme {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      min-width: 190px;
      max-width: 260px;
      padding: .8em 1em;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card-hover);
      background: inherit;
      color: var(--blanc);
      font-family: var(--font-texte);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .tour-card .icon-theme:hover .tooltip-theme,
    .tour-card .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; }
    /* Les 2 premieres pastilles sont trop pres du bord gauche de la carte :
       bulle centree = coupee par l'overflow:hidden du slideshow. On ancre
       son bord gauche sur la pastille au lieu de la centrer. */
    .tour-card .icon-theme:nth-child(1) .tooltip-theme,
    .tour-card .icon-theme:nth-child(2) .tooltip-theme {
      left: 0;
      transform: none;
    }
    .tour-card .tooltip-titre {
      display: block;
      font-family: var(--font-titres);
      font-size: .8em;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: .5em;
    }
    .tour-card .tooltip-theme ul {
      list-style: none;
      margin: 0;
      padding: 0 0 10px 0;
    }
    .tour-card .tooltip-theme li {
      position: relative;
      padding-left: .9em;
      font-size: .7em;
      line-height: 1.5em;
    }
    .tour-card .tooltip-theme li::before {
      content: "–";
      position: absolute;
      left: 0;
    }

  /* Événements — panneau blanc, grille sans ombre */
  .events-panel {
    padding: .5em 1em;
  }
  .event-card {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.2em .5em;
    border-bottom: 1px solid var(--line);
  }
    .col-4:nth-last-child(-n+3) .event-card,
    .col-6-medium:nth-last-child(-n+2) .event-card { border-bottom: 0; }
    .event-card .date { flex: 0 0 3em; text-align: center; }
    .event-card .day { font-family: var(--font-titres); font-size: 1.4em; font-weight: 700; color: var(--c-page); line-height: 1; }
    .event-card .month { font-size: .7em; letter-spacing: .06em; opacity: .7; }
    .event-card .event-title { font-family: var(--font-titres); font-size: .9em; }
    .event-card .event-lieu { font-size: .8em; opacity: .6; margin-top: .2em; }

  /* Sommaire (accueil, ou rubrique porteuse via le champ Composition) :
     texte/liens de la section Agenda toujours gris elegant, sans dependre de
     --c-page (couleur ambiante de la page courante, qui varie selon la
     categorie admin de la rubrique - .event-card sinon herite du gris/jaune/
     bleu... de la page porteuse, demande utilisateur 2026-09-17) - seul
     l'eyebrow (regle generique .eyebrow plus haut, --c-info) garde la
     couleur "Destinations". */
  #sommaire-evenements .event-card { color: var(--ink); }
  #sommaire-evenements .event-card .day { color: var(--titre); }
  /* Survol : bascule vers "Destinations" (--c-info), memes teinte que
     l'eyebrow - .day a sa propre regle ci-dessus (specificite egale a la
     regle de repos), d'ou la surcharge dediee au survol. */
  #sommaire-evenements .event-card:hover { color: var(--c-info); }
  #sommaire-evenements .event-card:hover .day { color: var(--c-info); }

  /* Blocs mot-clé (id_mot=7, 10, 78) — le slide Slick (.slide) et la
     grille 2 colonnes (.row) sont 2 divs distincts : Slick pose son
     display:inline-block en style inline directement sur l'element qu'on
     lui passe, ce qui ecraserait le display:flex de .row si les 2 classes
     etaient sur le meme div (plus de split 50/50, colonnes empilees). */
  .sommaire-mot-headline .slide .row,
  .sommaire-mot-slideshow .slide .row {
    align-items: center;
    gap: var(--space-xl);
  }
  /* .slide-texte/.slide-logo sont des col-6/col-6 (100% du conteneur à eux
     deux, aucun gutter par défaut) : poser un gap dessus les ferait
     dépasser 100% — même parade que .layout-sidebar-slim/.article-photos-duo
     plus haut dans ce fichier, flex-basis:0 qui absorbe le gap au lieu
     d'un pourcentage fixe. Scopé au-dessus du seuil mobile pour laisser
     .col-12-mobile empiler les 2 blocs normalement en dessous. */
  @media screen and (min-width: 737px) {
    .sommaire-mot-headline .slide .row > .slide-texte,
    .sommaire-mot-headline .slide .row > .slide-logo,
    .sommaire-mot-slideshow .slide .row > .slide-texte,
    .sommaire-mot-slideshow .slide .row > .slide-logo {
      flex: 1 1 0;
      min-width: 0;
    }
  }
    .slide-texte .title { font-size: 1.4em; display: block; margin-bottom: .5em; }
    .slide-logo img { border-radius: var(--radius-md); }

  /* Contact accueil/recherche — 3 blocs cote a cote (infos / formulaire /
     carte) sur fond sombre .wrapper.stylegris-deep. Bloc contenu resserre par
     rapport au .container plein largeur (mêmes paliers que .container.medium),
     et bloc du milieu (formulaire) legerement plus large que les 2 autres —
     voir documentation/inspirations graphiques/sommaire-2-blocs-finaux-et-pied-de-page.jpg. */
  #cta-contact a {color: #fff;opacity: 85%;}
  #cta-contact a:hover {color: #fff;opacity: 99%;}
  #cta-contact .eyebrow,
  #cta-office .eyebrow { color: rgba(255, 255, 255, .6); }
  #cta-contact .rule,
  #cta-office .rule { background: rgba(255, 255, 255, .3); }
  /* .row du framework est en flexbox : avec flex, la decision de passer
     a la ligne se fait sur la somme des largeurs (flex-basis) AVANT
     application du gap/shrink — 30%+40%+30%+2*28px depassait donc la
     ligne et renvoyait le 3e bloc dessous. En grid avec des unites fr,
     le gap est soustrait de l'espace disponible avant repartition
     proportionnelle : plus de risque de depassement. */
  #cta-contact .contact-grid,
  #cta-office .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    margin: 0;
    gap: 28px;
  }
  @media screen and (min-width: 737px) {
    #cta-contact .contact-grid {
      grid-template-columns: 3fr 4fr 3fr;
    }
    /* CTA "Notre bureau" (inclure/cta-office.html) : 2 blocs seulement
       (infos / carte), pas 3 - meme mecanique grid que #cta-contact
       ci-dessus, ratio propre plutot que de reprendre le 3fr 4fr 3fr pense
       pour 3 colonnes. */
    #cta-office .contact-grid {
      grid-template-columns: 2fr 3fr;
    }
  }
  /* Panneau "vitré" sur fond sombre : recette partagée par le bloc contact
     court (#cta-contact), la carte googlemap (#cta-googlemap) et le bloc
     "Notre bureau" (#cta-office, infos + carte) - seule la largeur diffère
     (pleine largeur ici, colonne centrée limitée sur la carte googlemap). */
  #cta-contact .contact-block,
  #cta-googlemap .contact-block-map,
  #cta-office .contact-block {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md);
    padding: 2em 1.8em;
  }
  #cta-contact .contact-block,
  #cta-office .contact-block { width: 100%; }
  /* Labels des champs du formulaire court masques visuellement (seuls les
     placeholders restent visibles), gardes accessibles au clavier/lecteur
     d'ecran — meme technique que .offscreen (squelette6.2/css/clear.css),
     non reutilisable telle quelle ici car le label n'est pas dans nos
     squelettes (genere par saisies/_base.html a partir de la config
     Formidable du formulaire #3). */
  #cta-contact .contact-block-form .editer-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Espacement entre les champs (chaque champ = un .editer genere par
     saisies/_base.html) + apparence des champs alignee sur l'image de
     reference : fond legerement plus clair que le bloc, bordure visible
     sur fond sombre, coins arrondis. */
  #cta-contact .contact-block-form .editer { margin-bottom: 1.2em; }
  #cta-contact .contact-block-form input[type="text"],
  #cta-contact .contact-block-form input[type="email"],
  #cta-contact .contact-block-form input[type="password"],
  #cta-contact .contact-block-form textarea {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-md);
    color: var(--blanc);
  }
  #cta-contact .contact-block-form textarea { min-height: 110px; }
  #cta-contact .contact-block-titre,
  #cta-googlemap .contact-block-titre,
  #cta-office .contact-block-titre {
    font-family: var(--font-titres);
    font-size: .8em;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 1em;
  }
  #cta-contact .contact-infos,
  #cta-office .contact-infos {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
  }
    #cta-contact .contact-infos li,
    #cta-office .contact-infos li { padding: 0; margin-bottom: 1.4em; }
    #cta-contact .contact-infos strong,
    #cta-office .contact-infos strong {
      display: block;
      margin-bottom: .3em;
      font-family: var(--font-titres);
      font-weight: 700;
      text-transform: none;
    }
    #cta-contact .contact-infos-value,
    #cta-office .contact-infos-value { display: block; opacity: .6; font-size: .8em; }
      #cta-contact .contact-infos-value .fa-icon,
      #cta-office .contact-infos-value .fa-icon { margin-right: .4em; }
      #cta-contact .contact-infos-value--hover,
      #cta-office .contact-infos-value--hover { transition: opacity .2s ease, font-size .2s ease; }
      #cta-contact .contact-infos-value--hover:hover,
      #cta-office .contact-infos-value--hover:hover { opacity: 1; font-size: .88em; }
  #cta-contact .contact-map,
  #cta-office .contact-map {
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  #cta-contact .contact-map-legende,
  #cta-office .contact-map-legende {
    opacity: .6;
    font-size: .85em;
    margin: .8em 0 0;
  }

  /* CTA "A la une" (inclure/cta-a-la-une.html) : reutilise entierement
     .selection_edito_a_la_une/.edito-a-la-une-* (fond couleur, layout
     texte+photo, deja definis plus haut). Seul ajout : .eyebrow a sa propre
     couleur fixe (--c-info, brique par defaut) non liee au data-couleur de
     la section - meme correctif deja applique a #cta-contact plus haut. */
  #cta-a-la-une .eyebrow { color: rgba(255, 255, 255, .7); }

  /* CTA "Prochain evenement" (inclure/cta-prochain-evenement.html) : reprend
     .event-card existant (agenda) en plus grand format, seul contenu du
     volet droit (a la place du slideshow photo de la a-la-une) - meme
     principe que le reste du fichier, on surcharge la classe native plutot
     que d'inventer un nouveau balisage (cf. .selection_edito_a_la_une-alt
     plus haut). */
  #cta-prochain-evenement .eyebrow { color: rgba(255, 255, 255, .7); }
  #cta-prochain-evenement .event-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-md);
    padding: 1.6em 1.4em;
  }
    #cta-prochain-evenement .event-card:hover { background: rgba(255, 255, 255, .16); }
    #cta-prochain-evenement .event-card .date { flex: 0 0 4em; }
    #cta-prochain-evenement .event-card .day { font-size: 2em; color: var(--blanc); }
    #cta-prochain-evenement .event-card .month { color: rgba(255, 255, 255, .75); }
    #cta-prochain-evenement .event-card .event-title { font-size: 1.15em; }
    #cta-prochain-evenement .event-card .event-lieu { color: rgba(255, 255, 255, .75); }

  /* CTA "Carte" (inclure/cta-googlemap.html) : reprend le bloc carte de
     #cta-contact (.contact-block/.contact-map/.contact-block-titre/
     .contact-map-legende), report necessaire sous ce nouvel id car ces
     classes n'ont pas de version non scopee ailleurs - meme principe que
     le reskin de .event-card ci-dessus, en plein format (1 seul bloc,
     centre, pas de grille a 3 colonnes). */
  #cta-googlemap .eyebrow { color: rgba(255, 255, 255, .6); }
  #cta-googlemap .rule { background: rgba(255, 255, 255, .3); }
  #cta-googlemap .contact-block-map {
    max-width: 900px;
    margin: 0 auto;
  }
  #cta-googlemap .contact-map {
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  #cta-googlemap .contact-map-legende {
    opacity: .6;
    font-size: .85em;
    margin: .8em 0 0;
    text-align: center;
  }

/* ==========================================================
   RECHERCHE
   ========================================================== */

  /* Sidebar fixee au scroll (mini-agenda + prochain evenement) pendant que
     la colonne de resultats defile - meme mecanique que #rubrique-circuits
     .sidebar-slim, scopee ici car .sidebar-slim reste non-sticky par
     defaut pour les autres usages (sommaire). Les 2 blocs reutilisent
     directement .circuit-info-bloc/.circuit-info-label (carte blanche +
     petit intitule) plutot que de redeclarer un cadre equivalent. */
  #recherche-page .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    #recherche-page .sidebar-slim {
      position: static;
    }
  }

  /* Titres de section alignes a gauche dans la colonne de resultats,
     contrairement a .section-head par defaut (centre, utilise ailleurs
     pour des blocs pleine largeur). */
  #recherche-page .content-main .section-head {
    text-align: left;
    max-width: none;
    margin: 0 0 1.5em;
  }

  /* Autres articles / evenements : liste generique de resultats */
  .generic-results {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 2.5em;
  }
    .result-row {
      background: var(--blanc);
      display: flex;
      align-items: baseline;
      gap: 1.2em;
      padding: 1em 1.2em;
      transition: background .3s ease, padding-left .3s ease;
    }
    .result-row:hover { background: var(--fond-autre); padding-left: 1.6em; }
    .result-row .rtype {
      flex: 0 0 90px;
      font-size: .75em;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--c-page);
    }
    .result-row.row-with-logo { align-items: center; }
    .result-row .rtype.rtype-logo { line-height: 0; }
    .result-row .rtype.rtype-logo img { display: block; width: 100%; height: auto; border-radius: 4px; }
    .result-row .rbody { flex: 1; display: flex; flex-direction: column; gap: .25em; }
    .result-row .rtitle { font-family: var(--font-titres); font-size: 1em; font-weight: 700; color: var(--ink); }
    .result-row .rexcerpt { font-size: .85em; color: var(--ink); opacity: .7; line-height: 1.6; }
    .result-row:hover .rtitle { color: var(--c-page); }

  #recherche-page .aucun-resultat {
    background: var(--gris-bg);
    padding: 2em;
    text-align: center;
    color: var(--gris);
    margin-bottom: 2.5em;
  }

  /* Masque le message "aucun resultat" des qu'un des 3 blocs (circuits/
     articles/evenements) a au moins une ligne. Chacun vit desormais dans
     son propre fond #INCLURE ajax=... (voir content/recherche.html), donc
     impossible de le determiner via un #SET partage entre eux comme avant -
     .section-head n'existe que si un B_xxx a des lignes, d'ou ce :has(). */
  .content-main:has(.section-head) .aucun-resultat {
    display: none;
  }

  /* Mots-cles suggeres au hasard */
  .tags-recherche { margin-top: 1em; }
    .tags-recherche .label {
      font-size: .75em;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
      opacity: .6;
      margin-bottom: .8em;
    }
    .tags-recherche .tag-list { display: flex; flex-wrap: wrap; gap: .6em; }
    .tag-pill {
      display: inline-block;
      border: 1px solid var(--line);
      color: var(--ink);
      padding: .1em 1em;
      border-radius: 999px;
      font-size: .75em;
    }
    .tag-pill:hover { border-color: var(--c-page); color: var(--c-page); }

/* ==========================================================
   ARTICLE PAGE — page article par defaut (sidebar + sources)
   ========================================================== */

  /* Sidebar (calendrier + evenements a venir) fixee au scroll, meme
     mecanique que #recherche-page .sidebar-slim. */
  #article-page .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    #article-page .sidebar-slim {
      position: static;
    }
  }

  /* Bloc recherche, 1er bloc de la sidebar - contexte "sidebar" de
     formulaires/recherche.html (surcharge du noyau #FORMULAIRE_RECHERCHE) :
     pas de <label> visible (placeholder + aria-label a la place), bouton
     minimaliste ">" aligne a cote du champ. Le champ recherche de la page
     recherche elle-meme vit desormais dans le header (.header-recherche,
     voir section HEADER plus haut), plus dans ce bandeau. */
  .sidebar-recherche .editer-groupe { display: flex; align-items: stretch; gap: .5em; }
  .sidebar-recherche input.search {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    padding: .7em .9em;
    font-size: .9em;
    font-family: inherit;
  }
  .sidebar-recherche input.submit {
    flex: 0 0 auto;
    width: 2.6em;
    min-width: 0;
    border: 1px solid var(--c-page);
    background: var(--c-page);
    color: var(--blanc);
    padding: 0;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
  }

  /* Sources/Documents : bloc distinct du .documents-joints des circuits
     (demande explicite) - cadre teinte + bordure d'accent, icone dediee,
     pour signaler des sources documentaires plutot que de simples pieces
     jointes. */
  .documents-sources {
    margin-top: 3em;
    padding: 1.6em 1.8em;
    background: var(--gris-bg);
    border-left: 4px solid var(--c-page);
    border-radius: var(--radius-md);
  }
    .documents-sources h3 {
      font-family: var(--font-titres);
      margin-top: 0;
      margin-bottom: 1em;
    }
    .documents-sources ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .8em;
    }
    .source-item {
      display: flex;
      align-items: center;
      gap: 1em;
      padding: 1em 1.2em;
      background: var(--blanc);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
      .source-icon {
        flex: 0 0 auto;
        width: 2em;
        height: 2em;
        color: var(--c-page);
      }
        .source-icon svg { width: 100%; height: 100%; }
      .source-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .2em;
        min-width: 0;
      }
        .source-titre { font-weight: 700; }
        .source-descriptif { font-size: .85em; opacity: .75; line-height: 1.5; }
        .source-meta { font-size: .75em; opacity: .6; }
      .source-telecharger {
        flex: 0 0 auto;
        font-size: .85em;
        font-weight: 700;
        color: var(--blanc);
        background: var(--c-page);
        padding: .5em 1.1em;
        border-radius: 999px;
        white-space: nowrap;
      }
      .source-telecharger:hover { background: var(--brique); }

  @media screen and (max-width: 736px) {
    .source-item { flex-wrap: wrap; }
    .source-telecharger { margin-left: calc(2em + 1em); }
  }

  /* Sous-titre (juste sous le H1) et descriptif (paragraphe d'intro avant
     le texte detaille), memes 2 champs de base ARTICLES que sur les
     circuits (#DESCRIPTIF) mais sans equivalent existant pour #SOUSTITRE -
     accroche discrete, pas un second titre. */
  #article-page .soustitre {
    font-family: var(--font-titres);
    font-weight: 400;
    font-size: 1.2em;
    opacity: .7;
    margin: -.6em 0 1.2em;
  }
  #article-page .descriptif {
    font-size: 1.1em;
    font-weight: 600;
  }

  /* Photos portfolio de l'article, en tete du texte : 1 ou 2 photos
     flottent a 50% sur grand ecran (le texte s'enroule autour), plus de 2
     passent par le modele article_slick (pleine largeur, pas de float). */
  #article-page .article-photos img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
  #article-page .article-photos a { display: block; cursor: zoom-in; }

  @media screen and (min-width: 981px) {
    #article-page .article-photos-solo,
    #article-page .article-photos-duo {
      float: left;
      width: 50%;
      margin: 0 2em 1em 0;
    }
  }
  #article-page .article-photos-duo {
    display: flex;
    gap: 1em;
  }
    #article-page .article-photos-duo .article-photo-item { flex: 1 1 0; min-width: 0; }
    #article-page .article-photos-duo img { height: 100%; object-fit: cover; }

  #article-page .article-photos-slick { clear: both; margin-bottom: 1.5em; }
    #article-page .article-photos-slick img { width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius-md); }

  /* Clearfix : sans ca, la hauteur du float (solo/duo) deborde du
     conteneur .texte et chevauche les blocs suivants (documents/
     evenements/carte/rubrique), qui sont hors de .texte. */
  #article-page .content-main .texte::after { content: ""; display: table; clear: both; }

  /* Evenements lies a l'article : meme gabarit .events-panel/.event-card
     que #sommaire-evenements, sans le chrome section-head/eyebrow (bloc
     dans la colonne de contenu, pas une section pleine largeur). */
  #article-page .article-evenements-lies { margin-top: 3em; }
    #article-page .article-evenements-lies h2 { margin-bottom: .8em; }

  /* Carte kml/gis : simple espacement, la mise en forme visuelle vient du
     modele carte_gis lui-meme (meme wrapper non stylise que sur les
     articles circuit). */
  #article-page .map_associated { margin-top: 3em; }

  /* Articles de la meme rubrique : 1 ligne par article, 3 blocs alignes
     (logo / titre+sous-titre / fleche-lien) - meme langage visuel que
     .source-item (icone + corps + action) plus haut dans ce fichier. */
  #article-page .article-rubrique-liste { margin-top: 3em; }
    #article-page .article-rubrique-liste h2 { margin-bottom: .8em; }
    #article-page .rubrique-articles-liste {
      display: flex;
      flex-direction: column;
      gap: .8em;
    }
    #article-page .rubrique-article-row {
      display: flex;
      align-items: center;
      gap: 1.2em;
      padding: 1em 1.2em;
      background: var(--blanc);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: border-color .2s ease;
    }
      #article-page .rubrique-article-row:hover { border-color: var(--c-page); }
      #article-page .rubrique-article-logo {
        flex: 0 0 auto;
        width: 4.5em;
        height: 4.5em;
        border-radius: var(--radius-md);
        overflow: hidden;
      }
        #article-page .rubrique-article-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
      #article-page .rubrique-article-texte { flex: 1; min-width: 0; }
        #article-page .rubrique-article-texte .title { font-size: 1em; margin: 0 0 .2em; }
        #article-page .rubrique-article-texte .desc {
          font-size: .85em;
          opacity: .7;
          margin: 0;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          /* white-space: nowrap; */
        }
      #article-page .rubrique-article-fleche {
        flex: 0 0 auto;
        width: 1.6em;
        height: 1.6em;
        color: var(--c-page);
        transition: transform .2s ease;
      }
        #article-page .rubrique-article-fleche svg { width: 100%; height: 100%; }
      #article-page .rubrique-article-row:hover .rubrique-article-fleche { transform: translateX(4px); }

  @media screen and (max-width: 736px) {
    #article-page .rubrique-article-logo { width: 3.5em; height: 3.5em; }
    #article-page .rubrique-article-texte .desc { white-space: normal; }
  }

  /* Page rubrique par defaut (content/rubrique.html) : sous-rubriques
     directes puis articles rattaches, meme carte image+contenu partagee
     entre les 2 sections - voir dev-notes-template-travel.md, Phase D. */
  #rubrique-sous-rubriques { background: var(--fond-autre); }
  #rubrique-sous-rubriques,
  #rubrique-articles {
    padding: 3em 0;
  }
    #rubrique-sous-rubriques .section-titre,
    #rubrique-articles .section-titre {
      font-size: 1.6em;
      margin-bottom: 1em;
    }

    .rubrique-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5em;
    }

    .rubrique-card {
      display: flex;
      background: var(--blanc);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
      .rubrique-card:hover { border-color: var(--c-page); box-shadow: var(--shadow-card); }
      .rubrique-card-logo { flex: 0 0 40%; }
        .rubrique-card-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .rubrique-card-corps {
        flex: 1;
        min-width: 0;
        padding: 1.4em 1.6em;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
        .rubrique-card-titre { font-size: 1.1em; margin: 0 0 .5em; }
          .rubrique-card-titre a { color: inherit; }
        .rubrique-card-article:hover .rubrique-card-titre { color: var(--c-page); }

      /* Articles (rubriques-affichant-articles.png) : logo plus reduit que
         les cartes sous-rubriques - proportion confiee aux classes de
         grille existantes .col-3/.col-9 (css/grid.css) plutot qu'a un
         flex-basis code en dur, d'ou ce reset qui neutralise le flex
         herite de .rubrique-card-logo/-corps pour laisser la largeur
         (width) des .col-N gouverner. */
      .rubrique-card-article .rubrique-card-logo,
      .rubrique-card-article .rubrique-card-corps { flex: 0 1 auto; }

    /* Sous-rubriques : liste des titres d'articles a la place du texte,
       hauteur plafonnee + defilement plutot que de faire deborder la
       carte. */
    .sous-rubrique-articles {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 9em;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: .2em;
    }
      .sous-rubrique-articles li a {
        display: block;
        font-size: .9em;
        padding: .35em 0;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
      }
      .sous-rubrique-articles li:last-child a { border-bottom: 0; }
      .sous-rubrique-articles li a:hover { color: var(--c-page); }
    .sous-rubrique-articles-vide { font-size: .85em; opacity: .6; margin: 0; }

    /* Articles : titre/soustitre/descriptif/texte tronque empiles, comme
       rubriques-affichant-articles.png. */
    .rubrique-card-soustitre {
      font-family: var(--font-titres);
      opacity: .7;
      font-size: .95em;
      margin: 0 0 .4em;
    }
    .rubrique-card-descriptif { font-weight: 600; margin: 0 0 .4em; }
    .rubrique-card-texte { font-size: .85em; opacity: .75; line-height: 1.5; margin: 0; }

  @media screen and (max-width: 981px) {
    .rubrique-cards-grid { grid-template-columns: 1fr; }
  }
  @media screen and (max-width: 736px) {
    .rubrique-card { flex-direction: column; }
    .rubrique-card-logo { flex: 0 0 auto; height: 11em; }
  }

/* ==========================================================
   CALENDRIER — content/rubrique-calendar.html (composition "calendar")
   ========================================================== */

  /* Sidebar (mini-calendrier seul) fixee au scroll, meme mecanique que
     #article-page/#recherche-page .sidebar-slim. */
  #rubrique-calendar .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    #rubrique-calendar .sidebar-slim {
      position: static;
    }
  }

  #rubrique-calendar .aucun-resultat {
    background: var(--gris-bg);
    padding: 2em;
    text-align: center;
    color: var(--gris);
  }

  /* Liste d'evenements en colonne unique (col-12, pas la grille col-4/
     col-6-medium partagee par inclure/sommaire-evenements.html) : la
     derniere carte perd sa bordure basse via son parent .col-12:last-child
     plutot que :last-child sur .event-card lui-meme (toujours vrai, chaque
     carte est l'unique enfant de son .col-12). */
  #rubrique-calendar #calendrier-evenements-liste .col-12:last-child .event-card {
    border-bottom: 0;
  }

  /* Logo de l'article lie a l'evenement, meme habillage (case carree,
     image_proportions{1,1,focus} + object-fit:cover) que .rubrique-card-logo
     dans content/rubrique.html. */
  #rubrique-calendar .event-card .event-logo {
    flex: 0 0 3.4em;
    width: 3.4em;
    height: 3.4em;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
    #rubrique-calendar .event-card .event-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

  /* .section-head est centre/plafonne a 680px par defaut (pense pour des
     sections pleine largeur) - meme surcharge que #recherche-page pour la
     meme raison : ici il vit dans .content-main, deja etroit (col-9). */
  #rubrique-calendar .content-main .section-head {
    text-align: left;
    max-width: none;
    margin: 0 0 1.5em;
  }

/* ==========================================================
   TEMOIGNAGES — content/rubrique-testimonials.html (composition "testimonials")
   ========================================================== */

  /* Sidebar (recherche + mini-calendrier) fixee au scroll, meme mecanique
     que #article-page/#recherche-page/#rubrique-calendar .sidebar-slim. */
  #rubrique-testimonials .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    #rubrique-testimonials .sidebar-slim {
      position: static;
    }
  }

  /* 3 blocs empiles (recherche, mini-calendrier, filtre circuits) : aucun
     gap generique sur .sidebar-slim en layout normal (uniquement scope a
     .layout-sidebar-slim ailleurs) - espacement ajoute ici plutot que sur
     la classe partagee .circuit-info-bloc, pour ne pas affecter les autres
     pages qui la reutilisent (article-circuit sidebar, deja son propre gap
     via .circuit-infos). */
  #rubrique-testimonials .sidebar-slim > *:not(:last-child) {
    margin-bottom: 1.5em;
  }

  /* .section-head est centre/plafonne a 680px par defaut (pense pour des
     sections pleine largeur) - meme surcharge que #rubrique-calendar pour
     la meme raison : ici il vit dans .content-main, deja etroit (col-9). */
  #rubrique-testimonials .content-main .section-head {
    text-align: left;
    max-width: none;
    margin: 0 0 1.5em;
  }

  #rubrique-testimonials .aucun-resultat {
    background: var(--gris-bg);
    padding: 2em;
    text-align: center;
    color: var(--gris);
  }

  /* Liste verticale (1 temoignage par ligne, paginee 20 par 20) au lieu de
     la grille de cartes du sommaire (.testimonials-grid) : meme carte
     .testimonial-card (fond blanc, ombre, padding), simplement empilee en
     colonne pleine largeur plutot qu'en grille auto-fit. */
  .testimonials-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
    /* Date en haut a droite de la carte, independante du titre desormais
       (demande utilisateur du 2026-09-09 : titre + description passent
       APRES le texte, la date doit rester en haut) - reutilise le meme
       bandeau .testimonial-head/.testimonial-date que la carte du
       sommaire (inclure/section-testimonials.html), deja stylee plus haut
       dans ce fichier (position relative + date en absolute top:0;right:0). */
    .testimonial-nom {
      font-family: var(--font-titres);
      font-size: 1.2em;
      margin: 0 0 .3em;
    }
    .testimonial-programme { margin-bottom: 0; }

    /* "Lire plus" (lame Blocs Depliables, couteau_suisse) : meme
       surcharge que .intro-savoir-plus plus bas dans ce fichier (masque
       le triangle par defaut du plugin, fleche textuelle a la place),
       scopee a .testimonial-card. Ordre visuel apercu-puis-lien obtenu en
       flex+order sur les 3 enfants directs de .cs_blocs (titre/resume/
       destination), sans toucher au balisage du plugin - l'ordre reel des
       balises reste titre-resume-debut (impose par le plugin), seul le
       rendu visuel est reordonne. */
    .testimonial-card .cs_blocs {
      display: flex;
      flex-direction: column;
    }
    .testimonial-card .blocs_resume { order: 1; }
    .testimonial-card .blocs_titre {
      order: 2;
      align-self: flex-end;
      display: inline-block;
      font-family: var(--font-titres);
      font-size: .85em;
      font-weight: 600;
      background: none !important;
      padding-left: 0 !important;
      margin: 0;
    }
    .testimonial-card .blocs_titre a { color: var(--c-page); border-bottom: 0; }
    .testimonial-card .lire-plus-label::after { content: ' →'; }
    .testimonial-card .blocs_destination { order: 3; margin-top: .4em; }

/* ==========================================================
   INFORMATIONS — content/rubrique-informations.html (composition "informations")
   ========================================================== */

  /* Sidebar (recherche + mini-calendrier) fixee au scroll, meme mecanique
     que #rubrique-testimonials/#rubrique-calendar .sidebar-slim. */
  #rubrique-informations .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
  @media screen and (max-width: 980px) {
    #rubrique-informations .sidebar-slim {
      position: static;
    }
  }
  #rubrique-informations .sidebar-slim > *:not(:last-child) {
    margin-bottom: 1.5em;
  }

  /* .section-head est centre/plafonne a 680px par defaut (pense pour des
     sections pleine largeur) - meme surcharge que #rubrique-testimonials/
     -calendar, ici sur les 2 sous-blocs empiles du content-main (formulaire,
     articles). Le 3e bloc (slideshow temoignages) vit maintenant dans sa
     propre section pleine largeur, hors #rubrique-informations - garde donc
     le traitement centre par defaut, comme #sommaire-testimonials. */
  #rubrique-informations .content-main .section-head {
    text-align: left;
    max-width: none;
    margin: 0 0 1.5em;
  }

  /* Espacement vertical entre les 2 sous-blocs empiles du content-main. */
  #rubrique-informations .content-main > * + * {
    margin-top: var(--space-xl);
  }

  #rubrique-informations .aucun-resultat,
  #rubrique-informations-testimonials .aucun-resultat {
    background: var(--gris-bg);
    padding: 2em;
    text-align: center;
    color: var(--gris);
  }

  /* Articles de la rubrique empiles verticalement (un par ligne, polyhierarchie
     comprise) plutot qu'en grille 2 colonnes comme content/rubrique.html -
     meme carte .rubrique-card/-article (logo+titre+introduction), seule la
     grille est surchargee en 1 colonne. */
  #rubrique-informations .rubrique-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Logo plus rectangulaire (16:9 au lieu du 1:1 partage par content/rubrique.html
     - meme balise, ratio different) - demande utilisateur du 2026-09-16, pour
     des blocs moins hauts. Sans ce bloc, le flex "stretch" par defaut de
     .rubrique-card etirerait quand meme le logo a la hauteur du bloc corps
     (titre+introduction) et recadrerait l'image bien plus haute que 16:9 via
     object-fit:cover - align-items:flex-start + aspect-ratio fixe sur le
     logo gardent le rectangle voulu quelle que soit la hauteur du texte. */
  #rubrique-informations .rubrique-card-article {
    align-items: flex-start;
  }
  #rubrique-informations .rubrique-card-article .rubrique-card-logo {
    aspect-ratio: 16 / 9;
  }
  @media screen and (max-width: 736px) {
    #rubrique-informations .rubrique-card-article .rubrique-card-logo {
      aspect-ratio: auto;
    }
  }

  /* Introduction plafonnee a 3 lignes visuellement plutot qu'a un nombre de
     caracteres fixe (largeur de carte variable) - line-clamp standard. */
  #rubrique-informations .rubrique-card-texte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Slideshow temoignages, section a part entiere (voir plus haut) : meme
     carte .testimonial-card que inclure/section-testimonials.html, meme
     mecanique de gouttiere/hauteur egale entre slides que
     #circuits-slideshow-home plus haut dans ce fichier. Espace avant ce
     bloc (2 sections .couleur simplement empilees, sans gouttiere par
     defaut) - demande utilisateur du 2026-09-16. */
  #rubrique-informations-testimonials {
    margin-top: var(--space-xl);
  }
  #rubrique-info-testimonials-slick .slide { padding: 0 .75em; }
  #rubrique-info-testimonials-slick .slick-list { margin: 0 -.75em; }
  #rubrique-info-testimonials-slick .slick-track { display: flex; align-items: stretch; }
  #rubrique-info-testimonials-slick .slick-slide { height: auto; }
  #rubrique-info-testimonials-slick .slick-slide > div { height: 100%; }
  #rubrique-info-testimonials-slick .slick-slide .slide { height: 100%; }
  #rubrique-info-testimonials-slick .testimonial-card { height: 100%; }

/* ==========================================================
   SOMMAIRE v1.2.0 — header/breadcrumb dedies, sections revues
   ========================================================== */

  /* Header sommaire : le fil d'ariane + menu horizontal ne sont plus
     imbriques dans le header (header/sommaire.html) mais fusionnes dans le
     #breadcrumb global de body.html (breadcrumb/sommaire.html) — evite un
     second conteneur inutile et laisse le JS du plugin boutonstexte
     (cible en dur #breadcrumb .container) ajouter ses boutons A-/A+ juste
     apres le menu, a droite, sans code specifique (demande utilisateur du
     2026-09-07). Position/z-index/.is-fixed generalises a #breadcrumb par
     defaut depuis le 2026-09-17 (regle de base plus haut dans ce fichier) :
     plus rien a surcharger ici pour ce gabarit. */

/* ==========================================================
   RUBRIQUE CIRCUITS — breadcrumb dedie (2026-09-15)
   ========================================================== */

  /* Meme principe que le breadcrumb sommaire ci-dessus (fil d'ariane + menu
     horizontal fusionnes dans le #breadcrumb global de body.html, cf.
     breadcrumb/rubrique-circuits.html) - fond anthracite par defaut comme
     partout ailleurs depuis le 2026-09-16 (l'ancien fond bleu var(--bleu),
     propre a cette composition, a ete retire : demande utilisateur, "le fil
     d'ariane sera toujours de la meme couleur grise anthracite"). Position/
     z-index/.is-fixed generalises a #breadcrumb par defaut depuis le
     2026-09-17 : plus rien a surcharger ici non plus pour ce gabarit. */

  /* Demande utilisateur 2026-09-17 : sous le palier mobile (840px, meme
     seuil que le reste du theme), le fil d'ariane peut de nouveau se coller
     en haut de l'ecran au scroll (comportement desktop de base, #breadcrumb.
     is-fixed plus haut dans ce fichier - un premier essai avait neutralise
     cet effet en mobile, retire ici a la demande de l'utilisateur). */
  @media screen and (max-width: 840px) {
    /* Demande utilisateur 2026-09-17 : sous ce meme palier mobile, le fil
       d'ariane occupe toute la largeur de l'ecran (au lieu du width:95%
       herite de la classe generique .container, cf. grid.css) - ne garder
       qu'un padding lateral d'environ 20px pour l'elegance/la lisibilite. */
    #breadcrumb .container {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }

  /* Hero du header sommaire : kicker (label + filets) → H1 → filet →
     tagline → indicateur de défilement, empilés et centrés dans
     .header-titrebox (header/sommaire.html et header/rubrique-sommaire.html,
     cette 2e variante ajoutee le 2026-09-17 pour les rubriques racine FR/EN
     en composition=sommaire). Scopé html.composition_sommaire (classe posee
     par #COMPOSITION|zcore_composition_class quel que soit le type-page,
     cf. structure.html - partagee par le vrai sommaire et toute rubrique en
     composition=sommaire) et non html.page_sommaire (qui aurait exclu ces
     rubriques) — .header-titre reste une classe a part, partagee par
     header/dist.html, header/generale.html et header/recherche.html
     (variante <p>, pas de hero), non concernee ici. */
  /* Panneau "vitre depolie" derriere le bloc titre : la photo de fond n'est
     pas maitrisee (choisie en back-office, peut etre chargee/detaillee
     comme la carte de demo actuelle) - un fond seul assombri ne suffit
     pas a garantir la lisibilite du texte blanc dessus. Le flou (backdrop-
     filter) attenue le detail de l'image juste derriere le texte, pas
     seulement sa luminosite ; angles doux (24px) pour rester une vitre,
     pas la boite a bord dur de l'ancienne reference utilisateur. */
  html.composition_sommaire .header-titrebox-panel {
    position: relative;
    display: inline-block;
    max-width: min(90vw, 920px);
    padding: 3em 4em;
  }
    html.composition_sommaire .header-titrebox-panel:before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(14,17,20,.4);
      /* -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);*/
      border-radius: 12px;
      z-index: -1;
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      html.composition_sommaire .header-titrebox-panel:before { background: rgba(14,17,20,.58); }
    }

  /* Emblème décoratif au-dessus du kicker : reprend l'esprit du logo/danseuse
     de l'ancienne référence utilisateur (capture écran luangprabang-laos.com)
     mais en glyphe unique de la police maison "icons" (U+E919, demandé par
     l'utilisateur), pas une image — cohérent avec .icon-separator/flèches
     Slick déjà surchargées ailleurs dans ce fichier. */
  html.composition_sommaire .header-emblem {
    display: block;
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 3.25rem;
    margin-bottom: .5em;
    color: var(--blanc);
    opacity: .92;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
    html.composition_sommaire .header-emblem:before { content: "\e919"; }

  html.composition_sommaire .header-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9em;
    margin: 0 0 1.4em;
    font-family: var(--font-texte);
    font-size: .8em;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
  }
    html.composition_sommaire .header-kicker-line {
      width: 2.5em;
      height: 1px;
      background: rgba(255,255,255,.45);
    }

  /* H1 = tagline (demande utilisateur 2026-09-07) : cette classe portait
     deja tout le style voulu quand l'element etait un <p> (police, taille,
     italique) - on la garde identique maintenant que c'est le <h1>, avec
     juste letter-spacing/line-height remis a plat pour annuler les valeurs
     par defaut de la regle generique "h1,h2,h3,h4,h5,h6" (travel-laos.css,
     ~ligne 120) qui s'appliquerait sinon a un vrai <h1> sans jamais avoir
     touche l'ancien <p>. */
  html.composition_sommaire .header-tagline {
    font-family: var(--font-titres);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15em;
    letter-spacing: normal;
    line-height: 1.5em;
    max-width: 32em;
    margin: 0 auto;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
  }

  /* #DESCRIPTIF_SITE (texte du site, espace prive) sous le H1/slogan - en
     retrait volontaire (texte courant, pas serif/italique) pour marquer la
     hierarchie sous le H1. N'apparait que si le champ est rempli en
     back-office (pas de repli idiome, contrairement au H1). */
  html.composition_sommaire .header-descriptif {
    font-family: var(--font-texte);
    font-size: 1.3em;
    font-weight: 400;
    max-width: 34em;
    margin: 2.9em auto 3.5em;
    color: rgba(255,255,255,.8);
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
  }

  html.composition_sommaire .header-scrollcue {
    display: inline-flex;
    margin-top: 2.5em;
    border-bottom: 0;
  }
    html.composition_sommaire .header-scrollcue-line {
      position: relative;
      display: block;
      width: 1px;
      height: 42px;
      overflow: hidden;
      background: rgba(255,255,255,.35);
      transition: background .2s ease;
    }
      html.composition_sommaire .header-scrollcue-line:after {
        content: '';
        position: absolute;
        left: 0;
        top: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,.9);
        animation: header-scrollcue-drip 1.8s ease-in-out infinite;
      }
    html.composition_sommaire .header-scrollcue:hover .header-scrollcue-line { background: rgba(255,255,255,.55); }

  @keyframes header-scrollcue-drip {
    0%   { top: -100%; }
    60%  { top: 100%; }
    100% { top: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.composition_sommaire .header-scrollcue-line:after { animation: none; top: 0; }
  }

  @media screen and (max-width: 736px) {
    html.composition_sommaire .header-titrebox-panel { padding: 2em 1.5em; max-width: 92vw; }
    html.composition_sommaire .header-titrebox-panel:before { border-radius: 16px; }
    html.composition_sommaire .header-emblem { font-size: 2.1rem; }
    html.composition_sommaire .header-kicker { font-size: .7em; letter-spacing: .18em; }
    html.composition_sommaire .header-kicker-line { width: 1.5em; }
    html.composition_sommaire .header-tagline { font-size: 1em; }
    html.composition_sommaire .header-descriptif { font-size: .92em; }
    html.composition_sommaire .header-scrollcue { margin-top: 1.8em; }
  }

  /* Titre de section affiché comme un H1 (le vrai <h1> vit dans le header
     du sommaire) : balise <h2> conservée pour la hiérarchie sémantique,
     seul le rendu visuel est agrandi. */
  .section-head--h1 {
    font-size: 2.5em;
    letter-spacing: 0.02em;
    line-height: 1.3em;
  }

  /* 2.3/2.3bis "A lire avant de venir" : padding deja porte a --space-lg
     directement sur .edito-face-avant .content (au lieu de 1.2em),
     cf. la declaration originale plus haut dans ce fichier. */

  /* 2.4 Agenda : .date en taille fixe (largeur ET hauteur, plus seulement
     flex-basis) pour un alignement identique quel que soit le nombre de
     chiffres du jour ; titre sur 1 ligne, overflow invisible. Le survol
     .event-preview (panneau revelant le texte de l'article lie) a ete
     retire le 2026-09-07 (demande utilisateur). */
    .event-card .date {
      flex: 0 0 3.4em;
      width: 3.4em;
      height: 3.4em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .event-card .event-body { min-width: 0; }
    .event-card .event-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
    }

  /* 2.5 bis "A la une" fond couleur : sous-panneau plus clair (--fond-circuits,
     câblé pour la première fois — variable définie depuis 2026-08-25, cf.
     dev-notes) qui reprend les contraintes de l'ancien wrap. --fond-mice
     remplacé par --fond-circuits (demande utilisateur 2026-09-17, la
     couleur MICE est retirée et remplacée par Circuits partout où elle
     n'est pas l'entrée de menu "Plus d'infos" - cf. commentaire en tête de
     ce fichier). */
  .edito-a-la-une-panel {
    background: var(--fond-circuits);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
  }
    .selection_edito_a_la_une-alt .edito-a-la-une-info,
    .selection_edito_a_la_une-alt .edito-a-la-une-info h2 { color: var(--titre); }
    .selection_edito_a_la_une-alt .edito-a-la-une-info { color: var(--ink); }

  @media screen and (max-width: 736px) {
    .edito-a-la-une-panel { padding: var(--space-md); }
  }

  /* 2.6 "Don't miss" : slide titre+desc+lien / photo, padding genereux,
     fleches Slick par defaut masquées et remplacées par des < > custom,
     très grandes, excentrées (débordent du cadre).
     !important sur display necessaire : Slick.prototype.buildRows() (slick.js)
     s'execute meme avec les options par defaut (rows:1, slidesPerRow:1, la
     fonctionnalite multi-lignes n'est pourtant pas utilisee ici) et pose un
     style="width:100%;display:inline-block" EN INLINE sur chaque
     .dont-miss-slide d'origine. Un style inline sans !important bat toute
     regle de feuille de style quelle que soit sa specificite, d'ou le texte
     empile au-dessus de la photo au lieu d'etre a cote (bug remonte le
     2026-09-07). */
  .dont-miss-slick-wrap { position: relative; }
  .dont-miss-slick-wrap .dont-miss-slick .dont-miss-slide {
    display: flex !important;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) calc(var(--space-xl) + var(--space-sm));
  }
    .dont-miss-info { flex: 1; min-width: 280px; }
    .dont-miss-titre { margin-bottom: .5em; }
    .dont-miss-desc { line-height: 1.7em; margin-bottom: 1em; }
    .dont-miss-media {
      flex: 1;
      min-width: 280px;
      border-radius: var(--radius-md);
      overflow: hidden;
    }
      .dont-miss-media img { display: block; width: 100%; height: auto; }

  @media screen and (max-width: 736px) {
    .dont-miss-slide { flex-direction: column; padding: var(--space-lg); }
  }

  /* Grandes flèches réutilisables sur tout carrousel Slick du sommaire :
     surcharge du theme Slick "accessible" natif (bouton/icone deja fournis
     par le plugin, cf. accessible-slick-theme.scss), pas de prevArrow/
     nextArrow custom — un essai en ce sens a ete abandonne le 2026-09-07
     (bug de positionnement, boutons superposes). Glyphe : police "icons"
     (U+EC3B/EC3C). Unites en rem, pas em : .slick-prev/.slick-next ont
     "font-size:0" dans le theme Slick. La taille du glyphe force !important
     malgre une specificite deja suffisante — cause non confirmee, a
     revisiter si ca persiste avec un cache totalement vide. */
  .slick-slider.slick-arrows-lg .slick-prev { left: -3rem; right: auto; }
  .slick-slider.slick-arrows-lg .slick-next { left: auto; right: -1.5rem; }
  .slick-slider.slick-arrows-lg .slick-prev .slick-prev-icon,
  .slick-slider.slick-arrows-lg .slick-next .slick-next-icon {
    font-family: 'icons' !important;
    font-size: 3.5rem !important;
    opacity: .65;
  }
  .slick-slider.slick-arrows-lg .slick-prev .slick-prev-icon:before {
    content: "\ec3b";
    font-family: 'icons' !important;
    font-size: 3.5rem !important;
  }
  .slick-slider.slick-arrows-lg .slick-next .slick-next-icon:before {
    content: "\ec3c";
    font-family: 'icons' !important;
    font-size: 3.5rem !important;
  }
  .slick-slider.slick-arrows-lg .slick-prev .slick-prev-icon:before,
  .slick-slider.slick-arrows-lg .slick-next .slick-next-icon:before {
    color: var(--c-section, var(--c-page));
  }
  .slick-slider.slick-arrows-lg .slick-prev:hover .slick-prev-icon,
  .slick-slider.slick-arrows-lg .slick-next:hover .slick-next-icon {
    opacity: 1;
  }
    /* Sur fond couleur plein cadre (edito-a-la-une, alt y compris), une
       fleche de la meme teinte que la section se fondrait dans le fond :
       on repasse en blanc translucide, comme les puces .slick-dots deja
       en place sur ce composant. */
    .slick-slider.edito-a-la-une-slick.slick-arrows-lg .slick-prev .slick-prev-icon:before,
    .slick-slider.edito-a-la-une-slick.slick-arrows-lg .slick-next .slick-next-icon:before {
      color: var(--blanc);
    }

  /* Don't miss (2.6) uniquement : sa .dont-miss-slide passe en colonne
     sous 736px (empilement titre/desc/photo) — des fleches en position
     absolute flotteraient alors n'importe ou par-dessus ce contenu
     empile. Les autres carrousels .slick-arrows-lg (a-la-une, edito-slick,
     circuits) restent une rangee/image a toute largeur, ou l'absolute
     reste adaptee y compris sur mobile — pas la meme regle pour eux. */
  @media screen and (max-width: 980px) {
    .slick-slider.dont-miss-slick.slick-arrows-lg .slick-prev,
    .slick-slider.dont-miss-slick.slick-arrows-lg .slick-next {
      position: static;
      transform: none;
      display: inline-block;
      margin: 0 .6em;
    }
  }

  /* 2.7 Témoignages : date sur la même ligne que la citation (bandeau avec
     le guillemet), alignée à droite. .descriptif-light : même typo que
     .testimonial-signature span, réutilisable ailleurs. */
  .descriptif-light {
    font-size: .85em;
    opacity: .6;
  }
  .testimonial-head {
    position: relative;
    margin-bottom: .2em;
  }
    .testimonial-head .quote-icon { margin-bottom: 0; }
    .testimonial-head .testimonial-date {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 1;
    }

  /* Page article-testimonials (témoignage complet + "Les autres
     témoignages" en dessous) : même carte .testimonial-card que le
     sommaire/la liste rubrique, simplement pleine largeur hors grille/
     liste. Espacement scopé à cette page, même idiome que
     #article-page .article-evenements-lies/.article-rubrique-liste. */
  #article-testimonials-page .testimonials-autres { margin-top: 3em; }
    #article-testimonials-page .testimonials-autres h2 { margin-bottom: .8em; }
    #article-testimonials-page .aucun-resultat {
      background: var(--gris-bg);
      padding: 2em;
      text-align: center;
      color: var(--gris);
    }

  /* 2.1 Intro : reskin de la lame "Blocs Dépliables" (couteau_suisse) pour
     le "savoir plus" (a activer dans Configuration > Le Couteau Suisse) —
     classes generees par outils/blocs_fonctions.php (cs_blocs/blocs_titre/
     blocs_resume/blocs_destination). */
  .intro-savoir-plus {
    max-width: 800px;
    margin: calc(-1 * var(--space-md)) auto var(--space-xl);
    text-align: center;
  }
  .intro-savoir-plus .cs_blocs { margin-top: .8em; }
  .intro-savoir-plus .blocs_titre {
    display: inline-block;
    font-family: var(--font-titres);
    font-size: .95em;
    font-weight: 600;
    background: none !important;
    padding-left: 0 !important;
  }
    .intro-savoir-plus .blocs_titre a {
      /* Demande utilisateur 2026-09-17 : couleur "Destinations" (--c-info)
         fixe, pas --c-page (couleur ambiante de la PAGE courante - "Autres"/
         olive par defaut sur le sommaire, sans lien avec la section intro
         qui est elle-meme en teintes "Destinations" depuis la meme date). */
      color: var(--c-info);
      border-bottom: 0;
    }
      .intro-savoir-plus .savoir-plus-label::after { content: ' →'; }
  .intro-savoir-plus .blocs_destination {
    overflow: hidden;
    margin-top: .8em;
  }
  .intro-savoir-plus .savoir-plus-texte { line-height: 1.7em; }