/*
Theme Name: Bemiray
Theme URI: https://bemiray-tours.com/
Author: BEMIRAY Tours DMC
Description: Thème bloc sur mesure de BEMIRAY Tours, réceptif à Antananarivo. Construit depuis la maquette HTML validée (méthode Claude to WordPress) : 100 % blocs natifs, éditable dans Gutenberg.
Version: 2.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bemiray
Tags: block-theme, full-site-editing, travel, one-column
*/
/* ==========================================================================
   Socle Elementor — placé AVANT la feuille de la maquette (construire-theme.js).
   Les éléments produits par scripts/elementor/convertir.js portent la classe « bm » :
   ils retrouvent le comportement des balises de la maquette (un <div> reste un bloc,
   aucune marge ni espacement imposés par Elementor). La maquette, déclarée ensuite
   avec la même spécificité, redéfinit ce qu'elle veut (grille, flex, positions…).
   Les réglages faits par le client dans Elementor (spécificité plus forte) passent devant.
   ========================================================================== */

html:root .bm {
  display: block;
  position: static;
  width: auto; min-width: 0; max-width: none;
  margin: 0; padding: 0;
  text-align: inherit;
  flex-direction: row; flex-wrap: nowrap;
  align-items: normal; justify-content: normal; align-content: normal;
  gap: normal;
}
/* Elementor réserve ::before / ::after des conteneurs à la superposition de fond : on rend
   aux pseudo-éléments leur comportement ordinaire, la maquette les dessine ensuite */
html:root .bm::before,
html:root .bm::after {
  position: static; inset: auto;
  width: auto; height: auto;
  border-radius: 0; opacity: 1; mix-blend-mode: normal; transition: none;
  display: inline;
}
/* tailles par défaut des titres (celles du navigateur dans la maquette) */
html:root .bm-h1 { font-size: 2em; }
html:root .bm-h2 { font-size: 1.5em; }
html:root .bm-h3 { font-size: 1.17em; }
html:root .bm-h4 { font-size: 1em; }
html:root .bm-h5 { font-size: .83em; }
html:root .bm-h6 { font-size: .67em; }

/* largeur maximale de la maquette (variable --bm-max posée par construire-theme.js) : prioritaire sur
   la règle d'Elementor .elementor.elementor .e-con > .elementor-widget { max-width: 100% } */
@property --bm-max { syntax: '*'; inherits: false; }
html:root .elementor.elementor .e-con > .bm.elementor-widget { max-width: var(--bm-max, none); }

/* bouton Elementor : aucune valeur par défaut (fond gris, marge intérieure, taille) avant la maquette */
html:root .btn .elementor-button {   /* descendant : Elementor 3.x enveloppe le lien */
  background: transparent; color: inherit;
  padding: 0; border-radius: 0; border: 0;
  font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit;
  fill: currentColor; text-align: inherit;
}

/* marges de la maquette sur les widgets (variables --bm-m* posées par construire-theme.js) :
   Elementor les remet à 0 par .e-con .elementor-widget.elementor-widget { margin: 0 } */
@property --bm-mt { syntax: '*'; inherits: false; }
@property --bm-mr { syntax: '*'; inherits: false; }
@property --bm-mb { syntax: '*'; inherits: false; }
@property --bm-ml { syntax: '*'; inherits: false; }
html:root .e-con .bm.elementor-widget.elementor-widget { margin: var(--bm-mt, 0px) var(--bm-mr, 0px) var(--bm-mb, 0px) var(--bm-ml, 0px); }
/* figures produites par un shortcode (cartes d'articles…) : Elementor remet leur marge à 0
   (.elementor-widget:not(.elementor-widget-text-editor):not(…) figure { margin: 0 }) */
html:root .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure[class] { margin: var(--bm-mt, 0px) var(--bm-mr, 0px) var(--bm-mb, 0px) var(--bm-ml, 0px); }

/* ==========================================================================
   BEMIRAY Tours — socle de la maquette
   Registre relevé sur la référence (gabarit Tourm) : sans-serif géométrique
   pour les titres, sans-serif neutre pour le texte, script manuscrite pour
   les surtitres uniquement ; rayons moyens, pilules, cercles.
   Palette aux couleurs du logo BEMIRAY :
   - bleu principal (--primaire #1B449C) : boutons pleins, états actifs,
     liens au survol, focus — c'est lui qui porte le texte blanc ;
   - vert d'accentuation (--accent #45B447) : pictos, coches, repères et
     dessins décoratifs, et tout texte vert posé sur fond sombre (5,6:1 sur
     bleu nuit) — jamais de texte en vert pur sur blanc ou bleu pâle (2,4 à
     2,7:1) ni de petit texte blanc sur vert (2,6:1) ;
   - vert de texte (--accent-texte #379039, le vert du logo assombri) :
     surtitres manuscrits sur fond clair (4:1 sur blanc, 3,7:1 sur bleu pâle,
     au-dessus du seuil de 3:1 des grands corps) ;
   - bleu nuit (--marine #0F2452) : titres, texte foncé, fonds sombres ;
   - fonds blanc et bleu pâle (--bleu-pale) en bandes pleine largeur ;
   - focus clavier : bleu du logo sur fond clair, vert sur fond sombre.
   ========================================================================== */

html:root {
  /* couleurs de la marque BEMIRAY (logo) */
  --primaire: #1B449C;          /* bleu du logo : couleur principale (boutons, états actifs, liens) */
  --accent: #F5E02B;            /* jaune du trèfle du logo (demande du client, oct. 2026) : icônes, fonds d'icônes, repères,
                                   texte jaune sur fond sombre (11:1 sur bleu nuit) — jamais de texte ni de picto blanc dessus */
  --accent-texte: #F5E02B;      /* texte jaune (demande du client : le jaune du logo partout, aussi sur fond clair) */
  --sur-accent: #0F2452;        /* texte et pictos posés sur un fond --accent (bleu nuit : 11:1) */
  --marine: #0F2452;            /* bleu nuit dérivé du principal : titres, fonds sombres */
  --bleu-pale: #F1F4FB;         /* fond de bande clair (texte courant #6E7070 dessus : 4,5:1) */
  --bleu-trait: #D7E0F4;        /* traits et bordures bleutés */
  --vert-pale: #FDF8D6;         /* fond clair teinté d'accent (jaune pâle ; nom historique gardé) */

  /* neutres prélevés sur la référence */
  --texte: #6E7070;
  --blanc: #FFFFFF;
  --jaune: #FFB539;
  --gris-fumee: #F3F4F6;
  --trait-bleu: #E9EDF5;
  --trait: #E1E4E5;

  --titre: 'Manrope', system-ui, sans-serif;
  --corps: 'Inter', system-ui, sans-serif;
  --script: 'Kaushan Script', cursive;   /* police des textes d'accentuation et du slogan (demande du client) */
  --slogan: #F5E02B;            /* slogan « Voyages Immersifs & Luxury » : toujours ce jaune, sur fond sombre ou photo */

  --conteneur: 1320px;
  --gouttiere: 24px;
  --section: 120px;
  --ombre-douce: 0 10px 30px rgba(15, 36, 82, .08);
}

html:root *,
html:root *::before,
html:root *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* aucun débordement horizontal visible (images qui entrent par la gauche ou la droite, décors) ; clip ne crée pas
   de zone de défilement : les éléments collants (barre d'en-tête, sommaires) continuent de fonctionner */
html:root body { overflow-x: clip; }   /* la valeur passe à la fenêtre : les éléments collants restent collants */
html:root body {
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html:root img { max-width: 100%; --bm-max: 100%; height: auto; display: block; }
html:root figure { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }   /* marge par défaut des navigateurs : les figures portent les images des blocs */
html:root a { color: inherit; text-decoration: none; }
html:root :is(h1, :where(.bm-h1)),
html:root :is(h2, :where(.bm-h2)),
html:root :is(h3, :where(.bm-h3)),
html:root :is(h4, :where(.bm-h4)),
html:root :is(h5, :where(.bm-h5)),
html:root :is(h6, :where(.bm-h6)) {
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  font-family: var(--titre);
  color: var(--marine);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  hyphens: none;
}
html:root :is(p, :where(.bm-p)) { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root ul { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none; }
html:root button,
html:root input,
html:root select,
html:root textarea { font: inherit; color: inherit; }

html:root .wrap {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); --bm-max: calc(var(--conteneur) + 2 * var(--gouttiere));
  margin-inline: auto; --bm-ml: auto; --bm-mr: auto;
  padding-inline: var(--gouttiere);
}

/* --- Titres de section : surtitre manuscrit + titre ---------------------- */
html:root .surtitre {
  display: block;
  font-family: var(--script);
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  color: var(--accent-texte);    /* jaune du logo (demande du client) ; sur fond clair, un léger liseré bleu nuit détache le trait */
  text-shadow: 0 1px 0 rgba(15, 36, 82, .35), 0 0 1px rgba(15, 36, 82, .35);
  margin-bottom: -4px; --bm-mb: -4px;
}
html:root .titre-section {
  font-size: 48px;
  line-height: 1.327;
  font-weight: 700;
}
html:root .tete-section { text-align: center; margin-bottom: 49px; --bm-mb: 49px; }
html:root .tete-section--gauche { text-align: left; }
html:root .chapeau { max-width: 640px; --bm-max: 640px; margin: 14px auto 0; --bm-mt: 14px; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; font-size: 16px; }

/* --- Boutons ------------------------------------------------------------- */
html:root .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18.8px 35px;
  border-radius: 48px;
  border: 1px solid transparent;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
html:root .btn > .wp-block-button__link,
html:root .btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18.8px 35px;
  border-radius: 48px;
  border: 1px solid transparent;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
html:root .btn::after {
  content: '';
  width: 20px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .btn > .wp-block-button__link::after,
html:root .btn .elementor-button::after {
  content: '';
  width: 20px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .btn--plein { background: var(--primaire); color: var(--blanc); }
html:root .btn--plein > .wp-block-button__link,
html:root .btn--plein .elementor-button { background: var(--primaire); color: var(--blanc); }
html:root .btn--plein:hover { background: var(--marine); }
html:root .btn--plein:hover > .wp-block-button__link,
html:root .btn--plein:hover .elementor-button { background: var(--marine); }
html:root .btn--sombre { background: var(--marine); color: var(--blanc); }
html:root .btn--sombre > .wp-block-button__link,
html:root .btn--sombre .elementor-button { background: var(--marine); color: var(--blanc); }
html:root .btn--sombre:hover { background: var(--primaire); }
html:root .btn--sombre:hover > .wp-block-button__link,
html:root .btn--sombre:hover .elementor-button { background: var(--primaire); }
html:root .btn--contour-blanc { border-color: var(--blanc); color: var(--blanc); background: transparent; }
html:root .btn--contour-blanc > .wp-block-button__link,
html:root .btn--contour-blanc .elementor-button { border-color: var(--blanc); color: var(--blanc); background: transparent; }
html:root .btn--contour-blanc:hover { background: var(--blanc); color: var(--marine); }
html:root .btn--contour-blanc:hover > .wp-block-button__link,
html:root .btn--contour-blanc:hover .elementor-button { background: var(--blanc); color: var(--marine); }
html:root .btn--contour { border-color: var(--marine); color: var(--marine); background: transparent; }
html:root .btn--contour > .wp-block-button__link,
html:root .btn--contour .elementor-button { border-color: var(--marine); color: var(--marine); background: transparent; }
html:root .btn--contour:hover { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }
html:root .btn--contour:hover > .wp-block-button__link,
html:root .btn--contour:hover .elementor-button { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }
html:root .btn--petit { padding: 14px 25px; }
html:root .btn--petit > .wp-block-button__link,
html:root .btn--petit .elementor-button { padding: 14px 25px; }
html:root .btn--petit::after { width: 16px; height: 11px; }
html:root .btn--petit > .wp-block-button__link::after,
html:root .btn--petit .elementor-button::after { width: 16px; height: 11px; }

/* --- Bandes pleine largeur (classe historique .bande-cyan : fond bleu pâle à motif) --- */
html:root .bande-cyan {
  background-color: var(--bleu-pale);
  background-image: url("assets/img/deco/motif-voyage.svg");
  background-size: 440px auto;
  background-repeat: repeat;
}

/* --- Points de curseur --------------------------------------------------- */
html:root .points { display: flex; justify-content: center; gap: 18px; margin: 40px 0 0; --bm-mt: 40px; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none; }
html:root .points li {
  font-size: 0; line-height: 0; overflow: hidden;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--marine);
  cursor: pointer;
}
html:root .points li.est-actif { background: var(--primaire); border-color: var(--primaire); }


/* --- Pictos de réseaux sociaux (masques : la couleur suit color) -------- */
html:root .ico-reseau,
html:root .reseaux .elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--primaire); color: var(--primaire);
  transition: background-color .4s, color .4s, border-color .4s;
}
html:root .ico-reseau::before,
html:root .reseaux .elementor-social-icon::before {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .ico-reseau:hover,
html:root .reseaux .elementor-social-icon:hover { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }
html:root .ico-facebook { --m: url("assets/img/icones/facebook.svg"); }
html:root .ico-x { --m: url("assets/img/icones/x.svg"); }
html:root .ico-linkedin { --m: url("assets/img/icones/linkedin.svg"); }
html:root .ico-youtube { --m: url("assets/img/icones/youtube.svg"); }
html:root .ico-instagram { --m: url("assets/img/icones/instagram.svg"); }

/* --- Illustrations flottantes ------------------------------------------- */
html:root .deco { position: absolute; pointer-events: none; z-index: 1; }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
html:root .deco--flotte { animation: flotter 5s ease-in-out infinite; }

/* contour de focus clavier : bleu du logo sur fond clair (8,9:1 sur blanc) ; sur les fonds sombres, il ne
   ferait que 1,7:1 : ces sections passent --focus au vert (5,6:1 sur bleu nuit), et les cartes blanches
   qu'elles portent (formulaire de recherche du héros, formulaires des fiches) le repassent au bleu */
html:root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus, var(--primaire)); outline-offset: 3px;
}
/* arrondi du contour pour les liens simples, sans spécificité : les boutons gardent leur pilule */
html:root :where(a, button, input, select, textarea, [tabindex]):where(:focus-visible) { border-radius: 6px; }
html:root :where(.heros, .bandeau, .appel, .fiche-heros, .fiche-parcours, .fiche-demande, .valeurs, .pied__copyright) { --focus: var(--accent); }
html:root :where(.recherche__boite, .formulaire) { --focus: var(--primaire); }
/* carrousels glissables (souris, doigt, pavé tactile) */
html:root .est-glissable { cursor: grab; -webkit-user-select: none; user-select: none; }
html:root .est-glissable.est-saisi { cursor: grabbing; }
html:root .est-glissable img { -webkit-user-drag: none; }
html:root .est-cachee { display: none; }
html:root .est-cachee.est-actif { display: block; }

@media (max-width: 1199px) {
  html:root { --section: 96px; }
  html:root .titre-section { font-size: 40px; }
}
@media (max-width: 767px) {
  html:root { --section: 72px; --gouttiere: 16px; }
  html:root .surtitre { font-size: 32px; }
  html:root .titre-section { font-size: 32px; }
  html:root .tete-section { margin-bottom: 32px; --bm-mb: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:root *,
html:root *::before,
html:root *::after { animation: none !important; transition: none !important; }
}


/* ===== 00-defile.css ===== */
/* ==========================================================================
   Carrousel infini manuel (00-defile.js) : .defile > .defile__piste > cartes.
   Le script ajoute une fenêtre (.defile__fenetre) centrée qui montre --defile-n cartes entières, une flèche de
   chaque côté et des points dessous. Chaque section règle --defile-carte (largeur minimale d'une carte : le
   nombre de cartes visibles en découle), et éventuellement --defile-largeur et --defile-espace.
   Sans script : la piste défile à la main, cartes aimantées. Dans l'éditeur Elementor : cartes à plat.
   ========================================================================== */
html:root .defile {
  --defile-carte: 280px;      /* largeur minimale d'une carte : le script en affiche autant que la fenêtre en contient */
  --defile-espace: 24px; --defile-largeur: 1880px;
  position: relative; outline: none;
}

/* sans script */
html:root .defile__piste {
  display: flex; gap: var(--defile-espace);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px 24px 24px;
}
html:root .defile__piste::-webkit-scrollbar { display: none; }
html:root .defile__piste > * { flex: none; scroll-snap-align: center; }

/* avec le script : flèches de part et d'autre d'une fenêtre centrée, points dessous */
html:root .defile.est-actif {
  display: grid; grid-template-columns: 56px minmax(0, var(--defile-largeur)) 56px;
  justify-content: center; align-items: center; column-gap: 24px;
  padding-inline: 24px;
}
html:root .defile__fenetre { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; padding: 10px 0 26px; margin: -10px 0 -26px; --bm-mt: -10px; --bm-mr: 0; --bm-mb: -26px; --bm-ml: 0; cursor: grab; touch-action: pan-y; }
html:root .defile.est-actif .defile__piste { overflow: visible; scroll-snap-type: none; padding: 0; width: max-content; align-items: stretch; will-change: transform; }
html:root .defile.est-actif .defile__piste > * { scroll-snap-align: none; }
html:root .defile.est-saisi .defile__fenetre { cursor: grabbing; }
html:root .defile.est-saisi .defile__piste * { user-select: none; }
html:root .defile:focus-visible { outline: 2px solid var(--primaire); outline-offset: 8px; border-radius: 16px; }

/* flèches : grands ronds clairs, flèche fine ; au survol, bleu du logo */
html:root .defile__fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--blanc); color: var(--marine);
  box-shadow: 0 0 0 1px rgba(15, 36, 82, .08), 0 10px 26px rgba(15, 36, 82, .12);
  transition: background-color .25s, color .25s, transform .25s, box-shadow .25s;
}
html:root .defile__fleche svg { width: 22px; height: 22px; }
html:root .defile__fleche--prec { grid-column: 1; grid-row: 1; }
html:root .defile__fleche--prec svg { transform: rotate(180deg); }
html:root .defile__fleche--suiv { grid-column: 3; grid-row: 1; }
html:root .defile__fleche:hover { background: var(--primaire); color: var(--blanc); transform: scale(1.06); box-shadow: 0 14px 30px rgba(27, 68, 156, .3); }
html:root .defile__fleche:active { transform: scale(.96); }
html:root .defile__fleche:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }

/* points : un par carte, ceux des cartes visibles s'allongent en jaune */
html:root .defile__points { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; --bm-mt: 30px; }
html:root .defile__point {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--bleu-trait); transition: width .3s, background-color .3s;
}
html:root .defile__point.est-actif { width: 26px; background: var(--accent); }
html:root .defile__point:hover { background: var(--primaire); }
html:root .defile__point:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }

/* toutes les cartes tiennent à l'écran : ni flèches ni points, cartes centrées */
html:root .defile.est-sans-boucle .defile__fleche,
html:root .defile.est-sans-boucle .defile__points { display: none; }
html:root .defile.est-sans-boucle .defile__piste { width: auto; justify-content: center; transform: none !important; }
html:root .defile.est-sans-boucle .defile__copie { display: none; }

/* téléphone : une carte, flèches sous la carte de part et d'autre des points */
@media (max-width: 599px) {
  html:root .defile.est-actif { grid-template-columns: 46px minmax(0, 1fr) 46px; column-gap: 12px; padding-inline: 20px; }
  html:root .defile__fenetre { grid-column: 1 / -1; grid-row: 1; }
  html:root .defile__fleche { grid-row: 2; width: 46px; height: 46px; margin-top: 22px; --bm-mt: 22px; }
  html:root .defile__fleche--prec { grid-column: 1; }
  html:root .defile__fleche--suiv { grid-column: 3; }
  html:root .defile__points { grid-column: 2; grid-row: 2; margin-top: 22px; --bm-mt: 22px; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { html:root .defile__point,
html:root .defile__fleche { transition: none; } }


/* ===== 00-entete.css ===== */
/* ==========================================================================
   En-tête (octobre 2026, demande du client) : une seule barre FIXE de 80 px — bouton « Menu » à gauche,
   logo au centre, choix de la langue à droite. Le menu s'ouvre en panneau latéral à gauche (ordinateur)
   ou en plein écran (mobile), la ligne du logo et de la croix restant fixe pendant le défilement du menu.
   Sous la barre, posés sur la photo d'en-tête de chaque page : le slogan « Voyages Immersifs & Luxury »
   (jamais traduit) et, flottant en haut à droite, le bouton « Voyages & Moi » (toujours visible).
   Le balisage du menu est celui du bloc Navigation de WordPress (panneau « overlay ») : ces règles servent
   à la maquette ET au site (où elles passent devant la feuille du bloc grâce au préfixe html:root).
   ========================================================================== */

/* ---------- Barre fixe ---------- */
html:root .entete { position: relative; z-index: 40; height: 80px; }   /* réserve la hauteur de la barre fixe */
html:root .entete__principal {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 80px; padding-inline: 32px;
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--trait);
  transition: box-shadow .3s;
}
html:root .est-defile .entete__principal { box-shadow: 0 8px 30px rgba(15, 36, 82, .12); }
html:root .admin-bar .entete__principal { top: 32px; }
@media (max-width: 782px) { html:root .admin-bar .entete__principal { top: 46px; } }

/* logo : au centre, aussi grand que la barre le permet (fichier 1939 × 247 : rapport gardé) */
html:root .logo { grid-column: 2; display: flex; align-items: center; justify-content: center; }
html:root .logo a,
html:root .logo__lien { display: block; line-height: 0; }
html:root .logo img,
html:root .logo .custom-logo { display: block; width: auto; height: 50px; max-width: 46vw; --bm-max: 46vw; object-fit: contain; }

/* ---------- Bouton « Menu » (bloc Navigation : bouton d'ouverture) ---------- */
html:root .entete .menu { grid-column: 1; grid-row: 1; justify-self: start; padding: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .menu .wp-block-navigation__responsive-container-open {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 14px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border: 1px solid var(--trait); border-radius: 100px;
  background: var(--blanc); color: var(--marine); cursor: pointer;
  font-family: var(--corps); font-size: 15px; font-weight: 600; letter-spacing: .04em;
  transition: background-color .25s, color .25s, border-color .25s;
}
html:root .menu .wp-block-navigation__responsive-container-open::after { content: 'Menu'; }
html:root .menu .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; fill: currentColor; }
html:root .menu .wp-block-navigation__responsive-container-open:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); }

/* ---------- Choix de la langue (liste déroulante posée par le script ; sans script : deux liens) ---------- */
html:root .langue-choix {
  grid-column: 3; justify-self: end; position: relative;
  display: inline-flex; align-items: center; gap: 12px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  font-family: var(--corps); font-size: 15px; color: var(--marine);
}
html:root .langue-choix a { font-weight: 600; }
html:root .langue-choix a:hover { color: var(--primaire); }
html:root .langue-choix::before,
html:root .langue-choix::after {
  content: none; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .langue-choix.est-liste::before {
  content: ''; left: 16px; width: 18px; height: 18px; color: var(--primaire);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.6 3.8 5.6 3.8 9s-1.2 6.4-3.8 9c-2.6-2.6-3.8-5.6-3.8-9S9.4 5.6 12 3Z'/%3E%3C/svg%3E");
}
html:root .langue-choix.est-liste::after {
  content: ''; right: 16px; width: 11px; height: 11px;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
}
html:root .langue-choix__liste {
  -webkit-appearance: none; appearance: none;
  height: 48px; padding: 0 40px 0 44px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border: 1px solid var(--trait); border-radius: 100px;
  background: var(--blanc); color: var(--marine); cursor: pointer;
  font-family: var(--corps); font-size: 15px; font-weight: 600;
  transition: border-color .25s, box-shadow .25s;
}
html:root .langue-choix__liste:hover { border-color: var(--primaire); }
html:root .langue-choix__liste:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
html:root .langue-choix__etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Slogan de la marque : sous le logo, sur la photo d'en-tête ---------- */
html:root .slogan-marque {
  position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 6;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding-inline: 16px; text-align: center; pointer-events: none;
  font-family: 'Kaushan Script', cursive; font-weight: 400;
  font-size: 36px; line-height: 1.2; letter-spacing: .01em;
  color: var(--slogan);
  text-shadow: 0 2px 4px rgba(10, 18, 40, .55), 0 0 22px rgba(10, 18, 40, .55);
}

/* ---------- Bouton flottant « Voyages & Moi » : en haut à droite, toujours visible ---------- */
html:root .cta-flottant { position: fixed; top: 100px; right: 24px; z-index: 39; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .admin-bar .cta-flottant { top: 132px; }
/* bouton rond, texte seul (demande du client) : sur deux lignes, centré, liseré jaune au survol */
html:root .cta-flottant .btn,
html:root .cta-flottant__bouton,
html:root .cta-flottant .wp-block-button__link {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; padding: 14px; border-radius: 50%;
  white-space: normal; text-align: center; line-height: 1.2;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(10, 18, 40, .35), inset 0 0 0 3px rgba(255, 255, 255, .18);
  transition: background-color .3s, transform .3s, box-shadow .3s;
}
html:root .cta-flottant .btn > .wp-block-button__link,
html:root .cta-flottant .btn .elementor-button,
html:root .cta-flottant__bouton > .wp-block-button__link,
html:root .cta-flottant__bouton .elementor-button {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; padding: 14px; border-radius: 50%;
  white-space: normal; text-align: center; line-height: 1.2;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(10, 18, 40, .35), inset 0 0 0 3px rgba(255, 255, 255, .18);
  transition: background-color .3s, transform .3s, box-shadow .3s;
}
html:root .cta-flottant .btn::after,
html:root .cta-flottant__bouton::after,
html:root .cta-flottant .wp-block-button__link::after { content: none; display: none; }
html:root .cta-flottant .btn > .wp-block-button__link::after,
html:root .cta-flottant .btn .elementor-button::after,
html:root .cta-flottant__bouton > .wp-block-button__link::after,
html:root .cta-flottant__bouton .elementor-button::after { content: none; display: none; }
html:root .cta-flottant .btn:hover,
html:root .cta-flottant .wp-block-button__link:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 34px rgba(10, 18, 40, .45), 0 0 0 4px var(--accent);
}
html:root .cta-flottant .btn:hover > .wp-block-button__link,
html:root .cta-flottant .btn:hover .elementor-button {
  transform: scale(1.06);
  box-shadow: 0 14px 34px rgba(10, 18, 40, .45), 0 0 0 4px var(--accent);
}

/* ---------- Panneau du menu (bloc Navigation, mode « overlay ») ---------- */
html:root .menu .wp-block-navigation__responsive-container { display: none; }
html:root .menu .wp-block-navigation__responsive-container.is-menu-open {
  display: block; position: fixed; inset: 0; z-index: 100000;
  padding: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; width: auto; height: auto;
  background: rgba(10, 18, 40, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sidenav-voile .3s ease both;
  overflow: hidden;
}
html:root .admin-bar .menu .wp-block-navigation__responsive-container.is-menu-open { top: 32px; }
@media (max-width: 782px) { html:root .admin-bar .menu .wp-block-navigation__responsive-container.is-menu-open { top: 46px; } }
/* le panneau : à gauche, 460 px (plein écran sur mobile), défilement propre */
html:root .menu .is-menu-open .wp-block-navigation__responsive-close {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(460px, 100%); max-width: none; --bm-max: none; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0;
  background: linear-gradient(175deg, var(--marine) 0%, #142f6b 100%);
  box-shadow: 20px 0 60px rgba(10, 18, 40, .35);
  overflow-y: auto; overscroll-behavior: contain;
  animation: sidenav-entree .38s cubic-bezier(.2, .8, .2, 1) both;
}
html:root .menu .is-menu-open .wp-block-navigation__responsive-dialog {
  display: grid; grid-template-columns: 1fr auto; align-content: start;
  min-height: 100%; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; color: var(--blanc);
}
/* ligne du haut, fixe pendant le défilement du menu : logo (blanc) à gauche, croix à droite */
html:root .menu .is-menu-open .menu-mobile__logo,
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-close {
  position: sticky; top: 0; z-index: 2; height: 80px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  background: var(--marine); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
html:root .menu .is-menu-open .menu-mobile__logo { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; }
html:root .menu .is-menu-open .menu-mobile__logo a { display: block; line-height: 0; }
html:root .menu .is-menu-open .menu-mobile__logo img { display: block; width: auto; height: 32px; max-width: 100%; --bm-max: 100%; }
html:root .menu .is-menu-open .menu-mobile__slogan { margin: 6px 0 0; --bm-mt: 6px; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-family: 'Kaushan Script', cursive; font-size: 15px; line-height: 1.2; color: var(--slogan); }
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-close {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  width: 80px; padding: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); cursor: pointer;
  color: var(--blanc);
}
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; transition: transform .3s; }
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--accent); }
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-close:hover svg { transform: rotate(90deg); }
html:root .menu .is-menu-open .wp-block-navigation__responsive-container-content {
  grid-column: 1 / -1; grid-row: 2;
  display: block; padding: 18px 28px 40px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
}
html:root .menu .is-menu-open .wp-block-navigation__container {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none;
}
html:root .menu .is-menu-open .wp-block-navigation-item {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
  width: 100%; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  animation: sidenav-lien .45s ease both;
}
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .2s; }
html:root .menu .is-menu-open .wp-block-navigation-item__content {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 0; color: var(--blanc);
  font-family: var(--corps); font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: color .2s, padding-left .25s;
}
html:root .menu .is-menu-open .wp-block-navigation-item__content strong { font-weight: inherit; }
html:root .menu .is-menu-open .wp-block-navigation-item__content:hover,
html:root .menu .is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--accent); padding-left: 6px; }
html:root .menu .is-menu-open .est-courant > .wp-block-navigation-item__content,
html:root .menu .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--accent); }
html:root .menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.sidenav__lien):not(.sidenav__info) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
html:root .menu .is-menu-open :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sous-menus repliables (accordéon) : la flèche les déplie */
html:root .menu .is-menu-open .wp-block-navigation__submenu-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: var(--blanc); cursor: pointer;
  transition: background-color .2s, transform .3s;
}
html:root .menu .is-menu-open .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; transform: none; }
html:root .menu .is-menu-open .wp-block-navigation__submenu-container { border-left: 2px solid var(--accent) !important; }
html:root .menu .is-menu-open .wp-block-navigation__submenu-icon:hover { background: rgba(255, 255, 255, .14); }
html:root .menu .is-menu-open .est-deplie > .wp-block-navigation__submenu-icon { transform: rotate(180deg); background: var(--accent); color: var(--sur-accent); }
html:root .menu .is-menu-open .wp-block-navigation__submenu-container {
  grid-column: 1 / -1;
  display: none; position: static; visibility: visible; opacity: 1;
  width: auto; min-width: 0; height: auto; margin: 0 0 12px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 12px; --bm-ml: 0; padding: 4px 0 4px 18px;
  border: 0; border-left: 2px solid var(--accent); background: none; box-shadow: none;
}
html:root .menu .is-menu-open .est-deplie > .wp-block-navigation__submenu-container { display: block; animation: sidenav-lien .3s ease both; }
html:root .menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; animation: none; }
html:root .menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 0; font-size: 15px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: rgba(255, 255, 255, .82);
}

/* liens pratiques (infos, questions, e-mail, WhatsApp) : séparés par un pointillé, avec pictogramme jaune */
html:root .menu .is-menu-open .sidenav__lien--premier { margin-top: 22px; --bm-mt: 22px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .3); }
html:root .menu .is-menu-open .sidenav__lien .wp-block-navigation-item__content { font-size: 15px; padding: 11px 0; }
html:root .menu .is-menu-open :is(.sidenav__lien, .sidenav__info) .wp-block-navigation-item__content::before {
  content: ''; flex: none; width: 20px; height: 20px; background: var(--accent);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .menu .is-menu-open .sidenav__info { margin-top: 0; --bm-mt: 0; }
html:root .menu .is-menu-open .sidenav__info:first-of-type,
html:root .menu .is-menu-open .sidenav__lien + .sidenav__info { margin-top: 18px; --bm-mt: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
html:root .menu .is-menu-open .sidenav__info .wp-block-navigation-item__content { padding: 7px 0; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .72); }
html:root .menu .is-menu-open .sidenav__info .wp-block-navigation-item__content::before { width: 16px; height: 16px; }

/* bloc de marque au bas du panneau (logo carré, slogan, trois mots) */
html:root .menu .is-menu-open .sidenav__marque { grid-column: 1 / -1; grid-row: 3; align-self: end; display: flex; align-items: center; gap: 16px; margin: 0 28px 36px; --bm-mt: 0; --bm-mr: 28px; --bm-mb: 36px; --bm-ml: 28px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); }
html:root .menu .is-menu-open .sidenav__marque img { flex: none; width: 68px; height: 68px; border-radius: 14px; object-fit: cover; background: var(--blanc); }
html:root .menu .is-menu-open .sidenav__marque-slogan { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-family: 'Kaushan Script', cursive; font-size: 20px; line-height: 1.2; color: var(--slogan); }
html:root .menu .is-menu-open .sidenav__marque-mots { margin: 6px 0 0; --bm-mt: 6px; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }

