@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-mice:var(--violet);
  --c-page:var(--c-generale);

  --ink:var(--gris);
  --titre:var(--gris-deep);
  --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); }
html.composition_mice { --c-page:var(--c-mice); }

/* Classe generique "couleur" : chaque <section> du site porte cette classe
   plus un attribut data-couleur (une des 7 couleurs thematiques) qui pilote
   --c-section pour cette section. Remplace les mecanismes ad hoc utilises
   auparavant par certaines sections (style inline --c-accent, classe
   .avant-voyage codee en dur) par un seul point d'entree reutilisable. */
.couleur[data-couleur="brique"] { --c-section:var(--brique); --c-section-hover:var(--brique_hover); }
.couleur[data-couleur="bleu"]   { --c-section:var(--bleu);   --c-section-hover:var(--bleu_hover); }
.couleur[data-couleur="violet"] { --c-section:var(--violet); --c-section-hover:var(--violet_hover); }
.couleur[data-couleur="vert"]   { --c-section:var(--vert);   --c-section-hover:var(--vert_hover); }
.couleur[data-couleur="jaune"]  { --c-section:var(--jaune);  --c-section-hover:var(--jaune_hover); background: #fff;}
.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); }

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(--titre);
    font-weight: 800;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    letter-spacing: 0.02em;
  }

  h1 {
    font-size: 2.5em;
  }

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

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

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

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

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

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

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

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

  /* Fil d'Ariane */

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

    /* colle au pied-de-page : seul le margin-bottom saute, padding et style-* restent actifs */
    .wrapper.cta {
      margin-bottom: 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;
    }

  /* Champ de recherche du header/recherche.html (fichier independant de
     header/generale.html, propre a la page recherche) : centre dans le
     header-titrebox, sous les 2 barres de menu. Pas de label (placeholder
     seul = recherche en cours). Champ en pilule fond blanc (lisible sur la
     photo de banniere), bouton compact accole - la moindre place possible
     tout en gardant des paddings confortables. */
  .header-recherche {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    margin-top: 1.2em;
  }
    .header-recherche-input {
      width: 320px;
      max-width: 60vw;
      background: #fff;
      border: none;
      border-radius: 999px;
      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;
      border: 1px solid #fff;
      border-radius: 999px;
      background: transparent;
      color: #fff;
      padding: .55em 1.2em;
      font-size: .8em;
      line-height: 1;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      white-space: nowrap;
      cursor: pointer;
      transition: background .2s ease, color .2s ease;
    }
    .header-recherche-submit:hover { background: #fff; color: var(--ink); }

  @media screen and (max-width: 736px) {
    .header-recherche-input { width: 220px; }
  }

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

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

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

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

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

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

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

  /* Article circuit : sidebar (prix/durée/difficulté + bouton) fixe au
     scrolling pendant que le texte défile. align-self:flex-start requis
     car .row est display:flex/align-items:stretch — sans lui l'aside est
     étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px
     laisse passer .bar2 (barre de menu fixe compacte après scroll ~90px). */
  #article-circuits .sidebar {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }

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

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

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

  /* "fixing option on scrolling" (demande rubrique-circuits) : les 2 blocs
     de la sidebar (filtre + mini-calendrier) restent visibles ensemble
     pendant que la colonne de résultats défile. Scopé à #rubrique-circuits
     seul — le sommaire réutilise .sidebar-slim pour son propre bloc
     circuits mais n'a pas demandé ce comportement, et sa colonne de
     résultats (slideshow Slick, hauteur fixe) n'a de toute façon rien à
     dépasser pour qu'un sticky serve à quelque chose. align-self:flex-start
     est nécessaire car le parent est display:flex — sans lui l'aside est
     étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px
     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 {
      /* pas de var(--c-page) ici : sur cette install, --c-generale/--c-circuit/
         --c-info/--c-mice sont ecrases a vide par le CSS genere par
         configurer_template_travel (css/travel-template.css, "Gestion des
         couleurs"), ce qui invalide --c-page site-wide (fond transparent,
         page courante illisible en blanc sur blanc) - a corriger cote
         generateur separement. */
      background: #000;
      border-color: #000;
      color: #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;
    }

    /* Icones thematiques (sidebar) : memes classes .themes/.icon-theme/
       .tooltip-theme qu'inclure/carte-circuit-simple.html (.tour-card),
       redeclarees ici car scopees a .tour-card la-bas. La bulle est ancree
       a gauche sur les 2 premieres pastilles (colonne la plus a gauche de
       la page, une bulle centree deborderait du conteneur). */
    .circuit-info-bloc .themes { display: flex; flex-wrap: wrap; gap: .6em; }
    .circuit-info-bloc .icon-theme {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'icons';
      font-size: .8em;
      color: #fff;
      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: #fff;
      font-family: var(--font-texte);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .circuit-info-bloc .icon-theme:hover .tooltip-theme,
    .circuit-info-bloc .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; }
    .circuit-info-bloc .icon-theme:nth-child(1) .tooltip-theme,
    .circuit-info-bloc .icon-theme:nth-child(2) .tooltip-theme {
      left: 0;
      transform: none;
    }
    .circuit-info-bloc .tooltip-titre {
      display: block;
      font-family: var(--font-titres);
      font-size: .8em;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: .5em;
    }
    .circuit-info-bloc .tooltip-theme ul {
      list-style: none;
      margin: 0;
      padding: 0 0 10px 0;
    }
    .circuit-info-bloc .tooltip-theme li {
      position: relative;
      padding-left: .9em;
      font-size: .7em;
      line-height: 1.5em;
    }
    .circuit-info-bloc .tooltip-theme li::before {
      content: "–";
      position: absolute;
      left: 0;
    }

  /* Bloc contact article circuit : formulaire Formidable "contact_circuit",
     2 fieldsets (fieldset_1 / fieldset_2, nommes ainsi cote back-office) a
     50% l'un a cote de l'autre, bouton #ENV{...} rendu par la saisies plugin
     dans <p class="boutons"> en frere de .editer-groupe (voir
     formulaires/inc-saisies-cvt.html du plugin saisies) donc deja sous les
     2 colonnes sans reglage supplementaire. */
  .circuit-contact-form h3 { margin-bottom: .6em; }
  .circuit-contact-form .editer-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
  }
  .circuit-contact-form .editer-groupe > fieldset.fieldset_1,
  .circuit-contact-form .editer-groupe > fieldset.fieldset_2 {
    flex: 1 1 calc(50% - 1em);
    min-width: 0;
  }

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

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

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

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

  #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(--c-section);
      opacity: .08;
      pointer-events: none;
    }
    .selection_edito.avant-voyage .container { position: relative; z-index: 1; }
    .selection_edito.avant-voyage .edito-card {
      border-radius: 0;
      box-shadow: none;
      border: 1px solid var(--line);
    }
      .selection_edito.avant-voyage .edito-face-avant .media { border-radius: 0; }

  /* "A la une du sommaire" (id_selection=2, modeles/selection_edito_a_la_une.html) :
     meme design que la section "farm" de squelette6.2/sommaire.html (classes
     .mice/.mice-alt, cf. css/layout.css lignes 476-493) — panneau plein fond
     couleur, texte a gauche / visuel a droite en flex 50/50 — mais le #TEXTE
     unique est remplace par un slideshow Slick 1 slide a la fois des photos
     de la selection (demande du 2026-08-21). --c-section vient de la classe
     .couleur/data-couleur posee sur la section (cf. modele), pilotee par
     #ENV{couleur}. */
  .selection_edito_a_la_une {
    background: var(--c-section);
    color: #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; }

  /* "Temoignages" (id_selection=3, modeles/selection_edito_testimonials.html) :
     fond gris clair (rythme alterne, cf. #sommaire-evenements) + grille de
     cartes blanches, guillemet decoratif en haut, citation, signature separee
     par un filet fin (nom en gras + nom du voyage en gris, ce dernier tire de
     l'objet lie via le champ url generique du back-office). */
  .selection_edito.testimonials { background: var(--gris-bg); }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }
  .testimonial-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.8em 1.6em 1.5em;
  }
    .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: #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-circuit);
    }
    .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(--c-circuit);
    border-left: 3px solid var(--c-page);
    padding: .6em 1em;
    font-size: .8em;
    font-weight: 600;
    margin-bottom: 1.2em;
    color: #fff;
  }

  .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/recherche — 3 blocs cote a cote (infos / formulaire /
     carte) sur fond sombre .wrapper.stylegris-deep. Bloc contenu resserre par
     rapport au .container plein largeur (mêmes paliers que .container.medium),
     et bloc du milieu (formulaire) legerement plus large que les 2 autres —
     voir documentation/inspirations graphiques/sommaire-2-blocs-finaux-et-pied-de-page.jpg. */
  #cta-contact .eyebrow { color: rgba(255, 255, 255, .6); }
  #cta-contact .rule { background: rgba(255, 255, 255, .3); }
  #cta-contact .contact-grid-wrap {
    max-width: 1050px;
    margin: 0 auto;
  }
  @media screen and (max-width: 1680px) {
    #cta-contact .contact-grid-wrap { max-width: 900px; }
  }
  @media screen and (max-width: 1280px) {
    #cta-contact .contact-grid-wrap { max-width: 735px; }
  }
  @media screen and (max-width: 980px) {
    #cta-contact .contact-grid-wrap { max-width: 71.25%; }
  }
  @media screen and (max-width: 840px) {
    #cta-contact .contact-grid-wrap { max-width: 100%; }
  }
  /* .row du framework est en flexbox : avec flex, la decision de passer
     a la ligne se fait sur la somme des largeurs (flex-basis) AVANT
     application du gap/shrink — 30%+40%+30%+2*28px depassait donc la
     ligne et renvoyait le 3e bloc dessous. En grid avec des unites fr,
     le gap est soustrait de l'espace disponible avant repartition
     proportionnelle : plus de risque de depassement. */
  #cta-contact .contact-grid {
    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-contact .contact-block {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md);
    padding: 2em 1.8em;
  }
  /* Labels des champs du formulaire court masques visuellement (seuls les
     placeholders restent visibles), gardes accessibles au clavier/lecteur
     d'ecran — meme technique que .offscreen (squelette6.2/css/clear.css),
     non reutilisable telle quelle ici car le label n'est pas dans nos
     squelettes (genere par saisies/_base.html a partir de la config
     Formidable du formulaire #3). */
  #cta-contact .contact-block-form .editer-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Espacement entre les champs (chaque champ = un .editer genere par
     saisies/_base.html) + apparence des champs alignee sur l'image de
     reference : fond legerement plus clair que le bloc, bordure visible
     sur fond sombre, coins arrondis. */
  #cta-contact .contact-block-form .editer { margin-bottom: 1.2em; }
  #cta-contact .contact-block-form input[type="text"],
  #cta-contact .contact-block-form input[type="email"],
  #cta-contact .contact-block-form input[type="password"],
  #cta-contact .contact-block-form textarea {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-md);
    color: #fff;
  }
  #cta-contact .contact-block-form textarea { min-height: 110px; }
  #cta-contact .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 {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
  }
    #cta-contact .contact-infos li { padding: 0; margin-bottom: 1.4em; }
    #cta-contact .contact-infos strong {
      display: block;
      margin-bottom: .3em;
      font-family: var(--font-titres);
      font-weight: 700;
      text-transform: none;
    }
    #cta-contact .contact-infos span { display: block; opacity: .6; font-size: .8em; }
  #cta-contact .contact-map {
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  #cta-contact .contact-map-legende {
    opacity: .6;
    font-size: .85em;
    margin: .8em 0 0;
  }

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

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

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

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

  /* Autres articles / evenements : liste generique de resultats */
  .generic-results {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 2.5em;
  }
    .result-row {
      background: #fff;
      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(--paper); 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 .rbody { flex: 1; display: flex; flex-direction: column; gap: .25em; }
    .result-row .rtitle { font-family: var(--font-titres); font-size: 1em; font-weight: 700; color: var(--ink); }
    .result-row .rexcerpt { font-size: .85em; color: var(--ink); opacity: .7; line-height: 1.6; }
    .result-row:hover .rtitle { color: var(--c-page); }

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

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

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

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

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

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

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

  /* Sources/Documents : bloc distinct du .documents-joints des circuits
     (demande explicite) - cadre teinte + bordure d'accent, icone dediee,
     pour signaler des sources documentaires plutot que de simples pieces
     jointes. */
  .documents-sources {
    margin-top: 3em;
    padding: 1.6em 1.8em;
    background: var(--gris-bg);
    border-left: 4px solid var(--c-page);
    border-radius: var(--radius-md);
  }
    .documents-sources h3 {
      font-family: var(--font-titres);
      margin-top: 0;
      margin-bottom: 1em;
    }
    .documents-sources ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .8em;
    }
    .source-item {
      display: flex;
      align-items: center;
      gap: 1em;
      padding: 1em 1.2em;
      background: #fff;
      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: #fff;
        background: var(--c-page);
        padding: .5em 1.1em;
        border-radius: 999px;
        white-space: nowrap;
      }
      .source-telecharger:hover { background: var(--brique); }

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

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

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

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

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

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

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

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

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

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

  /* Page rubrique par defaut (content/rubrique.html) : sous-rubriques
     directes puis articles rattaches, meme carte image+contenu partagee
     entre les 2 sections - voir dev-notes-template-travel.md, Phase D. */
  #rubrique-sous-rubriques { background: var(--paper); }
  #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: #fff;
      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); }

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

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

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