/* ==========================================================================
   Les Hautes Belles — base.css
   Feuille de base du site : jetons de design, reset, typographie, conteneurs,
   grilles, utilitaires (sous-ensemble Bootstrap 5 + utilitaires du thème),
   boutons, formulaires, pagination, fil d'Ariane et composants partagés.
   Code original, sans dépendance. Les valeurs proviennent des mesures du
   design de référence (voir spec/tokens-layout.md).

   SOMMAIRE
     1.  Jetons (:root)
     2.  Reset / normalisation
     3.  Transitions globales
     4.  Typographie (éléments, .texte, aides texte)
     5.  Conteneurs (.wrapper, .small-wrap, #main-wrap, largeurs)
     6.  Grilles ([class*="grid"], .grid-*)
     7.  Utilitaires façon Bootstrap 5 (sous-ensemble, !important)
     8.  Utilitaires du thème (espacements, marges négatives)
     9.  Fonds et aides diverses
    10.  Boutons ([class^="btn"] et variantes)
    11.  Formulaires (.field, cases à cocher, select, messages)
    12.  Pagination, fil d'Ariane, select personnalisé
    13.  Barres de défilement
    14.  Composants partagés (bannière, slider, hoverimg, plus)
    15.  Accessibilité et mouvement réduit

   Points de rupture (max-width) : 1200, 1024, 992, 768, 600, 420
   Points de rupture (min-width) : 576 (sm), 600, 768 (md), 992 (lg), 1025, 1200 (xl)
   Frontière tablette/desktop : mobile-tablette ≤ 1024px, desktop ≥ 1025px
   (aucune largeur ne cumule les deux jeux de règles).
   ========================================================================== */


/* ==========================================================================
   1. JETONS
   ========================================================================== */
:root {
  /* Polices */
  --font-main: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Graisses. La référence déclare 250 (titres) et 340 (texte) mais ne charge
     que les faces statiques 300 / 400 / 500 / 700 : à l'écran, titres et texte
     courant sont rendus avec la face Light 300. On reproduit ce RENDU avec la
     fonte variable en déclarant 300 directement. */
  --fw-title: 300;    /* h1, h2, .title, .main-title, .title-custom */
  --fw-body: 300;     /* texte courant, paragraphes, liens du menu */
  --fw-regular: 400;  /* h3, .sub-title, labels, champs, liens du menu */
  --fw-medium: 500;   /* liens E-SHOP / RÉSERVER de l'en-tête */
  --fw-bold: 700;     /* boutons, strong, langue courante */

  /* Palette Brion : papier ivoire, tuffeau et encre chaude.
     --c-white reste réservé aux textes et icônes clairs sur les photos. */
  color-scheme: light;
  --c-paper: #F3F1EB;
  --c-surface: #FAF8F3;
  --c-stone: #E9E3D8;
  --c-text: #50483F;
  --c-dark: #302A25;
  --c-ink-rgb: 48, 42, 37;
  --c-night: #2E2923;
  --c-beige: #F3F1EB;
  --c-beige-2: #E9E3D8;
  --c-green: #E7E3D8;
  --c-blue: var(--c-stone); /* Compatibilité avec l'ancienne classe .bg__blue. */
  --c-white: #fff;
  --c-header-light: #fff;
  --c-input-text: #302A25;
  --c-bs-border: #D9D1C3;
  --c-placeholder: #82796C;
  --c-secondary: #6A6055;
  --c-error: #A1352A;
  --c-error-form: #A1352A;

  /* Durées */
  --t-fast: .2s;              /* barres du burger */
  --t-hdr: 200ms;             /* fond / ombre de l'en-tête */
  --t-base: .4s;              /* tout le reste */
  --t-img: 600ms;             /* zoom des images .hoverimg */
  --ease: ease;

  /* Dimensions */
  --wrap-max: 1220px;
  --wrap-w: 90vw;
  --hdr-h: 92px;              /* 70px ≤768, 60px ≤600 : voir header.css */
  --gutter: 24px;             /* gouttière .row : marge -12px, colonnes +12px */
  --fs-body: 14px;
  --lh-body: 21px;
}


/* ==========================================================================
   2. RESET / NORMALISATION
   Reproduit le résultat effectif du couple reboot Bootstrap + reset du thème.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Verrou du défilement (menu ouvert, modale) — pas de position:fixed sur body */
body.overflow {
  overflow: hidden;
}

/* body.sticky : simple crochet pour header.css, aucun style ici */

main, article, aside, figure, figcaption, header, hgroup, nav, section, details, summary {
  display: block;
}
/* (footer : règle d'élément dans footer.css, qui en est propriétaire) */

/* Enveloppe principale : sur tablette et mobile (≤1024px) elle coupe les
   débordements horizontaux (slider, photo du bloc beige, bandes en -25px) ;
   au-dessus elle reste visible comme dans la référence à 1440 — c'est alors
   le body (overflow-x hidden) qui masque les 7px de la section 6. */
@media (max-width: 1024px) {
  #main-wrap {
    overflow-x: hidden;
  }
}

/* main.site-main : bloc statique, sans z-index (les feuilles décoratives en
   z-index -1 doivent rester dans le contexte d'empilement racine) */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

input, button, textarea, select, optgroup {
  outline: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button {
  border: none;
  border-radius: 0;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"] {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* Listes : la règle d'élément (padding 2rem, marge 1rem) l'emporte sur le
   reset `*` ; seules les puces sont retirées. */
ol, ul {
  padding-left: 2rem;
  margin: 0 0 1rem;
}

ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
}

ol, ul, ol li, ul li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: .25;
  height: 1px;
}

blockquote, figure {
  margin: 0 0 1rem;
}