/* pictogrammes (masques SVG) */
html:root .ico-infos { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
html:root .ico-faq { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 1 1 3.4 2.3c-.6.3-1 .8-1 1.5v.6M12 16.8v.4'/%3E%3C/svg%3E"); }
html:root .ico-enveloppe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 7 8.5-7'/%3E%3C/svg%3E"); }
html:root .ico-whatsapp { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2a9.8 9.8 0 0 0-8.4 14.8L2.3 21.8l4.9-1.3A9.8 9.8 0 1 0 12 2.2Zm0 17.9a8.1 8.1 0 0 1-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8.1 8.1 0 1 1 12 20.1Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.2 5 5 0 0 0 1.1 2.7 11.5 11.5 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.7-1.2 2.2 2.2 0 0 0 .2-1.2c-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E"); }
html:root .ico-lieu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s7-5.6 7-11.5a7 7 0 1 0-14 0C5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.6'/%3E%3C/svg%3E"); }
html:root .ico-horloge { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

@keyframes sidenav-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes sidenav-entree { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sidenav-lien { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html:root .menu .is-menu-open,
html:root .menu .is-menu-open .wp-block-navigation__responsive-close,
html:root .menu .is-menu-open .wp-block-navigation-item { animation: none; }
}
html.menu-ouvert { overflow: hidden; }   /* la page ne défile pas sous le panneau */

/* ---------- Tablette et mobile ---------- */
@media (max-width: 991px) {
  html:root .entete__principal { padding-inline: 20px; }
  html:root .logo img,
html:root .logo .custom-logo { height: 38px; }
  html:root .slogan-marque { font-size: 30px; }
}
@media (max-width: 767px) {
  html:root .entete__principal { padding-inline: 12px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  /* bandeaux des pages intérieures : leur texte descend sous le slogan et le bouton flottant */
  html:root .bandeau .wrap,
html:root .fiche-heros__contenu,
html:root .activite-entete__contenu { margin-top: 64px; --bm-mt: 64px; }
  html:root .menu .wp-block-navigation__responsive-container-open { width: 46px; height: 46px; padding: 0; justify-content: center; }
  html:root .menu .wp-block-navigation__responsive-container-open::after { content: none; }
  html:root .logo { min-width: 0; }
  html:root .logo img,
html:root .logo .custom-logo { height: 26px; width: auto; max-width: 100%; --bm-max: 100%; }
  html:root .langue-choix__liste { height: 44px; padding: 0 26px 0 32px; font-size: 14px; }
  html:root .langue-choix.est-liste::after { right: 10px; }
  html:root .langue-choix.est-liste::before { left: 11px; width: 16px; height: 16px; }
  html:root .slogan-marque { top: calc(100% + 10px); font-size: 24px; }
  html:root .cta-flottant { top: 136px; right: 12px; }
  html:root .admin-bar .cta-flottant { top: 182px; }
  html:root .cta-flottant .btn,
html:root .cta-flottant__bouton,
html:root .cta-flottant .wp-block-button__link { width: 80px; height: 80px; padding: 10px; font-size: 12.5px; }
html:root .cta-flottant .btn > .wp-block-button__link,
html:root .cta-flottant .btn .elementor-button,
html:root .cta-flottant__bouton > .wp-block-button__link,
html:root .cta-flottant__bouton .elementor-button { width: 80px; height: 80px; padding: 10px; font-size: 12.5px; }
  /* menu plein écran ; la ligne du logo et de la croix reste en haut */
  html:root .menu .is-menu-open .wp-block-navigation__responsive-close { width: 100%; box-shadow: none; }
  html:root .menu .is-menu-open .menu-mobile__logo { padding-left: 20px; }
  html:root .menu .is-menu-open .wp-block-navigation__responsive-container-content { padding: 12px 20px 32px; }
  html:root .menu .is-menu-open .sidenav__marque { margin: 0 20px 28px; --bm-mt: 0; --bm-mr: 20px; --bm-mb: 28px; --bm-ml: 20px; }
}
@media (max-width: 380px) {
  html:root .logo img,
html:root .logo .custom-logo { height: 22px; }
}


/* ===== 00-separateur.css ===== */
/* ==========================================================================
   Séparateur de section (<hr class="separateur"> ; Elementor : élément « Séparateur » ; Gutenberg : core/separator).
   Un trait fin bleuté qui s'efface aux deux bouts, le trèfle du logo au centre dans une pastille blanche.
   ========================================================================== */
html:root .separateur {
  position: relative; display: block; height: 48px; max-width: var(--conteneur); --bm-max: var(--conteneur); margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; padding: 0;
  border: 0; background: none; opacity: 1; overflow: visible;
}
html:root .separateur::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bleu-trait) 18%, var(--bleu-trait) 82%, transparent);
}
html:root .separateur::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--blanc) url("assets/img/icones/trefle.png") center / 22px auto no-repeat;
  box-shadow: 0 0 0 1px var(--bleu-trait), 0 6px 16px rgba(15, 36, 82, .06);
}
/* élément Séparateur d'Elementor : le trait natif s'efface, l'enveloppe porte le décor */
html:root .separateur .elementor-divider,
html:root .separateur .elementor-widget-container { display: none; }
/* juste sous un bandeau de page (ex. page Activités), le séparateur est superflu */
html:root .bandeau + .separateur,
html:root .bandeau + .e-con:has(> .separateur),
html:root .bandeau + .e-con:has(> .e-con-inner > .separateur) { display: none; }


/* ===== 01-heros.css ===== */
/* ---------- Héros plein écran, 3 diapositives ---------- */
html:root .heros {
  position: relative;
  /* hauteur adaptée à la fenêtre : à 1440 × 900, la référence donne 800 px = 900 − 100 ; on garde cet écart
     à toute hauteur de fenêtre : sous l'en-tête (142 px), la photo s'arrête là où le haut du formulaire
     affleure la ligne de flottaison (9 px visibles). Plafond 800 px (référence), plancher 480 px */
  height: clamp(480px, calc(100vh - 38px), 880px);
  height: clamp(480px, calc(100svh - 38px), 880px);   /* barre fixe de 80 px : le haut du formulaire affleure la ligne de flottaison */
  --heros-chevauchement: 51px;   /* partie du formulaire posée sur la photo : 106 px de haut − 55 px de débord */
  margin-bottom: 55px; --bm-mb: 55px;           /* le formulaire déborde de 55 px sous la photo */
  background: var(--marine);
}
html:root .heros__diapo {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
  overflow: hidden;
}
html:root .heros__diapo.est-actif { opacity: 1; visibility: visible; }
html:root .heros__photo {
  position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  width: 100%; height: 100%; object-fit: cover;   /* maquette : l'<img> porte la classe ; WordPress : l'enveloppe du widget */
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
html:root .heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
html:root .heros__diapo.est-actif .heros__photo { transform: scale(1); }
/* voile de la référence : noir à 50 % */
html:root .heros__diapo::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(13, 13, 12, .5);
}
html:root .heros__contenu {
  position: relative; z-index: 2;
  color: var(--blanc);
}
html:root .heros__contenu > * { max-width: 700px; --bm-max: 700px; }
html:root .heros__surtitre {
  font-family: var(--script);
  font-size: 40px; line-height: 40px;
  margin-bottom: 0; --bm-mb: 0;
  /* reste blanc (hérité) : sur le ciel des photos, même voilé à 50 %, le vert fin du manuscrit tombe à ~2:1 */
}
html:root .heros__titre {
  font-size: 80px; line-height: 1.18; font-weight: 700;
  color: var(--blanc);
  margin-bottom: 45px; --bm-mb: 45px;
}
html:root .heros__boutons { display: flex; gap: 16px; }
/* bloc texte centré verticalement dans la partie visible de la photo, entre l'en-tête et le haut du formulaire
   (à 1440 × 900 : 210 px sous l'en-tête, 206 px dans la référence) */
@media (min-width: 992px) {
  html:root .heros__diapo {
    display: flex; flex-direction: column; justify-content: center;
    padding-bottom: var(--heros-chevauchement);
  }
}
/* fenêtres basses (portables 1366 × 768, 1280 × 720 avec les barres du navigateur) : titre à la taille
   « tablette », pour que les titres anglais sur trois lignes gardent de l'air au-dessus et au-dessous */
@media (min-width: 992px) and (max-height: 700px) {
  html:root .heros__titre { font-size: 64px; margin-bottom: 32px; --bm-mb: 32px; }
}

/* commandes à droite : flèches rondes + repères verticaux */
html:root .heros__commandes {
  position: absolute; z-index: 3;
  right: 55px; top: 0; bottom: 0;
  height: max-content; margin-block: auto; --bm-mt: auto; --bm-mb: auto;   /* centrées verticalement sur la hauteur du héros */
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
html:root .heros__fleche {
  font-size: 0; line-height: 0; color: transparent;   /* le texte reste pour les lecteurs d'écran et l'éditeur */
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(250, 252, 244, .2);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  cursor: pointer; position: relative;
  transition: background-color .3s;
}
html:root .heros__fleche:hover { background: var(--primaire); }
html:root .heros__fleche::before {
  content: ''; position: absolute; inset: 0; margin: auto; --bm-mt: auto; --bm-mr: auto; --bm-mb: auto; --bm-ml: auto; width: 22px; height: 22px; background: var(--blanc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V3M5 10l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V3M5 10l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .heros__fleche--bas::before { transform: rotate(180deg); }
html:root .heros__reperes { display: flex; flex-direction: column; gap: 14px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none; }
html:root .heros__repere { width: 2px; height: 24px; background: var(--blanc); cursor: pointer; transition: background-color .4s; font-size: 0; overflow: hidden; }
html:root .heros__repere.est-actif { background: var(--accent); }

/* ---------- Formulaire de recherche chevauchant ---------- */
html:root .recherche {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: -55px;
}
html:root .recherche__boite {
  display: grid;
  grid-template-columns: 457px 426px 1fr auto;
  align-items: center;
  padding: 21px 32px;
  background: var(--blanc);
  border: 2px solid var(--primaire);
  border-radius: 16px;
  box-shadow: 0 20px 20px rgba(204, 204, 204, .25);
}
html:root .recherche__champ {
  display: flex; flex-direction: column; gap: 2px;
  padding-inline: 0 24px;
}
html:root .recherche__champ + .recherche__champ { border-left: 1px solid var(--trait); padding-left: 25px; }
html:root .recherche__libelle { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--marine); line-height: 1.3; }
/* vrais champs (saisie libre + listes natives) : même rendu que le texte de la maquette validée */
html:root .recherche__saisie,
html:root .recherche__choix {
  display: block; width: 100%; min-width: 0;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent;
  font-family: var(--corps); font-size: 16px; line-height: 1.625; color: var(--marine);
  outline: none; -webkit-appearance: none; appearance: none;
}
html:root .recherche__saisie::placeholder { color: var(--texte); opacity: 1; }
html:root .recherche__saisie::-webkit-search-decoration,
html:root .recherche__saisie::-webkit-search-cancel-button { -webkit-appearance: none; }
html:root .recherche__saisie {
  padding-left: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7070' stroke-width='1.5'%3E%3Ccircle cx='7' cy='16' r='3'/%3E%3Cpath d='M17 11s4-3.2 4-6.4A4 4 0 0 0 13 4.6C13 7.8 17 11 17 11Z'/%3E%3Ccircle cx='17' cy='4.8' r='1.3'/%3E%3Cpath d='M10 16h4a3 3 0 0 0 0-6h-1' stroke-dasharray='2 2'/%3E%3C/svg%3E") left center / 22px no-repeat;
}
html:root .recherche__choix {
  align-self: flex-start; width: auto; max-width: 100%; --bm-max: 100%; padding-right: 22px; cursor: pointer; color: var(--texte);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230F2452' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") right center / 11px no-repeat;
}
html:root .recherche__champ { position: relative; }
html:root .recherche__champ:focus-within .recherche__libelle { color: var(--primaire); }
/* suggestions : lieux et circuits existants (index des fiches) */
html:root .recherche__suggestions {
  position: absolute; left: 0; right: 24px; top: calc(100% + 16px); z-index: 30;
  max-height: 330px; overflow: auto; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 8px; list-style: none;
  background: var(--blanc); border: 1px solid var(--trait-bleu); border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15, 36, 82, .16);
}
html:root .recherche__suggestions[hidden] { display: none; }
html:root .recherche__suggestion {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font-size: 15px; line-height: 1.4; color: var(--marine);
}
html:root .recherche__suggestion small { flex: none; font-size: 13px; color: var(--texte); }
html:root .recherche__suggestion--circuit { font-weight: 600; }
html:root .recherche__suggestion:hover,
html:root .recherche__suggestion.est-actif { background: var(--bleu-pale); }
html:root .recherche__suggestions-titre { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primaire); }
html:root .recherche__bouton::after { display: none; }
html:root .recherche__bouton::before {
  content: ''; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 768–1383 px : le conteneur occupe toute la largeur ; marge latérale de l'en-tête (32 px), pour que le texte
   et le formulaire s'alignent sur le logo (au-delà, le conteneur centré de 1320 px commence à droite du logo) */
@media (min-width: 768px) and (max-width: 1383px) {
  html:root .heros__contenu,
html:root .recherche { padding-inline: 32px; max-width: none; --bm-max: none; }
}
/* 992–1383 px : avec les colonnes fixes de la référence (457 + 426 px), le bouton « Rechercher » sortait du
   cadre (7 px à 1366 px, 59 px à 1280 px, 315 px à 1024 px) ; les colonnes deviennent proportionnelles */
@media (min-width: 992px) and (max-width: 1383px) {
  html:root .recherche__boite { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}

@media (max-width: 1199px) {
  html:root .heros { height: clamp(480px, calc(100vh - 38px), 760px); height: clamp(480px, calc(100svh - 38px), 760px); }
  html:root .heros__titre { font-size: 64px; }
  html:root .heros__commandes { right: 24px; }
}
@media (max-width: 991px) {
  html:root .heros { height: auto; margin-bottom: 0; --bm-mb: 0; background: transparent; }
  html:root .heros__diapo.est-actif { position: relative; }           /* la diapositive active porte la hauteur */
  html:root .heros__contenu { padding-top: 170px; padding-bottom: 110px; }
  html:root .heros__commandes { display: none; }
  html:root .recherche { position: relative; bottom: auto; margin-top: -60px; --bm-mt: -60px; }
  html:root .recherche__boite { grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
  html:root .recherche__champ { padding: 0; }
  html:root .recherche__champ + .recherche__champ { border-left: 0; padding-left: 0; }
  html:root .recherche__actions { grid-column: 1 / -1; }
  html:root .recherche__bouton { display: flex; justify-content: center; }
}
@media (max-width: 767px) {
  html:root .heros__contenu { padding-top: 156px; padding-bottom: 96px; }
  html:root .heros__surtitre { font-size: 26px; line-height: 30px; }
  html:root .heros__titre { font-size: 44px; margin-bottom: 32px; --bm-mb: 32px; }
  html:root .heros__boutons { flex-wrap: wrap; gap: 12px; }
  html:root .recherche__boite { grid-template-columns: 1fr; }
}

/* tampon « Since 2013 » : en haut à gauche de la photo, en face du bouton flottant « Voyages & Moi » ;
   il défile avec la page (pas fixe). Encre bordeaux d'origine sur pastille crème, légère rotation. */
html:root .heros__tampon {
  position: absolute; z-index: 4; top: 22px; left: 40px;
  width: 136px; height: 136px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 12px;
  border-radius: 50%; background: #F0E5D1;
  box-shadow: 0 4px 12px rgba(10, 18, 40, .22), inset 0 0 0 1px rgba(122, 28, 34, .12);   /* ombre légère, juste pour détacher le sceau */
  transform: rotate(-10deg);
  animation: tampon-pose .7s cubic-bezier(.3, 1.6, .5, 1) .5s both;
}
html:root .heros__tampon img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes tampon-pose { from { opacity: 0; transform: rotate(-24deg) scale(1.5); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { html:root .heros__tampon { animation: none; } }
html:root .heros { overflow-x: clip; }   /* le tampon qui « se pose » (agrandi au départ) ne doit pas élargir la page */
/* le slogan de la marque occupe le haut de la photo : le bloc texte descend un peu */
@media (min-width: 992px) { html:root .heros__diapo { padding-top: 40px; } }
/* ordinateur : le tampon, plus grand, se pose dans le ciel de la photo, aux deux tiers de la largeur, avec une ombre
   portée décalée comme un sceau posé sur la photo */
@media (min-width: 992px) {
  html:root .heros__tampon {
    --tampon: clamp(176px, 15vw, 250px);
    width: var(--tampon); height: var(--tampon); padding: calc(var(--tampon) * .085);
    left: calc(71% - var(--tampon) / 2); top: calc(23% - var(--tampon) / 2);
    box-shadow: 0 6px 16px rgba(10, 18, 40, .25), 0 1px 3px rgba(10, 18, 40, .2), inset 0 0 0 1px rgba(122, 28, 34, .12);
  }
}
@media (min-width: 992px) and (max-height: 700px) { html:root .heros__tampon { --tampon: 164px; top: calc(29% - var(--tampon) / 2); } }
@media (max-width: 991px) { html:root .heros__tampon { width: 108px; height: 108px; padding: 9px; left: 20px; } }
@media (max-width: 767px) { html:root .heros__tampon { width: 78px; height: 78px; padding: 7px; top: 50px; left: 12px; } }


/* ===== 02-categories.css ===== */
/* ==========================================================================
   Univers de voyage : bande infinie de grandes cartes portrait (module commun 00-defile).
   Chaque carte : photo pleine carte, voile bleu nuit en bas, trait jaune, nom, accroche et lien.
   Au survol, la carte se soulève, la photo s'approche, l'accroche se dévoile et le trait s'allonge.
   Toute la carte mène au lien (la photo-lien la couvre ; le texte laisse passer le clic, sauf ses liens).
   Autant de cartes qu'on veut : une carte dupliquée dans Elementor rejoint la bande.
   ========================================================================== */
html:root .categories {
  --carte-l: clamp(236px, 21vw, 300px);    /* largeur d'une carte ; hauteur au format 3:4 */
  position: relative;
  padding: 44px 0 20px;
  background: var(--blanc);
  overflow: hidden;
  overflow: clip;
}
/* motif de pictos de voyage, très pâle, qui s'efface vers le bas */
html:root .categories::before {
  content: '';
  position: absolute; inset: 0;
  background: url("assets/img/deco/motif-voyage.svg") center top / 460px auto repeat;
  opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .1) 100%);
          mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .1) 100%);
  pointer-events: none;
}
html:root .categories > * { position: relative; z-index: 1; }
html:root .categories__tete { margin-bottom: 34px; --bm-mb: 34px; }
html:root .categories__defile { --defile-espace: 24px; }

/* ---------- la carte ---------- */
html:root .categories__carte {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--carte-l);
  width: var(--carte-l);
  aspect-ratio: 3 / 4;
  border-radius: 26px;
  overflow: hidden;
  background: var(--marine);
  box-shadow: 0 18px 36px -18px rgba(15, 36, 82, .45);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease;
}
/* voile : lisibilité du texte posé sur la photo */
html:root .categories__carte::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15, 36, 82, 0) 38%, rgba(15, 36, 82, .55) 64%, rgba(15, 36, 82, .92) 100%);
  pointer-events: none;
  transition: opacity .5s ease;
}
html:root .categories__photo {
  position: absolute; inset: 0;
  display: block;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
}
html:root .categories__photo :is(a, .elementor-widget-container) { display: block; height: 100%; }
html:root .categories .categories__photo img {
  width: 100%; height: 100%;
  max-width: none; --bm-max: none;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- texte : bas de carte ---------- */
html:root .categories__corps {
  position: absolute; z-index: 2;
  left: 26px; right: 26px; bottom: 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--blanc);
  pointer-events: none;
}
/* trait jaune du logo au-dessus du nom */
html:root .categories__corps::before {
  content: '';
  display: block;
  width: 34px; height: 3px;
  margin-bottom: 14px; --bm-mb: 14px;
  border-radius: 3px;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
html:root .categories__nom {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--blanc);
}
html:root .categories__nom a { pointer-events: auto; }
html:root .categories__texte {
  margin-top: 6px; --bm-mt: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
}
html:root .categories__lien {
  margin-top: 14px; --bm-mt: 14px;
  font-family: var(--corps);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
html:root .categories__lien a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blanc);
  pointer-events: auto;
}
/* pastille jaune et sa flèche */
html:root .categories__lien a::after {
  content: '';
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%230F2452' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / 14px auto no-repeat;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- survol (et focus clavier dans la carte) ---------- */
html:root .categories__carte:hover,
html:root .categories__carte:focus-within { transform: translateY(-8px); box-shadow: 0 28px 44px -20px rgba(15, 36, 82, .55); }
html:root .categories__carte:hover .categories__photo img,
html:root .categories__carte:focus-within .categories__photo img { transform: scale(1.08); }
html:root .categories__carte:hover .categories__corps::before,
html:root .categories__carte:focus-within .categories__corps::before { width: 64px; }
html:root .categories__carte:hover .categories__lien a::after,
html:root .categories__carte:focus-within .categories__lien a::after { transform: translateX(4px); }
/* écrans à souris : l'accroche se dévoile au survol (toujours visible au doigt) */
@media (hover: hover) {
  html:root .categories__texte {
    max-height: 0; opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  html:root .categories__carte:hover .categories__texte,
html:root .categories__carte:focus-within .categories__texte { max-height: 4.6em; opacity: 1; transform: none; }
}

@media (max-width: 1199px) {
  html:root .categories { --carte-l: clamp(236px, 25vw, 300px); }
  html:root .categories__nom { font-size: 21px; }
}
@media (max-width: 767px) {
  html:root .categories { --carte-l: min(272px, calc(100vw - 104px)); padding: 28px 0 12px; }
  html:root .categories::before { background-size: 380px auto; }
  html:root .categories__tete { margin-bottom: 22px; --bm-mb: 22px; }
  html:root .categories__carte { border-radius: 22px; }
  html:root .categories__corps { left: 20px; right: 20px; bottom: 20px; }
  html:root .categories__nom { font-size: 22px; }
}


/* ===== 03-destinations.css ===== */
/* ==========================================================================
   Destinations phares : carrousel infini de grandes cartes paysage (module commun 00-defile).
   Tête : titre à gauche, accroche à droite. Chaque carte : photo pleine carte, étiquette de région
   en verre dépoli (point jaune), nom, sous-titre et bouton « Voir tout » sur un voile bleu nuit.
   Au survol : la carte se soulève, la photo s'approche, le trait jaune sous le nom s'allonge.
   Autant de cartes qu'on veut : une carte dupliquée dans Elementor rejoint le carrousel.
   ========================================================================== */
html:root .destinations {
  --carte-l: clamp(320px, 38vw, 560px);    /* largeur d'une carte ; hauteur au format 4:3 */
  position: relative;
  padding: 44px 0 40px;
  background: linear-gradient(180deg, var(--blanc) 0%, var(--bleu-pale) 100%);
  overflow: hidden;
  overflow: clip;
}

/* ---------- ligne de tête : titre à gauche, accroche à droite ---------- */
html:root .destinations__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 34px; --bm-mb: 34px;
}
html:root .destinations__titres { margin-bottom: 0; --bm-mb: 0; }
html:root .destinations__chapeau {
  position: relative;
  max-width: 380px; --bm-max: 380px;
  padding-left: 22px;
  margin-bottom: 12px; --bm-mb: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
}
html:root .destinations__chapeau::before {             /* filet jaune du logo */
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: var(--accent);
}
html:root .destinations__defile { --defile-espace: 26px; }

/* ---------- la carte ---------- */
html:root .destinations__carte {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--carte-l);
  width: var(--carte-l);
  aspect-ratio: 4 / 3;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--marine);
  box-shadow: 0 20px 40px -22px rgba(15, 36, 82, .5);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease;
}
/* la photo couvre toute la carte, quel que soit son format */
html:root .destinations__photo { position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .destinations__photo .elementor-widget-container { height: 100%; }
html:root .destinations .destinations__photo img {
  width: 100%; height: 100%;
  max-width: none; --bm-max: none;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* voile : léger en haut (étiquette), dense en bas (texte) */
html:root .destinations__carte::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15, 36, 82, .28) 0%, rgba(15, 36, 82, 0) 26%, rgba(15, 36, 82, 0) 46%, rgba(15, 36, 82, .82) 100%);
  pointer-events: none;
}

/* étiquette de région : pastille en verre dépoli, point jaune */
html:root .destinations__region {
  position: absolute; z-index: 2;
  top: 20px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 40px;
  background: rgba(15, 36, 82, .28);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blanc);
}
html:root .destinations__region::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 224, 43, .25);
}

/* bas de carte : nom et sous-titre à gauche, bouton à droite */
html:root .destinations__contenu {
  position: absolute; z-index: 2;
  left: 30px; right: 26px; bottom: 26px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  color: var(--blanc);
}
html:root .destinations__textes { min-width: 0; }
html:root .destinations__nom {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blanc);
}
/* trait jaune sous le nom, qui s'allonge au survol */
html:root .destinations__nom::after {
  content: '';
  display: block;
  width: 30px; height: 3px;
  margin-top: 10px; --bm-mt: 10px;
  border-radius: 3px;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
html:root .destinations__sous-titre {
  margin-top: 8px; --bm-mt: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
html:root .destinations__bouton { flex-shrink: 0; padding: 13px 22px; }
html:root .destinations__bouton > .wp-block-button__link,
html:root .destinations__bouton .elementor-button { flex-shrink: 0; padding: 13px 22px; }
html:root .destinations__bouton::after { width: 16px; height: 12px; }
html:root .destinations__bouton > .wp-block-button__link::after,
html:root .destinations__bouton .elementor-button::after { width: 16px; height: 12px; }

/* ---------- survol (et focus clavier dans la carte) ---------- */
html:root .destinations__carte:hover,
html:root .destinations__carte:focus-within { transform: translateY(-8px); box-shadow: 0 30px 50px -24px rgba(15, 36, 82, .6); }
html:root .destinations__carte:hover .destinations__photo img,
html:root .destinations__carte:focus-within .destinations__photo img { transform: scale(1.07); }
html:root .destinations__carte:hover .destinations__nom::after,
html:root .destinations__carte:focus-within .destinations__nom::after { width: 64px; }

html:root .destinations::after {                         /* petite montgolfière au trait */
  content: ''; position: absolute; left: 48px; bottom: 30px; width: 17px; height: 26px; pointer-events: none;
  background: url("assets/img/deco/montgolfiere-petite.svg") center / contain no-repeat;
  animation: flotter 5s ease-in-out infinite;
}

@media (max-width: 1199px) {
  html:root .destinations { --carte-l: clamp(320px, 42vw, 480px); }
  html:root .destinations__carte { aspect-ratio: 5 / 4; }
  html:root .destinations__nom { font-size: 24px; }
}
@media (max-width: 991px) {
  html:root .destinations { --carte-l: clamp(300px, 56vw, 460px); }
  html:root .destinations__tete { flex-direction: column; align-items: flex-start; }
  html:root .destinations__chapeau { max-width: 560px; --bm-max: 560px; margin-bottom: 0; --bm-mb: 0; }
}
/* téléphone : cartes portrait, texte empilé */
@media (max-width: 767px) {
  html:root .destinations { --carte-l: min(290px, calc(100vw - 92px)); padding: 28px 0 32px; }
  html:root .destinations__tete { align-items: center; text-align: center; margin-bottom: 24px; --bm-mb: 24px; }
  html:root .destinations__titres { text-align: center; }
  html:root .destinations__chapeau { padding-left: 0; padding-top: 14px; font-size: 15px; }
  html:root .destinations__chapeau::before { left: 50%; top: 0; bottom: auto; width: 34px; height: 3px; transform: translateX(-50%); }
  html:root .destinations__carte { aspect-ratio: 4 / 5; border-radius: 22px; }
  html:root .destinations__region { top: 16px; left: 16px; }
  html:root .destinations__contenu { left: 20px; right: 20px; bottom: 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
  html:root .destinations__nom { font-size: 23px; }
  html:root .destinations__sous-titre { font-size: 15px; }
  html:root .destinations__bouton { padding: 10px 18px; }
html:root .destinations__bouton > .wp-block-button__link,
html:root .destinations__bouton .elementor-button { padding: 10px 18px; }
  html:root .destinations::after { left: 16px; bottom: 18px; }
}


/* ===== 04-apropos.css ===== */
/* ---------- À propos : mosaïque en damier, texte, atouts en cartes ----------
   Gauche : grille de quatre cases (2 colonnes × 3 rangées) — grande photo en arche + bandeau photo à gauche,
   photo + carte bleue du voyageur à droite. Le voyageur détouré dépasse du haut de sa carte, deux bulles
   flottent sur ses bords. Droite : surtitre, titre, chapeau, deux atouts en cartes, bouton.
   Décors (trame de points, fond de la carte, soleil jaune, montgolfières) : pseudo-éléments uniquement,
   aucun bloc vide dans l'éditeur. Chaque case se range seule dans la grille : on peut remplacer une photo
   sans rien recalculer. */
html:root .apropos {
  position: relative;
  isolation: isolate;
  overflow-x: clip;                              /* l'anneau décoratif ne crée jamais de défilement horizontal */
  padding: 96px 0 120px;
}
html:root .apropos::before {                               /* trame de points bleus derrière le coin haut gauche de la mosaïque */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: max(0px, calc(50% - 708px)); top: 64px;
  width: 152px; height: 152px;
  background: radial-gradient(circle, var(--primaire) 1.6px, transparent 2.2px) 0 0 / 17px 17px;
  opacity: .22;
}
html:root .apropos::after {                                /* grand anneau bleu très léger derrière la mosaïque */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 560px); top: 50%;
  width: 620px; height: 620px; border-radius: 50%;
  border: 1px solid var(--bleu-trait);
  transform: translate(-50%, -50%);
}

/* ---------- Grille : mosaïque | texte ---------- */
html:root .apropos__grille {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: center;
}

/* ---------- Mosaïque en damier ---------- */
html:root .apropos__photos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
  aspect-ratio: 600 / 640;
}
html:root .apropos__photo {
  position: relative;
  display: block; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bleu-pale);
  box-shadow: 0 24px 48px -28px rgba(15, 36, 82, .45);
}
html:root .apropos__photo img {                            /* l'image remplit sa case, quelle que soit l'enveloppe autour */
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none; --bm-max: none;
  object-fit: cover;
  transition: transform 1.2s ease;
}
html:root .apropos__photo:hover img { transform: scale(1.05); }
html:root .apropos__photo--arche {                         /* grande photo, sommet en arche */
  grid-column: 1; grid-row: 1 / 3;
  border-radius: 999px 999px 24px 24px;
}
html:root .apropos__photo--arche img { object-position: 50% 60%; }
html:root .apropos__photo--bas { grid-column: 1; grid-row: 3; }
html:root .apropos__photo--haut { grid-column: 2; grid-row: 1; }

/* ---------- Carte du voyageur : fond bleu, soleil jaune, montgolfières, voyageur qui dépasse ---------- */
html:root .apropos__voyageur {
  position: relative; z-index: 2;
  grid-column: 2; grid-row: 2 / 4;
}
html:root .apropos__voyageur::before {                     /* la carte : dégradé bleu du logo -> bleu nuit, soleil jaune */
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 60% 46%, var(--accent) 0 27%, transparent calc(27% + 1px)),
    radial-gradient(circle at 60% 46%, transparent 0 35%, rgba(255, 255, 255, .16) calc(35% + 1px) calc(35% + 2px), transparent calc(35% + 3px)),
    linear-gradient(160deg, var(--primaire), var(--marine));
  box-shadow: 0 24px 48px -24px rgba(15, 36, 82, .6);
}
html:root .apropos__voyageur::after {                      /* montgolfières jaunes au trait, en haut à droite de la carte */
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: 12%; top: 14%;
  width: 26%; aspect-ratio: 130 / 115;
  background: var(--accent);
  -webkit-mask: url("assets/img/deco/montgolfieres.svg") center / contain no-repeat;
          mask: url("assets/img/deco/montgolfieres.svg") center / contain no-repeat;
  opacity: .9;
  animation: flotter 6s ease-in-out infinite;
}
html:root .apropos__detoure {                              /* repère du voyageur : 20 % plus haut que la carte, il en dépasse */
  position: absolute; left: 0; right: 0; bottom: 0; top: -20%;
  z-index: 1; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  pointer-events: none;
}
html:root .apropos__detoure img {                          /* personnage centré dans la carte (il occupe 186 à 854 px sur 900) */
  position: absolute; bottom: 0; left: 50%;
  width: auto; height: 100%; max-width: none; --bm-max: none;
  transform: translateX(-57.8%);
  filter: drop-shadow(0 18px 18px rgba(15, 36, 82, .35));
}

/* ---------- Bulles flottantes ---------- */
html:root .apropos__bulle {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanc);
  box-shadow: 0 16px 32px -10px rgba(15, 36, 82, .35);
}
html:root .apropos__bulle--delai {                         /* pilule « ★ 48 h » à cheval sur la photo voisine */
  left: -44px; top: 58%;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  animation: flotter 6s ease-in-out infinite;
}
html:root .apropos__bulle--delai::before {                 /* pastille jaune */
  content: ''; display: block; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent);
}
html:root .apropos__bulle--delai::after {                  /* étoile bleu nuit posée sur la pastille */
  content: ''; position: absolute; left: 17px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px; --bm-mt: -8px;
  background: var(--sur-accent);
  -webkit-mask: url("assets/img/icones/etoile.svg") center / contain no-repeat;
          mask: url("assets/img/icones/etoile.svg") center / contain no-repeat;
}
html:root .apropos__bulle--delai strong {
  font-family: var(--titre); font-weight: 800;
  font-size: 18px; line-height: 1;
  color: var(--marine);
  white-space: nowrap;
}
html:root .apropos__bulle--emoji {                         /* bulle ronde, en haut à gauche de la carte, à cheval sur la grande photo */
  left: -30px; top: 14%;
  width: 54px; height: 54px; border-radius: 50%;
  font-size: 26px; line-height: 1;
  animation: flotter 5s ease-in-out -2s infinite;
}

