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); } /* 8e teinte, distincte des 7 couleurs thematiques fixes ci-dessus : reprend directement la couleur admin-configurable "Informations" (--c-mice) au lieu d'une valeur figee, pour les sections qui suivent cette categorie plutot qu'une simple variete decorative. Pas de variante _hover dediee (couleur admin) : assombrie via color-mix. */ .couleur[data-couleur="informations"] { --c-section:var(--c-mice); --c-section-hover:color-mix(in srgb, var(--c-mice) 80%, black); } /* Meme principe pour "destinations" (--c-info) et "circuits-alt" (--c-circuit, utilisee sur les sections en fond plein cadre/texte blanc plutot que le token fixe --bleu), pour suivre la vraie couleur configuree. */ .couleur[data-couleur="destinations"] { --c-section:var(--c-info); --c-section-hover:color-mix(in srgb, var(--c-info) 80%, black); } .couleur[data-couleur="circuits-alt"] { --c-section:var(--c-circuit); --c-section-hover:color-mix(in srgb, var(--c-circuit) 80%, black); } /* overflow-x:hidden sur html ET body : sur mobile, l'element qui defile reellement est , pas seul - sans hidden sur les 2, un navigateur mobile peut elargir le layout viewport a la largeur du contenu qui deborde (marges negatives des slick-list) au lieu de le clipper, decalant tout element ancre au bord droit (ex. le bouton de nav fixe). Les 2 regles doivent rester ensemble. */ html{ overflow-x: hidden; } body{ font-family:var(--font-texte); color:var(--ink); background:#f9f7f6; -webkit-font-smoothing:antialiased; /* 16px aligne 1em (cascade body) sur 1rem (racine html) — reference utilisee par plusieurs titres en clamp()/rem (header-titre, header-emblem). */ font-size: 16px; font-weight: 500; letter-spacing: 0.025em; line-height: 1.75em; overflow-x: hidden; } 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;} /* Hierarchie h1-h6 : h1 = titre de page (1 par page), h2 = titres de section/carte, h3 = intertitres a l'interieur du texte d'un article uniquement, h4-h6 libres (cartes, blocs). Les classes .h1/.h2/.h3 appliquent le meme gabarit visuel a n'importe quelle balise, pour decoupler le rendu de la balise semantique reellement posee. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--font-titres); color: var(--titre); font-weight: 800; line-height: 1.3em; margin-bottom: 0.8em; letter-spacing: 0.02em; } h1, .h1 { font-size: 2.5em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a { color: inherit; text-decoration: none; border: 0; } h2, .h2 { font-size: 1.5em; letter-spacing: 0em; line-height: 1.1em; } h3, .h3 { font-size: 1.15em; letter-spacing: 0.025em; } /* h4-h6 : titres dans les blocs (cartes, etc.), un seul gabarit */ h4 { font-size: .95em; } @media screen and (max-width: 980px) { h1, .h1 { font-size: 2.1em; } h2, .h2 { font-size: 1.35em; } } @media screen and (max-width: 736px) { h1, .h1 { font-size: 1.7em; } h2, .h2 { font-size: 1.2em; } h3, .h3 { font-size: 1.05em; } } 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 communs a #breadcrumb sur toutes les pages. .is-fixed (scroll sticky) pilote par le script commun de breadcrumb/dist.html. */ #breadcrumb { position: relative; z-index: 70; padding: .7em 0; border-bottom: 0; background: rgba(var(--ink-rgb), .94); color: rgba(255, 255, 255, .85); } #breadcrumb.is-fixed { position: fixed; top: 0; left: 0; right: 0; } #breadcrumb .container { display: flex; align-items: center; /* flex-start (et non space-between) : c'est la marge auto posee sur ul.breadcrumb-items plus bas qui pousse le menu horizontal 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; } /* Menu horizontal a droite du fil d'ariane, boutons A-/A+ a gauche, drapeaux de langue a l'extreme droite : #breadcrumb .container est deja en flex, un `order` sur chaque enfant suffit. `.boutonstexte` recoit son `order:-1` plus bas. En dessous de 840px, `.breadcrumb-lang` est masque (regle plus bas) : les drapeaux restent accessibles via l'entree "Langue" du panneau mobile (inclure/menu-principal-desktop.html) et le footer. */ #breadcrumb .nav-secondary-wrap { order: 1; flex-shrink: 0; } .breadcrumb-lang { order: 2; flex-shrink: 0; } /* Meme balisage/plugin mll que les drapeaux du panneau mobile (#nav-secondary-menu .menu-entree-lang #menu_lang, plus bas dans ce fichier) : liens #menu_lang natifs remplaces par des drapeaux (texte masque, image de fond sur les classes langue_fr/langue_en generees par mll). Duplique plutot que factorise : les 2 contextes vivent dans des regles CSS eloignees (l'une hors media query, l'autre a l'interieur d'un @media max-width:840px) et ne sont jamais visibles simultanement. */ .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; border: 1px solid #fff; opacity: .8; transition: opacity .2s ease, transform .2s ease; } .breadcrumb-lang #menu_lang a:hover { opacity: 1; transform: scale(1.1); } .breadcrumb-lang #menu_lang strong { opacity: 1; } .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"); } 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; } /* Rubriques ancetres en blanc vif, contenu courant (dernier maillon, span non cliquable) 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; } /* Icone Home : garde son propre comportement (grise au repos, blanc vif au survol), non concernee par l'inversion de contraste ci-dessus. */ ul.breadcrumb-items a.icon-home { opacity: .75; } ul.breadcrumb-items a.icon-home:hover { opacity: 1; } /* Mobile : l'icone Home disparait, deplacee dans le panneau mobile (entree "Home" de inclure/menu-principal-desktop.html). */ @media screen and (max-width: 840px) { ul.breadcrumb-items li.breadcrumb-home { display: none; } } /* Idem pour les drapeaux : deja presents dans le panneau mobile (entree "Langue") et le footer, .breadcrumb-lang serait sinon un 3e acces redondant sur cette largeur. */ @media screen and (max-width: 840px) { .breadcrumb-lang { display: none; } } /* Sommaire (seule page sans id_rubrique/id_article) : en mobile, #breadcrumb ne contient plus que des enfants sans contenu visible (icone Home masquee, .nav-secondary-wrap en position:fixed hors flux) - padding/fond annules plutot que display:none sur #breadcrumb, qui rendrait injoignables le bouton hamburger et son panneau (descendants position:fixed d'un ancetre display:none ne sont jamais rendus). */ @media screen and (max-width: 840px) { #breadcrumb.type-page-sommaire { padding: 0; background: transparent; } } /* Menu horizontal du fil d'ariane, style "onglets" : Circuits et Explorer ont chacun un contour de couleur (circuit/info), fond transparent par defaut, rempli seulement quand le contenu courant fait partie de la rubrique concernee. Les autres entrees restent sans contour. Selecteurs de position (nth-child) plutot que des classes du plugin Menus, pour ne pas dependre des libelles/rangs configures en back-office (suppose seulement qu'Accueil ne fait plus partie de ce menu). Home occupe nth-child(1) (masquee ici, visible en mobile) : Circuits/ Explorer/"Plus d'infos" visent donc nth-child(2)/(3)/(4). Enfant DIRECT (>) de .nav-secondary, pas simple descendant : les panneaux deroulants (.circuit-dropdown, .mega-panel) contiennent eux-memes des .menu-entree imbriques qui seraient sinon aussi cibles. */ #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-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(2).on > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(2).on > .menu-items__texte { background: var(--c-circuit); } #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(--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(3) > .menu-items__lien, #breadcrumb .nav-secondary-wrap.explorer-actif > .nav-secondary > .menu-entree:nth-child(3) > .menu-items__texte { background: var(--c-info); } /* "Plus d'infos" (nth-child(4)) : entree "objet" comme Circuits, classe .on posee nativement par menus_exposer. Couleur --c-mice assez sombre par defaut pour garder le texte clair sur l'etat rempli, sans surcharge necessaire - a revoir si l'utilisateur choisit une teinte plus claire. */ #breadcrumb .nav-secondary > .menu-entree:nth-child(4) > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(4) > .menu-items__texte { background: transparent; border: 1px solid var(--c-mice); border-radius: 4px; } #breadcrumb .nav-secondary > .menu-entree:nth-child(4).on > .menu-items__lien, #breadcrumb .nav-secondary > .menu-entree:nth-child(4).on > .menu-items__texte { background: var(--c-mice); } /* Entrees "Home" (1ere position) et "Langue" (derniere position), ajoutees en dur dans inclure/menu-principal-desktop.html : masquees sur la barre desktop, reaffichees dans le panneau mobile plus bas. "Langue" masquee ici (barre de menu) car les drapeaux desktop vivent dans .breadcrumb-lang, propre a #breadcrumb .container (cf. body.html et regle plus haut) - pas dans cette entree, reservee au panneau mobile. */ #breadcrumb .nav-secondary > .menu-entree-home { display: none; } #breadcrumb .nav-secondary > .menu-entree-lang { display: none; } /* Le plugin Responsive Nav est mobile-first et pose, sans media query, display:block sur son conteneur cible (.nav-collapse) et sur chaque

descendant - au-dessus du palier nav il ne restaure que `position`, jamais l'affichage, ecrasant le display:flex de .nav-secondary. Reintroduit ici, specifique au desktop. */ @media screen and (min-width: 841px) { #breadcrumb .nav-collapse { display: flex; } #breadcrumb .nav-collapse > .menu-entree { width: auto; } } /* Meme conteneur .nav-collapse : le plugin pose aussi overflow:hidden sans media query (necessaire a l'animation d'accordeon mobile), jamais restaure au palier desktop - un panneau de niveau 2 en position:absolute reste un enfant DOM de cette liste, donc rogne quand meme par overflow:hidden sur l'ancetre. Restaure ici au-dessus du palier. */ @media screen and (min-width: 841px) { #breadcrumb .nav-collapse { overflow: visible; } } /* plugin boutonstexte : injecté par JS dans #breadcrumb .container. float:none impératif : le CSS natif du plugin pose .boutonstexte {float:right} — sans ce reset, si le JS ne trouve pas ce conteneur (repli sur prependTo('body')), les boutons A-/A+ flottent en haut a droite du viewport au lieu de rester dans le fil d'ariane. */ .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; } /* Boutons A-/A+ masques en mobile, meme seuil que le passage au hamburger (.nav-primary/.nav-secondary). */ @media screen and (max-width: 840px) { .boutonstexte { display: none; } } /* 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; } /* Mobile : le padding desktop (5em) s'ajoute a celui de .container (0 1.5em) et ecrase le contenu utile - lateral ramene a 0 (.container inset desormais), haut/bas reduit mais pas supprime. */ @media screen and (max-width: 736px) { .wrapper.cta { padding: var(--space-lg) 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; } /* Rubrique circuits / article circuit : fond du #header-banner en couleur Circuits, explicitee ici pour ne pas dependre de la chaine generique --c-page. L'overlay assombrissant reste inchange. */ html.composition_circuits #header-banner { background-color: var(--c-circuit); } /* 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); } /* Reveal-image desactivee sur mobile : effet pense pour un curseur de souris, sans equivalent tactile. display:none (pas opacity:0) pour eviter de charger IMG/spip_fond_login.jpg sur mobile. */ @media screen and (max-width: 840px) { #header-banner .header-reveal { display: none; } } /* Header + fil d'ariane = 100% de la hauteur ecran, sur toutes les pages et tailles d'ecran. La hauteur reelle du #breadcrumb (variable selon le contenu) n'est pas devinable en CSS : mesuree en JS au chargement/ redimensionnement (body.html) et posee dans --breadcrumb-h sur la racine du document. Le 4.5rem de repli ne sert qu'avant l'execution de ce script. */ #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; } /* Boutons d'accordeon des sous-panneaux : montes dans le DOM a toutes les tailles (meme fond INCLURE que le menu desktop, cf. inclure/menu- principal-desktop.html) mais masques par defaut, reveles uniquement sous le palier mobile ci-dessous. Le bouton bascule du menu mobile lui-meme (a.nav-toggle) est insere automatiquement par le plugin actif Responsive Nav, pas par ce theme - voir plus bas pour son style. */ .submenu-toggle { display: none; } .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 : au chargement il est colle au bas du header 100vh, trop peu de place en dessous pour un panneau qui s'ouvre vers le bas. Une fois #breadcrumb .is-fixed (colle en haut au scroll), la place est de nouveau en dessous : ouverture vers le bas normale (.sub-panel ci-dessus). */ #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; } /* Le plugin Responsive Nav pose #nav-secondary-menu ul li {text-align:center} sans condition de largeur, donc actif meme en desktop — specificite ID+2 balises, superieure a .sub-panel seul. Meme specificite ici (ID+2 classes) pour l'emporter, quel que soit le niveau d'imbrication. */ #nav-secondary-menu .sub-panel .menu-entree { text-align: left; } .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 --c-mice assez sombre par defaut pour garder le texte blanc au survol (pas de surcharge necessaire). */ .info-dropdown { padding: .5em; /* Largeur qui suit le contenu (titres d'articles plus longs que les mots-cles region de Circuits), plafonnee pour rester un encart. */ min-width: 200px; width: max-content; max-width: 340px; } /* items en li.menu-entree (balisage natif du plugin Menus, comme .mega-panel .menu-liste) : reset de liste + colonne sur .menu-liste plutot que sur .info-dropdown directement. */ .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(--c-mice); color: var(--blanc); } /* Puce/separateur avant le titre : le balisage natif du plugin Menus (menus/objet.html) ne pose pas de span dedie pour ca — meme glyphe "icons" (U+E926) que .icon-separator, en ::before du lien. */ .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; } .lang { font-size: .75em; letter-spacing: .05em; } .lang.fr { color: rgba(255,255,255,.85); } .lang.en { color: rgba(255,255,255,.55); } /* Menu mobile : plugin Responsive Nav, gere via ses propres feuilles injectees automatiquement (repli/deploiement, position, max-height anime, bouton bascule) - ce bloc n'ajoute que l'habillage visuel du theme (couleurs, listes sobres, puces, accordeon). Configuration back-office necessaire (?exec=configurer_responsivenav) : selecteur cible #nav-secondary-menu, palier 840px (coherent avec le reste du theme, pas le 40em par defaut du plugin), case "Menu burger" cochee. */ @media screen and (max-width: 840px) { /* .nav-primary (bar1, inclure/menu-quick.html) : sans rapport avec le menu principal, masque en mobile independamment. */ .nav-primary { display: none; } /* Bouton bascule (a.nav-toggle, insere par le plugin dans le flux normal du bandeau #breadcrumb) repasse en position:fixed, en haut a droite de l'ecran : #breadcrumb est colle au bas du hero 100vh sur la plupart des pages, donc hors-ecran au chargement — le bouton doit rester accessible sans scroller. Hauteur du plugin sans !important (verifie dans son source), donc pas de conflit avec ce resize. */ a.nav-toggle { position: fixed; top: 0.6em; right: 1em; width: 36px; height: 36px !important; z-index: 100; /* icone burger : SVG externe (fill="currentColor") en background-image, donc la couleur CSS de l'element ne l'atteint pas — inversee en blanc via filter plutot que de dupliquer le fichier SVG du plugin. */ filter: invert(1); } /* La feuille du plugin fixe le sprite burger/croix a 30px 60px (2 cadres de 30px empiles), pense pour un bouton de 30px. Ce theme force le bouton a 36px sans agrandir le sprite, d'ou un debordement de 6px sur le cadre voisin (barre du haut de la croix visible au repos, etc). Agrandir le sprite a 36px/72px fait coincider chaque cadre avec la hauteur du bouton. Specificite superieure a celle du plugin necessaire : sa feuille est injectee apres celle-ci dans le head. */ body a.nav-toggle:link, body a.nav-toggle:focus { background-size: 36px 72px !important; } /* Panneau : le plugin pose position:absolute en CSS puis position:relative en JS via un style inline a l'ouverture — un style inline gagne sur toute regle externe, d'ou le !important pour repasser en position:fixed et suivre le bouton desormais fixe. Largeur plafonnee a 85% de l'ecran (max 320px sur tablette). Ouverture/fermeture pilotee par "top" : ferme = top tres negatif (-100vh, marge large car le panneau peut approcher 100vh de hauteur), ouvert = top:3.2em, transitionne. Le panneau glisse ainsi depuis le haut jusqu'a sa position — max-height reste fixe en permanence (plus de bascule 0/calc), donc box-shadow n'a plus besoin d'etre isole sur .opened (pas de fuite d'ombre a hauteur nulle). */ #nav-secondary-menu { position: fixed !important; top: -100vh !important; right: 1em; width: min(85vw, 320px); /* !important necessaire : le plugin injecte sa propre feuille