@font-face { font-family: "icons"; src: url("../fonts/icons.eot"); src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg"); font-weight: normal; font-style: normal; } /* Inter : font-family: 'Inter', sans-serif; Outfit : font-family: 'Outfit', sans-serif; Epilogue : font-family: 'Epilogue', sans-serif; */ :root{ --brique:#c1666b; /* Artisanat */ --brique_hover:#a94f54; --bleu:#1e75a0; /* Croisières / Circuits */ --bleu_hover:#1d698f; --violet:#75417f; /* Culture / Laos */ --violet_hover:#5f3468; --vert:#4a7c59; /* Nature / Farm Stay / Informations */ --vert_hover:#3b6347; --jaune:#d99f3e; /* Spiritualité / Luang Prabang */ --jaune_hover:#bd8630; --orange:#e96a25; /* Sport & Aventure */ --orange_hover:#c7561c; --gris:#535359; /* Généraliste */ --gris_hover:#33404a; /* Couleur dominante par catégorie de page (voir zcore_composition_class()) */ --c-generale:var(--gris); --c-circuit:var(--bleu); --c-info:var(--brique); --c-mice:var(--violet); --c-page:var(--c-generale); --ink:var(--gris); --titre:var(--gris-deep); --fond-autre:#faf8f4; --gris-bg:#eef1f2; --gris-deep:#33404a; --line:#dedad3; --blanc:#fff; /* Triplet RGB de --gris-deep, ressorti en variable car repris tel quel (hors var()) dans plusieurs box-shadow/overlays du fichier. */ --ink-rgb:32,39,47; --radius-md:0.2em; --radius-lg:0.4em; --radius-xl:1em; --shadow-card:0 3px 7px rgba(var(--ink-rgb),.10); --shadow-card-hover:0 10px 10px rgba(var(--ink-rgb),.18); /* Échelle d'espacement générique, réutilisable partout où un padding/gap est posé "à la main" — norme fixée sur .edito-face-avant .content (2em, demande utilisateur du 2026-09-07) = --space-lg. Toute nouvelle section doit piocher dans cette échelle plutôt qu'inventer une valeur ad hoc, pour que les cartes/panneaux du site restent visuellement homogènes. */ --space-xs:.5em; --space-sm:1em; --space-md:1.5em; --space-lg:2em; --space-xl:3em; --font-texte: 'Inter', 'Outfit', 'Epilogue', 'Work Sans', Arial, sans-serif; /* I want to test these options */ --font-titres: 'Fraunces', Georgia, serif; --font-eyebrow: var(--font-titres); } /* Sommaire (lignes approximatives, à date de la v1.2.2) : - Couleurs/thème de page, classe .couleur/data-couleur .......... 61 - Base (body, typo, liens, boutons, listes, icônes) ............. 81 - Fil d'ariane .................................................. 180 - Header (bannière, variantes dist/sommaire/recherche/generale) . 490 - Grille/sections génériques, rythme de fond alterné ............ 1740 - Cartes (edito/testimonial/tour/rubrique), médias recadrés ..... 1778 - CTA (contact, googlemap, prochain événement, a-la-une) ........ 2440 - Sommaire v1.2.0 (header/breadcrumb dédiés) ..................... 3195 Section suivante non listée : voir les commentaires /* Titre */ au fil du fichier, pas de renumérotation exhaustive pour ce nettoyage. */ /* Couleur dominante par catégorie de page */ html.composition_circuit, html.composition_circuits { --c-page:var(--c-circuit); } html.composition_information, html.composition_informations { --c-page:var(--c-info); } html.composition_mice { --c-page:var(--c-mice); } /* Classe generique "couleur" : chaque
du site porte cette classe plus un attribut data-couleur (une des 7 couleurs thematiques) qui pilote --c-section pour cette section. Remplace les mecanismes ad hoc utilises auparavant par certaines sections (style inline --c-accent, classe .avant-voyage codee en dur) par un seul point d'entree reutilisable. */ .couleur[data-couleur="brique"] { --c-section:var(--brique); --c-section-hover:var(--brique_hover); } .couleur[data-couleur="bleu"] { --c-section:var(--bleu); --c-section-hover:var(--bleu_hover); } .couleur[data-couleur="violet"] { --c-section:var(--violet); --c-section-hover:var(--violet_hover); } .couleur[data-couleur="vert"] { --c-section:var(--vert); --c-section-hover:var(--vert_hover); } .couleur[data-couleur="jaune"] { --c-section:var(--jaune); --c-section-hover:var(--jaune_hover); background: var(--blanc);} .couleur[data-couleur="orange"] { --c-section:var(--orange); --c-section-hover:var(--orange_hover); } .couleur[data-couleur="gris"] { --c-section:var(--gris); --c-section-hover:var(--gris_hover); } body{ font-family:var(--font-texte); color:var(--ink); background:#f9f7f6; -webkit-font-smoothing:antialiased; font-size: 14pt; font-weight: 500; letter-spacing: 0.025em; line-height: 1.75em; } /* body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } */ a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; color: var(--c-page); text-decoration: none; border-bottom: dotted 1px; } a:hover { border-bottom-color: transparent; } strong, b {font-weight: 700;} img {max-width: 100%; height: auto;} em, i {font-style: italic;} p, ul, ol, dl, table, blockquote {margin: 0 0 2em 0;} h1, h2, h3, h4, h5, h6 { font-family: var(--font-titres); color: var(--titre); font-weight: 800; line-height: 1.3em; margin-bottom: 0.8em; letter-spacing: 0.02em; } h1 { font-size: 2.5em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; border: 0; } h2 { font-size: 1.5em; letter-spacing: 0em; line-height: 1.1em; } h3 { font-size: 1.15em; letter-spacing: 0.025em; } /* h4-h6 : titres dans les blocs (cartes, etc.), harmonisés sur un seul gabarit — taille reprise du titre des 6 bénéfices (demande du 2026-08-21) */ h4 { font-size: .95em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } hr { border-top: solid 1px rgba(124, 128, 129, 0.2); border: 0; margin-bottom: 1.5em; } blockquote { border-left: solid 0.5em rgba(124, 128, 129, 0.2); font-style: italic; padding: 1em 0 1em 2em; } /* Fil d'Ariane */ /* Fond anthracite + menu horizontal generalises a #breadcrumb par defaut (demande utilisateur 2026-09-15, confirme "toujours" sur toutes les pages le 2026-09-16 - l'ancien fond bleu propre a rubrique-circuits a ete retire a cette occasion, voir RUBRIQUE CIRCUITS plus bas). Plus aucune page ne surcharge cette couleur : html.page_sommaire et html.rubrique_circuits ne surchargent plus que leur propre positionnement sticky (is-fixed) - tout le reste (couleur, ordre, tailles, marges) vient d'ici. */ #breadcrumb { padding: .7em 0; border-bottom: 0; background: rgba(var(--ink-rgb), .94); color: rgba(255, 255, 255, .85); } #breadcrumb .container { display: flex; align-items: center; /* flex-start (et non space-between) : #breadcrumb .container accueille .breadcrumb-lang (drapeaux, cf. body.html) sur toutes les pages, en plus du fil d'ariane et du menu horizontal - c'est la marge auto posee sur ul.breadcrumb-items plus bas qui pousse menu+drapeaux a droite, pas justify-content (sans effet sur les pages a un seul enfant, rien a repartir, donc aucune regression sur le fil d'ariane seul). */ justify-content: flex-start; gap: 1em; } /* Drapeaux de langue a droite du menu horizontal, boutons A-/A+ a gauche du fil d'ariane (demande utilisateur 2026-09-15 - inversion de l'ordre d'origine, ou les drapeaux etaient en premier dans le HTML de body.html et les boutons ajoutes en dernier par le JS du plugin boutonstexte). #breadcrumb .container est deja en flex : un simple `order` sur chaque enfant suffit, sans toucher a l'ordre du HTML ni au JS d'injection. Ordre visuel : boutons > fil d'ariane > menu horizontal > drapeaux. `.nav-secondary-wrap` est scope a #breadcrumb ici (pas de regle globale sur cette classe), seul contexte ou elle vit encore depuis la suppression de la bar2 des headers (2026-09-16). `.boutonstexte` recoit son `order:-1` plus bas, regroupe avec le reste de ses regles existantes plutot que duplique ici. */ #breadcrumb .nav-secondary-wrap { order: 1; flex-shrink: 0; } .breadcrumb-lang { order: 2; flex-shrink: 0; } ul.breadcrumb-items { display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto 0 0; padding: 0; font-size: .8em; letter-spacing: .03em; color: inherit; } ul.breadcrumb-items li.item { display: flex; align-items: center; } /* Demande utilisateur 2026-09-16 : inversion du contraste - les rubriques meres (liens ancetres, menant vers le contenu courant) ressortent en blanc vif, tandis que le contenu courant (dernier maillon, span non cliquable) est attenue par opacite. */ ul.breadcrumb-items li.item.active { opacity: .7; font-weight: 500; } ul.breadcrumb-items a { color: var(--blanc); border-bottom-color: transparent; opacity: 1; } ul.breadcrumb-items a:hover { opacity: .8; } ul.breadcrumb-items .sep { margin: 0 .5em; opacity: .5; } /* Icone "maison" (SVG images/icon_home.svg) a la place du texte "Accueil" en tete du fil d'ariane (breadcrumb/dist.html et inc-objet.html) - lien icone seule, texte accessible via title/aria-label sur le . */ ul.breadcrumb-items .icon-home { display: inline-block; width: 1.6em; height: 1.6em; background: url("../images/icon_home.svg") no-repeat center / contain; } /* Demande utilisateur 2026-09-16 : l'icone Home garde son ancien comportement (grise au repos, blanc vif au survol), non concernee par l'inversion de contraste ci-dessus appliquee aux rubriques meres. */ ul.breadcrumb-items a.icon-home { opacity: .75; } ul.breadcrumb-items a.icon-home:hover { opacity: 1; } /* Menu horizontal du fil d'ariane, style "onglets" (demande utilisateur 2026-09-15, affinee le 2026-09-16) : la 1ere entree (Circuits) et la suivante (Explorer) ont chacune un contour de couleur (circuit/info), fond transparent par defaut ; le fond ne se remplit de cette couleur que lorsque le contenu courant fait partie de la rubrique concernee. Les autres entrees (dont Contact, en derniere position) restent sans contour, fond toujours transparent. Selecteurs de position (nth-child) plutot que des classes du plugin Menus, pour ne pas dependre des libelles/rangs exacts configures en back-office - la seule hypothese est qu'Accueil ne fait plus partie de ce menu (retire du back-office le 2026-09-15). Enfant DIRECT (>) de .nav-secondary, pas simple descendant : le panneau deroulant de chaque entree (.circuit-dropdown, .mega-panel) contient lui-meme des .menu-entree/.menu-items__lien imbriques (sous- rubriques) qui seraient sinon aussi cibles par ces regles (constate le 2026-09-15 - bug de fond corrige ici, cf. demande utilisateur). Scope #breadcrumb .nav-secondary uniquement, seul contexte ou cette classe vit encore depuis la suppression de la bar2 des headers (2026-09-16). */ #breadcrumb .nav-secondary > .menu-entree:nth-child(1) > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(1) > .menu-items__texte { background: transparent; border: 1px solid var(--c-circuit); border-radius: 4px; } /* .on : classe posee nativement par le plugin Menus (menus_exposer) sur l'entree Circuits (type "objet", pointe une rubrique) quand la page courante en fait partie (rubrique elle-meme ou tout article de sa branche) - deja utilisee ailleurs dans ce fichier (menu-entree.on). */ #breadcrumb .nav-secondary > .menu-entree:nth-child(1).on > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(1).on > .menu-items__texte { background: var(--c-circuit); } #breadcrumb .nav-secondary > .menu-entree:nth-child(2) > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(2) > .menu-items__texte { background: transparent; border: 1px solid var(--c-info); border-radius: 4px; } /* Explorer (entree "texte_libre") n'a pas d'equivalent natif a .on (le squelette du plugin menus/texte_libre.html n'appelle pas menus_exposer, contrairement a menus/objet.html) - "actif" est donc calcule a la main dans breadcrumb/dist.html (rubrique courante ou un de ses ancetres = Luang Prabang/Le Laos) et pose en classe .explorer-actif sur .nav-secondary-wrap, notre propre markup. */ #breadcrumb .nav-secondary-wrap.explorer-actif > .nav-secondary > .menu-entree:nth-child(2) > .menu-items__lien, #breadcrumb .nav-secondary-wrap.explorer-actif > .nav-secondary > .menu-entree:nth-child(2) > .menu-items__texte { background: var(--c-info); } /* "Plus d'infos" (3e entree depuis le retrait d'Accueil le 2026-09-15, entree "objet" comme Circuits : classe .on posee nativement par menus_exposer, pas de calcul manuel necessaire ici contrairement a Explorer). Couleur jaune-or demandee par l'utilisateur - texte fonce force sur l'etat rempli, --jaune etant trop clair pour du blanc (cf. commentaire de .info-dropdown plus haut). */ #breadcrumb .nav-secondary > .menu-entree:nth-child(3) > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(3) > .menu-items__texte { background: transparent; border: 1px solid var(--jaune); border-radius: 4px; } #breadcrumb .nav-secondary > .menu-entree:nth-child(3).on > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(3).on > .menu-items__texte { background: var(--jaune); color: #111; } /* plugin boutonstexte : injecté par JS dans #breadcrumb .container (cf. javascript/boutonstexte.js). float:none impératif : le CSS natif du plugin (css/boutonstexte.css) pose `.boutonstexte {float:right}` et n'est jamais réécrit par cette règle (seule display: est reprise ici) — sans ce reset, un cache CSS perimé ou tout contexte ou le conteneur `#breadcrumb .container` n'est pas trouve par le JS (repli sur prependTo('body')) fait flotter les boutons A-/A+ en haut a droite de tout le viewport au lieu de rester dans le fil d'ariane (observe sur Firefox, cf. retour utilisateur du 2026-09-10). Effet d'opacite aligne sur l'icone Accueil (`.icon-home`, `ul.breadcrumb-items a`) le 2026-09-16 : .75 au repos, 1 au survol, demande explicite utilisateur ce jour (remplace l'opacite pleine fixee la veille). */ .boutonstexte { display: inline-flex; float: none; align-items: center; gap: .5em; flex-shrink: 0; order: -1; } .boutonstexte a { display: inline-flex; opacity: .75; border-bottom: none; } .boutonstexte a:hover { opacity: 1; } .boutonstexte img { width: 18px; height: 18px; } /* Pagination */ /* Image */ /* List */ ol { list-style: decimal; padding-left: 1.25em; } ol li { padding-left: 0.25em; } ul { list-style: disc; padding-left: 1em; } ul li { padding-left: 0.5em; } /* Icons */ /* Buttons */ ul.buttons { cursor: default; list-style: none; padding-left: 0; } ul.buttons:last-child { margin-bottom: 0; } ul.buttons li { display: inline-block; padding: 0 0 0 1.5em; } ul.buttons li:first-child { padding: 0; } ul.buttons.stacked li { display: block; padding: 1.5em 0 0 0; } ul.buttons.stacked li:first-child { padding: 0; } /* Form */ input[type="text"], input[type="password"], input[type="email"], textarea { -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; background: none; border: solid 1px rgba(124, 128, 129, 0.2); border-radius: 0; color: inherit; display: block; padding: 0.75em; text-decoration: none; width: 100%; outline: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border-color: #83d3c9; } input[type="text"], input[type="password"], input[type="email"] { line-height: 1em; } ::-webkit-input-placeholder { color: inherit; opacity: 0.5; position: relative; top: 3px; } :-moz-placeholder { color: inherit; opacity: 0.5; } ::-moz-placeholder { color: inherit; opacity: 0.5; } :-ms-input-placeholder { color: inherit; opacity: 0.5; } /* List */ ol { list-style: decimal; padding-left: 1.25em; } ol li { padding-left: 0.25em; } ul { list-style: disc; padding-left: 1em; } ul li { padding-left: 0.5em; } /* Icons */ ul.icons { list-style: none; padding-left: 0; cursor: default; } ul.icons li { display: inline-block; line-height: 1em; padding-left: 0.5em; } ul.icons li:first-child { padding-left: 0; } /* Button */ input[type="button"], input[type="submit"], input[type="reset"], button, .button { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; background: none; border: solid 1px; border-radius: 0; color: inherit; cursor: pointer; display: inline-block; font-size: 0.8em; font-weight: 900; letter-spacing: 2px; min-width: 18em; padding: 0 0.75em; line-height: 3.75em; text-align: center; text-decoration: none; text-transform: uppercase; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover { background: rgba(188, 202, 206, 0.15); border-color: inherit; } input[type="button"].stylelight, input[type="submit"].stylelight, input[type="reset"].stylelight, button.stylelight, .button.stylelight { background: #83d3c9; border-color: #83d3c9; color: var(--blanc) !important; } input[type="button"].stylelight:hover, input[type="submit"].stylelight:hover, input[type="reset"].stylelight:hover, button.stylelight:hover, .button.stylelight:hover { background: #96dad1 !important; border-color: #96dad1 !important; } input[type="button"].fit, input[type="submit"].fit, input[type="reset"].fit, button.fit, .button.fit { width: 100%; } input[type="button"].small, input[type="submit"].small, input[type="reset"].small, button.small, .button.small { font-size: 0.7em; min-width: 14em; padding: 0.5em 0; } /* Effet "light-sweep" : balayage lumineux diagonal au survol, repris de template_travel_base/css/theme.css — classe générique (au lieu d'une liste de sélecteurs figée) réutilisable sur tout bouton plein (sidebar circuits-filtre, sommaire-circuits...). */ .btn-light-sweep { position: relative; overflow: hidden; } .btn-light-sweep::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s ease; } .btn-light-sweep:hover::after { left: 120%; } /* Wrapper */ .wrapper { margin-bottom: 5em; padding: 5em; } .wrapper.nopadding { padding: 0; } /* colle au pied-de-page : seul le margin-bottom saute, padding et style-* restent actifs */ .wrapper.cta { margin-bottom: 0; } .wrapper.stylebleu {background-color: var(--bleu); color: var(--blanc);} .wrapper.stylejaune {background-color: var(--jaune); color: #111;} .wrapper.stylebrique {background: var(--brique); color: var(--blanc);} .wrapper.styleviolet {background: var(--violet); color: var(--blanc);} .wrapper.styleorange {background: var(--orange); color: var(--blanc);} .wrapper.stylevert {background: var(--vert); color: var(--blanc);} .wrapper.stylegris-bg {background: var(--gris-bg); color: var(--ink);} .wrapper.stylegris-deep {background: var(--gris-deep); color: var(--blanc);} .wrapper[class*="style"] input[type="button"], .wrapper[class*="style"] input[type="submit"], .wrapper[class*="style"] input[type="reset"], .wrapper[class*="style"] button, .wrapper[class*="style"] .button { border-color: currentColor; color: inherit; } .wrapper[class*="style"] input[type="button"]:hover, .wrapper[class*="style"] input[type="submit"]:hover, .wrapper[class*="style"] input[type="reset"]:hover, .wrapper[class*="style"] button:hover, .wrapper[class*="style"] .button:hover { background: rgba(255, 255, 255, 0.15); } .wrapper[class*="style"] input[type="button"].stylelight, .wrapper[class*="style"] input[type="submit"].stylelight, .wrapper[class*="style"] input[type="reset"].stylelight, .wrapper[class*="style"] button.stylelight, .wrapper[class*="style"] .button.stylelight { background: transparent; border-color: var(--blanc); color: var(--blanc) !important; } .wrapper[class*="style"] input[type="button"].stylelight:hover, .wrapper[class*="style"] input[type="submit"].stylelight:hover, .wrapper[class*="style"] input[type="reset"].stylelight:hover, .wrapper[class*="style"] button.stylelight:hover, .wrapper[class*="style"] .button.stylelight:hover { background: rgba(255, 255, 255, 0.15); } /* Main */ #main {} #main > :last-child {margin-bottom: 0;} #main .sidebar section {} #main .sidebar section:first-child {} #main .sidebar section:last-child {} /* ========================================================== HEADER — 3 hauteurs (100% / 80% / 40%) ========================================================== */ #header-banner { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--c-page); background-size: cover; background-position: center; color: var(--blanc); text-align: center; } #header-banner:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,26,.55) 0%, rgba(18,22,26,.4) 45%, rgba(18,22,26,.65) 100%); } #header-banner .header-banner-inner { position: relative; z-index: 1; } /* Reveal-image : IMG/spip_fond_login.jpg est cachee en plein cadre derriere le banner ; .header-reveal est le hublot rond de 10em qui, en suivant le curseur, laisse voir la tranche de cette image qui se trouve a cet endroit (voir javascript/perso.js pour le calcul de background-position/-size - meme principe que le "spotlight hero reveal" classique). Cercle invisible (opacity 0, scale reduit) tant que la souris ne bouge pas ; apparait pendant le mouvement, se retracte et disparait 0.5s apres l'arret (classe reveal-active pilotee en JS). Position (left/top) fixee en JS a chaque mousemove, sans transition, pour un suivi instantane du curseur ; seules opacity/transform sont animees, donc toujours symetriques (pas d'ancrage sur un coin, contrairement a une transition de mask-size). */ #header-banner .header-reveal { position: absolute; top: 0; left: 0; width: 10em; height: 10em; border-radius: 50%; z-index: 1; pointer-events: none; background-repeat: no-repeat; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; } #header-banner.reveal-active .header-reveal { opacity: 1; transform: scale(1); } /* Header + fil d'ariane = 100% de la hauteur ecran, sur toutes les pages (demande utilisateur 2026-09-16 - generalise a tout le site le mecanisme introduit le 2026-09-15 pour la seule rubrique-circuits, qui remplacait alors les paliers fixes hauteur-40/80/100 ci-dessous, desormais retires partout - #ENV{header_hauteur} n'est plus lu par aucun header/*.html). La hauteur reelle du #breadcrumb (variable selon le contenu - fil d'ariane simple ou menu horizontal en plus - et le line-height herite) n'est pas une valeur simple a deviner ici en CSS : mesuree en JS au chargement/redimensionnement (body.html, juste apres le #breadcrumb) et posee dans --breadcrumb-h sur la racine du document. Le 4.5rem de repli ne sert que le tout premier instant avant l'execution de ce script. Pas de palier reduit en mobile : la demande "100% de l'ecran" s'applique a toutes les tailles, volontairement. */ #header-banner.hauteur-ecran-moins-breadcrumb { min-height: calc(100vh - var(--breadcrumb-h, 4.5rem)); } /* Séparateur décoratif (glyphe icons U+E925) entre les entrées de menu */ .icon-separator::before { font-family: 'icons'; content: "\e926"; font-style: normal; font-weight: normal; line-height: 1; } /* Marque "LT Travel" */ .brand { font-family: var(--font-titres); font-size: .85em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanc); display: inline-flex; align-items: baseline; gap: 5px; } .brand .lt { font-weight: 700; } .brand .travel { font-style: italic; font-weight: 400; opacity: .85; } /* bar1 : barre transparente en surimpression du header, avant scroll */ .bar1 { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 1.6em 2em 1em; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease; } .bar1.hidden { transform: translateY(-120%); opacity: 0; } .nav-primary { width: 100%; max-width: 1440px; } .nav-primary .menu-liste { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; } .nav-primary .menu-sep { display: flex; align-items: center; justify-content: center; width: 1em; color: rgba(255,255,255,.5); font-size: .75em; } .nav-primary .menu-items__lien { display: inline-block; color: rgba(255,255,255,.92); font-family: var(--font-titres); font-size: .85em; letter-spacing: .1em; text-transform: uppercase; padding: .4em 1em; font-weight: 500; border-bottom-color: transparent; transition: transform .2s ease; } .nav-primary .menu-entree:hover .menu-items__lien { transform: scale(1.08); border-bottom-color: transparent; } .nav-secondary-wrap { display: flex; align-items: center; gap: 6px; } .nav-secondary { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } /* le padding-bottom (compensé par une marge négative) sert de pont de survol vers le panneau de niveau 2 sans "trou mort" à la souris */ .nav-secondary .menu-entree { position: relative; padding-bottom: 18px; margin-bottom: -18px; } .nav-secondary .menu-items__lien, .nav-secondary .menu-items__texte { display: inline-block; color: rgba(255,255,255,.9); font-family: var(--font-texte); font-size: .8em; letter-spacing: 0em; padding: .5em .8em; font-weight: 500; border-bottom-color: transparent; cursor: pointer; transition: transform .2s ease; } .nav-secondary .menu-entree:hover > .menu-items__lien, .nav-secondary .menu-entree:hover > .menu-items__texte { transform: scale(1.08); border-bottom-color: transparent; } /* objet consulte (rubrique/article) : classe "on" posee par menus_exposer sur le
  • */ .menu-entree.on > .menu-items__lien {} /* Panneaux de niveau 2 : ouverture verticale progressive au survol */ .sub-panel { font-family: var(--font-texte); text-align: left; position: absolute; top: 100%; right: 0; background: var(--blanc); box-shadow: var(--shadow-card-hover); padding: 1.4em 1.6em; z-index: 80; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top; transition: opacity .3s ease, transform .3s ease, visibility .3s; pointer-events: none; } /* Ouverture inversee tant que #breadcrumb n'est pas fixe (demande utilisateur 2026-09-16) : au chargement, #breadcrumb est colle au bas du header 100vh (cf. hauteur-ecran-moins-breadcrumb plus haut) - trop peu de place en dessous pour un panneau qui s'ouvre vers le bas, donc ouverture vers le haut par defaut ici. Des que #breadcrumb devient .is-fixed (colle en haut du viewport au scroll - classe posee par le script de breadcrumb/sommaire.html et breadcrumb/rubrique-circuits.html, seules pages a avoir ce mecanisme aujourd'hui), la place est de nouveau en dessous : on retombe sur .sub-panel ci-dessus, ouverture vers le bas inchangee. */ #breadcrumb:not(.is-fixed) .sub-panel { top: auto; bottom: 100%; transform-origin: bottom; } .nav-secondary .menu-entree:hover .sub-panel { opacity: 1; visibility: visible; transform: scaleY(1); pointer-events: auto; } .mega-panel { display: flex; gap: 2.5em; } .mega-panel .mega-col { width: 220px; max-height: 60vh; overflow-y: auto; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; } .nav-secondary .menu-entree:hover .mega-panel .mega-col { opacity: 1; transform: translateY(0); } .mega-panel .mega-col:nth-child(1) { transition-delay: .08s; } .mega-panel .mega-col:nth-child(2) { transition-delay: .18s; } .mega-panel .mega-col-titre { display: flex; align-items: center; gap: 10px; font-family: var(--font-texte); font-size: 1.1em; font-weight: 500; letter-spacing: .04em; color: var(--brique); margin-bottom: .6em; } .mega-panel .mega-col-titre a { color: inherit; } .mega-panel .menu-liste { list-style: none; margin: 0; padding: 0; } .mega-panel .menu-items__lien { display: block; color: var(--ink); font-size: .85em; padding: .25em 0em; transition: background .15s ease, color .15s ease; } .mega-panel ul li { padding-left: 0; } .mega-panel li a.menu-items__lien { padding-left: 0; } .mega-panel .menu-items__lien .icon-separator, .mega-panel .menu-items__lien .tiret { margin-right: .4em; font-size: .75em; opacity: .5; } .mega-panel .menu-entree:hover > .menu-items__lien { padding-left: 0.8em; background: var(--brique); color: var(--blanc); } .mega-panel .menu-liste .menu-liste { padding-left: .6em; } .mega-panel .menu-liste .menu-liste .menu-items__lien { font-size: .8em; color: #6b747c; padding: .05em .5em; } .mega-panel .menu-liste .menu-liste .menu-entree:hover > .menu-items__lien { color: var(--blanc); } .circuit-dropdown { display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: .5em; } .circuit-dropdown .menu-items__lien { display: block; color: var(--ink); font-size: .85em; padding: .4em .9em; transition: background .15s ease, color .15s ease; } .circuit-dropdown .menu-items__lien:hover { background: var(--bleu); color: var(--blanc); } .circuit-dropdown .icon-separator { margin-right: .4em; font-size: .75em; opacity: .5; } .circuit-dropdown .menu-items__lien:hover .icon-separator { opacity: .9; } /* Sous-menu "Plus d'infos" : meme mecanique que .circuit-dropdown ci-dessus, couleur jaune-or (--jaune) demandee par l'utilisateur. Texte fonce (#111) au survol plutot que blanc : --jaune est trop clair pour un texte blanc lisible (meme constat deja fait sur .wrapper.stylejaune plus haut dans ce fichier, seul autre endroit du site associant --jaune a du texte). */ .info-dropdown { padding: .5em; /* min-width 200px (comme .circuit-dropdown) trop etroit pour des titres d'articles (plus longs que les 4 mots-cles region de Circuits) - largeur qui suit le contenu, plafonnee pour rester un "encart" de menu, pas une pleine colonne (demande utilisateur 2026-09-16, sous-rubriques/titres passant a la ligne). */ min-width: 200px; width: max-content; max-width: 340px; } /* items rendus en li.menu-entree (balisage natif du plugin Menus, repris comme dans .mega-panel .menu-liste plus haut) au lieu de liens nus : reset de liste + mise en colonne portes par .menu-liste plutot que directement sur .info-dropdown. */ .info-dropdown .menu-liste { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .info-dropdown .menu-entree { padding-left: 0; } .info-dropdown .menu-items__lien { display: block; color: var(--ink); font-size: .85em; padding: .4em .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease, color .15s ease; } .info-dropdown .menu-items__lien:hover { background: var(--jaune); color: #111; } /* Puce/separateur avant le titre : le balisage natif du plugin Menus (menus/objet.html) ne pose pas de span dedie pour ca (contrairement aux boucles maison .circuit-dropdown/.mega-panel) - meme glyphe "icons" (U+E926) que .icon-separator ci-dessus, pose directement en ::before du lien plutot qu'en surchargeant le squelette du plugin. */ .info-dropdown .menu-items__lien::before { font-family: 'icons'; content: "\e926"; font-style: normal; font-weight: normal; line-height: 1; margin-right: .4em; font-size: .75em; opacity: .5; } .info-dropdown .menu-items__lien:hover::before { opacity: .9; } /* La derniere entree du sous-menu (lien retitre "Encore + d'infos"/ "More more info" vers la rubrique elle-meme, configure directement dans le plugin Menus) se distingue deja visuellement par son texte - plus de classe -_voirtout- dediee depuis le passage au balisage natif #MENUS_AFFICHER_ENTREE (elle etait posee par l'ancien lien "Tous les articles" genere a la main, retire). */ .lang { font-size: .75em; letter-spacing: .05em; } .lang.fr { color: rgba(255,255,255,.85); } .lang.en { color: rgba(255,255,255,.55); } /* .breadcrumb-lang (gauche du fil d'ariane, cf. body.html) : liens de langue #menu_lang (natifs du plugin mll) remplaces visuellement par des drapeaux — texte masque, image de fond posee sur les classes langue_fr/langue_en deja generees par mll, sans toucher au balisage du plugin. Footer non concerne (bloc CSS separe, #footer .footer-bottom- links #menu_lang). */ .breadcrumb-lang #menu_lang { display: flex; align-items: center; gap: 8px; } .breadcrumb-lang #menu_lang a, .breadcrumb-lang #menu_lang strong { display: inline-block; width: 22px; height: 14px; overflow: hidden; text-indent: -999px; white-space: nowrap; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 2px; opacity: .8; transition: opacity .2s ease, transform .2s ease; } .breadcrumb-lang #menu_lang a:hover { opacity: 1; transform: scale(1.1); } /* Contour blanc plein (demande utilisateur 2026-09-15), sur les 2 etats (lien inactif et langue courante). */ .breadcrumb-lang #menu_lang a, .breadcrumb-lang #menu_lang strong { border: 1px solid #fff; } .breadcrumb-lang #menu_lang .langue_fr { background-image: url("../images/flag-fr-small.png"); } .breadcrumb-lang #menu_lang .langue_en { background-image: url("../images/flag-en-small.png"); } @media screen and (max-width: 840px) { .nav-primary, .nav-secondary { display: none; } } /* Encart titre centré + 2 infos, au milieu du header */ .header-titrebox { padding: 2em; } /* Kicker : titre de la rubrique parente, au-dessus du titre de page - propre a header/dist.html (rubrique/article), meme esprit que le kicker du hero sommaire (header/sommaire.html, scope html.page_sommaire .header-kicker) mais scope ici sur les 2 classes de page que dist.html sert reellement - header/generale.html et header/recherche.html partagent .header-titrebox/.header-titre sans kicker, ne doivent pas heriter de cet agrandissement. */ html.page_article .header-titrebox .header-kicker, html.page_rubrique .header-titrebox .header-kicker { display: flex; align-items: center; justify-content: center; gap: .8em; margin: 0 0 .6em; font-family: var(--font-texte); font-size: .8em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82); text-shadow: 0 1px 6px rgba(0,0,0,.3); } html.page_article .header-titrebox .header-kicker-line, html.page_rubrique .header-titrebox .header-kicker-line { width: 2em; height: 1px; background: rgba(255,255,255,.4); } html.page_article .header-titrebox .header-titre, html.page_rubrique .header-titrebox .header-titre { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.15em; } .header-titrebox h1, .header-titrebox .header-titre { margin-bottom: 0.35em; text-shadow: 0 2px 12px rgba(0,0,0,.35); } .header-titrebox .header-infos { display: flex; justify-content: center; gap: 1.5em; font-family: var(--font-titres); font-size: 0.9em; letter-spacing: 0.05em; opacity: .92; } /* Header rubrique-circuits : accroche sous le titre + icones thematiques (demande utilisateur 2026-09-16, header/rubrique-circuits.html). Accroche reprise du style .header-tagline du hero sommaire plus bas dans ce fichier (italique, police titres) plutot que du texte courant. Memes classes .themes/.icon-theme/.tooltip-theme que .tour-card (inclure/carte-circuit-simple.html) et .circuit-info-bloc (inclure/article-circuit-sidebar.html), redeclarees ici scopees a .header-themes ; boucle du squelette sans lien a un contenu precis, donc toujours les 6 thematiques avec toutes leurs sous-thematiques au survol. Taille corrigee 2 fois le 2026-09-16 : d'abord ramenee a 44px (retour "trop grand"), puis reagrandie a 56px/rounded-square (retour "maintenant trop petit") - la bulle d'info-bulle reste en taille fixe (rem, pas em) dans les 2 cas, donc son texte ne bouge plus quelle que soit la taille de la pastille. Bulle ouverte sous la pastille (`top`), pas au-dessus comme .tour-card/.circuit-info-bloc : demande utilisateur du 2026-09-16, propre a ce contexte header. */ .header-titrebox .header-baseline { font-family: var(--font-titres); font-style: italic; font-weight: 400; font-size: 1.05em; letter-spacing: normal; margin: 0 0 1.5em; opacity: .88; text-shadow: 0 1px 6px rgba(0,0,0,.3); } .header-titrebox .header-themes { display: flex; justify-content: center; flex-wrap: wrap; gap: 1em; margin-bottom: .3em; } /* Header rubrique-informations : titres des articles affiches en mots-cles/tags sous le titre (demande utilisateur 2026-09-16, header/rubrique-informations.html). Reprend .tag-list/.tag-pill de content/recherche.html (mots-cles suggeres), surcharge ici en clair sur fond sombre - meme logique de scoping que .header-themes juste au-dessus. */ .header-titrebox .header-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: .6em; margin: var(--space-xl) 0 .3em; } @media screen and (min-width: 981px) { .header-titrebox .header-tags { max-width: 840px; margin-left: auto; margin-right: auto; } } .header-titrebox .header-tags .tag-pill { background: var(--blanc); border-color: var(--blanc); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.2); } .header-titrebox .header-tags .tag-pill:hover, .header-titrebox .header-tags .tag-pill:focus { border-color: var(--c-page); color: var(--c-page); } .header-titrebox .header-themes .icon-theme { position: relative; width: 56px; height: 56px; border-radius: .4em; display: inline-flex; align-items: center; justify-content: center; font-family: 'icons'; font-size: 2em; color: var(--blanc); box-shadow: 0 2px 8px rgba(0,0,0,.25); /* background-color pose en inline par le squelette (couleur thematique) */ transition: transform .2s ease, box-shadow .2s ease; } .header-titrebox .header-themes .icon-theme:hover, .header-titrebox .header-themes .icon-theme:focus { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); } .header-titrebox .header-themes .tooltip-theme { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 170px; max-width: 220px; padding: .7em .9em; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); background: inherit; color: var(--blanc); font-family: var(--font-texte); font-size: .8rem; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; } .header-titrebox .header-themes .icon-theme:hover .tooltip-theme, .header-titrebox .header-themes .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; } .header-titrebox .header-themes .tooltip-titre { display: block; font-family: var(--font-titres); font-size: .85em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5em; } .header-titrebox .header-themes .tooltip-theme ul { list-style: none; margin: 0; padding: 0 0 6px 0; } .header-titrebox .header-themes .tooltip-theme li { position: relative; padding-left: .9em; font-size: .85em; line-height: 1.5em; } .header-titrebox .header-themes .tooltip-theme li::before { content: "–"; position: absolute; left: 0; } /* Champ de recherche du header/recherche.html (fichier independant de header/generale.html, propre a la page recherche) : centre dans le header-titrebox, sous les 2 barres de menu. Pas de label (placeholder seul = recherche en cours). Pilule blanche a bordure fine (--line), input transparent, bouton loupe accole a droite separe par un filet vertical - un seul bloc pilule, pas deux elements disjoints. */ .header-recherche { display: flex; align-items: stretch; justify-content: center; min-width: 360px; width: 600px; max-width: 80vw; margin: 1.2em auto 0; background: var(--blanc); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .header-recherche-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; color: var(--ink); padding: .75em 1.3em; font-size: .95em; font-family: inherit; } .header-recherche-input::placeholder { color: var(--gris); opacity: .75; } .header-recherche-submit { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3em; min-width: 0; padding: 0; line-height: normal; border: none; border-left: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s ease; } .header-recherche-submit:hover { background: var(--gris-bg); } @media screen and (max-width: 736px) { .header-recherche { width: 360px; } html.page_article .header-titrebox .header-kicker, html.page_rubrique .header-titrebox .header-kicker { font-size: .7em; letter-spacing: .16em; } html.page_article .header-titrebox .header-kicker-line, html.page_rubrique .header-titrebox .header-kicker-line { width: 1.4em; } .header-titrebox .header-themes { gap: .7em; } .header-titrebox .header-themes .icon-theme { width: 46px; height: 46px; font-size: 1.6em; } } /* ========================================================== CONTENT — H1 et wrapper principal ========================================================== */ #content { padding: 4em 0; } #content h1 { color: var(--titre); } /* Sommaire (v1.2.0) : chaque section gere deja son propre padding via .couleur, le padding-bottom generique de #content s'ajoutait a celui du bloc #cta (.wrapper.cta, 5em) et creait un espace trop grand entre la derniere section (temoignages) et le CTA. */ html.page_sommaire #content { padding-bottom: 0; } /* ========================================================== SIDEBARS ========================================================== */ /* Espacement entre sidebar et content-main : .row (grid.css) n'a aucun gutter par defaut (seul .gtr-0 existe, deja a 0) - meme valeur que .layout-sidebar-slim pour rester coherent sur tout le site. Corrige au passage un manque deja present sur article-circuits (sidebar et content-main colles, jamais remarque car les cadres blancs de la sidebar suffisaient a la distinguer visuellement). */ .layout-sidebar-normal-1, .layout-sidebar-normal-2 { gap: 2em; } /* col-3/col-9 (grid.css) totalisent deja 100% du conteneur : au moindre gap ajoute la somme depasse 100%, et .row (flex-wrap:wrap) fait passer content-main a la ligne suivante des le calcul des lignes - avant meme que flex-shrink n'ait sa chance de compenser. Constate en live (screenshot + getBoundingClientRect), pas suppose. Meme parade que .layout-sidebar-slim plus haut : sidebar en largeur fixe, content-main en flex-basis 0 qui absorbe tout le reste (conteneur moins sidebar moins gap). Scopee au-dessus du seuil mobile 736px pour laisser intact l'empilement par .col-12-mobile{width:100%}. */ @media screen and (min-width: 737px) { .layout-sidebar-normal-1 .sidebar, .layout-sidebar-normal-2 .sidebar { flex: 0 0 320px; } .layout-sidebar-normal-1 .content-main, .layout-sidebar-normal-2 .content-main { flex: 1 1 0; min-width: 0; } } /* normal-1 : tablette -> sidebar en début de contenu normal-2 : tablette -> sidebar en fin de contenu */ .layout-sidebar-normal-1 .sidebar { order: -1; } .layout-sidebar-normal-2 .sidebar { order: 1; } @media screen and (max-width: 980px) { .layout-sidebar-normal-1 .sidebar, .layout-sidebar-normal-2 .sidebar { order: 0; } .layout-sidebar-normal-1 .sidebar { order: -1; } .layout-sidebar-normal-2 .sidebar { order: 1; } } /* Article circuit : sidebar (prix/durée/difficulté + bouton) fixe au scrolling pendant que le texte défile. align-self:flex-start requis car .row est display:flex/align-items:stretch — sans lui l'aside est étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px laissait passer la bar2 (barre de menu fixe compacte, ~90px) - bar2 supprimee le 2026-09-16, valeur conservee telle quelle (non revisitee, pas d'acces navigateur pour la remesurer, cf. [[feedback-no-network-calls]]). */ #article-circuits .sidebar { position: sticky; top: 96px; align-self: flex-start; } @media screen and (max-width: 980px) { /* pas de sticky en mobile : la sidebar est empilée au-dessus du texte, pas à côté — rien à fixer pendant le scroll */ #article-circuits .sidebar { position: static; } } /* slim : largeur fixe 200px sur grand écran, 2 blocs empilés */ .layout-sidebar-slim { display: flex; flex-wrap: wrap; gap: 2em; } .layout-sidebar-slim .sidebar-slim { flex: 0 0 240px; display: flex; flex-direction: column; gap: 1.5em; } .layout-sidebar-slim .content-main { flex: 1 1 0; min-width: 0; } @media screen and (max-width: 980px) { .layout-sidebar-slim { flex-direction: column; flex-wrap: nowrap; } .layout-sidebar-slim .sidebar-slim { flex-basis: auto; width: 100%; } /* mobile : filtre au-dessus des résultats */ .layout-sidebar-slim .sidebar-slim { order: -1; } .layout-sidebar-slim .content-main { order: 0; } } /* "fixing option on scrolling" (demande rubrique-circuits) : les 2 blocs de la sidebar (filtre + mini-calendrier) restent visibles ensemble pendant que la colonne de résultats défile. Scopé à #rubrique-circuits seul — le sommaire réutilise .sidebar-slim pour son propre bloc circuits mais n'a pas demandé ce comportement, et sa colonne de résultats (slideshow Slick, hauteur fixe) n'a de toute façon rien à dépasser pour qu'un sticky serve à quelque chose. align-self:flex-start est nécessaire car le parent est display:flex — sans lui l'aside est étiré à la hauteur du flex-container et ne peut pas "sticker". top:96px laissait passer la bar2 (barre de menu fixe compacte, ~90px) - bar2 supprimee le 2026-09-16, valeur conservee telle quelle (non revisitee, pas d'acces navigateur pour la remesurer, cf. [[feedback-no-network-calls]]). */ #rubrique-circuits .sidebar-slim { position: sticky; top: 96px; align-self: flex-start; } @media screen and (max-width: 980px) { /* pas de sticky en mobile : le filtre est empilé au-dessus des résultats, pas à côté — rien à fixer pendant le scroll */ #rubrique-circuits .sidebar-slim { position: static; } } /* Rubrique circuits : 2 blocs de la sidebar-slim (filtre + mini-calendrier), et grille de résultats en dur (pas de slideshow ici, contrairement au bloc circuits du sommaire). Scopé à #rubrique-circuits : le sommaire réutilise déjà .sidebar-slim-bloc-2 pour son propre formulaire (déjà stylé via .formulaire-filtre-statique) et ne doit pas hériter d'un 2e cadre blanc autour. */ #rubrique-circuits .sidebar-slim-bloc-1, #rubrique-circuits .sidebar-slim-bloc-2 { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } #rubrique-circuits .sidebar-slim-bloc-1 .formulaire-filtre-statique { border: 0; border-radius: 0; } #rubrique-circuits .sidebar-slim-bloc-2 .calendrier-mini-wrap { padding: 1.2em 1.4em; } .tour-grid { display: grid; gap: 2em; } .tour-grid.cols3 { grid-template-columns: repeat(3, 1fr); } @media screen and (max-width: 1280px) { .tour-grid.cols3 { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 640px) { .tour-grid.cols3 { grid-template-columns: 1fr; } } .tours-results .aucun-resultat { background: var(--gris-bg); padding: 2em; text-align: center; color: var(--gris); } .pagination { display: flex; justify-content: center; gap: .6em; margin-top: 2.5em; } .pagination a, .pagination strong { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; height: 2.4em; padding: 0 .5em; border: 1px solid var(--line); border-radius: 50%; font-size: .85em; font-weight: 700; } .pagination a:hover { border-color: var(--c-page); color: var(--c-page); } .pagination strong { /* pas de var(--c-page) ici : sur cette install, --c-generale/--c-circuit/ --c-info/--c-mice sont ecrases a vide par le CSS genere par configurer_template_travel (css/travel-template.css, "Gestion des couleurs"), ce qui invalide --c-page site-wide (fond transparent, page courante illisible en blanc sur blanc) - a corriger cote generateur separement. */ background: #000; border-color: #000; color: var(--blanc); } /* ========================================================== ARTICLE CIRCUIT — intro, sidebar prix/durée/difficulté, contact ========================================================== */ /* Ancre douce du bouton "Demande d'infos" (sidebar) vers #contact-circuit. scroll-margin-top laissait passer la bar2 (barre de menu fixe compacte, supprimee le 2026-09-16, valeur conservee telle quelle), même valeur que le top du sticky de #rubrique-circuits. */ html { scroll-behavior: smooth; } #contact-circuit { scroll-margin-top: 96px; } .circuit-infos { display: flex; flex-direction: column; gap: 1.2em; } .circuit-info-bloc { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1em 1.2em; } .circuit-info-label { font-family: var(--font-titres); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: .4em; } .circuit-info-valeur { font-size: 1.15em; font-weight: 700; } .circuit-info-valeur .unit { font-size: .7em; font-weight: 500; opacity: .6; } .circuit-difficulte { list-style: none; padding: 0; margin: 0; } .circuit-difficulte li { padding: 0; margin-bottom: .3em; font-weight: 700; } .circuit-difficulte li:last-child { margin-bottom: 0; } .circuit-info-cta .button { display: block; text-align: center; } /* Icones thematiques (sidebar) : memes classes .themes/.icon-theme/ .tooltip-theme qu'inclure/carte-circuit-simple.html (.tour-card), redeclarees ici car scopees a .tour-card la-bas. La bulle est ancree a gauche sur les 2 premieres pastilles (colonne la plus a gauche de la page, une bulle centree deborderait du conteneur). */ .circuit-info-bloc .themes { display: flex; flex-wrap: wrap; gap: .6em; } .circuit-info-bloc .icon-theme { position: relative; width: 38px; height: 38px; border-radius: 0.3em; display: inline-flex; align-items: center; justify-content: center; font-family: 'icons'; font-size: .8em; color: var(--blanc); /* background-color pose en inline par le squelette (couleur thematique) */ transition: transform .2s ease; } .circuit-info-bloc .icon-theme:hover { transform: translateY(-2px) scale(1.08); } .circuit-info-bloc .tooltip-theme { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 190px; max-width: 260px; padding: .8em 1em; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); background: inherit; color: var(--blanc); font-family: var(--font-texte); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; } .circuit-info-bloc .icon-theme:hover .tooltip-theme, .circuit-info-bloc .icon-theme:focus .tooltip-theme { opacity: 1; visibility: visible; } .circuit-info-bloc .icon-theme:nth-child(1) .tooltip-theme, .circuit-info-bloc .icon-theme:nth-child(2) .tooltip-theme { left: 0; transform: none; } .circuit-info-bloc .tooltip-titre { display: block; font-family: var(--font-titres); font-size: .8em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5em; } .circuit-info-bloc .tooltip-theme ul { list-style: none; margin: 0; padding: 0 0 10px 0; } .circuit-info-bloc .tooltip-theme li { position: relative; padding-left: .9em; font-size: .7em; line-height: 1.5em; } .circuit-info-bloc .tooltip-theme li::before { content: "–"; position: absolute; left: 0; } /* Bloc contact article circuit : formulaire Formidable "contact_circuit", 2 fieldsets (nom "fieldset_1" / "fieldset_2" cote back-office) a 50% l'un a cote de l'autre. Le squelette saisies/fieldset.html du plugin saisies prefixe systematiquement la classe par "fieldset_" + le nom de la saisie (#ENV{nom}|saisie_nom2classe), d'ou la classe reelle "fieldset_fieldset_1" / "fieldset_fieldset_2" (verifie dans plugins/auto/saisies/v6.3.6/saisies/fieldset.html) - ne pas confondre avec la classe generique "fieldset" presente sur tous les fieldsets. Bouton #ENV{...} rendu par la saisies plugin dans

    en frere de .editer-groupe (voir formulaires/inc-saisies-cvt.html du plugin saisies) donc deja sous les 2 colonnes sans reglage supplementaire. Fond legerement teinte (var(--gris-bg), meme mecanique que #recherche-page .aucun-resultat) pour distinguer le bloc du texte de l'article au-dessus. La mise en 2 colonnes ne doit cibler QUE le .editer-groupe racine (direct enfant du

    de inc-saisies-cvt.html, lui-meme enfant du
    ) : chaque fieldset genere aussi son propre .editer-groupe imbrique pour ses champs (meme squelette fieldset.html, ligne 30). Si la regle flex visait tous les .editer-groupe sans distinction, les champs courts de "About your journey" (dates, nb personnes, cases a cocher) se retrouvaient eux aussi cote a cote au lieu de s'empiler - d'ou le selecteur "form > div > .editer-groupe" qui ne matche que le niveau racine (les groupes imbriques sont enfants d'un
    , pas du
    direct du ), laissant les champs internes en empilement vertical par defaut (comportement natif du plugin saisies, aucune regle supplementaire necessaire pour l'empilement). */ .circuit-contact-form { background: var(--gris-bg); padding: 2em; border-radius: var(--radius-md); } .circuit-contact-form h3 { margin-bottom: 1em; } .circuit-contact-form form > div > .editer-groupe { display: flex; flex-wrap: wrap; gap: 2em; } .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_1, .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_2 { flex: 1 1 calc(50% - 1em); min-width: 0; } /* Formulaire sans fieldset (Formidable #3, "demande d'infos"/"votre message" de content/rubrique-informations.html) : les .editer de chaque champ sont alors enfants DIRECTS de ce meme .editer-groupe racine (pas de
    intermediaire) - sans cette regle ils heritaient du display:flex ci-dessus sans flex-basis dedie (seuls les .fieldset_fieldset_1/_2 en ont un), et se retrouvaient cote a cote au lieu de s'empiler. Bug releve par l'utilisateur le 2026-09-16 sur le formulaire repete de cette page (seul appelant de -circuit-contact-form- avec un Formidable sans fieldset a ce jour). */ .circuit-contact-form form > div > .editer-groupe > .editer { flex: 1 1 100%; } @media screen and (max-width: 736px) { .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_1, .circuit-contact-form form > div > .editer-groupe > fieldset.fieldset_fieldset_2 { flex-basis: 100%; } } /* Legendes de fieldset (saisies/fieldset.html) : "About you"/"About your journey" en tete de colonne + "Langue"/"Main interests" (sous-groupes pliables) plus discrets. Toujours un nu (jamais de classe "editer-label" a ce niveau - voir fieldset.html ligne 24), donc jamais touche par le masquage de labels ci-dessous. */ .circuit-contact-form legend { display: block; font-family: var(--font-titres); font-weight: 700; margin-bottom: 1em; } .circuit-contact-form fieldset fieldset legend { font-size: .8em; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: .8em; } /* Espacement vertical entre chaque champ (chaque champ = un .editer genere par saisies/_base.html), sur les 2 colonnes. */ .circuit-contact-form .editer { margin-bottom: var(--space-sm); } .circuit-contact-form .editer:last-child { margin-bottom: 0; } /* Labels des champs masques visuellement (seuls les placeholders restent visibles) - meme technique offscreen que #cta-contact .contact-block-form .editer-label plus haut dans ce fichier. Limite au tag