@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: 0.1em;
  }

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

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

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

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

/* ==========================================================
   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 0 4.5em 0;}

  #sommaire-benefices,
  #sommaire-circuits,
  #sommaire-evenements,
  .sommaire-mot-headline,
  .sommaire-mot-slideshow,
  .selection_edito {
    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),
     inspirées de .avant-voyage-card (squelette6.2) mais avec le langage
     visuel du site (carré arrondi + ombre, cf. .tour-card). */
  .edito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
  .edito-card {
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
  }
    .edito-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .edito-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 (cf. .tour-card). */
    .edito-card .media .adapt-img-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .edito-card .media .adapt-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .edito-card .content { padding: 1.2em; }
    .edito-card .title {
      display: block;
      font-size: 1.1em;
      font-weight: 700;
      margin-bottom: .4em;
    }
    .edito-card .desc {
      font-size: .85em;
      color: var(--gris-deep);
      line-height: 1.7em;
    }

  #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 {
        font-size: .95em;
        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);
  }

  /* Bloc circuits (sidebar slim + slideshow) */
  #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; }

  /* 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-page);
      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;
      font-size: 1.1em;
      font-weight: 700;
      margin-bottom: .4em;
      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) */
  .mot-headline-slideshow .slide,
  .sommaire-mot-slideshow .slide {
    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; }