@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;
}


: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 categorie de page (zcore_composition_class). Cles admin : --c-info = Destinations (menu Explorer), --c-mice = Informations (menu Plus d'infos), --c-generale = Autres (defaut de --c-page), --c-produits = Produits (non assignee). */
  --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, pour les box-shadow/overlays. */
  --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);

  /* Echelle d'espacement generique. */
  --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;
  --font-titres: 'Fraunces', Georgia, serif;
  --font-eyebrow: 'Caveat', 'Segoe Script', cursive;
}

/* Popup Leaflet des points KML (className kml-popup, KML.js) : titre reduit, separateur, icone du marker (perso.js). */
.kml-popup .leaflet-popup-content-wrapper { border-radius: var(--radius-md); }
.kml-popup h2 {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0 0 .5em;
  padding-bottom: .4em;
  font-size: 1em;
  border-bottom: 1px solid var(--c-page);
}
.kml-popup .kml-popup-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* 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 (reservee). */
html.composition_mice { --c-page:var(--c-circuit); }
html.composition_produits { --c-page:var(--c-produits); }
/* Calendrier (composition calendar + page du jour) : dominante circuit. */
html.composition_calendar,
html.page_jour { --c-page:var(--c-circuit); }

/* Classe .couleur + data-couleur : pilote --c-section de chaque section. */
.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); }
/* informations : couleur admin --c-mice (pas de _hover dediee, assombrie via color-mix). */
.couleur[data-couleur="informations"] { --c-section:var(--c-mice); --c-section-hover:color-mix(in srgb, var(--c-mice) 80%, black); }
/* Idem destinations (--c-info) et circuits-alt (--c-circuit). */
.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:clip sur html ET body (sur mobile c'est html qui defile). clip et non hidden : hidden cree un conteneur de scroll et casse position:sticky. */
html{ overflow-x: clip; }
body{
  font-family:var(--font-texte);
  color:var(--ink);
  background:#f9f7f6;
  -webkit-font-smoothing:antialiased;
  /* Base mobile 16px (1em = 1rem). */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.75em;
  overflow-x: clip;
}
  /* Grand ecran : base 14pt, ne pas reunifier avec le 16px mobile. Les rem (header-titre/header-emblem) ne suivent pas. */
  @media screen and (min-width: 981px) {
    body{ font-size: 14pt; }
  }
  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 = titre de page, h2 = sections, h3 = elements d'une section et intertitres, h4-h6 libres. .h1/.h2/.h3 : meme gabarit sur n'importe quelle balise. */
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    font-family: var(--font-titres);
    color: var(--titre);
    font-weight: 800;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    letter-spacing: 0.02em;
  }

  h1, .h1 {
    font-size: 2.5em;
  }

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

  h2, .h2 {
    font-size: 2em;
    letter-spacing: 0em;
    line-height: 1.1em;
  }

  h3, .h3 {
    font-size: 1.4em;
    letter-spacing: 0.025em;
  }

  /* h4-h6 : titres dans les blocs (cartes, etc.), un seul gabarit */
  h4 {
    font-size: .95em;
  }

  @media screen and (max-width: 980px) {
    h1, .h1 { font-size: 2.1em; }
    h2, .h2 { font-size: 1.75em; }
    h3, .h3 { font-size: 1.3em; }
  }

  @media screen and (max-width: 736px) {
    h1, .h1 { font-size: 1.7em; }
    h2, .h2 { font-size: 1.45em; }
    h3, .h3 { font-size: 1.2em; }
  }

  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, .is-fixed pilote par breadcrumb/dist.html. */
  #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 : c'est la marge auto de ul.breadcrumb-items qui pousse le menu a droite. */
    justify-content: flex-start;
    gap: 1em;
  }
  /* Ordre : boutonstexte, fil d'ariane, menu, drapeaux (order sur chaque enfant). Drapeaux masques sous 840px (entree Langue du panneau mobile + footer). */
  #breadcrumb .nav-secondary-wrap { order: 1; flex-shrink: 0; }
  .breadcrumb-lang { order: 2; flex-shrink: 0; }
  /* Drapeaux mll : liens #menu_lang remplaces par des images de fond (langue_fr/langue_en). Duplique dans le panneau mobile. */
  /* Langue en cours (strong) au-dessus du lien de traduction (a), ordre par type d'element. */
  .breadcrumb-lang #menu_lang { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .breadcrumb-lang #menu_lang strong { order: -1; }
    .breadcrumb-lang #menu_lang a,
    .breadcrumb-lang #menu_lang strong {
      display: inline-block;
      width: 27px;
      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;
    }
    .breadcrumb-lang #menu_lang a:hover { opacity: 1; transform: scale(1.1); }
    .breadcrumb-lang #menu_lang strong { opacity: 1; }
    .breadcrumb-lang #menu_lang .langue_fr { background-image: url("../images/flag-fr-small.png"); }
    .breadcrumb-lang #menu_lang .langue_en { background-image: url("../images/flag-en-small.png"); }
  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; }
    /* Ancetres en blanc, page courante attenuee. */
    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 a la place du texte Accueil (texte accessible via title/aria-label). */
    ul.breadcrumb-items .icon-home {
      display: inline-block;
      width: 1.6em;
      height: 1.6em;
      background: url("../images/icon_home.svg") no-repeat center / contain;
    }
    /* Icone Home : grise au repos, blanche au survol. */
    ul.breadcrumb-items a.icon-home { opacity: .75; }
    ul.breadcrumb-items a.icon-home:hover { opacity: 1; }

    /* Mobile : icone Home deplacee dans le panneau mobile. */
    @media screen and (max-width: 840px) {
      ul.breadcrumb-items li.breadcrumb-home { display: none; }
    }
    /* Mobile : drapeaux deja dans le panneau mobile et le footer. */
    @media screen and (max-width: 840px) {
      .breadcrumb-lang { display: none; }
    }
    /* Sommaire mobile : breadcrumb sans contenu visible, padding/fond annules (pas display:none, qui masquerait le hamburger en position:fixed). */
    @media screen and (max-width: 840px) {
      #breadcrumb.type-page-sommaire { padding: 0; background: transparent; }
    }

  /* Onglets du menu : contour Circuits/Explorer, rempli quand la page en fait partie. Home = nth-child(1) : Circuits/Explorer/Plus d'infos = nth-child(2)/(3)/(4). Enfant direct (>) pour ne pas cibler les panneaux. */
  #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 : posee par menus_exposer sur l'entree Circuits (objet). */
  #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 (texte_libre, sans exposition native) : .explorer-actif calcule dans breadcrumb/dist.html. */
  #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 : entree objet, .on native. --c-mice assez sombre pour le texte clair. */
  #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);
  }

  /* Entrees Home et Langue (en dur) : masquees en desktop, affichees dans le panneau mobile. */
  #breadcrumb .nav-secondary > .menu-entree-home { display: none; }
  #breadcrumb .nav-secondary > .menu-entree-lang { display: none; }

  /* Responsive Nav pose display:block sans media query : display:flex restaure en desktop. */
  @media screen and (min-width: 841px) {
    #breadcrumb .nav-collapse {
      display: flex;
    }
    #breadcrumb .nav-collapse > .menu-entree {
      width: auto;
    }
  }

  /* Responsive Nav pose overflow:hidden sans media query : restaure en desktop, sinon les panneaux sont rognes. */
  @media screen and (min-width: 841px) {
    #breadcrumb .nav-collapse {
      overflow: visible;
    }
  }

  /* boutonstexte (injecte dans le breadcrumb) : float:none, le plugin pose float:right. */
  .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; }
  /* A-/A+ masques en mobile (840px). */
  @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;
    }

    /* light-sweep : balayage lumineux au survol, classe generique pour bouton plein. */
    .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;
    }

    /* Mobile : padding lateral a 0 (deja porte par .container), vertical reduit. */
    @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/article circuits : fond du banner en couleur Circuits. */
    html.composition_circuits #header-banner {
      background-color: var(--c-circuit);
    }

    /* Reveal-image : hublot rond qui suit le curseur et montre l'image configuree image_defaut_revele (inclure/header-reveal.html + perso.js). Visible pendant le mouvement, disparait 0.5s apres (reveal-active). Seules opacity/transform sont animees. */
    #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 en mobile (display:none : l'image n'est pas chargee). */
    @media screen and (max-width: 840px) {
      #header-banner .header-reveal { display: none; }
    }

  /* Header + breadcrumb = 100vh. --breadcrumb-h mesuree en JS (body.html), 4.5rem en repli. */
  #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 : visibles seulement en mobile. Le bouton hamburger (a.nav-toggle) vient de Responsive Nav. */
  .submenu-toggle { display: none; }
  .nav-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
    /* padding-bottom compense : pont de survol vers le panneau de niveau 2. */
    .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 vers le haut tant que le breadcrumb n'est pas fixe (colle au bas du header 100vh). */
    #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;
    }
    /* Responsive Nav centre les li (ID + 2 balises) : meme specificite ici pour l'emporter. */
    #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. */
  .info-dropdown {
    padding: .5em;
    /* Largeur au contenu, plafonnee. */
    min-width: 200px; width: max-content; max-width: 340px;
  }
    /* Items li.menu-entree natifs (plugin Menus) : reset de liste sur .menu-liste. */
    .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 glyphe icons U+E926 en ::before (le plugin n'a pas de span dedie). */
    .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; }

  .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) : habillage seulement. Config back-office : cible nav-secondary-menu, palier 840px, Menu burger. */
  @media screen and (max-width: 840px) {
    /* .nav-primary (bar1) masque en mobile. */
    .nav-primary { display: none; }

    /* Bouton hamburger en position:fixed en haut a droite (le breadcrumb est hors ecran au chargement). */
    a.nav-toggle {
      position: fixed;
      top: 0.6em;
      right: 1em;
      width: 36px;
      height: 36px !important;
      z-index: 100;
      /* Icone burger (SVG en fond) inversee en blanc via filter. */
      filter: invert(1);
    }
    /* Sprite burger/croix agrandi a 36/72px pour coller au bouton de 36px. Specificite superieure : la feuille du plugin est chargee apres. */
    body a.nav-toggle:link, body a.nav-toggle:focus {
      background-size: 36px 72px !important;
    }

    /* Panneau en position:fixed (!important : le plugin pose position:relative en inline). Ouverture par top (-100vh ferme, 3.2em ouvert), max-height fixe. */
    #nav-secondary-menu {
      position: fixed !important;
      top: -100vh !important;
      right: 1em;
      width: min(85vw, 320px);
      /* !important : le plugin injecte .opened{max-height:...!important}. */
      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 : le plugin pose une transition inline sur max-height. */
      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;
      }

      /* Style sobre : annule les onglets desktop (2 id pour gagner). Home = nth-child(1). */
      #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);
      }

      /* Home et Langue affichees dans le panneau mobile. */
      #breadcrumb #nav-secondary-menu > .menu-entree-home,
      #breadcrumb #nav-secondary-menu > .menu-entree-lang {
        display: flex;
      }

      /* Puce carree de couleur avant chaque entree (sur le li). Home/Langue : --c-generale. */
      #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 mll du panneau mobile (footer : bloc separe). */
      #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 CSS, pivote quand le sous-panneau est deplie (.sub-open, perso.js). */
      #nav-secondary-menu .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        /* Neutralise le min-width:18em du reset button. */
        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 en accordeon (position:static). .dropdown-active leve le max-height du plugin (regle prevue par sa CSS). */
      #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) pour tout le 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);
      }

      /* Reset du pont de survol desktop (padding/margin des .menu-entree) et du text-align:center de Responsive Nav. */
      #nav-secondary-menu .sub-panel .menu-entree {
        position: static;
        padding-bottom: 0;
        margin-bottom: .1em;
        text-align: left;
      }

      /* Seules les sous-sous-sous-entrees ont un margin-left propre. */
      #nav-secondary-menu .circuit-dropdown,
      #nav-secondary-menu .info-dropdown {
        /* Padding desktop (.5em) neutralise. */
        padding: 0;
      }
      /* Couleur du lien forcee : sa regle desktop (--ink) bat l'heritage. */
      #nav-secondary-menu .circuit-dropdown .menu-items__lien,
      #nav-secondary-menu .info-dropdown .menu-items__lien {
        padding: .35em .3em .35em 1.6em;
        color: rgba(255,255,255,.85);
      }
      /* Retrait des sous-entrees du mega-panel sous le titre de colonne. */
      #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 : rubrique parente, header/dist.html. :not(.composition_sommaire) pour ne pas ecraser le hero sommaire. */
    html.page_gis .header-titrebox .header-kicker,
    html.page_jour .header-titrebox .header-kicker,
    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_gis .header-titrebox .header-kicker-line,
    html.page_jour .header-titrebox .header-kicker-line,
      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_gis .header-titrebox .header-titre,
    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 + 6 thematiques (.themes scope .header-themes), bulle en rem, ouverte sous la pastille. */
    .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 d'articles en tags (.tag-list/.tag-pill) clairs sur fond sombre. */
    .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 : pilule blanche, bouton loupe separe par un filet. */
  .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_gis .header-titrebox .header-kicker,
    html.page_jour .header-titrebox .header-kicker,
    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_gis .header-titrebox .header-kicker-line,
    html.page_jour .header-titrebox .header-kicker-line,
    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; }
  }

    /* Header article-circuits : kicker-lien vers la rubrique Circuits, titre restreint (H1 dans le content), sous-titre en .header-tagline. */
    html.article_circuits .header-titrebox .header-kicker {
      border-bottom: 0;
      transition: transform .2s ease, color .2s ease;
    }
    html.article_circuits .header-titrebox .header-kicker:hover,
    html.article_circuits .header-titrebox .header-kicker:focus {
      transform: scale(1.06);
      color: var(--blanc);
      border-bottom: 0;
    }
    html.article_circuits .header-titrebox .header-titre {
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    }
    html.article_circuits .header-titrebox .header-tagline {
      font-family: var(--font-titres);
      font-style: italic;
      font-weight: 400;
      font-size: 1.05em;
      max-width: 680px;
      margin: 0 auto .6em;
      color: rgba(255,255,255,.85);
      text-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    @media screen and (max-width: 736px) {
      html.article_circuits .header-titrebox .header-titre { font-size: 1.6rem; }
      html.article_circuits .header-titrebox .header-tagline { font-size: .95em; }
    }

    /* Nav trajet : 4 points sur une ligne (::before), space-between ; point rempli au survol. */
    .header-titrebox .header-route-nav {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 640px;
      margin: var(--space-xl) auto .3em;
    }
      .header-titrebox .header-route-nav::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 6px;
        right: 6px;
        height: 1px;
        background: rgba(255,255,255,.4);
      }
      .header-titrebox .header-route-nav .route-point {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .6em;
        color: rgba(255,255,255,.85);
        border-bottom: 0;
        text-decoration: none;
      }
      .header-titrebox .header-route-nav .route-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--blanc);
        border: 2px solid rgba(255,255,255,.5);
        box-shadow: 0 1px 6px rgba(0,0,0,.3);
        transition: transform .2s ease, background .2s ease, border-color .2s ease;
      }
      .header-titrebox .header-route-nav .route-label {
        font-family: var(--font-texte);
        font-size: .75em;
        font-weight: 500;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-shadow: 0 1px 6px rgba(0,0,0,.3);
        white-space: nowrap;
      }
      .header-titrebox .header-route-nav .route-point:hover .route-dot,
      .header-titrebox .header-route-nav .route-point:focus .route-dot {
        transform: scale(1.3);
        background: var(--c-circuit);
        border-color: var(--c-circuit);
      }
      .header-titrebox .header-route-nav .route-point:hover .route-label,
      .header-titrebox .header-route-nav .route-point:focus .route-label {
        color: var(--blanc);
      }
    @media screen and (max-width: 736px) {
      .header-titrebox .header-route-nav { max-width: 92vw; }
      .header-titrebox .header-route-nav .route-label { font-size: .65em; }
      .header-titrebox .header-route-nav .route-dot { width: 11px; height: 11px; }
      .header-titrebox .header-route-nav::before { top: 5.5px; }
    }

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

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

    /* Sommaire (et composition sommaire) : pas de padding-bottom, les sections ont le leur. */
    html.composition_sommaire #content {
      padding-bottom: 0;
    }

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

  /* Gouttiere sidebar/content-main (.row n'en a pas). */
  .layout-sidebar-normal-1,
  .layout-sidebar-normal-2 {
    gap: 2em;
  }

  /* col-3 + col-9 = 100% : avec un gap, content-main passerait a la ligne. Sidebar en largeur fixe, content-main en flex-basis 0 (au-dessus de 736px). */
  @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 : sidebar apres le contenu (sauf layout-sidebar-slim). */
  @media screen and (max-width: 736px) {
    .layout-sidebar-normal-1 .sidebar,
    .layout-sidebar-normal-2 .sidebar {
      order: 1;
    }
  }

  /* Sidebar circuit sticky ; align-self:flex-start sinon l'aside est etire et ne colle pas. */
  #article-circuits .sidebar {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    /* Pas de sticky en mobile. */
    #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; }
  }

  /* Sidebar rubrique-circuits sticky (filtre + mini-calendrier). align-self:flex-start requis. */
  #rubrique-circuits .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

  @media screen and (max-width: 980px) {
    /* Pas de sticky en mobile. */
    #rubrique-circuits .sidebar-slim {
      position: static;
    }
  }

  /* Rubrique circuits : 2 blocs de sidebar-slim et grille de resultats, scope au sommaire exclu. */
  #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: 736px) {
    .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) : les couleurs admin peuvent etre generees vides par configurer_template_travel. */
      background: #000;
      border-color: #000;
      color: var(--blanc);
    }

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

  /* scroll-margin des ancres circuit (breadcrumb fixe). Le defilement est aussi gere en JS (perso.js). */
  html { scroll-behavior: smooth; }
  #contact-circuit,
  #itineraire,
  #details,
  #photos,
  #inclus-exclus {
    scroll-margin-top: 240px;
  }

  /* Intro de l'article circuit : titre et descriptif centres, separateur a icone (comme .tour-card .divider-icon). */
  .circuit-intro {
    text-align: center;
    margin-bottom: 2.5em;
  }
    .circuit-intro-descriptif {
      max-width: 42em;
      margin-left: auto;
      margin-right: auto;
    }
    .circuit-intro .divider-icon {
      display: flex;
      align-items: center;
      gap: .8em;
      max-width: 20em;
      margin: 1.5em auto 0;
      color: var(--c-circuit);
      font-family: 'icons';
      font-size: 1.2em;
    }
      .circuit-intro .divider-icon::before,
      .circuit-intro .divider-icon::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-circuit);
      }
      .circuit-intro .divider-icon .icon-separator {
        flex-shrink: 0;
        line-height: 1;
      }

  /* Intercalaires (Plan de route, Itineraire, Inclus, Exclus...) : filet couleur Circuits, distincts des h3 du texte. */
  #article-circuits .content-main h3.intercalaire {
    display: inline-flex;
    align-items: center;
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-circuit);
    border-left: 3px solid var(--c-circuit);
    padding-left: .7em;
    margin: 2.4em 0 1em;
  }
    #article-circuits .content-main > .circuit-intro + div h3.intercalaire {
      margin-top: 0;
    }

  /* Inclus/exclus en boite blanche bordee. */
  #article-circuits .content-main .texte-boxed {
    background: var(--blanc);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.2em 1.4em;
    font-size: .9em;
  }

  /* Carte : z-index propre pour plafonner ceux de Leaflet (jusqu'a 1000) sous le breadcrumb sticky (70). */
  #article-circuits .map_associated {
    position: relative;
    z-index: 1;
    margin: 1.5em 0;
  }

  /* Puce fleur de frangipanier, textes de circuit seulement. */
  #article-circuits .content-main .texte ul {
    list-style: none;
    padding-left: 1.6em;
  }
    #article-circuits .content-main .texte ul li {
      position: relative;
      padding-left: .2em;
    }
      #article-circuits .content-main .texte ul li::before {
        content: '';
        position: absolute;
        left: -1.4em;
        top: .65em;
        width: 0.7em;
        height: 0.7em;
        background: url("../images/puce-frangipanier-circuits.png") no-repeat center / contain;
      }

  /* Inclus/exclus : puce carree native. Doit rester APRES la regle precedente (meme specificite). */
  #article-circuits .content-main .texte-boxed ul {
    list-style: square;
    padding-left: 1.2em;
  }
  #article-circuits .content-main .texte-boxed ul li {
    padding-left: .3em;
    margin-bottom: .35em;
    line-height: 1.5;
  }
    #article-circuits .content-main .texte-boxed ul li:last-child {
      margin-bottom: 0;
    }
    #article-circuits .content-main .texte-boxed ul li p {
      margin: 0;
    }
    #article-circuits .content-main .texte-boxed ul li::before {
      content: none;
    }

  /* h2 du texte (jours du programme) : etiquette couleur Circuits, taille du texte courant. */
  #article-circuits .content-main h2.spip {
    display: inline-block;
    background: var(--c-circuit);
    color: var(--blanc);
    font-size: 1em;
    padding: .5em 1em;
    border-radius: var(--radius-md);
    margin: 1.8em 0 1em;
  }

  .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-info-valeur .sep {
        opacity: .5;
      }

    /* Encart unique circuit-card, lignes separees par un filet. */
    .circuit-info-bloc.circuit-card {
      padding: 0;
    }
      .circuit-card-row {
        padding: 1em 1.2em;
        border-top: 1px solid var(--line);
      }
      .circuit-card-row:first-child {
        border-top: 0;
      }

    /* Nav des 4 sections : liens empiles, filet colore au survol ; le lien porte l'inset pour que le survol aille jusqu'aux bords. */
    .circuit-nav {
      display: flex;
      flex-direction: column;
      gap: .1em;
      padding: .4em 0;
    }
      .circuit-nav a {
        display: block;
        padding: .5em 1.2em;
        border-left: 3px solid transparent;
        border-bottom: 0;
        color: var(--ink);
        font-family: var(--font-titres);
        font-size: .9em;
        font-weight: 700;
        transition: border-color .2s ease, color .2s ease, background .2s ease;
      }
      /* Fleche icons U+EC44 devant chaque lien. */
      .circuit-nav a::before {
        font-family: 'icons';
        content: "\ec44";
        color: var(--c-circuit);
        margin-right: .5em;
        font-size: .8em;
      }
      .circuit-nav a:hover,
      .circuit-nav a:focus,
      .circuit-nav a.on {
        border-left-color: var(--c-circuit);
        color: var(--c-circuit);
        background: var(--gris-bg);
      }

    /* Prix : un seul tarif en pratique -> rendu vedette (.circuit-price-highlight) ; 2 a 4 -> liste (.circuit-price-list). */
    .circuit-price .circuit-info-label {
      font-size: 1.15em;
    }
    .circuit-price-unit {
      font-size: .8em;
      opacity: .6;
      margin-bottom: .3em;
    }
    .circuit-price-currency {
      font-weight: 500;
    }

    /* Vedette : par pers. et prix sur la meme ligne (baseline), a droite ; prix grand en --titre. */
    .circuit-price-line {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: .3em;
    }
      .circuit-price-line .circuit-price-unit {
        margin-bottom: 0;
      }
      .circuit-price-slash {
        font-size: .8em;
        opacity: .5;
        margin-right: .1em;
      }
    .circuit-price-highlight {
      font-family: var(--font-titres);
      font-size: 1.9em;
      font-weight: 800;
      line-height: 1;
      color: var(--ink);
    }
      .circuit-price-highlight .circuit-price-currency {
        font-size: .5em;
        vertical-align: .2em;
        margin-right: .05em;
      }
      .circuit-price-highlight .circuit-price-asterisk {
        font-size: .5em;
        vertical-align: .9em;
        margin-left: .05em;
        opacity: .6;
      }
    /* Asterisque de renvoi devant les lignes de precision. */
    .circuit-price-asterisk {
      font-style: normal;
    }
    /* Lignes de precision sous le prix : italique, espacement resserre. */
    .circuit-price-note,
    .circuit-price-cat {
      font-size: .75em;
      font-style: italic;
      color: rgba(var(--ink-rgb), .6);
      line-height: 1.3;
      margin: .2em 0 0;
    }
      /* Chiffre mis en valeur (gras dans la chaine de langue). color + alpha plutot qu'opacity, pour que l'enfant retrouve une couleur pleine. */
      .circuit-price-cat-num {
        font-size: 1.15em;
        color: var(--ink);
      }
    /* Ecart entre le prix et la 1re ligne de precision. */
    .circuit-price-line + .circuit-price-note {
      margin-top: 1.2em;
    }

    /* Rendu liste (mode de secours, 2 a 4 tarifs simultanes) */
    .circuit-price-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
      .circuit-price-list li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1em;
        padding: .5em 0;
        border-bottom: 1px solid var(--line);
      }
      .circuit-price-list li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }
      .circuit-price-list .circuit-price-val {
        font-family: var(--font-titres);
        font-size: 1.3em;
        font-weight: 700;
        opacity: .55;
        white-space: nowrap;
      }
      .circuit-price-list .circuit-price-cat {
        font-size: .85em;
        color: rgba(var(--ink-rgb), .75);
        margin-top: 0;
      }
      .circuit-price-list .circuit-price-currency {
        font-size: .7em;
      }

    /* Duree + difficulte : 2 lignes, libelles en .circuit-info-label, valeurs en .circuit-stat-value. */
    .circuit-duree-difficulte {
      display: flex;
      flex-direction: column;
      gap: .4em;
    }
      .circuit-stat-value {
        font-size: .9em;
      }

    /* Panneau reservation : prix + bouton dans un encart teinte (color-mix) detache par une marge ; la ligne suivante perd son filet. */
    .circuit-booking-panel {
      margin: .9em .9em 1em;
      padding: 1.1em 1.2em;
      background: color-mix(in srgb, var(--c-circuit) 6%, var(--blanc));
      border-radius: var(--radius-md);
    }
      .circuit-booking-panel + .circuit-card-row {
        border-top: 0;
      }
      .circuit-booking-panel .circuit-info-cta {
        margin-top: 1.1em;
      }

    /* Bouton Demande d'infos plein couleur Circuits. */
    .circuit-info-cta .button {
      display: block;
      text-align: center;
      background: var(--c-circuit);
      border-color: var(--c-circuit);
      color: var(--blanc);
    }
      .circuit-info-cta .button:hover {
        background: color-mix(in srgb, var(--c-circuit) 85%, black);
        border-color: color-mix(in srgb, var(--c-circuit) 85%, black);
      }

    /* Thematiques de la sidebar (.themes scope ici) ; bulle ancree a gauche sur les 2 premieres pastilles. */
    .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;
    }

  /* Formulaire contact_circuit : 2 fieldsets a 50% (classes fieldset_fieldset_1/_2 generees par saisies). Seul le .editer-groupe racine (form > div > .editer-groupe) passe en flex, les groupes imbriques restent empiles. */
  .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) : champs empiles. */
  .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 : colonnes en tete, sous-groupes plus discrets. */
  .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 entre champs. */
  .circuit-contact-form .editer { margin-bottom: var(--space-sm); }
  .circuit-contact-form .editer:last-child { margin-bottom: 0; }

  /* Labels masques (placeholder seul), uniquement les label.editer-label : les legend des cases a cocher restent visibles. */
  .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 restylees (appearance:none global dans grid.css). */
  .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;
  }

  /* Contact de la page circuit : fond gris-bg conserve, taille des champs/cases, hauteur du message. */
  #contact-circuit input[type="text"],
  #contact-circuit input[type="email"],
  #contact-circuit input[type="password"],
  #contact-circuit textarea,
  #contact-circuit select {
    font-family: inherit;
    font-size: .95em;
    /* Champs en fond blanc sur la carte grise. */
    background: var(--blanc);
  }
  #contact-circuit .choix label {
    font-size: .95em;
  }
  #contact-circuit textarea {
    min-height: 160px;
  }
  /* Cases a cocher resserrees. */
  #contact-circuit .choix {
    margin-bottom: .3em;
  }

  /* Legende du fieldset imbrique des cases a cocher alignee sur les legendes de premier niveau. */
  #contact-circuit .editer_checkbox_1 > legend {
    font-size: 1em;
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
  }

  /* Page Contact (et formulaire de rubrique-informations) : carte blanche, en-tete editorial, champs nets. */
  #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 repete de rubrique-informations : intro et champs cote a cote, en-tete aligne a gauche. */
  #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; }
  }

  /* Padding reduit pour l'encart repete. */
  #rubrique-informations .rubrique-info-form-pause.circuit-contact-form {
    padding: 1.4em 1.8em 1.6em;
  }

  /* Formidable 3 en grille : nom + email / message, puis antispam / bouton. Cible les classes .editer_<nom> (input_1, input_3, textarea_1, input_6) : a revoir si les champs sont renumerotes. .editer-groupe en display:contents. */
  #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 teintes et bordes, placeholder fonce. */
  #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;
  }

  /* accent-color --c-info. */
  #article-contact-page .circuit-contact-form .choix input[type="checkbox"] {
    accent-color: var(--c-info);
  }

  /* Filet vertical entre les 2 colonnes. */
  @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 plein, couleur --c-info. */
  #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); }

  @media screen and (max-width: 736px) {
    .documents-joints li { flex-wrap: wrap; }
    .documents-joints .doc-titre { flex: 1 1 100%; }
    .documents-joints .doc-meta { flex: 1; }
  }