/* ---------- Texte ---------- */
html:root .apropos__texte { max-width: 620px; --bm-max: 620px; }
html:root .apropos__titre { margin-bottom: 20px; --bm-mb: 20px; }
html:root .apropos__chapeau { font-size: 18px; line-height: 1.7; text-wrap: pretty; }

/* ---------- Atouts : deux cartes bleu pâle, pastille jaune à picto ---------- */
html:root .apropos__atouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px; --bm-mt: 36px;
}
html:root .apropos__atout {
  position: relative;
  padding: 92px 24px 26px;
  background: var(--bleu-pale);
  border: 1px solid transparent;
  border-radius: 20px;
  transition: transform .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
html:root .apropos__atout::before {                        /* pastille jaune */
  content: ''; position: absolute; left: 24px; top: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent);
  transition: background-color .4s ease, transform .5s ease;
}
html:root .apropos__atout::after {                         /* picto posé sur la pastille (couleur : 90-jaune.css) */
  content: ''; position: absolute; left: 37px; top: 37px;
  width: 26px; height: 26px;
  background: var(--sur-accent);
  -webkit-mask: var(--picto) center / contain no-repeat;
          mask: var(--picto) center / contain no-repeat;
  transition: transform .5s ease;
}
html:root .apropos__atout--itineraire { --picto: url("assets/img/icones/itineraire.svg"); }
html:root .apropos__atout--guide { --picto: url("assets/img/icones/guide.svg"); }
html:root .apropos__atout:hover {
  transform: translateY(-4px);
  background-color: var(--blanc);
  border-color: var(--bleu-trait);
  box-shadow: 0 22px 44px -22px rgba(15, 36, 82, .35);
}
html:root .apropos__atout:hover::before { background-color: var(--primaire); }
html:root .apropos__atout:hover::after { transform: rotateY(180deg); }
html:root .apropos__atout-titre {
  font-size: 19px; line-height: 1.35; font-weight: 700;
  margin-bottom: 6px; --bm-mb: 6px;
}
html:root .apropos__atout-texte { font-size: 15px; line-height: 1.65; text-wrap: pretty; }

html:root .apropos__actions { margin-top: 40px; --bm-mt: 40px; }
html:root .apropos__bouton { line-height: 26px; }
html:root .apropos__bouton > .wp-block-button__link,
html:root .apropos__bouton .elementor-button { line-height: 26px; }

/* ---------- Écrans intermédiaires ---------- */
@media (max-width: 1399px) {
  html:root .apropos__grille { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); column-gap: 72px; }
  html:root .apropos::after { left: calc(50% - 480px); width: 560px; height: 560px; }
}
/* deux colonnes égales : les atouts passent l'un sous l'autre, pastille à gauche */
@media (max-width: 1199px) {
  html:root .apropos { padding: 80px 0 var(--section); }
  html:root .apropos__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  html:root .apropos::before { left: 0; }
  html:root .apropos::after { display: none; }
  html:root .apropos__chapeau { font-size: 17px; }
  html:root .apropos__atouts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; --bm-mt: 28px; }
  html:root .apropos__atout { padding: 20px 22px 20px 92px; }
  html:root .apropos__atout::before { left: 22px; top: 20px; }
  html:root .apropos__atout::after { left: 35px; top: 33px; }
  html:root .apropos__actions { margin-top: 32px; --bm-mt: 32px; }
  html:root .apropos__bulle--delai { left: -36px; }
}
/* une colonne : la mosaïque au-dessus du texte */
@media (max-width: 991px) {
  html:root .apropos__grille { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  html:root .apropos__photos { width: 100%; max-width: 600px; --bm-max: 600px; }
  html:root .apropos__texte { max-width: 640px; --bm-max: 640px; }
}
@media (max-width: 767px) {
  html:root .apropos { padding-top: 56px; }
  html:root .apropos::before { width: 104px; height: 104px; top: 36px; }
  html:root .apropos__grille { row-gap: 44px; }
  html:root .apropos__photos { gap: 10px; }
  html:root .apropos__photo,
html:root .apropos__voyageur::before { border-radius: 18px; }
  html:root .apropos__photo--arche { border-radius: 999px 999px 18px 18px; }
  html:root .apropos__chapeau { font-size: 16px; line-height: 1.75; }
  html:root .apropos__atout-titre { font-size: 18px; }
  html:root .apropos__bulle--delai { left: -24px; top: 60%; gap: 7px; padding: 5px 12px 5px 5px; }
  html:root .apropos__bulle--delai::before { width: 26px; height: 26px; }
  html:root .apropos__bulle--delai::after { left: 11px; width: 14px; height: 14px; margin-top: -7px; --bm-mt: -7px; }
  html:root .apropos__bulle--delai strong { font-size: 15px; }
  html:root .apropos__bulle--emoji { left: -20px; width: 42px; height: 42px; font-size: 20px; }
}
@media (max-width: 420px) {
  html:root .apropos__atout { padding: 18px 18px 18px 82px; }
  html:root .apropos__atout::before { left: 18px; top: 18px; width: 48px; height: 48px; }
  html:root .apropos__atout::after { left: 30px; top: 30px; width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html:root .apropos__bulle,
html:root .apropos__voyageur::after { animation: none; }
  html:root .apropos__photo:hover img,
html:root .apropos__atout:hover,
html:root .apropos__atout:hover::after { transform: none; }
}

/* mosaïque agrandie (demande du client : utiliser l'espace libre à gauche) */
html:root .apropos__grille { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: 64px; }
@media (min-width: 1680px) { html:root .apropos__photos { width: calc(100% + 110px); margin-left: -110px; --bm-ml: -110px; } }
@media (max-width: 1399px) { html:root .apropos__grille { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: 56px; } }
@media (max-width: 1199px) { html:root .apropos__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; } }
@media (max-width: 991px) { html:root .apropos__grille { grid-template-columns: minmax(0, 1fr); } html:root .apropos__photos { max-width: 680px; --bm-max: 680px; } }


/* ===== 04-valeurs.css ===== */
/* ---------- Nos valeurs : bande bleu nuit, photo en feuille, vignettes rondes, charte en cartes ----------
   Fond --marine éclairé de deux halos (bleu et vert du logo), d'un motif de voyage au trait et
   d'anneaux en orbite (rappel de l'orbite du logo). Les halos sont des fonds dégradés ; les autres décors
   (motif, anneaux, cadre, trame de points, pastilles et pictos) sont des pseudo-éléments : aucun bloc vide
   dans l'éditeur.
   Les cartes se rangent dans une grille à deux colonnes : une carte dupliquée prend la case suivante. */
html:root .valeurs {
  /* teintes locales, toutes dérivées des couleurs de la marque */
  --v-texte: color-mix(in srgb, var(--blanc) 76%, transparent);
  --v-voile: color-mix(in srgb, var(--blanc) 5%, transparent);
  --v-voile-fort: color-mix(in srgb, var(--blanc) 9%, transparent);
  --v-trait: color-mix(in srgb, var(--blanc) 12%, transparent);
  --v-ombre: color-mix(in srgb, var(--marine) 55%, #000);
  /* pictos au trait (24 × 24), posés en masque : leur couleur suit background-color */
  --v-picto-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.6v3.9l2.6 1.7M9.4 2.6h5.2M12 2.6V6M18.3 6.8l1.5-1.5'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--v-texte);
  background:
    radial-gradient(720px 560px at 6% 0%, color-mix(in srgb, var(--primaire) 72%, transparent), transparent 72%),
    radial-gradient(620px 520px at 100% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    var(--marine);
}
html:root .valeurs::before {                               /* motif de voyage au trait, en blanc très léger, plus présent à droite */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--blanc);
  opacity: .06;
  -webkit-mask: url("assets/img/deco/motif-voyage.svg") 0 0 / 440px auto repeat, linear-gradient(115deg, transparent 30%, #000 85%);
  -webkit-mask-composite: source-in;
          mask: url("assets/img/deco/motif-voyage.svg") 0 0 / 440px auto repeat, linear-gradient(115deg, transparent 30%, #000 85%);
          mask-composite: intersect;
}
html:root .valeurs::after {                                /* trois anneaux fins en orbite, en haut à droite (rappel de l'orbite du logo) */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -520px; right: -470px;
  width: 1040px; height: 1040px;
  background: radial-gradient(circle closest-side,
    transparent 0 55.8%, var(--v-trait) 55.9% 56.1%, transparent 56.2% 72.8%,
    color-mix(in srgb, var(--blanc) 8%, transparent) 72.9% 73.1%, transparent 73.2% 89.8%,
    color-mix(in srgb, var(--blanc) 5%, transparent) 89.9% 90.1%, transparent 90.2%);
}

/* ---------- Grille haute : photo à gauche, texte à droite ---------- */
html:root .valeurs__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: center;
}

/* ---------- Photo en feuille, cadre décalé au trait vert, trame de points, pastille 48 h ---------- */
html:root .valeurs__visuel {
  --feuille: 200px 28px 200px 28px;             /* deux coins très arrondis : une feuille */
  position: relative;
  padding: 0 28px 28px 0;                       /* place du cadre décalé */
}
html:root .valeurs__visuel::before {                       /* cadre au trait vert, décalé vers le bas à droite */
  content: ''; position: absolute; left: 28px; top: 28px; right: 0; bottom: 0; z-index: 0;
  border: 2px solid var(--accent);
  border-radius: var(--feuille);
  opacity: .7;
  pointer-events: none;
}
html:root .valeurs__visuel::after {                        /* trame de points verts derrière le coin haut gauche */
  content: ''; position: absolute; left: -24px; top: -24px; z-index: 0;
  width: 136px; height: 136px;
  background: radial-gradient(circle, var(--accent) 1.6px, transparent 2.2px) 0 0 / 17px 17px;
  opacity: .55;
  pointer-events: none;
}
html:root .valeurs__photo {
  position: relative; z-index: 1;
  display: block; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--feuille);
  overflow: hidden;
  background: var(--primaire);
  box-shadow: 0 40px 70px -24px var(--v-ombre);
}
html:root .valeurs__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 50%;
  transition: transform 1.2s ease;
}
html:root .valeurs__visuel:hover .valeurs__photo img { transform: scale(1.04); }

html:root .valeurs__badge {
  position: absolute; right: -36px; bottom: 96px; z-index: 2;
  width: 264px;
  padding: 20px 22px 20px 86px;
  background: var(--blanc);
  border-radius: 20px;
  box-shadow: 0 24px 50px -12px var(--v-ombre);
  animation: flotter 6s ease-in-out infinite;
}
html:root .valeurs__badge::before {                        /* pastille verte */
  content: ''; position: absolute; left: 20px; top: 50%;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--vert-pale);
  transform: translateY(-50%);
}
html:root .valeurs__badge::after {                         /* horloge blanche posée sur la pastille */
  content: ''; position: absolute; left: 32px; top: 50%;
  width: 26px; height: 26px;
  background: var(--blanc);
  -webkit-mask: var(--v-picto-horloge) center / contain no-repeat;
          mask: var(--v-picto-horloge) center / contain no-repeat;
  transform: translateY(-50%);
}
html:root .valeurs__badge-nombre {
  font-family: var(--titre); font-weight: 800;
  font-size: 32px; line-height: 1; letter-spacing: -.01em;
  color: var(--primaire);
}
html:root .valeurs__badge-texte {
  margin-top: 6px; --bm-mt: 6px;
  font-size: 13px; line-height: 1.4; font-weight: 500;
  color: var(--marine);
  text-wrap: balance;
}

/* ---------- Texte : surtitre vert, titre blanc, introduction, bandeau des vignettes ---------- */
html:root .valeurs .valeurs__surtitre { color: var(--accent); }     /* vert sur bleu nuit : contraste 5,9:1 */
html:root .valeurs .valeurs__titre { color: var(--blanc); }             /* deux classes : passe devant une couleur de titre posée par .bloc */
html:root .valeurs__titre { max-width: 620px; --bm-max: 620px; margin-bottom: 22px; --bm-mb: 22px; }
html:root .valeurs__intro {
  max-width: 660px; --bm-max: 660px;
  font-size: 18px; line-height: 1.75;
  color: var(--v-texte);
  text-wrap: pretty;
}
html:root .valeurs__partage {
  display: flex; align-items: center; gap: 24px;
  max-width: 700px; --bm-max: 700px;
  margin-top: 40px; --bm-mt: 40px;
  padding: 14px 32px 14px 14px;
  background: var(--v-voile);
  border: 1px solid var(--v-trait);
  border-radius: 999px;
}
html:root .valeurs__vignettes { display: flex; flex: none; align-items: center; }
html:root .valeurs__vignette {
  position: relative;
  flex: none;
  width: 76px; height: 76px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--blanc);
  background: var(--primaire);
  box-shadow: 0 10px 22px -6px var(--v-ombre);
  transition: transform .4s ease;
}
html:root .valeurs__vignette + .valeurs__vignette { margin-left: -18px; --bm-ml: -18px; }
html:root .valeurs__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
html:root .valeurs__vignette:hover { z-index: 1; transform: translateY(-6px) scale(1.08); }
html:root .valeurs__partage-texte {
  font-size: 15px; line-height: 1.6; font-weight: 500;
  color: var(--blanc);
  text-wrap: pretty;
}

/* ---------- Cartes de la charte : verre dépoli, pastille verte à picto, grand numéro au trait ----------
   Grille à deux colonnes lue ligne à ligne (01 02 / 03 04), cartes d'une même ligne à même hauteur ;
   une carte dupliquée prend la case suivante. */
html:root .valeurs__cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 104px; --bm-mt: 104px;
}
html:root .valeurs__carte {
  /* picto par défaut (coche) d'une carte ajoutée sans modificateur ; les modificateurs ci-dessous le remplacent */
  --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.3 4.3L19 7.2'/%3E%3C/svg%3E");
  position: relative;
  padding: 40px 44px 42px 132px;
  background-color: var(--v-voile);
  /* filet dégradé vert → bleu en haut de la carte : il se déploie au survol */
  background-image: linear-gradient(90deg, var(--accent), var(--primaire));
  background-size: 0 3px; background-position: 0 0; background-repeat: no-repeat;
  border: 1px solid var(--v-trait);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .4s ease, background-color .4s ease, background-size .6s ease, border-color .4s ease, box-shadow .4s ease;
}
html:root .valeurs__carte::before {                        /* pastille verte + halo */
  content: ''; position: absolute; left: 40px; top: 40px;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: background-color .4s ease, box-shadow .4s ease, transform .5s ease;
}
html:root .valeurs__carte::after {                         /* picto blanc posé sur la pastille */
  content: ''; position: absolute; left: 57px; top: 57px;
  width: 30px; height: 30px;
  background: var(--blanc);
  -webkit-mask: var(--picto) center / contain no-repeat;
          mask: var(--picto) center / contain no-repeat;
  transition: background-color .4s ease, transform .5s ease;
}
html:root .valeurs__carte--tarif { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V5A1.5 1.5 0 0 1 5 3.5h7.6a1.5 1.5 0 0 1 1.06.44l6.9 6.9a1.5 1.5 0 0 1 0 2.12l-7.6 7.6a1.5 1.5 0 0 1-2.12 0l-6.9-6.9a1.5 1.5 0 0 1-.44-1.06Z'/%3E%3Ccircle cx='8.4' cy='8.4' r='1.6'/%3E%3Cpath d='m10.5 15.5 5-5'/%3E%3C/svg%3E"); }
html:root .valeurs__carte--delai { --picto: var(--v-picto-horloge); }
html:root .valeurs__carte--humain { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7.8' r='3.2'/%3E%3Cpath d='M2.8 20v-.6A5.4 5.4 0 0 1 8.2 14h1.6a5.4 5.4 0 0 1 5.4 5.4v.6'/%3E%3Ccircle cx='17.2' cy='9' r='2.5'/%3E%3Cpath d='M16.6 14h.6a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
html:root .valeurs__carte--nature { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c0 9-5 15.2-11.5 15.2-1 0-1.9-.2-2.7-.5-.4-.9-.6-1.9-.6-3C5.2 8.6 11.4 4 20 4Z'/%3E%3Cpath d='M3.5 20.5 14.5 9.5'/%3E%3C/svg%3E"); }

html:root .valeurs__numero {                               /* grand numéro au trait : modifiable, il ne pèse pas sur la mise en page */
  position: absolute; top: 26px; right: 32px;
  font-family: var(--titre); font-weight: 800;
  font-size: 64px; line-height: 1; letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--blanc) 24%, transparent);
  pointer-events: none;
  transition: -webkit-text-stroke-color .4s ease;
}
html:root .valeurs__carte-titre {
  max-width: 290px; --bm-max: 290px;                              /* titres sur deux lignes équilibrées, loin du numéro */
  margin-bottom: 14px; --bm-mb: 14px;
  font-size: 22px; line-height: 1.36; font-weight: 700;
  color: var(--blanc);
}
html:root .valeurs__carte-texte {
  font-size: 16px; line-height: 1.75;
  color: var(--v-texte);
  text-wrap: pretty;
}
html:root .valeurs__carte-texte strong {                   /* « 48 heures » souligné au surligneur vert */
  font-weight: 700; color: var(--blanc);
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent) 55%, transparent) 60%);
  padding-inline: 2px;
}

html:root .valeurs__carte:hover {
  transform: translateY(-6px);
  background-color: var(--v-voile-fort);
  background-size: 100% 3px;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 30px 60px -20px var(--v-ombre);
}
html:root .valeurs__carte:hover::before {
  background-color: var(--blanc);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: rotate(-10deg);
}
html:root .valeurs__carte:hover::after { background-color: var(--accent); transform: rotate(-10deg); }
html:root .valeurs__carte:hover .valeurs__numero { -webkit-text-stroke-color: var(--accent); }

/* ---------- Écrans intermédiaires ---------- */
@media (max-width: 1399px) {
  html:root .valeurs__grille { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 72px; }
  html:root .valeurs__badge { right: -32px; }
}
@media (max-width: 1199px) {
  html:root .valeurs__grille { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 56px; }
  html:root .valeurs__visuel { --feuille: 170px 24px 170px 24px; }
  html:root .valeurs__badge { right: -28px; bottom: 72px; width: 248px; padding: 16px 18px 16px 78px; }
  html:root .valeurs__badge::before { left: 16px; width: 46px; height: 46px; }
  html:root .valeurs__badge::after { left: 27px; width: 24px; height: 24px; }
  html:root .valeurs__badge-nombre { font-size: 28px; }
  html:root .valeurs__intro { font-size: 17px; }
  html:root .valeurs__partage { margin-top: 32px; --bm-mt: 32px; }
  html:root .valeurs__vignette { width: 66px; height: 66px; }
  html:root .valeurs__vignette + .valeurs__vignette { margin-left: -16px; --bm-ml: -16px; }
  html:root .valeurs__cartes { margin-top: 88px; --bm-mt: 88px; }
  html:root .valeurs__carte { padding: 36px 36px 38px 120px; }
  html:root .valeurs__carte::before { left: 34px; top: 36px; }
  html:root .valeurs__carte::after { left: 51px; top: 53px; }
  html:root .valeurs__numero { top: 24px; right: 28px; font-size: 56px; }
  html:root .valeurs__carte-titre { font-size: 20px; max-width: 270px; --bm-max: 270px; }
}
/* colonne de texte étroite à côté de la photo (992 à 1279 px) : les vignettes passent au-dessus de la phrase,
   qui garde toute la largeur du bandeau ; la pilule devient une carte arrondie */
@media (min-width: 992px) and (max-width: 1279px) {
  html:root .valeurs__partage { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px 22px; border-radius: 24px; }
}
/* cartes étroites (992 à 1099 px) : numéro plus petit, remonté dans l'angle, pour ne pas toucher la 2e ligne du titre */
@media (min-width: 992px) and (max-width: 1099px) {
  html:root .valeurs__numero { top: 18px; right: 22px; font-size: 48px; }
}

/* photo pleine largeur au-dessus du texte ; cartes sur deux colonnes, pastille et numéro au-dessus du titre */
@media (max-width: 991px) {
  html:root .valeurs__grille { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  html:root .valeurs__visuel { --feuille: 180px 24px 180px 24px; max-width: 760px; --bm-max: 760px; }   /* la photo (889 px de large) n'est pas agrandie */
  html:root .valeurs__photo { aspect-ratio: 16 / 10; }
  html:root .valeurs__badge { right: 12px; bottom: 40px; }
  html:root .valeurs__titre,
html:root .valeurs__intro,
html:root .valeurs__partage { max-width: 720px; --bm-max: 720px; }
  html:root .valeurs__cartes { gap: 20px; margin-top: 64px; --bm-mt: 64px; }
  html:root .valeurs__carte { padding: 124px 30px 34px; }
  html:root .valeurs__carte::before { left: 30px; top: 32px; }
  html:root .valeurs__carte::after { left: 47px; top: 49px; }
  html:root .valeurs__numero { top: 32px; right: 28px; font-size: 56px; }
  html:root .valeurs__carte-titre { max-width: 270px; --bm-max: 270px; }  /* deux lignes pour tous les titres : les textes d'une rangée partent à la même hauteur */
}
/* une colonne de cartes : la pastille repasse à gauche du texte */
@media (max-width: 767px) {
  html:root .valeurs::before { opacity: .045; }
  html:root .valeurs::after { top: -700px; right: -640px; }
  html:root .valeurs__grille { row-gap: 44px; }
  html:root .valeurs__visuel { --feuille: 140px 20px 140px 20px; padding: 0 16px 16px 0; }
  html:root .valeurs__visuel::before { left: 16px; top: 16px; }
  html:root .valeurs__visuel::after { left: -12px; top: -12px; width: 96px; height: 96px; }
  html:root .valeurs__photo { aspect-ratio: 4 / 3; }
  html:root .valeurs__intro { font-size: 16px; }
  html:root .valeurs__cartes { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 48px; --bm-mt: 48px; }
  html:root .valeurs__carte { padding: 30px 28px 32px 108px; border-radius: 20px; }
  html:root .valeurs__carte::before { left: 26px; top: 30px; width: 58px; height: 58px; }
  html:root .valeurs__carte::after { left: 41px; top: 45px; width: 28px; height: 28px; }
  html:root .valeurs__numero { top: 22px; right: 24px; font-size: 48px; }
  html:root .valeurs__carte-titre { font-size: 20px; margin-bottom: 10px; --bm-mb: 10px; padding-right: 64px; max-width: none; --bm-max: none; }
}
/* téléphones : pastille et numéro au-dessus du titre, pastille 48 h à cheval sur le bas de la photo */
@media (max-width: 575px) {
  html:root .valeurs__photo { aspect-ratio: 1 / 1; }
  html:root .valeurs__badge { left: 16px; right: auto; bottom: 0; width: 226px; padding: 14px 16px 14px 70px; border-radius: 16px; }
  html:root .valeurs__badge::before { left: 14px; width: 42px; height: 42px; box-shadow: 0 0 0 5px var(--vert-pale); }
  html:root .valeurs__badge::after { left: 24px; width: 22px; height: 22px; }
  html:root .valeurs__badge-nombre { font-size: 26px; }
  html:root .valeurs__badge-texte { font-size: 12px; }
  html:root .valeurs__partage { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 22px 22px; border-radius: 24px; }
  html:root .valeurs__vignette { width: 62px; height: 62px; }
  html:root .valeurs__vignette + .valeurs__vignette { margin-left: -14px; --bm-ml: -14px; }
  html:root .valeurs__carte { padding: 110px 24px 30px; }
  html:root .valeurs__carte::before { left: 24px; top: 28px; }
  html:root .valeurs__carte::after { left: 39px; top: 43px; }
  html:root .valeurs__numero { top: 30px; right: 24px; font-size: 50px; }
  html:root .valeurs__carte-titre { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:root .valeurs__badge { animation: none; }
  html:root .valeurs__carte:hover,
html:root .valeurs__vignette:hover,
html:root .valeurs__carte:hover::before,
html:root .valeurs__carte:hover::after,
html:root .valeurs__visuel:hover .valeurs__photo img { transform: none; }
}

/* navigateurs sans color-mix() (Safari < 16.2, Chrome < 111, Firefox < 113) : les teintes locales seraient
   invalides au calcul (fond transparent, titres blancs sur page blanche) ; on repasse sur les couleurs pleines */
@supports not (color: color-mix(in srgb, red, blue)) {
  html:root .valeurs {
    --v-texte: var(--blanc);
    --v-voile: transparent;
    --v-voile-fort: transparent;
    --v-trait: var(--primaire);
    --v-ombre: var(--marine);
    background: var(--marine);
  }
  html:root .valeurs__numero { -webkit-text-stroke: 1.5px var(--primaire); }
  html:root .valeurs__carte:hover { border-color: var(--accent); }
}


/* ===== 05-tours.css ===== */
/* ---------- Tours populaires : bande bleu pâle à motif, cartes qui débordent sur le blanc ----------
   Valeurs du gabarit (.tour-box, .tour-box_img, .tour-content, .tour-rating, .tour-box_price,
   .tour-action, .slider-drag-cursor) : carte 312 px, gouttière 24 px, bordure 1px #BCCED2
   sans filet haut, rayon 16 px, photo à voile dégradé noir 0→20 %, contenu 24/24/16,
   titre 18 px/500, prix 24 px/500 + 18 px, bouton contour gris 10px 19.5px,
   ombre de survol 0 20px 20px rgba(204,204,204,.25), pastille 120 px sombre à 70 % floutée.
   La bande s'arrête au bas des photos : un « sol » blanc pleine largeur, accroché
   à la piste, recouvre le motif sous les photos. */
html:root .tours {
  --photo-h: 275px;
  --pas-gouttiere: 24px;
  --noir-titre: var(--marine);
  position: relative;
  padding: 120px 0 0;
  overflow: hidden;
  overflow-x: clip;               /* les cartes hors champ ne font pas défiler la page ; l'ombre passe dessous */
  overflow-y: visible;
}
html:root .tours__tete { margin-bottom: 52px; --bm-mb: 52px; }
html:root .tours__chapeau {
  max-width: 660px; --bm-max: 660px;
  margin-top: 14px; --bm-mt: 14px;
  font-size: 18px; line-height: 26px;   /* .sec-text du gabarit */
}

/* ---------- Curseur : 8 cartes empilées dans la même cellule, décalées par rang ---------- */
html:root .tours__curseur {
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  outline-offset: 8px;
}
/* sol blanc pleine largeur sous les photos : la bande bleu pâle s'arrête au bas des photos */
html:root .tours__curseur::before {
  content: '';
  position: absolute;
  top: var(--photo-h); bottom: -1px;
  left: 50%; width: 100vw;
  transform: translateX(-50%);
  background: var(--blanc);
}
html:root .tours__piste {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--pas-gouttiere);
}
html:root .tours__carte {
  --i: 0;
  grid-area: 1 / 1;
  transform: translateX(calc(var(--i) * (100% + var(--pas-gouttiere))));
  opacity: 0; visibility: hidden;
  transition: transform .7s cubic-bezier(.25, .8, .25, 1), opacity .7s ease, visibility .7s;
}
html:root .tours__carte--r1 { --i: 1; }
html:root .tours__carte--r2 { --i: 2; }
html:root .tours__carte--r3 { --i: 3; }
html:root .tours__carte--r4 { --i: 4; }
html:root .tours__carte--r5 { --i: 5; }
html:root .tours__carte--r6 { --i: -2; }
html:root .tours__carte--r7 { --i: -1; }
html:root .tours__carte--r0,
html:root .tours__carte--r1,
html:root .tours__carte--r2,
html:root .tours__carte--r3 { opacity: 1; visibility: visible; }

/* ---------- Carte ---------- */
html:root .tours__boite {
  position: relative;
  height: 100%;
  background: var(--blanc);
  border: 1px solid #C0CADD;         /* gris bleuté (le #BCCED2 du gabarit, ramené vers le bleu du logo) */
  border-top-color: transparent;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .4s ease;
}
html:root .tours__boite:hover,
html:root .tours__carte--r1 .tours__boite { box-shadow: 0 20px 20px rgba(204, 204, 204, .25); }

html:root .tours__photo {
  position: relative; z-index: 2;
  display: block;
  height: var(--photo-h);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
html:root .tours__photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 88.18%);
  pointer-events: none;
}
html:root .tours__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform 1.3s ease;
}
html:root .tours__boite:hover .tours__photo img { transform: scale(1.3); }

html:root .tours__contenu { padding: 24px 24px 16px; }
html:root .tours__nom {
  font-size: 18px; line-height: 1.417; font-weight: 500;
  color: var(--noir-titre);
  margin-top: -0.32em; --bm-mt: -0.32em; margin-bottom: 5px; --bm-mb: 5px;
  min-height: calc(2em * 1.417);     /* titres sur deux lignes : les pieds de carte restent alignés */
  text-wrap: balance;
}
html:root .tours__nom a { transition: color .3s; }
html:root .tours__nom a:hover { color: var(--primaire); }

/* à la place des étoiles et de la note : repère + région */
html:root .tours__region {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; line-height: 16px;
  color: var(--noir-titre);
  margin-bottom: 13px; --bm-mb: 13px;
}
html:root .tours__region::before {
  content: '';
  flex: 0 0 18px; height: 18px;
  margin: -1px 0; --bm-mt: -1px; --bm-mr: 0; --bm-mb: -1px; --bm-ml: 0;
  background: var(--accent);
  -webkit-mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
          mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
}

/* à la place du prix : « Sur devis » en gros, « sous 48 h » en petit */
html:root .tours__prix {
  font-family: var(--corps);
  font-size: 18px; font-weight: 400; line-height: 36px;
  color: var(--texte);
  margin-bottom: 35px; --bm-mb: 35px;
}
html:root .tours__prix strong {
  font-weight: 500;
  font-size: 24px; line-height: 36px;
  letter-spacing: .02em;
  color: var(--noir-titre);
}

html:root .tours__action {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
html:root .tours__duree {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; line-height: 26px;
  color: var(--marine);
}
html:root .tours__duree::before {
  content: '';
  width: 16px; height: 16px;
  background: var(--accent);         /* picto vert, comme le repère de la région */
  -webkit-mask: url("assets/img/icones/horloge.svg") center / contain no-repeat;
          mask: url("assets/img/icones/horloge.svg") center / contain no-repeat;
}
html:root .tours__reserver {
  padding: 10px 19.5px;
  line-height: 24px;
  font-weight: 500;
  border-color: var(--trait);
}
html:root .tours__reserver > .wp-block-button__link,
html:root .tours__reserver .elementor-button {
  padding: 10px 19.5px;
  line-height: 24px;
  font-weight: 500;
  border-color: var(--trait);
}

/* ---------- Adaptations ---------- */
@media (max-width: 1199px) {
  html:root .tours__piste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:root .tours__carte--r3 { opacity: 0; visibility: hidden; }
  html:root .tours__reserver { padding: 10px 15px; }
html:root .tours__reserver > .wp-block-button__link,
html:root .tours__reserver .elementor-button { padding: 10px 15px; }
}
@media (max-width: 991px) {
  html:root .tours__piste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .tours__carte--r2 { opacity: 0; visibility: hidden; }
  html:root .tours__carte--r1 .tours__boite:not(:hover) { box-shadow: none; }
}
@media (max-width: 767px) {
  html:root .tours__chapeau { font-size: 16px; line-height: 26px; }
  html:root .tours__tete { margin-bottom: 36px; --bm-mb: 36px; }
}
@media (max-width: 575px) {
  html:root .tours { --photo-h: 250px; }
  html:root .tours__piste { grid-template-columns: minmax(0, 1fr); }
  html:root .tours__carte--r1 { opacity: 0; visibility: hidden; }
}


/* ===== 06-galerie.css ===== */
/* ---------- Galerie : mosaïque de 7 photos en 5 colonnes ----------
   Valeurs du gabarit : colonnes de 250 px, gouttière 17 px, rayon 16 px,
   voile noir à 50 % + loupe au survol. Courbes fines, avion et ancre au trait. */
html:root .galerie {
  position: relative;
  padding-block: var(--section) 60px;
  overflow: hidden;
  background: url("assets/img/deco/courbe-galerie.svg") center 40% / 1920px auto no-repeat;
}
html:root .galerie .wrap { position: relative; z-index: 2; }
html:root .galerie__tete { margin-bottom: 49px; --bm-mb: 49px; }

html:root .galerie__grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 17px;
  align-items: center;
}
html:root .galerie__colonne { display: flex; flex-direction: column; gap: 17px; }

html:root .galerie__photo {
  position: relative;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
html:root .galerie__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
html:root .galerie__photo--moyenne { aspect-ratio: 250 / 234; }
html:root .galerie__photo--petite { aspect-ratio: 250 / 194; }
html:root .galerie__photo--haute { aspect-ratio: 250 / 405; }

/* survol : voile et loupe, comme la référence */
html:root .galerie__photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: rgba(13, 13, 12, .5);
  border-radius: 16px;
  opacity: 0; transform: scale(0);
  transition: opacity .4s ease, transform .4s ease;
}
html:root .galerie__photo::after {
  content: '';
  position: absolute; z-index: 2;
  left: calc(50% - 20px); top: calc(50% - 20px);
  width: 40px; height: 40px;
  background: var(--blanc);
  -webkit-mask: url("assets/img/icones/recherche.svg") center / contain no-repeat;
          mask: url("assets/img/icones/recherche.svg") center / contain no-repeat;
  transform: scale(0);
  transition: transform .4s ease;
}
html:root .galerie__photo:hover::before { opacity: 1; transform: scale(1); }
html:root .galerie__photo:hover::after { transform: scale(1); }
html:root .galerie__photo:hover img { transform: scale(1.06); }