sub, sup {
  position: relative;
  font-size: .75em;
  line-height: 0;
  vertical-align: baseline;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

a {
  color: var(--c-text);
  text-decoration: none;
}

a:hover {
  color: var(--c-text);
  text-decoration: none;
}

b, strong {
  font-weight: var(--fw-bold);
}

address {
  font-style: normal;
}


/* ==========================================================================
   3. TRANSITIONS GLOBALES
   La référence n'anime PAS `*` lui-même : seuls les pseudo-éléments (traits
   des boutons, chevrons, coche) et une liste précise d'éléments ont une
   transition. Animer `*` casserait le moteur du slider, la hauteur du menu
   et chaque changement de mise en page au redimensionnement.
   ========================================================================== */
*::before,
*::after {
  transition: all var(--t-base) var(--ease);
}

a,
button {
  transition: all var(--t-base) var(--ease);
}

.field .checkbox .checkmark,
.checkbox .checkmark {
  transition: all var(--t-base) var(--ease);
}

.hoverimg img {
  transition: all var(--ease) var(--t-img);
}

[class^="btn"].icon img,
.actionbtn a.icon img {
  transition: all var(--t-base) var(--ease);
}


/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

/* 4.1 Éléments ----------------------------------------------------------- */
h1, .main-title {
  font-weight: var(--fw-title);
  font-size: 24px;
  line-height: 1.4;              /* 33.6px */
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 24px;
  color: var(--c-text);
}

h2, .title,
.histoire h3, .histoire h4 {
  font-weight: var(--fw-title);
  font-size: 24px;
  line-height: 1.5;              /* 36px */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
  color: var(--c-text);
}

h3, .sub-title {
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;              /* 25.6px */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 22px;
  color: var(--c-text);
}

/* Texte d'attente : marque un contenu que le client n'a pas encore fourni
   (« À compléter »). Italique et gris volontairement plus clair que le texte
   courant (#575756) tout en restant lisible : contraste 4,5:1 sur blanc comme
   sur beige (WCAG AA). Le jeton --c-placeholder (#C4C4C4) sert aux options
   désactivées : trop pâle pour du texte courant.
   Règle partagée : le pied de page l'utilise sur les onze pages. */
.placeholder-text {
  font-style: italic;
  color: var(--c-secondary);
}

/* Libellé de section : pas d'interlettrage propre (un h2.title-custom garde
   le 1px du h2, un div n'en a pas — comme la référence) */
.title-custom {
  font-weight: var(--fw-title);
  font-size: 18px;
  line-height: 1.6;              /* 28.8px */
  text-transform: uppercase;
  margin-bottom: 16px;
}

h4 {
  font-weight: var(--fw-regular);
  font-size: calc(1.275rem + .3vw);
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--c-text);
}

@media (min-width: 1200px) {
  h4 { font-size: 1.5rem; }
}

h5 {
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--c-text);
}

h6 {
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--c-text);
}

/* `small` isolé : 30px (particularité du thème) ; dans un titre : 16px */
small {
  font-size: 30px;
}

@media (max-width: 768px) {
  small { font-size: 20px; }
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.title small, .main-title small, .sub-title small {
  font-size: 16px;
}

p {
  margin: 0 0 20px;
}

label {
  display: block;
  font: var(--fw-regular) 14px/24px var(--font-main);
  margin-bottom: 8px;
}

/* 4.2 Bloc de texte riche .texte ----------------------------------------- */
.texte :last-child {
  margin-bottom: 0;
}

.texte ul {
  margin: 0 0 32px;
  padding: 0 0 0 15px;
}

.texte ul li {
  position: relative;
  list-style: none;
  padding-left: 15px;
}

.texte ul li:not(:last-child) {
  margin-bottom: 9px;
}

.texte ul li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--c-dark);
}

.texte blockquote {
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: 24px;
  line-height: 32px;
}

.texte-mh p {
  min-height: 90px;
}

/* Variante sans puces (page contact) */
.custom-text h3 {
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 32px;
  text-transform: none;
}

.custom-text ul {
  list-style: none;
  padding: 0;
}

.custom-text ul li {
  padding-left: 0;
}

.custom-text ul li:not(:last-child) {
  margin-bottom: 10px;
}

.custom-text ul li::before {
  display: none;
}

/* Titres successifs espacés */
.custom-titlemg h2:not(:first-of-type) {
  margin-top: 80px;
}

@media (max-width: 1200px) {
  .custom-titlemg h2:not(:first-of-type) { margin-top: 40px; }
}

.custom-pwrap {
  margin-bottom: 16px;
}

.custom-pwrap p {
  margin-bottom: 8px;
}

/* 4.3 Aides texte -------------------------------------------------------- */
.f-24 {
  font-size: 24px !important;
  line-height: 32px;
}

.f-17 {
  font-size: 17px;
  line-height: 32px;
}

.small-text  { font-size: 14px; }
.xsmall-text { font-size: 12px; }
.fbold       { font-weight: var(--fw-bold); }
.text-underline { text-decoration: underline; }
.red         { color: var(--c-error); }

/* Paragraphes sur deux colonnes */
.text-col-2 {
  column-count: 2;
  column-gap: 40px;
}

@media (max-width: 768px) {
  .text-col-2 { column-count: auto; }
}

/* Le <br> d'un titre ne casse la ligne que sur mobile */
@media (min-width: 768px) {
  .linebreak-m br,
  .linebreak-m h3 br {
    display: none;
  }
}

/* Contenu clair (sur photo / vidéo) : tout en blanc sauf les boutons */
.light-content *:not([class^="btn"]) {
  color: var(--c-white) !important;
}

@media (max-width: 600px) {
  .light-content.textblue-m *:not([class^="btn"]) {
    color: var(--c-dark) !important;
  }
}

.light-content .text-quote::before {
  background-color: var(--c-white);
}

.light-content .btn__bottomborder {
  filter: brightness(0) invert(1) !important;
}


/* ==========================================================================
   5. CONTENEURS
   ========================================================================== */

/* Conteneur principal : 1220px max, 90vw, centré. Le padding vertical de 1px
   est réel (garde-fou contre la fusion des marges : il entre dans les hauteurs
   mesurées, ex. en-tête 92 = 90 + 2). Ne pas le retirer. */
.wrapper {
  max-width: var(--wrap-max);
  width: var(--wrap-w);
  margin: 0 auto;
  padding: 1px 0;
  position: relative;
}

.wrapper.big {
  width: auto;
  max-width: 1440px;
}

@media (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Colonne de texte étroite (non centrée par elle-même : ajouter .mx-auto) */
.small-wrap {
  max-width: 600px;
  width: 100%;
}

.small-wrap.xs  { max-width: 488px; }
.small-wrap.sxs { max-width: 385px; }

.mw-lg-40 {
  max-width: 40%;
}

@media (max-width: 1024px) {
  .mw-lg-40 { max-width: none; }
}

.mw-100 {
  max-width: 100% !important;
}

@media (min-width: 1025px) {
  .mw-md-80 { max-width: 80%; }
}

/* Bloc qui déborde volontairement du conteneur (duo de photos) */
.w110 {
  width: 110%;
}

@media (max-width: 600px) {
  .w110 { width: calc(100% + 25px); }
}

.w-40 {
  width: 40%;
}

@media (min-width: 1200px) {
  .w-lg-50 { width: 50%; }
}

.h-380 {
  height: 380px;
}

.z1 {
  z-index: 1;
}

.vh-100-c {
  min-height: calc(100vh - 90px);
}

.vh-90-c.content-banner {
  min-height: calc(100vh - 90px) !important;
}

@media (max-width: 600px) {
  .vh-90-c.content-banner { min-height: calc(100vh - 60px) !important; }
}

/* Colonne flex répartie haut/bas */
.sb-v {
  flex-flow: column wrap;
  justify-content: space-between;
}

@media (min-width: 600px) {
  .position-xs-absolute { position: absolute !important; }
}


/* ==========================================================================
   6. GRILLES
   Sélecteur d'attribut : toute classe contenant « grid » passe en display:grid
   (d-grid, grid-50, grid-a40, grid-auto, gridsidebar…). Pas d'écart par défaut :
   il vient des utilitaires .gap-N.
   ========================================================================== */
[class*="grid"] {
  display: grid;
}

.grid-50 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
  .grid-50 { grid-template-columns: auto; }
}