/* ==========================================================
   PAGE POINT GIS (page=gis) — content/gis.html, header/gis.html,
   inclure/gis-sidebar.html. Reprend la mise en page de l'article
   circuit (intro, .circuit-card, .circuit-nav, nav "trajet" du header).
   ========================================================== */

  #gis-circuits,
  #gis-articles,
  #gis-evenements,
  #gis-photos,
  #gis-carte {
    scroll-margin-top: 240px;
  }

  #gis-page .sidebar {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
  @media screen and (max-width: 980px) {
    #gis-page .sidebar { position: static; }
  }

  .gis-section {
    margin-bottom: 3.5em;
  }

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

  #gis-page .rubrique-cards-grid { grid-template-columns: 1fr; }

  .gis-evenements .event-card {
    color: var(--ink);
  }
    .gis-evenements .event-card .date { flex: 0 0 7em; }
    .gis-evenements .event-card .event-title { margin: 0; }
    .gis-evenements .event-card:hover .event-title { color: var(--c-page); }

  .gis-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6em;
  }
    .gis-photos a { border-bottom: 0; display: block; overflow: hidden; border-radius: var(--radius-md); }
    .gis-photos img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
    .gis-photos a:hover img { transform: scale(1.05); }
  @media screen and (max-width: 980px) {
    .gis-photos { grid-template-columns: repeat(3, 1fr); }
  }
  @media screen and (max-width: 736px) {
    .gis-photos { grid-template-columns: repeat(2, 1fr); }
  }

  .gis-carte {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .gis-sidebar-lieu {
    display: flex;
    align-items: center;
    gap: .8em;
  }
    .gis-sidebar-lieu .gis-icone img { display: block; }
    .gis-sidebar-titre {
      font-family: var(--font-titres);
      font-weight: 700;
      font-size: 1.1em;
    }
    .gis-sidebar-adresse { font-size: .85em; opacity: .7; }

  .header-titrebox .header-gis-icone {
    margin: 0 0 .8em;
  }
    .header-titrebox .header-gis-icone img {
      display: inline-block;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
    }
  html.page_gis .header-titrebox .header-tagline {
    font-family: var(--font-titres);
    font-style: italic;
    max-width: 680px;
    margin: 0 auto .6em;
    color: rgba(255,255,255,.85);
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
  }

/* ==========================================================
   PAGE DU JOUR (page=jour) - content/jour.html, header/jour.html,
   inclure/jour-evenement-article.html. Cible du mini-calendrier.
   ========================================================== */

  /* Fond du body ; encoches = meme couleur. */
  #jour-page { background: none; }

  #jour-page .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
  @media screen and (max-width: 980px) {
    #jour-page .sidebar-slim { position: static; }
  }

  /* Header : feuillet au centre, evenements precedent/suivant en cartes translucides. */
  .header-titrebox .header-jour {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.5em;
    max-width: 900px;
    margin: 1.2em auto 1.4em;
  }
    /* Feuillet du header neutre (base : bloc Page du jour - intro). */
    .header-titrebox .jour-feuillet {
      width: 7.5em;
      margin: 0;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(18,22,26,.25);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      box-shadow: none;
      text-shadow: none;
    }
      .header-titrebox .jour-feuillet::before,
      .header-titrebox .jour-feuillet::after {
        background: rgba(255,255,255,.35);
        box-shadow: none;
      }
      .header-titrebox .jour-feuillet-mois {
        background: #111;
        color: var(--blanc);
        font-size: .65em;
      }
      .header-titrebox .jour-feuillet-num,
      .header-titrebox .jour-feuillet-nom {
        align-self: stretch;
        background: var(--blanc);
      }
      .header-titrebox .jour-feuillet-num {
        padding-top: .1em;
        font-size: 3.4em;
        color: var(--titre);
      }
      .header-titrebox .jour-feuillet-nom {
        font-size: 1.25em;
        color: var(--ink);
      }
    .header-jour .jour-precsuiv-lien {
      display: flex;
      flex-direction: column;
      gap: .2em;
      max-width: 17em;
      padding: .8em 1.1em;
      border: 1px solid rgba(255,255,255,.35);
      border-bottom: 1px solid rgba(255,255,255,.35);
      border-radius: var(--radius-lg);
      background: rgba(18,22,26,.25);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: var(--blanc);
      line-height: 1.3;
      text-decoration: none;
      transition: background .2s ease, border-color .2s ease;
    }
      .header-jour .jour-precsuiv-lien:hover,
      .header-jour .jour-precsuiv-lien:focus {
        background: rgba(18,22,26,.45);
        border-color: rgba(255,255,255,.75);
        color: var(--blanc);
      }
    .header-jour .jour-precedent { justify-self: end; text-align: right; }
    .header-jour .jour-suivant { justify-self: start; text-align: left; }
    .jour-precsuiv-label {
      font-size: .7em;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .8;
    }
      .jour-precedent .jour-precsuiv-label::before { content: "← "; }
      .jour-suivant .jour-precsuiv-label::after { content: " →"; }
    .jour-precsuiv-titre { font-family: var(--font-titres); font-size: 1.05em; }
    .jour-precsuiv-date { font-size: .8em; opacity: .75; }
  @media screen and (max-width: 736px) {
    .header-titrebox .header-jour {
      grid-template-columns: 1fr 1fr;
      gap: 1.2em .6em;
    }
    .header-titrebox .jour-feuillet { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .header-jour .jour-precedent,
    .header-jour .jour-suivant { justify-self: stretch; max-width: none; font-size: .9em; }
    .header-jour .jour-precsuiv-vide { display: none; }
  }

  /* Page du jour - intro : feuillet d'ephemeride + eyebrow/h1. */
  .jour-intro {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-bottom: 2.5em;
  }
    .jour-feuillet {
      position: relative;
      flex: 0 0 6.2em;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--blanc);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card-hover);
      overflow: hidden;
      transform: rotate(-3deg);
      text-align: center;
      line-height: 1;
    }
      .jour-feuillet::before,
      .jour-feuillet::after {
        content: "";
        position: absolute;
        top: .35em;
        width: .5em;
        height: .5em;
        border-radius: 50%;
        background: #f9f7f6;
        box-shadow: inset 0 1px 2px rgba(var(--ink-rgb), .35);
      }
      .jour-feuillet::before { left: 1.1em; }
      .jour-feuillet::after { right: 1.1em; }
      .jour-feuillet-mois {
        align-self: stretch;
        padding: 1.2em .4em .4em;
        background: var(--c-page);
        color: var(--blanc);
        font-family: var(--font-texte);
        font-size: .6em;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
      }
      .jour-feuillet-num {
        font-family: var(--font-titres);
        font-size: 2.6em;
        font-weight: 600;
        line-height: 1.1;
        color: var(--c-page);
      }
      .jour-feuillet-nom {
        padding-bottom: .6em;
        font-family: var(--font-eyebrow);
        font-size: 1.05em;
        color: var(--ink);
      }
        .jour-feuillet-nom::first-letter { text-transform: uppercase; }
    .jour-intro .eyebrow { color: var(--c-section); }
    .jour-intro-titre { margin-bottom: 0; }
      .jour-intro-titre::first-letter { text-transform: uppercase; }
  @media screen and (max-width: 736px) {
    .jour-intro { flex-direction: column; text-align: center; gap: 1.2em; }
    .jour-intro-titre { font-size: 1.8em; }
  }

  .jour-sommaire {
    margin-bottom: 3em;
    padding: 1.4em 1.6em;
    background: var(--blanc);
    border-left: 4px solid var(--c-section);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
    .jour-sommaire-titre {
      margin-bottom: .8em;
      font-family: var(--font-titres);
      font-weight: 700;
      font-size: 1.15em;
      color: var(--titre);
    }
    .jour-sommaire ol {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: .6em;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .jour-sommaire li { margin: 0; padding: 0; }
    .jour-sommaire a {
      display: flex;
      align-items: center;
      gap: .8em;
      height: 100%;
      padding: .6em .8em;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      color: var(--ink);
      transition: border-color .2s ease, background .2s ease;
    }
      .jour-sommaire a:hover,
      .jour-sommaire a:focus {
        border-color: var(--c-section);
        background: color-mix(in srgb, var(--c-section) 8%, white);
      }
    .jour-sommaire-num {
      flex: 0 0 2.2em;
      height: 2.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--c-section);
      color: var(--blanc);
      font-family: var(--font-titres);
      font-weight: 800;
    }
    .jour-sommaire-texte { font-weight: 600; line-height: 1.3; }
      .jour-sommaire-texte small {
        display: block;
        font-weight: 400;
        opacity: .7;
      }

  .jour-evenement {
    scroll-margin-top: 240px;
    position: relative;
    margin-bottom: 3.5em;
    background: var(--blanc);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }
    .jour-evenement-tete {
      position: relative;
      display: flex;
      align-items: stretch;
      border-bottom: 2px dashed var(--line);
    }
      .jour-evenement-tete::before,
      .jour-evenement-tete::after {
        content: "";
        position: absolute;
        bottom: -.8em;
        width: 1.6em;
        height: 1.6em;
        border-radius: 50%;
        background: #f9f7f6;
      }
      .jour-evenement-tete::before { left: -.8em; }
      .jour-evenement-tete::after { right: -.8em; }
    .jour-evenement-talon {
      flex: 0 0 7.5em;
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-xl) 0 0 0;
      overflow: hidden;
      border-right: 2px dashed var(--line);
      text-align: center;
    }
      .jour-evenement-talon .month {
        padding: .7em .4em;
        background: var(--c-section);
        color: var(--blanc);
        font-size: .7em;
        font-weight: 700;
        letter-spacing: .14em;
      }
      .jour-evenement-talon .day {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .3em;
        font-family: var(--font-titres);
        font-size: 2.2em;
        font-weight: 800;
        color: var(--c-section);
        white-space: nowrap;
      }
    .jour-evenement-entete { padding: 1.4em 1.8em 1.6em; }
      .jour-evenement-rang {
        margin: 0 0 .2em;
        font-family: var(--font-eyebrow);
        font-size: 1.3em;
        color: var(--c-section);
      }
      .jour-evenement-titre { margin-bottom: .4em; }
      .jour-evenement-infos {
        display: flex;
        flex-wrap: wrap;
        gap: .3em 1.4em;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: .9em;
      }
        .jour-evenement-infos li { margin: 0; padding: 0; }
        .jour-evenement-infos .jour-info-date { font-weight: 600; color: var(--titre); }
        .jour-evenement-infos .jour-info-lieu,
        .jour-evenement-infos .jour-info-adresse { opacity: .8; }
    .jour-evenement > .jour-evenement-descriptif,
    .jour-evenement > .jour-evenement-logo,
    .jour-evenement > .chapo,
    .jour-evenement > .texte,
    .jour-evenement > .notes,
    .jour-evenement > .jour-evenement-lien,
    .jour-evenement > .jour-evenement-haut {
      margin-left: 2em;
      margin-right: 2em;
    }
    .jour-evenement > .jour-evenement-descriptif {
      margin-top: 1.8em;
      font-family: var(--font-titres);
      font-style: italic;
      font-size: 1.1em;
    }
    .jour-evenement-logo {
      margin-top: 2em;
      margin-bottom: 1.6em;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
      .jour-evenement-logo img { display: block; width: 100%; height: auto; }
    .jour-evenement > .chapo { font-weight: 600; margin-top: 1.6em; }
    .jour-evenement-texte { margin-top: 1.4em; }
    .jour-evenement-lien,
    .jour-evenement-haut {
      padding-bottom: 1.8em;
      margin-bottom: 0;
    }
      .jour-evenement-lien a { font-weight: 600; color: var(--c-section); }
      .jour-evenement-lien a::after { content: " →"; }
      .jour-evenement-lien + .jour-evenement-haut { margin-top: -1.2em; }
      .jour-evenement-haut { font-size: .85em; }
      .jour-evenement-haut a { color: var(--ink); opacity: .7; }
      .jour-evenement-haut a::before { content: "↑ "; }
  @media screen and (max-width: 736px) {
    .jour-evenement-talon { flex-basis: 5.5em; }
    .jour-evenement-talon .day { font-size: 1.6em; }
    .jour-evenement-entete { padding: 1.1em 1.2em 1.3em; }
    .jour-evenement > .jour-evenement-descriptif,
    .jour-evenement > .jour-evenement-logo,
    .jour-evenement > .chapo,
    .jour-evenement > .texte,
    .jour-evenement > .notes,
    .jour-evenement > .jour-evenement-lien,
    .jour-evenement > .jour-evenement-haut {
      margin-left: 1.2em;
      margin-right: 1.2em;
    }
  }

  .jour-vide {
    padding: 2em;
    background: var(--blanc);
    border-radius: var(--radius-lg);
    text-align: center;
  }
  .jour-retour { text-align: center; margin-top: 1em; }

/* ==========================================================
   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 : plugin menus (footer_fr/footer_en). Depth 0 = colonnes, depth 1 = liens. */
    #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: 980px) {
      #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: 736px) {
      #footer .footer-menu[data-depth="0"] { grid-template-columns: 1fr 1fr; }
      #footer .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

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

  #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 alterne ; circuits reprend le fond de l'intro. */
  #sommaire-circuits { background: var(--fond-informations); }
  #sommaire-evenements { background: var(--gris-bg); }
  .sommaire-mot-slideshow { background: var(--gris-bg); }

  /* Eyebrow manuscrit (Caveat) : ni majuscules ni interlettrage. */
  .eyebrow {
    display: block;
    font-family: var(--font-eyebrow);
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    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; }
    /* Separateur a la couleur de la section (--c-section), repli --c-page. */
    .section-head .rule {
      width: 48px;
      height: 2px;
      background: var(--c-section, var(--c-page));
      margin: 1em auto 0;
    }

  /* Cartes selections_editoriales : pan qui glisse au survol (comme les benefices). */
  .edito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
  /* Base commune des cartes (fond blanc, arrondi, ombre). .rubrique-card a part (bordure). */
  .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;
      }
      /* Images adaptive_images (picture.adapt-img-wrapper) dimensionnees au cadre. */
      .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 */
      .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 : dominante Informations, scopee par .lire-avant-venir. */
  .selection_edito.lire-avant-venir { background: var(--fond-mice); }
  .selection_edito.lire-avant-venir .eyebrow { color: var(--c-mice); }
  .selection_edito.lire-avant-venir .edito-face-arriere { background: var(--c-mice); }

  /* Variante Slick : gouttiere par padding des slides + marge negative sur .slick-list. */
  .edito-slick .slide { padding: 0 14px; }
  .edito-slick .slick-list { margin: 0 -14px; padding: 8px 0 12px; }
  .edito-slick .slick-track { display: flex; align-items: stretch; }
  .edito-slick .slick-slide { height: auto; }
  .edito-slick .slick-slide > div,
  .edito-slick .slick-slide .slide,
  .edito-slick .edito-card { height: 100%; }

  /* A lire avant de venir (selection 1) : fond creme, filigrane, cartes plates bordees. */
  .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 : fond couleur (--c-section), texte / slideshow en 50/50. */
  .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 screen and (max-width: 980px) {
      /* stretch : sinon .slide-photo (absolute) retombe sur la taille native de l'image. */
      .edito-a-la-une-wrap { flex-direction: column; align-items: stretch; }
    }

    /* Mobile : fond couleur bord a bord. */
    @media screen and (max-width: 736px) {
      .container--a-la-une { padding: 0; }
      /* Texte en retrait de 1.5em. */
      .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 (image_recadre, sans picture) contrainte au cadre, sinon debordement mobile. */
    .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); }
    /* Zoom au survol. */
    .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;
    }
  /* accessible-slick : la couleur de la pastille est sur span.slick-dot-icon. */
  .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 (selection 3) : fond gris clair, cartes blanches, guillemet, signature. */
  .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, leger survol. */
  a.testimonial-card:hover { transform: translateY(-3px); }

  /* Slideshow temoignages du sommaire : gouttiere et hauteur egale. */
  #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 : benefices en 2 colonnes. */
  @media screen and (max-width: 736px) {
    .benefice-face {
      padding: var(--space-sm);
    }
    .benefice-titre,
    .benefice-titre-face {
      max-width: 100%;
      text-align: center;
    }
    /* Cases bord a bord : pas de marge laterale. */
    .container--benefices {
      padding: 0;
    }
  }

  /* Fleches slick : slick-theme impose color blanc (charge apres accessible-slick). Specificite via .slick-slider, 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 .slick-track. */
  .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; }
  /* Marge negative sur .slick-list = padding des slides (bords du carrousel). */
  #circuits-slideshow-home .slick-list,
  .mot-slideshow .slick-list { margin: 0 -.75em; }

  /* Slides de meme hauteur : slick-track en flex stretch jusqu'a .tour-card. */
  #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%; }

  /* 3 derniers circuits : 3 colonnes puis 1. */
  .sommaire-circuits-last .section-head .eyebrow { color: var(--c-section); }
  .sommaire-circuits-last .tour-card { height: 100%; }
  .sommaire-circuits-cta { text-align: center; margin-top: 2.5em; }
  @media screen and (max-width: 1280px) {
    .sommaire-circuits-last .tour-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
  }
  @media screen and (max-width: 980px) {
    .sommaire-circuits-last .tour-grid.cols3 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  }

  /* 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 : Duration et Destination cote a cote. */
  @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 : compteur pleine largeur, centre. */
  @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;
    }
    /* Recadrage commun (cf. .edito-face-avant .media .adapt-img-wrapper). */
    .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 : fond = couleur de la thematique, texte 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; }
    /* 2 premieres pastilles : bulle ancree a gauche (sinon coupee par l'overflow du slideshow). */
    .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; }

  /* Agenda du sommaire : textes gris, eyebrow --c-info. */
  #sommaire-evenements .event-card { color: var(--ink); }
  #sommaire-evenements .event-card .day { color: var(--titre); }
  /* Survol en --c-info. */
  #sommaire-evenements .event-card:hover { color: var(--c-info); }
  #sommaire-evenements .event-card:hover .day { color: var(--c-info); }

  /* Blocs mot-cle : .slide et .row sur 2 divs distincts (slick pose display:inline-block en inline). */
  .sommaire-mot-headline .slide .row,
  .sommaire-mot-slideshow .slide .row {
    align-items: center;
    gap: var(--space-xl);
  }
  /* col-6/col-6 + gap : flex-basis 0 (au-dessus du seuil mobile). */
  @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 sur fond sombre, formulaire plus large. */
  #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); }
  /* Grid en fr plutot que .row flex : le gap est retire avant repartition. */
  #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 : 2 colonnes. */
    #cta-office .contact-grid {
      grid-template-columns: 2fr 3fr;
    }
  }
  /* Panneau vitre sur fond sombre (cta-contact, cta-googlemap, cta-office). */
  #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 masques visuellement, accessibles (placeholder seul). */
  #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 et apparence des champs sur fond sombre. */
  #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 : classes de selection_edito_a_la_une, eyebrow en --c-info. */
  #cta-a-la-une .eyebrow { color: rgba(255, 255, 255, .7); }

  /* CTA Prochain evenement : .event-card en grand format. */
  #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 Temoignages : fond gris-bg, meme gouttiere/hauteur egale que les autres slideshows temoignages. */
  #cta-testimonials {
    background: var(--gris-bg);
  }
  #cta-testimonials-slick .slide { padding: 0 .75em; }
  #cta-testimonials-slick .slick-list { margin: 0 -.75em; }
  #cta-testimonials-slick .slick-track { display: flex; align-items: stretch; }
  #cta-testimonials-slick .slick-slide { height: auto; }
  #cta-testimonials-slick .slick-slide > div { height: 100%; }
  #cta-testimonials-slick .slick-slide .slide { height: 100%; }
  #cta-testimonials-slick .testimonial-card { height: 100%; }

  /* CTA Carte : bloc carte de cta-contact en plein format. */
  #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 sticky ; blocs en .circuit-info-bloc/.circuit-info-label. */
  #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. */
  #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 aucun-resultat des qu'un bloc a une ligne (:has sur .section-head). */
  .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 sticky. */
  #article-page .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

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

  /* Recherche en sidebar : placeholder sans label, bouton > a cote du champ. */
  .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 : cadre teinte, bordure d'accent, icone dediee. */
  .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 h2 {
      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 et descriptif : accroches discretes. */
  #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;
  }

  /* Portfolio : 1 ou 2 photos en float 50%, plus de 2 via article_slick. */
  #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 des floats. */
  #article-page .content-main .texte::after { content: ""; display: table; clear: both; }

  /* Evenements lies : .events-panel sans chrome de section. */
  #article-page .article-evenements-lies { margin-top: 3em; }
    #article-page .article-evenements-lies h2 { margin-bottom: .8em; }

  /* Carte : simple espacement. */
  #article-page .map_associated { margin-top: 3em; }

  /* Articles de la meme rubrique : logo / titre / fleche. */
  #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;
        }
      #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; }
  }

  /* Rubrique par defaut : sous-rubriques puis articles, meme carte image + contenu. Pas de fond dedie. */
  #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 : largeur donnee par .col-3/.col-9, flex herite neutralise. */
      .rubrique-card-article .rubrique-card-logo,
      .rubrique-card-article .rubrique-card-corps { flex: 0 1 auto; }

    /* Sous-rubriques : liste plafonnee, defilante. */
    .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, sous-titre, descriptif, texte tronque. */
    .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: 980px) {
    .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")
   ========================================================== */

  /* Fond du body sur toute la page (data-couleur ne sert qu'a --c-section). */
  #rubrique-calendar {
    background: none;
  }

  /* Sidebar sticky. */
  #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);
  }

  /* Evenements en cartes blanches (infos a gauche, logo a droite), survol --c-mice. */
  #rubrique-calendar .events-panel {
    padding: 0;
    background: none;
    box-shadow: none;
  }
    #rubrique-calendar #calendrier-evenements-liste > .col-12 { margin-bottom: 1.2em; }

  #rubrique-calendar .event-card {
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: var(--blanc);
    overflow: hidden;
    color: var(--ink);
    transition: box-shadow .25s ease, transform .25s ease;
  }
    #rubrique-calendar .event-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-2px);
      color: var(--c-mice);
    }

    #rubrique-calendar .event-card .event-logo {
      flex: 0 0 34%;
      max-width: 16em;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--gris-bg);
    }
      #rubrique-calendar .event-card .event-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
      }
      #rubrique-calendar .event-card:hover .event-logo img { transform: scale(1.04); }

    #rubrique-calendar .event-card .event-body {
      flex: 1 1 auto;
      min-width: 0;
      padding: 1.1em 1.4em;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #rubrique-calendar .event-card .event-head {
      display: flex;
      align-items: center;
      gap: 1em;
    }
      #rubrique-calendar .event-card .event-head-texte { min-width: 0; }

    #rubrique-calendar .event-card .date {
      flex: 0 0 3.8em;
      width: 3.8em;
      height: 3.8em;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--gris-bg);
      transition: background-color .25s ease, border-color .25s ease;
    }
      #rubrique-calendar .event-card .day {
        font-size: 1.05em;
        color: var(--ink);
        transition: color .25s ease;
      }
      #rubrique-calendar .event-card .date-fin {
        font-size: .65em;
        opacity: .75;
        margin-top: .25em;
        white-space: nowrap;
      }
      #rubrique-calendar .event-card:hover .date {
        background: var(--c-mice);
        border-color: var(--c-mice);
        color: var(--blanc);
      }
      #rubrique-calendar .event-card:hover .day { color: var(--blanc); }

    #rubrique-calendar .event-card .event-title { font-size: 1.05em; }
    #rubrique-calendar .event-card .event-intro {
      font-size: .85em;
      line-height: 1.5;
      margin-top: .8em;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }

  @media screen and (max-width: 736px) {
    #rubrique-calendar .event-card { flex-direction: column; }
    #rubrique-calendar .event-card .event-logo {
      order: -1;
      flex: 0 0 auto;
      max-width: none;
      aspect-ratio: 16 / 9;
    }
  }

  /* Pagination : pastilles blanches, page courante gris fonce, survol --c-mice (texte fonce). */
  #rubrique-calendar .pagination a,
  #rubrique-calendar .pagination strong {
    min-width: 2.8em;
    height: 2.8em;
    font-size: .95em;
    color: var(--ink);
    background: var(--blanc);
    border-color: var(--line);
    box-shadow: var(--shadow-card);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
    #rubrique-calendar .pagination a:hover {
      color: var(--gris-deep);
      background: var(--c-mice);
      border-color: var(--c-mice);
    }
    #rubrique-calendar .pagination strong {
      color: var(--blanc);
      background: var(--gris-deep);
      border-color: var(--gris-deep);
    }

  /* .section-head aligne a gauche dans .content-main. */
  #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 sticky. */
  #rubrique-testimonials .sidebar-slim {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

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

  /* Espacement entre les 3 blocs de la sidebar. */
  #rubrique-testimonials .sidebar-slim > *:not(:last-child) {
    margin-bottom: 1.5em;
  }

  /* .section-head aligne a gauche dans .content-main. */
  #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 de .testimonial-card. */
  .testimonials-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
    /* Date en haut a droite (.testimonial-head). */
    .testimonial-nom {
      font-family: var(--font-titres);
      font-size: 1.2em;
      margin: 0 0 .3em;
    }
    .testimonial-programme { margin-bottom: 0; }

    /* Lire plus (Blocs Depliables) : fleche textuelle, ordre apercu puis lien via flex order. */
    .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 sticky. */
  #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 aligne a gauche (formulaire, articles). */
  #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 empiles, 1 colonne. */
  #rubrique-informations .rubrique-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Logo 16:9 ; align-items:flex-start sinon le logo s'etire. */
  #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 limitee a 3 lignes (line-clamp). */
  #rubrique-informations .rubrique-card-texte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Slideshow temoignages : gouttiere et hauteur egale. */
  #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 - header/breadcrumb dedies
   ========================================================== */

  /* Breadcrumb du sommaire : fil d'ariane + menu dans le breadcrumb global. */