/* illustrations au trait */
html:root .galerie::before,
html:root .galerie::after { content: ''; position: absolute; z-index: 1; pointer-events: none; background: center / contain no-repeat; }
html:root .galerie::before { left: 96px; top: 390px; width: 84px; height: 48px; background-image: url("assets/img/deco/avion.svg"); animation: flotter 5s ease-in-out infinite; }
html:root .galerie::after { right: 132px; bottom: 150px; width: 54px; height: 66px; background-image: url("assets/img/deco/ancre.svg"); }

@media (max-width: 1399px) {
  html:root .galerie::before { left: 24px; top: 150px; }
  html:root .galerie::after { right: 32px; }
}
@media (max-width: 991px) {
  html:root .galerie__grille { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  html:root .galerie__colonne--3 { grid-column: 1 / -1; order: -1; }
  html:root .galerie__colonne--3 .galerie__photo--haute { aspect-ratio: 16 / 10; }
  html:root .galerie__colonne--1 .galerie__photo--moyenne,
html:root .galerie__colonne--5 .galerie__photo--moyenne { aspect-ratio: 250 / 194; }
  html:root .galerie::before,
html:root .galerie::after { display: none; }
}
@media (max-width: 575px) {
  html:root .galerie__grille,
html:root .galerie__colonne { gap: 12px; }
}

/* ---------- Planches : plusieurs mosaïques superposées, une seule visible (flèches, glisser, défilement auto) ---------- */
html:root .galerie__planches { display: grid; }
html:root .galerie__planche {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
html:root .galerie__planche.est-actif { opacity: 1; visibility: visible; }
html:root .galerie__commandes { display: flex; justify-content: center; gap: 16px; margin-top: 40px; --bm-mt: 40px; }
html:root .galerie__fleche {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--marine); background: var(--blanc);
  font-size: 0; line-height: 0; color: var(--marine);
  cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
html:root .galerie__fleche::before {
  content: ''; position: absolute; inset: 0; margin: auto; --bm-mt: auto; --bm-mr: auto; --bm-mb: auto; --bm-ml: auto; width: 20px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .galerie__fleche--prec::before { transform: scaleX(-1); }
html:root .galerie__fleche:hover { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }

/* ---------- Visionneuse (clic sur une photo) : toutes les photos du carnet en diaporama ---------- */
html:root .visionneuse {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 96px;
  background: rgba(13, 13, 12, .92);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
html:root .visionneuse.est-ouverte { opacity: 1; visibility: visible; }
html:root .visionneuse__cadre { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; max-width: 100%; --bm-max: 100%; max-height: 100%; text-align: center; }
html:root .visionneuse__image { display: block; max-width: min(1200px, 100%); --bm-max: min(1200px, 100%); max-height: calc(100vh - 150px); width: auto; height: auto; margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; border-radius: 12px; }
html:root .visionneuse__legende { margin-top: 16px; --bm-mt: 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
html:root .visionneuse__compteur { margin-top: 6px; --bm-mt: 6px; font-size: 13px; color: rgba(255, 255, 255, .55); }
html:root .visionneuse__bouton {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08); color: var(--blanc); font-size: 0; cursor: pointer;
}
html:root .visionneuse__bouton:hover { background: var(--primaire); border-color: var(--primaire); }
html:root .visionneuse__bouton::before {
  content: ''; position: absolute; inset: 0; margin: auto; --bm-mt: auto; --bm-mr: auto; --bm-mb: auto; --bm-ml: auto; width: 20px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .visionneuse__bouton--prec { left: 24px; top: 50%; margin-top: -26px; --bm-mt: -26px; }
html:root .visionneuse__bouton--prec::before { transform: scaleX(-1); }
html:root .visionneuse__bouton--suiv { right: 24px; top: 50%; margin-top: -26px; --bm-mt: -26px; }
html:root .visionneuse__bouton--fermer { right: 24px; top: 24px; }
html:root .visionneuse__bouton--fermer::before {
  width: 16px; height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m2 2 12 12M14 2 2 14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m2 2 12 12M14 2 2 14'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  html:root .visionneuse { padding: 70px 12px 90px; }
  html:root .visionneuse__bouton--prec,
html:root .visionneuse__bouton--suiv { top: auto; bottom: 24px; margin-top: 0; --bm-mt: 0; }
  html:root .visionneuse__bouton--prec { left: calc(50% - 64px); }
  html:root .visionneuse__bouton--suiv { right: calc(50% - 64px); }
}


/* ===== 07-chiffres.css ===== */
/* ---------- Chiffres : bandeau photo voilé de bleu nuit, quatre cartes en verre dépoli ----------
   Un panneau arrondi dans le conteneur : photo de fond (élément Image, remplaçable dans l'éditeur),
   voile bleu nuit + halo jaune, montgolfières jaunes au trait. Chaque carte : pastille jaune à picto,
   grand nombre jaune (élément Compteur dans Elementor), petit trait jaune, libellé blanc.
   Décors en pseudo-éléments uniquement ; les cartes se rangent seules dans la grille
   (une carte ajoutée prend la case suivante, picto par défaut : coche). */
html:root .chiffres {
  position: relative;
  padding: 72px 0 112px;
}

/* ---------- Panneau ---------- */
html:root .chiffres__panneau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 80px 56px;
  border-radius: 32px;
  background: var(--marine);
  box-shadow: 0 40px 80px -40px rgba(15, 36, 82, .55);
}
html:root .chiffres__fond { position: absolute; inset: 0; z-index: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .chiffres__fond img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none; --bm-max: none;
  object-fit: cover; object-position: 50% 55%;
}
html:root .chiffres__panneau::before {                     /* voile bleu nuit (plus dense à gauche) et halo jaune en bas à gauche */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(520px 340px at 0% 100%, rgba(245, 224, 43, .22), transparent 70%),
    linear-gradient(100deg, rgba(15, 36, 82, .9) 0%, rgba(15, 36, 82, .7) 50%, rgba(27, 68, 156, .5) 100%);
}
html:root .chiffres__panneau::after {                      /* montgolfières jaunes au trait, en haut à droite */
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  right: 28px; top: 10px;
  width: 70px; aspect-ratio: 130 / 115;
  background: var(--accent);
  -webkit-mask: url("assets/img/deco/montgolfieres.svg") center / contain no-repeat;
          mask: url("assets/img/deco/montgolfieres.svg") center / contain no-repeat;
  opacity: .85;
  animation: flotter 6s ease-in-out infinite;
}

/* ---------- Cartes ---------- */
html:root .chiffres__rangee {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
html:root .chiffres__carte {
  --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.3 4.3L19 7.2'/%3E%3C/svg%3E");
  position: relative;
  padding: 104px 20px 36px;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  transition: transform .4s ease, background-color .4s ease, border-color .4s ease;
}
html:root .chiffres__carte::before {                       /* pastille jaune + halo */
  content: ''; position: absolute; left: 50%; top: 32px;
  width: 56px; height: 56px; margin-left: -28px; --bm-ml: -28px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(245, 224, 43, .16);
  transition: transform .5s ease, box-shadow .4s ease;
}
html:root .chiffres__carte::after {                        /* picto bleu nuit posé sur la pastille */
  content: ''; position: absolute; left: 50%; top: 47px;
  width: 26px; height: 26px; margin-left: -13px; --bm-ml: -13px;
  background: var(--sur-accent);
  -webkit-mask: var(--picto) center / contain no-repeat;
          mask: var(--picto) center / contain no-repeat;
  transition: transform .5s ease;
}
html:root .chiffres__carte--1 { --picto: url("assets/img/icones/calendrier.svg"); }
html:root .chiffres__carte--2 { --picto: url("assets/img/icones/itineraire.svg"); }
html:root .chiffres__carte--3 { --picto: url("assets/img/icones/horloge.svg"); }
html:root .chiffres__carte--4 {                            /* médaille : réseaux et labels */
  --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m12 6.2.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 8.3l2-.3Z'/%3E%3Cpath d='M8.4 13.8 7 21l5-2.6 5 2.6-1.4-7.2'/%3E%3C/svg%3E");
}
html:root .chiffres__carte:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, .14);
  border-color: rgba(245, 224, 43, .55);
}
html:root .chiffres__carte:hover::before { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(245, 224, 43, .2); }
html:root .chiffres__carte:hover::after { transform: scale(1.08) rotate(-8deg); }

html:root .chiffres__disque {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
html:root .chiffres__nombre,
html:root .chiffres__compteur .elementor-counter-number-wrapper {
  display: block;
  font-family: var(--titre); font-weight: 800;
  font-size: 60px; line-height: 1; letter-spacing: -.02em;
  color: var(--accent);
  white-space: nowrap;
}
html:root .chiffres__nombre::after,
html:root .chiffres__compteur .elementor-counter-number-wrapper::after {                       /* petit trait jaune sous le nombre */
  content: ''; display: block;
  width: 32px; height: 3px; margin: 16px auto 14px; --bm-mt: 16px; --bm-mr: auto; --bm-mb: 14px; --bm-ml: auto;
  border-radius: 3px;
  background: var(--accent);
  opacity: .6;
}
html:root .chiffres__libelle,
html:root .chiffres__compteur .elementor-counter-title {
  font-family: var(--titre); font-weight: 600;
  font-size: 17px; line-height: 1.4;
  color: var(--blanc);
  text-wrap: balance;
  hyphens: none;
}

/* ---------- Écrans intermédiaires ---------- */
@media (max-width: 1199px) {
  html:root .chiffres { padding: 56px 0 var(--section); }
  html:root .chiffres__panneau { padding: 64px 32px; border-radius: 28px; }
  html:root .chiffres__panneau::after { right: 22px; top: 6px; width: 56px; }
  html:root .chiffres__rangee { gap: 16px; }
  html:root .chiffres__carte { padding: 96px 14px 30px; }
  html:root .chiffres__nombre,
html:root .chiffres__compteur .elementor-counter-number-wrapper { font-size: 50px; }
  html:root .chiffres__libelle,
html:root .chiffres__compteur .elementor-counter-title { font-size: 16px; }
}
@media (max-width: 991px) {
  html:root .chiffres__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .chiffres__panneau { padding: 56px 40px; }
}
@media (max-width: 575px) {
  html:root .chiffres { padding-top: 40px; }
  html:root .chiffres__panneau { padding: 28px 14px; border-radius: 24px; }
  html:root .chiffres__panneau::after { display: none; }
  html:root .chiffres__rangee { gap: 12px; }
  html:root .chiffres__carte { padding: 76px 10px 22px; border-radius: 18px; }
  html:root .chiffres__carte::before { top: 20px; width: 44px; height: 44px; margin-left: -22px; --bm-ml: -22px; box-shadow: 0 0 0 6px rgba(245, 224, 43, .16); }
  html:root .chiffres__carte::after { top: 31px; width: 22px; height: 22px; margin-left: -11px; --bm-ml: -11px; }
  html:root .chiffres__nombre,
html:root .chiffres__compteur .elementor-counter-number-wrapper { font-size: 40px; }
  html:root .chiffres__nombre::after,
html:root .chiffres__compteur .elementor-counter-number-wrapper::after { width: 24px; margin: 12px auto 10px; --bm-mt: 12px; --bm-mr: auto; --bm-mb: 10px; --bm-ml: auto; }
  html:root .chiffres__libelle,
html:root .chiffres__compteur .elementor-counter-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html:root .chiffres__panneau::after { animation: none; }
  html:root .chiffres__carte:hover,
html:root .chiffres__carte:hover::before,
html:root .chiffres__carte:hover::after { transform: none; }
}


/* ===== 08-guides.css ===== */
/* ---------- Guides : bande bleu pâle à motif, cartes de même taille en défilement infini ----------
   Balisage : .guides__defile (.defile, 00-defile.js) > .guides__piste > .guides__carte.
   Carte blanche à photo carrée encadrée, nom, rôle souligné d'un trait jaune, courte description,
   réseaux en pied de carte. Toutes les cartes ont la même largeur ; la piste (flex) leur donne la même
   hauteur, le pied des réseaux est poussé en bas (margin-top: auto). Au survol : la carte se soulève,
   la photo s'approche, le filet jaune du bas s'étire. */
html:root .guides { padding-block: var(--section); }
html:root .guides__tete { margin-bottom: 40px; --bm-mb: 40px; }

html:root .guides__defile { --guide-l: 296px; }
html:root .guides__piste { align-items: stretch; }

html:root .guides__carte {
  position: relative;
  display: flex; flex-direction: column;
  width: var(--guide-l);
  padding: 10px;
  background: var(--blanc);
  border: 1px solid rgba(215, 224, 244, .7);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 36, 82, .06);
  transition: transform .45s ease, box-shadow .45s ease;
}
/* filet jaune (couleur du logo) au pied de la carte, qui s'étire au survol */
html:root .guides__carte::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  width: 44px; height: 4px; border-radius: 4px 4px 0 0;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width .45s ease;
}
html:root .guides__carte:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(15, 36, 82, .13); }
html:root .guides__carte:hover::after { width: calc(100% - 44px); }

/* portrait : carré, coins arrondis, à l'intérieur de la carte */
html:root .guides__portrait {
  position: relative;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bleu-pale);
}
html:root .guides__portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1.2s ease;
}
html:root .guides__carte:hover .guides__portrait img { transform: scale(1.06); }
/* portrait provisoire (logo carré) en attendant la photo du guide : logo entier, centré sur fond blanc,
   dans un cadre bleuté (le logo n'est ni coupé ni agrandi au survol) */
html:root .guides__portrait--provisoire { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--bleu-trait); }
html:root .guides__portrait--provisoire img { object-fit: contain; padding: 12%; }
html:root .guides__carte:hover .guides__portrait--provisoire img { transform: none; }

/* contenu : nom, rôle, description, réseaux */
html:root .guides__corps {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 20px 12px 16px;
  text-align: left;
}
html:root .guides__nom {
  font-family: var(--titre);
  font-size: 21px; line-height: 1.3; font-weight: 700;
  color: var(--marine);
}
html:root .guides__role {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: 8px 0 0; --bm-mt: 8px; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  font-size: 12.5px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primaire);
}
html:root .guides__role::before { content: ''; flex: none; width: 20px; height: 3px; border-radius: 3px; background: var(--accent); }
html:root .guides__texte {
  margin: 12px 0 18px; --bm-mt: 12px; --bm-mr: 0; --bm-mb: 18px; --bm-ml: 0;
  font-size: 15px; line-height: 1.65;
  color: var(--texte);
}
html:root .guides__social {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto; --bm-mt: auto; padding-top: 16px;
  border-top: 1px solid var(--bleu-trait);
}
html:root .guides__carte .ico-reseau,
html:root .guides__carte .reseaux .elementor-social-icon { border-color: var(--bleu-trait); color: var(--primaire); }
html:root .guides__carte .ico-reseau:hover,
html:root .guides__carte .reseaux .elementor-social-icon:hover { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }

@media (max-width: 1199px) {
  html:root .guides__tete { margin-bottom: 32px; --bm-mb: 32px; }
  html:root .guides__defile { --guide-l: 280px; }
}
@media (max-width: 575px) {
  html:root .guides__defile { --guide-l: min(76vw, 290px); }
  html:root .guides__nom { font-size: 20px; }
}


/* ===== 09-temoignages.css ===== */
/* ---------- Témoignages : avis en défilement infini lent ----------
   Balisage : .temoignages__defile (.defile.defile--lent, 00-defile.js) > .temoignages__piste > .temoignages__carte.
   Cartes blanches nettes de même largeur et de même hauteur (la piste flex les étire, la citation prend
   la place libre, l'auteur reste en pied). Étoiles et pastille de guillemets au jaune du logo ; avatar
   cerclé de jaune. Au survol : pause du défilement (00-defile.js) et carte qui se soulève. */
html:root .temoignages {
  position: relative;
  padding-block: var(--section);
  overflow: hidden;
  background: url("assets/img/deco/courbe-temoignages.svg") center 60% / 1920px auto no-repeat;
}
html:root .temoignages__tete { position: relative; z-index: 2; margin-bottom: 40px; --bm-mb: 40px; }
/* avion au trait (décor), recoloré en bleu par masque */
html:root .temoignages::before {
  content: ''; position: absolute; right: max(24px, calc(50% - 600px)); top: calc(var(--section) + 6px); z-index: 1;
  width: 84px; height: 48px; pointer-events: none;
  background: var(--bleu-trait);
  -webkit-mask: url("assets/img/deco/avion.svg") center / contain no-repeat; mask: url("assets/img/deco/avion.svg") center / contain no-repeat;
  animation: flotter 5s ease-in-out infinite;
}

html:root .temoignages__defile { --avis-l: 420px; }
html:root .temoignages__piste { align-items: stretch; }

html:root .temoignages__carte {
  position: relative;
  display: flex; flex-direction: column;
  width: var(--avis-l);
  padding: 30px 30px 24px;
  background: var(--blanc);
  border: 1px solid var(--bleu-trait);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(15, 36, 82, .07);
  transition: transform .45s ease, box-shadow .45s ease;
}
html:root .temoignages__carte:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(15, 36, 82, .13); }
/* pastille de guillemets : jaune du logo, guillemets bleu nuit (--sur-accent) */
html:root .temoignages__carte::before {
  content: ''; position: absolute; top: 22px; right: 24px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F2452'%3E%3Cpath d='M6.5 18c-1.9 0-3.3-1.5-3.3-3.6 0-3.7 2.3-6.9 5.6-8.4l.9 1.4c-2.1 1.2-3.3 2.8-3.5 4.6 1.8 0 3.2 1.4 3.2 3.1 0 1.6-1.3 2.9-2.9 2.9Zm9.6 0c-1.9 0-3.3-1.5-3.3-3.6 0-3.7 2.3-6.9 5.6-8.4l.9 1.4c-2.1 1.2-3.3 2.8-3.5 4.6 1.8 0 3.2 1.4 3.2 3.1 0 1.6-1.3 2.9-2.9 2.9Z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 16px rgba(245, 224, 43, .35);
  transition: transform .45s ease;
}
html:root .temoignages__carte:hover::before { transform: rotate(-8deg) scale(1.06); }

html:root .temoignages__etoiles {
  margin: 4px 0 20px; --bm-mt: 4px; --bm-mr: 0; --bm-mb: 20px; --bm-ml: 0; padding-right: 64px;
  font-size: 19px; line-height: 1; letter-spacing: 4px;
  color: var(--accent);
  -webkit-text-stroke: .6px #CDB800;   /* contour à peine plus soutenu : les étoiles jaunes restent nettes sur blanc */
}
html:root .temoignages__texte {
  flex: 1 1 auto;
  margin: 0 0 22px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 22px; --bm-ml: 0;
  font-size: 16.5px; line-height: 1.75; font-weight: 500;
  color: var(--marine);
}
html:root .temoignages__auteur {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--bleu-trait);
}
html:root .temoignages__avatar {
  flex: none; width: 52px; height: 52px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--blanc), 0 0 0 5px var(--accent);
}
html:root .temoignages__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
html:root .temoignages__infos { min-width: 0; }
html:root .temoignages__nom { font-family: var(--titre); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--marine); }
html:root .temoignages__qualite { margin: 2px 0 0; --bm-mt: 2px; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-size: 14px; color: var(--texte); }

@media (max-width: 1199px) {
  html:root .temoignages__defile { --avis-l: 380px; }
}
@media (max-width: 767px) {
  html:root .temoignages::before { display: none; }
  html:root .temoignages__tete { margin-bottom: 28px; --bm-mb: 28px; }
  html:root .temoignages__defile { --avis-l: min(84vw, 340px); }
  html:root .temoignages__carte { padding: 24px 22px 20px; border-radius: 20px; }
  html:root .temoignages__carte::before { top: 18px; right: 18px; width: 44px; height: 44px; background-size: 19px; }
  html:root .temoignages__texte { font-size: 15.5px; line-height: 1.7; }
}


/* ===== 10-partenaires.css ===== */
/* ---------- Partenaires : logos officiels en défilement continu, de droite à gauche ----------
   La piste est doublée par le script (copie masquée aux lecteurs d'écran) : l'animation la décale
   de 50 % puis recommence, sans à-coup. Pause au survol ; immobile si l'utilisateur réduit les animations. */
html:root .partenaires { padding: 64px 0; background: var(--blanc); }
html:root .partenaires__defile {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
html:root .partenaires__piste { display: flex; align-items: center; gap: 72px; width: max-content; padding-inline: 36px; }
html:root .partenaires__defile.est-anime .partenaires__piste { animation: partenaires-defile var(--duree, 40s) linear infinite; }
html:root .partenaires__defile.est-anime:hover .partenaires__piste { animation-play-state: paused; }
@keyframes partenaires-defile { to { transform: translateX(-50%); } }
html:root .partenaires__logo { flex: none; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .partenaires__logo img { display: block; width: auto; height: auto; max-height: 72px; max-width: 300px; --bm-max: 300px; object-fit: contain; filter: saturate(.92); transition: filter .3s, transform .3s; }
html:root .partenaires__logo:hover img { filter: none; transform: scale(1.06); }
@media (max-width: 767px) {
  html:root .partenaires { padding: 44px 0; }
  html:root .partenaires__piste { gap: 44px; }
  html:root .partenaires__logo img { max-height: 56px; max-width: 220px; --bm-max: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root .partenaires__defile.est-anime .partenaires__piste { animation: none; }
  html:root .partenaires__piste { flex-wrap: wrap; justify-content: center; width: auto; }
}


/* ===== 11-blog.css ===== */
/* ---------- Blog : bande bleu pâle unie, titre à gauche, bouton à droite, 3 cartes ----------
   Valeurs du gabarit (.blog-box) : image arrondie 16 px (marge basse 35), méta Inter 14 px,
   titre 24 px / 34 px (marge basse 30), bouton contour .th-btn.style4 (14 × 25). */
html:root .blog {
  position: relative;
  padding-block: var(--section);
  background: var(--bleu-pale);
}
html:root .blog::before {                                /* paire de montgolfières, dans le vide entre le titre et « Tous les articles » (elles chevauchaient le bouton de la 1re carte) */
  content: ''; position: absolute; right: calc(max(0px, (100% - 1368px) / 2) + 364px); top: 76px; width: 110px; height: 134px; pointer-events: none;
  background: url("assets/img/deco/montgolfieres.svg") left bottom / contain no-repeat;
  animation: flotter 5s ease-in-out infinite;
}

html:root .blog__tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 49px; --bm-mb: 49px;
}
html:root .blog__tete .tete-section { margin-bottom: 0; --bm-mb: 0; }
html:root .blog__tous { margin-bottom: 14px; --bm-mb: 14px; padding: 18.8px 25px; }
html:root .blog__tous > .wp-block-button__link,
html:root .blog__tous .elementor-button { --bm-mb: 14px; padding: 18.8px 25px; }

html:root .blog__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
html:root .blog__carte { position: relative; }
html:root .blog__image {
  display: block;
  aspect-ratio: 424 / 350;
  margin-bottom: 35px; --bm-mb: 35px;
  border-radius: 16px;
  overflow: hidden;
}
html:root .blog__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
html:root .blog__carte:hover .blog__image img { transform: scale(1.08); }

html:root .blog__meta { display: flex; align-items: center; margin: -.3rem 0 18px; --bm-mt: -.3rem; --bm-mr: 0; --bm-mb: 18px; --bm-ml: 0; font-size: 14px; line-height: 24px; color: var(--texte); }
html:root .blog__meta > * + *::before {
  content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 16px 0 18px; --bm-mt: 0; --bm-mr: 16px; --bm-mb: 0; --bm-ml: 18px;
  background: currentColor; vertical-align: -1px;
}
html:root .blog__titre { font-size: 24px; line-height: 34px; font-weight: 600; color: var(--marine); margin-bottom: 30px; --bm-mb: 30px; }
html:root .blog__titre a:hover { color: var(--primaire); }

@media (max-width: 1199px) {
  html:root .blog__titre { font-size: 21px; line-height: 30px; }
  html:root .blog::before { display: none; }
}
@media (max-width: 991px) {
  html:root .blog__grille { grid-template-columns: 1fr 1fr; }
  html:root .blog__carte:last-child { grid-column: 1 / -1; max-width: 560px; --bm-max: 560px; }
}
@media (max-width: 767px) {
  html:root .blog__tete { flex-direction: column; align-items: flex-start; }
  html:root .blog__tous { margin-bottom: 0; --bm-mb: 0; }
html:root .blog__tous > .wp-block-button__link,
html:root .blog__tous .elementor-button { --bm-mb: 0; }
  html:root .blog__grille { grid-template-columns: 1fr; gap: 40px; }
  html:root .blog__image { margin-bottom: 24px; --bm-mb: 24px; }
}


/* ===== 12-offre.css ===== */
/* ==========================================================================
   Escapade du moment (accueil) : carte « Antsanitia — Zen et retour aux sources ».
   Sans script : une carte posée en bas de l'accueil. Avec le script (12-offre.js) : fenêtre qui s'ouvre
   à l'arrivée sur l'accueil (et à chaque rechargement), fermée par la croix, Échap ou un clic à côté.
   ========================================================================== */
html:root .offre { padding: 0 var(--gouttiere) var(--section); }
html:root .offre__carte {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  max-width: 980px; --bm-max: 980px; margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto;
  border-radius: 28px; overflow: hidden;
  background: var(--blanc);
  box-shadow: 0 30px 80px rgba(10, 18, 40, .28);
}
html:root .offre__photo { position: relative; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; min-height: 100%; }
html:root .offre__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:root .offre__photo::after {   /* voile et vignette « carte postale » */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 36, 82, 0) 55%, rgba(15, 36, 82, .55) 100%);
}
html:root .offre__contenu { padding: 44px 44px 40px; }
html:root .offre__surtitre {
  margin: 0 0 4px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 4px; --bm-ml: 0; font-family: var(--script); font-size: 26px; line-height: 1.2; color: var(--accent-texte);
}
html:root .offre__titre { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-size: 52px; line-height: 1.05; letter-spacing: -.01em; color: var(--marine); }
html:root .offre__circuit {
  display: inline-block; margin: 10px 0 18px; --bm-mt: 10px; --bm-mr: 0; --bm-mb: 18px; --bm-ml: 0; padding: 6px 14px; border-radius: 100px;
  background: var(--vert-pale); color: var(--marine);
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
html:root .offre__texte { margin: 0 0 22px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 22px; --bm-ml: 0; font-size: 16px; line-height: 1.7; }

/* itinéraire dessiné comme une petite carte : étapes reliées par un pointillé */
html:root .offre__parcours {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
  margin: 0 0 22px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 22px; --bm-ml: 0; padding: 16px 18px; list-style: none; counter-reset: etape;
  border-radius: 16px; background: var(--bleu-pale);
}
html:root .offre__parcours li {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--marine); counter-increment: etape;
}
html:root .offre__parcours li::before {
  content: counter(etape); display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primaire); color: var(--blanc); font-size: 12px; font-weight: 700;
}
html:root .offre__parcours li:nth-child(4)::before { background: var(--accent); color: var(--sur-accent); box-shadow: 0 0 0 4px rgba(245, 224, 43, .35); }   /* Antsanitia */
html:root .offre__parcours li + li::after { content: none; }
html:root .offre__parcours li:not(:last-child)::after {
  content: ''; width: 26px; margin: 0 8px; --bm-mt: 0; --bm-mr: 8px; --bm-mb: 0; --bm-ml: 8px; border-top: 2px dotted rgba(27, 68, 156, .45);
}
html:root .offre__reperes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 26px; --bm-ml: 0; padding: 0; list-style: none; }
html:root .offre__reperes li {
  padding: 8px 14px; border: 1px solid var(--trait); border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--marine);
}
html:root .offre__boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Fenêtre (avec le script) ---------- */
html:root .offre.est-modale {
  position: fixed; inset: 0; z-index: 100001;
  display: none; align-items: center; justify-content: center;
  padding: 24px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  background: rgba(10, 18, 40, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
html:root .offre.est-modale.est-ouverte { display: flex; animation: offre-voile .35s ease both; }
html:root .offre.est-modale .offre__carte { width: 100%; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow-y: auto; animation: offre-carte .5s cubic-bezier(.2, .9, .25, 1.1) both; }
html:root .offre__fermer {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--marine); cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 18, 40, .25);
  transition: transform .25s, background-color .25s;
}
html:root .offre__fermer svg { width: 22px; height: 22px; fill: currentColor; }
html:root .offre__fermer:hover { background: var(--accent); transform: rotate(90deg); }
html:root .offre__fermer:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }
html.offre-ouverte { overflow: hidden; }
@keyframes offre-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes offre-carte { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html:root .offre.est-modale.est-ouverte,
html:root .offre.est-modale .offre__carte { animation: none; } }
/* éditeur Elementor : la carte reste à sa place, modifiable */
html:root .elementor-editor-active .offre.est-modale { position: static; display: block; background: none; backdrop-filter: none; }

@media (max-width: 767px) {
  html:root .offre__carte { grid-template-columns: 1fr; }
  html:root .offre__photo { height: 170px; min-height: 0; }
  html:root .offre__contenu { padding: 26px 22px 28px; }
  html:root .offre__titre { font-size: 40px; }
  html:root .offre__surtitre { font-size: 22px; }
  html:root .offre__parcours li:not(:last-child)::after { width: 14px; margin: 0 6px; --bm-mt: 0; --bm-mr: 6px; --bm-mb: 0; --bm-ml: 6px; }
  html:root .offre.est-modale { padding: 12px; align-items: flex-end; }
  html:root .offre.est-modale .offre__carte { max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); }
}


/* ===== 20-pages.css ===== */
/* ==========================================================================
   Pages internes (phase 3) — aucun nouveau débat esthétique : les composants
   reprennent les jetons, rayons et rythmes validés sur l'accueil.
   ========================================================================== */

/* ---------- Bandeau de titre (.breadcumb-wrapper du gabarit : 163 px, fond photo) ---------- */
html:root .bandeau {
  position: relative;
  padding: 163px 0;
  text-align: center;
  color: var(--blanc);
  background: var(--marine);
  overflow: hidden;
}
html:root .bandeau__photo { position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .bandeau__photo img { width: 100%; height: 100%; object-fit: cover; }
html:root .bandeau::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(13, 13, 12, .5); }
html:root .bandeau .wrap { position: relative; z-index: 2; }
html:root .bandeau__titre { font-size: 64px; line-height: 1.18; color: var(--blanc); }
html:root .bandeau__fil { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 25px; --bm-mt: 25px; font-size: 18px; }
html:root .bandeau__fil li + li::before {
  content: ''; display: inline-block; width: 18px; height: 14px; margin-right: 8px; --bm-mr: 8px;
  background: currentColor; vertical-align: -1px;
  -webkit-mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
          mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
}
html:root .bandeau__fil a:hover { color: var(--accent); }   /* vert sur photo voilée : lisible */
/* page Activités : les univers de voyage suivent un bandeau, sans formulaire de héros à chevaucher ; leur
   remontée de 55 px passait sous le voile du bandeau (bande grise au bas de la photo) */
html:root .bandeau + .categories { margin-top: 0; --bm-mt: 0; padding-top: 121px; }
@media (max-width: 1199px) { html:root .bandeau + .categories { padding-top: 95px; } }
@media (max-width: 767px) { html:root .bandeau + .categories { padding-top: 70px; } }

/* ---------- Section générique ---------- */
html:root .bloc { position: relative; padding-block: var(--section); }
html:root .bloc--cyan { background: var(--bleu-pale); }   /* nom de classe historique : fond bleu pâle */
html:root .bloc--serre-haut { padding-top: 0; }
/* une section de l'accueil réutilisée hors de son voisinage d'origine retrouve sa marge */
html:root .guides + .partenaires,
html:root .bande-cyan + .partenaires { padding-top: var(--section); }