.grid-33 { grid-template-columns: 1fr 1fr 1fr; }
.grid-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.grid__icon {
  grid-template-columns: 82px auto;
  align-items: center;
}

/* Texte + média : colonne média = 40 % du conteneur (488px sur 1220) */
.grid-a40 {
  grid-template-columns: auto 40%;
}

.grid-a40.texte-intro {
  grid-template-columns: auto 37%;
}

.grid-a40rv {
  grid-template-columns: 40% auto;
}

@media (max-width: 1200px) {
  .grid-a40,
  .grid-a40.texte-intro,
  .grid-a40rv {
    grid-template-columns: auto;
  }
}

/* Image à sa taille naturelle + texte prenant le reste */
.grid-auto {
  grid-template-columns: auto 1fr;
}

.gap-40 { gap: 40px; }

@media (max-width: 768px) {
  .gap-40 { gap: 1.5rem !important; }
}

.gap-10   { gap: 10px; }
.gap-20   { gap: 20px; }
.gap-30   { gap: 30px; }
.gap-y-55 { gap: 55px 30px; }

.gridsidebar {
  grid-template-columns: auto 488px;
}

@media (max-width: 1200px) {
  .gridsidebar { grid-template-columns: auto 400px; }
}

@media (max-width: 1024px) {
  .gridsidebar {
    grid-template-columns: auto;
    border-right: 1px solid var(--c-dark);
  }
}

@media (max-width: 768px) {
  .gridsidebar { border-right: 0; }
}


/* ==========================================================================
   7. UTILITAIRES FAÇON BOOTSTRAP 5 (sous-ensemble utilisé par les pages)
   Sémantique Bootstrap : échelle 0 / .25rem / .5rem / 1rem / 1.5rem / 3rem,
   infixes sm ≥576, md ≥768, lg ≥992, xl ≥1200, tout en !important.
   L'ordre (base → sm → md → lg → xl) est ce qui fait gagner l'infixe.
   ========================================================================== */

/* 7.1 Affichage ---------------------------------------------------------- */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-flex         { display: flex !important; }
.d-grid         { display: grid !important; }

