/* ========================================================================== OBJECTIF NATURE — Refonte 2026 Feuille de style principale DA : magazine photo haut de gamme · crème + noir + jaune #f4b721 ========================================================================== */ /* ---------- 1. Variables ---------- */ :root{ /* Palette (3 couleurs — cf. synthèse décisive) */ --creme: #fbf9f0; /* fond dominant */ --creme-2: #f2efe2; /* crème un ton plus foncé (cartes, séparateurs) */ --noir: #0e0e0e; /* typo, aplats, footer */ --noir-50: rgba(14,14,14,.50); --jaune: #f4b721; /* accent UNIQUE et rare */ --jaune-d: #e0a510; /* jaune foncé (hover) */ --vert: #5c7a3f; /* vert nature (bouton « S'inscrire » du trio CTA) */ --vert-d: #4a6432; /* vert foncé (hover) */ --blanc: #ffffff; --beige-footer: #f6f3eb; /* RÈGLE SITE : fond de la DERNIÈRE section avant le footer (= haut du back.png) */ /* Typographie */ --serif: "Instrument Serif", Georgia, serif; /* titres — émotion */ --sans: "Inter", -apple-system, sans-serif; /* texte / UI */ --display:"Bebas Neue", "Inter", sans-serif; /* impact / mots-clés / labels */ /* Mesures */ --max: 1440px; --gutter: clamp(20px, 4vw, 64px); --nav-h: 112px; /* hauteur header MAXIMISÉ (haut de page) */ --nav-h-collapsed: 84px; /* hauteur header COLLAPSE au scroll (75%) */ --header-h: 112px; /* hauteur COURANTE (mise à jour par JS) -> les sticky s'y réfèrent */ --topbar-h: 0px; /* top-bar masquée : 0 pour récupérer l'espace */ /* Échelle typographique UNIQUE (retours client 03/07 : uniformiser les tailles). Toute taille de texte du site référence UNE de ces 6 variables — ne jamais remettre de font-size en dur dans les composants. */ --fs-title: clamp(40px, 5.6vw, 76px); /* titres de section (H2) */ --fs-h3: 20px; /* titres de cartes / de paragraphes / questions FAQ */ --fs-body: 18px; /* paragraphes courants */ --fs-small: 15px; /* métas, liens secondaires, boutons, petits textes */ --fs-label: 13px; /* eyebrows / labels uppercase (noms de section) */ --fs-nav: 14px; /* menu principal (réduit de 16 à 14px, Fix 09/07) */ /* Boutons — hauteur unique de TOUS les .btn du site (voir « 4. Boutons ») */ --btn-h: 52px; /* Transitions */ --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* PAS de scroll-behavior:smooth : Lenis gère déjà le smooth scroll. Les deux ensemble = scroll qui "rattrape d'un coup" / se replace (conflit entre le lissage natif et celui de Lenis). */ html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--sans); color:var(--noir); background:var(--creme); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } ul{ list-style:none; } /* ---------- 3. Typo utilitaires ---------- */ .h-serif{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em; } .eyebrow{ font-family:var(--sans); font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--noir-50); } .accent{ color:var(--jaune); } /* ---------- 4. Boutons ---------- */ /* HAUTEUR UNIQUE : --btn-h pilote TOUS les boutons du site (border-box -> la bordure du .btn--ghost et la hauteur forcée d'une carte n'y changent rien). align-self:center empêche un parent flex d'étirer un bouton à la hauteur de son voisin. Le padding vertical devient inutile. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; box-sizing:border-box; min-height:var(--btn-h); align-self:center; font-family:var(--sans); font-weight:600; font-size:var(--fs-small); letter-spacing:.02em; padding:0 26px; border-radius:40px; /* CONFINEMENT DES TRACES DE PATTES (sur .btn, pas sur une variante : TOUS les boutons les ont). · position:relative -> les empreintes se placent sur le bouton, pas sur son 1er parent positionné · isolation:isolate -> crée un stacking context, sinon le z-index:-1 des pattes les renvoie DERRIÈRE le fond du bouton (donc invisibles) · overflow:hidden -> la piste est coupée au bord arrondi */ position:relative; overflow:hidden; isolation:isolate; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } .btn--primary{ background:var(--jaune); color:var(--noir); } /* ===== ANIMATION « traces de pattes » (Fix 07/07) : au survol, des empreintes de patte TRAVERSENT le bouton EN DIAGONALE et s'effacent les unes après les autres (comme un animal qui marche dessus). Empreintes injectées en HTML par btnPaws() de main.js (.btn__paws/.btn__paw), chacune animée avec un délai décalé (apparition -> disparition en cascade). ===== */ .btn__paws{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } /* left/top désignent le CENTRE de l'empreinte (marges négatives = moitié de la taille) : le JS place les pattes par leur centre le long de l'axe de marche. */ /* L'empreinte est un MASQUE colorié par `currentColor` (= la couleur du TEXTE du bouton), et non plus une image au brun figé : elle s'adapte donc à chaque variante — sombre sur un bouton jaune ou blanc, claire sur un bouton noir ou un filet qui se remplit de noir au survol. L'opacité (jadis dans le `fill` du SVG) est désormais portée par les keyframes. */ .btn__paw{ position:absolute; width:15px; height:20px; margin:-10px 0 0 -7px; opacity:0; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64.7' height='82.2' viewBox='0 0 64.7 82.2'%3E%3Cg fill='%23000'%3E%3Cpath d='M22.6,52c.4-1.7-2.2-6.2-3.4-7.4-1.2-1.2-8.3-3.1-10.4-4.1-2.2-1-4-.1-5.5.8C-1.2,44.1,0,54.1.8,57.1c.9,3,4.4,5.4,5.8,5.7,1.4.4,3.7-2.2,5.1-3.1s4.4-1.2,6.8-1.8c2.4-.6,3.6-4.3,4-6Z'/%3E%3Cpath d='M15.5,35.5c2.1,1.8,5.6,2.3,7.2,2.2,1.6-.2,5-2.1,4.9-6.4,0-4.4-.6-9.7-1.9-11.6-1.3-1.9-3.7-7.6-9.7-5.1-1.9.8-2.9,2.7-3.9,5-1,2.3-2,6.6-1.5,8.4.4,1.8,2.8,5.9,4.9,7.7Z'/%3E%3Cpath d='M36.9,36.7c2.9,3,7.2-2,9.4-4,2.2-2,3.5-7.8,3.1-9.8-.4-1.9-4-5-5.2-6.6-1.2-1.7-5.3-4.7-6.7-4.2-5.9,2.2-5.8,7.8-6.9,13.7-1.1,5.9,3.4,8,6.3,10.9Z'/%3E%3Cpath d='M61,37.2c-1.3-1.8-5.8-.9-8.5-.9-2.7,0-5.4,4.7-7.6,5.7-5.3,2.2-2.2,8.9-.3,10.9,1.9,2.1,4.1,3.9,6.2,5.4,2.1,1.5,5.8.7,8.6,0,2.8-.8,4-5.7,5.1-9.8,1.1-4.2-2.2-9.4-3.5-11.1Z'/%3E%3Cpath d='M48.3,63.5c-2.1-1.8-6.2-4.8-8-7.8-1.8-3-4-2.8-8.5-3.3-4.5-.5-8.7,5.9-10.7,8.3-2.5,2.9-6.9,10-6.1,14.3.8,4.3,5.7,4.7,10,6.2,4.2,1.5,6.9.9,15,.6,8.2-.3,9.8-4.9,11.8-8.8,2-3.9-1.3-7.7-3.4-9.5Z'/%3E%3Cpath d='M56.5,34c2.1-.5,3.4-.5,2.8-1.8-.7-1.3-1.9-4.3-2.9-3.8-1.1.6-2.9,2.4-2.7,3.8.1,1.4.8,2.3,2.9,1.9Z'/%3E%3Cpath d='M17,8.6c.8-.4,1.9-.5,3,0,1.2.5,2.1-.7,2.3-2.7.2-1.9,1.1-6.2-1.5-5.9-2.5.2-3.9,4-4.5,5.8-.6,1.8-.2,3.3.7,2.8Z'/%3E%3Cpath d='M36.3,9.3c1.5-.6,5.1-1.2,4.7-2.4-.4-1.1-3.5-7.3-5.6-4.8-1.1,1.4.1,3-.3,4.7-.5,1.8-.3,3,1.2,2.4Z'/%3E%3Cpath d='M6.7,35.6c1.1-.5.5-2.4-.7-3.8-1.2-1.4-1.4-2.5-2.6-.7s-1.5,3.3-.9,4.9c.7,1.8,3.1.1,4.2-.4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64.7' height='82.2' viewBox='0 0 64.7 82.2'%3E%3Cg fill='%23000'%3E%3Cpath d='M22.6,52c.4-1.7-2.2-6.2-3.4-7.4-1.2-1.2-8.3-3.1-10.4-4.1-2.2-1-4-.1-5.5.8C-1.2,44.1,0,54.1.8,57.1c.9,3,4.4,5.4,5.8,5.7,1.4.4,3.7-2.2,5.1-3.1s4.4-1.2,6.8-1.8c2.4-.6,3.6-4.3,4-6Z'/%3E%3Cpath d='M15.5,35.5c2.1,1.8,5.6,2.3,7.2,2.2,1.6-.2,5-2.1,4.9-6.4,0-4.4-.6-9.7-1.9-11.6-1.3-1.9-3.7-7.6-9.7-5.1-1.9.8-2.9,2.7-3.9,5-1,2.3-2,6.6-1.5,8.4.4,1.8,2.8,5.9,4.9,7.7Z'/%3E%3Cpath d='M36.9,36.7c2.9,3,7.2-2,9.4-4,2.2-2,3.5-7.8,3.1-9.8-.4-1.9-4-5-5.2-6.6-1.2-1.7-5.3-4.7-6.7-4.2-5.9,2.2-5.8,7.8-6.9,13.7-1.1,5.9,3.4,8,6.3,10.9Z'/%3E%3Cpath d='M61,37.2c-1.3-1.8-5.8-.9-8.5-.9-2.7,0-5.4,4.7-7.6,5.7-5.3,2.2-2.2,8.9-.3,10.9,1.9,2.1,4.1,3.9,6.2,5.4,2.1,1.5,5.8.7,8.6,0,2.8-.8,4-5.7,5.1-9.8,1.1-4.2-2.2-9.4-3.5-11.1Z'/%3E%3Cpath d='M48.3,63.5c-2.1-1.8-6.2-4.8-8-7.8-1.8-3-4-2.8-8.5-3.3-4.5-.5-8.7,5.9-10.7,8.3-2.5,2.9-6.9,10-6.1,14.3.8,4.3,5.7,4.7,10,6.2,4.2,1.5,6.9.9,15,.6,8.2-.3,9.8-4.9,11.8-8.8,2-3.9-1.3-7.7-3.4-9.5Z'/%3E%3Cpath d='M56.5,34c2.1-.5,3.4-.5,2.8-1.8-.7-1.3-1.9-4.3-2.9-3.8-1.1.6-2.9,2.4-2.7,3.8.1,1.4.8,2.3,2.9,1.9Z'/%3E%3Cpath d='M17,8.6c.8-.4,1.9-.5,3,0,1.2.5,2.1-.7,2.3-2.7.2-1.9,1.1-6.2-1.5-5.9-2.5.2-3.9,4-4.5,5.8-.6,1.8-.2,3.3.7,2.8Z'/%3E%3Cpath d='M36.3,9.3c1.5-.6,5.1-1.2,4.7-2.4-.4-1.1-3.5-7.3-5.6-4.8-1.1,1.4.1,3-.3,4.7-.5,1.8-.3,3,1.2,2.4Z'/%3E%3Cpath d='M6.7,35.6c1.1-.5.5-2.4-.7-3.8-1.2-1.4-1.4-2.5-2.6-.7s-1.5,3.3-.9,4.9c.7,1.8,3.1.1,4.2-.4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; } /* au survol : chaque empreinte fait UN SEUL cycle apparition->disparition, décalé par --d (cascade). Pas de `infinite` : l'animal traverse une fois, puis la piste reste vide tant qu'on ne ressort pas. L'anim étant portée par :hover, elle est retirée à la sortie -> elle rejoue au survol suivant. --r = rotation de la patte (elle pointe dans le sens de la marche) ; --ox/--oy = décalage PERPENDICULAIRE à l'axe (gauche/droite de la foulée). Les deux sont posés par JS à chaque survol. */ .btn:hover .btn__paw{ animation:btnPawStep 1.4s var(--ease) 1 both; animation-delay:var(--d,0s); } /* .42 = l'opacité qui vivait autrefois dans le `fill` du SVG (rgba(40,26,10,0.42)). */ @keyframes btnPawStep{ 0% { opacity:0; transform:translate(var(--ox,0px),var(--oy,0px)) rotate(var(--r,35deg)) scale(.7); } 18% { opacity:.42; transform:translate(var(--ox,0px),var(--oy,0px)) rotate(var(--r,35deg)) scale(1); } 55% { opacity:.42; } 80% { opacity:0; transform:translate(var(--ox,0px),var(--oy,0px)) rotate(var(--r,35deg)) scale(1); } 100% { opacity:0; } } .btn--primary:hover{ background:var(--jaune-d); transform:translateY(-3px); box-shadow:0 10px 26px -6px rgba(244,183,33,.65); } .btn--primary:active{ transform:translateY(-1px); } @media (prefers-reduced-motion: reduce){ .btn__paws{ display:none; } } .btn--ghost{ border:1.5px solid currentColor; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } .btn--ghost:hover{ background:var(--noir); color:var(--creme); transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); } /* ----- variante fond BLANC / texte noir (sur fond sombre ou photo) ----- */ .btn--blanc{ background:var(--blanc); color:var(--noir); border:1.5px solid currentColor; } .btn--blanc:hover{ background:var(--noir); color:var(--blanc); transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.45); } /* ----- variante fond NOIR / texte blanc ----- */ .btn--noir{ background:var(--noir); color:var(--blanc); } .btn--noir:hover{ background:#242018; transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.55); } /* ----- variante filet CLAIR (fond sombre) : bord blanc, se remplit au survol ----- */ .btn--light{ border:1.5px solid rgba(255,255,255,.4); color:var(--blanc); background:rgba(20,17,12,.4); } .btn--light:hover{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); } /* ----- variante fond VERT / texte blanc : bouton « S'inscrire » du trio CTA (Nicolas 07/15). 3 CTA côte à côte = 3 couleurs : S'inscrire (vert) · Poser une option (jaune) · Nous contacter (filet). ----- */ .btn--vert{ background:var(--vert); color:var(--blanc); } .btn--vert:hover{ background:var(--vert-d); transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(74,100,50,.6); } /* ----- TRIO de CTA côte à côte (S'inscrire / Poser une option / Nous contacter) ----- flex-wrap : passe en colonne quand les 3 ne tiennent pas ; centré. */ /* 3 boutons RIGOUREUSEMENT identiques : MÊME largeur fixe, même hauteur, même arrondi, partout (carte duo, esprit, tableau des départs, contact) — indépendant de la largeur du conteneur. */ .cta-trio{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; } /* !important : neutralise les marges résiduelles d'anciennes classes (vf-esprit__cta/__option, vf-duo__*, voy-table__btn…) qui décalaient les boutons et cassaient l'alignement du trio. */ .cta-trio .btn{ flex:0 0 auto !important; width:170px !important; min-width:0; margin:0 !important; padding:0 12px !important; text-align:center; } @media (max-width:560px){ .cta-trio{ flex-direction:column; } .cta-trio .btn{ width:100% !important; } } /* ---------- 5. Conteneur ---------- */ .container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); } /* ========================================================================== HEADER / NAV ========================================================================== */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; /* AU-DESSUS DE TOUT (site-content z210, fiche pays z200…) */ transition:background .4s var(--ease), box-shadow .4s var(--ease); } /* Top-bar utilitaire — MASQUÉE (gain de place). Styles enfants retirés (code mort, .topbar est display:none). */ .topbar{ display:none; } /* Barre de navigation principale */ /* le header s'aligne sur la FENÊTRE NOIRE (.hero__panel = 100% - 2*gutter, sans max-width 1440) : logo bord gauche = bord gauche fenêtre ; bouton Contact bord droit = bord droit fenêtre ; nav au centre. */ .site-header .container{ max-width:none; } /* grille 3 colonnes : logo (gauche) | menu (centré) | contact (droite) */ .nav{ height:var(--nav-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; transition:height .35s var(--ease); /* COLLAPSE doux au scroll */ } /* conteneur des 2 versions (MÊME viewBox 740.9x172.6 -> même taille). Boîte à ratio fixe, les 2 SVG superposés en absolute -> switch clair/sombre = simple fondu, AUCUN décalage. */ .nav__logo{ justify-self:start; position:relative; display:block; height:75px; width:auto; aspect-ratio:740.9 / 172.6; /* -25% (était 100px) */ transition:height .35s var(--ease); } /* les DEUX logos en absolute, contenus dans la boîte (object-fit:contain, alignés à gauche) */ .nav__logo-img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; object-position:left center; display:block; transition:opacity .3s var(--ease); } .nav__logo-img--dark{ opacity:0; pointer-events:none; } .nav__logo-img--light{ opacity:1; } /* fond clair (on-light) -> on montre la version à TEXTE NOIR (vrai logo, pas un brightness:0) */ .site-header.on-light .nav__logo-img--light{ opacity:0; } .site-header.on-light .nav__logo-img--dark{ opacity:1; } /* fond sombre (on-dark / défaut) -> version claire */ .site-header.on-dark .nav__logo-img--light{ opacity:1; } .site-header.on-dark .nav__logo-img--dark{ opacity:0; } /* ===== HEADER COLLAPSE (au scroll, classe .is-solid) : header + logo réduits à ~75% ===== */ .site-header.is-solid .nav{ height:var(--nav-h-collapsed); } .site-header.is-solid .nav__logo{ height:53px; } /* -25% (était 70px) : collapse */ .nav__menu{ display:flex; align-items:center; justify-content:center; gap:30px; justify-self:stretch; } /* menu CENTRÉ dans l'espace libre logo <-> bouton Contact */ .nav__cta{ justify-self:end; } /* bouton Contact collé au bord droit (= bord fenêtre) */ /* page active = .is-active sur le
  • OU aria-current="page" sur le (les 2 conventions coexistaient). */ .nav__menu > li.is-active > a, .nav__menu > li > a[aria-current="page"]{ color:var(--jaune); font-weight:400; } /* page active : jaune + light (fond sombre = état par défaut) */ .nav__menu > li > a{ font-size:var(--fs-nav); font-weight:500; letter-spacing:.06em; text-transform:uppercase; /* menu principal en MAJUSCULES (hiérarchie, Fix 09/07) */ color:var(--blanc); padding:8px 0; position:relative; transition:color .3s var(--ease); } .nav__menu > li > a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--jaune); transition:width .3s var(--ease); } .nav__menu > li > a:hover::after, .nav__menu > li.is-active > a::after, .nav__menu > li > a[aria-current="page"]::after{ width:100%; } .nav__has-sub > a::before{ content:""; } .nav__has-sub > a span.caret{ display:inline-block; margin-left:6px; font-size:10px; transform:translateY(-1px); } /* .nav__cta : placement géré par justify-self:end (grille) -> pas de margin-left ici */ /* État solidifié (au scroll hors hero) — appliqué via JS */ .site-header.is-solid{ background:var(--noir); box-shadow:0 6px 30px rgba(0,0,0,.18); } .site-header.is-solid .topbar{ border-color:rgba(255,255,255,.10); } /* HEADER SUR FOND CLAIR : fond crème + textes/logo NOIRS -> lisible quand on scrolle sur le contenu clair. */ .site-header.on-light{ background:var(--creme); box-shadow:0 6px 24px rgba(0,0,0,.10); } .site-header.on-light .topbar, .site-header.on-light .nav__menu > li > a, .site-header.on-light .nav__menu > li > a .caret{ color:var(--noir); } .site-header.on-light .nav__menu > li.is-active > a, .site-header.on-light .nav__menu > li > a[aria-current="page"]{ color:var(--noir); } /* fond clair : page active reste noire (juste soulignée) */ /* logo : sur fond clair on affiche la VRAIE version foncée (cf. .nav__logo-img--dark) -> plus de filtre. */ .site-header.on-light .nav__burger span{ background:var(--noir); } /* HEADER SUR FOND SOMBRE : fond sombre translucide + textes/logo BLANCS -> lisible sur section sombre. */ .site-header.on-dark{ background:rgba(14,14,14,.55); backdrop-filter:blur(8px); box-shadow:0 6px 24px rgba(0,0,0,.25); } .site-header.on-dark .nav__menu > li > a, .site-header.on-dark .nav__menu > li > a .caret{ color:var(--blanc); } /* (la page active en jaune light est déjà gérée par .nav__menu > li.is-active > a ; on-light la repasse en noir) */ .site-header.on-dark .nav__logo img{ filter:none; } /* logo d'origine (clair) -> visible sur sombre */ /* CAS PLANISPHÈRE : header transparent (ni fond noir, ni blur, ni ombre) -> on voit la carte et les oiseaux. Garde on-dark pour le texte/logo blancs. Prime sur is-solid ET on-dark (demande Fix 09/07). */ .site-header.on-hero, .site-header.on-hero.is-solid, .site-header.on-hero.on-dark{ background:transparent; backdrop-filter:none; box-shadow:none; } .site-header.on-dark .nav__burger span{ background:var(--blanc); } /* Mega-menu (Nos offres) */ .nav__has-sub{ position:relative; } /* PONT invisible : comble l'espace entre le lien et le menu pour que le :hover ne se perde pas quand la souris descend vers le menu (sinon le menu se ferme avant qu'on l'atteigne). */ .nav__has-sub::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; opacity:0; pointer-events:none; } .nav__has-sub:hover::after{ pointer-events:auto; } .megamenu{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(8px); z-index:120; /* au-dessus de tout le header */ background:var(--creme); color:var(--noir); min-width:300px; padding:24px 28px; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.22); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); } .nav__has-sub:hover .megamenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .megamenu h4{ font-family:var(--display); font-size:var(--fs-small); letter-spacing:.08em; color:var(--noir-50); margin-bottom:14px; } /* item = icône famille (pastille) + libellé */ .megamenu ul li a{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:var(--fs-small); font-weight:500; border-bottom:1px solid var(--creme-2); transition:color .2s, padding .2s; } .megamenu ul li a:hover{ color:var(--jaune-d); padding-left:6px; } .megamenu ul li a[aria-current="page"]{ color:var(--jaune-d); font-weight:600; } /* sous-page courante */ .megamenu ul li:last-child a{ border-bottom:none; } /* Burger (mobile) */ .nav__burger{ display:none; width:30px; height:22px; position:relative; } .nav__burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--blanc); transition:.3s var(--ease); } .nav__burger span:nth-child(1){ top:0; } .nav__burger span:nth-child(2){ top:10px; } .nav__burger span:nth-child(3){ top:20px; } /* ========================================================================== HERO — planisphère GÉANT posé sur photo plein écran ========================================================================== */ /* Hero COLLÉ en haut : il reste figé pendant que .site-content (z210, opaque) remonte et le recouvre au scroll -> "le reste du site passe par-dessus le Hero". Vaut aussi bien en mode planisphère normal qu'avec une fiche pays affichée. */ /* ========================================================================== HERO INTRO — photographe plein écran (NOUVEAU 03/07) Sticky top:0 : le hero planisphère (sibling suivant, sticky aussi) remonte par-dessus, puis .site-content (z210) par-dessus le tout. Fond sombre -> TEXTES CLAIRS. ========================================================================== */ .intro-hero{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; color:var(--blanc); background:#241d12; } /* G3 (Nicolas 18/07, images fournies par Fix le 19/07) : le hero fait DÉFILER 3 photos. 2 couches superposées se croisent en fondu (la couche du dessus porte la photo suivante) : aucun clignotement, et la première photo est celle du CSS -> visible même sans JS. */ .intro-hero__bg{ position:absolute; inset:0; background:url('../img/hero/photographe.jpg') center/cover no-repeat; } .intro-hero__bg--next{ opacity:0; transition:opacity 1.4s ease; } .intro-hero__bg--next.is-on{ opacity:1; } @media (prefers-reduced-motion: reduce){ .intro-hero__bg--next{ transition:none; } /* pas de fondu : la photo reste fixe */ } /* voile : sombre du côté du TEXTE + léger assombrissement bas -> lisibilité du slogan. Par défaut texte à gauche ; variante .intro-hero--txt-right = photo avec sujet à gauche. */ .intro-hero__veil{ position:absolute; inset:0; background:linear-gradient(to right, rgba(14,14,14,.74) 0%, rgba(14,14,14,.40) 45%, rgba(14,14,14,.06) 78%), linear-gradient(to top, rgba(14,14,14,.42) 0%, rgba(14,14,14,0) 38%); } .intro-hero--txt-right .intro-hero__veil{ background:linear-gradient(to left, rgba(14,14,14,.74) 0%, rgba(14,14,14,.40) 45%, rgba(14,14,14,.06) 78%), linear-gradient(to top, rgba(14,14,14,.42) 0%, rgba(14,14,14,0) 38%); } .intro-hero--txt-right .intro-hero__inner{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .intro-hero__inner{ position:relative; z-index:1; } /* RÈGLE LISIBILITÉ : fond photo sombre -> surtitre en JAUNE (pas le gris foncé par défaut de .eyebrow) */ .intro-hero .eyebrow{ color:var(--jaune); } .intro-hero__slogan{ font-size:clamp(46px,6.4vw,92px); line-height:1.02; margin:16px 0 24px; color:var(--blanc); } .intro-hero__txt{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); max-width:46ch; } /* indicateur de scroll : label + flèche qui rebondit doucement */ .intro-hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .25s var(--ease); } .intro-hero__scroll:hover{ color:var(--jaune); } /* rollover jaune (demande Fix) */ .intro-hero__arrow{ display:block; animation:introBounce 1.8s ease-in-out infinite; } @keyframes introBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } } @media (prefers-reduced-motion: reduce){ .intro-hero__arrow{ animation:none; } } /* Depuis le 03/07 : le hero planisphère N'EST PLUS sticky — il recouvre le hero intro (photo, sticky top:0 sous lui) en remontant, puis défile NORMALEMENT avec le reste du site (plus de recouvrement par .site-content, demande client). */ .hero{ position:relative; height:100vh; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; padding-top:calc(var(--nav-h) + var(--topbar-h)); transform:translateZ(0); backface-visibility:hidden; } /* couche GPU : évite les gros repaints au scroll */ /* --- Fond hero : 2 couches superposées (profondeur) --- */ .hero__bg{ position:absolute; inset:0; z-index:0; background:#0e0e0e; } /* fond NOIR : visible le temps que la vidéo 1 charge */ /* COUCHE 1 : le sol (VIDÉO éléphants/aérienne) -> par-dessus le fond noir */ .hero__ground{ position:absolute; inset:0; } .hero__layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s var(--ease); /* image FIXE : aucun scale/zoom */ } .hero__layer.is-on{ opacity:1; } /* calque VIDÉO de fond : remplit le cadre comme une image (cover), sans déformation */ video.hero__layer{ width:100%; height:100%; object-fit:cover; } /* COUCHE 2 : nuages + oiseaux par-dessus (effet profondeur) — DÉSACTIVÉE tant que l'asset n'est pas fourni. IMPORTANT : mix-blend-mode + animation infinie forçaient un RE-COMPOSITING GPU permanent de toute la pile (photo + carte) -> scintillement continu au zoom. On neutralise la couche tant qu'il n'y a pas d'image. POUR RÉACTIVER quand l'image nuages arrivera : remettre mix-blend-mode:screen + animation:cloudsDrift, et retirer le display:none ci-dessous (idéalement n'activer le blend QUE si une image est réellement posée). */ .hero__clouds{ position:absolute; top:0; right:0; left:auto; z-index:1; pointer-events:none; /* SOUS le voile (z:2) - Fix 09/07 */ width:20.93%; height:auto; /* +15% (18.2% -> 20.93%, demande Fix 09/07) ; ancrée EN HAUT À DROITE -> grossit vers la gauche/bas sans décaler le coin */ object-fit:contain; object-position:right top; filter:url(#greenKey); /* chroma-key : retire le fond vert -> seuls les oiseaux restent */ opacity:.95; transition:opacity .6s var(--ease); /* fondu doux entre 2 passages (toutes les 30 s) */ } /* @keyframes cloudsDrift{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } } */ .hero__veil{ /* voile allégé (Fix 10/07 : plus clair, la savane est plus présente sous la carte). */ position:absolute; inset:0; z-index:2; /* sous la couche oiseaux (z3) */ background: radial-gradient(130% 100% at 50% 45%, rgba(14,14,14,.25) 0%, rgba(14,14,14,.5) 100%), linear-gradient(to bottom, rgba(14,14,14,.45) 0%, rgba(14,14,14,.32) 30%, rgba(14,14,14,.38) 60%, rgba(14,14,14,.55) 100%); } /* --- FENÊTRE maximisée : [zone gauche] [planisphère] côte à côte (zéro chevauchement) --- */ /* Hauteur calée sur la plus longue liste (Oiseaux, 20 esp.) — pas de scroll. Le planisphère ne bouge pas. */ /* Fenêtre = en-tête (libellés) + corps [familles|espèces|carte] + accroche bas */ .hero__panel{ position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-48%); width:calc(100% - 2*var(--gutter)); /* pleine largeur utile - Fix 09/07 */ height:min(94vh, 940px); display:flex; flex-direction:column; gap:12px; /* gaps réduits -> plus de hauteur pour la carte */ padding:24px 22px 16px; /* paddings réduits */ background:none; border:0; border-radius:0; box-shadow:none; transition:transform .5s var(--ease); } /* Légende du BAS : 2 libellés reliés par un filet jaune, chacun surmonté d'une flèche ↑ */ /* Légende calée sur le corps : zone gauche 470px (= .leftcol) puis filet + libellé pays CENTRÉ sous le planisphère. Grid [470px | filet | "pays" centré | filet]. */ .hero__panel-head{ display:grid; grid-template-columns:470px 1fr auto 1fr; align-items:flex-end; flex:0 0 auto; gap:16px; padding:0; /* compact -> gagne de la hauteur */ } .hero__panel-head .hero__hint--left{ justify-self:start; } /* espèce calé à gauche dans les 470px */ .hero__panel-head .hero__hint--map{ justify-self:center; } /* pays centré sous la carte */ .hero__hint{ font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88); white-space:nowrap; flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; gap:7px; } /* flèche vers le HAUT, centrée au-dessus de chaque libellé (= "ça se passe au-dessus") */ .hero__hint::before{ content:""; width:10px; height:10px; border-left:2px solid var(--jaune); border-top:2px solid var(--jaune); transform:rotate(45deg); } /* le filet s'aligne sur la LIGNE du texte (bas), pas au milieu flèche+texte */ .hero__panel-head .hero__rule{ margin-bottom:5px; } /* le filet jaune occupe tout l'espace entre les deux phrases, terminé par 2 points */ .hero__rule{ flex:1 1 auto; height:1px; position:relative; background:linear-gradient(to right, rgba(244,183,33,0) 0%, var(--jaune) 12%, var(--jaune) 88%, rgba(244,183,33,0) 100%); } .hero__rule::before,.hero__rule::after{ content:""; position:absolute; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--jaune); } .hero__rule::before{ left:0; } .hero__rule::after{ right:0; } /* Corps : familles + espèces + carte */ .hero__panel-body{ flex:1 1 auto; min-height:0; display:flex; gap:18px; align-items:stretch; } /* Accroche en HAUT, centrée — plus grande, avec de l'air sous elle (espace avant la carte) */ /* COLONNE GAUCHE (Fix 10/07) : accroche (2 lignes) AU-DESSUS, puis .leftcol (familles + espèces côte à côte) INCHANGÉE en dessous. Largeur = ancienne .leftcol (470px) -> la carte garde sa place. L'accroche en haut libère la bande du haut -> planisphère plus grand. */ .hero__left-wrap{ flex:0 0 470px; display:flex; flex-direction:column; min-height:0; } .hero__left-wrap .leftcol{ flex:1 1 auto; width:auto; } /* la leftcol remplit la hauteur sous l'accroche */ /* accroche : alignée à gauche, forcée sur 2 lignes (max-width serrée), espacement sous elle. */ .hero__panel .hero__tagline{ flex:0 0 auto; text-align:left; color:var(--blanc); font-size:clamp(24px,1.9vw,34px); line-height:1.08; margin:0 0 clamp(20px,3vh,40px); padding:0; max-width:16ch; /* force le passage sur ~2 lignes */ text-shadow:0 2px 18px rgba(0,0,0,.5); } .hero__tag-l, .hero__tag-r{ display:inline-block; } .hero__panel .hero__tagline .accent{ color:var(--jaune); } /* ZONE GAUCHE : largeur FIXE réservée (familles + espace espèces) => la carte ne bouge jamais */ .leftcol{ flex:0 0 auto; width:470px; /* espace réservé (familles + menu espèces élargi) */ display:flex; align-items:stretch; gap:14px; } /* PLANISPHÈRE : prend tout le reste, ne chevauche jamais la zone gauche */ .hero .map{ flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center; justify-content:center; pointer-events:none; overflow:hidden; /* clippe le SVG zoomé (transform scale) dans le cadre carte - sinon il déborde sur la page */ } /* ÉQUERRES DE CADRAGE style viseur photo aux 4 coins du cadre carte (Fix 10/07). Chaque pseudo dessine 2 coins opposés (border en L). ::before = haut-gauche + bas-droite, ::after = haut-droite + bas-gauche. Fixes : ne bougent pas au zoom (posées sur .map, pas sur le SVG zoomé). --cnr = bras, --cnw = trait. */ .hero .map{ --cnr:26px; --cnw:2px; --cnc:rgba(255,255,255,.85); --cno:0px; } /* corners collés au bord (Fix 10/07) */ .hero .map::before, .hero .map::after{ content:""; position:absolute; z-index:5; pointer-events:none; top:var(--cno); left:var(--cno); right:var(--cno); bottom:var(--cno); /* le trait n'apparaît qu'aux coins grâce au border-image conique ci-dessous. */ } /* HAUT-GAUCHE */ .hero .map::before{ background: linear-gradient(var(--cnc),var(--cnc)) left top /var(--cnw) var(--cnr) no-repeat, linear-gradient(var(--cnc),var(--cnc)) left top /var(--cnr) var(--cnw) no-repeat, linear-gradient(var(--cnc),var(--cnc)) right bottom/var(--cnw) var(--cnr) no-repeat, linear-gradient(var(--cnc),var(--cnc)) right bottom/var(--cnr) var(--cnw) no-repeat; } /* HAUT-DROITE + BAS-GAUCHE */ .hero .map::after{ background: linear-gradient(var(--cnc),var(--cnc)) right top /var(--cnw) var(--cnr) no-repeat, linear-gradient(var(--cnc),var(--cnc)) right top /var(--cnr) var(--cnw) no-repeat, linear-gradient(var(--cnc),var(--cnc)) left bottom /var(--cnw) var(--cnr) no-repeat, linear-gradient(var(--cnc),var(--cnc)) left bottom /var(--cnr) var(--cnw) no-repeat; } .hero .map svg{ width:100%; height:100%; /* planisphère AGRANDI au maximum (Fix 09/07) */ overflow:hidden; pointer-events:auto; } /* ---- BARRE DE ZONES : reset sous la colonne familles (470px), zones CENTRÉES sous la carte ---- */ .zones{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:4px 0 0; } .map__reset--corner{ flex:0 0 470px; } /* même largeur que .leftcol -> aligné sous les familles */ /* les zones logent dans la largeur de la CARTE (l'espace restant après les 470px) et sont CENTRÉES. */ .zones__list{ flex:1 1 auto; display:flex; align-items:stretch; justify-content:center; gap:clamp(8px,1.2vw,22px); flex-wrap:nowrap; } /* bouton zone = .family en LIGNE (pastille + label côte à côte), largeur au contenu (pas étiré). .family.family--zone (2 classes) bat .family{width:100%} définie plus bas dans le fichier. */ .family.family--zone{ flex:0 0 auto; width:auto; flex-direction:row; justify-content:center; text-align:center; gap:9px; padding:8px 12px; } .family--zone .family__label{ font-size:var(--fs-label); white-space:nowrap; } .family--zone .family__ico{ flex:0 0 auto; font-weight:700; font-size:15px; } /* famille GRISÉE quand aucune espèce de sa famille n'est présente dans la zone active. */ .family.is-disabled{ opacity:.3; pointer-events:none; } /* ZONE ACTIVE (Fix 10/07, allégé) : UNE seule règle. Les pays AVEC voyage (.dest) ne sont PAS touchés (opacité inchangée). Seuls les fonds neutres (sans voyage) passent à 25%. Aucun path modifié en JS -> beaucoup moins de repaints = plus de clipping résiduel. */ #planisphere.zone-active path:not(.dest):not(.pin-shape){ opacity:.25; transition:opacity .5s var(--ease); } /* PENDANT le zoom (.is-zooming, classe DÉDIÉE - PAS .zooming qui passe le cadre en overflow:visible) : couper les transitions des ~230 paths/marqueurs, sinon elles se relancent à chaque changement de zone = repaints empilés (le clipping cumulatif). shape-rendering:optimizeSpeed allège la rastérisation à chaque frame de l'animation du . */ #hero.is-zooming #planisphere path, #hero.is-zooming #planisphere .map-marker{ transition:none !important; shape-rendering:optimizeSpeed; } /* --- Contenu superposé : pictos + accroche, alignés en bas --- */ .hero__content{ position:relative; z-index:3; width:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:24px; flex:1; padding-bottom:34px; pointer-events:none; } .hero__content > *{ pointer-events:auto; } /* Accroche en bas, centrée, une seule ligne */ .hero__tagline{ color:var(--blanc); text-align:center; white-space:nowrap; font-size:clamp(30px,4.2vw,58px); line-height:1; text-shadow:0 2px 30px rgba(0,0,0,.55); } /* --- Moteur de recherche --- */ .searchbar[hidden]{ display:none !important; } .searchbar{ background:rgba(20,18,14,.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:7px; display:grid; grid-template-columns:1fr 1fr; gap:4px; width:min(440px,100%); } .searchbar__field{ position:relative; } .searchbar__field > label{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); padding:9px 14px 1px; } .searchbar__field select, .searchbar__field input{ width:100%; background:transparent; border:none; color:var(--blanc); font-size:14px; font-weight:500; padding:0 14px 10px; cursor:pointer; } .searchbar__field select option{ color:var(--noir); } .searchbar__field .prio{ position:absolute; top:7px; right:12px; font-size:8.5px; color:var(--jaune); letter-spacing:.1em; } .searchbar__go{ grid-column:1 / -1; background:var(--jaune); color:var(--noir); border-radius:12px; padding:13px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .25s var(--ease); margin-top:4px; } .searchbar__go:hover{ background:var(--jaune-d); } /* --- Familles : colonne verticale (icône + titre), dans la zone gauche --- */ .families{ display:flex; flex-direction:column; gap:10px; justify-content:center; align-self:center; } .family{ display:flex; flex-direction:row; align-items:center; gap:11px; background:none; border:none; padding:6px 8px; border-radius:12px; color:var(--blanc); width:100%; text-align:left; white-space:nowrap; transition:background .2s var(--ease); } .family:hover{ background:rgba(255,255,255,.06); } .family__ico{ width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.5); color:var(--blanc); transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .family__ico svg{ width:40px; height:40px; } /* dessin plus gros dans le cercle */ .family__label{ font-size:var(--fs-label); font-weight:600; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.95); } .family:hover .family__ico{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); } .family:hover .family__label{ color:var(--jaune); } .family.is-active .family__ico{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); } .family.is-active .family__label{ color:var(--jaune); } /* Colonne familles : bouton "Tout afficher" en haut + liste familles */ .famcol-inner{ flex:0 0 150px; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 4px; } .famcol-inner .families{ flex:0 0 auto; } /* Listing d'espèces : occupe l'espace déjà réservé (la carte ne bouge pas), juste un fondu */ .species{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; height:100%; background:rgba(14,14,14,.5); color:var(--blanc); border-radius:14px; border:1px solid rgba(255,255,255,.12); padding:14px 6px 14px 14px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease); } .leftcol.species-open .species{ opacity:1; visibility:visible; } .species__list{ flex:1 1 auto; overflow-y:auto; padding-right:8px; } /* Scrollbar fine, élégante, jaune */ .species__list{ scrollbar-width:thin; scrollbar-color:var(--jaune) transparent; } .species__list::-webkit-scrollbar{ width:4px; } .species__list::-webkit-scrollbar-track{ background:transparent; } .species__list::-webkit-scrollbar-thumb{ background:var(--jaune); border-radius:4px; } /* listing vertical : une espèce par ligne */ .species__list{ display:flex; flex-direction:column; gap:2px; } .species__list span{ display:block; font-size:var(--fs-small); padding:8px 10px; border-radius:8px; color:rgba(255,255,255,.92); border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); } .species__list span:hover{ background:rgba(244,183,33,.15); color:var(--jaune); } .species__list span.is-active{ background:var(--jaune); color:var(--noir); font-weight:600; } /* ========================================================================== Responsive (premier jet — affiné par le Chérubin plus tard) ========================================================================== */ @media (max-width:900px){ .nav__menu, .topbar__left .sep{ display:none; } .nav__burger{ display:block; } .searchbar{ flex-wrap:wrap; } .searchbar__field{ flex:1 1 45%; } .searchbar__field + .searchbar__field{ border-left:none; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } } /* ========================================================================== PLANISPHÈRE (dans la colonne droite du hero) Carte posée sur le fond photo : pays clairs translucides, accent jaune ========================================================================== */ #planisphere path:not(.pin-shape){ fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.42); stroke-width:1.5; /* pays SANS destination : atténués */ vector-effect:non-scaling-stroke; pointer-events:none; /* pays non-destinations : non cliquables */ transition:fill .25s var(--ease), opacity .5s var(--ease); /* fondu doux au zoom */ } /* TEST réversible : masquer les pins. Pour les RÉAFFICHER -> retirer la classe .pins-hidden (ajoutée au boot). */ #planisphere.pins-hidden .map-pin{ display:none; } /* PINS jaunes à contour noir — spécificité renforcée pour battre #planisphere path */ #planisphere .map-pin .pin-shape{ fill:var(--jaune); stroke:var(--noir); stroke-width:1.5; } #planisphere .map-pin .pin-dot{ fill:var(--noir); } /* pays Objectif Nature (destinations) — plus visibles ET CLIQUABLES (sur leur forme) */ #planisphere path.dest{ fill:rgba(255,255,255,.52); pointer-events:auto; cursor:pointer; } /* pays au SURVOL = JAUNE (accent), SANS contour noir */ #planisphere path.dest.hovered{ fill:var(--jaune); stroke:var(--jaune); stroke-width:1.5; vector-effect:non-scaling-stroke; } /* petite BOX du nom du pays, suit la souris au survol */ .map-tip{ position:fixed; z-index:300; pointer-events:none; padding:6px 12px; border-radius:8px; background:var(--jaune); color:var(--noir); font-family:var(--sans); font-size:var(--fs-label); font-weight:700; letter-spacing:.01em; white-space:nowrap; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); opacity:0; transform:translateY(4px); transition:opacity .15s var(--ease), transform .15s var(--ease); } .map-tip.show{ opacity:1; transform:translateY(0); } /* pays ACTIF / filtré (clic, match de filtre) = BLANC OPAQUE (même rendu que le pays zoomé) */ #planisphere path.match, #planisphere path.actif{ fill:rgba(255,255,255,.9); stroke:rgba(255,255,255,.95); stroke-width:1.8; vector-effect:non-scaling-stroke; } /* état filtré : pays non concernés -> filigrane léger (toujours visibles en fond) */ #planisphere.filtering path:not(.match){ opacity:.32; } /* marqueurs (point + nom du pays affiché au survol) */ .map-marker{ cursor:pointer; pointer-events:auto; transition:opacity .5s var(--ease); } .map-marker.hide{ opacity:0; pointer-events:none; } /* --- PIN façon Google Maps : goutte JAUNE VIVE + point central, contour blanc --- */ .map-pin{ transform-box:fill-box; transform-origin:bottom center; } .map-pin .pin-shape{ fill:var(--jaune); stroke:var(--noir); stroke-width:1.5; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:bottom center; transition:fill .2s var(--ease), transform .18s var(--ease); /* ombre portée pour détacher le pin du fond vert */ filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.5)); } .map-pin .pin-dot{ fill:var(--noir); pointer-events:none; } /* point central foncé = lisible sur le jaune */ /* survol : le pin "saute" + jaune encore plus vif */ .map-pin:hover .pin-shape{ fill:#ffd33a; transform:scale(1.25); } /* pin sélectionné/repéré (onde) un peu plus grand */ .map-pin.hovered .pin-shape{ transform:scale(1.18); } /* ONDES radar (clic espèce) : anneaux jaunes qui grossissent + s'effacent, en boucle */ .map-marker .ping{ fill:none; stroke:var(--jaune); stroke-width:1.5; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; pointer-events:none; animation:markerPing 1.8s ease-out infinite; } @keyframes markerPing{ 0% { transform:scale(1); opacity:.9; } 70% { opacity:0; } 100% { transform:scale(6); opacity:0; } } /* ONDE AUTOUR DU PAYS (filtre espèce) : écho radar jaune, grossit + s'efface en boucle. Centrée sur le pays -> repère bien sa position, y compris les petits pays / îles. */ #countryPulses .country-ping{ fill:rgba(244,183,33,.10); stroke:var(--jaune); stroke-width:2; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; pointer-events:none; opacity:0; /* caché tant que l'anim n'a pas démarré (évite le cercle figé) */ animation:countryPing 2s linear infinite both; } @keyframes countryPing{ 0% { transform:scale(.5); opacity:0; } /* démarre invisible + petit -> pas de cercle stationnaire */ 15% { opacity:.9; } /* l'onde "naît" en mouvement */ 100% { transform:scale(2.6); opacity:0; } } /* label = nom du pays, caché par défaut, visible au survol du point */ .marker-label{ fill:var(--blanc); font-family:var(--sans); font-weight:600; paint-order:stroke; stroke:rgba(0,0,0,.65); stroke-width:3px; stroke-linejoin:round; opacity:0; transition:opacity .2s var(--ease); pointer-events:none; } .map-marker:hover .marker-label{ opacity:1; } /* ==== FORME DU PAYS (overlay #countryShape) ==== SVG indépendant du planisphère, posé à sa taille FINALE en px (left/top/width/height calculés en JS). Animé UNIQUEMENT en translateX + opacity (glissement gauche->droite) -> GPU pur, JAMAIS de scale -> aucune re-rasterisation du tracé -> ZÉRO scintillement par conception. Filet blanc net (intérieur transparent : la photo traverse la forme). */ #countryShape{ position:fixed; z-index:65; pointer-events:none; overflow:visible; will-change:transform, opacity; backface-visibility:hidden; } #countryShape path{ fill:rgba(255,255,255,.10); /* très léger voile pour situer la surface */ stroke:var(--blanc); stroke-width:2px; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; } /* Mode zoom pays : UNE seule photo PLEIN ÉCRAN + infos par-dessus à gauche */ /* PAS de z-index sur .cpanel -> il ne crée PAS de contexte d'empilement, donc .cpanel__body (z80) compte GLOBALEMENT et passe AU-DESSUS du SVG (z70) -> le bouton "Retour" redevient cliquable. Ordre voulu : photo(z60) < filet SVG(z70) < texte+bouton(z80). */ /* .cpanel = conteneur SANS opacity animée (sinon animer l'opacity du groupe + son dégradé scintille). Le fondu se fait sur .cpanel__photo, qui est sur SA PROPRE couche GPU => fondu 100% composité, stable. */ /* .cpanel = conteneur SANS fond (pas de cache noir) : le cercle de révélation de la photo s'affiche DIRECTEMENT par-dessus la photo d'accueil (savane), sans écran noir intermédiaire. (le clip-path n'a pas de problème de transparence -> plus besoin de cache anti-scintillement.) */ .cpanel{ position:fixed; inset:0; pointer-events:none; visibility:hidden; transition:visibility 0s linear .55s; /* masqué après la fermeture du cercle */ } .cpanel.show{ pointer-events:auto; visibility:visible; transition:visibility 0s; } /* la photo couvre TOUT l'écran (full screen), sous le filet du pays. FONDU GPU PUR : on anime l'opacity DE LA PHOTO (sur sa couche GPU dédiée), pas du conteneur. */ .cpanel__photo{ position:fixed; inset:0; z-index:60; background:#241d12 center/cover no-repeat; /* RÉVÉLATION EN CERCLE : le cercle part du coin HAUT-GAUCHE (at 0% 0%) avec un rayon nul, puis s'étend en diagonale jusqu'à couvrir tout l'écran. clip-path animé = GPU, rapide, élégant. */ opacity:1; clip-path:circle(0% at 0% 0%); will-change:clip-path; transition:clip-path .55s cubic-bezier(.4,0,.2,1); } .cpanel.show .cpanel__photo{ clip-path:circle(150% at 0% 0%); } /* 150% = couvre le coin bas-droite */ /* révélation terminée + pays immobile : on retire will-change/transition -> zéro animation pending. */ .cpanel.is-settled .cpanel__photo{ will-change:auto; transition:none; } .cpanel__photo::after{ content:""; position:absolute; inset:0; /* dégradé : assombrit la MOITIÉ GAUCHE + le bas, pour la lisibilité du bloc texte où qu'il soit */ background: linear-gradient(to top, rgba(14,14,14,.78) 0%, rgba(14,14,14,.34) 40%, rgba(14,14,14,0) 70%), linear-gradient(to right, rgba(14,14,14,.62) 0%, rgba(14,14,14,.20) 40%, rgba(14,14,14,0) 66%); } /* bloc texte JUSTE SOUS la forme du pays — top piloté en JS (lastPlace.bottomPays + écart) */ .cpanel__body{ position:fixed; left:0; right:auto; top:0; bottom:auto; width:min(620px,52%); z-index:80; color:var(--blanc); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:12px; /* titre calé sur la MÊME marge gauche que la forme du pays (COL_LEFT=96px dans pays.js) : dégage la flèche de navigation et donne un espace gauche équilibré. Padding droit conservé. */ padding:0 clamp(30px,5vw,80px) 0 96px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s var(--ease), visibility 0s linear .5s; } .cpanel.show .cpanel__body{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s var(--ease), visibility 0s; } .cpanel__body .eyebrow{ color:rgba(255,255,255,.7); } .cpanel__title{ font-size:clamp(40px,4.6vw,68px); line-height:1; margin:0; } /* familles de la fiche pays : MÊME affichage que l'accueil (pastille ronde + label). nowrap + gap resserré -> tiennent sur UNE ligne même quand il y en a beaucoup (5 familles au Brésil), sans déborder sous le bas du hero (bug Fix 07/15). */ .cpanel__fams{ display:flex; flex-wrap:nowrap; gap:10px 14px; } .cpanel__fam{ display:inline-flex; flex-direction:column; align-items:center; gap:7px; width:72px; text-align:center; } .cpanel__fam .family__ico{ width:54px; height:54px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.55); color:var(--blanc); } .cpanel__fam .family__ico svg{ width:46px; height:46px; } .cpanel__fam .family__label{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.95); line-height:1.2; white-space:normal; } /* ===== MINI-FICHES VOYAGE (à DROITE de l'écran, 3 cartes plus grandes réparties sur la place dispo) ===== */ /* le conteneur occupe la MOITIÉ DROITE de l'écran (à droite du pays/nom) ; visibility pilotée ici, l'opacité/translation des cartes est animée individuellement par GSAP (entrée en cascade). */ .cpanel__trips{ position:fixed; left:38%; right:clamp(24px,3vw,56px); top:50%; transform:translateY(-50%); z-index:80; pointer-events:none; display:flex; flex-direction:column; align-items:stretch; gap:18px; visibility:hidden; transition:visibility 0s linear .8s; } .cpanel.show .cpanel__trips{ visibility:visible; pointer-events:auto; transition:visibility 0s; } .cpanel__trips .trips__head{ margin:0; text-align:center; font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9); } /* rangée des cartes (1, 2 ou 3) : CENTRÉES horizontalement dans la zone de droite. Largeur de carte plafonnée pour que 1 ou 2 cartes ne s'étirent pas en pleine largeur. */ .trips__row{ display:flex; justify-content:center; gap:clamp(16px,1.8vw,30px); align-items:stretch; } .cpanel__trips .trips__row .trip{ flex:1 1 0; max-width:360px; } /* FILET BLANC autour des fiches voyage (vue pays) -> les détache de la photo de fond. */ .cpanel__trips .trip{ border:1.5px solid rgba(255,255,255,.55); box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); } /* HOVER identique aux autres cartes voyage du site : la carte MONTE + ombre renforcée + filet plus net. */ .cpanel__trips .trip:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.85); box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.2); } /* ============================================================ CARTE VOYAGE — reproduction PIXEL-EXACTE du node Figma (360×413). Toutes les valeurs sont celles mesurées dans Figma, non interprétées. ============================================================ */ .trip{ flex:1 1 0; min-width:0; background:rgba(20,17,12,.62); border:1px solid rgba(255,255,255,.14); border-radius:20px; backdrop-filter:blur(8px); display:flex; flex-direction:column; box-shadow:0 22px 60px rgba(0,0,0,.5); transition:transform .2s var(--ease), border-color .2s var(--ease); /* PAS d'overflow:hidden : l'étiquette prix déborde à droite (13px dans Figma) */ } .trip:hover{ transform:translateY(-5px); border-color:rgba(244,183,33,.6); } /* IMAGE — ratio 3:2 (format reflex, demande client 03/07 : « photos toujours en 2/3 ») */ .trip__media{ position:relative; aspect-ratio:3/2; background:#241d12 center/cover no-repeat; border-radius:20px 20px 0 0; } .trip__media::after{ content:""; position:absolute; inset:0; border-radius:20px 20px 0 0; background:linear-gradient(to top, rgba(20,17,12,.85) 0%, rgba(20,17,12,0) 55%); } /* NIVEAU DE DIFFICULTÉ — pastille 1 à 3 pattes (remplace l'icône famille, retour client 03/07) */ .trip__diff{ position:absolute; bottom:-24px; left:28px; height:46px; padding:0 15px; border-radius:4px; display:flex; align-items:center; gap:4px; color:var(--blanc); z-index:3; background:rgba(20,17,12,.85); border:1.5px solid rgba(255,255,255,.6); } /* rendu UNIFORME partout (règle Fix 06/07) : angles droits (informatif), pattes remplies JAUNES */ .trip__diff svg{ width:21px; height:21px; fill:var(--jaune); } .trip__diff svg.is-off{ fill:var(--blanc); opacity:.3; } /* TAG commercial (remplace le prix, retour client 03/07) — même ruban à cheval image/corps. vert=Départ garanti · jaune=Coup de cœur · orange=Déjà des options · rouge=Reste X places. */ .trip__tag{ position:absolute; right:-13px; bottom:-16px; z-index:3; box-sizing:border-box; display:flex; align-items:center; padding:10px 16px; background:var(--jaune); color:#241d12; border-radius:6px 0 0 6px; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); font-size:var(--fs-small); font-weight:700; letter-spacing:.02em; line-height:1; } /* queue/pli sous le coin bas-droit (ruban replié) — couleur assortie via --tag-fold */ .trip__tag::after{ content:""; position:absolute; right:0; bottom:-11px; border-width:11px 13px 0 0; border-style:solid; border-color:var(--tag-fold,#9c6f08) transparent transparent transparent; } .trip__tag--vert{ background:#2e7d46; color:var(--blanc); --tag-fold:#1d5730; } /* Départ garanti */ .trip__tag--jaune{ background:var(--jaune); color:var(--noir); --tag-fold:#9c6f08; } /* mise en avant : coup de cœur, nouveauté… */ .trip__tag--rouge{ background:#e0492e; color:var(--blanc); --tag-fold:#9c2c18; } /* urgence : dernières places */ .trip__tag--gris{ background:#5a5750; color:var(--blanc); --tag-fold:#3b3934; } /* fermé : complet, reporté */ /* variante EN FLUX (pas de ruban à cheval sur une carte) : même box pleine couleur, position statique */ .trip__tag--inline{ position:static; border-radius:6px; box-shadow:none; } .trip__tag--inline::after{ display:none; } /* CORPS — Figma : padding 30/28/32, gap 11px */ .trip__body{ padding:30px 28px 32px; display:flex; flex-direction:column; gap:11px; flex:1; } /* date — Figma : 12px SemiBold #f4b721 uppercase tracking 1.2px lh 1.6 */ .trip__date{ font-size:var(--fs-label); font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--jaune); margin:0; line-height:1.6; } /* nombre de places, sur la ligne date, discret et séparé (couleur atténuée pour ne pas concurrencer la date) */ .trip__places{ color:var(--noir-50); font-weight:600; } .trip__places::before{ content:" · "; color:var(--noir-50); } .trip--light .trip__places, .trip--light .trip__places::before{ color:var(--noir-50); } /* TITRE DE MINI-FICHE VOYAGE — SERIF, comme TOUS les titres de carte du site (polaroïds, récits, guides, équipe). Instrument Serif n'existe qu'en 400 : un font-weight:600 forcerait une graisse synthétique. Posé ici en CSS -> couvre d'un coup les 5 générateurs de vignette. */ .trip__title{ font-family:var(--serif); font-size:clamp(24px,2vw,29px); font-weight:400; /* "plus gras" demandé par le client : on DENSIFIE LE TRAIT au lieu de forcer un font-weight, qui donnerait le faux gras synthétique baveux de Chrome. currentColor = suit blanc/noir. */ -webkit-text-stroke:.35px currentColor; line-height:1.15; letter-spacing:-.01em; color:var(--blanc); margin:0; } /* sous-titre — Figma : 13px Regular rgba(255,255,255,.62) lh 1.4 */ .trip__sub{ font-size:var(--fs-small); font-weight:400; color:rgba(255,255,255,.62); margin:0; line-height:1.4; } /* COMPOSANT ACCOMPAGNATEUR UNIQUE (mutualisation Maquettiste) - portrait + "Accompagné par" + nom. Taille/forme du portrait pilotées par --guide-pic-size/--guide-pic-radius (à changer ICI pour se propager partout). Couleur via modificateurs .on-guide--clair / .on-guide--sombre. .trip__guide est un ALIAS conservé pour compatibilité (même markup déjà généré par tripGuideHTML/ON_guideHTML) - RÈGLE LISIBILITÉ (client 03/07) : carte SOMBRE -> texte CLAIR (défaut ici) ; .trip--light -> texte SOMBRE (override plus bas). */ .on-guide, .trip__guide{ display:flex; align-items:center; gap:10px; font-size:var(--fs-small); line-height:1.3; color:rgba(255,255,255,.72); --guide-pic-size: 36px; --guide-pic-radius: 50%; } .on-guide__pic, .trip__guide-pic{ width:var(--guide-pic-size); height:var(--guide-pic-size); border-radius:var(--guide-pic-radius); flex:0 0 auto; background:#241d12 center/cover no-repeat; border:1.5px solid rgba(255,255,255,.5); } .on-guide strong, .trip__guide strong{ font-weight:600; color:var(--blanc); } .on-guide__txt em, .on-guide em{ display:block; font-style:normal; font-size:var(--fs-label); color:rgba(255,255,255,.55); } /* modificateurs couleur (remplacent la réécriture dispersée .trip--light / .stackv__caption) */ .on-guide--sombre{ color:rgba(255,255,255,.72); } .on-guide--sombre strong{ color:var(--blanc); } .on-guide--clair{ color:var(--noir-50); } .on-guide--clair strong{ color:var(--noir); } .on-guide--clair .on-guide__pic{ border-color:rgba(14,14,14,.15); } /* variante taille "moyenne" (52px) pour les blocs hors vignette : martin-pêcheur, carte voyage */ .on-guide--md{ --guide-pic-size: 52px; } .on-guide--md .on-guide__pic{ border-width:2px; } /* LIGNE DU BAS — bouton centré (la pastille places a été remplacée par le tag sur l'image). */ .trip__foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:center; gap:15px; } /* BOUTON — porte .btn.btn--primary (hauteur --btn-h, typo et anim pattes communes au site). */ .trip__cta{ padding:0 18px; white-space:nowrap; } /* bouton "Voir toutes les offres" sous les 3 cartes — porte .btn.btn--light */ .trips__all{ align-self:center; margin-top:4px; } /* « RÉINITIALISER » — dernière entrée SOUS Reptiles (remplace le bouton « Tout afficher »). Pas un bouton : un TEXTE SOULIGNÉ précédé d'une flèche circulaire qui tourne sur elle-même au survol. Aligné sur la gouttière des familles (46px d'icône + 11px de gap) pour que le libellé tombe sous ceux des familles. */ .map__reset{ display:flex; align-items:center; gap:11px; background:none; border:none; padding:6px 8px; margin-top:4px; color:var(--blanc); width:100%; text-align:left; cursor:pointer; } .map__reset__ico{ width:46px; height:46px; flex:0 0 auto; /* même gouttière que .family__ico */ display:grid; place-items:center; color:var(--jaune); } /* tourne sur elle-même : ANIMATION (une transition vers rotate(360deg) = rotate(0), donc immobile) */ .map__reset__ico svg{ width:19px; height:19px; } .map__reset:hover .map__reset__ico svg{ animation:resetSpin .6s var(--ease); } @keyframes resetSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } } .map__reset__txt{ font-size:var(--fs-small); font-weight:600; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.45); transition:text-decoration-color .2s var(--ease); } .map__reset:hover .map__reset__txt{ text-decoration-color:var(--jaune); color:var(--jaune); } @media (prefers-reduced-motion: reduce){ .map__reset:hover .map__reset__ico svg{ animation:none; } } /* ========================================================================== SECTIONS DE L'INDEX (sous le Hero) — DA crème / noir / jaune ========================================================================== */ /* WRAPPER du contenu de l'index : passe AU-DESSUS de la fiche pays figée (position:fixed, z<=200) et l'occulte avec un fond opaque quand on scrolle. -> plus de superposition transparente. */ .site-content{ position:relative; z-index:210; background:var(--creme); transform:translateZ(0); /* couche GPU : glisse au-dessus du Hero sticky sans repaint lourd */ } /* (Arc/dôme retiré : on reste sur une bordure droite entre le Hero et le contenu.) */ /* éléments révélés au scroll : PLUS de opacity:0 ici (sinon invisibles si JS échoue). L'état caché est posé par JS via .io-armed.io-fade (voir plus bas). */ /* en-têtes de section */ .sec-head{ max-width:820px; margin:0 auto clamp(36px,5vw,60px); text-align:center; } .sec-title{ font-size:var(--fs-title); color:var(--noir); margin:10px 0 16px; line-height:1.02; } .sec-sub{ font-size:var(--fs-body); color:var(--noir-50); line-height:1.6; } /* A3 (retour Nicolas 18/07) : titres des blocs OFFRES et RÉCITS agrandis (modificateur, pas de bump du token global) */ .sec-title--xl{ font-size:clamp(52px, 7.2vw, 98px); } .sec-head:has(.sec-title--xl){ max-width:1080px; } /* ============================================================ APPARITIONS AU SCROLL — SÉQUENTIELLES PAR SECTION (de haut en bas). Piloté par IntersectionObserver (natif, indépendant de Lenis). Quand une section entre à l'écran, ses éléments se révèlent l'un après l'autre (délai = rang vertical --si). RÈGLE D'OR : l'état "caché" n'est posé QUE si JS arme (.rv-armed). Sans JS -> rien n'est masqué. JS ajoute .rv-in pour révéler. ============================================================ */ /* === SÉQUENCEMENT PAR SECTION (système actif) === --p est posé sur la SECTION (progression scroll). Chaque élément a sa fenêtre [--from, --from+--span]. Sa progression LOCALE --pp = (--p - --from) / --span, bornée 0..1. -> les éléments s'animent l'un APRÈS l'autre (le texte finit avant les cartes). Réversible (lié au scroll). --p est HÉRITÉ de la section (CSS custom props héritent). */ .rv-part, .rv-scrub.rv{ --from:0; --span:.22; } .rv-part, .rv-scrub.rv{ --pp:max(0, min(1, calc((var(--p, 0) - var(--from)) / var(--span)))); } /* eyebrow + parts génériques : fondu + montée selon --pp. */ .rv-part{ opacity:var(--pp); transform:translateY(calc((1 - var(--pp)) * 50px)); } /* cartes / blocs de contenu : fondu + montée selon --pp (chacun a un --from croissant -> 1 à 1, G->D). */ .rv-scrub.rv{ opacity:var(--pp); transform:translateY(calc((1 - var(--pp)) * 48px)); } /* le TITRE (.rv-words) : le conteneur ne bouge pas ; chaque MOT se défloute selon --pp + rang --wi. */ .rv-part.rv-words{ opacity:1; transform:none; } /* TEXTE DESCRIPTIF (.rv-wipe = sous-titre) : MASQUE qui s'ouvre de GAUCHE à DROITE selon --pp. */ .rv-part.rv-wipe{ opacity:1; transform:none; clip-path:inset(0 calc((1 - var(--pp)) * 100%) 0 0); } .rv-words .rv-word{ display:inline-block; /* cascade G->D des mots À L'INTÉRIEUR de la fenêtre du titre : rang --wi sur --nw. */ --pw:max(0, min(1, calc((var(--pp) - (var(--wi) / var(--nw, 6)) * 0.55) / 0.45))); opacity:var(--pw); filter:blur(calc((1 - var(--pw)) * 14px)); transform:translateY(calc((1 - var(--pw)) * 8px)); } .eyebrow--dark{ color:var(--jaune-d); } .sec-cta{ text-align:center; margin-top:clamp(30px,4vw,50px); } .btn--dark{ color:var(--noir); border-color:rgba(14,14,14,.3); } .btn--dark:hover{ background:var(--noir); color:var(--creme); } /* --lg = bouton plus LARGE (respiration horizontale), même hauteur/typo que les autres */ .btn--lg{ padding:0 38px; } section[id]{ padding:clamp(70px,9vw,130px) 0; } /* ===== QUI SOMMES-NOUS — éditorial pleine page (façon travelnextlvl) ===== */ .about{ background:var(--creme); padding:0 !important; } /* ===== PIN 2 PHASES de la section "Qui sommes-nous" ===== .about-pin est HAUTE (1 + PIN écrans). .about-pin__sticky se fige sous le header. PHASE A (avant que le sticky n'accroche réellement) : les TRAITS se dessinent un par un (--pl). PHASE B (sticky figé, plein écran sous header) : les ÉLÉMENTS internes apparaissent un par un (--p). JS pose --pl (lignes) et --p (contenus) via la timeline playAbout (main.js). */ /* Depuis le 03/07 : PLUS DE PIN STICKY (la cliente ne veut pas de zone qui bloque le scroll). La section fait 1 écran ; l'animation (traits puis contenus) se JOUE UNE FOIS à l'arrivée, déclenchée par IntersectionObserver dans main.js, le scroll reste totalement libre. */ .about-pin{ position:relative; } .about-pin__sticky{ position:relative; height:calc(100vh - var(--header-h, 112px)); display:flex; align-items:stretch; overflow:hidden; } /* ===== GRILLE éditoriale "Qui sommes-nous" (template client) ===== col gauche (guépard, PLEINE box) | col droite [intro en haut, (agence | photographe) en bas]. Les TRAITS sont des bordures de cellules (pseudo-éléments) -> ils tombent TOUJOURS sur les gouttières, jamais dans le texte. Les PHOTOS remplissent leur box bord à bord (pas de cadre). */ .about__grid{ position:relative; width:100%; display:grid; grid-template-columns:1.15fr .85fr .55fr; /* guépard large | texte droite | photo droite */ grid-template-rows:1.2fr 1fr; /* intro un peu plus haute que le bas */ grid-template-areas: "guepard intro intro" "guepard agence photographe"; height:100%; /* remplit EXACTEMENT le sticky (pas de débordement) */ } .about__cell{ position:relative; display:flex; flex-direction:column; justify-content:center; } .about__cell--guepard{ grid-area:guepard; } .about__cell--intro{ grid-area:intro; padding:clamp(34px,4.5vw,72px) clamp(34px,4vw,64px); } .about__cell--agence{ grid-area:agence; padding:clamp(34px,4vw,60px) clamp(30px,3.4vw,52px); } .about__cell--photographe{ grid-area:photographe; } /* PHOTOS : remplissent toute leur box (plein écran dans la box), PAS de cadre, PAS de radius. Révélation par masque CERCLE qui se déploie (technique des pays du planisphère). */ .about__circle{ position:absolute; inset:0; /* plein box bord à bord */ width:100%; height:100%; background:#241d12 center/cover no-repeat; clip-path:circle(0% at 50% 50%); /* caché ; se déploie selon --pp */ } .about__cell--guepard, .about__cell--photographe{ overflow:hidden; } .about__cell--photographe{ min-height:min(40vh,360px); } /* ===== TRAITS = bordures de cellules (toujours sur la gouttière) qui se TRACENT ===== Chaque trait est un pseudo-élément posé sur un bord de box ; scaleX/Y 0->1 piloté par --pp. --lp = progression locale du trait (posée par .ab via --pp). */ .about__cell::before, .about__cell::after{ content:""; position:absolute; background:var(--noir); z-index:3; pointer-events:none; } /* trait VERTICAL entre guépard et la colonne droite : bord droit du guépard */ .about__cell--guepard::after{ top:0; right:0; width:1px; height:100%; transform:scaleY(var(--lp, 0)); transform-origin:top; } /* trait HORIZONTAL entre intro (haut) et le bas (agence+photographe) : bord bas de l'intro */ .about__cell--intro::after{ left:0; right:0; bottom:0; height:1px; transform:scaleX(var(--lp, 0)); transform-origin:left; } /* trait VERTICAL entre agence (texte) et photographe : bord droit de l'agence */ .about__cell--agence::after{ top:0; right:0; width:1px; height:100%; transform:scaleY(var(--lp, 0)); transform-origin:top; } /* cadre extérieur (haut + bas de la grille) qui se trace aussi */ .about__grid::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--noir); z-index:3; transform:scaleX(var(--frame, 0)); transform-origin:left; } .about__grid::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--noir); z-index:3; transform:scaleX(var(--frame, 0)); transform-origin:left; } .about__head{ text-align:left; max-width:none; margin:0 0 clamp(18px,2.2vw,28px); } .about__lead--sm{ font-size:clamp(20px,2vw,28px); } /* ===== ANIMATION 2 PHASES ===== PHASE A (--pl 0->1, AVANT le pin) : le cadre + chaque trait se dessinent un par un. --frame = cadre extérieur ; chaque cellule-trait a sa fenêtre [--lf,--ls] dans --pl. PHASE B (--p, PENDANT le pin) : chaque élément interne apparaît un par un [--from,--span]. */ /* -- PHASE A : traits (tous finis à --pl≈0.78, AVANT l'accroche à --pl=1) -- */ .about-pin{ --pl:0; } /* progression "dessin des traits" (posée par JS) */ .about__grid{ --frame:max(0, min(1, calc(var(--pl, 0) / 0.16))); } /* cadre extérieur en tout premier */ .about__cell.ab-line{ --lp:max(0, min(1, calc((var(--pl, 0) - var(--lf, 0)) / var(--ls, .2)))); } .about__cell--guepard::after{ transform:scaleY(var(--lp, 0)); } .about__cell--intro::after{ transform:scaleX(var(--lp, 0)); } .about__cell--agence::after{ transform:scaleY(var(--lp, 0)); } /* -- PHASE B : contenus -- */ .about__grid .ab{ --pp:max(0, min(1, calc((var(--p, 0) - var(--from, 0)) / var(--span, .26)))); } /* déploiement des images en CERCLE concentrique depuis un COIN (rayon final = diagonale ~150%) : - guépard (haut-gauche) : le cercle naît en haut-gauche et s'étend vers le bas-droite. - photographe (bas-droite): le cercle naît en bas-droite et s'étend vers le haut-gauche. */ .about__cell--guepard .about__circle.ab{ clip-path:circle(calc(var(--pp, 0) * 150%) at 0% 0%); } .about__cell--photographe .about__circle.ab{ clip-path:circle(calc(var(--pp, 0) * 150%) at 100% 100%); } .about__lead{ font-family:var(--serif); font-size:clamp(26px,3.2vw,44px); line-height:1.12; color:var(--noir); margin-bottom:20px; } .about__lead em{ font-style:italic; color:var(--jaune-d, #c98f00); } .about__body{ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); max-width:52ch; } .about__cta{ margin-top:22px; width:fit-content; align-self:flex-start; } /* lien vers la page Présentation (demande Fix 06/07) */ /* citation pleine largeur sur grande image — COLLÉE bord à bord (aucune marge autour) */ .about__quote{ position:relative; min-height:min(78vh,640px); display:flex; align-items:center; margin:0; overflow:hidden; } .about__quote-img{ position:absolute; inset:0; background:#241d12 center/cover no-repeat; } .about__quote-veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%); } .about__quote-txt{ position:relative; color:var(--blanc); } .about__quote-txt p{ font-size:clamp(28px,4vw,58px); line-height:1.12; max-width:18ch; margin-bottom:18px; } .about__quote-txt cite{ font-style:normal; font-size:var(--fs-small); letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.8); } @media (max-width:860px){ /* mobile : PAS de pin (la grille empilée est haute) -> scroll normal */ .about-pin{ height:auto; } .about-pin__sticky{ position:static; height:auto; display:block; overflow:visible; } /* grille "Qui sommes-nous" : empilement 1 colonne, ordre logique intro -> guépard -> agence -> photographe */ .about__grid{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"intro" "guepard" "agence" "photographe"; height:auto; max-height:none; min-height:0; } /* traits internes (pseudo-éléments) inutiles une fois empilé */ .about__cell::before, .about__cell::after, .about__grid::before, .about__grid::after{ display:none; } .about__cell{ padding:clamp(20px,6vw,32px) !important; } .about__cell--guepard, .about__cell--photographe{ min-height:300px; } .about__circle{ position:relative; min-height:300px; } } /* ===== VOYAGES À LA UNE — cartes empilées au scroll (card-stacking, façon incredibles.dev) ===== Chaque carte est position:sticky ; en scrollant, elles se calent les unes sur les autres. --i = index de la carte (posé par JS) -> petit décalage vertical croissant = effet "paquet". */ /* FOND forêt FIXE : couche .stackv__bg sticky PLEINE HAUTEUR VIEWPORT (100vh), 1er enfant de .stackv. Comme elle est sticky top:0 sur toute la hauteur de la section -> elle reste COLLÉE et IMMOBILE pendant tout le battage (fond FIXE), en COVER sur 100vh (taille normale, pas zoomé), et couvre TOUT (plus de bande noire). Le contenu (.stackv__track) remonte par-dessus via margin-top:-100vh. */ .stackv{ position:relative; background:var(--noir); padding:0 !important; } /* annule le padding section[id] (= les bandes noires) */ .stackv__bg{ position:sticky; top:0; height:100vh; z-index:0; overflow:hidden; background:var(--noir) url('../img/stackv/foret-sapins.jpg') center/cover no-repeat; } .stackv__bg::after{ content:""; position:absolute; inset:0; background:rgba(10,10,10,.62); } /* calque noir -> fait ressortir les polaroïds */ /* contenu PAR-DESSUS le bg sticky. Le track occupe EXACTEMENT 1 écran, header réservé en padding : titre en haut (hauteur naturelle), stage = tout le reste -> rien ne déborde sur la section suivante. */ .stackv__track{ position:relative; z-index:1; margin-top:-100vh; min-height:100vh; padding-top:var(--header-h, 112px); display:flex; flex-direction:column; } /* sur fond sombre : titre/sous-titre clairs */ .stackv .sec-title{ color:var(--blanc); } .stackv .sec-sub{ color:rgba(255,255,255,.6); } /* TITRE de section : DANS le stage sticky (en haut) -> il reste collé sous le header AVEC les cartes pendant le battage, et se décolle AVEC elles à la fin (tout remonte ensemble). */ .stackv .sec-head{ position:relative; z-index:1; max-width:820px; margin:0 auto; padding:clamp(24px,3vw,40px) clamp(20px,4vw,40px) 0; text-align:center; } /* ÉVENTAIL/BATTAGE de cartes — piloté par les FLÈCHES depuis le 03/07 (fini le pin sticky de 540vh : la cliente ne veut PAS de zone qui bloque le scroll). La section fait ~1 écran, le scroll est libre. */ .stackv__pin{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } /* STAGE = la zone des cartes SEULE (le titre est au-dessus) : prend toute la hauteur restante. */ /* STAGE = zone des cartes SEULE (titre au-dessus). min-height = carte pleine taille + respiration haut/bas : si l'écran est trop court, c'est la SECTION (et son fond forêt) qui s'allonge, la carte n'est jamais rognée. */ .stackv{ --stackv-marge:56px; } .stackv__stage{ position:relative; flex:1 1 auto; min-height:calc(var(--stack-h, 600px) + var(--stackv-marge) * 2); perspective:1600px; } /* FLÈCHES ← → : ronds jaunes de part et d'autre du paquet de cartes */ .stackv__nav{ position:absolute; top:55%; transform:translateY(-50%); z-index:200; width:58px; height:58px; border-radius:50%; background:var(--jaune); color:var(--noir); display:grid; place-items:center; cursor:pointer; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .stackv__nav:hover{ background:var(--jaune-d); transform:translateY(-50%) scale(1.08); box-shadow:0 18px 40px -10px rgba(244,183,33,.55); } .stackv__nav--prev{ left:clamp(14px, 6vw, 120px); } .stackv__nav--next{ right:clamp(14px, 6vw, 120px); } /* ===== CARTE POLAROÏD : cadre blanc, photo en haut, bande blanche (caption) en bas ===== */ .stackv__card{ position:absolute; left:50%; top:50%; width:min(520px, 86vw); background:var(--blanc); padding:14px 14px 0; /* cadre blanc ; la bande basse vient du padding de .caption */ border-radius:6px; box-shadow:0 28px 55px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.18); will-change:transform; /* --tx/--ty/--rot/--sc posés par main.js ; fallback repos = --dx0/--rot0. -50% recentre la carte. */ transform:translate(-50%, -50%) translate(var(--tx, var(--dx0, 0px)), var(--ty, 0px)) rotate(var(--rot, var(--rot0, 0deg))) scale(var(--sc, 1)); } /* PHOTO (haut du polaroïd) */ .stackv__photo{ position:relative; display:block; margin:0; width:100%; aspect-ratio:3/2; background:#241d12 center/cover no-repeat; border-radius:3px; } /* overflow visible : le ruban tag déborde à droite */ .stackv__badge{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:7px; background:rgba(0,0,0,.42); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); border-radius:999px; color:var(--blanc); padding:5px 12px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; } /* CAPTION = bande blanche du bas : texte en SOMBRE (lisible) */ .stackv__caption{ padding:30px 8px 20px; color:var(--noir); /* haut 30px : laisse passer la pastille pattes qui chevauche */ display:flex; flex-direction:column; gap:7px; } /* font-weight:400 explicite : sans lui le h3 hérite du gras du navigateur, et Instrument Serif (qui n'existe qu'en 400) est alors GRAISSÉ SYNTHÉTIQUEMENT par Chrome — un faux gras baveux. */ .stackv__caption .stackv__title{ font-family:var(--serif); font-weight:400; font-size:clamp(25px,2.3vw,32px); -webkit-text-stroke:.35px currentColor; /* même densification que .trip__title */ line-height:1.08; color:var(--noir); } .stackv__caption .stackv__sub{ font-size:var(--fs-small); line-height:1.5; color:var(--noir-50); } .stackv__foot{ display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap; } /* Le tag du polaroïd réutilise le ruban .trip__tag — décalé pour DÉBORDER du cadre blanc du polaroïd (padding 14px + 13px de débord), pli triangulaire dessous = effet de profondeur. */ .stackv__photo .trip__tag{ right:-27px; } /* Mêmes infos que les fiches voyage, adaptées à la BANDE BLANCHE (règle lisibilité : textes sombres) */ .stackv__caption .trip__date{ color:var(--jaune-d); } .stackv__caption .trip__guide{ color:var(--noir-50); } .stackv__caption .trip__guide strong{ color:var(--noir); } .stackv__caption .trip__guide-pic{ border-color:rgba(14,14,14,.15); } .stackv__cta{ margin-left:auto; padding:9px 18px; font-size:var(--fs-small); } /* MOBILE : pas de pin/battage -> polaroïds empilés verticalement, droits. */ @media (max-width:760px){ .stackv__pin{ height:auto; } .stackv__nav{ display:none; } /* mobile : polaroïds empilés, pas de battage */ .stackv__stage{ position:static; height:auto; display:block; perspective:none; padding:0 clamp(16px,5vw,28px); } .stackv__card{ position:relative; left:auto; top:auto; width:min(420px,100%); margin:0 auto clamp(20px,5vw,32px); transform:none !important; z-index:auto !important; } /* fond forêt : non sticky en mobile (couvre la section en flux), pas de margin négatif sur le track */ .stackv__bg{ position:absolute; inset:0; height:100%; } .stackv__track{ margin-top:0; padding:clamp(40px,8vw,64px) 0; height:auto; display:block; } .stackv__pin{ display:block; } } /* ---- À LA UNE ---- */ .feature{ position:relative; padding:0; min-height:100vh; display:flex; align-items:center; color:var(--blanc); overflow:hidden; } /* overflow:hidden = la "fenêtre découpée" (le fond fixe est clippé ici) */ /* FOND FIXE "fenêtre découpée" : le média couvre la section ; sa couche interne (__fix) se translate À L'INVERSE du scroll (piloté JS via --fix-y) pour PARAÎTRE fixe à l'écran. Compatible avec le contexte transformé de .site-content (où position:fixed ne serait PAS réellement fixe). Marche image ET vidéo. */ .feature__media{ position:absolute; inset:0; z-index:0; } .feature__fix{ position:absolute; left:0; right:0; top:0; height:100vh; /* haut de section -> hauteur fenêtre */ transform:translateY(var(--fix-y, 0px)); will-change:transform; } .feature__img{ position:absolute; inset:0; z-index:0; background:#241d12 center/cover no-repeat; } .feature__video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; } .feature__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(14,14,14,.85) 0%, rgba(14,14,14,.45) 45%, rgba(14,14,14,.05) 80%); } .feature__inner{ position:relative; z-index:1; } .feature__card{ max-width:560px; } .feature__title{ font-size:var(--fs-title); margin:8px 0 16px; line-height:1.03; } .feature__txt{ font-size:var(--fs-body); line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:26px; } /* composant accompagnateur unifié (.on-guide--md) - portrait réel du guide (fallback jaune si absent) */ .feature__photographer .on-guide__pic{ background-color:var(--jaune); } /* espace vertical du bloc martin-pêcheur : le .on-guide n'a pas de margin propre (dans une vignette c'est le gap du parent qui espace) ; ici les 3 blocs sont enfants directs -> on aère la colonne. */ .feature__photographer{ margin-bottom:28px; } .feature__inner .feature__meta{ margin-bottom:32px; } .feature__prole{ display:block; font-size:var(--fs-small); color:rgba(255,255,255,.6); } .feature__meta{ display:flex; align-items:center; gap:24px; margin-bottom:28px; font-size:var(--fs-small); } /* ---- GRILLE PROCHAINS DÉPARTS : mêmes cartes .trip que le Hero, en variante FOND BLANC ---- */ /* 1re section : remontée PILOTÉE PAR LE SCROLL (translateY négatif via JS, pas de margin statique) -> au repos (scroll 0) elle est à sa place normale ; elle remonte vers l'arc en scrollant. */ .depforts{ background:var(--creme); position:relative; will-change:transform; } .depforts__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); } .depforts__grid .trip{ flex:initial; } /* dans une grille, pas de flex:1 */ /* variante claire de la carte voyage (fond blanc, textes noirs) — réutilise toute la structure .trip__* */ .trip--light{ background:var(--blanc); border:1px solid var(--creme-2); backdrop-filter:none; box-shadow:0 14px 40px rgba(0,0,0,.08); } .trip--light:hover{ transform:translateY(-6px); border-color:rgba(244,183,33,.5); box-shadow:0 24px 60px rgba(0,0,0,.14); } /* (.trip--light .trip__diff : override retiré 06/07 — chip sombre UNIFORME sur toutes les cartes) */ .trip--light .trip__guide{ color:var(--noir-50); } .trip--light .trip__guide strong{ color:var(--noir); } .trip--light .trip__guide-pic{ border-color:rgba(14,14,14,.15); } .trip--light .trip__date{ color:var(--jaune-d); } .trip--light .trip__title{ color:var(--noir); } .trip--light .trip__sub{ color:var(--noir-50); } /* pastille places : contour rouge, lisible sur fond clair (inchangé) */ /* ---- PHOTOGRAPHES ---- */ .photographers{ background:var(--creme-2); overflow:hidden; } /* ===== BANDEAUX DÉFILANTS (marquee) façon park.photos ===== */ .pgr-marquee{ display:flex; flex-direction:column; gap:clamp(14px,2vw,26px); margin-top:clamp(30px,4vw,52px); } /* chaque ligne = une piste qui défile horizontalement, en boucle infinie */ .pgr-row{ display:flex; width:max-content; gap:clamp(28px,3vw,52px); will-change:transform; } .pgr-row[data-dir="left"]{ animation:pgrScrollL 48s linear infinite; } .pgr-row[data-dir="right"]{ animation:pgrScrollR 48s linear infinite; } /* ARRÊT au survol de toute la zone (rollover) */ .pgr-marquee:hover .pgr-row{ animation-play-state:paused; } /* la piste contient 2 copies identiques -> translation de -50% = boucle sans couture */ @keyframes pgrScrollL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes pgrScrollR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } } /* un item = vignette photo + nom côte à côte */ .pgr-item{ display:flex; align-items:center; gap:14px; flex:0 0 auto; cursor:pointer; color:inherit; text-decoration:none; } .pgr-item__photo{ width:clamp(64px,5vw,86px); height:clamp(64px,5vw,86px); border-radius:20px; background:#241d12 center/cover no-repeat; flex:0 0 auto; filter:grayscale(.25); transition:filter .3s var(--ease), transform .3s var(--ease); } .pgr-item__txt{ line-height:1.15; } .pgr-item__name{ font-family:var(--serif, 'Instrument Serif', serif); font-size:clamp(26px,2.6vw,40px); color:var(--noir); white-space:nowrap; } .pgr-item__spe{ font-size:12px; color:var(--noir-50); letter-spacing:.04em; text-transform:uppercase; margin-top:2px; } /* survol d'un item : photo nette + léger zoom (le défilement est déjà figé) */ .pgr-item:hover .pgr-item__photo{ filter:grayscale(0); transform:scale(1.06); } /* accessibilité : pas d'animation si l'utilisateur la refuse */ @media (prefers-reduced-motion: reduce){ .pgr-row{ animation:none; } } /* ---- BLOC 35 ANS ---- */ .trust{ background:var(--noir); color:var(--creme); text-align:center; } .trust__stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(30px,5vw,80px); margin-bottom:34px; } .trust__stat{ display:flex; flex-direction:column; gap:4px; } .trust__num{ font-size:clamp(44px,6vw,76px); color:var(--jaune); line-height:1; transition:text-shadow .6s ease; } /* ALLUMAGE : glow jaune au moment où le chiffre compte, puis il s'estompe (classe retirée par JS). */ .trust__num.is-lit{ text-shadow:0 0 22px rgba(244,183,33,.65), 0 0 6px rgba(244,183,33,.5); } .trust__lbl{ font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); } .trust__txt{ max-width:620px; margin:0 auto; font-size:var(--fs-body); line-height:1.6; color:rgba(255,255,255,.8); } /* ---- BLOG ---- */ .blog{ background:var(--creme); } .blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); } .post{ background:var(--blanc); border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.08); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .post:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.14); } .post__link{ display:block; color:inherit; text-decoration:none; } /* carte article entièrement cliquable -> fiche récit */ .post__img{ aspect-ratio:3/2; background:#241d12 center/cover no-repeat; } .post__body{ padding:22px 24px 26px; } .post__cat{ display:inline-block; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jaune-d); margin-bottom:10px; } /* titre de carte « Récits de terrain » (home) — SERIF, comme les titres de récits de recits.html */ .post__title{ font-family:var(--serif); font-size:clamp(21px,1.7vw,25px); font-weight:400; line-height:1.15; letter-spacing:-.01em; color:var(--noir); margin-bottom:12px; } /* extrait de l'article (retour client 03/07) : 3 lignes max, puis "…" */ .post__excerpt{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .post__meta{ font-size:var(--fs-small); color:var(--noir-50); } .post__more{ margin-top:16px; } /* bouton jaune "Lire la suite" (style .btn--primary partagé) */ /* ---- TÉMOIGNAGES ---- */ .testimonials{ background:var(--creme-2); } .testimonials__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); } .quote{ background:var(--blanc); border-radius:18px; padding:32px 30px; box-shadow:0 14px 40px rgba(0,0,0,.07); margin:0; } .quote p{ font-family:var(--serif); font-size:21px; line-height:1.45; color:var(--noir); margin-bottom:18px; } .quote footer{ font-size:var(--fs-small); font-weight:600; color:var(--jaune-d); } /* ---- CTA DEVIS ---- */ /* CTA "Réalisons ensemble…" : VIDÉO aérienne de fond (drone 4x4 savane) + voile dégradé depuis la DROITE pour la lisibilité ; texte aligné À DROITE, avec une vraie MARGE à droite (pas collé au bord). */ .cta-devis{ position:relative; overflow:hidden; min-height:min(72vh,580px); display:flex; align-items:center; background:#241d12; text-align:right; } /* vidéo de fond plein cadre */ .cta-devis__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } /* voile : sombre à DROITE (sous le texte) -> transparent à gauche (on garde la vidéo visible) */ .cta-devis::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to left, rgba(14,14,14,.88) 0%, rgba(14,14,14,.64) 34%, rgba(14,14,14,.20) 68%, rgba(14,14,14,.05) 100%); } /* bloc texte : dans le container (garde donc le padding latéral -> MARGE à droite), aligné à droite */ .cta-devis__inner{ position:relative; z-index:2; width:100%; padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(40px,6vw,80px); } .cta-devis__title{ font-size:var(--fs-title); color:var(--blanc); margin:0 0 18px auto; line-height:1.05; max-width:20ch; } .cta-devis__txt{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); margin:0 0 32px auto; max-width:58ch; } .cta-devis .btn--primary{ background:var(--jaune); color:var(--noir); } .cta-devis .btn--primary:hover{ background:#f4c020; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); } @media (max-width:680px){ /* mobile : voile vertical + texte centré */ .cta-devis{ text-align:center; } .cta-devis::before{ background:linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,.55) 60%, rgba(14,14,14,.35) 100%); } .cta-devis__title, .cta-devis__txt{ margin-left:auto; margin-right:auto; } } /* ---- FAQ ---- */ /* beige uni, ACCORDÉ au haut (nuages) du footer — couleur fournie par le client */ .faq{ background:var(--beige-footer); } /* dernière section de l'index avant le footer */ .faq__list{ max-width:780px; margin:0 auto; } .faq__item{ border-bottom:1px solid var(--creme-2); padding:4px 0; } .faq__item summary{ list-style:none; cursor:pointer; padding:22px 4px; font-size:var(--fs-h3); font-weight:600; color:var(--noir); display:flex; align-items:center; justify-content:space-between; } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary::after{ content:"+"; font-size:26px; font-weight:400; color:var(--jaune-d); transition:transform .25s; } .faq__item[open] summary::after{ transform:rotate(45deg); } .faq__item p{ padding:0 4px 22px; font-size:var(--fs-body); line-height:1.6; color:var(--noir-50); max-width:680px; } /* ---- FOOTER ---- */ /* SCÈNE : back (dans le flux, donne la hauteur) + front superposé pixel-perfect + logo intercalé. Les LIENS sont par-dessus la savane (absolute, calés en bas). PARALLAXE douce. Fond = beige des nuages EN HAUT (jamais de bande noire) ; le bas est couvert par le front (savane). */ .site-footer{ position:relative; overflow:hidden; background:var(--beige-footer); color:rgba(255,255,255,.92); } /* MASQUE BAS : recouvre toute bande BLEUE résiduelle (halo bas du back.png) sous la savane. Couleur = sol bas de la savane (#3b2c1f). z entre front(3) et liens(5). */ .site-footer::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:14px; background:#3b2c1f; z-index:4; pointer-events:none; } .footer__scene{ position:relative; width:100%; line-height:0; z-index:0; pointer-events:none; } /* back EN FLUX, FIXE (non animé) : donne la hauteur du footer, jamais de bande au-dessus. */ .footer__back{ position:relative; display:block; width:100%; height:auto; z-index:1; margin-bottom:-1px; } /* front : descend jusqu'en bas + plus large que back -> couvre toute bande résiduelle (plus de bleu). */ .footer__front{ position:absolute; left:50%; bottom:0; width:101%; height:auto; z-index:3; transform:translate(-50%, var(--front-y, 0px)); will-change:transform; } /* LOGO géant intercalé (ENTRE back z1 et front z3), centré, remonte du bas vers le haut au scroll */ .footer__biglogo{ position:absolute; left:50%; top:22%; transform:translate(-50%, var(--logo-y, 0px)); width:min(46%, 560px); height:auto; z-index:2; filter:drop-shadow(0 8px 24px rgba(0,0,0,.30)); will-change:transform; } /* liens du footer : PAR-DESSUS la scène, calés EN BAS (un peu remontés) + parallaxe (--links-y). */ .footer__links{ position:absolute; left:0; right:0; bottom:24px; z-index:5; transform:translateY(var(--links-y, 0px)); will-change:transform; } .footer__links::before{ content:""; position:absolute; left:0; right:0; top:-40px; bottom:-40px; z-index:-1; background:linear-gradient(to top, rgba(10,7,4,.92) 0%, rgba(10,7,4,.72) 55%, rgba(10,7,4,0) 100%); } .footer__top, .footer__bottom{ position:relative; z-index:5; } .footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:clamp(28px,3vw,56px); padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.12); } .footer__tag{ font-size:var(--fs-small); line-height:1.5; margin-bottom:18px; color:rgba(255,255,255,.6); } /* Réseaux sociaux : icônes dans des RONDS JAUNES (retour client 03/07) */ .footer__soc{ display:flex; gap:12px; } .footer__soc a{ width:44px; height:44px; border-radius:50%; background:var(--jaune); color:var(--noir); display:grid; place-items:center; transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .footer__soc a:hover{ background:var(--jaune-d); transform:translateY(-3px); box-shadow:0 10px 22px -8px rgba(244,183,33,.6); } .footer__soc svg{ width:22px; height:22px; fill:currentColor; } .footer__col h4, .footer__news h4{ font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--blanc); margin-bottom:16px; } .footer__col{ display:flex; flex-direction:column; gap:11px; } .footer__col a{ font-size:var(--fs-small); color:rgba(255,255,255,.68); transition:color .2s; } .footer__col a:hover{ color:var(--jaune); } .footer__news p{ font-size:var(--fs-small); line-height:1.5; color:rgba(255,255,255,.6); margin-bottom:16px; } .footer__form{ display:flex; gap:8px; } .footer__form input{ flex:1; min-width:0; padding:12px 16px; border-radius:30px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--blanc); font:inherit; font-size:var(--fs-small); } .footer__form input::placeholder{ color:rgba(255,255,255,.4); } .footer__form .btn{ padding:0 20px; } .footer__bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:20px; font-size:var(--fs-small); color:rgba(255,255,255,.78); } .footer__legal a{ color:rgba(255,255,255,.82); transition:color .2s; } .footer__legal a:hover{ color:var(--jaune); } .footer__design{ color:rgba(255,255,255,.78); } /* crédit "Design : Agence K2" (droite) */ /* ===== BLOC NEWSLETTER (mi-page, bas-droite) — fond crème, TEXTES SOMBRES (règle lisibilité) ===== */ .news-pop{ position:fixed; right:clamp(18px,2.4vw,32px); bottom:clamp(88px,12vh,124px); z-index:950; width:min(380px, calc(100vw - 36px)); background:var(--creme); color:var(--noir); border-radius:18px; padding:26px 26px 24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(14,14,14,.06); opacity:0; transform:translateY(26px); transition:opacity .45s var(--ease), transform .45s var(--ease); } .news-pop.is-open{ opacity:1; transform:none; } .news-pop__close{ position:absolute; top:8px; right:14px; font-size:26px; line-height:1; color:var(--noir-50); transition:color .2s; } .news-pop__close:hover{ color:var(--noir); } .news-pop__title{ font-size:clamp(24px,2vw,30px); margin:8px 0; color:var(--noir); } .news-pop__txt{ font-size:var(--fs-small); color:var(--noir-50); line-height:1.55; margin-bottom:16px; } .news-pop__form{ display:flex; gap:8px; } .news-pop__form input{ flex:1; min-width:0; padding:12px 16px; border-radius:30px; border:1px solid rgba(14,14,14,.18); background:var(--blanc); color:var(--noir); font:inherit; font-size:var(--fs-small); outline:none; transition:border-color .2s; } .news-pop__form input:focus{ border-color:var(--jaune); } .news-pop__form .btn{ padding:0 18px; } /* ===== Bouton FLOATING "remonter en haut" (bas-droite) ===== */ .scroll-top{ position:fixed; right:clamp(18px,2.4vw,32px); bottom:clamp(18px,2.4vw,32px); z-index:990; width:52px; height:52px; border:0; border-radius:50%; background:var(--noir); color:var(--blanc); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(14px) scale(.92); transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s; } .scroll-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .scroll-top:hover{ background:var(--jaune); color:var(--noir); } .scroll-top svg{ display:block; } @media (max-width:560px){ .scroll-top{ width:46px; height:46px; } } /* ========================================================================== FICHE PAYS (pays.html) — RÉUTILISE la composition .cpanel d'origine (photo plein cadre, forme du pays en FILET BLANC, corps texte, fiches voyage à droite) dans une section de 80vh. Seul le positionnement passe de fixed -> absolute (ancré section). ========================================================================== */ .cfiche{ position:relative; height:80vh; min-height:600px; overflow:hidden; background:#241d12; color:var(--blanc); } .cfiche .cpanel, .cfiche .cpanel__photo, .cfiche .cpanel__body, .cfiche .cpanel__trips, .cfiche #countryShape{ position:absolute; } /* bouton retour : même place que l'original (bas, centré) */ .cfiche__back{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(20px,3vh,36px); z-index:90; } .cfiche__back:hover{ transform:translateX(-50%) translateY(-3px); } /* ========================================================================== FICHE VOYAGE (voyage.html) — page modèle Yellowstone (03/07). Ligne graphique du site : échelle --fs-*, palette, règle lisibilité. ========================================================================== */ /* --- section infos : réutilise .faq__list/.faq__item ; fond alterné --- */ .voy-infos{ background:var(--blanc); } /* --- tableau départs --- */ .voy-departs{ background:var(--creme-2); } /* le tableau déborde un peu du container (recentré) pour tenir tout sur une ligne ; clampé si l'écran est trop étroit. */ .voy-table__wrap{ overflow-x:auto; background:var(--blanc); border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.08); width:min(100vw - 40px, 100% + 220px); margin-inline:calc((100% - min(100vw - 40px, 100% + 220px)) / 2); } .voy-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); color:var(--noir); } .voy-table th{ font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--noir-50); text-align:left; padding:18px 16px; border-bottom:1px solid var(--creme-2); white-space:nowrap; } .voy-table td{ padding:20px 16px; vertical-align:middle; white-space:nowrap; } .voy-table td strong{ font-size:var(--fs-h3); } /* accompagnateur : portrait rond + nom (même rayon que le composant .on-guide) */ .voy-table__guide{ display:inline-flex; align-items:center; gap:12px; } .voy-table__guide-pic{ width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; } /* disponibilité = INFORMATIF (règle Fix 06/07 : pas de pilule) -> texte coloré + coche devant */ .voy-table__tag{ display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .voy-table__tag::before{ content:"✓"; font-size:var(--fs-small); } .voy-table__tag--vert{ color:#2e7d46; } /* disponibilité (B6, 19/07) : urgence en rouge orangé, départ fermé en gris ; la coche devient « ! » pour l'urgence et « x » pour un départ fermé. */ .voy-table__tag--rouge{ color:#e0492e; } .voy-table__tag--rouge::before{ content:"!"; } .voy-table__tag--gris{ color:var(--noir-50); } .voy-table__tag--gris::before{ content:"×"; } .voy-table__btn{ padding:10px 20px; } .voy-table__actions{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; } .vf-duo__contact{ margin-top:16px; } /* CTA spécialiste sur le volet BLANC (filet noir) */ .voy-note{ margin-top:16px; font-size:var(--fs-small); color:var(--noir-50); } /* --- listes + / − (réutilisées dans la sidebar de la fiche voyage) --- */ .voy-liste{ display:flex; flex-direction:column; gap:12px; font-size:var(--fs-small); line-height:1.55; color:var(--noir); } .voy-liste li{ padding-left:30px; position:relative; } .voy-liste--in li::before{ content:"+"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background:#2e7d46; color:var(--blanc); font-weight:700; display:grid; place-items:center; font-size:var(--fs-label); } .voy-liste--out li::before{ content:"-"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background:var(--jaune); color:var(--noir); font-weight:700; display:grid; place-items:center; font-size:var(--fs-label); } /* CE PRIX COMPREND / NE COMPREND PAS (Nicolas 07/15) — 2 colonnes sous le tableau des départs, différenciées par couleur (vert = compris / JAUNE charte = non compris - A6, Nicolas 18/07 : le rouge faisait alerte, remplacé par le jaune de la charte). */ .vf-prixdet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4vw,52px); } .vf-prixdet[hidden]{ display:none; } .vf-prixdet__col{ background:var(--blanc); border-radius:16px; padding:26px 28px; border-top:4px solid; box-shadow:0 12px 36px rgba(0,0,0,.06); } .vf-prixdet__col--in{ border-top-color:#2e7d46; } .vf-prixdet__col--out{ border-top-color:var(--jaune); } .vf-prixdet__titre{ font-family:var(--sans); font-size:calc(var(--fs-h3) + 2px); font-weight:700; margin:0 0 18px; display:flex; align-items:center; gap:10px; } .vf-prixdet__col--in .vf-prixdet__titre{ color:#2e7d46; } .vf-prixdet__col--out .vf-prixdet__titre{ color:var(--jaune-d); } .vf-prixdet__titre::before{ content:""; width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:inline-grid; place-items:center; line-height:1; color:var(--blanc); font-size:var(--fs-small); font-weight:700; } .vf-prixdet__col--in .vf-prixdet__titre::before{ content:"✓"; background:#2e7d46; } .vf-prixdet__col--out .vf-prixdet__titre::before{ content:""; background:var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6 8.4 8.4M8.4 3.6 3.6 8.4' stroke='%230e0e0e' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center/12px 12px no-repeat; } @media (max-width:720px){ .vf-prixdet{ grid-template-columns:1fr; } } /* --- conseils photo + fiche faune --- */ .voy-photo{ background:var(--creme); } .voy-photo__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,28px); margin-bottom:clamp(40px,5vw,64px); } .voy-conseil{ background:var(--blanc); border-radius:18px; padding:26px 24px; box-shadow:0 14px 40px rgba(0,0,0,.07); } .voy-conseil h3{ font-size:var(--fs-h3); font-family:var(--serif); font-weight:400; margin-bottom:10px; color:var(--noir); } .voy-conseil p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } .voy-faune{ display:grid; grid-template-columns:.9fr 1.1fr; border-radius:22px; overflow:hidden; background:var(--noir); color:var(--blanc); min-height:340px; } .voy-faune__pic{ background:#241d12 center/cover no-repeat; min-height:260px; } .voy-faune__txt{ padding:clamp(28px,3.4vw,56px); align-self:center; } .voy-faune__txt .eyebrow{ color:var(--jaune); } .voy-faune__titre{ font-size:clamp(28px,2.8vw,42px); margin:10px 0 16px; color:var(--blanc); } .voy-faune__txt p{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); } @media (max-width:900px){ .voy-faune{ grid-template-columns:1fr; } .voy-photo__grid{ grid-template-columns:1fr 1fr; } } /* ========================================================================== FICHE VOYAGE v2 (voyage.html) — structure inspirée de la fiche Eventeam de Fix, couleurs/typo Objectif Nature. Préfixe vf-. Règle lisibilité respectée partout. ========================================================================== */ /* --- hero photo + titre CENTRÉ --- */ .vf-hero{ position:relative; min-height:62vh; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--blanc); background:#241d12; padding:calc(var(--nav-h) + 40px) 0 120px; } .vf-hero__bg{ position:absolute; inset:-30% 0 0 0; background:#241d12 center/cover no-repeat; will-change:transform; } /* déborde en haut : la parallaxe (translateY) ne découvre jamais de bord */ .vf-hero__veil{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(14,14,14,.45) 0%, rgba(14,14,14,.25) 45%, rgba(14,14,14,.72) 100%); } .vf-hero__inner{ position:relative; z-index:1; } .vf-hero__eyebrow{ color:var(--jaune); } .vf-hero__title{ font-size:var(--fs-title); line-height:1.02; margin-top:14px; color:var(--blanc); } /* --- CARTE DOUBLE chevauchant le hero --- */ .vf-duo__wrap{ position:relative; z-index:5; margin-top:-90px; } .vf-duo{ display:grid; grid-template-columns:1.05fr .95fr; border-radius:22px; overflow:hidden; box-shadow:0 34px 80px -24px rgba(0,0,0,.5); } .vf-duo__left{ background:var(--blanc); color:var(--noir); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; } /* colonne : le CTA se cale en bas (retour Fix 06/07) */ .vf-duo__label{ font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--noir-50); margin-bottom:18px; } /* rencontres en GRILLE 2 colonnes, grosses icônes (retour Fix 03/07) */ .vf-rencontres{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; } .vf-rencontres li{ display:flex; align-items:center; gap:16px; padding:10px 12px; background:var(--creme); border:1px solid var(--creme-2); border-radius:14px; font-size:var(--fs-small); line-height:1.35; color:var(--noir); } .vf-rencontres em{ display:block; font-style:normal; font-size:var(--fs-label); color:var(--noir-50); margin-top:3px; } .vf-rencontre__ico{ width:64px; height:64px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--blanc); border:1.5px solid rgba(14,14,14,.14); color:var(--noir); } .vf-rencontre__ico svg{ width:48px; height:48px; } /* LIEN nom de pays / animal -> sa fiche. Composant commun (.on-lien) : garde la couleur du texte, soulignement POINTILLÉ discret VISIBLE en permanence (donc perceptible aussi au tactile, sans hover), passe en soulignement JAUNE plein au survol. À poser sur tout nom d'entité cliquable du site. */ .on-lien, .vf-rencontre__lien{ color:inherit; text-decoration:none; cursor:pointer; border-bottom:1.5px dotted color-mix(in srgb, currentColor 45%, transparent); transition:border-color .2s, border-bottom-style .2s; } .on-lien:hover, .vf-rencontre__lien:hover{ border-bottom:1.5px solid var(--jaune); } .on-lien:focus-visible, .vf-rencontre__lien:focus-visible{ outline:2px solid var(--jaune); outline-offset:2px; border-radius:1px; } @media (max-width:640px){ .vf-rencontres{ grid-template-columns:1fr; } } /* volet droit SOMBRE -> textes CLAIRS */ .vf-duo__right{ background:var(--noir); color:var(--blanc); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; gap:10px; } .vf-duo__duree{ font-size:var(--fs-h3); color:rgba(255,255,255,.85); } .vf-duo__duree strong{ color:var(--blanc); } .vf-duo__dates{ font-size:var(--fs-small); color:rgba(255,255,255,.6); } .vf-duo__prix{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); margin:10px 0 4px; } .vf-duo__prix strong{ display:block; font-size:clamp(34px,3vw,46px); font-weight:800; letter-spacing:-.5px; color:var(--jaune); text-transform:none; } .vf-duo__prix span{ text-transform:none; letter-spacing:0; } .vf-duo__head{ font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--jaune); margin-top:12px; border-top:1px solid rgba(255,255,255,.14); padding-top:16px; } .vf-avantages{ display:flex; flex-direction:column; gap:8px; } .vf-avantages li{ font-size:var(--fs-small); line-height:1.45; color:rgba(255,255,255,.85); padding-left:22px; position:relative; } .vf-avantages li::before{ content:"✓"; position:absolute; left:0; color:var(--jaune); font-weight:700; } /* les DEUX CTA de la carte duo : CÔTE À CÔTE et le groupe CENTRÉ dans le volet blanc (demande Fix 09/07). « Poser une option » (jaune) prime, « Échanger » (filet) à côté. Retombe en pile sous 560px. */ .vf-duo__actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:12px; margin-top:auto; padding-top:22px; } /* les 2 CTA côte à côte : même ligne, aligné (le margin-top hérité de .vf-duo__contact est neutralisé). */ .vf-duo__actions .vf-duo__contact{ margin-top:0; } @media (max-width:560px){ .vf-duo__actions{ flex-direction:column; } .vf-duo__actions .btn{ width:100%; max-width:300px; } } .vf-esprit__option{ margin:10px 0 0 12px; color:var(--blanc); } /* --- bande réassurance pictos — EN BAS de la fiche (Fix 06/07) : une COLONNE par engagement, picto AU-DESSUS du texte, fond beige (avant-dernière/dernière zone avant footer) --- */ .vf-reassurance{ background:var(--beige-footer); } .vf-reassurance__row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:22px; padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); } .vf-reassurance__row span{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; font-size:var(--fs-label); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--noir); } .vf-reassurance__row svg{ width:36px; height:36px; fill:var(--jaune-d); flex:0 0 auto; } @media (max-width:900px){ .vf-reassurance__row{ grid-template-columns:repeat(2, 1fr); } } /* --- barre d'onglets (ancres) --- */ /* barre d'onglets STICKY sous le header (retour Fix 03/07) + FILET JAUNE de progression de lecture */ .vf-tabs{ background:var(--noir); position:sticky; top:var(--header-h, 112px); z-index:300; margin-top:80px; } /* espace au-dessus doublé (Fix 10/07) */ .vf-tabs__bar{ display:none; } /* filet jaune SUPPRIMÉ (Fix 10/07 : nouvelle mécanique scrollspy simple) */ .vf-tabs__inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 34px; padding-top:16px; padding-bottom:16px; } /* onglets CENTRÉS */ /* onglets tous en BLANC par défaut ; SEULE la section active (scroll) passe en JAUNE. */ .vf-tabs a{ font-size:var(--fs-small); font-weight:600; letter-spacing:.02em; color:var(--blanc); padding:4px 0; position:relative; transition:color .25s var(--ease); } .vf-tabs a:hover{ color:var(--jaune); } .vf-tabs a.is-active, .vf-tabs a.is-active:hover{ color:var(--jaune); } .vf-tabs__contact{ color:var(--blanc); } /* --- séjour : timeline + sidebar --- */ .vf-sejour{ background:var(--creme); } .vf-sejour__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,3.4vw,64px); align-items:start; } /* timeline verticale : trait continu + pastilles jour */ .vf-timeline{ position:relative; padding-left:8px; } .vf-timeline::before{ content:""; position:absolute; left:56px; top:10px; bottom:10px; width:2px; background:rgba(14,14,14,.14); } .vf-jour{ position:relative; display:flex; gap:26px; padding:0 0 34px; } /* étapes du parcours INVERSÉES (Fix 09/07) : pastille jour sur fond BLANC + texte noir + fine bordure (sinon invisible sur le beige), titre d'étape en JAUNE. */ .vf-jour__num{ flex:0 0 96px; align-self:flex-start; text-align:center; position:relative; z-index:1; background:var(--blanc); color:var(--noir); border:1px solid var(--creme-2); border-radius:999px; padding:8px 0; font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .vf-jour__body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px); color:var(--jaune-d); margin-bottom:8px; } .vf-jour__body p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } /* bloc RENCONTRE mis en avant (équivalent des "jours de match" de la fiche Eventeam) */ /* bloc RENCONTRE : couleurs INVERSÉES (Fix 09/07) - fond CLAIR, texte foncé, titre en JAUNE (--jaune-d pour la lisibilité sur clair). La pastille jour passe en noir pour ressortir sur le fond clair. */ .vf-jour--rencontre .vf-jour__num{ background:var(--blanc); color:var(--noir); } .vf-jour--rencontre .vf-jour__body{ background:var(--blanc); color:var(--noir); border-radius:18px; padding:22px 26px; flex:1; box-shadow:0 18px 44px -16px rgba(0,0,0,.18); border:1px solid var(--creme-2); } .vf-jour--rencontre .vf-jour__body h3{ color:var(--jaune-d); } .vf-jour--rencontre .vf-jour__body p{ color:var(--noir-50); } .vf-jour__tag{ display:inline-flex; align-items:center; gap:9px; margin-bottom:12px; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jaune-d); } .vf-jour__tag svg{ width:24px; height:24px; fill:var(--jaune-d); } .vf-jour__suggestion{ margin-top:12px; padding:12px 16px; border-left:3px solid var(--jaune-d); background:rgba(14,14,14,.05); border-radius:0 10px 10px 0; } .vf-jour--rencontre .vf-jour__suggestion strong{ color:var(--jaune-d); } /* sidebar (sticky douce : n'entrave pas le scroll, suit la colonne) */ .vf-side{ position:sticky; top:calc(var(--header-h, 112px) + 20px); display:flex; flex-direction:column; gap:20px; } .vf-box{ background:var(--blanc); border-radius:18px; padding:24px 24px 26px; box-shadow:0 14px 40px rgba(0,0,0,.08); } .vf-box h4{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--noir-50); margin-bottom:14px; } .vf-box h4:not(:first-child){ margin-top:20px; } .vf-box__liste{ gap:9px; font-size:14px; } .vf-box__opts{ display:flex; flex-direction:column; gap:10px; font-size:var(--fs-small); color:var(--noir); } .vf-box__opts li{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--creme-2); padding-bottom:10px; } .vf-box__opts li:last-child{ border-bottom:none; padding-bottom:0; } .vf-box__opts strong{ color:var(--jaune-d); white-space:nowrap; } /* carte du parcours : LEAFLET fond CARTO light (03/07) — zoom natif, molette off */ #vfMap{ height:380px; border-radius:12px; overflow:hidden; z-index:0; } /* tooltips étapes : Inter, fond crème, sans flèche */ .vf-tip{ background:var(--creme); border:1px solid rgba(14,14,14,.15); border-radius:8px; color:var(--noir); font-family:var(--sans); font-size:12px; font-weight:600; padding:3px 8px; box-shadow:0 4px 10px -4px rgba(0,0,0,.25); } .vf-tip::before{ display:none; } /* pas de flèche */ .vf-tip--on{ background:var(--jaune); border-color:var(--jaune-d); font-weight:800; } /* boutons +/− aux couleurs du site */ .leaflet-control-zoom a{ color:var(--noir) !important; border-radius:8px !important; } .leaflet-control-zoom a:hover{ background:var(--jaune) !important; } .leaflet-container{ font-family:var(--sans); } .vf-map__note{ margin-top:10px; font-size:var(--fs-label); color:var(--noir-50); min-height:2.6em; } /* --- esprit du voyage (fond sombre -> textes clairs) --- */ .vf-esprit{ background:var(--noir); color:var(--blanc); } .vf-esprit__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,72px); align-items:center; } .vf-esprit .eyebrow{ color:var(--jaune); } .vf-esprit__titre{ font-size:clamp(32px,3.4vw,52px); line-height:1.05; margin:12px 0 20px; color:var(--blanc); } .vf-esprit__txt p{ font-size:var(--fs-body); line-height:1.7; color:rgba(255,255,255,.82); margin-bottom:16px; } .vf-esprit__txt strong{ color:var(--blanc); } .vf-esprit__pic{ aspect-ratio:3/2; border-radius:22px; background:#241d12 center/cover no-repeat; box-shadow:0 28px 60px -20px rgba(0,0,0,.6); } /* --- contact spécialiste --- */ .vf-contact{ background:var(--beige-footer); } /* dernière section avant le footer (règle transition) */ .vf-contact__grid{ display:grid; grid-template-columns:.4fr 1fr; gap:clamp(28px,4vw,72px); align-items:center; } .vf-contact__spec{ text-align:center; } .vf-contact__pic{ width:min(220px,60%); aspect-ratio:1; border-radius:50%; margin:0 auto 18px; background:#241d12 center/cover no-repeat; border:4px solid var(--jaune); } .vf-contact__nom{ font-size:clamp(26px,2.4vw,36px); color:var(--noir); } .vf-contact__role{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--noir-50); margin-top:4px; } .vf-contact__txt .eyebrow{ color:var(--jaune-d); } .vf-contact__titre{ font-size:clamp(32px,3.4vw,52px); color:var(--noir); margin:10px 0 18px; } .vf-contact__txt > p{ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); } .vf-contact__txt strong{ color:var(--noir); } .vf-contact__actions{ display:flex; flex-wrap:wrap; gap:16px; margin:26px 0 14px; } .vf-contact__ghost{ color:var(--noir); } .vf-contact__dispo{ font-size:var(--fs-label); color:var(--noir-50); } @media (max-width:980px){ .vf-duo, .vf-sejour__grid, .vf-esprit__grid, .vf-contact__grid{ grid-template-columns:1fr; } .vf-side{ position:static; } .vf-timeline::before{ left:48px; } .vf-duo__wrap{ margin-top:-60px; } } /* --- infos pratiques en BLOCS à picto (remplace les accordéons — demande Fix 03/07) --- */ .vf-infos__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:clamp(16px,1.8vw,28px); } .vf-info{ background:var(--blanc); border-radius:18px; padding:30px 24px 28px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.07); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .vf-info:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.12); } .vf-info__ico{ width:64px; height:64px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:var(--jaune); color:var(--noir); } .vf-info__ico svg{ width:30px; height:30px; fill:currentColor; } .vf-info h3{ font-family:var(--serif); font-weight:400; font-size:var(--fs-h3); color:var(--noir); margin-bottom:10px; } .vf-info p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } .vf-info strong{ color:var(--noir); } /* infos pratiques réelles (Nicolas 07/15) : 2 COLONNES LARGES équilibrées (répartition JS des rubriques dans la colonne la moins chargée -> les gros pavés Santé/Passeport se retrouvent séparés). */ #vfInfosGrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,28px); align-items:start; } .vf-info-col{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,28px); } #vfInfosGrid .vf-info{ text-align:left; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:26px 28px; } #vfInfosGrid .vf-info__ico{ grid-row:span 2; width:52px; height:52px; margin:0; align-self:start; } #vfInfosGrid .vf-info__ico svg{ width:26px; height:26px; } #vfInfosGrid .vf-info h3{ align-self:center; margin:0; } #vfInfosGrid .vf-info p{ grid-column:2; margin:0; word-break:break-word; } /* URLs longues ne débordent pas */ #vfInfosGrid .vf-info a{ color:var(--jaune-d); text-decoration:underline; } /* troncature « Lire la suite » : version courte par défaut, version complète cachée ; inversé si .is-open */ #vfInfosGrid .vf-info__full{ display:none; } #vfInfosGrid .vf-info__txt.is-open .vf-info__short{ display:none; } #vfInfosGrid .vf-info__txt.is-open .vf-info__full{ display:inline; } #vfInfosGrid .vf-info__more{ grid-column:2; justify-self:start; margin-top:8px; padding:0; background:none; border:0; cursor:pointer; font:inherit; font-size:var(--fs-label); font-weight:700; color:var(--jaune-d); text-decoration:underline; } #vfInfosGrid .vf-info__more:hover{ color:var(--noir); } @media (max-width:720px){ #vfInfosGrid{ grid-template-columns:1fr; } } /* conseils photo : picto en tête de bloc (même pastille que les infos pratiques), blocs centrés */ .voy-conseil{ text-align:center; } .voy-conseil .vf-info__ico{ margin-bottom:16px; } .vf-esprit__cta{ margin-top:10px; } /* CTA sous le texte "esprit du voyage" */ /* volet noir de la carte double : accompagnateur + difficulté (fond sombre -> textes clairs) composant accompagnateur unifié (.on-guide--md) - garde sa bordure jaune propre (identité carte double) */ .vf-duo__guide{ flex-wrap:wrap; padding:14px 0 4px; border-top:1px solid rgba(255,255,255,.14); margin-top:6px; } .vf-duo__guide .on-guide__pic{ border-color:var(--jaune); } /* ========================================================================== PAGES ÉDITORIALES (préfixe pg-) — Présentation & sous-pages Qui sommes-nous. ========================================================================== */ .vf-hero--page{ min-height:52vh; padding-bottom:40px; } /* hero de page intérieure, plus court */ /* hero offres : contenu en colonne pour pouvoir POUSSER la pilule « prochains départs » vers le bas */ .vf-hero--page .vf-hero__inner:has(.of-toggle){ display:flex; flex-direction:column; align-items:center; min-height:calc(52vh - 80px); } /* HERO VIDÉO de page intérieure (retour Fix, page offres) : vidéo de fond CENTRÉE dans le cadre, oiseaux calés EN HAUT À DROITE (comme le hero planisphère de l'accueil). Garde la hauteur .vf-hero--page. */ .vf-hero--video .hero__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .vf-hero--video .hero__clouds{ position:absolute; top:0; right:0; left:auto; z-index:3; pointer-events:none; width:clamp(140px,15%,240px); height:auto; object-fit:contain; object-position:right top; filter:url(#greenKey); opacity:.95; transition:opacity .6s var(--ease); } /* voile plus SOMBRE sur le hero vidéo (retour Fix : « foncer un peu ») */ .vf-hero--video .vf-hero__veil{ background:linear-gradient(to bottom, rgba(14,14,14,.62) 0%, rgba(14,14,14,.42) 45%, rgba(14,14,14,.80) 100%); } /* bloc éditorial texte + photo */ .pg-bloc{ background:var(--creme); } /* le padding vient de section[id] */ .pg-bloc__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,72px); align-items:center; } .pg-bloc__titre{ text-align:left; margin:10px 0 22px; } .pg-bloc__txt p:not(.eyebrow){ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); margin-bottom:16px; } .pg-bloc__txt strong{ color:var(--noir); } .pg-bloc__pic{ aspect-ratio:3/2; border-radius:22px; background:#241d12 center/cover no-repeat; box-shadow:0 28px 60px -20px rgba(0,0,0,.35); } /* grille des 6 premières destinations */ .pg-dest{ background:var(--blanc); } .pg-dest__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:clamp(14px,1.6vw,24px); } .pg-dest__item{ text-align:center; font-size:var(--fs-small); font-weight:600; color:var(--noir); transition:transform .3s var(--ease); } .pg-dest__item:hover{ transform:translateY(-6px); } .pg-dest__pic{ display:block; aspect-ratio:1; border-radius:50%; margin-bottom:12px; background:#241d12 center/cover no-repeat; border:3px solid var(--jaune); box-shadow:0 14px 34px -12px rgba(0,0,0,.35); } /* jalons */ .pg-jalons{ background:var(--creme); } .pg-jalons__row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:clamp(16px,1.8vw,28px); } .pg-jalon{ background:var(--blanc); border-radius:18px; padding:26px 24px; box-shadow:0 14px 40px rgba(0,0,0,.07); } .pg-jalon__an{ display:block; font-size:clamp(38px,3.4vw,54px); color:var(--jaune-d); line-height:1; margin-bottom:12px; } .pg-jalon p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } /* FRISE CHRONOLOGIQUE (présentation « Le chemin parcouru » — retour Fix 06/07) : ligne horizontale continue traversant les étapes + points jaunes, année en serif au-dessus, texte dessous. En mobile : pile verticale avec filet jaune à gauche. */ .frise{ display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(14px,1.8vw,28px); } .frise__item{ display:grid; grid-template-rows:auto 30px 1fr; text-align:center; } .frise__an{ font-size:clamp(38px,3.4vw,54px); color:var(--jaune-d); line-height:1; align-self:end; } .frise__track{ position:relative; } .frise__track::before{ content:""; position:absolute; top:50%; height:2px; transform:translateY(-50%); left:calc(clamp(14px,1.8vw,28px) / -2); right:calc(clamp(14px,1.8vw,28px) / -2); background:rgba(14,14,14,.16); } .frise__item:first-child .frise__track::before{ left:50%; } .frise__item:last-child .frise__track::before{ right:50%; } .frise__track::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:15px; height:15px; border-radius:50%; background:var(--jaune); border:3px solid var(--blanc); box-shadow:0 0 0 1.5px rgba(14,14,14,.18); } /* texte descriptif STANDARD (retour Fix 06/07 : couleur forcée, lisible sur crème, taille courante) */ .frise__item p{ font-size:var(--fs-body); line-height:1.7; color:var(--noir); margin-top:10px; } @media (max-width:820px){ .frise{ grid-template-columns:1fr; gap:22px; } .frise__item{ grid-template-rows:auto 1fr; text-align:left; border-left:2px solid var(--jaune); padding-left:18px; } .frise__track{ display:none; } } /* CTA de fin de page (beige footer — règle transition) */ .pg-suite{ background:var(--beige-footer); text-align:center; } .pg-suite__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:28px; } @media (max-width:900px){ .pg-bloc__grid{ grid-template-columns:1fr; } } /* ---- PAGE CHARTE : 8 engagements en 2 rangées de 4 (jamais 6+2) ---- */ .pg-jalons__row--4{ grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)); } /* ---- MANIFESTE (intro Actions nature, Fix 06/07) : grande accroche serif à gauche, développement + repères factuels (badges informatifs, angles droits) à droite ---- */ .manifeste{ background:var(--creme); } .manifeste__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,80px); align-items:start; } .manifeste__lede{ font-weight:400; font-size:clamp(30px,3.2vw,48px); line-height:1.18; color:var(--noir); margin-top:14px; } .manifeste__lede em{ font-style:italic; color:var(--jaune-d); } .manifeste__txt{ padding-top:44px; } /* cale le paragraphe sous le niveau de l'eyebrow */ .manifeste__txt > p:first-child{ font-size:var(--fs-body); line-height:1.75; color:var(--noir); } .manifeste__stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .manifeste__stats span{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--noir); border:1px solid rgba(14,14,14,.28); border-radius:3px; padding:8px 12px; } /* angles droits : informatif */ @media (max-width:900px){ .manifeste__grid{ grid-template-columns:1fr; } .manifeste__txt{ padding-top:0; } } /* ---- PAGE ACTIONS NATURE : blocs pg-bloc ALTERNÉS (fond blanc/crème, photo G/D) ---- */ .pg-bloc--blanc{ background:var(--blanc); } .pg-bloc__grid--rev{ grid-template-columns:.9fr 1.1fr; } .pg-bloc__grid--rev .pg-bloc__pic{ order:-1; } @media (max-width:900px){ .pg-bloc__grid--rev{ grid-template-columns:1fr; } .pg-bloc__grid--rev .pg-bloc__pic{ order:0; } /* mobile : texte puis photo, comme les blocs normaux */ } /* LOGO officiel de l'association (demande Fix 06/07) : carte blanche au-dessus du nom. Masqué automatiquement (onerror) tant que le fichier n'existe pas (récolte en cours). */ .pg-asso__logo{ display:block; height:72px; width:auto; max-width:260px; object-fit:contain; background:var(--blanc); border:1px solid var(--creme-2); border-radius:8px; padding:10px 18px; margin-bottom:18px; box-sizing:content-box; } /* le logo fait office de titre (nom texte masqué, fallback si logo cassé) */ .pg-asso__logo--sombre{ background:var(--noir); border-color:var(--noir); } /* logos blancs (Wildlife Angel, WildCRU) */ /* lien vers le site de l'association = BOUTON (Fix 09/07) : .btn gere la forme/couleur/anim pattes, on ajoute juste l'espace au-dessus. */ .pg-asso__site{ margin-top:18px; } /* eyebrow des blocs ASSO (ceux qui ont un logo) = TITRE plus GROS (Fix 09/07). :has() cible uniquement actions-nature, pas les blocs pg-bloc de presentation/equipe. */ .pg-bloc:has(.pg-asso__logo) .eyebrow{ font-size:clamp(20px, 2vw, 26px); letter-spacing:.04em; margin-bottom:18px; } /* PASTILLE MODE VOYAGE — Circuit (N étapes) / Séjour (1 lieu), retour Fix 06/07. Sur la ligne date des vignettes ; couleurs selon le fond de la carte (règle lisibilité). */ .trip__mode{ float:right; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.3); border-radius:3px; padding:2px 9px; } /* angles DROITS : badge informatif, pas cliquable (règle Fix 06/07) */ .trip--light .trip__mode, .stackv__caption .trip__mode{ color:var(--noir-50); border-color:rgba(14,14,14,.2); } /* ========================================================================== NOS OFFRES (préfixe of-) : catalogue filtrable + switch grille/liste (Fix 07/07). Barre de filtres COMPACTE sur fond NOIR (contraste fort = « plus visible »), pilules claires + pictos du sprite familles (#ico-*), bouton « Prochains départs » jaune mis en avant. Espaces verticaux resserrés. Vue liste : CTA collé à droite. ========================================================================== */ /* NB : ces sections portent un id (#departs/#liste) -> la règle globale section[id]{padding:clamp(70..130px)} (spécificité 0,1,1) les gonflerait verticalement. On la neutralise avec une spécificité supérieure (0,2,0 via .site-content) : ce sont des barres/listes, pas des sections héro. */ .site-content .of-filtres{ padding-top:0; padding-bottom:0; } .site-content .of-listing{ padding-top:16px; padding-bottom:0; } .of-filtres{ position:sticky; top:var(--header-h, 112px); z-index:300; background:var(--noir); border-bottom:3px solid var(--jaune); } /* barre filtres PLEINE LARGEUR (retour Fix) : déborde le max-width standard du .container + gutter réduit, pour que tous les composants tiennent confortablement sur une ligne. */ .of-filtres > .container{ max-width:none; padding-inline:clamp(20px,3vw,44px); } .of-filtres__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding-top:12px; padding-bottom:12px; } /* filtres CENTRÉS dans la page (retour Fix) */ /* SWITCH « Prochains départs » (Nicolas 07/15) — PILULE en bas du hero, près des filtres. Désactivé = BLANC ; activé = JAUNE (retour Fix 07/15). Texte noir dans les deux cas. */ .vf-hero--page .of-toggle{ margin-top:auto; } /* pousse la pilule vers le BAS du hero */ .of-toggle{ display:inline-flex; align-items:center; gap:12px; margin-top:56px; cursor:pointer; background:var(--blanc); color:var(--noir); border:2px solid var(--blanc); border-radius:999px; padding:16px 27px; font-weight:700; user-select:none; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .of-toggle:hover{ background:var(--jaune); border-color:var(--jaune); } .of-toggle__input{ position:absolute; opacity:0; width:0; height:0; } /* pastille-témoin ON/OFF à gauche du libellé */ .of-toggle__track{ position:relative; flex:0 0 auto; width:44px; height:24px; border-radius:999px; background:rgba(14,14,14,.14); border:1.5px solid rgba(14,14,14,.3); transition:background .25s var(--ease), border-color .25s var(--ease); } .of-toggle__knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--noir); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .25s var(--ease), background .25s; } .of-toggle__lbl{ font-size:var(--fs-small); font-weight:700; } .of-toggle__n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--noir); color:var(--blanc); font-size:12px; font-weight:700; vertical-align:middle; } .of-toggle__n[hidden]{ display:none; } /* ACTIF (coché) : la pilule passe en JAUNE (texte noir), témoin à droite. */ .of-toggle:has(.of-toggle__input:checked){ background:var(--jaune); border-color:var(--jaune); } .of-toggle__input:checked + .of-toggle__track{ background:rgba(14,14,14,.24); border-color:var(--noir); } .of-toggle__input:checked + .of-toggle__track .of-toggle__knob{ transform:translateX(20px); } .of-toggle:has(.of-toggle__input:checked) .of-toggle__n{ background:var(--noir); color:var(--jaune); } .of-toggle__input:focus-visible + .of-toggle__track{ outline:2px solid var(--noir); outline-offset:3px; } /* ========================================================================== CHARTE FILTRES UNIFIÉE (DA — Fix 07/07 : mêmes composants graphiques sur TOUT le site). Bouton de filtre à CHOIX UNIQUE, partagé par accompagnateurs (.gd-fbtn) / récits (.rc-fbtn). Même forme (chip blanche coins arrondis 10px), même typo (--fs-small/600), mêmes états (repos blanc · hover bord jaune · actif fond jaune). ========================================================================== */ .gd-fbtn, .rc-fbtn{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small); font-weight:600; letter-spacing:0; color:var(--noir); background:var(--blanc); border:1.5px solid transparent; border-radius:10px; padding:9px 15px; cursor:pointer; transition:border-color .2s, background .2s, color .2s; } .gd-fbtn:hover, .rc-fbtn:hover{ border-color:rgba(244,183,33,.5); } .gd-fbtn.is-on, .rc-fbtn.is-on{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); } /* ==== CHIPS OUVRABLES (refonte Fix 07/07 : composant graphique, plus de selects « bateau ») ==== */ .of-chip{ position:relative; } .of-chip__btn{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small); font-weight:600; color:var(--noir); background:var(--blanc); border:1.5px solid transparent; border-radius:10px; padding:9px 13px; cursor:pointer; transition:border-color .2s, background .2s; } .of-chip__btn:hover{ border-color:rgba(244,183,33,.5); } .of-chip.is-open .of-chip__btn{ border-color:var(--jaune); } .of-chip.is-active .of-chip__btn{ background:var(--jaune); } /* filtre appliqué -> chip jaune */ .of-chip .of-pic{ width:18px; height:18px; flex:0 0 auto; fill:currentColor; } .of-chip__lbl{ white-space:nowrap; } .of-chip__val{ font-weight:700; white-space:nowrap; } .of-chip__car{ width:11px; height:7px; flex:0 0 auto; transition:transform .2s; } .of-chip.is-open .of-chip__car{ transform:rotate(180deg); } /* PANNEAU déroulant (popover) sous la chip */ .of-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:220px; background:var(--blanc); border:1px solid rgba(14,14,14,.1); border-radius:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,.4); padding:12px; } .of-pop[hidden]{ display:none; } /* animation d'ouverture */ .of-chip.is-open .of-pop{ animation:ofPop .18s var(--ease) both; } @keyframes ofPop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } /* option générique (pilule) */ .of-opt{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small); font-weight:600; color:var(--noir); background:var(--creme); border:1.5px solid transparent; border-radius:999px; padding:8px 14px; margin:3px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .of-opt:hover{ border-color:var(--jaune-d); } .of-opt.is-sel{ background:var(--jaune); border-color:var(--jaune); } /* panneau ANIMAL : grille de pictos familles */ .of-opt__pic{ width:26px; height:26px; flex:0 0 auto; fill:var(--noir); display:inline-flex; align-items:center; justify-content:center; } .of-opt__pic--all{ color:var(--jaune-d); font-size:18px; } /* option EN LIGNE (1 ligne/item, texte non coupé) — panneaux Destination & Animal */ .of-opt--line{ width:100%; margin:0; justify-content:flex-start; border-radius:8px; background:transparent; white-space:nowrap; font-weight:500; } .of-opt--line:hover{ background:var(--creme); border-color:transparent; } .of-opt--line.is-sel{ background:var(--jaune); border-color:var(--jaune); font-weight:700; } /* panneau ANIMAL : 1 colonne, familles alignées */ .of-list--fam{ display:flex; flex-direction:column; gap:2px; min-width:250px; } /* panneau DESTINATION : le SCROLL est porté par le popover entier (of-pop--list) pour que toute sa surface (padding droit inclus) capte la molette — sinon la zone droite ne scrolle pas. */ /* overscroll-behavior:contain -> la molette scrolle la LISTE et ne « fuit » plus vers la page. overflow-x:hidden pour éviter une barre horizontale parasite. */ .of-pop--list{ max-height:340px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } .of-list--pays{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; min-width:420px; } /* panneau DÉPART = CALENDRIER (retour Fix) : 1 bloc/année, 12 mois en 4 col × 3 (lecture verticale). */ .of-cal{ display:flex; flex-direction:column; gap:10px; min-width:360px; } .of-cal__all{ font:inherit; font-size:var(--fs-small); font-weight:700; color:var(--noir); background:var(--creme); border:1.5px solid transparent; border-radius:8px; padding:9px 14px; cursor:pointer; text-align:left; transition:background .15s, border-color .15s; } .of-cal__all:hover{ border-color:var(--jaune-d); } .of-cal__all.is-sel{ background:var(--jaune); border-color:var(--jaune); } .of-cal__titre{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; color:var(--jaune-d); text-transform:uppercase; margin:0 0 6px 2px; } /* 4 colonnes × 3 rangées, remplies EN COLONNE (jan/fév/mar en col 1) */ .of-cal__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:4px; } .of-cal__m{ font:inherit; font-size:var(--fs-label); font-weight:600; color:var(--noir); background:var(--creme); border:1.5px solid transparent; border-radius:7px; padding:8px 6px; cursor:pointer; text-align:center; transition:background .15s, border-color .15s; } .of-cal__m:hover{ border-color:var(--jaune-d); } .of-cal__m.is-sel{ background:var(--jaune); border-color:var(--jaune); font-weight:700; } .of-cal__m.is-empty{ color:var(--noir-50); opacity:.35; cursor:default; background:transparent; } /* GRADUATION niveau (pattes cliquables, inline dans la barre) */ .of-grad{ display:inline-flex; align-items:center; gap:8px; background:var(--blanc); border:1.5px solid transparent; border-radius:10px; padding:8px 13px; cursor:pointer; user-select:none; transition:border-color .2s, background .2s; } .of-grad:hover{ border-color:rgba(244,183,33,.5); } .of-grad.is-active{ background:var(--jaune); } .of-grad__lbl{ font-size:var(--fs-small); font-weight:600; color:var(--noir); } .of-grad__pattes{ display:inline-flex; gap:2px; } /* largeur FIXE (retour Fix) : réserve la place du libellé le plus long (« modéré ») -> le composant ne s'élargit/rétrécit plus au changement de niveau. */ .of-grad__txt{ font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--noir-50); width:56px; text-align:left; } .of-grad.is-active .of-grad__txt{ color:var(--noir); } /* « i » d'info du filtre Niveau + panneau des 3 niveaux (B2, retour Nicolas 18/07) */ .of-grad{ position:relative; } .of-grad__info{ width:18px; height:18px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer; background:var(--creme-2); color:var(--noir); font:700 11px/18px var(--sans); font-style:italic; padding:0; text-align:center; transition:background .15s, color .15s; } .of-grad__info:hover, .of-grad__info[aria-expanded="true"]{ background:var(--noir); color:var(--blanc); } .of-grad.is-active .of-grad__info{ background:rgba(0,0,0,.14); } .of-nivpop{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:min(88vw, 400px); z-index:60; cursor:default; background:var(--blanc); border-radius:14px; padding:16px 18px; box-shadow:0 22px 60px -18px rgba(0,0,0,.45); text-align:left; } .of-nivpop[hidden]{ display:none; } .of-nivpop__ligne{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid rgba(0,0,0,.07); font-size:var(--fs-small); line-height:1.45; color:var(--noir-50); } .of-nivpop__ligne:first-child{ border-top:0; padding-top:0; } .of-nivpop__ligne b{ display:block; color:var(--noir); font-weight:700; } .of-nivpop__pattes{ display:inline-flex; gap:2px; flex:0 0 auto; padding-top:2px; } .of-patte{ width:16px; height:16px; fill:var(--jaune-d); } .of-grad.is-active .of-patte{ fill:var(--noir); } .of-patte.is-off{ fill:var(--noir); opacity:.18; } /* SLIDER budget (inline dans la barre) */ .of-slider{ display:inline-flex; align-items:center; gap:10px; background:var(--blanc); border:1.5px solid transparent; border-radius:10px; padding:8px 14px; transition:border-color .2s, background .2s; } .of-slider.is-active{ border-color:var(--jaune); } .of-slider__lbl{ font-size:var(--fs-small); font-weight:600; color:var(--noir); } .of-slider__range{ -webkit-appearance:none; appearance:none; width:120px; height:4px; border-radius:999px; background:linear-gradient(var(--jaune),var(--jaune)) no-repeat, var(--creme-2); cursor:pointer; } .of-slider__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--noir); border:2px solid var(--jaune); cursor:pointer; } .of-slider__range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--noir); border:2px solid var(--jaune); cursor:pointer; } .of-slider__val{ font-size:var(--fs-label); font-weight:700; color:var(--noir); min-width:88px; text-align:right; } .of-reset{ font:inherit; font-size:var(--fs-small); font-weight:600; color:var(--blanc); background:transparent; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 16px; cursor:pointer; transition:border-color .2s, background .2s, color .2s; } .of-reset:hover{ border-color:var(--jaune); background:var(--jaune); color:var(--noir); } /* variante ICÔNE seule (Nicolas 07/15) : flèche circulaire (esprit reset planisphère) + rotation au survol. Gagne de la place à droite de la barre ; le libellé passe en infobulle (title). */ .of-reset--ico{ width:40px; height:40px; padding:0; display:inline-grid; place-items:center; } .of-reset--ico svg{ width:20px; height:20px; fill:currentColor; } .of-reset--ico:hover svg{ animation:resetSpin .6s var(--ease); } @media (prefers-reduced-motion: reduce){ .of-reset--ico:hover svg{ animation:none; } } /* BARRE D'ÉTAT : compteur + switch — resserrée contre la barre de filtres */ .of-barre{ background:var(--creme); } .of-barre__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; padding-bottom:0; } .of-count{ font-size:var(--fs-body); font-weight:600; color:var(--noir); margin:0; } .of-switch{ display:inline-flex; gap:4px; background:var(--blanc); border:1.5px solid rgba(14,14,14,.12); border-radius:999px; padding:4px; } .of-switch__btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; color:var(--noir-50); background:transparent; border:0; border-radius:999px; padding:8px 16px; cursor:pointer; transition:background .2s, color .2s; } .of-switch__btn svg{ fill:currentColor; } .of-switch__btn.is-on{ background:var(--jaune); color:var(--noir); } /* jaune = actif */ /* LISTING (padding géré par la règle .site-content .of-listing plus haut, cause section[id]) */ .of-listing{ background:var(--creme); } .of-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); } .of-grid .trip{ flex:initial; transition:transform .2s var(--ease), border-color .2s var(--ease), opacity .32s var(--ease); } /* ANIMATION FILTRES offres (retour Fix) : sortie fondu+repli / entrée fondu-stagger (ON_animateGrid) */ .of-grid .trip.is-leaving{ opacity:0; transform:scale(.94); pointer-events:none; } .of-grid .trip.is-entering{ opacity:0; transform:translateY(14px) scale(.97); } @media (prefers-reduced-motion: reduce){ .of-grid .trip.is-leaving, .of-grid .trip.is-entering{ transition:none; transform:none; } } .of-vide{ text-align:center; font-size:var(--fs-body); color:var(--noir-50); padding:60px 0; } .of-reset-inline{ font:inherit; font-size:inherit; color:var(--noir); font-weight:700; text-decoration:underline; background:none; border:0; cursor:pointer; padding:0; } /* VUE LISTE : bandeau horizontal — photo à gauche PLEINE HAUTEUR de carte, infos au centre, CTA « Voir le voyage » dans une colonne dédiée COLLÉE À DROITE et centrée verticalement. Plus de vide sous la photo : la carte prend la hauteur de la photo (align stretch). */ .of-grid--liste{ grid-template-columns:1fr; gap:14px; } .of-grid--liste .trip{ flex-direction:row; align-items:stretch; overflow:hidden; } .of-grid--liste .trip__media{ width:min(34%,300px); flex:none; aspect-ratio:auto; border-radius:20px 0 0 20px; } .of-grid--liste .trip__media::after{ border-radius:20px 0 0 20px; } .of-grid--liste .trip__body{ flex:1; padding:22px 26px; justify-content:center; } .of-grid--liste .trip{ position:relative; } /* COLONNE DROITE (vue liste, Nicolas 07/15) : bouton « Voir le voyage » + à sa GAUCHE, la pile ÉTAT · DESTINATION/CIRCUIT · DIFFICULTÉ (déplacés là par reorderListe() dans offres.js). */ .of-grid--liste .trip__foot{ position:absolute; top:0; right:0; height:100%; margin:0; padding:0 26px 0 24px; display:flex; align-items:center; gap:24px; } .of-grid--liste .trip__body{ padding-right:340px; } /* réserve la colonne droite (pile + CTA) */ /* la pile des 3 infos, empilée verticalement + SÉPARATEUR à sa DROITE (entre infos et bouton) */ .trip__infos{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; padding-right:24px; border-right:1px solid rgba(14,14,14,.12); } /* les 3 éléments sortent de leur position absolue d'origine -> flux normal dans la pile */ .of-grid--liste .trip__infos > *{ position:static !important; inset:auto !important; transform:none !important; margin:0 !important; float:none !important; } /* HAUTEUR HARMONISÉE des 3 badges (état / destination / difficulté) : même hauteur 30px. */ .of-grid--liste .trip__infos .trip__tag, .of-grid--liste .trip__infos .trip__mode, .of-grid--liste .trip__infos .trip__diff{ display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:9px; } .of-grid--liste .trip__infos .trip__tag::after, .of-grid--liste .trip__infos .trip__tag::before{ display:none; } /* état : garde sa couleur (le tag a déjà son fond coloré vert/rouge/orange) */ .of-grid--liste .trip__infos .trip__tag{ font-size:11px; font-weight:700; } /* destination/circuit + difficulté : fond neutre clair (Fix 07/15 : plus de fond noir) */ .of-grid--liste .trip__infos .trip__mode, .of-grid--liste .trip__infos .trip__diff{ background:var(--creme-2); box-shadow:none; border:0; } .of-grid--liste .trip__infos .trip__diff svg{ width:16px; height:16px; fill:var(--jaune); } /* sur fond clair : pattes NON remplies en gris foncé (plus lisibles que le blanc translucide) */ .of-grid--liste .trip__infos .trip__diff svg.is-off{ fill:var(--noir); opacity:.28; } @media (max-width:900px){ .of-grid, .of-grid--liste{ grid-template-columns:1fr; } .of-grid--liste .trip{ flex-direction:column; } .of-grid--liste .trip__media{ width:auto; aspect-ratio:3/2; border-radius:20px 20px 0 0; } .of-grid--liste .trip__media::after{ border-radius:20px 20px 0 0; } .of-grid--liste .trip__body{ padding:22px 24px 20px; } .of-grid--liste .trip__foot{ position:static; height:auto; padding:16px 0 0; border-left:0; border-top:1px solid rgba(14,14,14,.08); justify-content:center; } .of-grid--liste .trip__body{ padding-right:24px; } .of-barre__inner{ flex-wrap:wrap; } } /* ========================================================================== ACCOMPAGNATEURS (préfixe gd-) : 33 guides réels, grille de portraits. ⚠️ AUCUN obturateur (classes .gd-*, jamais .eq-carte__pic / .pg-dest__pic). ========================================================================== */ /* intro (retour Fix) : texte LARGE, marges G/D minimes -> moins de lignes -> bandeau PLUS BAS. Titre non bridé (tient sur 2 lignes) + titre un cran plus petit ; paragraphe pleine largeur. */ /* intro sur FOND NOIR (retour Fix) comme la barre de filtres — texte clair (règle lisibilité) */ .gd-intro{ background:var(--noir); text-align:center; } .site-content .gd-intro{ padding-top:clamp(40px,4.5vw,64px); padding-bottom:clamp(28px,3vw,44px); } .gd-intro__inner{ max-width:none; margin:0 auto; } /* marges G/D minimes (retour Fix) : le texte prend toute la largeur du conteneur */ .gd-intro .eyebrow--dark{ color:var(--jaune); } /* eyebrow en jaune sur le noir */ /* titre sur UNE seule ligne (retour Fix) : taille réduite + nowrap desktop (wrap conservé en petit écran) */ .gd-intro__inner .sec-title{ font-size:clamp(26px,3.4vw,46px); line-height:1.1; color:var(--blanc); white-space:nowrap; } .gd-intro__txt{ font-size:var(--fs-body); color:rgba(255,255,255,.82); margin-top:14px; line-height:1.5; max-width:none; } /* marges G/D RÉDUITES (retour Fix) : l'intro déborde le max-width standard du .container -> texte plus large */ .gd-intro .container{ max-width:1720px; padding-inline:clamp(20px,3vw,44px); } @media (max-width:820px){ .gd-intro__inner .sec-title{ white-space:normal; } } /* barre filtres par zone (sticky, mêmes pilules que la page offres) */ .gd-barre{ position:sticky; top:var(--header-h, 112px); z-index:300; background:var(--noir); } .site-content .gd-barre{ padding-top:0; padding-bottom:0; } /* filtres CENTRÉS (retour Fix) : le groupe de filtres est centré ; le compteur passe en absolu à droite pour ne pas décaler le centrage. */ .gd-barre__inner{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; } .gd-filtres{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .gd-count{ position:absolute; right:0; top:50%; transform:translateY(-50%); } @media (max-width:820px){ .gd-count{ position:static; transform:none; width:100%; text-align:center; } } .gd-count{ font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,.75); margin:0; } /* GRILLE des portraits */ .gd-listing{ background:var(--creme); } .site-content .gd-listing{ padding-top:26px; padding-bottom:0; } .gd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); } .gd-carte{ display:block; color:inherit; text-decoration:none; /* carte = lien vers la fiche accompagnateur */ background:var(--blanc); border-radius:16px; overflow:hidden; box-shadow:0 14px 40px -20px rgba(0,0,0,.35); transition:box-shadow .2s var(--ease), opacity .32s var(--ease), transform .38s var(--ease); } .gd-carte:hover{ box-shadow:0 22px 54px -22px rgba(0,0,0,.45); } /* pas de remontée (retour Fix) — juste l'ombre */ /* lignes/portraits d'accompagnateur CLIQUABLES (data-guide) -> fiche accompagnateur. */ [data-guide]{ cursor:pointer; } .trip__guide[data-guide]:hover strong, .voy-table__guide[data-guide]:hover, .on-guide[data-guide]:hover strong{ color:var(--jaune-d); } /* ANIMATION FILTRES (retour Fix) : sortie (fondu + léger repli) puis entrée en fondu/stagger. La réorganisation des cartes restantes est fluidifiée par transition:transform (FLIP en JS). */ .gd-carte.is-leaving{ opacity:0; transform:scale(.92); pointer-events:none; } .gd-carte.is-entering{ opacity:0; transform:translateY(14px) scale(.96); } @media (prefers-reduced-motion: reduce){ .gd-carte, .gd-carte.is-leaving, .gd-carte.is-entering{ transition:none; transform:none; } } /* CADRE CARRÉ 1:1 : colle aux portraits réels (paysage/carré) recadrés sans pad gris. overflow:hidden = MASQUE (retour Fix) : l'obturateur .iris (agrandi 140% pour couvrir les coins) s'anime À L'INTÉRIEUR du cadre photo, ne dépasse plus en hauteur/largeur. */ .gd-carte__pic{ position:relative; aspect-ratio:1/1; background:#241d12 center/cover no-repeat; overflow:hidden; } .gd-carte__pic img{ width:100%; height:100%; object-fit:cover; display:block; } /* fallback placeholder si portrait manquant (onerror -> .is-ph) : dégradé neutre */ .gd-carte__pic img.is-ph{ background:linear-gradient(135deg,#3a3226,#6b5c45); object-fit:cover; min-height:100%; } .gd-carte__pic::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(20,17,12,.55) 0%, rgba(20,17,12,0) 45%); } /* ---- VISEUR reflex (retour Fix 07/07) : équerres de cadrage aux coins + mire centrale + ligne d'infos façon œilleton (f/ · vitesse · ISO · focale) en bas à droite. Superposé à la photo, sous le dégradé et l'obturateur (z-index 2). Purement décoratif (aria-hidden). ---- */ .gd-vis{ position:absolute; inset:0; z-index:2; pointer-events:none; } /* 4 équerres de cadrage (coins) : un carré central évidé, coins tracés en bordures */ .gd-vis__frame{ position:absolute; inset:11px; } .gd-vis__frame::before, .gd-vis__frame::after, .gd-vis__corner::before, .gd-vis__corner::after{ content:""; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.9); } .gd-vis__frame::before{ top:0; left:0; border-right:0; border-bottom:0; } .gd-vis__frame::after{ top:0; right:0; border-left:0; border-bottom:0; } .gd-vis__corner::before{ bottom:0; left:0; border-right:0; border-top:0; } .gd-vis__corner::after{ bottom:0; right:0; border-left:0; border-top:0; } /* (réticule central RETIRÉ — retour Fix : gênait sur les visages) */ /* (point rouge « REC » RETIRÉ - A7, retour Nicolas 18/07) */ /* ligne EXIF en bas à droite (f/ · vitesse · ISO · focale), monospace façon écran d'appareil */ .gd-vis__exif{ position:absolute; right:18px; bottom:18px; z-index:3; font-family:"Inter",monospace; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--blanc); text-shadow:0 1px 3px rgba(0,0,0,.75); text-align:right; } .gd-vis__exif b{ color:var(--jaune); font-weight:700; } .gd-carte__zone{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blanc); background:rgba(20,17,12,.6); border:1px solid rgba(255,255,255,.35); padding:5px 11px; border-radius:3px; } /* angles droits : informatif */ .gd-carte__body{ padding:18px 18px 22px; } .gd-carte__nom{ font-size:var(--fs-h3); color:var(--noir); margin:0 0 3px; line-height:1.15; } .gd-carte__role{ font-size:var(--fs-small); font-weight:600; color:var(--jaune-d); margin:0 0 10px; } .gd-carte__bio{ font-size:var(--fs-small); color:var(--noir-50); margin:0; line-height:1.5; } @media (max-width:1100px){ .gd-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ .gd-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:440px){ .gd-grid{ grid-template-columns:1fr; } } /* ========================================================================== RÉCITS DE TERRAIN (préfixe rc-) : blog en MAÇONNERIE 3 colonnes (Fix 07/07). Masonry = CSS columns (pas de JS de placement) ; cartes de hauteurs variées (--rc-carte--p/l/c = ratio image) + texte SOUS l'image. ========================================================================== */ .rc-barre{ position:sticky; top:var(--header-h, 112px); z-index:300; background:var(--noir); border-bottom:3px solid var(--jaune); } .site-content .rc-barre{ padding-top:0; padding-bottom:0; } /* filtres CENTRES (comme la page accompagnateurs), compteur en absolu a droite. */ .rc-barre__inner{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; } .rc-filtres{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .rc-count{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,.75); margin:0; } @media (max-width:820px){ .rc-count{ position:static; transform:none; width:100%; text-align:center; } } .rc-listing{ background:var(--creme); } .site-content .rc-listing{ padding-top:26px; padding-bottom:0; } /* MAÇONNERIE en GRID (retour Fix : permet les articles À CHEVAL sur 2 colonnes). 3 colonnes, rangées fines (10px) ; chaque carte occupe N rangées calculées en JS (rcMasonry) selon sa hauteur réelle -> effet maçonnerie. .rc-carte--wide = span 2 colonnes. */ /* VRAIE MAÇONNERIE : flex de colonnes (rc-col), chaque colonne empile ses cartes. La répartition "colonne la plus courte" est faite en JS (recits.js) -> colonnes équilibrées, ~aucun vide. */ .rc-masonry{ display:flex; align-items:flex-start; gap:clamp(18px,2vw,28px); } .rc-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:clamp(18px,2vw,28px); } .rc-carte{ transition:opacity .32s var(--ease), transform .38s var(--ease); } .rc-carte__link{ display:block; background:var(--blanc); border-radius:16px; overflow:hidden; box-shadow:0 14px 40px -22px rgba(0,0,0,.35); transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .rc-carte__link:hover{ transform:translateY(-4px); box-shadow:0 22px 54px -22px rgba(0,0,0,.45); } .rc-carte__media{ position:relative; background:#241d12 center/cover no-repeat; } /* ratios variés -> hauteurs différentes dans la maçonnerie */ .rc-carte--l .rc-carte__media{ aspect-ratio:3/2; } .rc-carte--c .rc-carte__media{ aspect-ratio:1/1; } .rc-carte--p .rc-carte__media{ aspect-ratio:3/4; } .rc-carte__cat{ position:absolute; left:12px; top:12px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--noir); background:var(--jaune); padding:5px 11px; border-radius:3px; } /* angles droits : informatif */ .rc-carte__body{ padding:18px 20px 22px; } /* texte SOUS l'image */ .rc-carte__meta{ font-size:var(--fs-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--noir-50); margin:0 0 8px; } .rc-carte__titre{ font-size:clamp(28px,2.8vw,40px); color:var(--noir); margin:0 0 10px; line-height:1.1; } .rc-carte__extrait{ font-size:var(--fs-small); color:var(--noir-50); margin:0 0 14px; line-height:1.55; /* extrait tronqué à 3 lignes (uniformise la hauteur du bloc texte). */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .rc-carte__more{ display:inline-block; font-size:var(--fs-small); font-weight:700; color:var(--noir); border-bottom:2px solid var(--jaune); padding-bottom:2px; } .rc-carte__link:hover .rc-carte__more{ color:var(--jaune-d); } /* ---- PAGE ARTICLE (préfixe rcp-) : recit.html?a=, corps PROVISOIRE + nav bas ---- */ /* corps article ÉLARGI (retour Fix : « trop étriqué, on a la largeur ») : le texte occupe une large colonne (~1080px) centrée sur le même axe que le reste de la page ; plus de grand vide à droite. */ .rcp-corps{ max-width:1080px; margin-inline:auto; padding-top:54px; padding-bottom:20px; } .rcp-corps p{ font-size:var(--fs-body); line-height:1.75; color:var(--noir-80,#2a2620); margin:0 0 20px; } .rcp-lede{ font-size:calc(var(--fs-body) + 4px); line-height:1.6; color:var(--noir); font-weight:500; } .rcp-h2{ font-size:clamp(26px,3vw,38px); color:var(--noir); margin:52px 0 22px; line-height:1.15; text-align:center; } .rcp-signature{ margin-top:28px; font-family:var(--serif); font-size:20px; color:var(--noir); } /* signature auteur du récit réel */ /* Bloc BAS : mini-fiche précédent (G) / retour (centre) / suivant (D) */ .rcp-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:20px; margin:20px auto 80px; padding-top:34px; border-top:1px solid var(--creme-2); } .rcp-mini{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--noir); transition:transform .2s; } .rcp-mini--next{ align-items:flex-end; text-align:right; } .rcp-mini:hover{ transform:translateY(-3px); } .rcp-mini__dir{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--noir-50); } .rcp-mini__card{ display:flex; align-items:center; gap:14px; } .rcp-mini--next .rcp-mini__card{ flex-direction:row-reverse; } .rcp-mini__pic{ flex:0 0 auto; width:88px; height:66px; border-radius:10px; background:#241d12 center/cover no-repeat; } .rcp-mini__cat{ display:block; font-size:var(--fs-label); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--jaune-d); margin-bottom:3px; } .rcp-mini__titre{ display:block; font-size:clamp(18px,1.7vw,24px); line-height:1.15; color:var(--noir); } /* « Retour aux récits » — porte .btn.btn--noir (taille, typo, hover et traces de pattes communes). */ .rcp-retour{ white-space:nowrap; } .rcp-retour__ico svg{ width:16px; height:16px; display:block; } @media (max-width:760px){ .rcp-nav{ grid-template-columns:1fr; gap:26px; text-align:left; } .rcp-mini--next{ align-items:flex-start; text-align:left; } .rcp-mini--next .rcp-mini__card{ flex-direction:row; } .rcp-retour{ order:3; justify-self:center; } } /* ---- FICHE PAYS (préfixe py-) : sections sous le hero (contenu validé Fix 06/07) ---- */ .py-quand{ background:var(--blanc); } .py-mois{ display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; } .py-mois span{ text-align:center; font-size:var(--fs-label); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--noir-50); padding:14px 0; border-radius:3px; background:var(--creme); border:1px solid var(--creme-2); } /* angles droits : informatif */ .py-mois span.is-on{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); font-weight:700; } .py-mois__note{ margin-top:14px; text-align:center; font-size:var(--fs-label); color:var(--noir-50); } @media (max-width:760px){ .py-mois{ grid-template-columns:repeat(6, 1fr); } } /* HERO FICHE PAYS : photo en ABSOLU + débord haut de 30% (comme .vf-hero__bg) pour recevoir la PARALLAXE DIFFÉRENTIELLE de main.js — elle était en position:fixed (héritage de l'ancienne vue plein écran du planisphère). Règle Fix 06/07 : tout hero photo a la parallaxe. */ .cfiche .cpanel__photo{ position:absolute; inset:-30% 0 0 0; will-change:transform; } /* FICHE PAYS — « Tous nos voyages » : flex CENTRÉ (Fix 09/07) : 1, 2 ou 3 voyages sont centrés (pas collés à gauche) ; 3 max par ligne, dernière ligne centrée. Surcharge la grille .depforts__grid. */ #pyVoyGrid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,2.4vw,34px); grid-template-columns:none; } #pyVoyGrid .trip{ flex:0 0 auto; width:calc((100% - 2 * clamp(20px,2.4vw,34px)) / 3); } @media (max-width:900px){ #pyVoyGrid .trip{ width:calc((100% - clamp(20px,2.4vw,34px)) / 2); } } @media (max-width:600px){ #pyVoyGrid .trip{ width:100%; } } /* NAVIGATION ENTRE FICHES (pays & voyage, demande Fix 06/07) : flèches FIXES mi-hauteur (précédent/suivant) qui suivent le scroll + bouton flottant bas-centre « au hasard ». Le nom de la cible se déplie au survol. */ .py-nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:600; display:flex; align-items:center; background:var(--blanc); color:var(--noir); border:1px solid rgba(14,14,14,.15); border-radius:999px; padding:11px; box-shadow:0 10px 30px rgba(0,0,0,.18); } .py-nav svg{ width:22px; height:22px; flex:0 0 auto; } .py-nav span{ max-width:0; overflow:hidden; white-space:nowrap; font-size:var(--fs-label); font-weight:700; transition:max-width .3s var(--ease), padding .3s var(--ease); } .py-nav:hover span{ max-width:220px; } .py-nav--prev{ left:14px; } .py-nav--prev:hover span{ padding-left:8px; } .py-nav--next{ right:14px; flex-direction:row-reverse; } .py-nav--next:hover span{ padding-right:8px; } /* FICHE ARTICLE seulement (retour Fix) : flèches descendues EN BAS, à hauteur du bloc précédent/suivant (pas au milieu de l'écran). N'affecte PAS les fiches pays/voyage (qui n'ont pas .py-nav--art). */ /* FICHE ARTICLE (retour Fix) : flèches au MILIEU de la fenêtre par défaut (comportement .py-nav de base : fixed, top:50%, translateY(-50%)). Quand le bloc précédent/suivant du bas arrive à l'écran, JS ajoute .is-docked -> elles se calent à la hauteur de ce bloc (top en px via --dock-top), toujours en fixed. */ .py-nav--art.is-docked{ top:var(--dock-top); transform:translateY(-50%); } /* ========================================================================== FORMULAIRE « POSER UNE OPTION » (Fix 07/07) — popup par-dessus le site. En-tête = récap voyage (image + titre + méta) ; corps = formulaire. ========================================================================== */ .opt-overlay{ position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vh,48px); } .opt-overlay[hidden]{ display:none; } .opt-back{ position:absolute; inset:0; background:rgba(10,10,10,.78); backdrop-filter:blur(4px); animation:optFade .25s ease both; cursor:pointer; } /* fige-scroll du fond : compense la largeur de la scrollbar disparue (--sbw, posé en JS) pour que le site ne saute pas vers la droite à l'ouverture d'une popup. */ html.opt-lock{ overflow:hidden; padding-right:var(--sbw,0px); } .opt{ position:relative; z-index:1; width:min(920px,100%); max-height:92vh; overflow:auto; background:var(--creme); border-radius:20px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); animation:optIn .32s var(--ease) both; } @keyframes optFade{ from{opacity:0} to{opacity:1} } @keyframes optIn{ from{opacity:0; transform:translateY(24px) scale(.98)} to{opacity:1; transform:none} } .opt__x{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:var(--noir); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2); transition:background .2s, transform .2s; } .opt__x:hover{ background:var(--blanc); transform:rotate(90deg); } /* RÉCAP voyage en en-tête : bande image + infos */ .opt__recap{ position:relative; display:flex; gap:16px; align-items:center; padding:22px 24px; background:var(--noir); color:var(--blanc); border-radius:20px 20px 0 0; } .opt__recap-pic{ width:96px; height:72px; flex:0 0 auto; border-radius:12px; background:#241d12 center/cover no-repeat; } .opt__recap-eyebrow{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jaune); margin:0 0 3px; } .opt__recap-titre{ font-size:22px; line-height:1.15; color:var(--blanc); margin:0 0 6px; } .opt__recap-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; padding:0; font-size:var(--fs-small); color:rgba(255,255,255,.75); } .opt__recap-meta strong{ color:var(--jaune); } .opt__body{ padding:24px; } .opt__titre{ font-size:clamp(24px,3vw,30px); color:var(--noir); margin:0 0 4px; } .opt__sub{ font-size:var(--fs-small); color:var(--noir-50); margin:0 0 18px; } /* form en GRILLE 2 colonnes sur écran large (retour Fix : éviter le scroll vertical) ; les champs longs (voyage, dates, message, cases, section, bouton) occupent les 2 colonnes. */ .opt__form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; } .opt__row{ display:contents; } /* les 2 champs du row deviennent 2 cellules de la grille */ .opt__form > .opt__sec, .opt__form > label.opt__f:has(textarea), .opt__form > label.opt__f:has(select), .opt__form > #optDatesWrap, .opt__form > .opt__check, .opt__form > .opt__err, .opt__form > .opt__submit{ grid-column:1 / -1; } /* pleine largeur */ .opt__f{ display:flex; flex-direction:column; gap:5px; } .opt__f > span{ font-size:var(--fs-label); font-weight:600; color:var(--noir); } .opt__f i{ color:var(--jaune-d); font-style:normal; } .opt__f input, .opt__f textarea, .opt__sel{ font:inherit; font-size:var(--fs-small); color:var(--noir); background:var(--blanc); border:1.5px solid rgba(14,14,14,.15); border-radius:10px; padding:11px 13px; outline:none; transition:border-color .2s; width:100%; box-sizing:border-box; } .opt__f input:focus, .opt__f textarea:focus, .opt__sel:focus{ border-color:var(--jaune); } .opt__f textarea{ resize:vertical; min-height:64px; } .opt__check{ display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-small); color:var(--noir-50); line-height:1.4; cursor:pointer; } .opt__check input{ margin-top:2px; width:17px; height:17px; flex:0 0 auto; accent-color:var(--jaune-d); } /* titre de section (« Informations de votre voyage ») */ .opt__sec{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jaune-d); margin:8px 0 2px; padding-bottom:8px; border-bottom:1px solid var(--creme-2); } /* dates de départ : cases à cocher encadrées (comme le site d'origine) */ .opt__dates{ display:flex; flex-direction:column; gap:6px; } .opt__check--date{ background:var(--blanc); border:1.5px solid rgba(14,14,14,.15); border-radius:10px; padding:10px 13px; margin:0; align-items:center; color:var(--noir); } .opt__check--date:has(input:checked){ border-color:var(--jaune); background:#fffdf5; } .opt__check i{ color:var(--jaune-d); font-style:normal; } .opt__err{ color:#c0392b; font-size:var(--fs-small); min-height:16px; } .opt__submit{ margin-top:4px; width:100%; justify-content:center; } /* écran de confirmation */ .opt__done{ padding:44px 30px; text-align:center; } .opt__done[hidden]{ display:none; } .opt__done-ico{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#2e7d46; color:var(--blanc); display:flex; align-items:center; justify-content:center; font-size:34px; } .opt__done h2{ font-size:28px; color:var(--noir); margin:0 0 10px; } .opt__done p{ font-size:var(--fs-body); color:var(--noir-50); margin:0 0 22px; line-height:1.5; } /* mobile / écran étroit : form en 1 colonne (plus en hauteur) */ @media (max-width:620px){ .opt__form{ grid-template-columns:1fr; } .opt__form > .opt__f, .opt__form > .opt__check{ grid-column:1 / -1; } .opt__recap{ flex-direction:column; text-align:center; align-items:center; } } /* ========================================================================== FORMULAIRE « S'INSCRIRE » (Nicolas 07/15) — popup 3 étapes (form-inscription.js). Réutilise .opt* (overlay, carte, champs, récap). Ici : fil d'étapes, pages, participants. ========================================================================== */ /* [hidden] doit toujours cacher, même sur .btn (inline-flex) et .opt__f (flex) de la popup */ #insModal [hidden]{ display:none !important; } /* compteur « Étape X sur N » + barre de progression */ .ins-count{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jaune-d); margin:0 0 8px; } .ins-bar{ height:5px; border-radius:999px; background:var(--creme-2); overflow:hidden; margin:0 0 16px; } .ins-bar > span{ display:block; height:100%; background:var(--jaune); border-radius:999px; transition:width .45s var(--ease); } /* animation d'entrée de chaque étape (glissement + fondu) ; --ins-from = décalage initial signé */ @keyframes insSlide{ from{ opacity:0; transform:translateX(var(--ins-from,26px)); } to{ opacity:1; transform:none; } } .ins-page.ins-anim{ animation:insSlide .34s var(--ease) both; } @media (prefers-reduced-motion: reduce){ .ins-page.ins-anim{ animation:none; } .ins-bar > span{ transition:none; } } /* fil des 3 étapes */ .ins-steps{ list-style:none; display:flex; gap:6px; margin:0 0 20px; padding:0; } .ins-step{ flex:1 1 0; display:flex; align-items:center; gap:8px; font-size:var(--fs-label); color:var(--noir-50); padding-bottom:10px; border-bottom:2px solid var(--creme-2); } .ins-step__num{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; background:var(--creme-2); color:var(--noir-50); font-size:13px; } .ins-step__lbl{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ins-step.is-active{ color:var(--noir); border-bottom-color:var(--jaune); } .ins-step.is-active .ins-step__num{ background:var(--jaune); color:var(--noir); } .ins-step.is-done{ color:var(--vert); border-bottom-color:var(--vert); } .ins-step.is-done .ins-step__num{ background:var(--vert); color:var(--blanc); } /* pages du formulaire : chaque page reprend la grille 2 colonnes de .opt__form */ .ins-page{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; } .ins-page[hidden]{ display:none; } .ins-page > .opt__sec, .ins-page > label.opt__f:has(textarea), .ins-page > label.opt__f:has(select), .ins-page > .opt__check, .ins-page > .ins-parts-head, .ins-page > .ins-hint, .ins-page > .ins-parts, .ins-page > .ins-summary, .ins-page > .ins-presta, .ins-page > .ins-resp-id{ grid-column:1 / -1; } .ins-resp-id{ margin-top:0; } /* champs passeport du responsable, pleine largeur, 3 colonnes */ .ins-page > .opt__row{ display:contents; } .ins-hint{ font-size:var(--fs-small); color:var(--noir-50); margin:0; line-height:1.4; } /* en-tête « Autres participants » + bouton ajouter */ .ins-parts-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .ins-parts-head .opt__sec{ margin:0; border:0; padding:0; } .ins-add{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--fs-label); font-weight:700; color:var(--vert); background:transparent; border:1.5px solid var(--vert); border-radius:999px; padding:7px 14px; cursor:pointer; transition:background .2s, color .2s; } .ins-add span{ font-size:16px; line-height:1; } .ins-add:hover{ background:var(--vert); color:var(--blanc); } /* un participant : carte blanche + bouton retirer */ .ins-parts{ display:flex; flex-direction:column; gap:12px; } .ins-part{ background:var(--blanc); border:1.5px solid rgba(14,14,14,.12); border-radius:12px; padding:14px; } .ins-part__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .ins-part__t{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--noir); } .ins-del{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; border:0; background:var(--creme-2); color:var(--noir); font-size:20px; line-height:1; cursor:pointer; transition:background .2s, color .2s; } .ins-del:hover{ background:#c0392b; color:var(--blanc); } .ins-part .opt__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ins-part__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:12px; } /* récap final (dl) */ .ins-recap{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0; } .ins-recap > div{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--creme-2); } .ins-recap dt{ font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--jaune-d); } .ins-recap dd{ margin:0; font-size:var(--fs-small); color:var(--noir); } /* barre de navigation Précédent / Suivant / Envoyer — STICKY en bas de la popup : toujours visible pendant qu'on scrolle le formulaire, posée par-dessus le contenu. */ .ins-nav{ position:sticky; bottom:0; z-index:2; display:flex; gap:12px; margin:18px -24px -24px; padding:16px 24px; background:var(--creme); border-top:1px solid var(--creme-2); box-shadow:0 -10px 24px -12px rgba(0,0,0,.18); } .ins-nav .ins-next, .ins-nav .ins-send{ min-width:180px; } /* Précédent grisé et non cliquable à la 1re étape */ .ins-nav .btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; } /* TARIF dynamique à gauche de la barre (pousse les boutons à droite) */ .ins-total{ display:flex; flex-direction:column; justify-content:center; margin-right:auto; line-height:1.15; } .ins-total[hidden]{ display:none; } .ins-total__lbl{ font-size:var(--fs-label); color:var(--noir-50); } .ins-total__val{ font-size:var(--fs-h3); font-weight:700; color:var(--noir); } /* PACKS d'assurance (radio en cartes) : 4 sur UNE LIGNE (Nicolas 07/15) */ .ins-packs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; } .ins-pack{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:4px 8px; align-items:start; padding:12px 12px; background:var(--blanc); border:1.5px solid rgba(14,14,14,.14); border-radius:12px; cursor:pointer; transition:border-color .2s, background .2s; } .ins-pack:hover{ border-color:rgba(244,183,33,.5); } .ins-pack:has(input:checked){ border-color:var(--jaune); background:#fffdf5; } .ins-pack input{ grid-row:1 / span 2; margin-top:3px; width:17px; height:17px; accent-color:var(--jaune-d); } .ins-pack__t{ font-size:var(--fs-label); font-weight:700; color:var(--noir); line-height:1.2; } .ins-pack__d{ font-size:11px; color:var(--noir-50); line-height:1.3; } /* SIGNATURE */ .ins-sign__pad{ display:block; width:100%; height:150px; background:var(--blanc); border:1.5px dashed rgba(14,14,14,.25); border-radius:12px; cursor:crosshair; touch-action:none; } .ins-sign__clear{ margin-top:8px; font:inherit; font-size:var(--fs-label); font-weight:700; color:var(--jaune-d); background:none; border:0; cursor:pointer; text-decoration:underline; } .ins-sign__clear:hover{ color:var(--noir); } @media (max-width:720px){ .ins-packs{ grid-template-columns:1fr 1fr; } } @media (max-width:440px){ .ins-packs{ grid-template-columns:1fr; } } @media (max-width:620px){ .ins-page, .ins-recap{ grid-template-columns:1fr; } .ins-part__grid{ grid-template-columns:1fr; } .ins-step__lbl{ display:none; } .ins-nav{ flex-wrap:wrap; } } .py-hasard{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:600; display:flex; align-items:center; gap:9px; font:inherit; font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--jaune); color:var(--noir); border:0; border-radius:999px; padding:13px 22px; box-shadow:0 14px 34px rgba(0,0,0,.22); cursor:pointer; transition:transform .2s var(--ease), filter .2s; } .py-hasard svg{ width:19px; height:19px; flex:0 0 auto; } /* le petit dé */ .py-hasard:hover{ transform:translateX(-50%) translateY(-2px); filter:brightness(1.05); } /* masqué quand la grille de voyages / le footer est à l'écran (JS hideHasardOnGrid) : évite qu'il se pose sur les cartes voyage. Glisse vers le bas + non cliquable pendant qu'il est escamoté. */ .py-hasard{ transition:transform .2s var(--ease), filter .2s, opacity .25s var(--ease); } .py-hasard.is-tucked{ opacity:0; transform:translateX(-50%) translateY(120%); pointer-events:none; } /* BANDEAU IMAGE « découpé dans la page » — composant GÉNÉRIQUE (.band-img, règle Fix 06/07 : alterner fonds unis / bandeaux photo parallaxe / blocs texte+photo pour rythmer les pages) ; .py-culture (Terres & cultures des fiches pays) = même mécanique, alias conservé. Fond photo pleine largeur en attachment:fixed (effet fenêtre au scroll) + voile + texte superposé. Fond sombre (voile) -> textes CLAIRS (règle lisibilité). */ .py-culture, .band-img{ position:relative; overflow:hidden; } /* overflow = la « fenêtre découpée » */ /* MÊME MÉCANIQUE que le martin-pêcheur de la Home (feature__fix) : couche 100vh translatée à l'INVERSE du scroll (--fix-y, piloté par bandFixedBg dans main.js) -> le fond paraît FIXE derrière la page, la section le révèle. Fiable partout (contextes transformés inclus). */ .py-culture__bg, .band-img__bg{ position:absolute; left:0; right:0; top:0; height:100vh; transform:translateY(var(--fix-y, 0px)); will-change:transform; background:#241d12 center/cover no-repeat; } .py-culture__veil, .band-img__veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,14,14,.74) 0%, rgba(14,14,14,.45) 48%, rgba(14,14,14,.12) 100%); } .py-culture__inner, .band-img__inner{ position:relative; z-index:1; max-width:620px; padding:clamp(90px,12vw,170px) 0; } .py-culture .eyebrow, .band-img .eyebrow{ color:var(--jaune); } .py-culture__titre, .band-img__titre{ color:var(--blanc); text-align:left; margin:12px 0 20px; } .py-culture__inner p:not(.eyebrow), .band-img__inner p:not(.eyebrow){ color:rgba(255,255,255,.86); font-size:var(--fs-body); line-height:1.7; margin-bottom:16px; } .py-culture__inner strong, .band-img__inner strong{ color:var(--blanc); } .band-img__cta{ margin-top:6px; } /* MINI CARTE D'IDENTITÉ du pays (source Wikipédia) : bandeau blanc sous le descriptif */ /* ========================================================================== FICHE ANIMAL (Nicolas 07/15) — hero photo animalière + nom/latin/famille/mini-fiche. Réutilise .pg-bloc / .depforts__grid / .vf-contact / .py-nav pour les sections. ========================================================================== */ .an-hero{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; padding:clamp(90px,12vh,140px) 0 clamp(40px,6vh,72px); } .an-hero__bg{ position:absolute; inset:0; background:#241d12 center/cover no-repeat; z-index:0; } .an-hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(10,10,10,.88) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,.15) 100%); } .an-hero__inner{ position:relative; z-index:2; color:var(--blanc); width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(24px,4vw,64px); } /* colonne gauche : TOUT aligné à gauche sur le même axe (eyebrow, titre, latin, famille) */ .an-hero__left{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; } .an-hero__eyebrow{ color:var(--jaune); } .an-hero__title{ font-size:clamp(44px,7vw,92px); line-height:1.02; color:var(--blanc); margin:2px 0 6px; } .an-hero__latin{ font-style:italic; font-size:clamp(18px,2.4vw,26px); color:rgba(255,255,255,.8); margin:0 0 16px; } .an-hero__latin[hidden]{ display:none; } .an-hero__fam{ margin-bottom:8px; } /* icône + libellé SUR UNE LIGNE (nom à droite de l'icône), ferré à gauche. Picto STRICTEMENT identique au planisphère (.family__ico) : 46px cercle, svg 40px, même écriture. */ .an-hero__fam .cpanel__fam{ display:inline-flex; flex-direction:row !important; align-items:center; gap:14px; color:var(--blanc); } .an-hero__fam .family__ico{ width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.5); margin:0; } .an-hero__fam .family__ico svg{ width:40px; height:40px; fill:currentColor; } .an-hero__fam .family__label{ font-size:var(--fs-label); font-weight:600; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.95); white-space:nowrap; } /* OÙ L'OBSERVER : panneau noir semi-transparent à droite du hero, GRAND et aéré, grille modulaire de pays (silhouette AU TRAIT BLANC + nom dessous, cliquable). Séparateurs = filets fins qui NE se rejoignent PAS au centre (petit espace), obtenus par des pseudo-éléments raccourcis. */ /* le panneau s'ADAPTE au nombre de pays : largeur = colonnes réelles (pas de vide), contenu centré. width:max-content -> la boîte prend juste la largeur de sa grille (1 pays = 1 carte de large). */ .an-where{ width:max-content; max-width:58vw; background:rgba(10,10,10,.5); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:24px 28px; } .an-where[hidden]{ display:none; } .an-where__lbl{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 16px; text-align:center; } /* colonnes de LARGEUR FIXE (une carte) -> 1 pays = 1 colonne, 3 pays = 3 colonnes, etc. Centré. */ .an-where__grid{ display:grid; grid-template-columns:repeat(var(--cols,4), 116px); justify-content:center; } .an-where__item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; color:var(--blanc); padding:16px 14px; transition:color .2s; } .an-where__item:hover{ color:var(--jaune); } /* filets séparateurs raccourcis (petit espace au centre) ; masqués sur les bords/dernière ligne via .is-edge (JS) */ .an-where__item::after{ content:""; position:absolute; top:14%; bottom:14%; right:0; width:1px; background:rgba(255,255,255,.14); } .an-where__item::before{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:1px; background:rgba(255,255,255,.14); } .an-where__item.is-lastcol::after{ display:none; } /* pas de filet vertical à droite de la dernière colonne */ .an-where__item.is-lastrow::before{ display:none; } /* pas de filet horizontal sous la dernière ligne */ .an-where__map{ width:100%; aspect-ratio:1/1; max-width:76px; display:grid; place-items:center; color:var(--blanc); } .an-where__map svg{ width:100%; height:100%; } .an-where__map svg path{ fill:none; stroke:var(--blanc); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-linejoin:round; } .an-where__item:hover .an-where__map svg path{ stroke:var(--jaune); } .an-where__nom{ font-size:var(--fs-small); font-weight:600; text-align:center; line-height:1.25; } .an-hero__back{ position:absolute; top:calc(112px + 16px); left:50%; transform:translateX(-50%); z-index:3; } @media (max-width:860px){ .an-hero__inner{ grid-template-columns:1fr; align-items:start; } .an-where{ max-width:100%; } } /* FRISE D'ESPÈCES « dock Mac » (Nicolas 07/15) : traits verticaux resserrés sur toute la largeur ; au survol l'effet dock agrandit + un LABEL UNIQUE glisse et se met à jour ; courante = trait jaune. Libellé « Parcourir les espèces » à gauche. */ .an-dockwrap{ position:relative; display:flex; align-items:flex-end; gap:20px; background:var(--noir); color:var(--blanc); padding:0 clamp(16px,3vw,44px); height:70px; } /* la frise (rail) est clippée en X pour ne pas décaler la page ; la bulle, elle, peut monter au-dessus */ .an-dock{ overflow:visible; } /* libellé aligné sur le BAS des barres (même ligne de base que le padding-bottom du rail) */ .an-dock__title{ flex:0 0 auto; font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap; line-height:1; padding-bottom:16px; } .an-dock{ position:relative; flex:1 1 auto; min-width:0; height:100%; } .an-dock__rail{ display:flex; align-items:flex-end; justify-content:space-between; gap:2px; height:100%; padding-bottom:16px; } .an-dock__item{ position:relative; flex:1 1 0; min-width:0; display:flex; justify-content:center; align-items:flex-end; height:44px; text-decoration:none; } /* le TRAIT : hauteur croît avec --w (0..6) posé par le JS selon la distance au curseur */ .an-dock__bar{ width:2px; height:calc(16px + var(--w,0) * 5px); border-radius:2px; background:rgba(255,255,255,.4); transition:height .1s linear, background .15s; } .an-dock__item:hover .an-dock__bar{ background:var(--blanc); } .an-dock__item.is-current .an-dock__bar{ background:var(--jaune); width:3px; height:calc(30px + var(--w,0) * 5px); } /* LABEL FLOTTANT unique : suit le curseur (left posé en JS), affiche le nom du trait le plus proche */ .an-dock__float{ position:absolute; bottom:58px; z-index:2; transform:translateX(-50%); white-space:nowrap; font-size:var(--fs-label); font-weight:700; color:var(--noir); background:var(--jaune); border-radius:8px; padding:5px 12px; opacity:0; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:opacity .15s; } /* PAS de transition sur left -> suit le curseur sans lag */ .an-dock__float.is-on{ opacity:1; } @media (prefers-reduced-motion: reduce){ .an-dock__bar, .an-dock__float{ transition:none; } } @media (hover:none){ .an-dock__rail{ overflow-x:auto; } .an-dock__float{ display:none; } } .an-voy__empty{ text-align:center; color:var(--noir-50); font-size:var(--fs-body); margin-top:20px; } .an-voy__empty a{ color:var(--jaune-d); text-decoration:underline; } /* grille de voyages de la fiche animal : CENTRÉE (1 ou 2 voyages ne sont plus ferrés à gauche). colonnes de largeur fixe -> le bloc se centre quel que soit le nombre de cartes. */ #anVoyGrid{ grid-template-columns:repeat(auto-fit, minmax(280px, 340px)); justify-content:center; } @media (max-width:900px){ .an-hero__id{ grid-template-columns:1fr 1fr; } } .py-id{ display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; margin-top:clamp(28px,3.4vw,54px); background:var(--blanc); border:1px solid var(--creme-2); border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.06); } .py-id > div{ padding:20px 22px; text-align:center; border-right:1px solid var(--creme-2); } .py-id > div:last-child{ border-right:none; } .py-id dt{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--noir-50); margin-bottom:6px; } .py-id dd{ font-size:var(--fs-small); font-weight:600; color:var(--noir); margin:0; } @media (max-width:900px){ .py-id{ grid-template-columns:1fr 1fr; } .py-id > div{ border-right:none; border-bottom:1px solid var(--creme-2); } } /* pastilles espèces de la fiche pays. Depuis 07/15 : LIENS vers la fiche animal (curseur + hover jaune). */ #pyEspGrid .pg-dest__item{ text-decoration:none; } #pyEspGrid .pg-dest__item--link{ cursor:pointer; } #pyEspGrid .pg-dest__item--link:hover span:last-child{ color:var(--jaune-d); } #pyEspGrid .pg-dest__item--link:hover .pg-dest__pic{ box-shadow:0 0 0 3px var(--jaune); } /* blocs infos pratiques : pictos au TRAIT (pas de fill) sur la pastille jaune */ #infos-pratiques .vf-info__ico svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ---- PAGE ÉQUIPE (préfixe eq-) ---- */ .eq-intro{ max-width:900px; margin:0 auto; text-align:center; font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,38px); line-height:1.3; color:var(--noir); } .eq-intro em{ font-style:italic; color:var(--jaune-d); } /* même accent que .manifeste__lede */ .eq-intro strong{ font-weight:400; color:var(--noir); } .eq-grille{ background:var(--blanc); } .eq-grille__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:clamp(18px,2vw,32px); } .eq-carte{ background:var(--creme); border:1px solid var(--creme-2); border-radius:18px; padding:18px 18px 26px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .eq-carte:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.12); } /* GRANDS portraits RONDS + OBTURATEUR v4 (géométrie = SVG FOURNI PAR FIX le 06/07, _Inbox/obturateur-ferme.svg) : 6 lamelles COURBES, style FLAT (surfaces blanches, bord d'attaque = la courbe exacte de Fix, contour noir, anneau r=96). Fermé (repos) = le dessin de Fix, pointes au centre — couverture totale par recouvrement (chaque lamelle s'étend 70° derrière son bord). OUVERTURE (consigne Fix 06/07) : chaque lamelle s'ÉCARTE RADIALEMENT à l'opposé de sa pointe (translateX dans son repère pivoté de k*60°) + LÉGÈRE ROTATION de l'ensemble (irisTurn). Cycle au survol : apparition ouverte -> fermeture -> pause -> réouverture -> disparition. */ .eq-carte__pic{ position:relative; display:block; width:min(240px, 82%); aspect-ratio:1; border-radius:50%; overflow:hidden; margin:0 auto 20px; background:#241d12 center top/cover no-repeat; border:3px solid var(--jaune); box-shadow:0 14px 34px -14px rgba(0,0,0,.35); } /* l'iris DÉBORDE de 8% : l'anneau (r=96) et les ancres des courbes passent JUSTE HORS du cercle de l'image (retour Fix 06/07 : « agrandir le cercle pour qu'on ne le voie pas »). width/height EXPLICITES : un svg positionné en absolu ne s'étire pas avec inset seul. */ .iris{ position:absolute; left:-20%; top:-20%; width:140%; height:140%; max-width:none; z-index:5; pointer-events:none; opacity:0; } /* AGRANDI ~140% (retour Fix : combler le vide dans les coins carrés) ; z-index:5 : passe AU-DESSUS du viseur reflex au survol */ .iris__rot{ transform-origin:50% 50%; } .iris__blade{ fill:var(--noir); transform:translateX(104px); } /* lamelles NOIRES (retour Fix 06/07) */ /* les COURBES noires n'apparaissent qu'autour de la fermeture (fondu) : pendant le glissement, elles traverseraient l'ouverture (elles ne peuvent pas passer "sous" la lamelle voisine en SVG) */ /* traits ULTRA-FINS (épaisseur alignée sur le SVG v2 de Fix : 0.5px dans une box 192.5 ≈ 0.6 ici, soit ~1px affiché) et GRIS, VISIBLES pendant tout le cycle (retours Fix 06/07 : on doit voir les lamelles ET leur contour — seul le cercle extérieur ne doit pas se voir) */ .iris__edge{ fill:none; stroke:#c9c9c9; stroke-width:.6; stroke-linecap:round; transform:translateX(104px); } /* contours GRIS CLAIR sur lamelles noires (retour Fix 06/07) */ .iris__ring{ display:none; } /* anneau extérieur RETIRÉ (retour Fix 07/07) — partout (équipe, pastilles, photographes) */ /* cycle ACCÉLÉRÉ à 0.55s (retour Fix 07/07 ; était 0.75s). Déclencheur GÉNÉRIQUE .iris-trigger (posé par irisEverywhere de main.js sur la carte parente ou la pastille elle-même) : portraits équipe ET pastilles rondes .pg-dest__pic de tout le site. */ .iris-trigger:hover .iris{ animation:irisFade .55s cubic-bezier(.6,0,.35,1) 1 both; } .iris-trigger:hover .iris .iris__rot{ animation:irisTurn .55s cubic-bezier(.6,0,.35,1) 1 both; } .iris-trigger:hover .iris .iris__blade{ animation:irisSlide .55s cubic-bezier(.6,0,.35,1) 1 both; } .iris-trigger:hover .iris .iris__edge{ animation:irisSlide .55s cubic-bezier(.6,0,.35,1) 1 both; } /* même glissement que la surface */ /* PHOTO -> NOIR & BLANC révélé à la réouverture, puis RETOUR EN COULEUR LENT en fin d'animation (retours Fix 06/07 : « comme une photo qu'on vient de prendre », « passage gris -> couleur un peu plus long ») — bascule gris PENDANT que l'obturateur couvre la photo (fenêtre fermée du cycle .75s = 14-20% de 2.2s) ; gris tenu jusqu'à 45% puis retour couleur sur ~1.1s */ .iris-trigger:hover .iris-pic{ animation:picFlash 2.2s ease 1 both; } /* les pastilles rondes accueillent l'iris : découpe circulaire + repère local */ .pg-dest__pic{ position:relative; overflow:hidden; } /* retour N&B -> couleur DOUX (retour Fix 06/07) : ease-in-out sur ~1.3s, départ imperceptible */ @keyframes picFlash{ 0%{filter:grayscale(0)} 14%{filter:grayscale(0)} 20%{filter:grayscale(1)} 40%{filter:grayscale(1); animation-timing-function:cubic-bezier(.45,.05,.55,.95)} 98%{filter:grayscale(0)} 100%{filter:grayscale(0)} } @keyframes irisFade{ 0%{opacity:0} 7%{opacity:1} 90%{opacity:1} 100%{opacity:0} } /* rotation d'ensemble INVERSÉE au retour : aller-retour = le « clic-clac » (retour Fix 06/07) */ @keyframes irisTurn{ 0%{transform:rotate(16deg)} 42%{transform:rotate(0deg)} 58%{transform:rotate(0deg)} 100%{transform:rotate(16deg)} } @keyframes irisSlide{ 0%{transform:translateX(104px)} 42%{transform:translateX(0)} 58%{transform:translateX(0)} 100%{transform:translateX(104px)} } @media (prefers-reduced-motion: reduce){ .iris{ display:none; } .iris-trigger:hover .iris-pic{ animation:none; } } .eq-carte__nom{ font-size:clamp(24px,2.2vw,32px); color:var(--noir); margin:6px 0 12px; } .eq-carte__bio{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); text-align:left; } /* bouton retour accueil de la fiche voyage (fond sombre -> ghost clair) */ .vf-hero__retour{ margin-top:22px; color:var(--blanc); } /* COMPOSITION HERO FICHE VOYAGE (demande Fix 05/07) : le bouton retour flotte à MI-CHEMIN entre le header et le titre ; eyebrow + titre + difficulté sont regroupés en BAS du hero. */ .vf-hero--voyage{ align-items:stretch; } .vf-hero--voyage .vf-hero__inner{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; } /* Le bouton retour doit tomber À MI-CHEMIN entre le bas du header et le début du texte. Le contenu du hero remplit exactement sa boîte (aucun espace libre à répartir depuis que le bloc difficulté a grossi, B3) : on prend donc --retour-gap en haut pour le rendre en bas, ce qui descend le bouton de cette valeur sans bouger l'eyebrow ni le titre. */ .vf-hero--voyage{ --retour-gap:20px; padding-top:calc(var(--nav-h) + 40px - var(--retour-gap)); } .vf-hero--voyage .vf-hero__retour{ margin:0 0 var(--retour-gap); } /* DIFFICULTÉ dans le HERO fiche voyage : MÊME chip que sur les vignettes (uniformisation Fix 06/07 — seules différences : position statique centrée + libellé « Difficulté : »). */ /* B3 (Nicolas 19/07) : bloc AGRANDI = pattes + nom du niveau + phrase d'explication. Composant autonome (ne dépend plus de la chip .trip__diff des vignettes). */ .vf-hero__diff{ position:static; width:fit-content; max-width:min(92vw, 620px); margin:26px auto 0; padding:14px 24px 16px; border-radius:14px; text-align:center; background:rgba(14,14,14,.55); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(3px); } .vf-hero__diff-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0; } .vf-hero__diff-head em{ font-style:normal; font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); } .vf-hero__diff-head b{ font-size:var(--fs-h3); font-weight:700; color:var(--jaune); } .vf-hero__diff-pattes{ display:inline-flex; gap:5px; } .vf-hero__diff-pattes svg{ width:26px; height:26px; fill:var(--jaune); } .vf-hero__diff-pattes svg.is-off{ fill:var(--blanc); opacity:.3; } .vf-hero__diff-txt{ margin:8px 0 0; font-size:var(--fs-small); line-height:1.5; color:rgba(255,255,255,.88); } @media (max-width:640px){ .vf-hero__diff{ padding:12px 16px 14px; } .vf-hero__diff-pattes svg{ width:22px; height:22px; } } /* ============================ FICHE ACCOMPAGNATEUR (accompagnateur.html) ============================ */ /* HERO : photo du guide en FOND pleine largeur + voile sombre, nom en serif par-dessus. */ /* HERO : réutilise la mécanique .vf-hero (parallaxe + recouvrement par .site-content) + hauteur .vf-hero--page (52vh, comme les autres pages intérieures). --gp-pic = taille du portrait (x1,5). */ .gp-hero{ min-height:52vh; padding-bottom:64px; align-items:flex-start; } .gp-hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,.45) 50%, rgba(14,14,14,.25) 100%); } .gp-hero__topbar{ position:relative; z-index:2; padding-top:calc(var(--header-h) + 8px); } .gp-hero__back{ color:var(--blanc); border-color:rgba(255,255,255,.7); } /* filet blanc (texte blanc sur le hero) */ /* RENFORT sombre en BAS du hero (demande Fix) : garantit le contraste du nom blanc meme si la photo est claire a cet endroit. Meme couche que le voile, sous le contenu, clippe par overflow:hidden. */ .gp-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(14,14,14,.88) 0%, rgba(14,14,14,0) 100%); } /* IDENTITE (portrait + nom) en tete de .site-content, donc AU-DESSUS du hero. ROBUSTE A TOUTE TAILLE D'ECRAN : - .gp-id__inner (inline-flex, largeur intrinseque) se centre horizontalement ; - le PORTRAIT est en position ABSOLUE, ancre a gauche du texte et centre sur le bord HAUT de .gp-id (= la limite hero/beige) via translateY(-50%) -> a cheval moitie/moitie PAR CONSTRUCTION, quelle que soit --gp-pic. Il ne compte pas dans la hauteur du flux -> ne pousse jamais le nom ; - le NOM (dans le flux) est remonte dans le sombre du hero par une valeur FIXE liee a SA police, jamais a --gp-pic -> toujours entierement lisible. */ /* .gp-id = point d'ancrage : hauteur nulle posee PILE sur la limite hero/beige (bord haut de .site-content). Le .gp-id__inner (portrait + texte) est ancre en absolu sur ce point, ce qui rend la compo INDEPENDANTE de la taille du hero et de --gp-pic. */ .gp-id{ --gp-pic:clamp(165px,16vw,246px); /* portrait agrandi x1,5 */ position:relative; z-index:1; height:0; } /* le bloc portrait+texte est ancre par sa BASE sur la limite (bottom:0) et centre horizontalement -> le texte est donc ENTIEREMENT au-dessus de la limite (dans le sombre du hero = nom BLANC lisible), quelle que soit la taille d'ecran. */ .gp-id__inner{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:clamp(20px,2.4vw,36px); white-space:nowrap; padding-bottom:6px; } /* le portrait deborde sous la limite de sa moitie basse -> a cheval, sans pousser le texte. */ .gp-id__portrait{ flex:0 0 auto; width:var(--gp-pic); height:var(--gp-pic); border-radius:50%; background:var(--noir-50) center/cover no-repeat; border:4px solid var(--creme); box-shadow:0 18px 44px -14px rgba(0,0,0,.6); margin-bottom:calc(var(--gp-pic) / -2); } .gp-id__txt{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; white-space:normal; } .gp-id__eyebrow{ color:var(--jaune); } .gp-id__nom{ font-size:clamp(34px,4.8vw,66px); line-height:1.02; color:var(--blanc); margin-top:4px; text-shadow:0 2px 20px rgba(0,0,0,.6); } /* BIO : colonne lisible centrée. */ /* .site-content prefix : bat la regle globale section[id]{padding:clamp(70..130px)} qui gonflait l'espace. padding-top >= moitie du portrait (--gp-pic) qui deborde sous la limite + de l'air -> la bio ne passe JAMAIS sous le portrait, quelle que soit la taille d'ecran. */ .site-content .gp-bio{ --gp-pic:clamp(165px,16vw,246px); padding:calc(var(--gp-pic) / 2 + clamp(24px,3vw,44px)) 0 clamp(12px,1.6vw,22px); } .gp-bio__inner{ max-width:1000px; margin-inline:auto; } .gp-bio__txt p{ font-size:var(--fs-body); line-height:1.75; color:var(--noir); margin-bottom:18px; } .gp-bio__site{ margin-top:26px; } /* VOYAGES rattachés : même grille 3 colonnes que les prochains départs. */ .site-content .gp-voyages{ padding:clamp(12px,1.6vw,22px) 0 clamp(46px,6vw,80px); } /* en-tete de section : marge basse reduite (60px par defaut = trop). */ .gp-voyages .sec-head{ margin-bottom:clamp(20px,2.4vw,32px); } /* flex CENTRÉ : 1, 2 ou 3 voyages sont centrés (pas de case vide) ; 3 max par ligne (largeur de carte bornée pour tenir 3 de front), les suivants passent à la ligne et restent centrés. */ .gp-voyages__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,2.4vw,34px); } .gp-voyages__grid .trip{ flex:0 0 auto; width:calc((100% - 2 * clamp(20px,2.4vw,34px)) / 3); } /* 3 par ligne */ @media (max-width:900px){ .gp-voyages__grid .trip{ width:calc((100% - clamp(20px,2.4vw,34px)) / 2); } } @media (max-width:600px){ .gp-voyages__grid .trip{ width:100%; } } /* GALERIE = carrousel « battage » (même mécanique que les polaroïds home, mais photos NUES). */ .gp-galerie{ padding:clamp(30px,4vw,54px) 0 clamp(60px,7vw,96px); background:var(--creme-2); } .gp-gal__stage{ position:relative; height:clamp(440px,60vw,720px); perspective:1600px; margin-top:20px; } /* CARTE = photo seule (pas de cadre blanc, pas de caption). */ .gp-gal__card{ position:absolute; left:50%; top:50%; margin:0; width:min(840px, 90vw); aspect-ratio:3/2; border-radius:10px; overflow:hidden; box-shadow:0 28px 55px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.18); will-change:transform; transform:translate(-50%, -50%) translate(var(--tx, var(--dx0, 0px)), var(--ty, 0px)) rotate(var(--rot, var(--rot0, 0deg))) scale(var(--sc, 1)); } .gp-gal__card img{ width:100%; height:100%; object-fit:cover; display:block; } /* FLÈCHES ← → : ronds jaunes, comme les polaroïds. */ .gp-gal__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:200; width:58px; height:58px; border-radius:50%; background:var(--jaune); color:var(--noir); display:grid; place-items:center; cursor:pointer; border:0; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .gp-gal__nav:hover{ background:var(--jaune-d); transform:translateY(-50%) scale(1.08); box-shadow:0 18px 40px -10px rgba(244,183,33,.55); } .gp-gal__nav--prev{ left:clamp(6px, 4vw, 60px); } .gp-gal__nav--next{ right:clamp(6px, 4vw, 60px); } /* ---- INFO-BULLE NIVEAU (B1, retour Nicolas 18/07) : au survol des pattes de difficulté, partout sur le site. Posée en position:fixed par js/main.js (diffTip). ---- */ .diff-tip{ position:fixed; z-index:9000; max-width:300px; padding:12px 14px; border-radius:12px; background:var(--noir); color:var(--blanc); font-size:var(--fs-small); line-height:1.45; box-shadow:0 18px 40px -12px rgba(0,0,0,.55); pointer-events:none; /* ne bloque jamais le clic sur la carte */ opacity:0; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease; } .diff-tip.is-on{ opacity:1; transform:none; } .diff-tip b{ display:block; margin-bottom:4px; color:var(--jaune); font-weight:700; } @media (prefers-reduced-motion: reduce){ .diff-tip{ transition:none; } } /* Bloc « Informations complémentaires » de la colonne droite (B5, Nicolas 19/07) : même carte que .vf-box, texte courant au lieu d'une liste. */ .vf-box--complement p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); margin:0 0 10px; } .vf-box--complement p:last-child{ margin-bottom:0; } .vf-box--complement strong{ color:var(--noir); font-weight:600; } /* ONGLETS D'ANNÉE du tableau des départs (B6, Nicolas 19/07) : 2026 / 2027. Composant informatif-cliquable : angles doux, jaune = année affichée. */ .voy-annees{ display:flex; justify-content:center; gap:8px; margin:0 0 18px; } .voy-annee{ font:inherit; font-size:var(--fs-small); font-weight:700; letter-spacing:.04em; color:var(--noir); background:var(--blanc); border:1.5px solid rgba(0,0,0,.10); border-radius:10px; padding:9px 22px; cursor:pointer; transition:background .18s, border-color .18s, color .18s; } .voy-annee:hover{ border-color:var(--jaune-d); } .voy-annee.is-active{ background:var(--jaune); border-color:var(--jaune); } /* Accompagnateur cliquable dans le tableau des départs (B7, 19/07) : lien discret, souligné au survol. */ a.voy-table__guide{ color:inherit; text-decoration:none; } a.voy-table__guide:hover{ color:var(--jaune-d); } a.voy-table__guide:hover .voy-table__guide-pic{ box-shadow:0 0 0 2px var(--jaune); } /* ============================ GALERIE PLEIN ÉCRAN PARTAGÉE (B8, 19/07) ============================ UN seul composant pour tous les diaporamas (js/galerie.js). Le bouton « agrandir » est posé automatiquement sur chaque conteneur marqué data-galerie. */ /* (bouton « agrandir » RETIRÉ le 19/07 - le clic sur la photo ouvre la galerie) */ html.gal-open, html.gal-open body{ overflow:hidden; } /* le fond ne défile plus */ .gal-lb{ position:fixed; inset:0; z-index:99998; display:grid; grid-template-rows:minmax(0,1fr) auto auto; align-items:center; justify-items:center; background:rgba(8,8,8,.97); padding:clamp(16px,3vw,40px); } .gal-lb[hidden]{ display:none; } .gal-lb__scene{ margin:0; width:100%; height:100%; min-height:0; display:grid; place-items:center; } .gal-lb__img{ max-width:100%; max-height:calc(100vh - 230px); object-fit:contain; border-radius:6px; box-shadow:0 30px 90px -30px rgba(0,0,0,.9); } .gal-lb__compteur{ margin:12px 0 0; font-size:var(--fs-small); color:rgba(255,255,255,.65); letter-spacing:.06em; } .gal-lb__fermer, .gal-lb__nav{ position:absolute; z-index:5; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.12); color:var(--blanc); transition:background .18s, color .18s, transform .18s; } .gal-lb__fermer{ top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); width:48px; height:48px; } .gal-lb__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; } .gal-lb__nav--prev{ left:clamp(8px,2.5vw,34px); } .gal-lb__nav--next{ right:clamp(8px,2.5vw,34px); } .gal-lb__fermer:hover, .gal-lb__nav:hover{ background:var(--jaune); color:var(--noir); } .gal-lb__nav:hover{ transform:translateY(-50%) scale(1.08); } .gal-lb__fermer svg, .gal-lb__nav svg{ width:24px; height:24px; } /* timeline de vignettes */ .gal-lb__timeline{ display:flex; gap:8px; margin-top:12px; max-width:100%; padding:4px; overflow-x:auto; overscroll-behavior:contain; scrollbar-width:thin; } .gal-lb__vig{ flex:0 0 auto; width:88px; height:60px; padding:0; border:0; border-radius:6px; overflow:hidden; cursor:pointer; opacity:.45; outline:2px solid transparent; transition:opacity .18s, outline-color .18s; background:none; } .gal-lb__vig img{ width:100%; height:100%; object-fit:cover; display:block; } .gal-lb__vig:hover{ opacity:.8; } .gal-lb__vig.is-active{ opacity:1; outline-color:var(--jaune); } /* une seule photo : ni flèches ni timeline */ .gal-lb--solo .gal-lb__nav, .gal-lb--solo .gal-lb__timeline, .gal-lb--solo .gal-lb__compteur{ display:none; } .gal-lb--solo .gal-lb__img{ max-height:calc(100vh - 80px); } @media (max-width:640px){ .gal-lb__vig{ width:64px; height:44px; } .gal-lb__img{ max-height:calc(100vh - 190px); } .gal-lb__nav{ width:44px; height:44px; } } @media (prefers-reduced-motion: reduce){ .gal-lb__fermer, .gal-lb__nav, .gal-lb__vig{ transition:none; } } /* photo d'un diaporama : cliquable pour ouvrir la galerie plein écran (B8) */ [data-galerie] img{ cursor:zoom-in; } /* Diaporama « Les dernières images de ce voyage » (B9, 19/07) : réutilise la scène du carrousel partagé (.gp-gal__stage) ; seule la peau de section change. */ .voy-images{ background:var(--blanc); } .voy-images[hidden]{ display:none; } /* Diaporama au milieu d'un récit (B10, 19/07) : réutilise la scène du carrousel partagé, dans la largeur du corps de texte. */ .rcp-diapo{ margin:clamp(40px,5vw,64px) 0; } .rcp-diapo__stage{ height:clamp(320px,38vw,520px); margin-top:0; } .rcp-diapo__stage .gp-gal__card{ width:auto; height:clamp(300px,36vw,480px); aspect-ratio:3/2; } .rcp-diapo__stage .gp-gal__nav{ width:46px; height:46px; } .rcp-diapo__stage .gp-gal__nav--prev{ left:clamp(4px,2vw,18px); } .rcp-diapo__stage .gp-gal__nav--next{ right:clamp(4px,2vw,18px); } .rcp-diapo__leg{ margin-top:14px; text-align:center; font-size:var(--fs-small); color:var(--noir-50); } /* ONGLETS DE TYPE DE VOYAGE du catalogue (B11, 19/07) : barre au-dessus des filtres, sur le fond noir de la section. Jaune = onglet actif ; onglet sans voyage grisé et non cliquable. */ .of-types{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:22px 0 10px; } .of-type{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small); font-weight:600; color:var(--blanc); background:rgba(255,255,255,.08); border:1.5px solid transparent; border-radius:999px; padding:9px 18px; cursor:pointer; transition:background .18s, color .18s, border-color .18s; } .of-type:hover{ border-color:rgba(244,183,33,.55); } .of-type.is-active{ background:var(--jaune); color:var(--noir); border-color:var(--jaune); } .of-type__n{ font-size:var(--fs-label); font-weight:700; opacity:.65; } .of-type.is-vide{ opacity:.32; cursor:default; } .of-type.is-vide:hover{ border-color:transparent; } /* ============================ TEINTES PAR TYPE DE VOYAGE (C2, 19/07) ============================ Aucune teinte n'existe sur le site d'origine (vérifié) : c'est un apport de design K2, dérivé des couleurs de la charte (décision Fix) — on ne sort pas de la palette. · STAGE -> dérivé du JAUNE (--jaune #f4b721) · EXTENSION + SUR-MESURE -> dérivé du VERT (--vert #5c7a3f), teinte commune aux deux Destination et Circuit gardent le rendu standard. Réglage en UN endroit : les 4 variables. */ :root{ --teinte-stage: #fbe7b4; /* jaune charte éclairci (intensité relevée, retour Fix 20/07) */ --teinte-stage-fil: #e0a510; /* = --jaune-d */ --teinte-sm: #cfdcbd; /* vert charte éclairci (intensité relevée 2 fois, retours Fix 20/07) */ --teinte-sm-fil: #5c7a3f; /* = --vert */ } .trip--stage.trip--light, .trip--stage{ background:var(--teinte-stage); } .trip--stage .trip__body{ background:transparent; } .trip--surmesure.trip--light, .trip--surmesure{ background:var(--teinte-sm); } .trip--surmesure .trip__body{ background:transparent; } /* filet supérieur = signal discret du type, sans alourdir la carte */ .trip--stage .trip__media{ box-shadow:inset 0 4px 0 var(--teinte-stage-fil); } .trip--surmesure .trip__media{ box-shadow:inset 0 4px 0 var(--teinte-sm-fil); } /* fiche voyage : même logique sur la 1re section (rappel de la teinte de la vignette) */ .vf-sejour.is-stage{ background:var(--teinte-stage); } .vf-sejour.is-surmesure{ background:var(--teinte-sm); } /* FORMULAIRE D'INSCRIPTION - étape « Assurances & paiement » (C3, 19/07) : formules EMPILÉES, prix aligné à droite, lien PDF du contrat par formule. */ .ins-aide{ display:block; margin-top:6px; font-style:normal; font-size:var(--fs-label); line-height:1.45; color:var(--noir-50); } .ins-packs--liste{ display:flex; flex-direction:column; gap:10px; width:100%; grid-column:1 / -1; } .ins-packs--liste .ins-pack{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:14px 18px; } .ins-packs--liste .ins-pack{ grid-template-rows:auto; } .ins-pack__txt{ display:block; min-width:0; } .ins-pack__txt .ins-pack__t{ display:block; font-size:var(--fs-small); } .ins-pack__txt .ins-pack__d{ display:block; margin-top:3px; font-size:var(--fs-label); } .ins-pack__prix{ justify-self:end; text-align:right; font-size:var(--fs-small); font-weight:700; color:var(--noir); white-space:nowrap; } .ins-pack__prix em{ display:block; font-style:normal; font-weight:400; font-size:var(--fs-label); color:var(--noir-50); } .ins-pack__pdf{ grid-column:2 / -1; justify-self:start; display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:var(--fs-label); font-weight:600; color:var(--noir); text-decoration:underline; text-underline-offset:3px; } .ins-pack__pdf:hover{ color:var(--jaune-d); } .ins-pack__pdf svg{ width:15px; height:15px; } .ins-packs--liste .ins-pack--decline{ grid-template-columns:auto 1fr; } @media (max-width:620px){ .ins-packs--liste .ins-pack{ grid-template-columns:auto 1fr; } .ins-pack__prix{ grid-column:2; justify-self:start; text-align:left; } } /* pastille de type : teintes cohérentes avec les fiches colorées (C2) */ .trip__mode--stage{ border-color:var(--teinte-stage-fil); color:var(--teinte-stage-fil); } .trip__mode--sm{ border-color:var(--teinte-sm-fil); color:var(--teinte-sm-fil); } /* PAGE SUR-MESURE (G1, 19/07) : socle standard, 3 variantes locales seulement. */ .sm-cta{ margin-top:28px; text-align:center; } .sm-etapes{ grid-template-columns:repeat(3, 1fr); } #sm-grille .of-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px,2vw,30px); } @media (max-width:900px){ .sm-etapes{ grid-template-columns:1fr; } #sm-grille .of-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ #sm-grille .of-grid{ grid-template-columns:1fr; } } /* EXTENSIONS de la fiche voyage (G2, 19/07) : bandeau pleine largeur après les départs. Grille centrée : 1 à 3 extensions selon la destination. */ .voy-ext{ background:var(--teinte-sm); } .voy-ext[hidden]{ display:none; } .voy-ext__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,2vw,30px); } .voy-ext__grid .trip{ flex:0 1 clamp(280px, 30%, 380px); } /* EXTENSIONS dans le formulaire d'inscription (G2, 19/07) : cases à cocher, une par extension réellement rattachée au voyage. Bloc masqué si le voyage n'en a aucune. */ .ins-ext{ grid-column:1 / -1; } .ins-ext[hidden]{ display:none; } .ins-ext__ligne{ align-items:flex-start; padding:12px 14px; margin-top:8px; background:var(--teinte-sm); border-radius:10px; } .ins-ext__ligne em{ display:block; margin-top:2px; font-style:normal; font-size:var(--fs-label); color:var(--noir-50); } /* onglet d'année sans départ programmé (B6 / retour Fix 20/07) : visible mais estompé */ .voy-annee.is-vide{ opacity:.45; } .voy-annee.is-vide.is-active{ opacity:1; }