/* ---------- Texte courant + photo (deux colonnes) ---------- */
html:root .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
html:root .duo--inverse .duo__media { order: 2; }
html:root .duo__media { position: relative; }
html:root .duo__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; }
html:root .duo__media--arche img { border-radius: 300px 300px 24px 24px; aspect-ratio: 4 / 4.6; }
html:root .duo__badge {
  position: absolute; right: -24px; bottom: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--primaire); color: var(--blanc); border: 6px solid var(--blanc);
  font-family: var(--titre); text-align: center; line-height: 1.1;
}
/* portrait rond qui chevauche la photo (le fondateur, page À propos) */
html:root .duo__portrait {
  position: absolute; z-index: 2; top: -48px; left: -56px;
  width: 240px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  border-radius: 50%; border: 8px solid var(--blanc); overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 36, 82, .28);
}
html:root .duo__media .duo__portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
html:root .duo__badge-nombre { font-size: 40px; font-weight: 700; line-height: 1.1; }
html:root .duo__badge-texte { font-size: 14px; font-weight: 600; margin-top: 4px; --bm-mt: 4px; }
html:root .texte-riche > * + * { margin-top: 18px; --bm-mt: 18px; }
html:root :where(.texte-riche) :is(p, :where(.bm-p)) { font-size: 16px; line-height: 1.75; }   /* spécificité faible : le surtitre (p.surtitre) garde son style */
html:root .texte-riche :is(h3, :where(.bm-h3)) { font-size: 24px; line-height: 1.417; font-weight: 600; margin-top: 32px; --bm-mt: 32px; }
html:root .texte-riche .btn { margin-top: 32px; --bm-mt: 32px; }
html:root .texte-riche .btn > .wp-block-button__link,
html:root .texte-riche .btn .elementor-button { --bm-mt: 32px; }
html:root .liste-coches li { position: relative; padding-left: 34px; color: var(--marine); font-weight: 500; }
html:root .liste-coches li + li { margin-top: 12px; --bm-mt: 12px; }
html:root .liste-coches li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F2452' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Cartes à picto (valeurs, services) ---------- */
html:root .cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
html:root .cartes--3 { grid-template-columns: repeat(3, 1fr); }
html:root .carte {
  position: relative;
  padding: 40px 32px 36px;
  background: var(--blanc);
  border: 1px solid var(--trait-bleu);
  border-radius: 16px;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
html:root .bloc--cyan .carte { border-color: transparent; }
html:root .carte:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15, 36, 82, .10); border-color: transparent; }
/* pastille verte (accent) + picto blanc : deux pseudo-éléments, aucun bloc vide */
html:root .carte::before {
  content: ''; display: block;
  width: 72px; height: 72px; margin-bottom: 26px; --bm-mb: 26px; border-radius: 50%;
  background: var(--accent);
  transition: background-color .4s;
}
html:root .carte::after {
  content: ''; position: absolute; left: 52px; top: 60px;
  width: 32px; height: 32px; background: var(--blanc);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .carte:hover::before { background: var(--primaire); }
html:root .carte__titre { font-size: 22px; line-height: 1.4; font-weight: 700; margin-bottom: 12px; --bm-mb: 12px; }
html:root .carte__texte { font-size: 16px; line-height: 1.7; }
html:root .carte__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; --bm-mt: 20px; color: var(--marine); font-weight: 500; }
html:root .carte__lien::after {
  content: ''; width: 18px; height: 13px; background: currentColor;
  -webkit-mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
          mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
}
html:root .carte__lien:hover { color: var(--primaire); }
html:root .m-itineraire { --m: url("assets/img/icones/itineraire.svg"); }
html:root .m-guide { --m: url("assets/img/icones/guide.svg"); }
html:root .m-horloge { --m: url("assets/img/icones/horloge.svg"); }
html:root .m-lieu { --m: url("assets/img/icones/lieu.svg"); }
html:root .m-calendrier { --m: url("assets/img/icones/calendrier.svg"); }
html:root .m-etoile { --m: url("assets/img/icones/etoile.svg"); }
html:root .m-telephone { --m: url("assets/img/icones/telephone.svg"); }
html:root .m-email { --m: url("assets/img/icones/email.svg"); }
html:root .m-avion { --m: url("assets/img/icones/avion-papier.svg"); }
html:root .m-carte { --m: url("assets/img/icones/repere-carte.svg"); }
html:root .m-recherche { --m: url("assets/img/icones/recherche.svg"); }
html:root .m-voiture { --m: url("assets/img/icones/voiture.svg"); }
html:root .m-bateau { --m: url("assets/img/icones/bateau.svg"); }

/* ---------- Onglets de filtre (reprennent les pastilles des destinations) ---------- */
html:root .onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 48px; --bm-mb: 48px; }
html:root .onglet {
  padding: 9px 26px; border-radius: 8px;
  background: var(--bleu-pale);
  box-shadow: 0 6px 18px rgba(27, 68, 156, .10);
  font-size: 15px; color: var(--marine);
  cursor: pointer; transition: background-color .4s, color .4s;
}
html:root .bloc--cyan .onglet { background: var(--blanc); }
html:root .onglet:hover,
html:root .onglet.est-actif { background: var(--primaire); color: var(--blanc); }

/* ---------- Catalogue des tours (réutilise la carte .tours__boite de l'accueil) ---------- */
html:root .catalogue { --noir-titre: var(--marine); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }   /* même bleu nuit de titre que les cartes de l'accueil */
/* même gabarit pour toutes les cartes : photo 4:3 quelle que soit l'orientation du fichier,
   pied (durée + bouton) collé en bas — aucune carte ne s'étire avec des vides */
html:root .catalogue .tours__boite { height: 100%; display: flex; flex-direction: column; }
html:root .catalogue .tours__photo { flex: none; height: auto; aspect-ratio: 4 / 3; }
html:root .catalogue .tours__contenu { flex: 1 1 auto; display: flex; flex-direction: column; }
html:root .catalogue .tours__action { margin-top: auto; --bm-mt: auto; }
html:root .catalogue > .est-masquee { display: none; }

/* ---------- Activités : cartes (page Activités, « Autres activités » des pages d'activité) ----------
   carte blanche rayon 24, photo 4:3 qui s'agrandit au survol, pastille « Nouveau », pied saison + « Découvrir ».
   Le soulèvement passe par translate (propriété distincte de transform, que les animations d'entrée
   d'Elementor utilisent) : les deux effets ne se contrarient pas. */
/* rangées de trois ; une dernière rangée incomplète est centrée (grille partielle pendant l'ajout des fiches) */
html:root .activites { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 24px; }
html:root .activites > .activite { flex: 0 1 calc((100% - 48px) / 3); min-width: 0; }
html:root .activite {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--trait-bleu);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--marine) 6%, transparent);
  transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
}
html:root .bloc--cyan .activite { border-color: transparent; }
html:root .activite:hover { translate: 0 -8px; border-color: transparent; box-shadow: 0 26px 50px color-mix(in srgb, var(--marine) 14%, transparent); }
html:root .activite__photo { position: relative; flex: none; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .activite__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
html:root .activite:hover .activite__photo img { transform: scale(1.08); }
/* voile léger en bas de la photo : la carte « respire » vers le texte */
html:root .activite__photo::after {
  content: ''; position: absolute; inset: auto 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--marine) 28%, transparent), transparent);
}
html:root .activite__badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 48px;
  background: var(--accent); color: var(--marine);   /* bleu nuit sur vert : 5,6:1 (jamais de petit texte blanc sur vert) */
  font-family: var(--titre); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--marine) 22%, transparent);
}
html:root .activite__badge::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--marine); }
html:root .activite__corps { flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px 28px 24px; }
html:root .activite__lieu { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--primaire); margin-bottom: 10px; --bm-mb: 10px; }
html:root .activite__lieu::before {
  content: ''; flex: none; width: 15px; height: 15px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
          mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
}
html:root .activite__titre { font-size: 23px; line-height: 1.35; font-weight: 700; margin-bottom: 10px; --bm-mb: 10px; }
html:root .activite__titre a { transition: color .3s; }
html:root .activite__titre a:hover { color: var(--primaire); }
html:root .activite__texte { font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; --bm-mb: 22px; }
html:root .activite__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; --bm-mt: auto; padding-top: 18px;
  min-height: 56px;   /* place pour une saison sur deux lignes : le filet est aligné d'une carte à l'autre */
  border-top: 1px solid var(--trait-bleu);
}
html:root .activite__saison { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--marine); }
html:root .activite__saison::before {
  content: ''; flex: none; width: 17px; height: 17px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/calendrier.svg") center / contain no-repeat;
          mask: url("assets/img/icones/calendrier.svg") center / contain no-repeat;
}
html:root .activite__lien {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--titre); font-size: 15px; font-weight: 700; color: var(--primaire);
  transition: gap .3s ease, color .3s;
}
html:root .activite__lien::after {
  content: ''; flex: none; width: 18px; height: 13px; background: currentColor;
  -webkit-mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
          mask: url("assets/img/icones/fleche-droite.svg") center / contain no-repeat;
}
html:root .activite:hover .activite__lien { gap: 12px; }
html:root .activite__lien:hover { color: var(--marine); }

/* ---------- FAQ en accordéon (toutes les réponses sont dans la page) ---------- */
html:root .faq { max-width: 960px; --bm-max: 960px; margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; }
html:root .faq__item,
html:root .e-n-accordion-item { border-radius: 16px; background: var(--blanc); border: 1px solid var(--trait-bleu); }
html:root .bloc--cyan .faq__item,
html:root .bloc--cyan .e-n-accordion-item { border-color: transparent; }
html:root .faq__item + .faq__item,
html:root .e-n-accordion-item + .e-n-accordion-item { margin-top: 16px; --bm-mt: 16px; }
html:root .faq__question,
html:root .e-n-accordion-item-title {
  position: relative;
  padding: 22px 72px 22px 28px;
  font-family: var(--titre); font-size: 20px; font-weight: 600; color: var(--marine);
  cursor: pointer;
}
html:root .faq__question::after,
html:root .e-n-accordion-item-title::after {
  content: ''; position: absolute; right: 24px; top: 50%; margin-top: -16px; --bm-mt: -16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bleu-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%230F2452' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 16h12M16 10v12'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform .3s, background-color .3s;
}
html:root .faq__reponse { display: none; padding: 0 28px 24px; font-size: 16px; line-height: 1.75; }
html:root .faq__item.est-actif .faq__reponse,
html:root .e-n-accordion-item[open] .faq__reponse { display: block; }
html:root .faq__item.est-actif .faq__question,
html:root .e-n-accordion-item[open] .e-n-accordion-item-title { color: var(--primaire); }
html:root .faq__item.est-actif .faq__question::after,
html:root .e-n-accordion-item[open] .e-n-accordion-item-title::after {
  transform: rotate(45deg);
  background-color: var(--primaire);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 16h12M16 10v12'/%3E%3C/svg%3E");
}

/* ---------- Contact ---------- */
html:root .contact-grille { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: start; }
html:root .contact-infos { display: flex; flex-direction: column; gap: 20px; }
html:root .contact-info { position: relative; display: flex; gap: 20px; align-items: flex-start; padding: 28px; border-radius: 16px; background: var(--bleu-pale); }
html:root .contact-info::before { content: ''; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); }
html:root .contact-info::after {
  content: ''; position: absolute; left: 45px; top: 45px; width: 26px; height: 26px; background: var(--blanc);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .contact-info :is(h3, :where(.bm-h3)) { font-size: 20px; line-height: 1.4; font-weight: 600; margin-bottom: 6px; --bm-mb: 6px; }
html:root .contact-info :is(p, :where(.bm-p)),
html:root .contact-info a { font-size: 16px; line-height: 1.7; }
html:root .contact-info a { color: var(--marine); }
html:root .contact-info a:hover { color: var(--primaire); }
/* même numéro sur WhatsApp : lien wa.me sous l'appel */
html:root .contact-info__whatsapp { margin-top: 4px; --bm-mt: 4px; }
html:root .contact-info .contact-info__whatsapp a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
html:root .contact-info__whatsapp a::before {
  content: ''; flex: none; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: url("assets/img/icones/whatsapp.svg") center / contain no-repeat; mask: url("assets/img/icones/whatsapp.svg") center / contain no-repeat;
}
html:root .formulaire { padding: 48px; border-radius: 24px; background: var(--blanc); border: 1px solid var(--trait-bleu); box-shadow: 0 20px 40px rgba(15, 36, 82, .06); }
html:root .formulaire__titre { font-size: 32px; line-height: 1.3; margin-bottom: 8px; --bm-mb: 8px; }
html:root .formulaire__intro { margin-bottom: 32px; --bm-mb: 32px; }
html:root .formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
html:root .formulaire__plein { grid-column: 1 / -1; }
html:root .formulaire label { display: block; font-family: var(--titre); font-weight: 600; font-size: 15px; color: var(--marine); margin-bottom: 8px; --bm-mb: 8px; }
html:root .formulaire input,
html:root .formulaire select,
html:root .formulaire textarea {
  display: block; width: 100%;
  height: 56px; padding: 0 24px;
  border: 1px solid var(--trait); border-radius: 28px;
  background: var(--blanc); font-size: 15px; color: var(--marine); outline: none;
}
html:root .formulaire textarea { height: auto; min-height: 150px; padding: 18px 24px; border-radius: 20px; resize: vertical; }
html:root .formulaire input:focus,
html:root .formulaire select:focus,
html:root .formulaire textarea:focus { border-color: var(--primaire); }
html:root .formulaire .btn { margin-top: 28px; --bm-mt: 28px; }
html:root .formulaire .btn > .wp-block-button__link,
html:root .formulaire .btn .elementor-button { --bm-mt: 28px; }
html:root .formulaire__note { margin-top: 16px; --bm-mt: 16px; font-size: 14px; }
/* circuits à cocher : un ou plusieurs (devis, réservation, contact) */
html:root .formulaire .formulaire__legende { font-family: var(--titre); font-weight: 600; font-size: 15px; color: var(--marine); margin-bottom: 4px; --bm-mb: 4px; }
html:root .formulaire .formulaire__aide { font-size: 14px; line-height: 1.5; margin-bottom: 14px; --bm-mb: 14px; }
html:root .formulaire__circuits .wpcf7-form-control-wrap { display: block; }
html:root .formulaire__circuits .wpcf7-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html:root .formulaire__circuits .wpcf7-list-item { display: block; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .formulaire__circuits .wpcf7-list-item label {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 12px 18px;
  border: 1px solid var(--trait); border-radius: 16px; background: var(--blanc);
  font-family: var(--titre); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--marine);
  cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
html:root .formulaire__circuits .wpcf7-list-item label:hover { border-color: var(--primaire); }
html:root .formulaire__circuits .wpcf7-list-item label:has(input:checked) { border-color: var(--primaire); background: var(--bleu-pale); box-shadow: 0 6px 16px rgba(27, 68, 156, .14); }
html:root .formulaire__circuits input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: none; display: grid; place-content: center;
  width: 22px; height: 22px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0;
  border: 2px solid #B3BDD1; border-radius: 7px; background: var(--blanc);
  cursor: pointer; transition: background-color .2s, border-color .2s;
}
html:root .formulaire__circuits input[type="checkbox"]:checked {
  border-color: var(--primaire);
  background: var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
html:root .formulaire__circuits input[type="checkbox"]:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
html:root .formulaire__circuits .wpcf7-list-item-label { flex: 1; min-width: 0; }

/* ---------- Article de blog ---------- */
html:root .article { max-width: 860px; --bm-max: 860px; margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; }
html:root .article__titre { text-align: center; margin-bottom: 40px; --bm-mb: 40px; }
html:root .article__meta { display: flex; justify-content: center; gap: 24px; margin-bottom: 28px; --bm-mb: 28px; font-size: 15px; color: var(--texte); }
html:root .article__image { border-radius: 24px; overflow: hidden; margin-bottom: 48px; --bm-mb: 48px; }
html:root .article__image img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
html:root .article .texte-riche :is(h2, :where(.bm-h2)) { font-size: 32px; line-height: 1.3; margin-top: 44px; --bm-mt: 44px; }
html:root .article .texte-riche :is(p, :where(.bm-p)),
html:root .article .texte-riche li { font-size: 17px; line-height: 1.8; }
html:root .article .texte-riche ul { padding-left: 0; }
html:root .encadre { margin-top: 40px; --bm-mt: 40px; padding: 32px 36px; border-radius: 16px; background: var(--bleu-pale); }
html:root .encadre :is(p, :where(.bm-p)) { color: var(--marine); }

/* ---------- Bandeau d'appel à l'action ---------- */
html:root .appel {
  position: relative;
  padding: 90px 0;
  text-align: center;
  color: var(--blanc);
  background: var(--marine) url("assets/img/hero-2.jpg") center 40% / cover no-repeat;
}
html:root .appel::before { content: ''; position: absolute; inset: 0; background: rgba(15, 36, 82, .78); }
html:root .appel .wrap { position: relative; z-index: 1; }
html:root .appel .surtitre { color: var(--accent); }   /* vert sur voile bleu nuit à 78 % : lisible */
html:root .appel__titre { font-size: 48px; line-height: 1.3; color: var(--blanc); max-width: 820px; --bm-max: 820px; margin: 0 auto 36px; --bm-mt: 0; --bm-mr: auto; --bm-mb: 36px; --bm-ml: auto; }
html:root .appel__boutons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* bouton plein sur voile bleu nuit : le bleu du logo s'y détache mal (≈ 1,5:1 avec le fond) ; liseré blanc
   translucide, et survol en blanc (le bleu nuit du survol ordinaire s'y fondrait) */
html:root .appel .btn--plein { border-color: rgba(255, 255, 255, .4); }
html:root .appel .btn--plein > .wp-block-button__link,
html:root .appel .btn--plein .elementor-button { border-color: rgba(255, 255, 255, .4); }
html:root .appel .btn--plein:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .appel .btn--plein:hover > .wp-block-button__link,
html:root .appel .btn--plein:hover .elementor-button { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }

@media (max-width: 1199px) {
  html:root .bandeau { padding: 120px 0; }
  html:root .bandeau__titre { font-size: 52px; }
  html:root .cartes,
html:root .catalogue { grid-template-columns: repeat(2, 1fr); }
  html:root .activites > .activite { flex-basis: calc((100% - 24px) / 2); }
  html:root .duo { gap: 48px; }
  html:root .duo__portrait { width: 200px; left: -40px; }
  html:root .contact-grille { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  html:root .duo { grid-template-columns: 1fr; }
  html:root .duo--inverse .duo__media { order: 0; }
  html:root .duo__badge { right: 16px; }
  html:root .duo__media--portrait { margin-bottom: 56px; --bm-mb: 56px; }
  html:root .duo__portrait { top: auto; left: auto; right: 16px; bottom: -56px; width: 180px; }
  html:root .cartes--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  html:root .bandeau { padding: 88px 0; }
  html:root .bandeau__titre { font-size: 38px; }
  html:root .bandeau__fil { font-size: 15px; }
  html:root .cartes,
html:root .cartes--3,
html:root .catalogue { grid-template-columns: 1fr; }
  html:root .activites { gap: 24px 16px; }
  html:root .activites > .activite { flex-basis: calc((100% - 16px) / 2); }
  html:root .activite__corps { padding: 20px 22px 20px; }
  html:root .activite__titre { font-size: 21px; }
  html:root .formulaire { padding: 28px 20px; }
  html:root .formulaire__grille { grid-template-columns: 1fr; }
  html:root .formulaire__circuits .wpcf7-checkbox { grid-template-columns: 1fr; gap: 8px; }
  html:root .formulaire__circuits .wpcf7-list-item label { min-height: 46px; padding: 10px 14px; }
  html:root .faq__question,
html:root .e-n-accordion-item-title { font-size: 17px; padding: 18px 60px 18px 20px; }
  html:root .appel__titre { font-size: 32px; }
}
/* téléphone : une carte d'activité par rangée */
@media (max-width: 575px) {
  html:root .activites > .activite { flex-basis: 100%; }
}

/* résultat de la recherche de l'accueil (?lieu=…&type=…&duree=…) */
html:root .catalogue > .est-exclue { display: none; }
html:root .catalogue__resultat { margin: -16px 0 32px; --bm-mt: -16px; --bm-mr: 0; --bm-mb: 32px; --bm-ml: 0; padding: 16px 24px; border-radius: 16px; background: var(--bleu-pale); color: var(--marine); font-size: 16px; text-align: center; }
html:root .catalogue__resultat a { margin-left: 4px; --bm-ml: 4px; font-weight: 600; color: var(--primaire); text-decoration: underline; text-underline-offset: 3px; }


/* ===== 21-fiche.css ===== */
/* ==========================================================================
   Fiche circuit (page détail d'un tour). Aucun nouveau registre : jetons de l'accueil,
   photo pleine largeur à voile sombre, titres Manrope, surtitres Montez verts (accent du logo),
   boutons et états actifs bleus, cartes blanches rayon 16 / 24 sur bande bleu pâle, pilules.
   ========================================================================== */

/* ---------- En-tête photo : titre, accroche, faits en pilules, deux appels ---------- */
html:root .fiche-heros {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 680px;
  padding: 120px 0 88px;
  color: var(--blanc);
  background: var(--marine);
  overflow: hidden;
}
html:root .fiche-heros__photo { position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .fiche-heros__photo img { width: 100%; height: 100%; object-fit: cover; }
/* voile : texte lisible à gauche et en bas, la photo respire à droite */
html:root .fiche-heros::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 13, 12, .74) 0%, rgba(13, 13, 12, .46) 48%, rgba(13, 13, 12, .12) 100%),
    linear-gradient(0deg, rgba(13, 13, 12, .5) 0%, rgba(13, 13, 12, 0) 60%);
}
html:root .fiche-heros__contenu { position: relative; z-index: 2; }
html:root .fiche-heros__fil { justify-content: flex-start; flex-wrap: wrap; margin: 0 0 30px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 30px; --bm-ml: 0; font-size: 16px; color: rgba(255, 255, 255, .9); }
html:root .fiche-heros__surtitre { color: var(--accent); }   /* vert sur le voile sombre de gauche : lisible */
html:root .fiche-heros__titre { max-width: 900px; --bm-max: 900px; font-size: 60px; line-height: 1.17; color: var(--blanc); }
html:root .fiche-heros__accroche { max-width: 700px; --bm-max: 700px; margin-top: 22px; --bm-mt: 22px; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .9); }
html:root .fiche-faits { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; --bm-mt: 32px; }
html:root .fiche-faits li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 16px; border-radius: 48px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 15px; line-height: 22px; font-weight: 500; color: var(--blanc);
}
html:root .fiche-faits li::before {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .fiche-heros__boutons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; --bm-mt: 40px; }

/* ---------- L'essentiel : points forts en tuiles + itinéraire en pastilles reliées ---------- */
html:root .fiche-apercu__grille { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; }
html:root .fiche-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 36px; --bm-mt: 36px; }
html:root .fiche-points li {
  position: relative;
  padding: 22px 24px 22px 66px;
  border-radius: 16px; background: var(--bleu-pale);
  font-family: var(--titre); font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--marine);
}
html:root .fiche-points li::before {
  content: ''; position: absolute; left: 24px; top: 22px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F2452' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
html:root .fiche-parcours {
  position: relative;
  padding: 40px 40px 36px;
  border-radius: 24px;
  background-color: var(--marine);
  background-image: url("assets/img/deco/motif-voyage.svg");
  background-size: 420px auto;
  color: var(--blanc);
  overflow: hidden;
}
html:root .fiche-parcours::before { content: ''; position: absolute; inset: 0; background: rgba(15, 36, 82, .9); }
html:root .fiche-parcours > * { position: relative; }
html:root .fiche-parcours__titre { font-family: var(--titre); font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--blanc); margin-bottom: 28px; --bm-mb: 28px; }
html:root .fiche-parcours__etapes { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none; counter-reset: etape; }
html:root .fiche-parcours__etapes li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 22px 52px;
  font-size: 17px; line-height: 32px; font-weight: 500;
}
html:root .fiche-parcours__etapes li:last-child { padding-bottom: 0; }
html:root .fiche-parcours__etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--marine);   /* chiffre bleu nuit sur pastille verte (5,6:1) ; blanc sur vert serait illisible */
  font-family: var(--titre); font-size: 14px; font-weight: 700; line-height: 1;
}
html:root .fiche-parcours__etapes li:not(:last-child)::after {
  content: ''; position: absolute; left: 15px; top: 38px; bottom: 6px;
  border-left: 2px dashed rgba(255, 255, 255, .32);
}
html:root .fiche-parcours__transport {
  display: flex; gap: 12px;
  margin-top: 28px; --bm-mt: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .82);
}
html:root .fiche-parcours__transport::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; --bm-mt: 2px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/voiture.svg") center / contain no-repeat;
          mask: url("assets/img/icones/voiture.svg") center / contain no-repeat;
}

/* ---------- Programme : frise verticale + encadré « Votre voyage » qui suit le défilement ---------- */
html:root .fiche-programme__grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
html:root .frise { position: relative; }
html:root .frise::before {
  content: ''; position: absolute; left: 35px; top: 40px; bottom: 40px;
  border-left: 2px dashed rgba(69, 180, 71, .5);
}
html:root .jour { position: relative; padding-left: 104px; scroll-margin-top: 24px; }
html:root .jour + .jour { margin-top: 28px; --bm-mt: 28px; }
html:root .jour__numero {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 72px; height: 72px; padding: 0 12px; border-radius: 36px;
  background: var(--primaire); color: var(--blanc);
  box-shadow: 0 0 0 6px var(--bleu-pale);
  font-family: var(--titre); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
html:root .jour__numero strong { display: block; margin-top: 5px; --bm-mt: 5px; font-size: 22px; font-weight: 800; letter-spacing: 0; }
html:root .jour__carte {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start;
  padding: 32px;
  border-radius: 24px; background: var(--blanc);
  box-shadow: 0 10px 30px rgba(15, 36, 82, .06);
  transition: box-shadow .4s ease;
}
html:root .jour__carte--seule { grid-template-columns: minmax(0, 1fr); }
html:root .jour:hover .jour__carte { box-shadow: 0 20px 40px rgba(15, 36, 82, .12); }
html:root .jour__texte > * + * { margin-top: 14px; --bm-mt: 14px; }
html:root .jour__titre { font-size: 24px; line-height: 1.35; font-weight: 700; }
html:root .jour__texte :is(p, :where(.bm-p)) { font-size: 16px; line-height: 1.75; }
html:root .jour__texte .jour__trajet {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; --bm-mt: 12px; padding: 6px 16px 6px 12px; border-radius: 48px;
  background: var(--bleu-pale);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--marine);
}
html:root .jour__trajet::before {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/itineraire.svg") center / contain no-repeat;
          mask: url("assets/img/icones/itineraire.svg") center / contain no-repeat;
}
html:root .jour__trajet--vol::before {
  -webkit-mask-image: url("assets/img/icones/avion-papier.svg"); mask-image: url("assets/img/icones/avion-papier.svg");
}
html:root .jour__texte .jour__liste { margin-top: 18px; --bm-mt: 18px; }
html:root .jour__liste li { font-size: 15px; line-height: 1.6; }
html:root .jour__texte .jour__nuit {
  position: relative;
  margin-top: 20px; --bm-mt: 20px; padding: 18px 0 0 28px;
  border-top: 1px dashed var(--trait);
  font-size: 15px; line-height: 1.6; color: var(--marine);
}
html:root .jour__nuit::before {
  content: ''; position: absolute; left: 0; top: 21px; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.6A8.5 8.5 0 0 1 9.4 3.5a8.5 8.5 0 1 0 11.1 11.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.6A8.5 8.5 0 0 1 9.4 3.5a8.5 8.5 0 1 0 11.1 11.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .jour__photos { display: grid; gap: 12px; }
html:root .jour__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
html:root .jour__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
html:root .jour:hover .jour__photo img { transform: scale(1.06); }
html:root .jour__legende {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--primaire);
}
html:root .jour__legende::before {
  content: ''; flex: none; width: 14px; height: 14px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
          mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
}

html:root .fiche-resume {
  position: sticky; top: 100px;   /* aligné sur le bouton flottant « Voyages & Moi » (barre fixe de 80 px + 20 px) */
  padding: 36px 32px 32px;
  border-radius: 24px; background: var(--blanc);
  box-shadow: 0 20px 40px rgba(15, 36, 82, .08);
}
html:root .fiche-resume__logo { margin: -6px 0 18px; --bm-mt: -6px; --bm-mr: 0; --bm-mb: 18px; --bm-ml: 0; padding-bottom: 18px; border-bottom: 1px solid var(--trait-bleu); }
html:root .fiche-resume__logo img { display: block; width: 150px; height: auto; }
html:root .fiche-resume__titre { font-family: var(--titre); font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--marine); margin-bottom: 12px; --bm-mb: 12px; }
html:root .fiche-resume__faits li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--trait-bleu);
  font-size: 15px; line-height: 1.5; text-align: right;
}
html:root .fiche-resume__faits li strong { flex: none; text-align: left; font-weight: 600; color: var(--marine); }
html:root .fiche-resume__prix { margin: 22px 0 24px; --bm-mt: 22px; --bm-mr: 0; --bm-mb: 24px; --bm-ml: 0; font-size: 16px; line-height: 36px; }
html:root .fiche-resume__prix strong { font-size: 26px; font-weight: 600; letter-spacing: .02em; color: var(--marine); }
html:root .fiche-resume .fiche-resume__boutons { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
html:root .fiche-resume__boutons .btn { justify-content: center; width: 100%; }
html:root .fiche-resume__boutons .btn > .wp-block-button__link,
html:root .fiche-resume__boutons .btn .elementor-button { justify-content: center; width: 100%; }
html:root .fiche-resume__aide { margin-top: 20px; --bm-mt: 20px; font-size: 14px; text-align: center; }
html:root .fiche-resume__aide a { color: var(--marine); font-weight: 600; white-space: nowrap; }
html:root .fiche-resume__aide a:hover { color: var(--primaire); }

/* ---------- Prix : compris / non compris ---------- */
html:root .fiche-tarifs__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
html:root .fiche-inclus { padding: 40px; border-radius: 24px; background: var(--bleu-pale); }
html:root .fiche-inclus--non { background: var(--gris-fumee); }
html:root .fiche-inclus__titre { display: flex; align-items: center; gap: 14px; font-size: 24px; line-height: 1.3; margin-bottom: 26px; --bm-mb: 26px; }
html:root .fiche-inclus__titre::before {
  content: ''; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F2452' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5'/%3E%3C/svg%3E") center / 30px no-repeat;
}
html:root .fiche-inclus--non .fiche-inclus__titre::before {
  background-color: var(--marine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 7 6 6M13 7l-6 6'/%3E%3C/svg%3E");
}
html:root .fiche-inclus__liste li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.65; color: var(--marine); }
html:root .fiche-inclus__liste li + li { margin-top: 14px; --bm-mt: 14px; }
html:root .fiche-inclus__liste li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .fiche-inclus--non .fiche-inclus__liste li { color: var(--texte); }
html:root .fiche-inclus--non .fiche-inclus__liste li::before {
  background: var(--texte);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 6 8 8M14 6l-8 8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 6 8 8M14 6l-8 8'/%3E%3C/svg%3E");
}
html:root .fiche-tarifs__nb { margin-top: 24px; --bm-mt: 24px; padding: 22px 28px; border-radius: 16px; border: 1px dashed var(--accent); }
html:root .fiche-tarifs__nb :is(p, :where(.bm-p)) { font-size: 15px; line-height: 1.7; color: var(--marine); }
html:root .fiche-tarifs__nb strong { margin-right: 6px; --bm-mr: 6px; color: var(--primaire); }

/* ---------- Demande : deux choix (devis / réservation), un seul formulaire affiché ---------- */
html:root .fiche-demande {
  position: relative;
  padding: var(--section) 0;
  color: var(--blanc);
  background: var(--marine);
  overflow: hidden;
  scroll-margin-top: 0;
}
html:root .fiche-demande__photo { position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .fiche-demande__photo img { width: 100%; height: 100%; object-fit: cover; }
html:root .fiche-demande::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(15, 36, 82, .86); }
html:root .fiche-demande__contenu { position: relative; z-index: 2; }
html:root .fiche-demande .titre-section { color: var(--blanc); }
html:root .fiche-demande .surtitre { color: var(--accent); }   /* vert sur voile bleu nuit à 86 % : lisible */
html:root .fiche-demande .chapeau { color: rgba(255, 255, 255, .86); }
html:root .fiche-demande .fiche-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 0 48px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 48px; --bm-ml: 0; }
html:root .fiche-choix .btn { min-width: 230px; justify-content: center; }
html:root .fiche-choix .btn > .wp-block-button__link,
html:root .fiche-choix .btn .elementor-button { min-width: 230px; justify-content: center; }
/* choix plein sur voile bleu nuit : liseré blanc translucide pour qu'il se détache, survol en blanc
   (le bouton d'envoi, sur la carte blanche du formulaire, garde le rendu ordinaire) */
