/* ============================================================================= pages/voyage.css — LA FICHE VOYAGE (`voyage_detail.php`, `/{lang}/voyage/{slug}`). ============================================================================= ⚠️⚠️ CE FICHIER N'A PAS ETE EXTRAIT PAR PLAGES DE LIGNES. Les regles de la fiche voyage sont EPARPILLEES dans `style.css` : un bloc l. 1519-1820, puis des ajouts jusqu'a la l. 3142 (hero l. 2837-2866, onglets d'annee l. 2975-2985, extensions l. 3127…) — 1 300 lignes d'ecart. Une plage aurait perdu la moitie de la page. Elles ont ete selectionnees PAR CLASSE (toutes les classes `vf-*` / `voy-*` du balisage de `voyage.html` et de celles que `voyage.js` fabrique), regle par regle, dans `style.css` ET `mobile.css`. Chaque regle porte sa ligne d'origine. ⚠️ `mobile.css` de la maquette a une ACCOLADE NON FERMEE (409 ouvrantes, 408 fermantes) : son dernier bloc n'est ferme que par la fin du fichier. Le navigateur le tolere ; un extracteur naif s'y arrete. Rien de ce bloc ne concerne cette page. CE QUI N'EST PAS ICI, ET POURQUOI — chacune de ces regles existe dans la maquette : · `.vf-hero` (base), `.vf-contact`, `.vf-info` (base), `.on-guide`, `.cta-trio` — composants PARTAGES, dans `blocs/hero-page.css`, `blocs/vf-contact.css`, `blocs/vf-info.css` et `components.css`. Les recopier ici ferait deux copies qui divergent ; · `.on-lien` — composant COMMUN de la maquette (« a poser sur tout nom d'entite cliquable du site », `style.css:1634`), donc `components.css` ; · `.vf-jour--rencontre`, `.vf-jour__tag` — les rencontres DATEES de la frise : Q38, non rendues. A reprendre avec elle (`style.css` l. 1704-1717) ; · `.vf-box__liste`, `.vf-box__opts` — les encadres « Bon a savoir » et « En option » de la page modele, que la maquette MASQUE sur ses 109 pages derivees (`voyage.js:233`) ; · `.voy-ext*` — section non rendue (extensions vides, D89) ; `.voy-images*` vit dans `blocs/galerie.css` depuis le 2026-10-07 (D144) ; · ✅ `.vf-sejour.is-stage` / `.is-surmesure` — la teinte par TYPE : PORTÉE le 2026-10-07 (D145) en fin de fichier, depuis le type STOCKÉ et non deviné. ⚠️ Du style que rien n'habite est l'un des defauts que les controles ne voient pas : il n'a pas ete recopie « pour plus tard ». ⚠️ TROIS SELECTEURS D'IDENTIFIANT ONT ETE RENOMMES — notre convention ne style aucun `id` : `#vfInfosGrid` → `.vf-infos__grid--pratiques`, `#vfMap` → `.vf-map`, et les surcharges GLOBALES de Leaflet (`.leaflet-control-zoom a`) sont bornees a `.vf-map`. ============================================================================= */ /* style.css l. 1524 */ .voy-infos{ background:var(--blanc); } /* style.css l. 1529 */ .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); } /* style.css l. 1532 */ .voy-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); color:var(--noir); } /* style.css l. 1533 */ .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; } /* style.css l. 1536 */ .voy-table td{ padding:20px 16px; vertical-align:middle; white-space:nowrap; } /* style.css l. 1537 */ .voy-table td strong{ font-size:var(--fs-h3); } /* style.css l. 1539 */ .voy-table__guide{ display:inline-flex; align-items:center; gap:12px; } /* style.css l. 1540 */ .voy-table__guide-pic{ width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; } /* style.css l. 1543 */ .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; } /* style.css l. 1545 */ .voy-table__tag::before{ content:"✓"; font-size:var(--fs-small); } /* style.css l. 1546 */ .voy-table__tag--vert{ color:#2e7d46; } /* style.css l. 1549 */ .voy-table__tag--rouge{ color:#e0492e; } /* style.css l. 1550 */ .voy-table__tag--rouge::before{ content:"!"; } /* style.css l. 1551 */ .voy-table__tag--gris{ color:var(--noir-50); } /* style.css l. 1552 */ .voy-table__tag--gris::before{ content:"×"; } /* style.css l. 1553 */ .voy-table__btn{ padding:10px 20px; } /* style.css l. 1554 */ .voy-table__actions{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; } /* style.css l. 1555 */ .vf-duo__contact{ margin-top:16px; } /* style.css l. 1558 */ .voy-liste{ display:flex; flex-direction:column; gap:12px; font-size:var(--fs-small); line-height:1.55; color:var(--noir); } /* style.css l. 1559 */ .voy-liste li{ padding-left:30px; position:relative; } /* style.css l. 1560 */ .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); } /* style.css l. 1562 */ .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); } /* style.css l. 1568 */ .vf-prixdet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4vw,52px); } /* style.css l. 1570 */ .vf-prixdet[hidden]{ display:none; } /* style.css l. 1571 */ .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); } /* style.css l. 1573 */ .vf-prixdet__col--in{ border-top-color:#2e7d46; } /* style.css l. 1574 */ .vf-prixdet__col--out{ border-top-color:var(--jaune); } /* style.css l. 1575 */ .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; } /* style.css l. 1577 */ .vf-prixdet__col--in .vf-prixdet__titre{ color:#2e7d46; } /* style.css l. 1578 */ .vf-prixdet__col--out .vf-prixdet__titre{ color:var(--jaune-d); } /* style.css l. 1579 */ .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; } /* style.css l. 1581 */ .vf-prixdet__col--in .vf-prixdet__titre::before{ content:"✓"; background:#2e7d46; } /* style.css l. 1582 */ .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; } /* style.css l. 1583 */ @media (max-width:720px){ .vf-prixdet{grid-template-columns:1fr;} } /* style.css l. 1590 */ .voy-faune{ display:grid; grid-template-columns:.9fr 1.1fr; border-radius:22px; overflow:hidden; background:var(--noir); color:var(--blanc); min-height:340px; } /* style.css l. 1592 */ .voy-faune__pic{ background:#241d12 center/cover no-repeat; min-height:260px; } /* style.css l. 1593 */ .voy-faune__txt{ padding:clamp(28px,3.4vw,56px); align-self:center; } /* style.css l. 1594 */ .voy-faune__txt .eyebrow{ color:var(--jaune); } /* style.css l. 1595 */ .voy-faune__titre{ font-size:clamp(28px,2.8vw,42px); margin:10px 0 16px; color:var(--blanc); } /* style.css l. 1596 */ .voy-faune__txt p{ font-size:var(--fs-body); line-height:1.65; color:rgba(255,255,255,.85); } /* style.css l. 1597 */ @media (max-width:900px){ .voy-faune{grid-template-columns:1fr;} } /* style.css l. 1618 */ .vf-duo__wrap{ position:relative; z-index:5; margin-top:-90px; } /* style.css l. 1619 */ .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); } /* style.css l. 1621 */ .vf-duo__left{ background:var(--blanc); color:var(--noir); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; } /* style.css l. 1623 */ .vf-duo__label{ font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--noir-50); margin-bottom:18px; } /* style.css l. 1626 */ .vf-rencontres{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; } /* style.css l. 1627 */ .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); } /* style.css l. 1630 */ .vf-rencontres em{ display:block; font-style:normal; font-size:var(--fs-label); color:var(--noir-50); margin-top:3px; } /* style.css l. 1631 */ .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); } /* style.css l. 1633 */ .vf-rencontre__ico svg{ width:48px; height:48px; } /* style.css l. 1637 */ .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; } /* style.css l. 1640 */ .vf-rencontre__lien:hover{ border-bottom:1.5px solid var(--jaune); } /* style.css l. 1641 */ .vf-rencontre__lien:focus-visible{ outline:2px solid var(--jaune); outline-offset:2px; border-radius:1px; } /* style.css l. 1642 */ @media (max-width:640px){ .vf-rencontres{grid-template-columns:1fr;} } /* style.css l. 1644 */ .vf-duo__right{ background:var(--noir); color:var(--blanc); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; gap:10px; } /* style.css l. 1646 */ .vf-duo__duree{ font-size:var(--fs-h3); color:rgba(255,255,255,.85); } /* style.css l. 1647 */ .vf-duo__duree strong{ color:var(--blanc); } /* style.css l. 1648 */ .vf-duo__dates{ font-size:var(--fs-small); color:rgba(255,255,255,.6); } /* style.css l. 1649 */ .vf-duo__prix{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); margin:10px 0 4px; } /* style.css l. 1651 */ .vf-duo__prix strong{ display:block; font-size:clamp(34px,3vw,46px); font-weight:800; letter-spacing:-.5px; color:var(--jaune); text-transform:none; } /* style.css l. 1653 */ .vf-duo__prix span{ text-transform:none; letter-spacing:0; } /* style.css l. 1654 */ .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; } /* style.css l. 1656 */ .vf-avantages{ display:flex; flex-direction:column; gap:8px; } /* style.css l. 1657 */ .vf-avantages li{ font-size:var(--fs-small); line-height:1.45; color:rgba(255,255,255,.85); padding-left:22px; position:relative; } /* style.css l. 1659 */ .vf-avantages li::before{ content:"✓"; position:absolute; left:0; color:var(--jaune); font-weight:700; } /* style.css l. 1662 */ .vf-duo__actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:12px; margin-top:auto; padding-top:22px; } /* style.css l. 1664 */ .vf-duo__actions .vf-duo__contact{ margin-top:0; } /* style.css l. 1665 */ @media (max-width:560px){ .vf-duo__actions{flex-direction:column;} .vf-duo__actions .btn{width:100%; max-width:300px;} } /* style.css l. 1669 */ .vf-reassurance{ background:var(--beige-footer); } /* style.css l. 1670 */ .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); } /* style.css l. 1672 */ .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); } /* style.css l. 1675 */ .vf-reassurance__row svg{ width:36px; height:36px; fill:var(--jaune-d); flex:0 0 auto; } /* style.css l. 1676 */ @media (max-width:900px){ .vf-reassurance__row{grid-template-columns:repeat(2, 1fr);} } /* style.css l. 1679 */ .vf-tabs{ background:var(--noir); position:sticky; top:var(--header-h, 112px); z-index:300; margin-top:80px; } /* style.css l. 1680 */ .vf-tabs__bar{ display:none; } /* style.css l. 1681 */ .vf-tabs__inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 34px; padding-top:16px; padding-bottom:16px; } /* style.css l. 1683 */ .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); } /* style.css l. 1685 */ .vf-tabs a:hover{ color:var(--jaune); } /* style.css l. 1686 */ .vf-tabs a.is-active, .vf-tabs a.is-active:hover{ color:var(--jaune); } /* style.css l. 1687 */ .vf-tabs__contact{ color:var(--blanc); } /* style.css l. 1689 */ .vf-sejour{ background:var(--creme); } /* style.css l. 1690 */ .vf-sejour__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,3.4vw,64px); align-items:start; } /* style.css l. 1692 */ .vf-timeline{ position:relative; padding-left:8px; } /* style.css l. 1693 */ .vf-timeline::before{ content:""; position:absolute; left:56px; top:10px; bottom:10px; width:2px; background:rgba(14,14,14,.14); } /* style.css l. 1695 */ .vf-jour{ position:relative; display:flex; gap:26px; padding:0 0 34px; } /* style.css l. 1698 */ .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; } /* style.css l. 1701 */ .vf-jour__body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px); color:var(--jaune-d); margin-bottom:8px; } /* style.css l. 1703 */ .vf-jour__body p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } /* style.css l. 1715 */ .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; } /* style.css l. 1719 */ .vf-side{ position:sticky; top:calc(var(--header-h, 112px) + var(--vf-tabs-h, 56px) + 20px); display:flex; flex-direction:column; gap:20px; } /* ÉCART À LA MAQUETTE (fiche 2026-11-12 n° 6) : elle collait la colonne à 20 px sous l'EN-TÊTE, sans compter la barre noire des onglets, collée au même endroit — qui recouvrait donc le titre de la carte « Les étapes du circuit ». `--vf-tabs-h` est MESURÉE par `voyage.js` (les onglets passent sur plusieurs lignes en rétrécissant) ; 56 px n'est que le repli sans JavaScript. */ /* LES ANCRES DES ONGLETS se calent sous l'en-tête RÉDUIT et la barre (même fiche). Sur écran large aucune règle ne le faisait, et la règle mobile (72 px, `common.css`) ne comptait que l'en-tête. ⚠️ `--nav-h-collapsed` et non `--header-h` : un clic depuis le haut de page réduit l'en-tête pendant le saut ; caler sur la hauteur d'avant laisserait 28 px de vide. Le scrollspy, qui lit le bas de la barre, désigne alors bien la section visée. */ .vf-content section[id]{ scroll-margin-top:calc(var(--nav-h-collapsed, 84px) + var(--vf-tabs-h, 56px)); } /* style.css l. 1721 */ .vf-box{ background:var(--blanc); border-radius:18px; padding:24px 24px 26px; box-shadow:0 14px 40px rgba(0,0,0,.08); } /* style.css l. 1723 */ .vf-box h4{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--noir-50); margin-bottom:14px; } /* style.css l. 1725 */ .vf-box h4:not(:first-child){ margin-top:20px; } /* style.css l. 1733 */ .vf-map{ height:380px; border-radius:12px; overflow:hidden; z-index:0; } /* style.css l. 1735 */ .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); } /* style.css l. 1738 */ .vf-tip::before{ display:none; } /* style.css l. 1739 */ .vf-tip--on{ background:var(--jaune); border-color:var(--jaune-d); font-weight:800; } /* style.css l. 1744 */ .vf-map__note{ margin-top:10px; font-size:var(--fs-label); color:var(--noir-50); min-height:2.6em; } /* style.css l. 1770 */ @media (max-width:980px){ .vf-duo, .vf-sejour__grid{grid-template-columns:1fr;} .vf-side{position:static;} .vf-timeline::before{left:48px;} .vf-duo__wrap{margin-top:-60px;} } /* style.css l. 1792 */ .vf-infos__grid--pratiques{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,28px); align-items:start; } /* style.css l. 1794 */ .vf-infos__grid--pratiques .vf-info{ text-align:left; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:26px 28px; } /* style.css l. 1796 */ .vf-infos__grid--pratiques .vf-info__ico{ grid-row:span 2; width:52px; height:52px; margin:0; align-self:start; } /* style.css l. 1797 */ .vf-infos__grid--pratiques .vf-info__ico svg{ width:26px; height:26px; } /* style.css l. 1798 */ .vf-infos__grid--pratiques .vf-info h3{ align-self:center; margin:0; } /* style.css l. 1799 */ .vf-infos__grid--pratiques .vf-info p{ grid-column:2; margin:0; word-break:break-word; } /* style.css l. 1800 */ .vf-infos__grid--pratiques .vf-info a{ color:var(--jaune-d); text-decoration:underline; } /* style.css l. 1802 */ .vf-infos__grid--pratiques .vf-info__full{ display:none; } /* style.css l. 1803 */ .vf-infos__grid--pratiques .vf-info__txt.is-open .vf-info__short{ display:none; } /* style.css l. 1804 */ .vf-infos__grid--pratiques .vf-info__txt.is-open .vf-info__full{ display:inline; } /* style.css l. 1805 */ .vf-infos__grid--pratiques .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; } /* style.css l. 1808 */ .vf-infos__grid--pratiques .vf-info__more:hover{ color:var(--noir); } /* style.css l. 1809 */ @media (max-width:720px){ .vf-infos__grid--pratiques{grid-template-columns:1fr;} } /* style.css l. 1818 */ .vf-duo__guide{ flex-wrap:wrap; padding:14px 0 4px; border-top:1px solid rgba(255,255,255,.14); margin-top:6px; } /* style.css l. 1819 */ .vf-duo__guide .on-guide__pic{ border-color:var(--jaune); } /* style.css l. 2243 */ .voy-table__guide[data-guide]:hover{ color:var(--jaune-d); } /* style.css l. 2837 */ .vf-hero__retour{ margin-top:22px; color:var(--blanc); } /* style.css l. 2841 */ .vf-hero--voyage{ align-items:stretch; } /* style.css l. 2842 */ .vf-hero--voyage .vf-hero__inner{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; } /* style.css l. 2848 */ .vf-hero--voyage{ --retour-gap:20px; padding-top:calc(var(--nav-h) + 40px - var(--retour-gap)); } /* style.css l. 2849 */ .vf-hero--voyage .vf-hero__retour{ margin:0 0 var(--retour-gap); } /* style.css l. 2855 */ .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); } /* style.css l. 2858 */ .vf-hero__diff-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0; } /* style.css l. 2859 */ .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); } /* style.css l. 2861 */ .vf-hero__diff-head b{ font-size:var(--fs-h3); font-weight:700; color:var(--jaune); } /* style.css l. 2862 */ .vf-hero__diff-pattes{ display:inline-flex; gap:5px; } /* style.css l. 2863 */ .vf-hero__diff-pattes svg{ width:26px; height:26px; fill:var(--jaune); } /* style.css l. 2864 */ .vf-hero__diff-pattes svg.is-off{ fill:var(--blanc); opacity:.3; } /* style.css l. 2865 */ .vf-hero__diff-txt{ margin:8px 0 0; font-size:var(--fs-small); line-height:1.5; color:rgba(255,255,255,.88); } /* style.css l. 2866 */ @media (max-width:640px){ .vf-hero__diff{padding:12px 16px 14px;} .vf-hero__diff-pattes svg{width:22px; height:22px;} } /* style.css l. 2969 */ .vf-box--complement p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); margin:0 0 10px; } /* style.css l. 2970 */ .vf-box--complement p:last-child{ margin-bottom:0; } /* style.css l. 2971 */ .vf-box--complement strong{ color:var(--noir); font-weight:600; } /* style.css l. 2975 */ .voy-annees{ display:flex; justify-content:center; gap:8px; margin:0 0 18px; } /* style.css l. 2976 */ .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; } /* style.css l. 2979 */ .voy-annee:hover{ border-color:var(--jaune-d); } /* style.css l. 2980 */ .voy-annee.is-active{ background:var(--jaune); border-color:var(--jaune); } /* style.css l. 2983 */ a.voy-table__guide{ color:inherit; text-decoration:none; } /* style.css l. 2984 */ a.voy-table__guide:hover{ color:var(--jaune-d); } /* style.css l. 2985 */ a.voy-table__guide:hover .voy-table__guide-pic{ box-shadow:0 0 0 2px var(--jaune); } /* style.css l. 3141 */ .voy-annee.is-vide{ opacity:.45; } /* style.css l. 3142 */ .voy-annee.is-vide.is-active{ opacity:1; } /* mobile.css l. 514 */ @media (max-width:1024px){ .vf-sejour__grid > *, .vf-duo > *{min-width:0;} .vf-jour__body{min-width:0;} } /* mobile.css l. 782 */ @media (hover:none){ .voy-annee:hover{border-color:rgba(0,0,0,.10);} a.voy-table__guide:hover{color:inherit;} a.voy-table__guide:hover .voy-table__guide-pic{box-shadow:none;} .vf-rencontre__lien:hover{border-bottom-color:transparent;} .voy-table__guide[data-guide]:hover{color:inherit;} } /* mobile.css l. 1336 */ @media (max-width:1024px){ .vf-duo__actions, .voy-table__actions{justify-content:center; flex-wrap:wrap;} } /* mobile.css l. 1799 */ @media (max-width:1024px){ .vf-hero__retour{display:none;} .vf-hero--voyage{padding-top:calc(var(--nav-h) + 40px);} } /* mobile.css l. 1934 */ @media (max-width:1024px){ .voy-table__wrap{overflow-x:visible; width:100%; margin-inline:0; padding:6px;} .voy-table thead{display:none;} .voy-table, .voy-table tbody, .voy-table tr, .voy-table td{display:block; width:auto;} .voy-table tr{padding:14px 14px 12px; border-bottom:1px solid var(--creme-2);} .voy-table tr:last-child{border-bottom:none;} .voy-table td{display:flex; align-items:baseline; justify-content:space-between; gap:14px; white-space:normal; text-align:right; padding:5px 0; border:none;} .voy-table td::before{flex:0 0 auto; text-align:left; font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--noir-50);} .voy-table td:nth-child(1)::before{content:"Référence";} .voy-table td:nth-child(2)::before{content:"Dates";} .voy-table td:nth-child(3)::before{content:"Prix / pers.";} .voy-table td:nth-child(4)::before{content:"Accompagnateur";} .voy-table td:nth-child(5)::before{content:"Disponibilité";} .voy-table td:nth-child(6){display:block; padding-top:12px;} .voy-table td:nth-child(6)::before{display:none;} .voy-table__guide{justify-content:flex-end; text-align:right;} } /* mobile.css l. 1982 */ @media (max-width:1024px){ .vf-infos__grid--pratiques .vf-info{display:block; text-align:center;} .vf-infos__grid--pratiques .vf-info__ico{margin:0 auto 14px;} } /* mobile.css l. 2007 */ @media (max-width:1024px){ .vf-tabs__inner{row-gap:2px;} .vf-tabs a{padding:2px 0;} } /* --------------------------------------------------------------------------- LEAFLET — `style.css` l. 1740-1743, BORNE A `.vf-map`. La maquette les ecrit en global ; ici une seule carte existe, mais une regle globale sur une bibliotheque mord partout ou elle sera chargee un jour. --------------------------------------------------------------------------- */ .vf-map .leaflet-control-zoom a{ color:var(--noir) !important; border-radius:8px !important; } .vf-map .leaflet-control-zoom a:hover{ background:var(--jaune) !important; } .vf-map.leaflet-container{ font-family:var(--sans); } /* --------------------------------------------------------------------------- LE CHAPEAU DE LA FRISE — ⚠️ HORS MAQUETTE, et c'est la seule regle de ce fichier qui l'est. La SOURCE (export WordPress) porte un bloc d'introduction avant « Jour 1 » sur 95 voyages ; la maquette n'a pas ce cas. Il reprend la typographie de `.vf-jour__body p`, sans la carte. --------------------------------------------------------------------------- */ .vf-sejour__intro{ max-width:780px; margin:0 0 clamp(28px,3vw,44px); } .vf-sejour__intro h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px); color:var(--noir); margin-bottom:8px; } .vf-sejour__intro p, .vf-sejour__intro li{ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); } .vf-sejour__intro p + p{ margin-top:12px; } .vf-sejour__intro--fin{ margin:10px 0 0 122px; max-width:none; } .vf-sejour__intro--fin p{ font-size:var(--fs-small); } .vf-jour__body p + p, .vf-jour__body ul{ margin-top:10px; } .vf-jour__body ul{ padding-left:18px; list-style:disc; } .vf-jour__body li{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); } @media (max-width:640px){ .vf-sejour__intro--fin{ margin-left:0; } } /* --------------------------------------------------------------------------- ⚠️ ECART ASSUME — LE LIBELLE D'UNE JOURNEE PEUT ETRE LONG, ET LA PASTILLE NE L'ETAIT PAS. La maquette ne porte que « Jour 4 » ou « Jours 2-3 » dans une pastille de 96 px a hauteur fixe d'une ligne. La SOURCE va jusqu'a 21 caracteres (« Jours 8 - 9 - 10 - 11 ») : mesure le 2026-10-07, « JOURS 2 A 6 » debordait deja de son cadre. On laisse le libelle passer a la ligne DANS les 96 px plutot que d'elargir la pastille : la largeur fixe est ce qui aligne la frise et son trait vertical (`.vf-timeline::before`, left:56px). --------------------------------------------------------------------------- */ .vf-jour__num{ white-space:normal; overflow-wrap:anywhere; line-height:1.25; padding:8px 6px; border-radius:18px; } /* --------------------------------------------------------------------------- ⚠️ UN `tbody` PAR ANNEE, ET LA REGLE MOBILE LES REMONTRAIT TOUS — mesure le 2026-10-07 a 390 px : 2026 et 2027 s'affichaient l'un sous l'autre. La maquette n'a qu'UN `tbody`, que son JS reecrit a chaque onglet ; nous rendons toutes les annees cote serveur et n'en montrons qu'une avec `hidden`. Or `mobile.css:1934` passe `.voy-table tbody` en `display:block`, et une declaration d'auteur l'emporte sur le `display:none` que le navigateur attache a `[hidden]`. ⇒ Le rendre explicite, sur ecran comme sur telephone. --------------------------------------------------------------------------- */ .voy-table tbody[hidden]{ display:none !important; } /* style.css l. 3080-3081 — la teinte du TYPE rappelée sur la 1re section de la fiche (D145). Les variables sont dans `components.css`, avec les teintes des cartes `.trip`. */ .vf-sejour.is-stage{ background:var(--teinte-stage); } .vf-sejour.is-surmesure{ background:var(--teinte-sm); } /* --------------------------------------------------------------------------- EN VIDEO (D186) — section propre apres « Les dernieres images de ce voyage ». La maquette n'a aucun bloc video (Q36) : seul le cadre est a nous, l'en-tete reprend `sec-head`. Un seul consommateur, donc ici et non dans `css/blocs/`. · Fond CREME : la galerie qui precede est blanche, l'Esprit du voyage qui suit est sombre — la creme separe les deux sections visuelles sans les fondre. · Le cadre prend le FORMAT REEL de la video (`--voy-video-ratio`, pose par la vue depuis l'oEmbed) : un `