@media (min-width: 576px) {
  .d-sm-none  { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex  { display: flex !important; }
}

@media (min-width: 768px) {
  .d-md-none  { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex !important; }
  .d-md-grid  { display: grid !important; }
}

@media (min-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex  { display: flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none  { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex  { display: flex !important; }
}

/* 7.2 Flexbox ------------------------------------------------------------ */
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-column   { flex-direction: column !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }

.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.align-items-end     { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }

.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }

@media (min-width: 768px) {
  .justify-content-md-start   { justify-content: flex-start !important; }
  .justify-content-md-center  { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-end     { justify-content: flex-end !important; }
  .order-md-1 { order: 1 !important; }
  .order-md-2 { order: 2 !important; }
}

@media (min-width: 992px) {
  .order-lg-1 { order: 1 !important; }
  .order-lg-2 { order: 2 !important; }
}

@media (min-width: 1200px) {
  .order-xl-1 { order: 1 !important; }
  .order-xl-2 { order: 2 !important; }
}

/* 7.3 Écarts (gap) ------------------------------------------------------- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

@media (min-width: 768px) {
  .gap-md-0 { gap: 0 !important; }
}

@media (min-width: 992px) {
  .gap-lg-0 { gap: 0 !important; }
}

/* 7.4 Grille de colonnes ------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-right: -12px;
  margin-left: -12px;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-top: 0;
}

/* Les .col-* fonctionnent aussi hors d'une .row (largeur en % sans padding),
   comme dans Bootstrap : ne pas les conditionner à `.row >`. */
.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* 7.5 Marges ------------------------------------------------------------- */
.m-0    { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-0   { margin-top: 0 !important; margin-bottom: 0 !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-auto { margin-right: auto !important; }

@media (min-width: 576px) {
  .mb-sm-0 { margin-bottom: 0 !important; }
  .mt-sm-0 { margin-top: 0 !important; }
}

@media (min-width: 768px) {
  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-4 { margin-top: 1.5rem !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .mb-md-4 { margin-bottom: 1.5rem !important; }
  .mb-md-5 { margin-bottom: 3rem !important; }
  .ms-md-0 { margin-left: 0 !important; }
  .ms-md-auto { margin-left: auto !important; }
  .me-md-auto { margin-right: auto !important; }
}

@media (min-width: 992px) {
  .mt-lg-0 { margin-top: 0 !important; }
  .mb-lg-0 { margin-bottom: 0 !important; }
}

@media (min-width: 1200px) {
  .mt-xl-0 { margin-top: 0 !important; }
  .mb-xl-0 { margin-bottom: 0 !important; }
}

/* 7.6 Marges intérieures ------------------------------------------------- */
.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.px-2 { padding-right: .5rem !important; padding-left: .5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

@media (min-width: 576px) {
  .p-sm-4  { padding: 1.5rem !important; }
  .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; }
  .pe-sm-5 { padding-right: 3rem !important; }
}

@media (min-width: 768px) {
  .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; }
  .px-md-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-md-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .pt-md-0 { padding-top: 0 !important; }
  .pt-md-4 { padding-top: 1.5rem !important; }
  .pt-md-5 { padding-top: 3rem !important; }
  .pb-md-0 { padding-bottom: 0 !important; }
  .pb-md-4 { padding-bottom: 1.5rem !important; }
  .pb-md-5 { padding-bottom: 3rem !important; }
  .ps-md-0 { padding-left: 0 !important; }
  .pe-md-0 { padding-right: 0 !important; }
  .pe-md-5 { padding-right: 3rem !important; }
}

@media (min-width: 992px) {
  .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; }
  .px-lg-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .pe-lg-5 { padding-right: 3rem !important; }
}

@media (min-width: 1200px) {
  .px-xl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .pt-xl-0 { padding-top: 0 !important; }
  .pb-xl-0 { padding-bottom: 0 !important; }
}

/* 7.7 Texte -------------------------------------------------------------- */
.text-start     { text-align: left !important; }
.text-center    { text-align: center !important; }
.text-end       { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-nowrap    { white-space: nowrap !important; }
.fw-bold        { font-weight: var(--fw-bold) !important; }
.fw-normal      { font-weight: var(--fw-regular) !important; }
.fst-italic     { font-style: italic !important; }

@media (min-width: 768px) {
  .text-md-start  { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-end    { text-align: right !important; }
}

@media (min-width: 992px) {
  .text-lg-start { text-align: left !important; }
  .text-lg-end   { text-align: right !important; }
}

/* 7.8 Dimensions, position, bordures, fonds ------------------------------ */
.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }
.w-50   { width: 50% !important; }
.h-100  { height: 100% !important; }
.h-auto { height: auto !important; }
.vh-100 { height: 100vh !important; }
.min-vh-100 { min-height: 100vh !important; }

.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-sticky   { position: sticky !important; }

.overflow-hidden { overflow: hidden !important; }

/* Séparateur gris clair (visible sur mobile entre les colonnes du footer) ;
   .border-md-bottom-0 (thème) doit suivre pour l'annuler dès 768px. */
.border-bottom { border-bottom: 1px solid var(--c-bs-border) !important; }
.border-top    { border-top: 1px solid var(--c-bs-border) !important; }
.border-0      { border: 0 !important; }

@media (min-width: 768px) {
  .border-md-bottom-0 { border-bottom: none !important; }
}

.bg-white { background-color: var(--c-surface) !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Classes présentes dans le balisage SANS règle dans la référence (crochets
   de structure) : b-right, b-bottom, b-top, b-left, b-bottom-light,
   bordertitle, b-img, b-bottom-after, b-right-after, with-title-custom,
   mediatext, mediatext__text, mediatext__media, slide__item, def-r, rm-mob,
   pleft, mr-auto, ml-0. Ne rien leur dessiner. */


/* ==========================================================================
   8. UTILITAIRES DU THÈME
   Les infixes ne suivent pas Bootstrap : -md- = desktop ≥1025 (parfois ≥1200
   pour pl-md-105 / pl-md-120), -sm- = ≥768. Chaque classe est suivie de ses
   surcharges (max-width : la dernière règle gagne).
   ========================================================================== */

/* 8.1 Paddings verticaux ------------------------------------------------- */
.pt-160 { padding-top: 160px; }
.pb-160 { padding-bottom: 160px; }
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pb-105 { padding-bottom: 105px; }
.pt-80  { padding-top: 80px; }
.pb-80  { padding-bottom: 80px; }
.pt-60  { padding-top: 60px; }
.pb-60  { padding-bottom: 60px; }

@media (max-width: 1024px) {
  .pt-160, .pt-120, .pt-80 { padding-top: 50px; }
  .pb-160, .pb-120, .pb-105, .pb-80 { padding-bottom: 50px; }
}

/* -md- du thème = desktop (≥1025px, borne exclusive avec les règles ≤1024) */
@media (min-width: 1025px) {
  .pt-md-160 { padding-top: 160px; }
  .pb-md-160 { padding-bottom: 160px; }
}

@media (min-width: 768px) {
  .pt-sm-160 { padding-top: 160px; }
}

.py-30  { padding-top: 30px;  padding-bottom: 30px; }
.py-60  { padding-top: 60px;  padding-bottom: 60px; }
.py-80  { padding-top: 80px;  padding-bottom: 80px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.py-120 { padding-top: 120px; padding-bottom: 120px; }
.py-130 { padding-top: 130px; padding-bottom: 130px; }
.py-150 { padding-top: 150px; padding-bottom: 150px; }
.py-100-30 { padding-top: 100px; padding-bottom: 30px; }
.py-100-60 { padding-top: 100px; padding-bottom: 60px; }
.py-150-60 { padding-top: 150px; padding-bottom: 60px; }

@media (max-width: 1024px) {
  .py-60, .py-80, .py-100, .py-150 { padding-top: 50px; padding-bottom: 50px; }
  .py-120 { padding-top: 65px; padding-bottom: 65px; }
  .py-130 { padding-top: 60px; padding-bottom: 60px; }
}

/* 8.2 Paddings horizontaux ----------------------------------------------- */
.px-105 { padding-left: 105px; padding-right: 105px; }

@media (max-width: 1200px) {
  .px-105 { padding-left: 40px; padding-right: 40px; }
}

.pl-105 { padding-left: 105px; }
.pl-120 { padding-left: 120px; }
.pr-105 { padding-right: 105px; }
.pr-120 { padding-right: 120px; }

@media (max-width: 1024px) {
  .pl-105, .pl-120 { padding-left: 40px; }
  .pr-105, .pr-120 { padding-right: 40px; }
}

@media (min-width: 1025px) {
  .px-md-105 { padding-left: 105px; padding-right: 105px; }
  .pr-md-105 { padding-right: 105px; }
  .pr-md-120 { padding-right: 120px; }
}

@media (min-width: 1200px) {
  .pl-md-105 { padding-left: 105px; }
  .pl-md-120 { padding-left: 120px; }
}

@media (min-width: 768px) {
  .pr-sm-120 { padding-right: 120px; }
}

.pr-72 { padding-right: 72px; }

@media (max-width: 1200px) {
  .pr-72 { padding-right: 40px; }
}

@media (max-width: 768px) {
  .pr-72 { padding-right: 0; }
  .pl-mob { padding-left: 20px; }
  .pr-mob { padding-right: 20px; }
}

.px-80 { padding-left: 80px; padding-right: 80px; }
.px-90 { padding-left: 90px; padding-right: 90px; }

@media (max-width: 1024px) {
  .px-80, .px-90 { padding-left: 0; padding-right: 0; }
}

/* 8.3 Marges ------------------------------------------------------------- */
.mt-120 { margin-top: 120px; }
.mt-100 { margin-top: 100px; }
.mt-80  { margin-top: 80px; }
.mt-60  { margin-top: 60px; }

@media (max-width: 1024px) {
  .mt-120, .mt-80 { margin-top: 50px; }
  .mt-100, .mt-60 { margin-top: 30px; }
}

.mb-160 { margin-bottom: 160px; }
.mb-130 { margin-bottom: 130px; }
.mb-120 { margin-bottom: 120px; }
.mb-100 { margin-bottom: 100px; }
.mb-80  { margin-bottom: 80px !important; }
.mb-60  { margin-bottom: 60px; }

@media (max-width: 1024px) {
  .mb-160, .mb-120 { margin-bottom: 80px; }
  .mb-130 { margin-bottom: 60px; }
  .mb-100 { margin-bottom: 50px; }
  .mb-80  { margin-bottom: 50px !important; }
  .mb-60  { margin-bottom: 40px; }
}

@media (min-width: 768px) {
  .mb-sm-120 { margin-bottom: 120px; }
}

.my-100 { margin-top: 100px; margin-bottom: 100px; }
.my-70  { margin-top: 70px;  margin-bottom: 70px; }

@media (max-width: 1024px) {
  .my-100, .my-70 { margin-top: 50px; margin-bottom: 50px; }
}

/* Marges négatives (chevauchement titre / bloc suivant) */
.mt-n160 { margin-top: -160px; }
.mt-n80  { margin-top: -56px; }   /* sic : la référence vaut -56px malgré son nom */

@media (max-width: 1200px) {
  .mt-n160, .mt-n80 { margin-top: 0; }
}

.mt-n30 { margin-top: -30px; }
.mt-n20 { margin-top: -20px; }
.mt-n10 { margin-top: -10px; }
.mt-n1  { margin-top: -1px; }
.nt-200 { margin-top: -200px; }

@media (max-width: 1024px) {
  .nt-200 { margin-top: 0; }
}

/* .mt-n80c n'existe que combiné à .bg__light1 (sans effet sur .bg__beige1,
   comme dans la référence) */
.bg__light1.mt-n80c { margin-top: -80px; }

@media (max-width: 1024px) {
  .bg__light1.mt-n80c { padding-top: 80px; }
}

@media (max-width: 768px) {
  .mx-n20-mob {
    margin-left: -20px;
    margin-right: -20px;
    width: auto !important;
  }
}

@media (max-width: 600px) {
  .ml-n20 { margin-left: -20px; }
  .ml-n25 { margin-left: -25px; }
  .no-mr-mob { position: relative; width: calc(100% + 20px); }
}

.ms-100 { margin-left: 100px; }
.mcx-90 { margin-left: 90px; margin-right: 90px; }

@media (min-width: 1200px) {
  .ms-90 { margin-left: 90px; }
}

.ml-auto { margin-left: auto; }

@media (min-width: 600px) {
  .d-xs-block { display: block !important; }
  .d-xs-none  { display: none !important; }
  .w-xs-auto  { width: auto !important; }
}


/* ==========================================================================
   9. FONDS ET AIDES DIVERSES
   ========================================================================== */
.bg__white      { background-color: var(--c-surface); }
.bg__dark       { background-color: var(--c-dark); }
.bg__light,
.bg__beige      { background-color: var(--c-beige-2); }
.bg__light1,
.bg__greenlight { background-color: var(--c-green); }
.bg__beige1     { background-color: var(--c-beige); }
.bg__blue       { background-color: var(--c-blue); }

.border-primarycolor { border: 1px solid var(--c-dark); }

@media (min-width: 1200px) {
  .b-lg-right { border-right: 1px solid var(--c-dark); }
}

.noborder { border: none; }

/* Petit trait vertical blanc */
.border-v {
  width: 3px;
  height: 36px;
  margin: 0 auto;
  background-color: var(--c-white);
}

/* Filet de remplacement d'un <hr> */
.sephr {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--c-dark);
  border: none;
  opacity: 1;
}

/* Filet pleine largeur à 80px du bas (parent en position:relative) */
.b-after::after {
  content: "";
  display: block;
  position: absolute;
  left: -10000px;
  right: -10000px;
  bottom: 80px;
  height: 1px;
  background-color: var(--c-dark);
}

/* Panneau beige derrière une image (bord gauche du viewport → bord droit de
   l'image), l'image centrée verticalement : 60px de panneau au-dessus et
   au-dessous (25px sous 1200px). */
.shape-img {
  position: relative;
  margin-top: 60px;
}

.shape-img img {
  position: relative;
  z-index: 1;
}

.shape-img::after {
  content: "";
  position: absolute;
  top: -60px;
  left: -10000px;
  right: 0;
  bottom: -60px;
  background-color: var(--c-beige);
}

@media (max-width: 1200px) {
  .shape-img {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .shape-img::after {
    top: -25px;
    bottom: -25px;
  }

  .shape-img::before {
    content: "";
    position: absolute;
    left: -1000px;
    right: -1000px;
    bottom: -25px;
    height: 1px;
    background-color: var(--c-dark);
    z-index: 2;
  }
}

.media-img-custom img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.photo img {
  max-width: 100%;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-cover.img-border-white {
  width: calc(100% - 20px) !important;
}

/* Alignements d'images hérités de l'éditeur */
img.alignright, a img.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

img.alignleft, a img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

img.aligncenter, a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.not-allowed {
  cursor: not-allowed;
  opacity: .5;
}

.close, .delete {
  cursor: pointer;
}

/* Marqueur « + » (frise chronologique) : dessiné en CSS, 32×32, traits 4px */
.plus {
  display: block;
  width: 32px;
  height: 32px;
  background-image:
    linear-gradient(var(--c-text), var(--c-text)),
    linear-gradient(var(--c-text), var(--c-text));
  background-size: 100% 4px, 4px 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Zoom d'image au survol de la carte parente */
.hoverimg {
  overflow: hidden;
}

.event__slide--item:hover .hoverimg img,
.activite__item:hover .hoverimg img {
  transform: scale(1.2);
}

.list__item:hover .hoverimg img {
  transform: scale(1.1);
}


/* ==========================================================================
   10. BOUTONS
   Le sélecteur de base est le préfixe d'attribut [class^="btn"] : il ne
   s'applique que si l'attribut class COMMENCE par « btn » (mettre btn__… en
   premier sur les vrais boutons). Le bouton d'envoi d'un .field est traité
   à part (§11.6) et n'a jamais cette typographie.
   ========================================================================== */
[class^="btn"] {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
  font: var(--fw-bold) 10px/25px var(--font-main);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
}

/* Soulignement animé : 1px, largeur 0 → 100 % au survol (transition .4s des
   pseudo-éléments) */
[class^="btn"]::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: transparent;
}

[class^="btn"]:hover::after {
  width: 100%;
}

[class^="btn"].icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 15px auto;
  gap: 9px;
}

[class^="btn"].icon:hover img {
  filter: brightness(0) invert(1);
}

[class^="btn"].disabled,
[class^="btn"]:disabled {
  cursor: not-allowed;
  opacity: .3;
}

/* Bouton principal : texte seul, soulignement de la couleur du texte */
.btn__main {
  background: none;
  color: var(--c-text);
}

.btn__main::after {
  background-color: var(--c-text);
}

/* Variante sur fond sombre : seul le trait passe en blanc */
.btn__main.light::after {
  background-color: var(--c-white);
}

/* Bouton plein */
.btn__second {
  border: 1px solid var(--c-text);
  background-color: var(--c-text);
  color: var(--c-white);
}

.btn__second:hover {
  color: var(--c-text);
  background-color: transparent;
  border-color: var(--c-text);
}

/* Bouton d'envoi plein (boutique, connexion) */
input.btn__second,
.connexion_form input[type="submit"] {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  font: var(--fw-regular) 16px/48px var(--font-main);
  cursor: pointer;
  border: 1px solid transparent;
  border-color: var(--c-dark) !important;
  background-color: var(--c-dark) !important;
  color: var(--c-white) !important;
}

input.btn__second:hover,
.connexion_form input[type="submit"]:hover {
  color: var(--c-dark) !important;
  background-color: transparent !important;
}

/* Bouton blanc */
.btn__white {
  background-color: var(--c-white);
  border: 1px solid var(--c-white);
  color: var(--c-text);
}

.btn__white:hover {
  background-color: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}

.btn__white.with_border {
  border-color: var(--c-text);
}

.btn__white.with_border:hover {
  background-color: var(--c-text);
  color: var(--c-white);
  border-color: var(--c-text);
}

/* Bouton lecture centré sur un média */
.btn__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  display: block;
  height: auto;
  min-width: 0;
  width: auto !important;
  border-radius: 50%;
  border: 2px solid var(--c-white);
}

.btn__play:hover {
  background-color: var(--c-dark);
  border-color: var(--c-dark);
}

/* Section newsletter des pages internes (pas le footer, qui est #newsletter_wrapper) */
.newsletter .btn__main {
  background-color: transparent;
  color: var(--c-text);
}

.newsletter .btn__main:hover {
  background-color: var(--c-dark);
  color: var(--c-white);
}

/* (.poppush .btn__main : dans header.css, propriétaire de l'age gate) */

.contentpress .btn__main {
  width: auto !important;
  display: inline-block;
}

.activite__item [class*="btn"] {
  min-width: 180px;
}


/* ==========================================================================
   11. FORMULAIRES
   Structure : div.field(.customw)(.light) > label + input|textarea|select
   (+ span.notvalid-msg) ; case : label.checkbox > input + span.checkmark + span
   ========================================================================== */

/* 11.1 Champ ------------------------------------------------------------- */
.field {
  margin-bottom: 25px;
  position: relative;
}

/* Champ e-mail à côté d'un bouton de 100px (+16px d'écart) */
@media (min-width: 768px) {
  .field.customw { width: calc(100% - 115px); }
}

.field input,
.field textarea {
  font: var(--fw-regular) 14px/24px var(--font-main);
  display: block;
  width: 100%;
  height: 50px;
  padding: 7px 20px;
  border-radius: 0;
  border: 1px solid var(--c-text);
  resize: none;
  background-color: transparent;
  color: var(--c-input-text);
  text-transform: none;
  letter-spacing: normal;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  height: 80px;
}

/* Conteneur relatif d'un contrôle (porte le message d'erreur) */
.field__wrap {
  position: relative;
  display: block;
}

/* 11.2 Case à cocher / bouton radio -------------------------------------- */
.checkbox {
  position: relative;
  display: block;
  padding-left: 0;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  cursor: pointer;
}

.checkbox span {
  display: block;
}

/* Texte à 29px de la case : soit un span simple (padding 29), soit la paire
   .checkbox__item (marge 14) + .checkbox__label (padding 15) */
.checkbox > span:not(.checkmark):not(.field__wrap) {
  padding-left: 29px;
}

.checkbox__item {
  margin-left: 14px;
}

.checkbox__label {
  padding-left: 15px;
}

/* La case dessinée (17×17) */
.checkbox .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  width: 17px;
  height: 17px;
  border: 1px solid var(--c-text);
  background-color: transparent;
}

/* La coche : deux bords blancs tournés de 45° */
.checkbox .checkmark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--c-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.checkbox input:checked ~ .checkmark {
  background-color: var(--c-text);
  border-color: var(--c-text);
}

.checkbox input:checked ~ .checkmark::after {
  opacity: 1;
}

/* Bouton radio : case ronde, coche plus fine */
.checkbox.radio {
  font-size: 16px;
}

.checkbox.radio .checkmark {
  border-radius: 50%;
}

.checkbox.radio .checkmark::after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
}

/* Radio à point : disque sombre au centre, fond inchangé */
.checkbox.radio__m1 .checkmark {
  border-radius: 50%;
}

.checkbox.radio__m1 input:checked ~ .checkmark {
  background-color: transparent;
}

.checkbox.radio__m1 .checkmark::after {
  left: 3px;
  top: 3px;
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background-color: var(--c-dark);
  transform: none;
}

/* 11.3 Variante claire (formulaire sur fond sombre) ---------------------- */
.field.light label {
  color: var(--c-white);
}

.field.light input,
.field.light textarea {
  color: var(--c-white);
  background-color: transparent;
  border-color: var(--c-white);
}

.field.light input::placeholder,
.field.light textarea::placeholder {
  color: var(--c-white);
}

.field.light .checkbox .checkmark,
.field.light .checkbox input:checked ~ .checkmark {
  border-color: var(--c-white);
}

/* 11.4 Messages de validation -------------------------------------------- */
/* Variante du thème : petit texte rouge en haut à droite du champ (≥600px) */
.notvalid-msg {
  display: block;
  color: var(--c-error);
  font: 10px/12px var(--font-main);
  margin-top: 10px;
  right: 0;
  top: 5px;
}

@media (min-width: 600px) {
  .notvalid-msg {
    position: absolute;
    margin-top: 0;
  }
}

/* Variante dans le flux (rendu observé sous le champ newsletter) */
.notvalid-msg.inflow {
  position: static;
  margin: 0;
  padding: 0;
  font: var(--fw-regular) 14px/21px var(--font-main);
  color: var(--c-error-form);
  text-align: left;
}

.field-not-valid {
  border-color: var(--c-error) !important;
}

/* Réponse globale d'un formulaire (succès / erreur) */
.form-response {
  margin: 2em .5em 1em;
  padding: .2em 1em;
  border: 2px solid #46b450;
  font-size: 14px;
  line-height: 21px;
}

.form-response.is-error   { border-color: var(--c-error-form); }
.form-response.is-invalid { border-color: #ffb900; }

/* Formulaire non raccordé (aucun service d'envoi n'est encore branché) :
   filet neutre — le vert de réussite laisserait croire à un envoi. */
form[data-status="notsent"] .form-response { border-color: #a9a59f; }

/* 11.5 Œil du champ mot de passe ----------------------------------------- */
.field__inner {
  position: relative;
}

.field__inner .icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.field__inner .icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background-color: var(--c-dark);
  transform: rotate(-30deg);
  transform-origin: left bottom;
  opacity: 0;
}

.field__inner .icon.show::after {
  width: 25px;
  opacity: 1;
}

/* 11.6 Bouton d'envoi dans un .field ------------------------------------- */
/* Même boîte que les champs (50px, bordure 1px), 14px poids 400 sans
   capitales ni soulignement, quel que soit l'ordre des classes. */
.field input[type="submit"],
.field input[type="button"],
.field button {
  display: block;
  font: var(--fw-regular) 14px/24px var(--font-main);
  text-transform: none;
  letter-spacing: 0;
  height: 50px;
  width: 100%;
  padding: 7px 20px;
  border: 1px solid var(--c-text);
  background-color: transparent;
  color: var(--c-text);
  text-align: center;
  cursor: pointer;
}

.field input[type="submit"]::after,
.field button::after {
  content: none;
}

/* 11.7 Divers ------------------------------------------------------------ */
.checkcontent {
  padding-top: 120px;
}

.codepromo {
  width: 100%;
  max-width: 430px;
  display: grid;
  grid-template-columns: auto 117px;
}

@media (max-width: 768px) {
  .codepromo {
    max-width: 100%;
    margin-bottom: 24px;
  }
}


/* ==========================================================================
   12. PAGINATION, FIL D'ARIANE, SELECT PERSONNALISÉ
   ========================================================================== */

/* 12.1 Pagination (blog) ------------------------------------------------- */
.pagination {
  margin-top: 123px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .pagination {
    margin-top: 80px;
    padding-bottom: 20px;
  }
}

.pagination a,
.pagination span {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  color: var(--c-text);
  border: 1px solid var(--c-beige-2);
}

.pagination a:hover,
.pagination span:hover,
.pagination .current {
  color: var(--c-white);
  background-color: var(--c-text);
  border-color: var(--c-text);
}

.pagination .previouslink,
.pagination .nextlink {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chevrons 8×14, trait 2px, dessinés en SVG intégré (blancs au survol) */
.pagination .previouslink::before,
.pagination .nextlink::before {
  content: "";
  display: block;
  width: 8px;
  height: 14px;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pagination .previouslink::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%23575756' stroke-width='2'/%3E%3C/svg%3E");
}

.pagination .nextlink::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23575756' stroke-width='2'/%3E%3C/svg%3E");
}

.pagination .previouslink:hover::before,
.pagination .nextlink:hover::before {
  filter: brightness(0) invert(1);
}

/* 12.2 Fil d'Ariane ------------------------------------------------------ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 0;
  list-style: none;
}

.breadcrumb li:not(:last-child) {
  position: relative;
  padding-right: 36px;
}

.breadcrumb li:not(:last-child)::after {
  content: "|";
  display: block;
  position: absolute;
  right: 16px;
  top: -1px;
}

.breadcrumb a {
  display: inline-block;
  color: var(--c-text);
}

.breadcrumb .current {
  opacity: .5;
}

.breadcrumb__m1 {
  font-weight: var(--fw-bold);
  font-style: normal;
}

.breadcrumb__m1 .nav-item:last-child {
  font-weight: var(--fw-regular);
}

/* 12.3 Select ------------------------------------------------------------ */
/* Select natif habillé : même boîte que les champs, chevron à droite */
.field select,
.field__select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 30px 0 18px;
  border: 1px solid var(--c-dark);
  border-radius: 0;
  background: transparent url(../img/chevron-small.svg) no-repeat right 15px center;
  background-size: 16px 10px;
  font: var(--fw-regular) 14px/48px var(--font-main);
  color: var(--c-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

select.form-control {
  height: 50px;
  border: 1px solid var(--c-dark);
  border-radius: 0;
}

/* Liste déroulante personnalisée (sans JS de bibliothèque) :
   div.custom-select(.open) > span.current + ul.list > li.option(.selected) */
.custom-select {
  display: block;
  width: 100%;
  height: 50px !important;
  line-height: 48px;
  padding: 0 30px 0 18px;
  border: 1px solid var(--c-dark);
  border-radius: 0;
  background-color: transparent;
  font-size: 14px;
  text-align: left !important;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  transition: all .2s ease-in-out;
}

.custom-select:hover {
  border-color: var(--c-dark);
}

.custom-select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -5px;
  width: 16px;
  height: 10px;
  background: url(../img/chevron-small.svg) center / contain no-repeat;
  transform-origin: center;
  transition: all .15s ease-in-out;
}

.custom-select.open::after {
  transform: rotate(180deg);
}

.custom-select .list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 4px;
  padding: 0;
  background-color: var(--c-surface);
  box-shadow: 0 0 0 1px rgba(68, 68, 68, .11);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 0;
  transform: scale(.75) translateY(25px);
  transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
}

.custom-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.custom-select .option {
  line-height: 40px;
  min-height: 40px;
  padding: 0 29px 0 18px;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}

.custom-select .option:hover,
.custom-select .option.focus,
.custom-select .option.selected.focus {
  background-color: var(--c-stone);
}

.custom-select .option.disabled {
  color: var(--c-placeholder);
  cursor: default;
  background-color: transparent;
}

.custom-select.disabled {
  border-color: #ededed;
  color: var(--c-placeholder);
  pointer-events: none;
}


/* ==========================================================================
   13. BARRES DE DÉFILEMENT
   Recette du thème (menu, modales) : piste sombre translucide, curseur sombre.
   ========================================================================== */
.scroll-dark {
  scrollbar-width: thin;
  scrollbar-color: var(--c-dark) rgba(var(--c-ink-rgb), .2);
}

.scroll-dark::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(var(--c-ink-rgb), .2);
}

.scroll-dark::-webkit-scrollbar-thumb {
  background-color: var(--c-dark);
}


/* ==========================================================================
   14. COMPOSANTS PARTAGÉS
   ========================================================================== */

/* 14.1 Bannière (vidéo ou photo pleine largeur) -------------------------- */
.banner {
  position: relative;
}

.banner__content {
  position: relative;
  z-index: 1;
}

.banner .banner__img {
  width: 100%;
}

.banner.custom .banner__content {
  height: 520px;
}

@media (max-width: 600px) {
  .banner.custom .banner__content { height: 216px; }
}

.bannervideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner img.bannervideo {
  height: auto;
}

/* États de la vidéo du héro (opacité 0 → 1 sur .is-playing, masquage sur
   .video-fallback, affiche .banner__poster animée) : surcharges propres à la
   page d'accueil, dans home.css. Ici la vidéo garde le rendu de la référence. */

/* Chevron « défiler » en bas de la bannière */
.banner .scrolldown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  display: block;
  z-index: 2;
}

/* Anneau de focus clair : le chevron est blanc sur la photo du héro, la couleur
   héritée (--c-text) y serait illisible. */
.nav-clavier .banner a.scrolldown:focus-visible {
  outline: 1px solid var(--c-white);
  outline-offset: 2px;
}

/* 14.2 Slider (structure compatible slick, moteur maison) ---------------- */
.slick-slider {
  position: relative;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.slick-track::before,
.slick-track::after {
  content: "";
  display: table;
}

.slick-track::after {
  clear: both;
}

.slick-slide {
  float: left;
  display: block;
  height: 100%;
  min-height: 1px;
}

.slick-slide img {
  display: block;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Flèches : cadre 56×56 blanc, icône centrée ; survol = plein gris */
.slick-arrow {
  width: 56px;
  height: 56px;
  position: absolute;
  padding: 0;
  border: 1px solid var(--c-white);
  cursor: pointer;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
  z-index: 1;
}

.slick-arrow:hover {
  border-color: var(--c-text);
  background-color: var(--c-text);
}

.slick-prev {
  background-image: url(../img/arrow-left.svg);
  right: 0;
}

.slick-next {
  background-image: url(../img/arrow-right.svg);
  right: -90px;
}

/* Points de navigation (définis par le thème, jamais affichés) */
.slick-dots {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.slick-dots button {
  font-size: 0;
  line-height: 0;
  display: block;
  border: none;
  width: 20px;
  height: 6px;
  background-color: var(--c-dark);
}

.slick-dots .slick-active button {
  width: 60px;
  background-color: var(--c-dark) !important;
}


/* ==========================================================================
   15. ACCESSIBILITÉ ET MOUVEMENT RÉDUIT
   ========================================================================== */

/* Anneaux de focus : dessinés uniquement après une vraie navigation au
   clavier. La classe .nav-clavier est posée sur <html> à la première touche
   Tab et retirée à la souris / au toucher (header.js) ; :focus-visible seul ne
   suffit pas, Chromium le fait correspondre à un focus programmatique, ce qui
   dessinait un anneau permanent sur « Oui » et sur le bouton de menu dans
   toutes les captures.
   Hors clavier on neutralise donc aussi l'anneau natif (`outline: auto 1px`).
   Les champs texte gardent le rendu de la référence (pas d'anneau, bordure
   inchangée : voir footer.css). */
:focus-visible { outline: 0; }

.nav-clavier a:focus-visible,
.nav-clavier button:focus-visible,
.nav-clavier input:focus-visible,
.nav-clavier textarea:focus-visible,
.nav-clavier select:focus-visible,
.nav-clavier [role="button"]:focus-visible,
.nav-clavier [tabindex]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* a et button portent transition: all .4s ease : « all » anime aussi
   outline-width (medium = 3px → 1px) et outline-color, si bien que l'anneau
   apparaissait en fondu (et restait invisible sur les flèches, dont la couleur
   est transparent). On neutralise la transition des seules propriétés
   d'outline ; les couleurs et filtres gardent leurs .4s. */
.nav-clavier a:focus-visible,
.nav-clavier button:focus-visible,
.nav-clavier input:focus-visible,
.nav-clavier textarea:focus-visible,
.nav-clavier select:focus-visible,
.nav-clavier [role="button"]:focus-visible,
.nav-clavier [tabindex]:focus-visible {
  transition: all var(--t-base) var(--ease), outline-width 0s, outline-color 0s, outline-offset 0s, outline-style 0s;
}

/* Les flèches du carrousel portent color: transparent (elles masquent ainsi
   leur libellé « Précédent »/« Suivant ») : currentColor y dessinerait un
   anneau invisible, on force donc la couleur du texte. */
.nav-clavier .slick-arrow:focus-visible {
  outline: 1px solid var(--c-text);
  outline-offset: 2px;
}

.nav-clavier .checkbox:focus-within .checkmark {
  outline: 1px solid var(--c-text);
  outline-offset: 2px;
  transition: all var(--t-base) var(--ease), outline-width 0s, outline-color 0s, outline-offset 0s, outline-style 0s;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: 0;
}

/* Mouvement réduit : transitions et animations quasi instantanées (durée non
   nulle pour que les événements transitionend/animationend se déclenchent) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Apparitions éditoriales — rythme observé sur Ses Talaioles.
   Petits écrans : fondu montant 40 px, 600 ms, attente 100 ms.
   Dès 1440 px : titres en deux temps, texte latéral, grandes photos 90 → 100 %,
   détails descendants et citations montantes. Une seule apparition par élément.
   main.js pose les classes après préparation, puis les retire en fin de course.
   Sans JavaScript, le contenu est visible. Les sections et leurs gravures ne
   reçoivent ni transformation ni découpe ; seul le contenu se déplace.
   ========================================================================== */
.hb-reveal-pending {
  --hb-reveal-move-duration: .6s;
  --hb-reveal-fade-duration: .6s;
  --hb-reveal-move-delay: .1s;
  --hb-reveal-fade-delay: .1s;
  opacity: 0;
  translate: 0 40px;
  scale: 1;
}
.hb-reveal-pending[data-hb-reveal="image"] {
  translate: 0 0;
}
.hb-reveal-pending.hb-reveal-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity var(--hb-reveal-fade-duration) ease-in-out var(--hb-reveal-fade-delay),
    translate var(--hb-reveal-move-duration) ease-in-out var(--hb-reveal-move-delay),
    scale var(--hb-reveal-move-duration) ease-in-out var(--hb-reveal-move-delay) !important;
}
@media (min-width: 1440px) {
  .hb-reveal-pending {
    --hb-reveal-move-duration: .8s;
    --hb-reveal-fade-duration: .8s;
    --hb-reveal-move-delay: .2s;
    --hb-reveal-fade-delay: .2s;
  }
  .hb-reveal-pending[data-hb-reveal="title"] {
    --hb-reveal-move-delay: .4s;
    --hb-reveal-fade-delay: .4s;
    --hb-reveal-fade-duration: .4s;
  }
  .hb-reveal-pending[data-hb-reveal="text"] {
    --hb-reveal-move-delay: .4s;
    --hb-reveal-fade-delay: .4s;
    translate: 40px 0;
  }
  .hb-category--reverse .hb-reveal-pending[data-hb-reveal="text"] {
    translate: -40px 0;
  }
  .hb-reveal-pending[data-hb-reveal="link"] {
    --hb-reveal-move-delay: .6s;
    --hb-reveal-fade-delay: .6s;
    --hb-reveal-fade-duration: .6s;
  }
  .hb-reveal-pending[data-hb-reveal="image"] {
    --hb-reveal-move-duration: 1s;
    --hb-reveal-fade-duration: 1s;
    --hb-reveal-move-delay: .4s;
    scale: .9;
  }
  .hb-reveal-pending[data-hb-reveal="detail"] {
    --hb-reveal-move-duration: 1s;
    --hb-reveal-move-delay: .4s;
    --hb-reveal-fade-delay: .4s;
    translate: 0 -80px;
  }
  .hb-reveal-pending[data-hb-reveal="quote"] {
    --hb-reveal-move-duration: .9s;
    --hb-reveal-fade-duration: .4s;
    translate: 0 80px;
  }
  .hb-quotation__copy .hb-reveal-pending {
    --hb-reveal-move-duration: 1.2s;
    --hb-reveal-fade-duration: 1.2s;
    --hb-reveal-move-delay: .4s;
    --hb-reveal-fade-delay: .4s;
    translate: 180px 0;
  }
  /* L'état final doit gagner sur chaque variante, y compris les textes inversés. */
  .hb-reveal-pending.hb-reveal-in,
  .hb-category--reverse .hb-reveal-pending.hb-reveal-in {
    translate: 0 0;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .hb-reveal-pending {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
}