html:root .fiche-choix .btn--plein { border-color: rgba(255, 255, 255, .4); }
html:root .fiche-choix .btn--plein > .wp-block-button__link,
html:root .fiche-choix .btn--plein .elementor-button { border-color: rgba(255, 255, 255, .4); }
html:root .fiche-choix .btn--plein:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .fiche-choix .btn--plein:hover > .wp-block-button__link,
html:root .fiche-choix .btn--plein:hover .elementor-button { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
/* le choix actif est plein, l'autre en contour (la classe mode-* est posée par le script) */
html:root .fiche-demande.mode-reserver .fiche-choix__devis { background: transparent; border-color: var(--blanc); color: var(--blanc); }
html:root .fiche-demande.mode-reserver .fiche-choix__devis > .wp-block-button__link,
html:root .fiche-demande.mode-reserver .fiche-choix__devis .elementor-button { background: transparent; border-color: var(--blanc); color: var(--blanc); }
html:root .fiche-demande.mode-reserver .fiche-choix__devis:hover { background: var(--blanc); color: var(--marine); }
html:root .fiche-demande.mode-reserver .fiche-choix__devis:hover > .wp-block-button__link,
html:root .fiche-demande.mode-reserver .fiche-choix__devis:hover .elementor-button { background: var(--blanc); color: var(--marine); }
html:root .fiche-demande.mode-reserver .fiche-choix__reserver { background: var(--primaire); border-color: rgba(255, 255, 255, .4); color: var(--blanc); }
html:root .fiche-demande.mode-reserver .fiche-choix__reserver > .wp-block-button__link,
html:root .fiche-demande.mode-reserver .fiche-choix__reserver .elementor-button { background: var(--primaire); border-color: rgba(255, 255, 255, .4); color: var(--blanc); }
html:root .fiche-demande.mode-reserver .fiche-choix__reserver:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .fiche-demande.mode-reserver .fiche-choix__reserver:hover > .wp-block-button__link,
html:root .fiche-demande.mode-reserver .fiche-choix__reserver:hover .elementor-button { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .fiche-panneaux { max-width: 980px; --bm-max: 980px; margin: 0 auto; --bm-mt: 0; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; }
html:root .fiche-panneau { scroll-margin-top: 24px; }
html:root .fiche-panneau + .fiche-panneau { margin-top: 32px; --bm-mt: 32px; }
html:root .fiche-demande.est-interactive .fiche-panneau:not(.est-actif) { display: none; }
html:root .fiche-demande.est-interactive .fiche-panneau + .fiche-panneau { margin-top: 0; --bm-mt: 0; }
html:root .formulaire--fiche { color: var(--texte); box-shadow: 0 30px 60px rgba(0, 0, 0, .2); }

/* ---------- Autres circuits ---------- */
html:root .catalogue.catalogue--3 { grid-template-columns: repeat(3, 1fr); }
html:root .fiche-autres__bouton { display: flex; justify-content: center; margin-top: 48px; --bm-mt: 48px; }

/* ---------- Barre d'action mobile (apparaît sous l'en-tête photo, s'efface à la demande) ---------- */
html:root .fiche-barre { display: none; }

/* ---------- Adaptations ---------- */
@media (max-width: 1199px) {
  html:root .fiche-heros { min-height: 620px; }
  html:root .fiche-heros__titre { font-size: 50px; }
  html:root .fiche-apercu__grille { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
  html:root .fiche-points { grid-template-columns: 1fr; }
  html:root .fiche-programme__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* l'encadré passe au-dessus de la frise, en deux colonnes */
  html:root .fiche-resume { position: static; order: -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  html:root .fiche-resume__logo { grid-column: 1 / -1; grid-row: 1; }
  html:root .fiche-resume__titre { grid-column: 1; grid-row: 2; }
  html:root .fiche-resume__faits { grid-column: 1; grid-row: 3 / span 3; }
  html:root .fiche-resume__prix { grid-column: 2; grid-row: 2; margin: 0 0 12px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 12px; --bm-ml: 0; }
  html:root .fiche-resume .fiche-resume__boutons { grid-column: 2; grid-row: 3; }
  html:root .fiche-resume__aide { grid-column: 2; grid-row: 4; }
}
@media (max-width: 991px) {
  html:root .fiche-apercu__grille { grid-template-columns: minmax(0, 1fr); }
  html:root .fiche-points { grid-template-columns: 1fr 1fr; }
  html:root .jour__carte { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html:root .jour__photos { order: -1; grid-template-columns: 1fr; }
  html:root .jour__photos--2 { grid-template-columns: 1fr 1fr; }
  html:root .jour__photos .jour__legende { grid-column: 1 / -1; }
  html:root .jour__photo { aspect-ratio: 16 / 9; }
  html:root .jour__photos--2 .jour__photo { aspect-ratio: 4 / 3; }
  html:root .catalogue.catalogue--3 { grid-template-columns: 1fr 1fr; }
  html:root .fiche-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--blanc);
    box-shadow: 0 -10px 30px rgba(15, 36, 82, .12);
    transform: translateY(110%);
    transition: transform .4s ease;
  }
  html:root .fiche-barre.est-visible { transform: none; }
  html:root .fiche-barre__prix { font-size: 13px; line-height: 1.3; }
  html:root .fiche-barre__prix strong { display: block; font-size: 18px; font-weight: 600; color: var(--marine); }
  html:root .fiche-barre .fiche-barre__boutons { display: flex; flex-wrap: nowrap; gap: 8px; }
  html:root .fiche-barre__boutons .btn { padding: 12px 18px; }
html:root .fiche-barre__boutons .btn > .wp-block-button__link,
html:root .fiche-barre__boutons .btn .elementor-button { padding: 12px 18px; }
}
@media (max-width: 767px) {
  html:root .fiche-heros { min-height: 0; padding: 72px 0 56px; }
  html:root .fiche-heros__fil { font-size: 14px; margin-bottom: 20px; --bm-mb: 20px; }
  html:root .fiche-heros__titre { font-size: 34px; line-height: 1.22; }
  html:root .fiche-heros__accroche { font-size: 16px; }
  html:root .fiche-faits { gap: 8px; margin-top: 24px; --bm-mt: 24px; }
  html:root .fiche-faits li { font-size: 14px; padding: 8px 16px 8px 12px; }
  html:root .fiche-heros__boutons { margin-top: 32px; --bm-mt: 32px; }
  html:root .fiche-points { grid-template-columns: 1fr; }
  html:root .fiche-points li { padding: 18px 20px 18px 58px; font-size: 16px; }
  html:root .fiche-points li::before { left: 20px; top: 18px; }
  html:root .fiche-parcours { padding: 32px 24px 28px; }
  html:root .frise::before { display: none; }
  html:root .jour { padding-left: 0; }
  html:root .jour + .jour { margin-top: 20px; --bm-mt: 20px; }
  html:root .jour__numero {
    position: static; flex-direction: row; gap: 6px;
    width: max-content; min-width: 0; height: 36px; padding: 0 16px; margin-bottom: 12px; --bm-mb: 12px;
    box-shadow: none; font-size: 12px;
  }
  html:root .jour__numero strong { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; font-size: 15px; }
  html:root .jour__carte { padding: 20px; border-radius: 20px; }
  html:root .jour__titre { font-size: 21px; }
  html:root .fiche-resume { display: block; padding: 28px 24px; }
  html:root .fiche-resume__prix { margin: 18px 0 16px; --bm-mt: 18px; --bm-mr: 0; --bm-mb: 16px; --bm-ml: 0; }
  html:root .fiche-tarifs__grille { grid-template-columns: 1fr; }
  html:root .fiche-inclus { padding: 28px 24px; }
  html:root .fiche-inclus__titre { font-size: 21px; }
  html:root .fiche-demande .fiche-choix { flex-direction: column; align-items: stretch; margin-bottom: 32px; --bm-mb: 32px; }
  html:root .fiche-choix .btn { width: 100%; min-width: 0; }
html:root .fiche-choix .btn > .wp-block-button__link,
html:root .fiche-choix .btn .elementor-button { width: 100%; min-width: 0; }
  html:root .catalogue.catalogue--3 { grid-template-columns: 1fr; }
}
/* barre d'administration (connecté) : la barre de l'en-tête et le bouton flottant descendent de 32 px */
html:root .admin-bar .fiche-resume { top: 132px; }
/* logo de l'encadré : plus grand (demande du client) */
html:root .fiche-resume__logo img { width: 100%; max-width: 300px; --bm-max: 300px; height: auto; }


/* ===== 22-activites.css ===== */
/* ==========================================================================
   Pages d'activité (scripts/activites/gen-activites.js). Registre des fiches circuits : photo plein cadre
   à voile bleu nuit, titres Manrope, surtitres Montez verts, boutons bleus, bandes blanc / bleu pâle,
   cartes blanches rayon 24, pilules. Couleurs : variables de base.css seulement.

   Mouvement, sans jamais cacher un contenu :
   - CSS : lent zoom de la photo d'en-tête, léger parallaxe des photos au défilement (navigateurs qui
     connaissent animation-timeline), barres des mois qui montent, survols (translate / scale, propriétés
     distinctes de transform : les animations d'entrée d'Elementor, qui animent transform, ne les écrasent pas) ;
   - WordPress : animations d'entrée natives d'Elementor (réglées par scripts/elementor/convertir.js) ;
   - maquette seule : apparition au défilement posée par le script (classes .revele, jamais sans script).
   Tout s'arrête avec prefers-reduced-motion (base.css).
   ========================================================================== */

/* ---------- Pictos des activités (masques : la couleur suit background) ---------- */
html:root .m-act-marche { --m: url("assets/img/icones/act-marche.svg"); }
html:root .m-act-jumelles { --m: url("assets/img/icones/act-jumelles.svg"); }
html:root .m-act-appareil-photo { --m: url("assets/img/icones/act-appareil-photo.svg"); }
html:root .m-act-vague { --m: url("assets/img/icones/act-vague.svg"); }
html:root .m-act-bateau { --m: url("assets/img/icones/act-bateau.svg"); }
html:root .m-act-poisson { --m: url("assets/img/icones/act-poisson.svg"); }
html:root .m-act-masque { --m: url("assets/img/icones/act-masque.svg"); }
html:root .m-act-soleil { --m: url("assets/img/icones/act-soleil.svg"); }
html:root .m-act-carte { --m: url("assets/img/icones/act-carte.svg"); }
html:root .m-act-montagne { --m: url("assets/img/icones/act-montagne.svg"); }
html:root .m-act-feuille { --m: url("assets/img/icones/act-feuille.svg"); }
html:root .m-act-panier { --m: url("assets/img/icones/act-panier.svg"); }
html:root .m-act-voiture { --m: url("assets/img/icones/act-voiture.svg"); }
html:root .m-act-route { --m: url("assets/img/icones/act-route.svg"); }
html:root .m-act-coeur { --m: url("assets/img/icones/act-coeur.svg"); }
html:root .m-act-etoile { --m: url("assets/img/icones/act-etoile.svg"); }
html:root .m-act-niveau { --m: url("assets/img/icones/act-niveau.svg"); }
html:root .m-act-public { --m: url("assets/img/icones/act-public.svg"); }

/* sections ciblées par le sommaire : l'ancre ne passe pas sous la barre collante */
html:root :is(.activite-consiste, .activite-faire, .activite-lieux, .activite-galerie, .activite-periode, .activite-materiel, .activite-securite, .activite-faq) { scroll-margin-top: 64px; }

/* ---------- En-tête plein écran : photo en lent zoom, voile bleu nuit, repères en verre dépoli ---------- */
html:root .activite-entete {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(640px, calc(100vh - 120px), 960px);
  padding: 150px 0 56px;
  color: var(--blanc);
  background: var(--marine);
  overflow: hidden;
}
@supports (height: 100svh) { html:root .activite-entete { min-height: clamp(640px, calc(100svh - 120px), 960px); } }
html:root .activite-entete__photo { position: absolute; inset: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; overflow: hidden; }
html:root .activite-entete__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 62% 42%;
  animation: activite-zoom 26s cubic-bezier(.25, .6, .3, 1) both;
}
@keyframes activite-zoom { from { transform: scale(1.16); } to { transform: scale(1.02); } }
html:root .activite-entete::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--marine) 84%, transparent) 0%, color-mix(in srgb, var(--marine) 52%, transparent) 46%, color-mix(in srgb, var(--marine) 8%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--marine) 88%, transparent) 0%, transparent 58%);
}
/* téléphone : le texte occupe toute la largeur, le voile aussi (photo claire : écume, sable, ciel) */
@media (max-width: 767px) {
  html:root .activite-entete::before {
    background: linear-gradient(0deg, color-mix(in srgb, var(--marine) 92%, transparent) 0%, color-mix(in srgb, var(--marine) 74%, transparent) 50%, color-mix(in srgb, var(--marine) 54%, transparent) 100%);
  }
}
html:root .activite-entete__contenu { position: relative; z-index: 2; }
html:root .activite-entete__fil { justify-content: flex-start; flex-wrap: wrap; margin: 0 0 30px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 30px; --bm-ml: 0; font-size: 16px; color: color-mix(in srgb, var(--blanc) 90%, transparent); }
html:root .activite-entete__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px; --bm-mb: 18px; padding: 8px 16px 8px 14px; border-radius: 48px;
  background: var(--accent); color: var(--marine);
  font-family: var(--titre); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
html:root .activite-entete__badge::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--marine); animation: activite-pouls 2.4s ease-in-out infinite; }
@keyframes activite-pouls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marine) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
html:root .activite-entete__surtitre { max-width: 900px; --bm-max: 900px; color: var(--accent); }   /* vert sur le voile bleu nuit : lisible */
/* textes de l'en-tête : une ombre douce les détache d'une photo très claire (soleil, écume) */
html:root .activite-entete :is(.activite-entete__surtitre, .activite-entete__titre, .activite-entete__accroche) { text-shadow: 0 2px 18px color-mix(in srgb, var(--marine) 55%, transparent); }
html:root .activite-entete__titre { max-width: 900px; --bm-max: 900px; font-size: 72px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--blanc); }
html:root .activite-entete__accroche { max-width: 660px; --bm-max: 660px; margin-top: 24px; --bm-mt: 24px; font-size: 19px; line-height: 1.65; color: color-mix(in srgb, var(--blanc) 90%, transparent); }
html:root .activite-entete__boutons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; --bm-mt: 38px; }
html:root .activite-entete .btn--plein { border-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
html:root .activite-entete .btn--plein > .wp-block-button__link,
html:root .activite-entete .btn--plein .elementor-button { border-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
html:root .activite-entete .btn--plein:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .activite-entete .btn--plein:hover > .wp-block-button__link,
html:root .activite-entete .btn--plein:hover .elementor-button { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
html:root .activite-reperes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px; --bm-mt: 56px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--blanc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blanc) 22%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html:root .activite-reperes li {
  position: relative;
  padding: 22px 22px 22px 80px;
  font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--blanc);
}
html:root .activite-reperes li + li { border-left: 1px solid color-mix(in srgb, var(--blanc) 16%, transparent); }
html:root .activite-reperes li::before {
  content: ''; position: absolute; left: 22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; --bm-mt: -22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
html:root .activite-reperes li::after {
  content: ''; position: absolute; left: 34px; top: 50%; width: 20px; height: 20px; margin-top: -10px; --bm-mt: -10px; background: var(--accent);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .activite-reperes strong {
  display: block; margin-bottom: 3px; --bm-mb: 3px;
  font-family: var(--corps); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--blanc) 70%, transparent);
}

/* ---------- Sommaire collant : pastilles vers chaque partie, partie visible surlignée par le script ---------- */
html:root .activite-sommaire {
  position: sticky; top: 80px; z-index: 15;   /* sous la barre fixe de l’en-tête */
  background: color-mix(in srgb, var(--blanc) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--trait-bleu);
  transition: box-shadow .3s ease, translate .45s ease, opacity .45s ease, visibility 0s;
}
html:root .activite-sommaire.est-colle { box-shadow: 0 12px 30px color-mix(in srgb, var(--marine) 10%, transparent); }
/* appel final et pied de page : la barre s'efface vers le haut (classe posée par le script) */
html:root .activite-sommaire.est-retire { translate: 0 -100%; opacity: 0; visibility: hidden; pointer-events: none; transition: box-shadow .3s ease, translate .45s ease, opacity .45s ease, visibility 0s .45s; }
html:root .activite-sommaire__rangee { display: flex; align-items: center; gap: 24px; min-height: 72px; }
html:root .activite-sommaire__rangee > :first-child { flex: 1 1 auto; min-width: 0; }
html:root .activite-sommaire__liens {
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 12px 0;
}
html:root .activite-sommaire__liens::-webkit-scrollbar { display: none; }
html:root .activite-sommaire__liens li { flex: none; }
html:root .activite-sommaire__liens a {
  display: block; padding: 9px 18px; border-radius: 48px;
  font-family: var(--titre); font-size: 15px; line-height: 1.2; font-weight: 600; color: var(--marine);
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
html:root .activite-sommaire__liens a:hover { background: var(--bleu-pale); color: var(--primaire); }
html:root .activite-sommaire__liens li.est-actif a { background: var(--primaire); color: var(--blanc); }
html:root .activite-sommaire__devis { flex: none; }
html:root .activite-sommaire__devis > .wp-block-button__link,
html:root .activite-sommaire__devis .elementor-button { flex: none; }
/* WordPress, visiteur connecté : le sommaire colle sous la barre d'administration (fixe au-delà de 600 px) */
html:root .admin-bar .activite-sommaire { top: 32px; }
@media (max-width: 782px) { html:root .admin-bar .activite-sommaire { top: 46px; } }
@media (max-width: 600px) { html:root .admin-bar .activite-sommaire { top: 0; } }

/* ---------- En quoi ça consiste : texte + deux photos superposées, pastille « sur mesure » ---------- */
html:root .activite-consiste { overflow-x: clip; }   /* la trame de points déborde du visuel : jamais de la page (téléphones) */
html:root .activite-consiste__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 88px; align-items: center; }
html:root .activite-consiste__texte > * + * { margin-top: 18px; --bm-mt: 18px; }
html:root .activite-consiste__texte .titre-section { margin-top: 0; --bm-mt: 0; margin-bottom: 10px; --bm-mb: 10px; }
html:root .activite-consiste__chapeau { font-family: var(--titre); font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--marine); }
html:root .activite-consiste__texte :is(p, :where(.bm-p)):not(.surtitre) { font-size: 16px; line-height: 1.8; }
html:root .activite-consiste__texte .activite-consiste__chapeau,
html:root .activite-consiste__texte .activite-consiste__chapeau :is(p, :where(.bm-p)) { font-size: 20px; line-height: 1.6; }
html:root .activite-consiste__visuel { position: relative; padding: 0 0 80px 72px; }
/* trame de points verts derrière les photos */
html:root .activite-consiste__visuel::before {
  content: ''; position: absolute; right: -28px; bottom: 30px; width: 190px; height: 190px; z-index: 0;
  background: radial-gradient(circle, var(--accent) 1.8px, transparent 2.4px) 0 0 / 18px 18px;
  opacity: .45;
}
html:root .activite-consiste__photo { position: relative; z-index: 1; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; overflow: hidden; border-radius: 28px; }
html:root .activite-consiste__photo img { width: 100%; height: 100%; object-fit: cover; }
html:root .activite-consiste__photo--grande { aspect-ratio: 4 / 3.5; box-shadow: 0 30px 60px color-mix(in srgb, var(--marine) 14%, transparent); }
html:root .activite-consiste__photo--petite {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 46%; aspect-ratio: 4 / 3;
  border: 8px solid var(--blanc); border-radius: 26px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--marine) 22%, transparent);
  rotate: -3deg;
  transition: rotate .6s cubic-bezier(.2, .7, .2, 1);
}
html:root .activite-consiste__visuel:hover .activite-consiste__photo--petite { rotate: 0deg; }
html:root .activite-consiste__badge {
  position: absolute; right: -10px; top: 32px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 138px; height: 138px; border-radius: 50%;
  background: var(--primaire); color: var(--blanc); border: 6px solid var(--blanc);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--primaire) 30%, transparent);
  font-family: var(--titre); font-size: 14px; line-height: 1.25; font-weight: 600; text-align: center;
  animation: activite-flotte 6s ease-in-out infinite;
}
html:root .activite-consiste__badge strong { display: block; font-size: 32px; line-height: 1.05; font-weight: 800; }
@keyframes activite-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------- À faire, à découvrir : cartes à picto, numérotées ---------- */
html:root .activite-faire__grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; counter-reset: faire; }
html:root .activite-faire__carte {
  position: relative; flex: 0 1 calc((100% - 48px) / 3);
  padding: 40px 36px 36px;
  border-radius: 24px; background: var(--blanc);
  border: 1px solid var(--trait-bleu);
  counter-increment: faire;
  transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
}
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte { flex-basis: calc((100% - 72px) / 4); padding-inline: 30px; }
html:root .bloc--cyan .activite-faire__carte { border-color: transparent; }
html:root .activite-faire__carte:hover { translate: 0 -8px; border-color: transparent; box-shadow: 0 26px 50px color-mix(in srgb, var(--marine) 12%, transparent); }
/* pastille (pseudo ::before) + picto (::after) : aucun bloc vide */
html:root .activite-faire__carte::before {
  content: ''; display: block;
  width: 68px; height: 68px; margin-bottom: 26px; --bm-mb: 26px; border-radius: 22px;
  background: var(--vert-pale);
  transition: background-color .4s ease, rotate .6s cubic-bezier(.2, .7, .2, 1);
}
html:root .activite-faire__carte::after {
  content: ''; position: absolute; left: 56px; top: 60px;
  width: 30px; height: 30px; background: var(--accent-texte);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  transition: background-color .4s ease;
}
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte::after { left: 50px; }
html:root .activite-faire__carte:hover::before { background: var(--primaire); rotate: -8deg; }
html:root .activite-faire__carte:hover::after { background: var(--blanc); }
html:root .activite-faire__titre { font-size: 21px; line-height: 1.35; font-weight: 700; margin-bottom: 10px; --bm-mb: 10px; }
html:root .activite-faire__titre::before {
  content: counter(faire, decimal-leading-zero);
  position: absolute; top: 36px; right: 32px;
  font-family: var(--titre); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.02em;
  color: var(--bleu-pale);
  transition: color .4s ease;
}
html:root .bloc--cyan .activite-faire__titre::before { color: var(--bleu-trait); }
html:root .activite-faire__carte:hover .activite-faire__titre::before { color: var(--vert-pale); }
html:root .activite-faire__texte { font-size: 15.5px; line-height: 1.7; }

/* ---------- Où aller : grande photo, carte de texte qui la chevauche, côtés alternés ---------- */
html:root .activite-lieux__liste { display: flex; flex-direction: column; gap: 96px; counter-reset: lieu; }
html:root .activite-lieu { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; counter-increment: lieu; }
html:root .activite-lieu__photo {
  grid-column: 1 / span 7; grid-row: 1;
  position: relative; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 28px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--marine) 14%, transparent);
}
html:root .activite-lieu__photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; transition: scale 1.4s cubic-bezier(.2, .7, .2, 1); }
html:root .activite-lieu:hover .activite-lieu__photo img { scale: 1.16; }
html:root .activite-lieu__texte {
  grid-column: 7 / span 6; grid-row: 1;
  position: relative; z-index: 1;
  padding: 48px 48px 44px;
  border-radius: 24px; background: var(--blanc);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--marine) 12%, transparent);
}
html:root .activite-lieu:nth-child(even) .activite-lieu__photo { grid-column: 6 / span 7; }
html:root .activite-lieu:nth-child(even) .activite-lieu__texte { grid-column: 1 / span 6; }
html:root .activite-lieu__texte::before {
  content: counter(lieu, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 22px; --bm-mb: 22px; border-radius: 50%;
  background: var(--vert-pale); color: var(--accent-texte);
  font-family: var(--titre); font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: .04em;
}
html:root .activite-lieu__region {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primaire);
}
html:root .activite-lieu__region::before {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
          mask: url("assets/img/icones/repere-carte.svg") center / contain no-repeat;
}
html:root .activite-lieu__nom { margin-top: 10px; --bm-mt: 10px; font-size: 36px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
html:root .activite-lieu__resume { margin-top: 16px; --bm-mt: 16px; font-size: 16px; line-height: 1.8; }

/* ---------- Galerie : mosaïque sur fond bleu nuit, visionneuse plein écran (script) ---------- */
html:root .activite-galerie {
  position: relative;
  padding-block: var(--section);
  background-color: var(--marine);
  background-image: url("assets/img/deco/motif-voyage.svg");
  background-size: 440px auto;
  overflow: hidden;
  --focus: var(--accent);
}
html:root .activite-galerie::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--marine) 93%, transparent); pointer-events: none; }
html:root .activite-galerie .wrap { position: relative; z-index: 1; }
html:root .activite-galerie .surtitre { color: var(--accent); }
html:root .activite-galerie .titre-section { color: var(--blanc); }
html:root .activite-galerie .chapeau { color: color-mix(in srgb, var(--blanc) 78%, transparent); }
html:root .activite-galerie__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 20px; }
html:root .activite-galerie__photo { position: relative; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; overflow: hidden; border-radius: 20px; cursor: zoom-in; }
html:root .activite-galerie__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
/* cinq photos (cas courant) : une grande (2 × 2) et quatre vignettes, toutes proches du 4:3 : rien n'est rogné */
html:root .activite-galerie__photo:first-child { grid-column: span 2; grid-row: span 2; }
/* quatre photos : deux par rangée ; trois ou six et plus : trois par rangée (photos 3:2, à peine recadrées) */
html:root .activite-galerie__grille:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:root .activite-galerie__grille:is(:has(> :nth-child(3):last-child), :has(> :nth-child(6))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:root .activite-galerie__grille:is(:has(> :nth-child(4):last-child), :has(> :nth-child(3):last-child), :has(> :nth-child(6))) { grid-auto-rows: auto; }
html:root .activite-galerie__grille:is(:has(> :nth-child(4):last-child), :has(> :nth-child(3):last-child), :has(> :nth-child(6))) > .activite-galerie__photo { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; }
html:root .activite-galerie__photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--marine) 70%, transparent), color-mix(in srgb, var(--marine) 10%, transparent));
  opacity: 0; transition: opacity .4s ease;
}
html:root .activite-galerie__photo::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px; --bm-mt: -28px; --bm-mr: 0; --bm-mb: 0; --bm-ml: -28px; border-radius: 50%;
  background: var(--blanc) url("assets/img/icones/recherche.svg") center / 22px no-repeat;
  scale: .4; opacity: 0;
  transition: scale .4s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
html:root .activite-galerie__photo:hover img { transform: scale(1.08); }
html:root .activite-galerie__photo:hover::before,
html:root .activite-galerie__photo:focus-visible::before { opacity: 1; }
html:root .activite-galerie__photo:hover::after,
html:root .activite-galerie__photo:focus-visible::after { scale: 1; opacity: 1; }

/* ---------- Quand partir : texte + carte « mois par mois » (barres), mois en cours marqué par le script ---------- */
html:root .activite-periode__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
html:root .activite-periode__texte > * + * { margin-top: 18px; --bm-mt: 18px; }
html:root .activite-periode__texte .titre-section { margin-top: 0; --bm-mt: 0; }
html:root .activite-periode__resume { font-size: 17px; line-height: 1.8; }
html:root .activite-periode__texte .activite-periode__notes { margin-top: 26px; --bm-mt: 26px; }
html:root .activite-periode__notes li {
  position: relative;
  padding: 14px 18px 14px 52px; border-radius: 16px;
  background: var(--blanc);
  font-size: 15px; line-height: 1.6; color: var(--marine);
}
html:root .bloc:not(.bloc--cyan) .activite-periode__notes li { background: var(--bleu-pale); }
html:root .activite-periode__notes li + li { margin-top: 10px; --bm-mt: 10px; }
html:root .activite-periode__notes li::before {
  content: ''; position: absolute; left: 18px; top: 16px; width: 20px; height: 20px; background: var(--accent-texte);
  -webkit-mask: url("assets/img/icones/act-info.svg") center / contain no-repeat;
          mask: url("assets/img/icones/act-info.svg") center / contain no-repeat;
}
html:root .activite-periode__carte {
  padding: 40px 40px 36px;
  border-radius: 28px; background: var(--blanc);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--marine) 10%, transparent);
}
html:root .bloc:not(.bloc--cyan) .activite-periode__carte { border: 1px solid var(--trait-bleu); }
html:root .activite-periode__titre { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; --bm-mb: 30px; font-size: 22px; line-height: 1.3; }
html:root .activite-periode__titre::before {
  content: ''; flex: none; width: 24px; height: 24px; background: var(--accent);
  -webkit-mask: url("assets/img/icones/calendrier.svg") center / contain no-repeat;
          mask: url("assets/img/icones/calendrier.svg") center / contain no-repeat;
}
html:root .activite-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; }
html:root .activite-mois li { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 176px; text-align: center; }
/* la barre : sa hauteur dit l'intérêt du mois, sa couleur aussi (lecture sans la couleur possible) */
html:root .activite-mois li::before {
  content: ''; display: block; height: 30px; border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--trait) 0 4px, var(--gris-fumee) 4px 8px);
  transform-origin: 50% 100%;
}
html:root .activite-mois li.est-possible::before { height: 84px; background: color-mix(in srgb, var(--primaire) 32%, var(--blanc)); }
html:root .activite-mois li.est-ideal::before { height: 136px; background: linear-gradient(180deg, var(--accent), var(--accent-texte)); }
html:root .activite-mois strong {
  display: block; padding: 4px 0; border-radius: 48px;
  font-family: var(--titre); font-size: 12px; line-height: 1.2; font-weight: 700; color: var(--marine);
  white-space: nowrap;
}
/* état du mois : lu par les lecteurs d'écran, la barre suffit à l'œil */
html:root .activite-mois em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:root .activite-mois li.est-maintenant strong { background: var(--primaire); color: var(--blanc); }
html:root .activite-mois li.est-maintenant::before { box-shadow: 0 0 0 3px var(--blanc), 0 0 0 5px var(--primaire); }
html:root .activite-mois__legende {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 26px; --bm-mt: 26px; padding-top: 22px; border-top: 1px dashed var(--trait);
  font-size: 14px; line-height: 1.4; color: var(--marine);
}
html:root .activite-mois__legende li { display: inline-flex; align-items: center; gap: 8px; }
html:root .activite-mois__legende li::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--trait) 0 3px, var(--gris-fumee) 3px 6px); }
html:root .activite-mois__legende li.est-possible::before { background: color-mix(in srgb, var(--primaire) 32%, var(--blanc)); }
html:root .activite-mois__legende li.est-ideal::before { background: var(--accent); }
html:root .activite-mois__legende li.est-maintenant::before { width: 22px; border-radius: 48px; background: var(--primaire); }
/* « Mois en cours » n'apparaît que si le script a marqué un mois */
html:root .activite-periode__carte:not(:has(.activite-mois .est-maintenant)) .activite-mois__legende .est-maintenant { display: none; }
html:root .activite-periode__saison {
  margin-top: 22px; --bm-mt: 22px; padding: 14px 18px; border-radius: 14px;
  background: var(--vert-pale);
  font-size: 15px; line-height: 1.55; color: var(--marine);
}
html:root .activite-periode__saison strong { margin-right: 4px; --bm-mr: 4px; color: var(--accent-texte); }

/* ---------- Matériel : fourni (coches vertes) / à prévoir (liste à cocher, carte bleu nuit) ---------- */
html:root .activite-materiel__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
html:root .activite-materiel__carte { position: relative; padding: 44px 44px 40px; border-radius: 28px; overflow: hidden; }
html:root .activite-materiel__carte--fourni { background: var(--vert-pale); }
html:root .activite-materiel__carte--prevoir {
  background-color: var(--marine);
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primaire) 55%, transparent), transparent 60%);
  color: var(--blanc);
  --focus: var(--accent);
}
/* grand picto en filigrane dans le coin */
html:root .activite-materiel__carte::after {
  content: ''; position: absolute; right: -26px; bottom: -26px; width: 170px; height: 170px; pointer-events: none;
  background: var(--accent); opacity: .12;
  -webkit-mask: url("assets/img/icones/act-bouclier.svg") center / contain no-repeat;
          mask: url("assets/img/icones/act-bouclier.svg") center / contain no-repeat;
}
html:root .activite-materiel__carte--prevoir::after {
  background: var(--blanc); opacity: .07;
  -webkit-mask-image: url("assets/img/icones/act-sac.svg"); mask-image: url("assets/img/icones/act-sac.svg");
}
html:root .activite-materiel__titre { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-bottom: 26px; --bm-mb: 26px; font-size: 26px; line-height: 1.3; }
/* pastille verte (::before) et picto en masque par-dessus (::after) : coche blanche, sac bleu nuit */
html:root .activite-materiel__titre::before { content: ''; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); }
html:root .activite-materiel__titre::after {
  content: ''; position: absolute; left: 11px; top: 50%; width: 30px; height: 30px; margin-top: -15px; --bm-mt: -15px;
  background: var(--blanc);
  -webkit-mask: url("assets/img/icones/act-coche.svg") center / contain no-repeat;
          mask: url("assets/img/icones/act-coche.svg") center / contain no-repeat;
}
html:root .activite-materiel__carte--prevoir .activite-materiel__titre { color: var(--blanc); }
html:root .activite-materiel__carte--prevoir .activite-materiel__titre::after {
  left: 13px; width: 26px; height: 26px; margin-top: -13px; --bm-mt: -13px; background: var(--marine);
  -webkit-mask-image: url("assets/img/icones/act-sac.svg"); mask-image: url("assets/img/icones/act-sac.svg");
}
html:root .activite-materiel__liste { position: relative; z-index: 1; }
html:root .activite-materiel__liste li {
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent-texte) 30%, transparent);
  font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--marine);
}
html:root .activite-materiel__liste li:last-child { border-bottom: 0; }
/* puce : rond vert (::before) + coche blanche en masque (::after) */
html:root .activite-materiel__liste li::before { content: ''; position: absolute; left: 0; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }
html:root .activite-materiel__liste li::after {
  content: ''; position: absolute; left: 3px; top: 18px; width: 18px; height: 18px; background: var(--blanc);
  -webkit-mask: url("assets/img/icones/act-coche.svg") center / contain no-repeat;
          mask: url("assets/img/icones/act-coche.svg") center / contain no-repeat;
}
html:root .activite-materiel__liste--prevoir li { border-bottom-color: color-mix(in srgb, var(--blanc) 16%, transparent); color: var(--blanc); transition: color .3s, opacity .3s; }
/* case à cocher vide ; cochée par le visiteur (script : rôle checkbox, classe est-coche) */
html:root .activite-materiel__liste--prevoir li::before {
  border-radius: 7px; background: transparent;
  border: 2px solid color-mix(in srgb, var(--blanc) 55%, transparent);
  transition: background-color .25s, border-color .25s;
}
html:root .activite-materiel__liste--prevoir li::after { background: var(--marine); scale: .4; opacity: 0; transition: scale .3s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
html:root .activite-materiel__liste--prevoir li[role="checkbox"] { cursor: pointer; }
html:root .activite-materiel__liste--prevoir li[role="checkbox"]:hover::before { border-color: var(--accent); }
html:root .activite-materiel__liste--prevoir li.est-coche { color: color-mix(in srgb, var(--blanc) 60%, transparent); text-decoration: line-through; text-decoration-color: var(--accent); }
html:root .activite-materiel__liste--prevoir li.est-coche::before { border-color: var(--accent); background: var(--accent); }
html:root .activite-materiel__liste--prevoir li.est-coche::after { scale: 1; opacity: 1; }

/* ---------- Sécurité : panneau bleu nuit, conseils numérotés ---------- */
html:root .activite-securite__panneau {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start;
  padding: 72px;
  border-radius: 32px;
  background-color: var(--marine);
  background-image: url("assets/img/deco/motif-voyage.svg");
  background-size: 420px auto;
  color: var(--blanc);
  overflow: hidden;
  --focus: var(--accent);
}
html:root .activite-securite__panneau::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--marine) 95%, transparent) 30%, color-mix(in srgb, var(--primaire) 88%, transparent));
}
html:root .activite-securite__panneau > * { position: relative; }
html:root .activite-securite__tete > * + * { margin-top: 16px; --bm-mt: 16px; }
html:root .activite-securite .surtitre { color: var(--accent); }
html:root .activite-securite .titre-section { margin-top: 0; --bm-mt: 0; color: var(--blanc); }
html:root .activite-securite__chapeau { font-size: 16px; line-height: 1.8; color: color-mix(in srgb, var(--blanc) 82%, transparent); }
/* bouclier vert sous le texte (décor) */
html:root .activite-securite__tete::after {
  content: ''; display: block; width: 96px; height: 96px; margin-top: 36px; --bm-mt: 36px;
  background: var(--accent);
  -webkit-mask: url("assets/img/icones/act-bouclier.svg") center / contain no-repeat;
          mask: url("assets/img/icones/act-bouclier.svg") center / contain no-repeat;
  animation: activite-flotte 6s ease-in-out infinite;
}
html:root .activite-securite__liste { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 0; list-style: none; counter-reset: conseil; }
html:root .activite-securite__liste li {
  counter-increment: conseil;
  position: relative;
  padding: 20px 0 20px 68px;
  border-bottom: 1px solid color-mix(in srgb, var(--blanc) 14%, transparent);
  font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--blanc) 92%, transparent);
}
html:root .activite-securite__liste li:first-child { padding-top: 6px; }
html:root .activite-securite__liste li:last-child { border-bottom: 0; }
html:root .activite-securite__liste li::before {
  content: counter(conseil);
  position: absolute; left: 0; top: 17px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--marine);   /* chiffre bleu nuit sur vert (5,6:1) */
  font-family: var(--titre); font-size: 16px; line-height: 1; font-weight: 800;
}
html:root .activite-securite__liste li:first-child::before { top: 3px; }

