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

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

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

  /* Couleur dominante par catégorie de page (voir zcore_composition_class()) */
  --c-generale:var(--gris);
  --c-circuit:var(--bleu);
  --c-info:var(--brique);
  --c-page:var(--c-generale);

  --ink:var(--gris);
  --paper:#faf8f4;
  --paper-bleu:#edf8ff;
  --gris-bg:#eef1f2; --gris-deep:#33404a; --line:#dedad3;
  --radius-md:0.2em; --radius-lg:0.4em; --radius-xl:1em;
  --shadow-card:0 3px 7px rgba(32,39,47,.10);
  --shadow-card-hover:0 10px 10px rgba(32,39,47,.18);

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

/* 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); }

body{
  font-family:var(--font-texte);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size: 14pt;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.75em;
}
/*  body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
  }
*/
  a {
    -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    color: var(--c-page);
    text-decoration: none;
    border-bottom: dotted 1px;
  }
    a:hover {
      border-bottom-color: transparent;
    }

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

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

  h1 {
    font-size: 2.5em;
  }

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

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

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

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

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

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

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

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

  /* Fil d'Ariane */

  #breadcrumb {
    padding: 1em 0;
    border-bottom: 1px solid var(--line);
  }
  #breadcrumb .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
  }
  ul.breadcrumb-items {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8em;
    letter-spacing: .03em;
  }
    ul.breadcrumb-items li.item { display: flex; align-items: center; }
    ul.breadcrumb-items li.item.active { color: var(--c-page); font-weight: 600; }
    ul.breadcrumb-items a { border-bottom-color: transparent; opacity: .75; }
    ul.breadcrumb-items a:hover { opacity: 1; }
    ul.breadcrumb-items .sep { margin: 0 .5em; opacity: .4; }

  /* plugin boutonstexte : injecté par JS dans #breadcrumb .container (cf. javascript/boutonstexte.js) */
  .boutonstexte { display: inline-flex; align-items: center; gap: .5em; flex-shrink: 0; }
  .boutonstexte a { display: inline-flex; opacity: .75; border-bottom: none; }
  .boutonstexte a:hover { opacity: 1; }
  .boutonstexte img { width: 18px; height: 18px; }

  /* 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: #fff !important;
    }

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

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

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

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

/* Wrapper */

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

    .wrapper.nopadding {
      padding: 0;
    }

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

    .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: #fff;
      color: #fff !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: #fff;
    text-align: center;
  }
    #header-banner:before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(32,39,47,.15), rgba(32,39,47,.55));
    }
    #header-banner .header-banner-inner {
      position: relative;
      z-index: 1;
    }

  #header-banner.hauteur-100 { min-height: 100vh; }
  #header-banner.hauteur-80  { min-height: 80vh; }
  #header-banner.hauteur-40  { min-height: 40vh; }

  @media screen and (max-width: 736px) {
    #header-banner.hauteur-100 { min-height: 70vh; }
    #header-banner.hauteur-80  { min-height: 55vh; }
    #header-banner.hauteur-40  { min-height: 32vh; }
  }

  /* 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: 1.3em;
    letter-spacing: 0.04em;
    color: #fff;
    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; }

  /* bar2 : barre compacte fixe, visible après scroll */
  .bar2 {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: .85em 2em;
    background: rgba(32,39,47,.94);
    transform: translateY(-100%);
    transition: transform .9s cubic-bezier(.4,0,.2,1);
  }
    .bar2.visible { transform: translateY(0); }
    .bar2 .brand { font-size: 1.05em; }

  .nav-secondary-wrap { display: flex; align-items: center; gap: 6px; }
  .nav-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
    /* le padding-bottom (compensé par une marge négative) sert de pont de
       survol vers le panneau de niveau 2 sans "trou mort" à la souris */
    .nav-secondary .menu-entree { position: relative; padding-bottom: 18px; margin-bottom: -18px; }
    .nav-secondary .menu-items__lien {
      display: inline-block;
      color: rgba(255,255,255,.9);
      font-family: var(--font-titres);
      font-size: .8em;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .5em .8em;
      font-weight: 500;
      border-bottom-color: transparent;
      cursor: pointer;
      transition: transform .2s ease;
    }
    .nav-secondary .menu-entree:hover > .menu-items__lien { transform: scale(1.08); border-bottom-color: transparent; }

  /* Panneaux de niveau 2 : ouverture verticale progressive au survol */
  .sub-panel {
    position: absolute;
    top: 100%; right: 0;
    background: #fff;
    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;
  }
    .nav-secondary .menu-entree:hover .sub-panel {
      opacity: 1; visibility: visible; transform: scaleY(1); pointer-events: auto;
    }

  .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-titres);
      font-size: .8em; font-weight: 700; text-transform: uppercase; 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: .4em .5em;
      transition: background .15s ease, color .15s ease;
    }
    .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 { background: var(--brique); color: #fff; }
    .mega-panel .menu-liste .menu-liste { padding-left: .6em; }
    .mega-panel .menu-liste .menu-liste .menu-items__lien { font-size: .8em; color: #6b747c; padding: .25em .5em; }
    .mega-panel .menu-liste .menu-liste .menu-entree:hover > .menu-items__lien { color: #fff; }

  .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: .55em .9em;
      transition: background .15s ease, color .15s ease;
    }
    .circuit-dropdown .menu-items__lien:hover { background: var(--bleu); color: #fff; }
    .circuit-dropdown .icon-separator { margin-right: .4em; font-size: .75em; opacity: .5; }
    .circuit-dropdown .menu-items__lien:hover .icon-separator { opacity: .9; }

  .lang-sep { width: 1px; height: 14px; background: rgba(255,255,255,.3); margin: 0 10px; }
  .lang { font-size: .75em; letter-spacing: .05em; }
  .lang.fr { color: rgba(255,255,255,.85); }
  .lang.en { color: rgba(255,255,255,.55); }

  @media screen and (max-width: 840px) {
    .nav-primary, .nav-secondary { display: none; }
  }

  /* Encart titre centré + 2 infos, au milieu du header */
  .header-titrebox {
    padding: 2em;
  }
    .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;
    }

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

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

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

  /* 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; }
  }

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

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

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

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

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

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

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

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

  .pagination {
    display: flex;
    justify-content: center;
    gap: .6em;
    margin-top: 2.5em;
  }
    .pagination a,
    .pagination strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.4em;
      height: 2.4em;
      padding: 0 .5em;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: .85em;
      font-weight: 700;
    }
    .pagination a:hover {
      border-color: var(--c-page);
      color: var(--c-page);
    }
    .pagination strong {
      background: var(--c-page);
      border-color: var(--c-page);
      color: #fff;
    }

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

  /* Ancre douce du bouton "Demande d'infos" (sidebar) vers #contact-circuit.
     scroll-margin-top laisse passer .bar2 (barre de menu fixe compacte
     après scroll), même valeur que le top du sticky de #rubrique-circuits. */
  html { scroll-behavior: smooth; }
  #contact-circuit { scroll-margin-top: 96px; }

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

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

  /* Bloc contact article circuit (structure reprise de #sommaire-contact) */
  #contact-circuit .contact-grid { align-items: center; }
  #contact-circuit .contact-block-texte {
    opacity: .9;
    line-height: 1.6;
  }
  #contact-circuit h2 { margin-bottom: .6em; }

  @media screen and (max-width: 980px) {
    #contact-circuit .contact-grid { align-items: start; }
  }

  /* 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: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
      .documents-joints .doc-titre { flex: 1; font-weight: 700; }
      .documents-joints .doc-meta { font-size: .8em; opacity: .6; }
      .documents-joints .doc-telecharger {
        font-size: .85em;
        font-weight: 700;
        color: var(--c-page);
        white-space: nowrap;
      }
      .documents-joints .doc-telecharger:hover { color: var(--brique); }

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

  #footer {
    background: var(--gris-deep);
    color: #fff;
    padding: 4em 0 2em;
  }
    #footer a {
      color: #fff;
      opacity: .85;
    }
    #footer a:hover {
      opacity: 1;
    }
    #footer .footer-logo {
      font-family: var(--font-titres);
      font-size: 1.4em;
      margin-bottom: 1.5em;
      display: block;
    }
    #footer .footer-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      margin-bottom: 2em;
    }
    #footer .footer-column {
      flex: 1 1 200px;
    }
    #footer .footer-column h3 {
      font-size: 0.85em;
      letter-spacing: 0.1em;
      opacity: .7;
      margin-bottom: 1em;
    }
    #footer .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #footer .footer-column li {
      padding: 0;
      margin-bottom: 0.6em;
    }
    #footer ul.copyright {
      border-top: solid 1px rgba(255,255,255,.15);
      padding-top: 1.5em;
      font-size: 0.8em;
      opacity: .7;
    }

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

  #sommaire-intro {padding: 0;}

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

  /* Rythme de fond alterné entre sections */
  #sommaire-circuits { background: var(--paper); }
  #sommaire-evenements { background: var(--gris-bg); }
  .sommaire-mot-slideshow { background: var(--gris-bg); }

  /* Petit intitulé en majuscules au-dessus des titres de section */
  .eyebrow {
    display: block;
    font-family: var(--font-eyebrow);
    font-size: .70em;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-info);
    margin-bottom: .4em;
  }
  .section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.5em;
  }
    .section-head h2 { margin-bottom: .3em; }
    .section-head .rule {
      width: 48px;
      height: 2px;
      background: var(--c-page);
      margin: 1em auto 0;
    }

  /* Cartes des selections_editoriales (modeles/selection_edito.html) : au
     survol, un pan glisse depuis le bas (titre + intro + lien) — meme
     mecanique que les 6 bénéfices, cf. .benefice / .benefice-face-arriere
     plus bas (demande du 2026-08-21 : mêmes effets, pas de zoom/ombre). */
  .edito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
  .edito-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: #fff;
  }
    .edito-card a { display: block; }
    .edito-face {
      display: flex;
      flex-direction: column;
    }
    .edito-face-avant {
      transition: opacity .45s ease;
    }
      .edito-face-avant .media {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        aspect-ratio: 4 / 3;
      }
      /* adaptive_images enveloppe l'image dans <picture class="adapt-img-wrapper"
         style="position:relative">, non dimensionné par defaut (cf. .tour-card). */
      .edito-face-avant .media .adapt-img-wrapper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .edito-face-avant .media .adapt-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .edito-face-avant .content { padding: 1.2em; }
      /* 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: #fff;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.5em;
      transform: translateY(100%);
      transition: transform .9s ease;
    }
      .edito-face-arriere .title {
        color: #fff;
        font-size: 1.1em;
        font-weight: 700;
      }
      .edito-face-arriere .separateur {
        width: 36px;
        height: 2px;
        background: #fff;
        opacity: .6;
        margin: .7em auto;
      }
      /* separateur avec icone centrale, repris de .edito-face-avant .divider-icon
         (demande du 2026-08-21) */
      .edito-face-arriere .divider-icon {
        display: flex;
        align-items: center;
        gap: .8em;
        width: 70%;
        max-width: 200px;
        color: rgba(255, 255, 255, .6);
        font-family: 'icons';
        font-size: 1.2em;
        margin: .8em 0;
      }
        .edito-face-arriere .divider-icon::before,
        .edito-face-arriere .divider-icon::after {
          content: '';
          flex: 1;
          height: 1px;
          background: rgba(255, 255, 255, .6);
        }
        .edito-face-arriere .divider-icon .icon-separator { flex-shrink: 0; line-height: 1; }
      .edito-face-arriere .desc {
        font-size: .85em;
        line-height: 1.6em;
        margin-bottom: 1em;
        text-align: justify;
      }
      .edito-face-arriere .lien {
        font-size: .85em;
      }
    .edito-card:hover .edito-face-avant { opacity: 0; }
    .edito-card:hover .edito-face-arriere { transform: translateY(0); }

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

  /* "A la une du sommaire" (id_selection=2, modeles/selection_edito_a_la_une.html) :
     meme design que la section "farm" de squelette6.2/sommaire.html (classes
     .mice/.mice-alt, cf. css/layout.css lignes 476-493) — panneau plein fond
     couleur, texte a gauche / visuel a droite en flex 50/50 — mais le #TEXTE
     unique est remplace par un slideshow Slick 1 slide a la fois des photos
     de la selection (demande du 2026-08-21). --c-accent posee en inline sur
     la section (cf. modele) pilote le fond selon #ENV{couleur}. */
  .selection_edito_a_la_une {
    background: var(--c-accent);
    color: #fff;
  }
    .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 h2,
        .edito-a-la-une-info h3 { color: #fff; margin: 0 0 18px; }
        .edito-a-la-une-info .desc { color: rgba(255, 255, 255, .85); line-height: 1.75em; }

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

    @media (max-width: 900px) {
      .edito-a-la-une-wrap { flex-direction: column; }
    }

  .edito-a-la-une-slick .slide {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
    /* adaptive_images enveloppe l'image dans <picture class="adapt-img-wrapper">,
       non dimensionne par defaut (meme piege que .edito-face-avant .media). */
    .edito-a-la-une-slick .slide .adapt-img-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transition: transform .7s ease;
    }
    .edito-a-la-une-slick .slide .adapt-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .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: #fff;
      font-size: .9em;
      font-weight: 600;
    }
  .edito-a-la-une-slick .slick-dots li button:before { color: #fff; opacity: .5; }
  .edito-a-la-une-slick .slick-dots li.slick-active button:before { color: #fff; opacity: 1; }
  .edito-a-la-une-slick .slick-prev:before,
  .edito-a-la-une-slick .slick-next:before { color: #fff; }

  #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: #fff;
  }
    .benefice-face {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.5em;
    }
    .benefice-face a {color: #fff;}
    .benefice-face-avant {
      transition: opacity .45s ease;
    }
      .benefice-icone {
        font-family: 'icons';
        font-size: 2.2em;
        color: var(--brique);
        margin-bottom: .6em;
        line-height: 1;
      }
      .benefice-titre {
        max-width: 70%;
      }
      .benefice-titre-face {
        font-size: 1.2em;
        color: #fff;
        max-width: 70%;
        margin-bottom: 12px;}
      .benefice-descriptif {margin-bottom: 1em;}

    .benefice-face-arriere {
      background: var(--brique);
      color: #fff;
      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);
    }

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

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

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

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

  /* Formulaire filtre statique (sidebar) */
  .formulaire-filtre-statique {
    background: #fff;
    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-page);
    }
    .formulaire-filtre-statique .cta { padding: 1.2em 1.4em; }
    .formulaire-filtre-statique .cta .button {
      display: block;
      width: 100%;
      background: var(--c-circuit);
      color: #fff;
      border-color: var(--c-page);
      min-width: 0;
    }

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

  .tour-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: #fff;
    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;
    }
    /* adaptive_images enveloppe l'image dans <picture class="adapt-img-wrapper"
       style="position:relative">, non dimensionné par defaut : sans ces regles
       chaque carte affiche sa photo a une taille differente (cf. image_recadre
       plus haut, qui genere deja un fichier 480x360, mais le rendu ecran suit
       la taille naturelle de l'image tant que le wrapper n'est pas contraint). */
    .tour-card .media a { display: block; width: 100%; height: 100%; }
    .tour-card .media .adapt-img-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .tour-card .media .adapt-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .tour-card .duration-badge {
      position: absolute;
      top: .75em; left: .75em;
      background: rgba(32,39,47,.8);
      color: #fff;
      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(--line);
      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(--line);
      }
      .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 .themes { display: flex; gap: .6em; }
    .tour-card .icon-theme {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'icons';
      font-size: .8em;
      color: #fff;
      transition: transform .2s ease;
    }
    .tour-card .icon-theme:hover { transform: translateY(-2px) scale(1.08); }

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

  /* Événements — panneau blanc, grille sans ombre */
  .events-panel {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    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; }

  /* Blocs mot-clé (id_mot=7, 10, 78) — le slide Slick (.slide) et la
     grille 2 colonnes (.row) sont 2 divs distincts : Slick pose son
     display:inline-block en style inline directement sur l'element qu'on
     lui passe, ce qui ecraserait le display:flex de .row si les 2 classes
     etaient sur le meme div (plus de split 50/50, colonnes empilees). */
  .sommaire-mot-headline .slide .row,
  .sommaire-mot-slideshow .slide .row {
    align-items: center;
  }
    .slide-texte .title { font-size: 1.4em; display: block; margin-bottom: .5em; }
    .slide-logo img { border-radius: var(--radius-md); }

  /* Contact accueil */
  #sommaire-contact .contact-grid { align-items: start; }
  #sommaire-contact .contact-block-titre {
    font-family: var(--font-titres);
    font-size: .8em;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 1em;
  }
  #sommaire-contact .contact-infos {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
  }
    #sommaire-contact .contact-infos li { padding: 0; margin-bottom: .8em; }
    #sommaire-contact .contact-infos span { display: block; opacity: .6; font-size: .8em; }