/* ==========================================================
   RUBRIQUE CIRCUITS — breadcrumb dedie
   ========================================================== */

  /* Idem breadcrumb sommaire. */

  @media screen and (max-width: 840px) {
    /* Fil d'ariane pleine largeur. */
    #breadcrumb .container {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }

  /* Hero sommaire : kicker, H1, filet, tagline, scroll. Scope html.composition_sommaire (sommaire et rubriques en composition sommaire). */
  /* Panneau vitre depolie derriere le titre, pour la lisibilite sur n'importe quelle photo. */
  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); }
    }

  /* Embleme : glyphe icons U+E919. */
  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 : letter-spacing/line-height remis a plat. */
  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 du site sous le H1, en retrait. */
  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; }
  }

  /* .h1 : gabarit visuel sans changer de niveau semantique. */

  /* Agenda : .date en taille fixe, titre sur 1 ligne. */
    .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;
    }

  /* "A la une" fond couleur : sous-panneau plus clair (--fond-circuits). */
  .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); }
  }

  /* Don't miss : !important sur display, slick buildRows pose display:inline-block en inline. */
  .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; }
    /* Prochaine date en billet (talon calendrier, pointille). width/height auto : annule le 3.4em de .event-card .date. */
    .dont-miss-info .dont-miss-evenement {
      display: inline-flex;
      align-items: stretch;
      gap: 0;
      max-width: 100%;
      margin-bottom: 1.4em;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--blanc);
      box-shadow: var(--shadow-card);
      color: var(--ink);
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
    }
      .dont-miss-info .dont-miss-evenement:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--ink-rgb), .14);
      }
      .dont-miss-evenement .date {
        flex: 0 0 auto;
        width: auto;
        height: auto;
        min-width: 6em;
        justify-content: flex-start;
        align-items: stretch;
        border-right: 1px dashed var(--line);
      }
        .dont-miss-evenement .month {
          order: -1;
          padding: .55em .9em;
          background: var(--c-section);
          color: var(--blanc);
          font-size: .65em;
          font-weight: 700;
          letter-spacing: .14em;
          text-align: center;
          white-space: nowrap;
          opacity: 1;
        }
        .dont-miss-evenement .day {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: .3em .5em .4em;
          font-size: 1.9em;
          color: var(--c-section);
          white-space: nowrap;
        }
      .dont-miss-evenement .event-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: .9em 1.5em;
      }
        .dont-miss-evenement .eyebrow { color: var(--c-section); margin-bottom: .3em; }
        .dont-miss-evenement .event-title { font-size: 1em; color: var(--titre); white-space: normal; }
        .dont-miss-evenement .event-lieu { margin-top: .3em; }
      .dont-miss-info .dont-miss-evenement:hover .event-title { color: var(--c-section); }
    .dont-miss-info .lien { color: var(--c-section); }
    .dont-miss-info .lien:hover { color: var(--c-section-hover); }
    .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 fleches Slick (police icons), en rem : le theme met font-size:0 sur les boutons. */
  .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 : fleches blanches translucides. */
    .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 : slide en colonne sous 736px, fleches repositionnees. */
  @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;
    }
  }

  /* Temoignages : date sur la ligne du guillemet, a droite. */
  .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 : carte pleine largeur. */
  #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);
    }

  /* Savoir plus : reskin des Blocs Depliables (couteau_suisse). */
  .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 {
      /* Couleur --c-info fixe. */
      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; }

  /* Carte GIS de l'intro rubrique : z-index 1 sous le breadcrumb sticky. */
  .rubrique-map-carte {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto var(--space-xl);
  }
    .rubrique-map-carte .carte_gis { border-radius: var(--radius-lg); }