/* ---------- Pourquoi choisir : raisons numérotées en chiffres détourés ---------- */
html:root .activite-pourquoi__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; counter-reset: raison; }
html:root .activite-pourquoi__carte {
  counter-increment: raison;
  position: relative; overflow: hidden;
  padding: 36px 32px 34px;
  border-radius: 24px; background: var(--blanc);
  border: 1px solid var(--trait-bleu);
  transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
html:root .bloc--cyan .activite-pourquoi__carte { border-color: transparent; }
html:root .activite-pourquoi__carte:hover { translate: 0 -8px; box-shadow: 0 26px 50px color-mix(in srgb, var(--marine) 12%, transparent); }
html:root .activite-pourquoi__carte::before {
  content: counter(raison, decimal-leading-zero);
  display: block; margin-bottom: 22px; --bm-mb: 22px;
  font-family: var(--titre); font-size: 58px; line-height: 1; font-weight: 800; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent-texte);
}
/* filet vert → bleu qui se trace au survol */
html:root .activite-pourquoi__carte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primaire));
  scale: 0 1; transform-origin: 0 50%;
  transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}
html:root .activite-pourquoi__carte:hover::after { scale: 1 1; }
html:root .activite-pourquoi__titre { font-size: 21px; line-height: 1.35; font-weight: 700; margin-bottom: 10px; --bm-mb: 10px; }
html:root .activite-pourquoi__texte { font-size: 15.5px; line-height: 1.7; }

/* ---------- Bon à savoir : en-tête collant à gauche, accordéon à droite ---------- */
html:root .activite-faq__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
html:root .activite-faq__tete { position: sticky; top: 184px; }
html:root .activite-faq__tete > * + * { margin-top: 16px; --bm-mt: 16px; }
html:root .activite-faq__tete .titre-section { margin-top: 0; --bm-mt: 0; }
html:root .activite-faq__chapeau { font-size: 16px; line-height: 1.8; }
html:root .activite-faq__tete .activite-faq__bouton { margin-top: 28px; --bm-mt: 28px; }
html:root .activite-faq__tete .activite-faq__bouton > .wp-block-button__link,
html:root .activite-faq__tete .activite-faq__bouton .elementor-button { --bm-mt: 28px; }
html:root .activite-faq .faq { max-width: none; --bm-max: none; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .activite-faq .faq__item,
html:root .activite-faq .e-n-accordion-item { transition: box-shadow .4s ease, border-color .4s ease; }
html:root .activite-faq .faq__item:hover,
html:root .activite-faq .e-n-accordion-item:hover { box-shadow: 0 16px 34px color-mix(in srgb, var(--marine) 8%, transparent); }

/* ---------- Circuits avec cette activité : cartes du catalogue, rangées pleines, la dernière centrée ---------- */
html:root .activite-circuits .catalogue { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 24px; }
html:root .activite-circuits .catalogue > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 0; }
html:root .activite-circuits .catalogue--4 > * { flex-basis: calc((100% - 72px) / 4); }

/* ---------- Autres activités, appel final ---------- */
/* une ou deux cartes seulement (peu de fiches) : cartes plus étroites, centrées */
html:root .activites.activites--2 { max-width: 880px; --bm-max: 880px; margin-inline: auto; --bm-ml: auto; --bm-mr: auto; }
html:root .activites.activites--2 > .activite { flex-basis: calc((100% - 24px) / 2); }
html:root .activites.activites--1 > .activite { flex-basis: 420px; }
html:root .activite-autres__bouton,
html:root .activite-circuits__bouton { display: flex; justify-content: center; margin-top: 48px; --bm-mt: 48px; }
html:root .activite-appel { background: var(--marine); overflow: hidden; }
html:root .activite-appel__photo { position: absolute; inset: 0; z-index: 0; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; overflow: hidden; }
html:root .activite-appel__photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
html:root .activite-appel::before { z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--marine) 80%, transparent), color-mix(in srgb, var(--marine) 88%, transparent)); }
html:root .activite-appel .wrap { z-index: 2; }

/* ---------- Défilement : parallaxe des photos, barres des mois (navigateurs récents ; sinon, image fixe) ---------- */
@supports (animation-timeline: view()) {
  html:root .activite-lieu__photo img,
html:root .activite-consiste__photo--grande img,
html:root .activite-appel__photo img {
    animation: activite-parallaxe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
  }
  html:root .activite-consiste__photo--grande img { scale: 1.1; }
  html:root .activite-mois li::before { animation: activite-barre linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes activite-parallaxe { from { translate: 0 -4%; } to { translate: 0 4%; } }
@keyframes activite-barre { from { scale: 1 .08; } to { scale: 1 1; } }

/* ---------- Apparition au défilement (maquette seule : classes posées par 22-activites.js) ---------- */
html:root .revele { opacity: 0; translate: 0 36px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1); }
html:root .revele--gauche { translate: -56px 0; }
html:root .revele--droite { translate: 56px 0; }
html:root .revele--zoom { translate: 0 0; scale: .9; }
html:root .revele.est-revele { opacity: 1; translate: 0 0; scale: 1; }
html:root .revele--d1 { transition-delay: .12s; }
html:root .revele--d2 { transition-delay: .24s; }
html:root .revele--d3 { transition-delay: .36s; }
html:root .revele--d4 { transition-delay: .48s; }
html:root .revele--d5 { transition-delay: .6s; }

/* ---------- Adaptations ---------- */
@media (max-width: 1199px) {
  html:root .activite-entete__titre { font-size: 58px; }
  html:root .activite-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .activite-reperes li:nth-child(3) { border-left: 0; }
  html:root .activite-reperes li:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--blanc) 16%, transparent); }
  /* quatre raisons : deux rangées de deux (jamais une carte seule sur sa rangée) */
  html:root .activite-pourquoi__grille:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .activite-circuits .catalogue > *,
html:root .activite-circuits .catalogue--4 > * { flex-basis: calc((100% - 24px) / 2); }
  html:root .activite-consiste__grille { gap: 56px; }
  html:root .activite-faire__carte,
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte { flex-basis: calc((100% - 24px) / 2); }
  html:root .activite-lieu__texte { padding: 40px 36px 36px; }
  html:root .activite-lieu__nom { font-size: 30px; }
  html:root .activite-periode__grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html:root .activite-securite__panneau { gap: 48px; padding: 56px; }
  html:root .activite-faq__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html:root .activite-faq__tete { position: static; text-align: center; }
  html:root .activite-faq__tete .activite-faq__chapeau { max-width: 640px; --bm-max: 640px; margin-inline: auto; --bm-ml: auto; --bm-mr: auto; }
  html:root .activite-faq__tete .activite-faq__bouton { display: inline-flex; }
html:root .activite-faq__tete .activite-faq__bouton > .wp-block-button__link,
html:root .activite-faq__tete .activite-faq__bouton .elementor-button { display: inline-flex; }
}
@media (max-width: 991px) {
  html:root .activite-sommaire__devis { display: none; }
html:root .activite-sommaire__devis > .wp-block-button__link,
html:root .activite-sommaire__devis .elementor-button { display: none; }
  html:root .activite-consiste__grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html:root .activite-consiste__visuel { max-width: 640px; --bm-max: 640px; width: 100%; margin-inline: auto; --bm-ml: auto; --bm-mr: auto; }
  html:root .activite-lieux__liste { gap: 56px; }
  html:root .activite-lieu { display: block; }
  html:root .activite-lieu__photo { aspect-ratio: 16 / 10; }
  html:root .activite-lieu__texte { margin: -72px 28px 0; --bm-mt: -72px; --bm-mr: 28px; --bm-mb: 0; --bm-ml: 28px; padding: 36px 32px 32px; }
  html:root .activite-galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
  html:root .activite-galerie__grille:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* cinq photos : la grande sur toute la largeur, puis deux rangées de deux ; quatre ou six : deux par rangée (3:2) ;
     trois : la première sur toute la largeur (jamais de case vide dans la mosaïque) */
  html:root .activite-galerie__photo:first-child { grid-column: 1 / -1; grid-row: span 2; }
  html:root .activite-galerie__grille:has(> :nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .activite-galerie__grille:has(> :nth-child(3):last-child) > .activite-galerie__photo:first-child { grid-column: 1 / -1; }
  html:root .activite-materiel__grille { grid-template-columns: minmax(0, 1fr); }
  html:root .activite-securite__panneau { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 40px; }
  html:root .activite-securite__tete::after { display: none; }
}
/* tablette : deux colonnes, la troisième « autre activité » s'efface (jamais une carte seule sur sa rangée) */
@media (min-width: 576px) and (max-width: 1199px) {
  html:root .activites.activites--3 > :nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  html:root .activite-pourquoi__grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html:root .activite-pourquoi__grille:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .activite-circuits .catalogue { gap: 24px 16px; }
  html:root .activite-circuits .catalogue > *,
html:root .activite-circuits .catalogue--4 > * { flex-basis: calc((100% - 16px) / 2); }
  html:root .activite-entete { min-height: min(640px, 82vh); padding: 72px 0 32px; }
  html:root .activite-entete__fil { font-size: 14px; margin-bottom: 20px; --bm-mb: 20px; }
  html:root .activite-entete__titre { font-size: 38px; line-height: 1.14; }
  html:root .activite-entete__accroche { font-size: 16px; margin-top: 18px; --bm-mt: 18px; }
  html:root .activite-entete__boutons { margin-top: 28px; --bm-mt: 28px; gap: 12px; }
  html:root .activite-reperes { margin-top: 36px; --bm-mt: 36px; border-radius: 20px; }
  html:root .activite-reperes li { padding: 16px 14px 16px 60px; font-size: 14px; }
  html:root .activite-reperes li::before { left: 14px; width: 36px; height: 36px; margin-top: -18px; --bm-mt: -18px; }
  html:root .activite-reperes li::after { left: 23px; width: 18px; height: 18px; margin-top: -9px; --bm-mt: -9px; }
  html:root .activite-reperes strong { font-size: 11px; letter-spacing: .08em; }
  html:root .activite-sommaire__rangee { min-height: 60px; padding-inline: 0; }
  html:root .activite-sommaire__liens { padding: 10px 16px; scroll-padding-inline: 16px; }
  html:root .activite-sommaire__liens a { padding: 8px 14px; font-size: 14px; }
  html:root .activite-consiste__visuel { padding: 0 0 56px 28px; }
  html:root .activite-consiste__badge { width: 108px; height: 108px; right: -4px; top: 18px; border-width: 5px; font-size: 12px; }
  html:root .activite-consiste__badge strong { font-size: 25px; }
  html:root .activite-consiste__chapeau,
html:root .activite-consiste__texte .activite-consiste__chapeau,
html:root .activite-consiste__texte .activite-consiste__chapeau :is(p, :where(.bm-p)) { font-size: 18px; }
  html:root .activite-faire__grille { gap: 16px; }
  html:root .activite-faire__carte,
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte { flex-basis: calc((100% - 16px) / 2); padding: 32px 26px 28px; }
  /* sommaire défilant : les pastilles s'estompent aux bords */
  html:root .activite-sommaire__liens { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); }
  html:root .activite-faire__carte::after,
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte::after { left: 45px; top: 52px; }
  html:root .activite-faire__titre::before { top: 30px; right: 26px; font-size: 38px; }
  html:root .activite-lieu__photo { border-radius: 22px; aspect-ratio: 4 / 3; }
  html:root .activite-lieu__texte { margin: -48px 12px 0; --bm-mt: -48px; --bm-mr: 12px; --bm-mb: 0; --bm-ml: 12px; padding: 28px 24px 26px; border-radius: 20px; }
  html:root .activite-lieu__texte::before { width: 42px; height: 42px; margin-bottom: 16px; --bm-mb: 16px; font-size: 15px; }
  html:root .activite-lieu__nom { font-size: 26px; }
  html:root .activite-lieu__resume { font-size: 15.5px; line-height: 1.75; }
  /* petits écrans : hauteurs tirées des proportions (la grande en 3:2, les vignettes en 4:3), jamais de bandeau étiré */
  html:root .activite-galerie__grille { grid-auto-rows: auto; gap: 10px; }
  html:root .activite-galerie__photo { border-radius: 14px; aspect-ratio: 4 / 3; }
  html:root .activite-galerie__photo:first-child { grid-row: auto; aspect-ratio: 3 / 2; }
  html:root .activite-periode__carte { padding: 28px 20px 24px; border-radius: 22px; }
  html:root .activite-materiel__carte { padding: 32px 24px 28px; border-radius: 22px; }
  html:root .activite-materiel__titre { font-size: 22px; }
  html:root .activite-securite__panneau { padding: 40px 22px; border-radius: 24px; margin-inline: -4px; --bm-ml: -4px; --bm-mr: -4px; }
  html:root .activite-securite__liste li { padding-left: 58px; font-size: 15.5px; }
  html:root .activite-securite__liste li::before { width: 40px; height: 40px; }
  html:root .activite-pourquoi__carte { padding: 30px 26px 28px; }
  html:root .activite-pourquoi__carte::before { font-size: 48px; margin-bottom: 16px; --bm-mb: 16px; }
}
@media (max-width: 575px) {
  html:root .activite-entete__boutons .btn { flex: 1 1 100%; justify-content: center; }
html:root .activite-entete__boutons .btn > .wp-block-button__link,
html:root .activite-entete__boutons .btn .elementor-button { flex: 1 1 100%; justify-content: center; }
  html:root .activite-reperes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html:root .activite-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 8px; }
  html:root .activite-mois li { height: 120px; }
  html:root .activite-mois li::before { height: 22px; }
  html:root .activite-mois li.est-possible::before { height: 52px; }
  html:root .activite-mois li.est-ideal::before { height: 82px; }
  html:root .activites.activites--2 > .activite,
html:root .activites.activites--1 > .activite { flex-basis: 100%; }
  html:root .activite-faire__carte,
html:root .activite-faire__grille:has(> :nth-child(4):last-child) > .activite-faire__carte { flex-basis: 100%; }
  html:root .activite-pourquoi__grille:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  html:root .activite-circuits .catalogue,
html:root .activite-autres .activites {
    flex-wrap: nowrap; justify-content: flex-start; gap: 16px;
    margin-inline: calc(-1 * var(--gouttiere)); --bm-ml: calc(-1 * var(--gouttiere); --bm-mr: ); padding: 6px var(--gouttiere) 18px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  html:root .activite-circuits .catalogue::-webkit-scrollbar,
html:root .activite-autres .activites::-webkit-scrollbar { display: none; }
  html:root .activite-circuits .catalogue > *,
html:root .activite-circuits .catalogue--4 > *,
html:root .activite-autres .activites > .activite { flex: 0 0 84%; scroll-snap-align: start; }
}


/* ===== 23-blog-medias.css ===== */
/* ---------- Articles photos et vidéos du blog ----------
   Lecteur vidéo natif (maquette : <video> ; WordPress : bloc Vidéo ou élément Vidéo d'Elementor, fichier de la
   médiathèque), vidéo verticale à côté de son texte, galerie de photos (visionneuse au clic, 22-activites.js),
   boutons d'action en fin d'article, pastille « Vidéo » sur les cartes d'articles. */

/* l'image mise en avant est l'affiche de la vidéo ou une photo de la galerie : inutile de la montrer deux fois */
html:root .article:has(.article__video, .article__galerie) .article__image { display: none; }

/* ---- lecteur vidéo */
html:root .article__video {
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; border-radius: 20px; overflow: hidden;
  background: var(--marine);
  box-shadow: 0 24px 48px rgba(15, 36, 82, .18);
}
html:root .article__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
/* vidéo de téléphone (9:16) : le cadre recadre aussi les éventuelles bandes noires du fichier */
html:root .article__video--vertical video { aspect-ratio: 9 / 16; }
html:root .article__video + .article__chapeau { margin-top: 32px; --bm-mt: 32px; }

/* vidéo verticale et texte côte à côte */
html:root .article__media-duo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; }
html:root .article__media-texte > * + * { margin-top: 22px; --bm-mt: 22px; }
html:root .article .texte-riche .article__chapeau { font-size: 20px; line-height: 1.65; font-weight: 500; color: var(--marine); }

/* ---- galerie : trois photos de même hauteur (largeurs proportionnelles à leur format) */
html:root .article__galerie { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; margin-top: 32px; --bm-mt: 32px; }
html:root .article__photo { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; min-width: 0; }
html:root .article__photo img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .5s ease; }
html:root .article__photo:hover img { transform: scale(1.04); }
html:root .article__photo--haute { flex: .5625 1 0; }
html:root .article__photo--haute img { aspect-ratio: 9 / 16; }
html:root .article__photo--portrait { flex: .75 1 0; }
html:root .article__photo--portrait img { aspect-ratio: 3 / 4; }
html:root .article__photo--paysage { flex: 1.3333 1 0; }
html:root .article__photo--paysage img { aspect-ratio: 4 / 3; }

/* liens dans le texte des articles (circuit, activités, e-mail) : repérables */
html:root .article .texte-riche :is(p, :where(.bm-p)) a { color: var(--primaire); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html:root .article .texte-riche :is(p, :where(.bm-p)) a:hover { color: var(--marine); }

/* ---- boutons en fin d'article */
html:root .article__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; --bm-mt: 40px; }
html:root .article .texte-riche .article__actions .btn { margin-top: 0; --bm-mt: 0; }
html:root .article .texte-riche .article__actions .btn > .wp-block-button__link,
html:root .article .texte-riche .article__actions .btn .elementor-button { --bm-mt: 0; }

/* ---- pastille « Vidéo » des cartes d'articles (page Blog, accueil) */
html:root .blog__image { position: relative; }
html:root .blog__badge {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(15, 36, 82, .82); color: var(--blanc);
  font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: .02em;
  pointer-events: none;
}
html:root .blog__badge::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6.2v7.6l6.2-3.8z' fill='%230F2452'/%3E%3C/svg%3E") center / 100% no-repeat;
}

@media (max-width: 767px) {
  html:root .article__media-duo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html:root .article__media-duo .article__video { width: 100%; max-width: 320px; --bm-max: 320px; margin-inline: auto; --bm-ml: auto; --bm-mr: auto; }
  html:root .article .texte-riche .article__chapeau { font-size: 18px; }
  html:root .article__galerie { flex-wrap: wrap; gap: 10px; }
  html:root .article__photo--paysage { flex-basis: 100%; }
  html:root .article__actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
html:root .article__actions .btn > .wp-block-button__link,
html:root .article__actions .btn .elementor-button { flex: 1 1 100%; justify-content: center; text-align: center; }
}


/* ===== 23-charte.css ===== */
/* ---------- Charte graphique (page Infos pratiques) : aperçu stylisé + demande du fichier par e-mail ----------
   À gauche, un aperçu composé en CSS : une page blanche inclinée (logo, titre, nuancier, bandeau aux trois
   couleurs du logo) posée sur une seconde page bleue (pseudo-élément), une pastille « PDF » et un disque jaune.
   À droite, le texte, la liste de ce que contient une charte et le formulaire Contact Form 7 (une ligne :
   champ e-mail + bouton). Les couleurs du nuancier sont celles du logo, écrites en dur : elles représentent
   la marque, pas le thème. */
html:root .charte { position: relative; overflow: hidden; }
html:root .charte__grille {
  display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 96px; align-items: center;
}

/* aperçu */
html:root .charte__visuel {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 32px;
  background-color: var(--bleu-pale);
  background-image: url("assets/img/deco/motif-voyage.svg");
  background-size: 360px auto;
}
/* seconde page, bleue, glissée derrière la première */
html:root .charte__visuel::before {
  content: ''; position: absolute; z-index: 0;
  width: 50%; aspect-ratio: 210 / 297;
  border-radius: 14px;
  background: linear-gradient(160deg, #1B449C, #0F2452);
  box-shadow: 0 24px 48px rgba(15, 36, 82, .22);
  transform: translate(20%, -3%) rotate(9deg);
}
/* disque jaune du trèfle, sous la page */
html:root .charte__visuel::after {
  content: ''; position: absolute; z-index: 0; left: 7%; bottom: 9%;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: #F5E02B; opacity: .9;
}
html:root .charte__document {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 52%; aspect-ratio: 210 / 297;
  padding: 16% 9% 0;
  border-radius: 14px; overflow: hidden;
  background: var(--blanc);
  box-shadow: 0 30px 60px rgba(15, 36, 82, .2);
  transform: translate(-6%, 2%) rotate(-4deg);
}
/* bandeau aux trois couleurs du logo, en pied de page */
html:root .charte__document::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7%;
  /* les cinq couleurs du logo : bleu, jaune, vert, rouge, grenat */
  background: linear-gradient(90deg, #1B449C 0 36%, #F5E02B 36% 52%, #45B447 52% 68%, #D04A3A 68% 84%, #8A2630 84%);
}
html:root .charte__logo { width: 84%; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .charte__logo img { display: block; width: 100%; height: auto; }
html:root .charte__document-titre {
  margin-top: 14%; --bm-mt: 14%;
  font-family: var(--titre); font-size: 12px; font-weight: 800; line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase; color: var(--marine);
}
html:root .charte__document-titre::after {
  content: ''; display: block; width: 28px; height: 2px; margin: 10px auto 0; --bm-mt: 10px; --bm-mr: auto; --bm-mb: 0; --bm-ml: auto; border-radius: 2px;
  background: #F5E02B;
}
html:root .charte__carre { width: 62%; margin: 14% 0 0; --bm-mt: 14%; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }   /* logo carré de la marque, au milieu de la page */
html:root .charte__carre img { display: block; width: 100%; height: auto; border-radius: 10px; }
html:root .charte__nuancier { display: flex; justify-content: center; gap: 14px; margin-top: 12%; --bm-mt: 12%; }
html:root .charte__teinte {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--titre); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte);
}
html:root .charte__teinte::before {
  content: ''; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(15, 36, 82, .08);
}
html:root .charte__teinte--bleu { --teinte: #1B449C; }
html:root .charte__teinte--jaune { --teinte: #F5E02B; }
html:root .charte__teinte--vert { --teinte: #45B447; }
html:root .charte__pastille {
  position: absolute; z-index: 2; right: 12%; top: 10%;
  display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--accent); color: var(--sur-accent);
  font-family: var(--titre); font-size: 18px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 12px 24px rgba(15, 36, 82, .18);
  transform: rotate(10deg);
}

/* texte */
html:root .charte__titre { margin-bottom: 18px; --bm-mb: 18px; }
html:root .charte__intro { max-width: 640px; --bm-max: 640px; font-size: 17px; line-height: 1.8; }
html:root .charte__elements {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px;
  margin: 30px 0 38px; --bm-mt: 30px; --bm-mr: 0; --bm-mb: 38px; --bm-ml: 0;
}
html:root .charte__elements li { position: relative; padding-left: 36px; font-size: 15px; line-height: 1.6; color: var(--texte); }
html:root .charte__elements strong { font-weight: 600; color: var(--marine); }
html:root .charte__elements li::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--bleu-pale);
}
html:root .charte__elements li::after {
  content: ''; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; background: var(--primaire);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* formulaire : consigne, puis champ e-mail et bouton sur une ligne (carte .formulaire de 20-pages.css) */
html:root .formulaire--charte { padding: 32px 36px; }
html:root .formulaire .formulaire__consigne {
  margin-bottom: 16px; --bm-mb: 16px;
  font-family: var(--titre); font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--marine);
}
html:root .formulaire__ligne { display: flex; align-items: flex-start; gap: 12px; }
html:root .formulaire__ligne > input,
html:root .formulaire__ligne .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }
html:root .formulaire--charte .formulaire__ligne .btn { flex: none; height: 56px; margin-top: 0; --bm-mt: 0; justify-content: center; }
html:root .formulaire--charte .formulaire__ligne .btn > .wp-block-button__link,
html:root .formulaire--charte .formulaire__ligne .btn .elementor-button { flex: none; height: 56px; --bm-mt: 0; justify-content: center; }
/* WordPress : le bouton est un input[type=submit] (scripts/wp/adaptations.css lui met une marge haute) */
html:root .formulaire.formulaire--charte .formulaire__ligne input[type="submit"] { flex: none; width: auto; height: 56px; margin-top: 0; --bm-mt: 0; padding-top: 0; padding-bottom: 0; }
html:root .formulaire--charte .formulaire__note { margin-top: 14px; --bm-mt: 14px; font-size: 13.5px; line-height: 1.6; }

@media (max-width: 1199px) {
  html:root .charte__grille { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; }
  html:root .charte__elements { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 991px) {
  html:root .charte__grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html:root .charte__visuel { width: 100%; max-width: 520px; --bm-max: 520px; margin-inline: auto; --bm-ml: auto; --bm-mr: auto; }
}
@media (max-width: 767px) {
  html:root .charte__visuel { border-radius: 24px; background-size: 260px auto; }
  html:root .charte__pastille { width: 58px; height: 58px; font-size: 14px; right: 8%; top: 8%; }
  html:root .charte__document { padding-top: 15%; border-radius: 10px; }
  html:root .charte__document-titre { font-size: 9px; letter-spacing: .18em; }
  html:root .charte__document-titre::after { width: 20px; margin-top: 7px; --bm-mt: 7px; }
  html:root .charte__nuancier { gap: 9px; }
  html:root .charte__teinte { font-size: 7px; gap: 4px; }
  html:root .charte__teinte::before { width: 22px; height: 22px; }
  html:root .charte__intro { font-size: 16px; }
  html:root .formulaire--charte { padding: 26px 20px; }
  html:root .formulaire .formulaire__consigne { font-size: 16px; }
}
@media (max-width: 575px) {
  html:root .formulaire__ligne { flex-direction: column; align-items: stretch; }
  html:root .formulaire__ligne > input,
html:root .formulaire__ligne .wpcf7-form-control-wrap { flex: none; }
  html:root .formulaire--charte .formulaire__ligne .btn,
html:root .formulaire.formulaire--charte .formulaire__ligne input[type="submit"] { width: 100%; }
html:root .formulaire--charte .formulaire__ligne .btn > .wp-block-button__link,
html:root .formulaire--charte .formulaire__ligne .btn .elementor-button { width: 100%; }
}


/* ===== 30-formulaires.css ===== */
/* ==========================================================================
   Formulaires : listes déroulantes à choix multiple (Tours | Activités, côte à côte), case anti-robot,
   piège invisible. Script : site/js/sections/30-formulaires.js.
   ========================================================================== */
/* les deux listes côte à côte (une colonne chacune de la grille du formulaire) */
html:root .formulaire__choix { position: relative; min-width: 0; }
html:root .formulaire__choix .formulaire__aide { margin-bottom: 10px; --bm-mb: 10px; }
html:root .formulaire__invite { display: none; }

html:root .formulaire__choix.est-deroulant .wpcf7-checkbox { display: block; max-height: 260px; overflow-y: auto; padding: 4px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .formulaire__choix.est-deroulant .wpcf7-list-item { display: block; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .formulaire__choix.est-deroulant .wpcf7-list-item[hidden] { display: none; }
html:root .formulaire__choix.est-deroulant .wpcf7-list-item label {
  display: flex; align-items: center; gap: 10px; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; padding: 9px 10px;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-size: 14px; line-height: 1.4; color: var(--marine);
}
html:root .formulaire__choix.est-deroulant .wpcf7-list-item label:hover { background: var(--bleu-pale); }
html:root .formulaire__choix.est-deroulant .wpcf7-list-item label:has(input:checked) { background: var(--bleu-pale); font-weight: 600; }

/* bouton qui ouvre la liste */
html:root .choix__bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 54px; padding: 12px 46px 12px 18px; position: relative;
  border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc);
  font-family: var(--corps); font-size: 15px; text-align: left; color: var(--texte); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
html:root .choix__bouton::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; --bm-mt: -6px;
  background: var(--marine); transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .est-ouvert > .choix__bouton::after { transform: rotate(180deg); }
html:root .choix__bouton:hover,
html:root .est-ouvert > .choix__bouton { border-color: var(--primaire); }
html:root .choix__bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
html:root .choix__bouton.a-des-choix { color: var(--marine); font-weight: 600; }
html:root .choix__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root .choix__compte:empty { display: none; }
html:root .choix__compte {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 26px;
  background: var(--accent); color: var(--sur-accent); font-size: 13px; font-weight: 700;
}

/* panneau déroulant */
html:root .choix__panneau {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 4px);
  padding: 10px; border: 1px solid var(--bleu-trait); border-radius: 16px; background: var(--blanc);
  box-shadow: 0 24px 50px rgba(15, 36, 82, .18);
  animation: choix-ouvre .18s ease both;
}
html:root .choix__panneau[hidden] { display: none; }
@keyframes choix-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html:root .choix__recherche {
  width: 100%; height: 42px; margin: 0 0 6px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 6px; --bm-ml: 0; padding: 0 14px 0 38px;
  border: 1px solid var(--trait); border-radius: 10px; font-size: 14px;
  background: var(--bleu-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7070' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 12px center / 16px no-repeat;
}
html:root .choix__vide { margin: 8px 10px; --bm-mt: 8px; --bm-mr: 10px; --bm-mb: 8px; --bm-ml: 10px; font-size: 14px; color: var(--texte); }
html:root .choix__pied { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px 2px; border-top: 1px solid var(--trait); margin-top: 6px; --bm-mt: 6px; }
html:root .choix__pied button { padding: 8px 14px; border: 0; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; }
html:root .choix__effacer { background: none; color: var(--texte); }
html:root .choix__effacer:hover { color: var(--primaire); }
html:root .choix__valider { background: var(--primaire); color: var(--blanc); }
html:root .choix__valider:hover { background: var(--marine); }

/* étiquettes des choix, sous le bouton */
html:root .choix__puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; --bm-mt: 8px; }
html:root .choix__puces:empty { display: none; }
html:root .choix__puce {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; --bm-max: 100%;
  padding: 5px 10px 5px 12px; border: 0; border-radius: 100px;
  background: var(--bleu-pale); color: var(--marine); font-size: 13px; cursor: pointer;
}
html:root .choix__puce::after { content: '×'; font-size: 16px; line-height: 1; color: var(--primaire); }
html:root .choix__puce:hover { background: var(--bleu-trait); }

/* case « Je ne suis pas un robot » : vraie case à cocher, obligatoire, dans un cadre ; la vérification Cloudflare
   Turnstile est derrière, invisible (elle n'apparaît sous la case que si Cloudflare a un doute) */
html:root .formulaire__verification { grid-column: 1 / -1; margin: 8px 0 16px; --bm-mt: 8px; --bm-mr: 0; --bm-mb: 16px; --bm-ml: 0; }
html:root .formulaire--charte .formulaire__verification { margin: 12px 0 4px; --bm-mt: 12px; --bm-mr: 0; --bm-mb: 4px; --bm-ml: 0; }
html:root .formulaire__humain .wpcf7-list-item { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .formulaire__humain label {
  display: inline-flex; align-items: center; gap: 14px; min-width: 280px; max-width: 100%; --bm-max: 100%;
  padding: 14px 20px 14px 16px; border: 1px solid var(--trait); border-radius: 12px;
  background: var(--bleu-pale); cursor: pointer;
  font-family: var(--corps); font-size: 15px; font-weight: 600; color: var(--marine);
  transition: border-color .2s, background-color .2s;
}
html:root .formulaire__humain label:hover { border-color: var(--primaire); }
html:root .formulaire__humain input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0;
  width: 26px; height: 26px; border: 2px solid #9AA7BD; border-radius: 6px; background: var(--blanc); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
html:root .formulaire__humain input[type="checkbox"]:checked {
  border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F2452' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html:root .formulaire__humain input[type="checkbox"]:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
html:root .formulaire__humain label:has(input:checked) { border-color: var(--accent); background: var(--vert-pale); }
html:root .formulaire__verification .wpcf7-turnstile { margin-top: 10px; --bm-mt: 10px; }
html:root .formulaire__verification .wpcf7-turnstile:empty { margin: 0; --bm-mt: 0; --bm-mr: 0; --bm-mb: 0; --bm-ml: 0; }
html:root .pied__verification { flex-basis: 100%; }
html:root .pied__verification:empty { display: none; }

/* piège à robots : invisible pour les visiteurs et les lecteurs d'écran */
html:root .bm-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 767px) {
  html:root .formulaire__choix { grid-column: 1 / -1; }
  html:root .choix__panneau { position: static; margin-top: 6px; --bm-mt: 6px; box-shadow: 0 12px 30px rgba(15, 36, 82, .12); }
}
/* la case garde sa taille : les règles générales des champs du formulaire (largeur, hauteur, rayon) ne la touchent pas */
html:root .formulaire .formulaire__humain input[type="checkbox"] {
  width: 26px; min-width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 6px; box-shadow: none;
}


/* ===== 90-jaune.css ===== */
/* ==========================================================================
   Passage de l'accent vert au jaune du logo (octobre 2026, demande du client).
   Le jaune ne porte jamais de blanc : les pictos posés sur une pastille jaune passent en bleu nuit
   (--sur-accent, 11:1) ; quand la pastille change de couleur au survol, le picto suit.
   ========================================================================== */
html:root .apropos__atout::after,
html:root .valeurs__badge::after,
html:root .valeurs__carte::after,
html:root .carte::after,
html:root .contact-info::after,
html:root .activite-materiel__titre::after,
html:root .activite-materiel__liste li::after { background-color: var(--sur-accent); }
html:root .apropos__atout:hover::after,
html:root .carte:hover::after { background-color: var(--blanc); }   /* pastille bleue au survol */
html:root .valeurs__carte:hover::after { background-color: var(--accent-texte); }                  /* pastille blanche au survol */


/* ===== 91-accueil.css ===== */
/* ==========================================================================
   Accueil (octobre 2026) : chaque section a son fond, et une bordure nette marque le passage de l'une
   à l'autre (demande du client : pas de séparateur décoratif, juste des bordures). Chaque bande de cartes
   a aussi sa propre façon de naviguer, toujours manuelle (glisser, Maj + molette, flèches, clavier).
   ========================================================================== */
html:root :is(.categories, .destinations, .apropos, .valeurs, .tours, .galerie, .chiffres, .guides, .temoignages, .partenaires, .blog) {
  border-top: 1px solid var(--bleu-trait);
}
html:root .valeurs { border-top-color: transparent; }
/* fonds alternés : blanc, bleu pâle, bleu nuit (valeurs), jaune pâle (guides) */
html:root .categories { background-color: var(--blanc); padding-top: 96px; padding-bottom: 88px; }
html:root .destinations { background-color: var(--bleu-pale); padding-top: 96px; padding-bottom: 88px; }
html:root .apropos { background-color: var(--blanc); }
html:root .galerie { background-color: var(--blanc); }
html:root .chiffres { background-color: var(--bleu-pale); padding-top: 96px; padding-bottom: 96px; }
html:root .guides { background-color: var(--vert-pale); }
html:root .temoignages { background-color: var(--blanc); }
html:root .partenaires { background-color: var(--bleu-pale); }
html:root .blog { background-color: var(--blanc); }

/* largeur minimale des cartes : le carrousel en affiche autant que l'écran en contient (00-defile.js) */
html:root .categories__defile { --defile-carte: 230px; }
html:root .destinations__defile { --defile-carte: 340px; }
html:root .guides__defile { --defile-carte: 250px; }
html:root .temoignages__defile { --defile-carte: 340px; }
@media (max-width: 599px) { html:root .defile { --defile-carte: 240px; } }

/* tours populaires : de l'air sous les cartes, la bordure de la section suivante ne les touche plus */
html:root .tours { padding-bottom: 104px; }
/* plus de « sol » blanc sous les photos : la bande bleu pâle à motif continue jusqu'à la bordure suivante */
html:root .tours__curseur::before { content: none; }


/* ===== 99-pied.css ===== */
/* ---------- Pied de page : newsletter, 4 colonnes, barre de copyright sur photo ----------
   Valeurs du gabarit : formulaire de newsletter 660 px (gap 16), zone de widgets
   100 / 46 px, titres de colonne 24 px/600 (marge 30), grille Instagram 3 × 2
   de 312 px (gap 12), pictos de contact dans des pastilles de 40 px, copyright 18 px. */
html:root .pied { position: relative; background: var(--blanc); }

/* newsletter */
html:root .pied__newsletter {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding-top: 110px; padding-bottom: 60px;
  position: relative;
}
html:root .pied__newsletter::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 1px; background: var(--trait);
}
html:root .pied__newsletter-titre {
  max-width: 520px; --bm-max: 520px;
  font-size: 40px; line-height: 1.4; font-weight: 600;
  margin-left: 12px; --bm-ml: 12px;
}
html:root .pied__newsletter-form { display: flex; gap: 16px; flex: 0 1 660px; margin-right: 12px; --bm-mr: 12px; }
html:root .pied__newsletter-form input {
  flex: 1; min-width: 0;
  height: 64px; padding: 0 24px;
  border: 1px solid #C9CDCE; border-radius: 48px;
  background: var(--blanc);
  font-size: 14px; color: var(--marine);
  outline: none;
}
html:root .pied__newsletter-form input::placeholder { color: var(--texte); }
html:root .pied__newsletter-form input:focus { border-color: var(--primaire); }
html:root .pied__abonner { height: 64px; padding: 0 30px; font-size: 18px; }
html:root .pied__abonner::after {
  width: 20px; height: 20px;
  -webkit-mask-image: url("assets/img/icones/avion-papier.svg"); mask-image: url("assets/img/icones/avion-papier.svg");
}
html:root .pied__visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* colonnes */
html:root .pied__colonnes {
  position: relative;
  display: grid;
  grid-template-columns: 412px 193px 283px 312px;
  gap: 40px;
  padding-top: 70px; padding-bottom: 60px;
}
html:root .pied__logo { margin-bottom: 26px; --bm-mb: 26px; }
html:root .pied__logo a { display: inline-block; }
html:root .pied__logo img { display: block; width: auto; height: 76px; }
/* slogan principal (Kaushan Script, jaune or lisible sur le fond blanc du pied) et devise anglaise en trois mots,
   séparés de petits points : identiques dans les deux langues (classe sans-traduction) */
html:root .pied__slogan {
  margin: -8px 0 12px; --bm-mt: -8px; --bm-mr: 0; --bm-mb: 12px; --bm-ml: 0;
  font-family: var(--script); font-size: 26px; line-height: 1.25; font-weight: 400;
  color: var(--accent-texte);
}
/* chaque mot est précédé d'un point ; la liste est décalée de 22 px à gauche et ce décalage est rogné :
   le point qui ouvre une ligne (le premier, ou celui d'un mot renvoyé à la ligne) n'apparaît jamais */
html:root .pied__devise {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
  margin-bottom: 26px; --bm-mb: 26px; margin-left: -22px; --bm-ml: -22px;
  clip-path: inset(0 0 0 22px);
  font-family: var(--titre); font-size: 11.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--marine);
}
html:root .pied__devise li { display: inline-flex; align-items: center; }
html:root .pied__devise li::before {
  content: ''; flex: none; width: 5px; height: 5px; margin: 0 9px 0 8px; --bm-mt: 0; --bm-mr: 9px; --bm-mb: 0; --bm-ml: 8px; border-radius: 50%;
  background: var(--accent-texte);
}
html:root .pied__texte { max-width: 330px; --bm-max: 330px; font-size: 16px; line-height: 1.85; color: #666; margin-bottom: 30px; --bm-mb: 30px; }
html:root .pied__social { display: flex; gap: 18px; }
html:root .pied__social .ico-reseau,
html:root .pied__social .reseaux .elementor-social-icon { border: 0; background: var(--bleu-pale); }
html:root .pied__social .ico-reseau:hover,
html:root .pied__social .reseaux .elementor-social-icon:hover { background: var(--primaire); color: var(--blanc); }

html:root .pied__titre { font-size: 24px; font-weight: 600; line-height: 1; margin: 0 0 30px; --bm-mt: 0; --bm-mr: 0; --bm-mb: 30px; --bm-ml: 0; }
html:root .pied__liens li + li { margin-top: 22px; --bm-mt: 22px; }
html:root .pied__liens a {
  display: inline-flex; align-items: center; gap: 18px;
  color: var(--texte); transition: color .3s, gap .3s;
}
html:root .pied__liens a::before {
  content: ''; width: 8px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 1.5 4.5 4.5L2 10.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 1.5 4.5 4.5L2 10.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .pied__liens a:hover { color: var(--primaire); gap: 22px; }

html:root .pied__infos { max-width: 300px; --bm-max: 300px; }
html:root .pied__info {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 40px; padding-left: 56px;
  line-height: 1.75;
  color: var(--texte);
}
html:root .pied__info + .pied__info { margin-top: 20px; --bm-mt: 20px; }
html:root .pied__info::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bleu-pale);
}
html:root .pied__info::after {
  content: ''; position: absolute; left: 11px; top: 13px;
  width: 18px; height: 18px; background: var(--accent);   /* pictos de contact verts sur pastille bleu pâle */
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html:root .pied__info--telephone { --m: url("assets/img/icones/telephone.svg"); }
html:root .pied__info--email { --m: url("assets/img/icones/email.svg"); }
html:root .pied__info--lieu { --m: url("assets/img/icones/lieu.svg"); }
html:root .pied__info a { color: var(--marine); }
html:root .pied__info a:hover { color: var(--primaire); }
html:root .pied__info-note { font-size: 14px; }
/* le numéro est aussi celui de WhatsApp : lien wa.me sous l'appel */
html:root .pied__info-whatsapp { font-size: 14px; }
html:root .pied__info-whatsapp a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
html:root .pied__info-whatsapp a::before {
  content: ''; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("assets/img/icones/whatsapp.svg") center / contain no-repeat; mask: url("assets/img/icones/whatsapp.svg") center / contain no-repeat;
}

html:root .pied__galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 312px; --bm-max: 312px; }
html:root .pied__galerie a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
html:root .pied__galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
html:root .pied__galerie a:hover img { transform: scale(1.1); }

html:root .pied__haut {
  font-size: 0;
  position: absolute; right: -130px; bottom: 50px;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid var(--marine);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s, border-color .3s;
}
html:root .pied__haut a { position: absolute; inset: 0; border-radius: 50%; }
html:root .pied__haut a { position: absolute; inset: 0; border-radius: 50%; }
html:root .pied__haut::before {
  content: ''; width: 20px; height: 20px; background: var(--marine);
  -webkit-mask: url("assets/img/icones/fleche-haut.svg") center / contain no-repeat;
          mask: url("assets/img/icones/fleche-haut.svg") center / contain no-repeat;
}
html:root .pied__haut:hover { background: var(--primaire); border-color: var(--primaire); }
html:root .pied__haut:hover::before { background: var(--blanc); }

/* barre de copyright sur photo sombre */
html:root .pied__copyright {
  position: relative;
  padding: 18px 0;
  color: var(--blanc);
  background: linear-gradient(rgba(15, 36, 82, .62), rgba(15, 36, 82, .62)), url("assets/img/hero-1.jpg") center 62% / cover no-repeat;
}
html:root .pied__copyright-rangee { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 16px; }
html:root .pied__copyright a:hover { color: var(--accent); }   /* vert sur photo voilée de bleu nuit : lisible */
html:root .pied__membre { display: flex; align-items: center; gap: 22px; }
html:root .pied__membres { display: flex; gap: 8px; }
html:root .pied__membres li {
  min-width: 56px; height: 32px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanc); border-radius: 5px;
  color: var(--marine);
  font-family: var(--titre); font-size: 12px; font-weight: 800; letter-spacing: .04em;
}

@media (max-width: 1599px) {
  html:root .pied__haut { right: 24px; bottom: 16px; }
}
@media (max-width: 1399px) {
  html:root .pied__colonnes { grid-template-columns: 1.3fr .8fr 1.2fr 312px; gap: 32px; }
}
@media (max-width: 1199px) {
  html:root .pied__newsletter { flex-direction: column; align-items: flex-start; }
  html:root .pied__newsletter-titre { margin-left: 0; --bm-ml: 0; }
  html:root .pied__newsletter-form { width: 100%; flex-basis: auto; margin-right: 0; --bm-mr: 0; }
  html:root .pied__colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  html:root .pied__newsletter { padding-top: 72px; }
  html:root .pied__newsletter-titre { font-size: 30px; }
  html:root .pied__newsletter-form { flex-direction: column; }
  html:root .pied__newsletter-form input { flex: none; height: 56px; }
  html:root .pied__abonner { justify-content: center; }
  html:root .pied__colonnes { grid-template-columns: 1fr; padding-bottom: 90px; }
  html:root .pied__devise { margin-left: -18px; --bm-ml: -18px; clip-path: inset(0 0 0 18px); font-size: 10.5px; letter-spacing: .07em; }   /* tient sur une ligne à 390 px */
  html:root .pied__devise li::before { margin: 0 7px 0 6px; --bm-mt: 0; --bm-mr: 7px; --bm-mb: 0; --bm-ml: 6px; }
  html:root .pied__copyright-rangee { flex-direction: column; text-align: center; font-size: 14px; }
  html:root .pied__membre { flex-wrap: wrap; justify-content: center; gap: 10px; }
}


/* ==========================================================================
   Adaptations WordPress — ajoutées à la feuille de la maquette par construire-theme.js
   WordPress imprime le CSS d'un bloc APRÈS style.css : à spécificité égale, le bloc
   gagne. Chaque règle ci-dessous est donc plus spécifique que celle du bloc qu'elle
   corrige, jamais simplement plus tardive (blocs-gutenberg.md).
   ========================================================================== */

/* ---------- Espacement automatique : filet de sécurité à spécificité nulle ---------- */
html:root :where(.wp-block-group) > :where(*),
html:root :where(.wp-block-buttons),
html:root :where(.wp-block-post-content) > :where(*) { margin-block: 0; }
html:root .wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Boutons : la classe du bouton est posée sur le conteneur div.wp-block-button ;
   les styles de la maquette ont été reportés sur le lien par construire-theme.js.
   Le conteneur est neutralisé (sinon il double la pastille et la flèche). */
html:root .wp-block-button.btn { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
html:root .wp-block-button.btn::after,
html:root .wp-block-button.btn::before { content: none; }
html:root .wp-block-buttons .wp-block-button.btn .wp-block-button__link { width: auto; text-decoration: none; word-break: normal; }

/* ---------- Images liées : le lien remplit la figure (le cœur le met en inline-block) ---------- */
html:root .wp-block-image > a { display: block; height: 100%; }
html:root .wp-block-image img { vertical-align: top; }

/* ---------- Réseaux sociaux natifs, dessinés comme les pictos de la maquette ---------- */
html:root .wp-block-social-links.is-style-logos-only { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; font-size: 14px; }
html:root .wp-block-social-links.is-style-logos-only.guides__social { justify-content: center; }
html:root .wp-block-social-links.is-style-logos-only.pied__social { gap: 18px; }
html:root .wp-block-social-links.is-style-logos-only .wp-social-link {
  display: inline-flex; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 1px solid var(--primaire); border-radius: 50%;
  background: none; color: var(--primaire);
  transition: background-color .4s, color .4s, border-color .4s;
}
html:root .wp-block-social-links.is-style-logos-only .wp-social-link:hover { transform: none; background: var(--primaire); color: var(--blanc); }
html:root .wp-block-social-links.is-style-logos-only .wp-social-link a { width: 100%; height: 100%; justify-content: center; padding: 0; color: inherit; }
html:root .wp-block-social-links.is-style-logos-only .wp-social-link svg { width: 14px; height: 14px; fill: currentColor; }
html:root .wp-block-social-links.is-style-logos-only.pied__social .wp-social-link { border-color: transparent; background: var(--bleu-pale); }
html:root .wp-block-social-links.is-style-logos-only.pied__social .wp-social-link:hover { background: var(--primaire); color: var(--blanc); }
html:root .guides__carte:is(:hover, .est-actif) .wp-block-social-links.is-style-logos-only .wp-social-link { border-color: var(--blanc); color: var(--blanc); }
html:root .guides__carte:is(:hover, .est-actif) .wp-block-social-links.is-style-logos-only .wp-social-link:hover { background: var(--blanc); color: var(--primaire); }

/* ---------- En-tête (octobre 2026) ----------
   Les styles de la barre, du panneau latéral, du slogan et du bouton flottant viennent de la maquette
   (site/css/sections/00-entete.css, écrite sur le balisage du bloc Navigation). Ici : ce qui est propre à WordPress. */
html:root .entete.wp-block-group { position: relative; }
html:root .entete .entete__principal { margin: 0; }
html:root .entete .wp-block-navigation.menu { gap: 0; font-family: var(--corps); }
/* le bloc Navigation ne montre que son bouton ; le panneau n'apparaît qu'ouvert */
html:root .entete .wp-block-navigation.menu .wp-block-navigation__responsive-container-open { display: inline-flex; }
html:root .entete .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
html:root .entete .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; }
html:root .entete .wp-block-navigation.menu .is-menu-open .wp-block-navigation__container { align-items: stretch; }
html:root .entete .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item { align-items: center; }
html:root .entete .wp-block-navigation.menu .is-menu-open .wp-block-navigation__submenu-icon { display: inline-flex; }
html:root .entete .wp-block-navigation.menu .is-menu-open .has-child .wp-block-navigation__submenu-container { padding-top: 4px; padding-bottom: 4px; }
html:root .entete .logo .wp-block-site-logo { margin: 0; line-height: 0; }
html:root .entete .logo .wp-block-site-logo a { display: block; }
html:root .entete .slogan-marque { position: absolute; }
html:root .entete .cta-flottant { gap: 0; }

/* ---------- Contact Form 7 : champs aux classes de la maquette ---------- */
html:root .wpcf7 .wpcf7-form-control-wrap { display: block; }
html:root .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html:root .wpcf7-spinner { display: none; }
html:root .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--primaire); color: var(--marine); font-size: 14px; }
html:root .wpcf7-not-valid-tip { margin-top: 6px; color: #C0392B; font-size: 13px; }
html:root .pied__newsletter-form { flex-wrap: wrap; }
html:root .pied__newsletter-form > p { display: contents; }            /* filet si Contact Form 7 ajoute ses <p> */
html:root .pied__newsletter-form .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
html:root .pied__newsletter-form .wpcf7-response-output { flex-basis: 100%; }
html:root .pied__newsletter-form .hidden-fields-container { display: none; }
html:root .pied__newsletter-form input[type="email"] { width: 100%; }
html:root .pied__newsletter-form input[type="submit"],
html:root .formulaire input[type="submit"] {
  -webkit-appearance: none; appearance: none; cursor: pointer; border: 0;
  border-radius: 48px; font-family: var(--corps); font-size: 18px; color: var(--blanc);
  background: var(--marine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10 14M21.5 2.5 14.5 21.5 10 14 2.5 9.5Z'/%3E%3C/svg%3E") right 28px center / 20px no-repeat;
  height: 64px; padding: 0 60px 0 30px;
  transition: background-color .3s;
}
html:root .formulaire input[type="submit"] {
  width: auto; height: auto; margin-top: 28px; padding: 18.8px 63px 18.8px 35px; font-size: 16px; line-height: 1;
  background-color: var(--primaire);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E");
  background-position: right 35px center;
}
html:root .pied__newsletter-form input[type="submit"]:hover { background-color: var(--primaire); }
html:root .formulaire input[type="submit"]:hover { background-color: var(--marine); }

/* ---------- Articles : boucle de requête (blog de l'accueil et page Blog) ---------- */
html:root .wp-block-post-template.blog__grille { margin: 0; padding: 0; list-style: none; }
html:root .blog__grille > .wp-block-post { margin: 0; }
html:root .blog__meta .wp-block-post-date,
html:root .blog__meta .wp-block-post-terms { font-size: 14px; line-height: 24px; color: var(--texte); }
html:root .blog__meta .wp-block-post-terms a { color: inherit; }
html:root .wp-block-post-title.blog__titre a { color: inherit; text-decoration: none; }
html:root .wp-block-read-more.blog__lire {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 25px;
  border: 1px solid var(--marine); border-radius: 48px;
  color: var(--marine); font-size: 16px; line-height: 1; text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s;
}
html:root .wp-block-read-more.blog__lire::after {
  content: ''; width: 16px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12.5 1.5 18 7l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root .wp-block-read-more.blog__lire:hover,
html:root .blog__grille > .wp-block-post:nth-child(3) .wp-block-read-more.blog__lire { background: var(--primaire); border-color: var(--primaire); color: var(--blanc); }
html:root .wp-block-post-featured-image.blog__image img,
html:root .wp-block-post-featured-image.article__image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Divers ---------- */
html:root .wp-block-post-content { overflow-x: clip; }

/* ---------- Boutons dans un texte courant : la marge appartient au conteneur ----------
   Le report automatique met la marge de .texte-riche .btn sur le lien ; le conteneur
   core/buttons reçoit déjà l'espacement des enfants (18 px) : on ne garde que 32 px. */
html:root .texte-riche > .wp-block-buttons { margin-top: 32px; }
html:root .texte-riche .wp-block-button.btn > .wp-block-button__link { margin-top: 0; }

/* ---------- Fiches circuits ---------- */
/* boutons pleine largeur de l'encadré « Votre voyage » et des choix du bas (mobile) :
   le cœur remet width:auto sur le lien (0,5,0) ; même spécificité, déclarée après */
html:root .wp-block-buttons.fiche-resume__boutons .wp-block-button.btn .wp-block-button__link { width: 100%; justify-content: center; }
html:root .fiche-resume__boutons > .wp-block-button.btn { display: block; }
@media (max-width: 767px) {
  html:root .wp-block-buttons.fiche-choix .wp-block-button.btn .wp-block-button__link { width: 100%; justify-content: center; }
  html:root .fiche-choix > .wp-block-button.btn { display: block; }
}
/* champs cachés de Contact Form 7 (dont « reference ») : jamais d'espace réservé */
html:root .formulaire .hidden-fields-container { display: none; }
html:root .formulaire input[type="hidden"] { display: none; }

/* panneau du menu : la feuille du bloc Navigation pose un fond blanc (sélecteur 0,5,0) et une liste à la largeur
   de son contenu ; le voile sombre et la pleine largeur de la liste passent devant */
html:root .entete .wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: rgba(10, 18, 40, .5); color: var(--blanc); }
html:root .entete .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { width: 100%; }

/* ==========================================================================
   Adaptations Elementor — ajoutées APRÈS la feuille de la maquette.
   Les classes de la maquette sont posées sur l'enveloppe de chaque widget ; le texte
   intérieur (titre, paragraphe) en hérite. Les réglages du panneau Elementor (spécificité
   0,4,0 : .elementor-N .elementor-element.elementor-element-ID …) restent prioritaires.
   ========================================================================== */

/* ---------- Titres et paragraphes : le texte hérite de l'élément qui porte les classes ---------- */
html:root .bm .elementor-heading-title {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-wrap: inherit; line-height: inherit; text-align: inherit;
  margin: 0; padding: 0;
}
html:root .bm .elementor-heading-title a { color: inherit; }
html:root .bm-p.bm > p,
html:root .bm-p.bm > .elementor-text-editor > p,
html:root /* 2e forme : aperçu de l’éditeur */
:root .bm-p.bm > .elementor-widget-container > p,
html:root .bm-p.bm > .elementor-widget-container > .elementor-text-editor > p {   /* Elementor 3.x : enveloppe .elementor-widget-container */
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  line-height: inherit; text-align: inherit; margin: 0;
}

/* pastille « Jour 01 » des fiches : le texte est dans un <p> ; il s'efface pour que « Jour » et le numéro soient
   rangés directement par la pastille (flex), comme dans la maquette (sinon retour à la ligne sur mobile) */
html:root .jour__numero.bm-p > p,
html:root .jour__numero.bm-p > .elementor-widget-container,
html:root .jour__numero.bm-p > .elementor-widget-container > p { display: contents; }

/* ---------- Boutons : l'enveloppe du widget porte la classe, le lien porte le style ---------- */
html:root .elementor-widget-button.btn,
html:root .elementor-widget-button.btn:hover,
html:root .elementor-widget-button.btn:focus-within,
html:root .wp-block-button.btn,
html:root .wp-block-button.btn:hover {
  display: block; width: auto; height: auto;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit;
  white-space: normal;
}
html:root .elementor-widget-button.btn::after,
html:root .elementor-widget-button.btn::before,
html:root .wp-block-button.btn::after,
html:root .wp-block-button.btn::before { content: none; }
html:root .btn .elementor-button .elementor-button-content-wrapper { gap: 0; }
html:root .btn .elementor-button .elementor-button-text { flex-grow: 0; }
/* Elementor 3.x : enveloppes .elementor-widget-container et .elementor-button-wrapper autour du lien */
html:root .bm.elementor-widget-button > .elementor-widget-container,
html:root .bm.elementor-widget-button .elementor-button-wrapper { display: contents; }
/* dans une rangée flex de la maquette, l'enveloppe prend la taille de son bouton */
html:root .bm.elementor-widget-button { flex: none; }

/* ---------- Images : le lien remplit l'élément, l'image reste un bloc ---------- */
html:root .bm.elementor-widget-image > a,
html:root .bm.elementor-widget-image > .elementor-widget-container > a { display: block; height: 100%; }
html:root .bm.elementor-widget-image img { display: block; }


/* ---------- Chiffres clés : widget Compteur (le chiffre défile), libellé sous le chiffre ---------- */
html:root .chiffres__compteur .elementor-counter { display: flex; flex-direction: column; align-items: center; }
html:root .chiffres__compteur .elementor-counter-number-wrapper { order: 1; display: block; flex: none; justify-content: center; }
html:root .chiffres__compteur .elementor-counter-number-wrapper > span { font: inherit; color: inherit; line-height: inherit; }
html:root .chiffres__compteur .elementor-counter-title { order: 2; flex: none; }

/* ---------- FAQ : Accordéon imbriqué (details / summary) aux couleurs de la maquette ---------- */
html:root .faq .e-n-accordion { display: block; }
html:root .faq .e-n-accordion-item { display: block; }
html:root .faq .e-n-accordion-item-title { display: block; list-style: none; border: 0; background: none; gap: 0; justify-content: flex-start; }
html:root .faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
html:root .faq .e-n-accordion-item-title-header,
html:root .faq .e-n-accordion-item-title-text { display: block; font: inherit; color: inherit; }
html:root .faq .e-n-accordion-item-title-icon { display: none; }
html:root .faq .e-n-accordion-item > .faq__reponse { display: block; padding: 0 28px 24px; font-size: 16px; line-height: 1.75; border: 0; }

/* ---------- Icônes sociales (widget natif) dessinées comme les pastilles de la maquette ---------- */
html:root .reseaux .elementor-social-icons-wrapper { display: flex; flex-wrap: wrap; justify-content: inherit; gap: inherit; }
html:root .reseaux .elementor-grid-item { display: block; margin: 0; }
html:root .reseaux .elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0;
  border-radius: 50%; font-size: 14px;
}
html:root .reseaux .elementor-social-icon:not(:hover) { background-color: transparent; }
html:root .reseaux .elementor-social-icon svg { width: 14px; height: 14px; fill: currentColor; }
html:root .reseaux .elementor-social-icon i { color: inherit; }

/* ---------- Shortcodes (formulaires, articles, recherche) : aucune enveloppe visible ---------- */
html:root .bm-formulaire,
html:root .bm-articles,
html:root .bm-recherche { display: contents; }

/* ---------- Héros : sa hauteur suit la fenêtre (01-heros.css) ----------
   une « hauteur minimale » (ex. 100vh), une largeur « encadrée » ou un centrage posés dans le panneau du
   conteneur repoussaient le formulaire sous la ligne de flottaison et le rétrécissaient sur tablette */
html:root .heros.e-con { min-height: 0; }
html:root body:not(.elementor-editor-active) .heros.e-con > .e-con-inner { display: contents; }
/* mode édition : diapositives à plat, les flèches restent en haut à droite de la première */
html:root .elementor-editor-active .heros__commandes { top: 262px; bottom: auto; margin-block: 0; }

/* ---------- Mode édition Elementor : toutes les variantes visibles et modifiables, à plat ---------- */
html:root .elementor-editor-active .heros { height: auto; }
html:root .elementor-editor-active .heros__diapo { position: relative; inset: auto; opacity: 1; visibility: visible; min-height: 640px; }
html:root .elementor-editor-active .heros__diapo + .heros__diapo { border-top: 6px solid var(--blanc); }
html:root .elementor-editor-active .fiche-panneau { display: block !important; }
html:root .elementor-editor-active .fiche-barre { display: flex; position: relative; transform: none; margin-top: 24px; border: 1px dashed var(--primaire); border-radius: 16px; }
html:root .elementor-editor-active .fiche-resume { position: relative; top: auto; }
html:root .elementor-editor-active .elementor-invisible { visibility: visible; }

/* pastilles sociales : le pictogramme du widget suffit (pas celui, en masque, de la maquette) */
html:root .reseaux .elementor-social-icon::before { content: none; }
/* newsletter du pied : le champ e-mail s'étire, le bouton garde sa taille */
html:root .pied__newsletter-form input[type="submit"] { flex: none; width: auto; }
html:root .pied__newsletter-form .wpcf7-form-control-wrap { flex: 1 1 auto; }
/* menu mobile de l'en-tête WordPress (bloc Navigation) : sur le panneau ouvert bleu nuit, focus clavier vert,
   comme sur le panneau de la maquette (le bleu du logo n'y ferait que 1,7:1) */
html:root .wp-block-navigation__responsive-container.is-menu-open { --focus: var(--accent); }
/* carrousels à plat dans l'éditeur : chaque carte se sélectionne, se modifie, se duplique */
html:root .elementor-editor-active .tours__piste { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }
html:root .elementor-editor-active .tours__carte { grid-area: auto; transform: none; opacity: 1; visibility: visible; }
html:root .elementor-editor-active .tours__curseur::before { display: none; }
html:root .elementor-editor-active .galerie__planche { grid-area: auto; opacity: 1; visibility: visible; }
html:root .elementor-editor-active .galerie__planche + .galerie__planche { margin-top: 32px; padding-top: 32px; border-top: 1px dashed var(--primaire); }
html:root .elementor-editor-active .partenaires__piste { flex-wrap: wrap; justify-content: center; width: auto; }

/* ---------- Pages d'activité en mode édition : rien ne bouge, rien ne colle, tout se sélectionne ----------
   (la frise des mois, les photos et la pastille gardent leur état final ; le sommaire et l'en-tête de la FAQ
   restent à leur place au lieu de suivre le défilement de l'aperçu) */
html:root .elementor-editor-active .activite-sommaire,
html:root .elementor-editor-active .activite-faq__tete { position: relative; top: auto; }
html:root .elementor-editor-active :is(.activite-entete__photo img, .activite-lieu__photo img, .activite-consiste__photo--grande img, .activite-appel__photo img, .activite-consiste__badge, .activite-entete__badge),
html:root .elementor-editor-active :is(.activite-mois li, .activite-securite__tete, .activite-entete__badge)::before,
html:root .elementor-editor-active .activite-securite__tete::after { animation: none; }

/* défilement infini (00-defile.js) : dans l'éditeur, cartes à plat, toutes sélectionnables */
html:root .elementor-editor-active .defile__piste { flex-wrap: wrap; overflow: visible; transform: none !important; width: auto; }

/* ---------- Animations d'entrée sans débordement (demande du client) ----------
   Les entrées natives d'Elementor font venir l'élément de toute sa largeur (translate 100 %) : il traversait les
   colonnes voisines. Ici : les IMAGES se dévoilent dans leur propre cadre (rideau qui s'ouvre, léger glissé),
   les autres éléments ne glissent que de 40 px. Les réglages d'animation restent ceux du panneau Elementor. */
@keyframes bm-image-gauche { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-16px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes bm-image-droite { from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(16px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes bm-image-haut { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(16px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes bm-image-bas { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-16px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes bm-entree-gauche { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes bm-entree-droite { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes bm-entree-haut { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes bm-entree-bas { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
html:root .elementor-element.animated.fadeInLeft { animation-name: bm-entree-gauche; }
html:root .elementor-element.animated.fadeInRight { animation-name: bm-entree-droite; }
html:root .elementor-element.animated.fadeInUp { animation-name: bm-entree-haut; }
html:root .elementor-element.animated.fadeInDown { animation-name: bm-entree-bas; }
html:root .elementor-widget-image.animated.fadeInLeft { animation-name: bm-image-gauche; }
html:root .elementor-widget-image.animated.fadeInRight { animation-name: bm-image-droite; }
html:root .elementor-widget-image.animated.fadeInUp { animation-name: bm-image-haut; }
html:root .elementor-widget-image.animated.fadeInDown { animation-name: bm-image-bas; }
html:root .elementor-widget-image.animated { animation-timing-function: cubic-bezier(.22, .8, .2, 1); }