/* Fenua'p — Réservations (surface desktop fenuapbook). Design en CONTINUITÉ avec la vitrine : mêmes tokens (lagon/corail/or/sable), mêmes polices (Bricolage Grotesque display + Plus Jakarta Sans), mais layout dédié « booking » : recherche, grilles de fiches, overlay détail + panneau de réservation. */ @font-face{font-family:'Bricolage';src:url('/fonts/bricolage-800.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Bricolage';src:url('/fonts/bricolage-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'PJS';src:url('/fonts/pjs-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'PJS';src:url('/fonts/pjs-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'PJS';src:url('/fonts/pjs-800.woff2') format('woff2');font-weight:800;font-display:swap} /* Le coeur de la fiche : mettre de cote, comme partout ailleurs sur le web. */ .ov-fav{display:inline-flex;align-items:center;gap:7px;margin-left:auto;margin-right:8px; padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--shell); color:var(--inkSoft);cursor:pointer;font:700 13.5px/1 'PJS',system-ui,sans-serif} .ov-fav[hidden]{display:none} .ov-fav svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} .ov-fav:hover{border-color:var(--coral);color:var(--coralTxt)} .ov-fav.on{border-color:var(--coral);background:var(--coralSoft);color:var(--coralTxt)} .ov-fav.on svg{fill:var(--coral);stroke:var(--coral)} .ov-fav[disabled]{opacity:.6;cursor:progress} /* ==FP-CSS-MENU-DEBUT== (extrait par scripts/construire-pro.py pour les pages) LE MENU DU COMPTE. Une seule feuille pour toutes les pages du book : le catalogue l'a en ligne, les pages fabriquees la recoivent par la fabrique. La forme change avec la place — panneau ancre sous la pastille sur un ordinateur, feuille qui monte du bas sur un telephone — mais c'est le MEME composant : une seule ouverture, une seule fermeture, un seul DOM. */ .mc{position:relative;display:flex;align-items:center} /* DANS LE COIN, ET REDUITE A SON AVATAR (porteur, 14/09 : « l'emplacement de mon compte est un peu trop gros. Fais ça dans un coin à droite sous forme de menu […] le nom est affiché […] la taille, ce n'est pas beau »). Elle faisait 146 x 40 px et portait le nom en clair, au MILIEU de la barre, avant la langue et le bouton de téléchargement. Une fois connecté, l'avatar EST l'identité : le nom n'apprend rien qu'on ne sache déjà, et il vit dans le menu qui s'ouvre. Déconnecté, le libellé reste — la porte du compte ne se devine pas (règle 31), et une icône seule n'invite personne à se connecter. */ /* La pastille du compte suit la MEME grammaire que ses deux voisines : 38 px de haut, meme filet, meme fond. Connectee elle est ronde (c'est un visage) ; deconnectee elle porte son libelle et prend le rayon des autres. La forme change avec l'etat, pas avec l'humeur du CSS. */ .mc-chip{display:flex;align-items:center;gap:0;height:38px;box-sizing:border-box; padding:3px;border-radius:999px; border:1.5px solid var(--line);background:var(--shell);color:var(--ink);cursor:pointer; font:600 14px/1 'PJS',system-ui,sans-serif; transition:box-shadow .18s,border-color .18s,transform .18s} .mc-chip:not(.anon){padding:0;width:38px;justify-content:center} .mc-chip.anon{gap:8px;padding:0 14px 0 5px;border-radius:13px} .mc-chip:hover{transform:translateY(-1px)} .mc-chip:not(.anon) .mc-nom{display:none} .mc-chip:hover{border-color:var(--lineCool);box-shadow:0 2px 10px rgba(6,37,52,.09)} .mc-chip:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px} .mc-av{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center; background:var(--lagoonDeep);color:#fff;font:800 13px/1 'PJS',system-ui,sans-serif; background-size:cover;background-position:50% 50%} .mc-av.ph{color:transparent} .mc-av.anon{background:var(--sandDeep);color:var(--muted)} .mc-av.anon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .mc-nom{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mc-pt{position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%; background:var(--coral);border:2px solid var(--shell)} .mc-pt[hidden]{display:none} .mc-scrim{position:fixed;inset:0;background:rgba(6,37,52,.34);z-index:78;border:0} .mc-scrim[hidden]{display:none} .mc-pan{position:fixed;width:356px;max-width:calc(100vw - 24px); background:var(--shell);border:1px solid var(--line);border-radius:18px;z-index:79; box-shadow:0 24px 60px rgba(6,37,52,.20);overflow:hidden; max-height:min(78vh,720px);display:flex;flex-direction:column} .mc-corps{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto} .mc-ft{flex:0 0 auto;border-top:1px solid var(--line);background:var(--shell)} .mc-pan[hidden]{display:none} .mc-hd{display:flex;gap:12px;align-items:center;padding:16px 18px;background:var(--tint); border-bottom:1px solid var(--lineCool)} .mc-av2{width:46px;height:46px;border-radius:50%;flex:0 0 46px;display:grid;place-items:center; background:var(--lagoonDeep);color:#fff;font:800 18px/1 'PJS',system-ui,sans-serif; background-size:cover;background-position:50% 50%} .mc-av2.ph{color:transparent} .mc-qui{min-width:0;display:flex;flex-direction:column;gap:1px} .mc-qui b{font:700 15px/1.25 'PJS',system-ui,sans-serif;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mc-qui span{font:400 12.5px/1.35 'PJS',system-ui,sans-serif;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mc-dep{color:var(--lagoonTxt)!important;font-weight:600!important} .mc-g{padding:8px 8px 4px;border-bottom:1px solid var(--line)} .mc-g:last-of-type{border-bottom:0} .mc-gt{padding:6px 10px 4px;font:800 10.5px/1 'PJS',system-ui,sans-serif;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} .mc-i{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px; text-decoration:none;color:inherit} .mc-i:hover{background:var(--cloud)} .mc-i:focus-visible{outline:2px solid var(--lagoon);outline-offset:-2px} .mc-i[hidden]{display:none} .mc-i svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:var(--lagoonDeep);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .mc-t{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1} .mc-t b{font:600 14px/1.3 'PJS',system-ui,sans-serif;color:var(--ink)} /* Deux lignes maitrisees plutot qu'une ellipse aveugle : « Ce que tu as ecrit, ce qui attend e… » se coupait au badge (audit a l'oeil, 18/09). */ .mc-t span{font:400 12px/1.35 'PJS',system-ui,sans-serif;color:var(--muted); overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Le badge de notification : --notifBg/--notifInk — en sombre il reste dans la température du menu (bleu-nuit teinté corail) au lieu du brun-rouge qui faisait tache (constat porteur, 18/09). */ .mc-b{flex:0 0 auto;padding:3px 9px;border-radius:999px;background:var(--notifBg); color:var(--notifInk);font:700 11.5px/1.4 'PJS',system-ui,sans-serif;white-space:nowrap} .mc-ft{padding:10px 16px 16px} .mc-out{width:100%;padding:11px;border-radius:12px;border:1px solid var(--line); background:var(--btnFace);color:var(--ink);cursor:pointer;box-shadow:var(--ombre-xs); font:700 14px/1 'PJS',system-ui,sans-serif;transition:background .15s,transform .12s,box-shadow .18s} .mc-out:hover{background:var(--btnFaceHi);transform:translateY(-1px);box-shadow:var(--ombre-sm)} .mc-out:active{transform:none} .mc-out:focus-visible{outline:2.5px solid var(--lagoon);outline-offset:2px} @media(prefers-reduced-motion:reduce){.mc-out{transition:none}.mc-out:hover{transform:none}} .mc-anon{padding:20px 18px} .mc-anon p{margin:0 0 14px;font:400 13.5px/1.5 'PJS',system-ui,sans-serif;color:var(--muted)} .mc-cta{width:100%;padding:12px;border-radius:12px;border:0;color:#fff;cursor:pointer; background:linear-gradient(180deg,var(--btnPriHaut),var(--btnPriBas)); box-shadow:var(--btnPriOmbre);font:700 14px/1 'PJS',system-ui,sans-serif; transition:background .15s,transform .12s,box-shadow .18s} .mc-cta:hover{background:linear-gradient(180deg,var(--btnPriHover),var(--btnPriBas));transform:translateY(-1px)} .mc-cta:active{transform:none} .mc-cta:focus-visible{outline:2.5px solid var(--lagoon);outline-offset:2px} .mc-alt{width:100%;margin-top:8px;padding:12px;border-radius:12px;border:1px solid var(--line); background:var(--btnFace);color:var(--ink);cursor:pointer;font:600 14px/1 'PJS',system-ui,sans-serif; box-shadow:var(--ombre-xs);transition:background .15s,transform .12s} .mc-alt:hover{background:var(--btnFaceHi);transform:translateY(-1px)} @media(prefers-reduced-motion:reduce){.mc-cta,.mc-alt{transition:none}.mc-cta:hover,.mc-alt:hover{transform:none}} /* Sur un telephone, un panneau ancre a droite sort de l'ecran : il devient une feuille qui monte du bas, le geste que tout le monde connait. */ .mc-pan.feuille{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none; border-radius:20px 20px 0 0;max-height:82vh;box-shadow:0 -18px 50px rgba(6,37,52,.26)} @media (max-width:719px){ .mc-nom{display:none} } /* ── LE CHOIX DU THEME, ET LE VOLET QU'IL PARTAGE AVEC LA LANGUE ──────────── Ces regles vivent DANS le bloc partage, pas dans le socle ni dans la feuille d'index : le controle est monte par le noyau sur les dix pages, donc son style doit voyager avec lui. Le poser d'un cote et l'oublier de l'autre, ce serait un controle qui existe et qu'on ne voit pas — la variante la plus sournoise de la regle 32. Le volet reprend exactement la forme du selecteur de langue : deux controles de preference cote a cote qui ne se ressemblent pas donnent l'impression que l'un a ete ajoute apres coup. Ce serait vrai, et c'est ce qu'on ne montre pas. */ /* ══ LES TROIS CONTROLES DE LA BARRE ═══════════════════════════════════════ CONSTAT DU PORTEUR (17/09) : « je suis satisfait des symboles des menus, mais pas de l'implementation de ce header […] le style des boutons, ca fait trop serre. » MESURE, au pixel, avant correction : langue 67 × 45 pastille de sable, rayon 14 theme 39 × 35 boite nue, sans rembourrage ni rayon compte 36 × 36 cercle a anneau corail Trois formes, trois hauteurs, trois traitements, cote a cote sur 160 px. Rien ne s'accorde — et c'est exactement ce qu'on lit comme « pas fini ». LA CAUSE : `.lang` avait garde le fond et le rembourrage de l'ANCIEN selecteur segmente (trois boutons FR/EN/JA cote a cote). Son contenu est devenu un menu deroulant le 14/09 ; l'enveloppe, elle, n'a pas suivi. Une coquille qui survit a ce qu'elle contenait. LA REGLE, maintenant : UNE hauteur (38), UN rayon (13), UN traitement. Ce qui distingue les trois, c'est leur contenu, jamais leur forme. Et du rembourrage — 12 px de part et d'autre, 8 px entre eux : « trop serre » etait juste, l'ancien tenait 160 px pour trois objets. */ .tact .lang{display:flex;gap:0;padding:0;background:none;border-radius:0} .langsel{position:relative} .langsel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; height:38px;box-sizing:border-box;padding:0 12px;white-space:nowrap; /* 日本語 s'empilait sur trois lignes (18/09) */ font-weight:700;font-size:13.5px;border-radius:13px; border:1.5px solid var(--line);color:var(--inkSoft);background:var(--shell); transition:border-color .15s,color .15s,background .15s,box-shadow .15s} .langsel summary:hover{box-shadow:var(--ombre-xs)} .langsel[open] summary{border-color:var(--lagoon);color:var(--lagoonTxt)} .langsel summary::-webkit-details-marker{display:none} .langsel summary:hover{border-color:var(--lagoon);color:var(--lagoonTxt)} .langsel summary svg{flex:none;opacity:.75} .langsel ul{position:absolute;right:0;top:calc(100% + 6px);background:var(--shell); border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md); list-style:none;margin:0;padding:6px;min-width:172px;z-index:60} .langsel li button{display:block;width:100%;text-align:left;padding:9px 12px; border-radius:8px;color:var(--ink);background:none;border:0;font:inherit; font-weight:600;font-size:14px;cursor:pointer} .langsel li button:hover{background:var(--tint)} /* Le theme n'a qu'un symbole : il devient carre, a la MEME hauteur que les autres. Un bouton d'icone seule qui ne serait pas carre trahit tout de suite qu'il a ete cale au jugé. */ .themesel summary{gap:0;padding:0;width:38px;justify-content:center} .themesel .th-ic{display:inline-grid;place-items:center;width:17px;height:17px;color:inherit} .themesel .th-ic svg{width:17px;height:17px;display:block} .themesel ul button{display:flex;align-items:center;gap:9px} .themesel ul button .th-ic{width:15px;height:15px;opacity:.7;flex:none} .themesel ul button .th-ic svg{width:15px;height:15px} /* L'etat courant se marque : sans ca, le volet ne dit pas ou l'on en est. */ .themesel ul button[aria-current]{color:var(--lagoonTxt);font-weight:800} .themesel ul button[aria-current] .th-ic{opacity:1} /* ==FP-CSS-MENU-FIN== */ :root{ --lagoon:#0E8C99; --lagoonDeep:#075E66; --lagoonDark:#064E55; --soft:#D6F1F2; --tint:#EAF8F8; /* UN JETON NE PEUT PAS FAIRE DEUX METIERS. `--lagoonDeep` servait a la fois de FOND profond (le bandeau du heros, les pastilles pleines) et d'ENCRE (les liens, les intitules d'action) — 32 fois l'un, 30 fois l'autre. En clair ca marchait : le meme bleu profond fait un bon fond et une bonne encre sur du sable. En sombre les deux besoins s'opposent — le fond doit rester profond, l'encre doit s'eclaircir pour rester lisible. Mesure : le titre du heros passait a 1,04:1, contre 4,17 en clair. Les jetons `*Txt` portent donc l'ENCRE. En clair ils valent exactement l'ancienne valeur : le theme clair ne bouge pas d'un pixel. */ --lagoonTxt:#075E66; --coralTxt:#E4543E; --goldTxt:#D9971C; --tropicTxt:#1F7E50; --ocean:#062534; --oceanMid:#0B3A4D; /* `--titre` EST L'ENCRE FONCEE, ET ELLE DOIT ETRE DEFINIE ICI, DANS LE :root NU. Je l'avais posee uniquement dans les blocs du mode sombre : en clair, `var(--titre)` ne resolvait donc RIEN, la declaration etait invalide, et la couleur retombait sur l'heritage — du blanc sur blanc pour les boutons des magasins, mesure a 1:1. C'est le piege classique du theme : une couleur dont la seule definition vit dans un bloc conditionnel ne s'applique jamais a l'etat par defaut — c'est-a-dire chez les gens qui n'ont rien demande. */ --titre:#062534; --coral:#FF6F59; --coralDeep:#E4543E; --coralSoft:#FFE2DC; /* Harmonie (étude 18/09) : badge de notification, surface de bouton, bouton d'action. */ --notifBg:#FFE7E1; --notifInk:#C0392B; --btnFace:#FBF7F0; --btnFaceHi:#F1E9DB; --btnPriHaut:#12909D; --btnPriBas:#0A6E79; --btnPriHover:#0B7C88; --btnPriOmbre:0 2px 6px rgba(14,140,153,.28), 0 6px 18px -6px rgba(14,140,153,.35); --gold:#F4B740; --goldDeep:#D9971C; --goldSoft:#FCEFCD; --tropic:#2FA66B; --tropicDeep:#1F7E50; --sand:#F8F4EC; --sandDeep:#F0E9DC; --shell:#FFF; --cloud:#FBFAF7; --ink:#1B2A33; --inkSoft:#3A4A54; --muted:#586873; --faint:#9AA7B0; --line:#E6DFD3; --lineCool:#DCE6E9; --maxw:1220px; --r-lg:22px; --r-xl:28px; --r-md:14px; --r-sm:11px; --r-pill:999px; --sh-sm:0 3px 8px rgba(6,37,52,.10); --sh-md:0 8px 24px rgba(6,37,52,.12); --sh-lg:0 18px 44px rgba(6,37,52,.18); --sh-xl:0 30px 70px rgba(6,37,52,.28); --grad-lagoon:linear-gradient(135deg,#0F97A5,#075E66 58%,#05464C); --grad-coral:linear-gradient(135deg,#FF8A6E,#FF6F59,#E4543E); --grad-gold:linear-gradient(135deg,#F8C95A,#F4B740); } /* ═══ LE MODE SOMBRE ════════════════════════════════════════════════════════ Décision du porteur (14/09) : « même mettre un mode dark sur le web est une chose qu’on devrait faire ». TROIS ÉTATS, PAS DEUX. La plupart des gens ne choisissent jamais : leur système décide, et la page ne porte alors aucune marque. Il faut donc que `:root` nu porte le thème clair COMPLET, que la préférence système bascule les jetons — mais seulement si l’on n’a pas explicitement choisi « clair » — et qu’un choix explicite gagne dans les deux sens. Une couleur définie uniquement dans un bloc de préférence ne s’applique jamais à l’état par défaut : c’est l’erreur classique, et elle rend la page illisible chez exactement les gens qui n’ont rien demandé. LE FOND SOMBRE EST CELUI DE LA MARQUE, pas un gris d’éditeur de code : `ocean #062534`, `oceanDeep #03161F`, `oceanMid #0B3A4D` viennent du système de design, et ce sont eux qui habillent déjà les en-têtes immersifs de l’application. Le book ne s’invente pas une seconde nuit. CE QUI CHANGE, ET CE QUI NE CHANGE PAS : · les surfaces, les traits, les encres et les ombres basculent ; · le lagon, le corail et l’or **s’éclaircissent** — un #0E8C99 sur fond nuit tombe sous le seuil de lisibilité d’un lien ; · LES COULEURS DE MARQUE NE BOUGENT PAS. Un corail est un corail la nuit, et un « Vérifié » vert reste vert. Ma première version les éclaircissait toutes — et cassait tout ce qui s'en sert comme FOND : mesuré, le badge « Vérifié » tombait de 5,05:1 à 1,79:1, parce qu'un texte blanc posé sur un vert devenu clair ne se lit plus. Un jeton ne peut pas faire deux métiers : les jetons `*Txt` portent l'encre, les tons de marque portent le fond. · les couleurs de VERTICALE non plus : ce sont des repères, pas du décor. Un séjour reste flag, une évasion reste azure, sur les deux thèmes. · les ombres cessent d’être BRUNES. Le brun réchauffe un fond sable ; sur du bleu nuit il vire au sale. En sombre, une ombre est du noir, et le relief passe surtout par un liseré clair. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --sand:#03161F; --sandDeep:#071F2A; --shell:#0B2A38; --cloud:#072430; --ink:#E9F2F5; --inkSoft:#BCCFD7; --muted:#8BA4AF; --faint:#63808D; --line:#1D3F4E; --lineCool:#1D3F4E; --soft:#124954; --tint:#0E3742; --coralSoft:#3A1A14; --notifBg:#B84836; --notifInk:#FFF3EE; --btnFace:#16394A; --btnFaceHi:#1D4657; --btnPriHaut:#17A0AD; --btnPriBas:#0C7984; --btnPriHover:#11929F; --btnPriOmbre:0 2px 6px rgba(23,160,173,.30), 0 6px 18px -6px rgba(0,0,0,.5); --goldSoft:#3A2A0E; /* l'encre s'eclaircit, le fond reste profond — deux jetons, deux metiers */ --lagoonTxt:#5FD3DC; --coralTxt:#FF9F8B; --goldTxt:#F3D08A; --tropicTxt:#63D6A0; /* et ces trois-la ne bougent pas non plus : les avoir « un peu remontes » suffisait a faire passer la pastille du heros de 5,11:1 a 4,30:1. La regle est sans exception, sinon ce n'est pas une regle. */ --titre:#EAF4F6; --sh-sm:0 3px 8px rgba(0,0,0,.45); --sh-md:0 8px 24px rgba(0,0,0,.50); --sh-lg:0 18px 44px rgba(0,0,0,.58); --sh-xl:0 30px 70px rgba(0,0,0,.66); --sh:0 1px 3px rgba(0,0,0,.5),0 8px 26px rgba(0,0,0,.45); --sh-hi:0 8px 26px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --sand:#03161F; --sandDeep:#071F2A; --shell:#0B2A38; --cloud:#072430; --ink:#E9F2F5; --inkSoft:#BCCFD7; --muted:#8BA4AF; --faint:#63808D; --line:#1D3F4E; --lineCool:#1D3F4E; --soft:#124954; --tint:#0E3742; --coralSoft:#3A1A14; --notifBg:#B84836; --notifInk:#FFF3EE; --btnFace:#16394A; --btnFaceHi:#1D4657; --btnPriHaut:#17A0AD; --btnPriBas:#0C7984; --btnPriHover:#11929F; --btnPriOmbre:0 2px 6px rgba(23,160,173,.30), 0 6px 18px -6px rgba(0,0,0,.5); --goldSoft:#3A2A0E; /* l'encre s'eclaircit, le fond reste profond — deux jetons, deux metiers */ --lagoonTxt:#5FD3DC; --coralTxt:#FF9F8B; --goldTxt:#F3D08A; --tropicTxt:#63D6A0; /* et ces trois-la ne bougent pas non plus : les avoir « un peu remontes » suffisait a faire passer la pastille du heros de 5,11:1 a 4,30:1. La regle est sans exception, sinon ce n'est pas une regle. */ --titre:#EAF4F6; --sh-sm:0 3px 8px rgba(0,0,0,.45); --sh-md:0 8px 24px rgba(0,0,0,.50); --sh-lg:0 18px 44px rgba(0,0,0,.58); --sh-xl:0 30px 70px rgba(0,0,0,.66); --sh:0 1px 3px rgba(0,0,0,.5),0 8px 26px rgba(0,0,0,.45); --sh-hi:0 8px 26px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* Repli emoji DECLARE. Sans lui, l'affichage d'un 🌺 ou d'un 👨‍👩‍👧‍👦 dépend de ce que le navigateur trouve tout seul sur la machine : ça marche presque partout, et « presque » ne suffit pas pour une messagerie entre un pro et son client. Les trois familles couvrent macOS/iOS, Windows et Linux/Android. Elles viennent APRÈS nos polices : elles ne servent qu'aux caractères que Plus Jakarta Sans n'a pas. (Porteur, 08/09 : « il faut que les émojis et les caractères de clavier fonctionnent dans le chat, c'est obvious ».) */ body{margin:0;font-family:'PJS',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';color:var(--ink);background:var(--sand);background-image:radial-gradient(62rem 38rem at 88% -8%,rgba(14,140,153,.10),transparent 62%),radial-gradient(48rem 32rem at -6% 10%,rgba(244,183,64,.11),transparent 60%),radial-gradient(40rem 40rem at 50% 118%,rgba(255,111,89,.07),transparent 66%),linear-gradient(var(--sand) 0%,var(--cloud) 44%,var(--sand) 100%);background-attachment:fixed;background-repeat:no-repeat; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5} /* ── L'AMBIANCE SUIT LA VERTICALE ─────────────────────────────────────────── Demande du porteur (14/09) : « le changement de fond, les variations pas juste linéaires de couleur ». Le fond du book était une seule et même image, quel que soit ce qu'on regardait. Or l'application, elle, CHANGE de couleur d'une verticale à l'autre — c'est son repère le plus fort, et le book n'en avait rien. Passer de Séjours à Évasions ne se voyait que par un onglet souligné. Deux choix qui ne sont pas de l'ornement : · la couleur vient de `SERVICE_TEINTE`, la table que les pages du compte utilisent déjà. Une seule définition des couleurs de verticale, pas deux qui divergeront (règle 35) ; · ce sont des halos RADIAUX, pas un dégradé de haut en bas. Un dégradé linéaire se lit comme un fond d'écran ; trois halos décentrés se lisent comme une lumière — c'est exactement la distinction qu'il demande par « pas juste linéaires ». La couche est en `position:fixed` DANS LE BODY et pas dans un conteneur : un parent qui porte un `backdrop-filter` détourne `position:fixed` vers lui-même (leçon 34b, payée sur l'en-tête). Le body n'en porte pas. */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-repeat:no-repeat; background-image: radial-gradient(58rem 40rem at 82% 4%, color-mix(in srgb,var(--amb,transparent) 26%, transparent), transparent 64%), radial-gradient(44rem 34rem at 6% 34%, color-mix(in srgb,var(--amb,transparent) 17%, transparent), transparent 62%), radial-gradient(52rem 38rem at 46% 104%,color-mix(in srgb,var(--amb,transparent) 13%, transparent), transparent 66%); opacity:0;transition:opacity .45s cubic-bezier(.2,.8,.2,1)} body.amb-on::before{opacity:1} @media(prefers-reduced-motion:reduce){body::before{transition:none}} h1,h2,h3{font-family:'Bricolage',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.05} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:0;background:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ── Topbar ── */ .top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--cloud) 86%,transparent);backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} /* En-tête : grille 1fr auto 1fr — marque à gauche, ONGLETS AU CENTRE de la page, langue et bouton à droite. Même équilibre que la vitrine (règle 16), et le geste d'Airbnb : des catégories au milieu, chacune avec sa petite icône AU TRAIT sur fond blanc — pas les tuiles en dégradé de l'accueil, qui appartiennent aux vignettes et crieraient dans une barre. (Porteur, 08/09.) */ .top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:68px} .brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage';font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--titre)} .brand svg{filter:drop-shadow(0 4px 10px rgba(6,37,52,.18))} .brand b{color:var(--goldTxt)} .brand small{display:block;font-family:'PJS';font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoonTxt);margin-top:-2px} /* Les icones sont celles de l'APPLICATION (FareIcon, PirogueIcon, RentalKeyIcon, CocoIcon — regle 11 : la source de verite est le bundle, pas un dessin refait). Elles arrivent ici par la vitrine, qui les avait deja transposees a l'identique. Posees sur fond blanc, sans la tuile en degrade de l'accueil : « les icones sur un fond blanc pour le site booking » (porteur, 08/09), puis « mets-les a gauche du mot et remets la taille d'avant, la ca fait un peu trop petit ». */ .tnav{display:flex;gap:6px;justify-content:center;white-space:nowrap} .tnav a{display:inline-flex;align-items:center;gap:9px;padding:8px 14px; font-weight:600;font-size:15px;color:var(--inkSoft);border-bottom:2.5px solid transparent;transition:.16s} .tnav a .ti{display:grid;place-items:center;width:30px;height:30px;flex:none} .tnav a .ti svg{width:30px;height:30px;display:block} .tnav a:hover{color:var(--ink);border-bottom-color:var(--line)} .tnav a.on{color:var(--titre);border-bottom-color:var(--titre);font-weight:800} .top .sp{display:none} /* la grille centre, plus besoin d'écarteur */ /* Le bandeau de l'application. `[hidden]` ne suffit jamais des qu'une classe pose un `display` : la garde est ecrite dans la foulee (regle 30, payee trois fois). */ .appban{display:none} .appban[hidden]{display:none} @media(max-width:900px){ .appban:not([hidden]){display:grid;grid-template-columns:auto 1fr auto auto;align-items:center; gap:9px;padding:9px 12px;background:var(--tint);border-bottom:1px solid var(--lineCool)} .appban .ab-i{width:26px;height:26px;display:grid;place-items:center;color:var(--lagoonTxt);flex:none} .appban .ab-t{grid-column:1/-1;order:-1;margin:0;font-family:'Bricolage';font-weight:800; font-size:13.5px;line-height:1.3;color:var(--titre)} .appban .ab-go,.appban .ab-web{font-weight:800;font-size:12.5px;white-space:nowrap; padding:7px 12px;border-radius:var(--r-pill);text-align:center} .appban .ab-go{background:var(--lagoonDeep);color:#fff} .appban .ab-web[hidden]{display:none} /* le jour où APP_WEB disparaît (règle 30) */ .appban .ab-web{border:1.4px solid var(--lineCool);color:var(--lagoonTxt)} .appban .ab-x{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center; color:var(--muted)} .appban .ab-x:hover{background:var(--sandDeep);color:var(--ink)} } /* Trois colonnes suffisent des que le titre tient sur sa propre ligne : la grille le met en `1/-1`, les deux boutons et la croix se partagent la seconde rangee. */ @media(max-width:900px){.appban:not([hidden]){grid-template-columns:auto 1fr auto auto}} /* Invitation de langue (28/09) : l'adresse decide, le navigateur suggere. Garde [hidden] : regle 30. */ .langban{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--tint);border-bottom:1px solid var(--lineCool);font-size:13.5px} .langban[hidden]{display:none} .langban .lb-t{margin:0;flex:1;color:var(--titre);font-weight:700} .langban .lb-go{font-weight:800;white-space:nowrap;padding:6px 12px;border-radius:var(--r-pill);background:var(--lagoonDeep);color:#fff} .langban .lb-x{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted)} .langban .lb-x:hover{background:var(--sandDeep);color:var(--ink)} .top .hdr-act{display:flex;align-items:center;gap:12px;justify-self:end} .top .sp{flex:1} /* Langue : MÊME motif que la vitrine (07/09). Trois boutons alignés tiennent tant qu'il y a trois langues ; à la quatrième la barre déborde, et un jour on en aura plus. Un menu ne grandit pas. */ .langsel{position:relative} .langsel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px; color:var(--inkSoft);padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:var(--shell)} .langsel summary::-webkit-details-marker{display:none} .langsel summary:hover{border-color:var(--lagoon);color:var(--lagoonTxt)} .langsel summary svg{flex:none;opacity:.75} .langsel ul{position:absolute;right:0;top:calc(100% + 6px);background:var(--shell);border:1px solid var(--line); border-radius:12px;box-shadow:var(--sh-md);list-style:none;margin:0;padding:6px;min-width:158px;z-index:120} .langsel li button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--ink); font-weight:600;font-size:14px} .langsel li button:hover{background:var(--tint)} .langsel li button.on{color:var(--lagoonTxt);background:var(--tint)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:var(--r-pill);transition:.16s;white-space:nowrap} .btn-app{background:var(--ocean);color:#fff;padding:11px 20px;font-size:15px} .btn-app:hover{transform:translateY(-1px);box-shadow:var(--sh-md)} .btn-gold{background:var(--grad-gold);color:var(--ocean);padding:14px 26px;font-size:16px;box-shadow:0 8px 22px rgba(217,151,28,.32)} .btn-gold:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(217,151,28,.42)} .btn-out{border:1.6px solid var(--line);color:var(--ink);padding:12px 22px;font-size:15px;background:var(--shell)} .btn-out:hover{border-color:var(--lagoon);color:var(--lagoonTxt)} /* ── Hero (photo Polynésie plein cadre + scrim sombre pour le contraste du texte) ── */ .hero{position:relative;background:var(--lagoonDeep);color:#fff;overflow:hidden;padding:66px 0 130px} /* ═══ LA CARTE D'UN RESTAURANT, LES FAITS D'UNE ÉVASION ═══════════════════ Deux verticales sur quatre n'affichaient presque rien : un restaurant montrait sa galerie et sa position, une évasion ne disait ni sa durée ni son niveau. Tout était dans le payload — 356 plats traduits en trois langues, jamais servis (mesuré le 23/09). */ .rs-svc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px} .rs-pill{font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:99px; background:color-mix(in srgb,var(--lagoon) 12%,transparent);color:var(--lagoonTxt)} .rs-pill.gris{background:var(--tint);color:var(--muted);font-weight:500} /* Ouvert ou fermé : c'est la seule question qu'on se pose devant un restaurant, donc elle se lit avant la carte. */ .rs-etat{font-size:13.5px;font-weight:600;color:var(--muted);margin:0 0 16px; display:flex;align-items:center;gap:7px} .rs-etat:before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor;flex:none} .rs-etat.on{color:var(--tropicDeep)} .mn-sec{margin:0 0 18px} .mn-sec h5{font-family:Bricolage,system-ui,sans-serif;font-size:14px;margin:0 0 8px; letter-spacing:.02em;color:var(--muted);text-transform:uppercase} .mn-it{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)} .mn-it:last-child{border-bottom:0} .mn-tx{flex:1;min-width:0} .mn-tx b{font-size:14.5px;font-weight:600} .mn-tx p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.45} .mn-vg{font-size:11px;font-weight:600;margin-left:7px;padding:1px 7px;border-radius:99px; background:color-mix(in srgb,var(--tropic) 16%,transparent);color:var(--tropicDeep)} .mn-pr{font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} /* Les faits d'une sortie : durée, niveau, groupe, langues. Une grille plutôt qu'une phrase — on les compare d'un coup d'œil entre deux offres. */ .xp-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px 22px;margin:0 0 18px} .xp-faits>div{display:flex;flex-direction:column;gap:2px} .xp-faits span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .xp-faits b{font-size:14.5px;font-weight:600} .xp-inc{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7;color:var(--ink)} .xp-inc li{margin:0 0 2px} #menuFiche[hidden],#creneauxFiche[hidden]{display:none} /* LE REPLI DU BANDEAU, pour les navigateurs sans `image-set`. Il vivait dans un attribut `style=` du HTML : sous une politique stricte, `style-src 'self'` le REFUSE et le bandeau reste nu. Il est ici, avant la regle `image-set` — la cascade veut le repli d'abord. Le generateur ancre sur `background-image:url('` et trouve celle-ci. */ .hbg{background-image:url('https://book.fenuap.com/hero.jpg?v=f4ac8d6f')} .hbg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 42%; transform:scale(1.05);animation:heroZoom 26s ease-in-out infinite alternate;will-change:transform} .hbg:after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(4,45,50,.60),rgba(6,37,52,.40) 42%,rgba(4,55,60,.82)), linear-gradient(100deg,rgba(4,45,50,.55),transparent 62%)} .hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background: radial-gradient(60% 50% at 82% 6%,rgba(244,183,64,.20),transparent 60%), radial-gradient(50% 45% at 8% 100%,rgba(255,111,89,.16),transparent 60%)} .hero .wrap{position:relative;z-index:2} .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);padding:7px 15px;border-radius:var(--r-pill);font-weight:600;font-size:13.5px;letter-spacing:.02em} .hero h1{font-size:clamp(34px,4.4vw,58px);margin:20px 0 14px;max-width:16ch} .hero h1 em{font-style:normal;color:var(--goldTxt)} .hero p.sub{font-size:clamp(16px,1.5vw,20px);max-width:52ch;color:rgba(255,255,255,.9);margin:0 0 8px} .hero .trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:rgba(255,255,255,.92);font-weight:600;font-size:14.5px} .hero .trust span{display:inline-flex;align-items:center;gap:7px} .hero .trust svg{opacity:.95} /* Search bar (flottante, chevauche le hero) */ .search{position:relative;z-index:5;margin:-70px auto 0;max-width:900px;background:var(--shell);border-radius:var(--r-xl); box-shadow:var(--sh-lg);padding:10px;display:grid;grid-template-columns:1.6fr 1.1fr .9fr auto;gap:6px;align-items:stretch} .search .fld{display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:var(--r-lg);transition:.14s} .search .fld:hover{background:var(--cloud)} .search .fld label{font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .search .fld select,.search .fld input{border:0;background:none;font-family:inherit;font-weight:600;font-size:16px;color:var(--ink);padding:2px 0;outline:none;width:100%} .search .fld+.fld{border-left:1px solid var(--line)} .search .go{align-self:center;margin:4px;background:var(--grad-coral);color:#fff;border-radius:var(--r-lg);padding:0 26px; display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;box-shadow:0 8px 20px rgba(228,84,62,.32);height:calc(100% - 8px)} .search .go:hover{transform:translateY(-1px)} .stepper{display:flex;align-items:center;gap:12px} .stepper button{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);color:var(--lagoonTxt);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;line-height:1} .stepper button:hover{border-color:var(--lagoon);background:var(--tint)} .stepper span{font-weight:700;font-size:16px;min-width:18px;text-align:center} /* ── Sections ── */ .sec{padding:60px 0;scroll-margin-top:84px} .sec.alt{background:var(--cloud)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap} .sec-head .k{font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--coralTxt)} .sec-head h2{font-size:clamp(27px,3vw,38px);margin-top:6px} .sec-head p{color:var(--muted);margin:8px 0 0;max-width:52ch;font-size:16px} /* Barre d'outils section (compteur + tri) */ .sec-head .sh-l{min-width:0} .sec-head .sh-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .rescount{font-weight:800;font-size:14px;color:var(--muted);font-family:'PJS';white-space:nowrap} .sortwrap{display:inline-flex;align-items:center;gap:9px} .sortwrap .sl{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} /* Filtres (Booking/Airbnb-level, groupés + contextuels) */ .filters{display:flex;flex-wrap:wrap;gap:13px 24px;margin-bottom:28px;align-items:flex-start} .fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:7px;position:relative} .fgroup .flab{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:3px;align-self:center;white-space:nowrap} .chip{padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--shell);font-weight:600;font-size:13.5px;color:var(--inkSoft);transition:transform .16s,border-color .16s,background .16s,color .16s,box-shadow .16s;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap} .chip svg{width:13px;height:13px;opacity:.85;flex:none} .chip:hover{border-color:var(--lagoon);color:var(--lagoonTxt);transform:translateY(-1px)} .chip.on{background:var(--lagoonDeep);border-color:var(--lagoonDeep);color:#fff;box-shadow:0 5px 14px rgba(7,94,102,.28)} .chip.on svg{opacity:1} .chip-clear{border-color:var(--coralSoft);background:var(--coralSoft);color:var(--coralTxt);font-weight:700} /* ── Carte ───────────────────────────────────────────────────────────────────────────────────── */ /* ── Bascule Catalogue | Carte, et vue carte ────────────────────────────────────────────────── Les GESTES sont ceux d'Airbnb et de Booking (bascule sous la recherche, pastilles de prix, fiche qui s'ouvre dans la carte, survol de la liste qui allume la pastille). La FORME est la nôtre : lagon et corail de la marque, prix en XPF, pas le bleu générique des cartes. */ /* La bascule est CENTREE sous la barre de recherche : elle est l'axe de la page a cet endroit, et une commande posee a gauche d'une barre centree casse la symetrie (porteur, 08/09 — « c'est de la symetrie de design qui doit etre pensee »). */ .vues-w{display:flex;justify-content:center;margin:22px 0 0} .vues{display:inline-flex;gap:3px;background:var(--sandDeep);border-radius:var(--r-pill);padding:4px} .vue{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-pill); font-weight:700;font-size:14.5px;color:var(--muted);transition:.16s} .vue svg{flex:none;opacity:.8} .vue:hover{color:var(--ink)} .vue.on{background:var(--shell);color:var(--titre);box-shadow:var(--sh-sm)} .vue.on svg{opacity:1;color:var(--lagoonTxt)} /* MODE CARTE — « c'est une bascule, ça passe juste en mode carte, parce que sinon ça sature trop le site et il faut descendre tout en bas, ce n'est pas intuitif » (porteur, 08/09). C'est aussi ce que font Airbnb et Booking : en vue carte, le contenu éditorial s'efface, il ne reste que la recherche, les filtres et le plan. On ne masque PAS les filtres — chez eux non plus. */ body.mode-carte .hero, body.mode-carte .statstrip, body.mode-carte .niho-fz, body.mode-carte #sec-catalog .sec-head .k, body.mode-carte #sec-catalog .sec-head h2, body.mode-carte #sec-catalog .sec-head p, body.mode-carte main > section:not(#sec-catalog), body.mode-carte footer{display:none} body.mode-carte #sec-catalog{padding:6px 0 18px} body.mode-carte #sec-catalog .sec-head{margin-bottom:12px} body.mode-carte .search{margin-top:18px} /* la barre ne flotte plus sur une photo absente */ body.mode-carte .vues-w{margin-top:14px} .mapwrap{display:grid;grid-template-columns:1fr 372px;gap:16px;height:calc(100vh - 268px);min-height:420px;margin-top:4px} .mapwrap[hidden]{display:none} /* `hidden` ne suffit pas quand une regle auteur pose `display` : `.grid{display:grid}` gagnait sur le `display:none` de l'attribut, et la grille RESTAIT affichee sous la carte. C'est ce que le porteur voyait — « elle s'affiche tout en bas et on a toujours le catalogue ». */ .grid[hidden]{display:none} /* La garde des acquis (19/09) : toute classe cachee par `hidden` la porte. */ .an-aide[hidden]{display:none}.rv-ride[hidden]{display:none}.lg-box[hidden]{display:none}.fp-x[hidden]{display:none} /* ═══ CHERCHER UN ENDROIT SUR LA CARTE DES OFFRES (24/09) ═════════════════ Posée SUR le plan, en haut à gauche — la place qu'elle occupe chez Airbnb et Booking : elle appartient à la carte, pas à la page. On cherche un endroit, pas une offre : personne ne connaît le nom d'une pension, tout le monde sait où il veut dormir. */ .mq{position:absolute;top:12px;left:12px;z-index:2;width:min(330px,calc(100% - 92px))} .mq input{width:100%;height:42px;border-radius:12px;border:1px solid var(--line); background:var(--shell);color:var(--ink);padding:0 14px;font:inherit;font-size:14px; box-shadow:0 4px 14px rgba(6,37,52,.18)} .mq input:focus{outline:2px solid var(--lagoon);outline-offset:1px} .mq-sug{position:absolute;top:48px;left:0;right:0;max-height:min(46vh,330px);overflow:auto; background:var(--shell);border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 34px rgba(6,37,52,.26)} .mq-sug[hidden]{display:none} .mq-sug-i{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:12px; padding:10px 13px;border:0;border-bottom:1px solid var(--line);background:transparent; text-align:left;cursor:pointer;font:inherit;color:var(--ink)} .mq-sug-i:last-child{border-bottom:0} .mq-sug-i:hover{background:var(--tint)} .mq-sug-i b{font-size:14px;font-weight:600;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* COMBIEN D'OFFRES AUTOUR, avant même de cliquer : c'est ce qui transforme une liste de lieux en aide à la décision. */ .mq-sug-i span{font-size:12px;font-weight:600;color:var(--lagoonTxt);white-space:nowrap} .mq-sug-i span.vide{color:var(--muted);font-weight:500} .mq-sug-v{padding:12px 13px;font-size:13.5px;color:var(--muted)} /* Il ne s'affiche que si le déplacement a du sens. Centré en bas, comme chez Airbnb : c'est là que le pouce et l'œil reviennent après avoir déplacé. */ .mq-zone{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2; height:38px;padding:0 18px;border-radius:99px;border:1px solid var(--line); background:var(--shell);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600; cursor:pointer;box-shadow:0 6px 20px rgba(6,37,52,.3);white-space:nowrap} .mq-zone:hover{background:var(--tint)} .mq-zone:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px} .mq-zone[hidden]{display:none} /* Le repère du lieu cherché reste visible : sans lui, on ne sait plus où était « le marché » une fois la carte déplacée. */ .mq-pt{display:flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:12px; background:var(--ink);color:var(--shell);box-shadow:0 4px 14px rgba(6,37,52,.4); max-width:230px;pointer-events:none} .mq-pt b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mq-pt span{font-size:11px;opacity:.82} @media (max-width:640px){.mq{width:calc(100% - 24px)}} .mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--tint)} /* En theme sombre, les tuiles OSM restaient un rectangle CLAIR eblouissant au milieu d'une page nuit (audit a l'oeil du 18/09) — on les adoucit, sans les inverser : les etiquettes des tuiles doivent rester lisibles. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.mapbox,.cfmap) .maplibregl-canvas{filter:brightness(.72) saturate(.85) contrast(1.04)} } :root[data-theme="dark"] :is(.mapbox,.cfmap) .maplibregl-canvas{filter:brightness(.72) saturate(.85) contrast(1.04)} .maplist{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding-right:4px} .ml-hd{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 2px 6px} .ml-note{font-size:12.5px;line-height:1.45;color:var(--goldTxt);background:var(--goldSoft); border-radius:var(--r-sm);padding:9px 11px;margin-bottom:4px} /* Le hors-cadre n'est pas un avertissement de plus : c'est une ACTION, donc un bouton qui en a l'air. Une phrase grise aurait dit la même chose sans donner le moyen d'y aller. */ .ml-tout{display:block;width:100%;text-align:left;font-weight:700;font-size:12.5px; color:var(--lagoonTxt);background:var(--lagoonSoft,var(--sand));border:1px solid var(--lineCool); border-radius:var(--r-sm);padding:9px 11px;margin-bottom:4px;transition:.14s} .ml-tout:hover{border-color:var(--lagoon);background:var(--shell)} .ml-it{display:grid;grid-template-columns:74px 1fr;gap:11px;align-items:center;text-align:left; background:var(--shell);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;transition:.14s;width:100%} .ml-it:hover{border-color:var(--lagoon);box-shadow:var(--sh-sm)} .ml-it img{width:74px;height:60px;object-fit:cover;border-radius:9px;background:var(--sandDeep)} .ml-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .ml-tx b{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-tx em{font-style:normal;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-tx i{font-style:normal;font-family:'Bricolage';font-weight:800;font-size:14px;color:var(--titre)} /* Pastille de prix : le repère d'Airbnb, aux couleurs du fenua. */ .mk{background:var(--shell);border:1.8px solid var(--lagoonDeep);color:var(--titre);border-radius:var(--r-pill); padding:6px 12px;font-family:'Bricolage';font-weight:800;font-size:13px;box-shadow:var(--sh-md); white-space:nowrap;transition:transform .14s,background .14s,color .14s;cursor:pointer} .mk:hover,.mk.hi{transform:scale(1.09);z-index:3} .mk.on{background:var(--lagoonDeep);border-color:var(--lagoonDeep);color:#fff} .mk.ex{border-style:dashed;border-color:var(--goldDeep);color:var(--goldTxt)} .mk.ex.on{background:var(--goldDeep);border-color:var(--goldDeep);color:#fff} /* Fiche dans la carte */ .mapfiche{position:absolute;left:14px;bottom:14px;z-index:4;width:min(330px,calc(100% - 28px)); background:var(--shell);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;display:none} .mapfiche.open{display:block;animation:pop .2s cubic-bezier(.2,.9,.3,1)} .mapfiche img{width:100%;height:150px;object-fit:cover;background:var(--sandDeep)} .mapfiche .mf-x{position:absolute;right:9px;top:9px;width:31px;height:31px;border-radius:50%; background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-sm)} .mapfiche .mf-tx{padding:13px 15px 15px} .mapfiche .mf-loc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-bottom:5px} .mapfiche h4{font-family:'Bricolage';font-weight:800;font-size:16px;line-height:1.2;color:var(--ink)} .mapfiche .mf-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center} .mapfiche .mf-note{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:13px;color:var(--titre)} .mapfiche .mf-note svg{color:var(--goldTxt)} .mapfiche .mf-note em{font-style:normal;font-weight:600;color:var(--muted)} .mapfiche .mf-ex{background:var(--goldSoft);color:var(--goldTxt);font-weight:800;font-size:11px; letter-spacing:.2px;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)} .mapfiche .mf-p{margin-top:9px;font-size:13px;color:var(--muted)} .mapfiche .mf-p b{font-family:'Bricolage';font-size:18px;color:var(--titre)} .mapfiche .mf-go{margin-top:12px;width:100%;justify-content:center;padding:11px} .maplibregl-ctrl-attrib{font-size:10.5px} @media(max-width:900px){ /* Le rail est posé en bas : sans ce décalage il recouvrait la mention OpenStreetMap, qui nous est due — ce n'est pas un ornement qu'on peut laisser passer dessous. */ .mapwrap .maplibregl-ctrl-bottom-right,.mapwrap .maplibregl-ctrl-bottom-left{bottom:112px} } /* SUR TELEPHONE, LA CARTE PREND L'ECRAN ET LES FICHES GLISSENT DESSUS — le geste d'Airbnb et de Booking. Ce qu'il remplace, mesure a 390 px : la carte occupait 58 vh et la liste s'empilait dessous sur 2 264 px, si bien qu'en basculant on arrivait sur une carte qui commencait a 696 px du haut d'un ecran de 959 — donc invisible — suivie d'une liste qui commencait a 1 201 px. Une vue carte qu'il fallait chercher au doigt n'est pas une vue carte. Le rail horizontal garde les deux lectures a l'ecran EN MEME TEMPS, ce que l'empilement rendait impossible : sur un telephone, voir la liste voulait dire perdre la carte. */ @media(max-width:900px){ /* `relative` est ce qui ancre le rail : sans lui son `absolute` remontait au premier ancetre positionne — mesure, il se posait a 157 px du haut et sur 390 px de large, soit toute la fenetre au lieu de la carte. Un element absolu n'est jamais « en bas » dans l'absolu. */ .mapwrap{position:relative;grid-template-columns:1fr;grid-template-rows:1fr;gap:0;height:auto;min-height:360px} .mapbox{height:100%;border-radius:var(--r-md)} /* Le rail est POSE sur la carte, pas dessous : c'est ce qui garde la carte entiere. */ .maplist{position:absolute;left:0;right:0;bottom:0;z-index:5;flex-direction:row;gap:10px; max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scroll-padding-inline:14px;padding:0 14px 14px;-webkit-overflow-scrolling:touch; scrollbar-width:none;overscroll-behavior-x:contain} .maplist::-webkit-scrollbar{display:none} .ml-it{flex:0 0 78%;scroll-snap-align:center;grid-template-columns:92px 1fr;padding:9px; box-shadow:0 10px 26px rgba(12,38,48,.26)} .ml-it img{width:92px;height:74px} .ml-tx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Le compte et l'avertissement quittent le rail : ils resteraient a glisser comme une fiche, alors qu'ils parlent de TOUTES les fiches. Ils flottent donc en haut, sous la recherche. */ .mapcount{position:absolute;left:14px;top:64px;z-index:5;display:flex;flex-direction:column; gap:6px;max-width:min(78%,300px);pointer-events:none} .mapcount[hidden]{display:none} .mapcount .ml-hd{background:var(--shell);border-radius:var(--r-pill);padding:6px 12px; box-shadow:var(--sh-md);color:var(--titre);font-size:12px} .mapcount .ml-note{margin:0;box-shadow:var(--sh-sm)} .mapcount .ml-tout{margin:0;box-shadow:var(--sh-sm);pointer-events:auto} /* La fiche flottante ferait doublon avec le rail, et la couvrirait. */ .mapfiche{display:none!important} } .chip-map{border-color:var(--lineCool);color:var(--lagoonTxt);font-weight:700} .btn-log{border:1.6px solid var(--line);color:var(--ink);padding:10px 16px;font-size:14.5px;background:var(--shell)} .btn-log:hover{border-color:var(--lagoon);color:var(--lagoonTxt)} /* Le bouton de connexion ne se cache PLUS sous 760 px (09/09). Il disparaissait, et sur une fenetre etroite le compte devenait litteralement inatteignable — mesure : bouton absent a 420 px. Un menu peut se replier, une porte non ; il se reduit donc a son icone, avec un nom accessible pour les lecteurs d'ecran. */ .btn-log{display:inline-flex;align-items:center;gap:8px} .log-i{display:none;flex:none} .btn-app{display:inline-flex;align-items:center;gap:8px} .btn-app .app-i{display:none;flex:none} @media(max-width:760px){.btn-log{padding:9px 11px;gap:0} .btn-log>span{display:none} .log-i{display:block} /* Même repli pour « Télécharger l'app » : son libellé faisait 146 px et c'est ce qui élargissait la page entière. Il garde son nom accessible (`aria-label`), comme la porte du compte. */ .btn-app{padding:9px 11px;gap:0} .btn-app>span:not(.app-i){display:none} .btn-app .app-i{display:block}} .ho .ho-go{display:inline-flex;align-items:center;gap:8px;margin:4px 0 14px;padding:13px 24px;font-size:15.5px} .ho .ho-go[hidden]{display:none} .chip-map:hover{border-color:var(--lagoon);background:var(--tint)} .carte{position:fixed;z-index:901;left:50%;top:50%;transform:translate(-50%,-50%); width:min(1120px,calc(100vw - 36px));height:min(84vh,760px);background:var(--shell); border-radius:var(--r-xl);box-shadow:var(--sh-xl);display:flex;flex-direction:column;overflow:hidden; animation:pop .22s cubic-bezier(.2,.9,.3,1)} .carte-hd{position:relative;display:grid;place-items:center;padding:17px 20px;border-bottom:1px solid var(--line);flex:none} .carte-hd h3{font-size:18px} .carte-n{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:13.5px;color:var(--muted);font-weight:600} .carte-bd{flex:1;min-height:0;display:grid;place-items:center;padding:10px 14px;background:var(--cloud)} .carte-bd svg{width:100%;height:100%;max-height:100%} .carte-vide{color:var(--muted);font-size:15px} .carte .mer{fill:url(#ocean);stroke:var(--lineCool)} .carte .arch{fill:rgba(14,140,153,.06);stroke:rgba(14,140,153,.22);stroke-dasharray:5 6} /* Vue d'ensemble : une bulle par archipel (total d'offres), les îles en simples points. */ .carte .arche{cursor:pointer} .carte .ilot{fill:var(--lagoon);opacity:.45} .carte .bulle{fill:#fff;stroke:var(--lagoonDeep);stroke-width:2.6;transition:.16s} .carte .bn{font-family:'Bricolage',sans-serif;font-weight:800;font-size:19px;fill:var(--ocean);pointer-events:none} .carte .bl{font-family:'PJS',sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;fill:var(--lagoonDeep);pointer-events:none} .carte .bs{font-family:'PJS',sans-serif;font-size:12px;font-weight:600;fill:var(--muted);pointer-events:none} .carte .arche:hover .bulle,.carte .arche:focus-visible .bulle{fill:var(--tint);stroke-width:3.2} .carte .arche.on .bulle{fill:var(--lagoonDeep);stroke:var(--lagoonDeep)} .carte .arche.on .bn{fill:#fff} .carte .arche:focus{outline:none} .carte .ile{cursor:pointer} .carte .ile .halo{fill:var(--lagoon);opacity:0;transition:opacity .16s} .carte .ile .tige{stroke:var(--lineCool);stroke-width:1.4;stroke-dasharray:2 3} .carte .ile .pt{fill:#fff;stroke:var(--lagoonDeep);stroke-width:2.4;transition:.16s} .carte .ile .n{font-family:'Bricolage',sans-serif;font-weight:800;font-size:14px;fill:var(--ocean);pointer-events:none} .carte .ile .lb{font-family:'PJS',sans-serif;font-size:12.5px;font-weight:700;fill:var(--inkSoft);pointer-events:none} .carte .ile:hover .halo,.carte .ile:focus-visible .halo{opacity:.16} .carte .ile:hover .pt{stroke-width:3} .carte .ile.on .pt{fill:var(--lagoonDeep);stroke:var(--lagoonDeep)} .carte .ile.on .n{fill:#fff} .carte .ile.on .lb{fill:var(--lagoonDeep);font-weight:800} .carte .ile:focus{outline:none} .carte-ft{flex:none;display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--line);background:var(--shell)} .carte-lg{flex:1;font-size:12.5px;line-height:1.4;color:var(--faint);max-width:62ch} @media(max-width:760px){ .carte{left:0;top:0;transform:none;width:100vw;height:100dvh;max-height:none;border-radius:0} .carte-ft{flex-wrap:wrap;gap:10px;padding:12px 16px} .carte-lg{order:3;flex:1 0 100%;max-width:none} .carte-n{display:none} } .chip-share{border-color:var(--lineCool);color:var(--lagoonTxt);font-weight:700} .chip-share:hover{border-color:var(--lagoon);background:var(--tint)} .chip-share.ok{background:var(--tropicDeep);border-color:var(--tropicDeep);color:#fff} .chip-share.ok svg{opacity:1} /* ── Bouton « Filtres » + PANNEAU (07/09) ──────────────────────────────────────────────────────── Avant : la barre déversait TOUTES les facettes à plat — 35 pastilles sur 236 px pour les séjours, dont 29 équipements. On garde en barre UN groupe rapide (le plus discriminant de l'onglet) et tout le reste passe dans un panneau, comme Airbnb : bouton avec badge du nombre de filtres actifs, sections, compteurs par option façon Booking, pied « Tout effacer » / « Afficher les N ». ── */ .chip-more{border-color:var(--ink);color:var(--ink);font-weight:700;padding-right:12px} .chip-more:hover{border-color:var(--titre);background:var(--cloud);color:var(--titre)} .chip-more .badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:2px; border-radius:var(--r-pill);background:var(--lagoonDeep);color:#fff;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums} /* ── Connexion (09/09) ───────────────────────────────────────────────────── Le book est la surface ORDINATEUR : tout ce qu'un client fait doit exister ici (regle 29). Reutilise le scrim et la boite des filtres : un seul motif de fenetre sur le site. */ /* La boite des filtres fait 700 px : c'est bon pour un panneau a colonnes, trop large pour un formulaire de trois champs, qui parait alors vide. */ #auPanel{width:min(460px,calc(100vw - 32px))} #msPanel{width:min(540px,calc(100vw - 32px))} .ms-bd{padding:0 22px 20px;display:flex;flex-direction:column;min-height:0} #msList{flex:1;overflow-y:auto;max-height:min(52vh,440px);padding:14px 0 4px} .ms-n{margin:16px 0;font-size:14.5px;color:var(--muted);line-height:1.6;text-align:center} .ms-b{max-width:78%;margin:0 0 10px;padding:10px 13px;border-radius:14px;background:var(--sand); border:1px solid var(--line)} .ms-b.moi{margin-left:auto;background:var(--tint);border-color:var(--soft)} .ms-t{margin:0;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} .ms-h{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)} .ms-w{display:flex;gap:8px;align-items:flex-end;padding-top:12px;border-top:1px solid var(--line)} #msTxt{flex:1;min-height:44px;max-height:130px;padding:11px 12px;font:inherit;font-size:15px; color:var(--ink);background:var(--shell);border:1px solid var(--line);border-radius:12px;resize:vertical} #msTxt:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)} #msSend{flex:none;padding:12px 17px;font:inherit;font-size:15px;font-weight:800;color:#fff; background:linear-gradient(180deg,var(--btnPriHaut),var(--btnPriBas)); box-shadow:var(--btnPriOmbre);border:0;border-radius:12px;cursor:pointer; transition:background .15s,transform .12s} #msSend:hover{background:linear-gradient(180deg,var(--btnPriHover),var(--btnPriBas));transform:translateY(-1px)} #msSend[disabled]{opacity:.6;cursor:progress} .ms-err{display:none;margin:10px 0 0;padding:10px 12px;border-radius:11px;font-size:14px; background:var(--coralSoft);color:#7a2418;border:1px solid #f6c4ba} .ms-err.on{display:block} .ms-doc{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5} .mr-msg{position:absolute;right:0;bottom:12px;font:inherit;font-size:12.5px;font-weight:700; color:var(--lagoonTxt);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline; text-underline-offset:3px} .mr-msg:hover{color:var(--lagoonTxt)} #mrPanel{width:min(560px,calc(100vw - 32px))} .mr-bd{padding:4px 24px 24px} .mr-n{margin:14px 0;font-size:14.5px;color:var(--muted)} .mr-c{position:relative;padding:14px 96px 14px 0;border-bottom:1px solid var(--line)} .mr-c:last-child{border-bottom:0} .mr-c>b{display:block;font-size:15.5px;line-height:1.35} .mr-m{margin-top:4px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums} .mr-e{position:absolute;right:0;top:15px;font-size:12px;font-weight:800;padding:4px 10px; border-radius:999px;background:var(--sandDeep);color:var(--inkSoft);white-space:nowrap} .mr-e-confirmed,.mr-e-paid{background:var(--tint);color:var(--lagoonDark)} .mr-e-cancelled,.mr-e-rejected,.mr-e-declined{background:var(--coralSoft);color:#7a2418} .mr-vide{padding:22px 0;text-align:center} .mr-vide h4{margin:0 0 8px;font-size:17px} .mr-vide p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6} .mr-lien{width:100%;margin:0 0 12px;padding:12px;font:inherit;font-size:15px;font-weight:700; border:1.5px solid var(--line);border-radius:12px;background:var(--shell);color:var(--ink);cursor:pointer} .mr-lien:hover{border-color:var(--lagoon);color:var(--lagoonTxt)} .ho-slots{margin:0 0 14px;text-align:left} .ho-slots[hidden]{display:none} .hs-t{margin:0 0 8px;font-size:11px;letter-spacing:.09em;font-weight:800;color:var(--muted);text-transform:uppercase} .hs-n{margin:0;font-size:14px;color:var(--muted);line-height:1.5} .hs-l{display:flex;flex-wrap:wrap;gap:8px} .hs-b{font:inherit;font-size:14px;font-weight:700;padding:9px 13px;border-radius:10px;cursor:pointer; border:1.5px solid var(--line);background:var(--shell);color:var(--ink);transition:border-color .15s,background .15s} .hs-b:hover:not([disabled]){border-color:var(--lagoon)} .hs-b.on{border-color:var(--lagoon);background:var(--tint);color:var(--lagoonDark)} .hs-b[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through} /* « Dernieres tables » : un liseré ambre, pas un rouge d'alarme. Le seuil vient de l'app (80 % des couverts pris) et compte des reservations reelles — on signale une rarete mesurée, on ne fabrique pas une urgence. */ .hs-b.rare{border-color:var(--gold);color:var(--goldTxt);background:color-mix(in srgb,var(--gold) 9%,var(--shell))} .hs-b.rare:hover:not([disabled]){border-color:var(--gold)} /* La liste d'attente n'apparait que si la journee est pleine : elle a donc droit a son propre bloc, sous les creneaux barrés. */ .hs-w{margin:14px 0 0;padding:14px 15px;border-radius:12px; background:var(--tint);border:1px solid var(--soft)} .hs-wt{margin:0 0 5px;font-size:15px;font-weight:800;color:var(--titre)} .hs-wp{margin:0 0 11px;font-size:14px;line-height:1.55;color:var(--ink)} .hs-wb{font:inherit;font-size:14.5px;font-weight:800;padding:11px 16px;border-radius:11px; border:0;cursor:pointer;color:#fff; background:linear-gradient(180deg,var(--btnPriHaut),var(--btnPriBas)); box-shadow:var(--btnPriOmbre);transition:background .15s,transform .12s} .hs-wb:hover:not([disabled]){background:linear-gradient(180deg,var(--btnPriHover),var(--btnPriBas));transform:translateY(-1px)} .hs-wb[disabled]{opacity:.6;cursor:progress} .hs-wm{margin:9px 0 0;font-size:14px;line-height:1.5} .hs-wm[hidden]{display:none} .hs-wm.ok{color:var(--lagoonTxt)} .hs-wm.err{color:var(--coralTxt)} .ho-rv{margin:0 0 14px;padding:13px 15px;border-radius:12px;text-align:left;font-size:14.5px;line-height:1.55} .ho-rv[hidden]{display:none} .ho-rv h4{margin:0 0 5px;font-size:16px;font-weight:800} .ho-rv p{margin:0} .ho-rv.ok{background:var(--tint);color:var(--lagoonDark);border:1px solid var(--soft)} .ho-rv.ko{background:var(--coralSoft);color:#7a2418;border:1px solid #f6c4ba} /* La mention de repli de langue : discrete, informative, jamais alarmante. Ce n'est pas une erreur — c'est une traduction qui n'existe pas encore, et le dire vaut mieux que de servir une autre langue en silence. */ /* Les avis sur la fiche : sobres, la voix des gens d'abord. */ .ov-avis{margin:26px 0 0;border-top:1px solid var(--line);padding-top:18px} .ov-avis>h4{margin:0 0 12px} .ov-av{padding:13px 0;border-bottom:1px solid var(--line)} .ov-av:last-of-type{border-bottom:0} .ov-av header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ov-av header b{font-size:14px} .ov-av-n{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--goldInk)} .ov-av-n svg{width:13px;height:13px;fill:var(--gold);stroke:none} .ov-av header time{margin-left:auto;font-size:12px;color:var(--muted)} .ov-av p{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--inkSoft)} .ov-av-rep{margin:9px 0 0 14px;padding:9px 13px;border-left:3px solid var(--line); background:var(--sand);border-radius:0 10px 10px 0} .ov-av-rep b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .ov-av-plus{margin:10px 0 0;font-size:13px;color:var(--muted)} .desc-lg{margin:6px 0 0;font-size:12.5px;color:var(--muted);font-style:italic} /* Le rappel de trajet : DANS le bloc de confirmation, separe par un filet, et dans une couleur qui n'alarme pas — ce n'est pas un probleme, c'est une prevenance. */ .rv-ride{margin:13px 0 0;padding:12px 0 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);text-align:left} .rv-ride b{display:block;font-size:14.5px;font-weight:800;margin:0 0 3px} .rv-ride p{margin:0;font-size:13.5px;line-height:1.5;opacity:.86} #hoRv2{width:100%} #hoRv2[hidden]{display:none} .au-bd{padding:4px 26px 26px} .au-gt{display:none} .au-sub{color:var(--muted);font-size:14.5px;margin:0 0 20px;line-height:1.55} .au-f{display:block;margin:0 0 14px} /* L'attribut `hidden` vient d'une feuille de style du navigateur : TOUTE regle d'auteur qui pose `display` l'ecrase. C'est ce qui avait affiche la carte sous le catalogue le 08/09 (.grid), et c'est ce qui laissait le champ mot de passe visible dans « mot de passe oublie ». Chaque bloc qu'on cache par `hidden` et qui porte un `display` a besoin de sa garde. */ .au-f[hidden],.au-alt[hidden]{display:none} .au-f>span{display:block;font-size:11px;letter-spacing:.09em;font-weight:800; color:var(--muted);margin:0 0 6px} .au-in{position:relative} .au-in input{width:100%;box-sizing:border-box;padding:12px 13px;font:inherit;font-size:15px; color:var(--ink);background:var(--shell);border:1px solid var(--line);border-radius:11px; transition:border-color .15s,box-shadow .15s} .au-in input:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)} .au-in input[type=password],.au-in input.pw{padding-right:84px} .au-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none; font:inherit;font-size:13px;font-weight:700;color:var(--lagoonTxt);cursor:pointer;padding:6px 6px} .au-hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5} /* Le bouton d'action des feuilles (connexion, CGU) : même grammaire que .ab.pri — dégradé soutenu, ombre teintée, lever/presser. C'était le « vieux bouton Excel » du porteur (18/09) : un aplat sans relief. */ .au-cta{width:100%;margin:6px 0 0;padding:14px;font:inherit;font-size:15px;font-weight:800; color:#fff;background:linear-gradient(180deg,var(--btnPriHaut),var(--btnPriBas)); border:0;border-radius:13px;cursor:pointer;box-shadow:var(--btnPriOmbre); transition:background .15s,transform .12s,box-shadow .18s,opacity .15s} .au-cta:hover{background:linear-gradient(180deg,var(--btnPriHover),var(--btnPriBas)); transform:translateY(-1px);box-shadow:var(--btnPriOmbre),var(--ombre-sm)} .au-cta:active{transform:translateY(0) scale(.99)} .au-cta:focus-visible{outline:2.5px solid var(--lagoon);outline-offset:2px} .au-cta[disabled]{opacity:.6;cursor:progress;transform:none} @media(prefers-reduced-motion:reduce){.au-cta{transition:opacity .15s}.au-cta:hover{transform:none}} /* De l'air sous la derniere ligne (10/09, porteur) : « jamais avoir un texte ecrit tout en bas d'une fenetre ». La creation de compte en avait, parce que les mentions legales la poussaient vers le haut ; la connexion n'en avait pas — un texte colle au bord donne l'impression d'une page coupee. La marge appartient donc au BLOC, pas au hasard de ce qui le suit. */ .au-alt{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin:16px 0 8px} .au-lnk{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--lagoonTxt); cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px} .au-err{display:none;margin:0 0 16px;padding:11px 13px;border-radius:11px;font-size:14px; line-height:1.5;background:var(--coralSoft);color:#7a2418;border:1px solid #f6c4ba} .au-err.on{display:block} .au-ok{display:none;margin:0 0 16px;padding:11px 13px;border-radius:11px;font-size:14px; line-height:1.5;background:var(--tint);color:var(--lagoonDark);border:1px solid var(--soft)} .au-ok.on{display:block} .au-legal{margin:16px 0 2px;font-size:12.5px;color:var(--muted);line-height:1.55} .au-legal a{color:var(--muted);text-underline-offset:2px} .au-done{text-align:center;padding:10px 0 6px} .au-done svg{color:var(--lagoonTxt);margin:0 0 12px} .au-who{display:flex;align-items:center;gap:11px;padding:2px 0 18px} .au-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--lagoonDeep);color:#fff;font-weight:800;font-size:17px} .au-who b{display:block;font-size:15.5px;line-height:1.3} .au-who span{display:block;font-size:13px;color:var(--muted)} .btn-log.on{background:var(--tint);border-color:var(--soft);color:var(--lagoonDark)} /* ── Connexion : deux colonnes sur grand ecran (10/09) ───────────────────── Le porteur : « ce n'est pas fait a la taille optimisee pour un grand ecran. Meme pour les pages de connexion et d'inscription, tu dois faire en rapport avec la version book, les memes couleurs, un theme similaire, mettre [la photo] en arriere-plan. » Une boite de 460 px au centre d'un ecran de 1600, c'est une fenetre de navigateur des annees 2000. Airbnb et Booking donnent a leur connexion la meme largeur qu'a leur produit, et une image qui rappelle ou l'on est. */ @media (min-width:900px){ #auPanel{width:min(880px,calc(100vw - 48px));flex-direction:row;align-items:stretch;max-height:min(88vh,620px)} #auPanel .fp-hd{position:absolute;top:0;right:0;width:50%;border-bottom:0;background:none;z-index:2; padding:18px 20px;justify-items:center} #auPanel .fp-hd h3{display:none} #auPanel .fp-x{left:auto;right:12px} .au-cote{display:flex;flex-direction:column;justify-content:flex-end;width:50%;flex:none; padding:32px 30px;color:#fff;position:relative;overflow:hidden;background:var(--lagoonDark)} .au-cote::before{content:"";position:absolute;inset:0; background-image:image-set(url("hero-1600.avif?v=04a3e30f") type("image/avif"), url("hero-1600.webp?v=c08c423c") type("image/webp")); background-image:url("hero-1600.webp?v=c08c423c"); background-size:cover;background-position:center;transform:scale(1.04)} .au-cote::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,37,52,.28) 0%,rgba(6,37,52,.62) 55%,rgba(6,37,52,.88) 100%)} .au-cote>*{position:relative;z-index:1} .au-cote h4{margin:0 0 10px;font-family:'Bricolage';font-size:27px;line-height:1.15;letter-spacing:-.02em} .au-cote p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.9);max-width:34ch} /* La marque se pose DANS la marge du volet, pas a son bord : `top:0;left:0` la faisait rogner par le debordement cache (mesure : « enua'p »). */ .au-cote .au-marque{position:absolute;top:26px;left:30px;display:flex;align-items:center;gap:9px; font-weight:800;font-size:15px;letter-spacing:-.01em;text-shadow:0 1px 12px rgba(6,37,52,.5)} /* `.fp-bd{padding:0 26px}` est declaree plus bas que `.au-bd` et l'emportait : marge du bas mesuree a 0, et « Creer un compte » collait au bord de la fenetre. On repose la marge avec la meme specificite que la regle qui gagnait, plutot que d'esperer que l'ordre nous soit favorable. */ #auPanel .fp-bd{width:50%;flex:1;padding:52px 34px 34px} .au-gt{display:block;margin:0 0 6px;font-family:'Bricolage';font-size:25px; line-height:1.2;letter-spacing:-.02em;color:var(--titre)} .au-bd{padding:52px 34px 34px} } @media (max-width:899px){ .au-cote{display:none} /* Sur petit ecran, la boite epouse son contenu. Sans ces deux lignes elle prenait TOUTE la hauteur de la fenetre pour un formulaire de deux champs — mesure a 420 px : 900 px de haut pour 304 px de contenu, alors que `.fp` annonce `max-height:min(86vh,880px)`. Je n'ai pas elucide quelle regle l'emportait ; je pose donc la contrainte explicitement plutot que d'ecrire une explication que je n'ai pas verifiee. */ #auPanel{max-height:min(86vh,880px);height:auto} #auPanel .fp-bd{flex:0 1 auto;padding:4px 26px 26px} } .fp-scrim{position:fixed;inset:0;z-index:900;background:rgba(6,37,52,.55);backdrop-filter:blur(3px);animation:fade .2s} .fp{position:fixed;z-index:901;left:50%;top:50%;transform:translate(-50%,-50%);width:min(700px,calc(100vw - 36px)); max-height:min(86vh,880px);background:var(--shell);border-radius:var(--r-xl);box-shadow:var(--sh-xl); display:flex;flex-direction:column;overflow:hidden;animation:pop .22s cubic-bezier(.2,.9,.3,1)} /* TROISIEME fois aujourd'hui : `.fp` et `.fp-scrim` posent `display`, ce qui ecrase l'attribut `hidden` de la feuille du navigateur. Le panneau de filtres n'en souffrait pas — il est cree puis RETIRE du document. Le mien vit dans la page : sans cette ligne il reste affiche, invisible a l'oeil sur grand ecran mais interceptant les clics, et il masquait le bouton de connexion sous 420 px. Mesure : clic refuse, « fp-hd intercepts pointer events ». */ .fp[hidden],.fp-scrim[hidden]{display:none} @keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .fp-hd{position:relative;display:grid;place-items:center;padding:17px 20px;border-bottom:1px solid var(--line);flex:none} .fp-hd h3{font-size:18px} .fp-x{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%; display:grid;place-items:center;color:var(--inkSoft);transition:.14s} .fp-x:hover{background:var(--sandDeep);color:var(--ink)} .fp-bd{overflow-y:auto;overscroll-behavior:contain;padding:0 26px} /* La ligne « commun a tous » : elle informe, elle ne se coche pas. Fond neutre, pas de bordure d'action — rien ne doit suggerer qu'on peut cliquer. */ .fp-note{background:var(--sand);border-radius:14px;padding:13px 15px} .fp-note h4{margin:0 0 4px!important} .fp-note p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)} .fp-sec{padding:24px 0;border-bottom:1px solid var(--line)} /* Une section-suite colle a celle du dessus (les tranches sous le curseur Prix) : meme sujet, pas de trait ni de titre entre les deux. */ .fp-suite{padding-top:0;margin-top:-10px} .fp-sec:has(+ .fp-suite){border-bottom:0;padding-bottom:8px} /* L'etoile des paliers de note suit la teinte du chip, comme le texte. */ .fp-chip svg{vertical-align:-2px;margin-right:2px} .fp-sec:last-child{border-bottom:0} .fp-sec h4{font-family:'Bricolage',system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;margin:0 0 15px} .fp-chips{display:flex;flex-wrap:wrap;gap:9px} .fp-chips .chip{font-size:14px;padding:9px 15px} .fp-chips .chip .n{color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums} .fp-chips .chip.on .n{color:rgba(255,255,255,.72)} .fp-chips .chip[disabled]{opacity:.4;pointer-events:none} .fp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:2px 14px} .fp-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer; transition:background .14s;font-size:14.5px;color:var(--inkSoft);text-align:left;width:100%} .fp-opt:hover{background:var(--cloud)} .fp-opt .box{flex:none;width:21px;height:21px;border:1.8px solid var(--line);border-radius:6px;display:grid;place-items:center; color:transparent;transition:.14s;background:var(--shell)} .fp-opt .box svg{width:13px;height:13px} .fp-opt.on{color:var(--ink);font-weight:600} .fp-opt.on .box{background:var(--lagoonDeep);border-color:var(--lagoonDeep);color:#fff} .fp-opt .ai{flex:none;display:grid;place-items:center;width:20px;color:var(--lagoonTxt);opacity:.9} .fp-opt .ai svg{width:17px;height:17px} .fp-opt .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fp-opt .n{margin-left:auto;color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;padding-left:6px} .fp-opt[disabled]{opacity:.42;cursor:default} .fp-opt[disabled]:hover{background:none} .fp-more{margin-top:12px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px} .fp-more:hover{color:var(--lagoonTxt)} /* Le contrôle de prix (histogramme + double curseur) est le MÊME que celui du popover : monté ici en ligne. */ /* En ligne dans le panneau : on annule le costume de popover (.cal-pop est caché et positionné). */ .fp .fp-price{display:block;position:static;border:0;box-shadow:none;padding:0;min-width:0;max-width:none;background:none} .fp-price .price-hd{display:none} .fp .fp-price .price-foot{display:none} .fp-price .price-hist,.fp-price .price-slider,.fp-price .price-fields{margin-left:0;margin-right:0} .fp-ft{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:15px 26px;border-top:1px solid var(--line);background:var(--cloud)} .fp-clear{font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:8px 2px} .fp-clear:hover{color:var(--lagoonTxt)} .fp-clear[disabled]{opacity:.35;pointer-events:none} /* L'ACTION PRINCIPALE du panneau suit la grammaire de boutons (etude du 18/09) : `--ocean` en fond disparaissait sur le panneau sombre — il ne restait que le texte blanc, mesure a l'oeil sur la capture. Le degrade btnPri est concu pour porter du blanc dans les DEUX themes. */ .fp-go{background:linear-gradient(180deg,var(--btnPriHaut),var(--btnPriBas));color:#fff;border-radius:var(--r-pill); padding:13px 26px;font-weight:700;font-size:15.5px;transition:.16s;box-shadow:var(--btnPriOmbre)} .fp-go:hover{transform:translateY(-1px);background:linear-gradient(180deg,var(--btnPriHover),var(--btnPriBas))} .fp-go:active{transform:scale(.985)} @media (prefers-reduced-motion: reduce){.fp-go,.fp-go:hover,.fp-go:active{transform:none}} .fp-go[disabled]{background:var(--sandDeep);color:var(--muted);pointer-events:none} @media(max-width:700px){ .fp{left:0;top:0;transform:none;width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;animation:fpUp .24s ease-out} @keyframes fpUp{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}} .fp-bd{padding:0 18px} .fp-ft{padding:13px 18px;padding-bottom:max(13px,env(safe-area-inset-bottom))} .fp-opts{grid-template-columns:1fr} .fp-opt{padding:11px 8px;min-height:44px} } .chip-clear:hover{border-color:var(--coral);background:var(--coralSoft);color:var(--coralTxt);transform:translateY(-1px)} /* Grille de fiches */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* DE LA PROFONDEUR, PAS UN APLAT (porteur, 14/09 : « pour le design c'est très sobre […] enlever la profondeur, le changement de fond, les variations pas juste linéaires de couleur […] c'est tout fort le maximum »). Trois choses au lieu d'une : un dégradé très doux qui donne un haut et un bas à la carte, une ombre BRUNE à deux niveaux (la couleur du système, qui réchauffe là où le bleu refroidit), et un soulèvement au survol. Le dégradé est vertical et non linéaire dans sa répartition — il s'arrête à 62 %, ce qui pose une lumière plutôt qu'une rampe. */ .card{background:linear-gradient(178deg,var(--shell) 0%,var(--shell) 62%,var(--cloud) 100%); border-radius:var(--r-lg);overflow:hidden; box-shadow:0 1px 2px rgba(59,42,24,.05),0 6px 18px -8px rgba(59,42,24,.16); border:1px solid var(--line); transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s cubic-bezier(.2,.8,.2,1); cursor:pointer;transition:.2s;display:flex;flex-direction:column} .card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .card:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(59,42,24,.06),0 18px 40px -14px rgba(59,42,24,.30)} @media (prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}} .card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sandDeep)} .card .ph img{width:100%;height:100%;object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s;will-change:transform} /* LA PHOTO AVANCE D'UN CRAN AU SURVOL. Le catalogue n'a QU'UNE photo par offre (mesuré : min 1, max 2 sur les 106 fiches) — le carrousel d'Airbnb n'a donc rien à faire défiler ici, et l'inventer serait une promesse vide. Ce que la carte peut faire avec une seule photo, c'est répondre : 4,5 % d'agrandissement et un voile qui se lève. C'est assez pour que la vignette ait l'air vivante, assez peu pour que le cadrage du sujet tienne (règle 12 : le sujet doit rester lisible, et un zoom fort le sort du cadre). */ .card:hover .ph img{transform:scale(1.045)} /* Un dégradé du bas vers le haut assoit les pastilles posées sur la photo : sans lui, « Vérifié » et l'étiquette flottent sur ce que la photo a de clair. Il s'efface au survol, quand la photo devient le sujet. */ .card .ph::after{content:'';position:absolute;inset:auto 0 0;height:42%;pointer-events:none; background:linear-gradient(to top,rgba(6,37,52,.30),transparent); transition:opacity .45s;opacity:1} .card:hover .ph::after{opacity:.55} @media(prefers-reduced-motion:reduce){ .card .ph img,.card:hover .ph img{transition:none;transform:none} .card .ph::after{transition:none} } .card:hover .ph img{transform:scale(1.05)} .card .rate{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px); padding:5px 10px;border-radius:var(--r-pill);font-weight:800;font-size:13px;color:var(--ocean);display:flex;align-items:center;gap:5px;box-shadow:var(--sh-sm)} .card .rate svg{color:var(--goldTxt)} /* Restaurants : carte (sections + plats) et horaires de la semaine. */ .msec{margin:14px 0 4px} .msec h5{font-family:'Bricolage';font-size:15px;font-weight:700;color:var(--lagoonTxt); text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)} .mi{display:flex;gap:14px;align-items:baseline;justify-content:space-between;padding:7px 0;border-bottom:1px dotted var(--line)} .mi:last-child{border-bottom:0} .mi-t{display:flex;flex-direction:column;gap:2px;min-width:0} .mi-t b{font-weight:700;font-size:15px} .mi-d{color:var(--muted);font-size:13.2px;line-height:1.45} .mi-p{font-weight:800;color:var(--titre);white-space:nowrap} .veg{display:inline-block;margin-left:7px;background:var(--tropicDeep);color:#fff;border-radius:var(--r-pill); padding:2px 8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;vertical-align:1px} .hgrid{display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px} .hrow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dotted var(--line);font-size:14px} .hrow:last-child{border-bottom:0} .hrow span{color:var(--muted);font-weight:600} .hrow b{font-weight:700;color:var(--ink)} .hrow b.closed{color:var(--faint);font-weight:600} /* 4 onglets : la barre defile plutot que de se serrer sur petit ecran. Ce bloc etait HORS media query — il ecrasait donc les tailles du haut de feuille sur TOUS les ecrans, y compris l'ordinateur (icones rendues a 26 px la ou la regle en demandait 30). Le commentaire annoncait « petit ecran » depuis le debut ; la condition manquait. */ @media(max-width:760px){ .tnav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start} .tnav::-webkit-scrollbar{display:none} .tnav a{white-space:nowrap;padding:7px 10px;font-size:14px;gap:7px} .tnav a .ti,.tnav a .ti svg{width:26px;height:26px} } /* Fiche d'exemple : signalee, jamais deguisee en offre reelle (le site vitrine promet « les fiches d'exemple sont signalees comme telles »). */ .card .rate.ex{background:var(--goldSoft);color:var(--goldTxt);font-weight:800;font-size:11.5px; letter-spacing:.2px;text-transform:uppercase;box-shadow:var(--sh-sm)} /* Fiche d'exemple QUI PORTE une note : l'aveu se range sous l'étoile, il ne la remplace pas. */ .card .rate.ex.sous{top:46px} .ex-inline{display:inline-flex;align-items:center;background:var(--goldSoft);color:var(--goldTxt); padding:4px 10px;border-radius:var(--r-pill);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.2px} .resv .exnote{display:flex;gap:8px;align-items:flex-start;background:var(--goldSoft);color:#7a5405; border:1px solid var(--gold);border-radius:var(--r-md);padding:10px 12px;font-size:13px; font-weight:600;line-height:1.42;margin-bottom:10px} .resv .exnote svg{color:var(--goldTxt);margin-top:1px} .ho.is-ex .em{background:var(--goldSoft);color:var(--goldTxt)} /* LE HAUT-DROIT EST RENDU AU COEUR, et l'etiquette descend en bas a droite. Ce n'est pas un rangement : le haut-droit d'une vignette est l'endroit ou la main va CHERCHER le coeur — Airbnb, Booking, Pinterest y sont tous. En bas, l'etiquette fait desormais paire avec « Verifie » : un bandeau de deux informations de meme nature (ce que c'est, ce qu'on en garantit) au lieu de deux coins depareilles. */ .card .tag{position:absolute;bottom:12px;right:12px;background:rgba(6,37,52,.82); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;padding:5px 11px;border-radius:var(--r-pill);font-weight:700;font-size:11.5px; text-transform:capitalize;box-shadow:0 2px 8px rgba(59,42,24,.22)} .card .verif{position:absolute;bottom:12px;left:12px;background:var(--tropicDeep);color:#fff;padding:5px 10px;border-radius:var(--r-pill);font-weight:700;font-size:11.5px;display:flex;align-items:center;gap:5px} /* ── METTRE DE COTE, DEPUIS LA VIGNETTE ───────────────────────────────────── Le coeur est pose sur la photo : il lui faut donc son propre fond, sinon il disparait sur une photo claire et crie sur une photo sombre. Un disque translucide flouté tient sur les deux — c'est la meme raison qui met un `backdrop-filter` sur l'etiquette ci-dessus. L'etat plein est CORAIL et non rouge : le rouge n'existe pas dans la marque, et le corail est deja la couleur de l'action (le bouton Rechercher). */ /* La silhouette d'attente de la pastille : un disque neutre, pas une lettre. Une lettre qui se corrige deux secondes plus tard est pire que pas de lettre. */ .mc-av.attente{position:relative} .mc-av.attente::after{content:'';position:absolute;inset:0;border-radius:inherit; background:currentColor;opacity:.42; -webkit-mask:radial-gradient(circle at 50% 38%, #000 19%, transparent 20%), radial-gradient(ellipse 34% 26% at 50% 84%, #000 99%, transparent 100%); mask:radial-gradient(circle at 50% 38%, #000 19%, transparent 20%), radial-gradient(ellipse 34% 26% at 50% 84%, #000 99%, transparent 100%)} .card .fav{position:absolute;top:11px;right:11px;width:36px;height:36px;padding:0; display:grid;place-items:center;border:0;cursor:pointer;border-radius:999px; background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3);color:var(--ocean); box-shadow:0 1px 2px rgba(59,42,24,.10),0 4px 14px -6px rgba(59,42,24,.30); transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,color .18s,box-shadow .18s; z-index:2} .card .fav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linejoin:round;transition:fill .18s,stroke .18s,transform .18s cubic-bezier(.2,.8,.2,1)} .card .fav:hover{background:var(--shell);transform:scale(1.08)} .card .fav:active{transform:scale(.92)} .card .fav[disabled]{opacity:.55;cursor:progress} .card .fav.on{color:var(--coralTxt)} .card .fav.on svg{fill:var(--coral);stroke:var(--coral)} /* Le battement au moment ou l'on met de cote : une seule pulsation, breve. Une animation qui se repete devient un tic ; celle-ci confirme un geste et se tait. */ .card .fav.on svg{animation:favPouls .34s cubic-bezier(.2,.8,.2,1)} @keyframes favPouls{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .card .fav,.card .fav svg{transition:none} .card .fav.on svg{animation:none} .card .fav:hover,.card .fav:active{transform:none} } .card .bd{padding:16px 17px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .card .loc{color:var(--muted);font-weight:600;font-size:13px;display:flex;align-items:center;gap:5px} .card h3{font-size:18px;font-weight:800;line-height:1.2} .card .am{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .card .am span{font-size:12px;color:var(--inkSoft);background:var(--tint);border-radius:var(--r-sm);padding:3px 8px;font-weight:600} /* Dates posées, calendrier absent : la carte le dit, en or (l'or est la couleur de ce qui reste à confirmer dans la marque), sans crier — c'est une précision, pas une alerte. */ .card .am span.tbc{background:var(--goldSoft);color:var(--goldTxt);display:inline-flex;align-items:center;gap:5px} .card .am span.tbc svg{width:11px;height:11px;flex:none;opacity:.85} .dispo-note{display:flex;align-items:flex-start;gap:9px;margin:-14px 0 26px;padding:11px 15px; background:var(--goldSoft);border:1px solid rgba(217,151,28,.22);border-radius:var(--r-md); color:var(--goldTxt);font-size:13.5px;line-height:1.45;max-width:78ch} .dispo-note svg{flex:none;margin-top:2px;opacity:.9} .card .foot{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line)} .card .price b{font-family:'Bricolage';font-size:20px;color:var(--titre)} .card .price small{color:var(--muted);font-weight:600;font-size:13px} .card .cta{color:var(--lagoonTxt);font-weight:800;font-size:14px;display:flex;align-items:center;gap:4px} .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px;font-weight:600} /* ── Value props ── */ .vp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .vp .it{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;box-shadow:var(--sh-sm)} .vp .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--lagoonTxt);margin-bottom:14px} .vp h3{font-size:18px;margin-bottom:6px} .vp p{color:var(--muted);font-size:14.5px;margin:0} /* ── App handoff band ── */ .band{background:var(--ocean);color:#fff;border-radius:var(--r-xl);padding:44px;display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center;overflow:hidden;position:relative} .band:before{content:"";position:absolute;inset:0;background:radial-gradient(45% 60% at 88% 10%,rgba(14,140,153,.5),transparent 60%)} .band .tx{position:relative;z-index:1} .band h2{font-size:clamp(24px,2.6vw,34px);color:#fff} .band p{color:rgba(255,255,255,.82);font-size:16px;margin:12px 0 22px;max-width:46ch} .band .stores{display:flex;gap:12px;flex-wrap:wrap} .storebtn{display:inline-flex;align-items:center;gap:10px;background:var(--shell);color:var(--titre);border-radius:14px;padding:11px 18px;font-weight:700} .storebtn.dis{opacity:.72;cursor:default} .storebtn .l1{display:block;font-size:11px;font-weight:600;opacity:.7;line-height:1} .storebtn .l2{display:block;font-size:15px;font-weight:800;line-height:1.1} .band-seal{position:absolute;right:-46px;bottom:-84px;width:300px;height:300px;opacity:.14;pointer-events:none;z-index:0;animation:spin 140s linear infinite} .band-seal .seal{width:100%;height:100%} .band .qr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center} .qr-card{background:var(--shell);border-radius:var(--r-lg);padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;box-shadow:var(--sh-lg)} .qr-inner{background:linear-gradient(135deg,var(--tint),var(--shell) 70%);border:1px solid var(--lineCool);border-radius:var(--r-md);padding:12px;display:flex;align-items:center;justify-content:center} .qr-inner img{width:150px;height:150px;display:block} .qr-card span{display:block;color:var(--titre);font-weight:800;font-size:12.5px;letter-spacing:.01em;text-align:center} /* ── Footer ── */ .foot-b{background:var(--oceanMid);color:rgba(255,255,255,.8);padding:44px 0 30px;margin-top:20px} .foot-b .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px} .foot-b .foot-cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:0;color:#fff; font-weight:800;font-size:14.5px;border-bottom:2px solid var(--gold);width:auto} .foot-b .foot-cta:hover{border-bottom-color:#fff} .foot-b .bot a.mail{display:inline;color:#fff;text-decoration:underline;text-underline-offset:3px;padding:0} @media(max-width:820px){.foot-b .cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-b .cols{grid-template-columns:1fr}} .foot-b h4{color:#fff;font-family:'Bricolage';font-size:16px;margin-bottom:12px} .foot-b a{display:block;color:rgba(255,255,255,.78);padding:5px 0;font-size:14.5px} .foot-b a:hover{color:#fff} .foot-b .lead{max-width:34ch;font-size:14.5px} .foot-b .bot{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px} /* ── Overlay détail ── */ .ov{position:fixed;inset:0;z-index:60;display:none} .ov.open{display:block} .ov .scrim{position:absolute;inset:0;background:rgba(6,37,52,.55);backdrop-filter:blur(3px);animation:fade .2s} .ov .panel{position:absolute;inset:3vh 0 0;max-width:1080px;margin:0 auto;background:var(--sand);border-radius:26px 26px 0 0; box-shadow:var(--sh-xl);overflow:hidden;display:flex;flex-direction:column;animation:rise .28s cubic-bezier(.2,.8,.2,1)} .ov .obar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:var(--shell);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2} .ov .obar .x{width:38px;height:38px;border-radius:50%;background:var(--sandDeep);display:flex;align-items:center;justify-content:center;color:var(--ink)} .ov .obar .x:hover{background:var(--line)} .ov .obody{overflow:auto;flex:1} /* LA MOSAIQUE SUPPOSAIT CINQ PHOTOS ; LE CATALOGUE EN A UNE (14/09). `2fr 1fr 1fr` avec une seule image laissait DEUX COLONNES VIDES — pres de la moitie du haut de la fiche en sable nu. C'est la regle 9 prise en flagrant delit : « ne pas copier une mise en page qui suppose un inventaire dense ». Mesure sur les 106 fiches : une photo chacune, deux au maximum. La grille suit donc ce qu'on a — bandeau a une photo, deux colonnes a deux, mosaique a trois et plus. Le jour ou un prestataire en publiera cinq, la mosaique reprendra sa place sans qu'on y touche. */ .gal{display:grid;gap:6px;padding:6px} .gal img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block} .gal.g1{grid-template-columns:1fr} .gal.g1 img{height:clamp(300px,36vw,480px)} .gal.g2{grid-template-columns:1fr 1fr} .gal.g2 img{height:clamp(220px,24vw,320px)} .gal.g3{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px} .gal.g3 img{height:100%} .gal.g3 img:first-child{grid-row:span 2;height:306px} /* 4 et 5 photos : LA mosaique d'Airbnb — une grande a gauche, un damier a droite. Au-dela de 5, les suivantes vivent dans la visionneuse. */ .gal.g4,.gal.g5{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:190px} .gal.g4 img,.gal.g5 img{height:100%} .gal.g4 img:first-child,.gal.g5 img:first-child{grid-row:span 2;height:388px} .gal.g4 img:nth-child(n+5),.gal.g5 img:nth-child(n+6){display:none} @media(max-width:900px){.gal.g4,.gal.g5{grid-template-columns:1fr 1fr} .gal.g4 img:first-child,.gal.g5 img:first-child{grid-column:span 2;grid-row:auto;height:240px}} .det{display:grid;grid-template-columns:1.6fr .9fr;gap:32px;padding:26px 26px 40px;align-items:start} .det .main h2{font-size:28px} .det .main .sub{color:var(--muted);font-weight:600;margin:8px 0 18px;display:flex;flex-wrap:wrap;gap:6px 16px} .det .main .sub b{color:var(--ink)} .det .main p.desc{font-size:16px;color:var(--inkSoft);line-height:1.65} .det h4{font-size:16px;margin:22px 0 12px;font-family:'Bricolage'} /* ═══ LA FICHE FACON PAGE (20/09) — sections a filets, replis, calendrier ═══ */ /* La tete AVANT la galerie, comme la reference mesuree ; l'eyebrow porte la MARQUE : le mot du metier en lettres espacees lagon — la caracterisation que le porteur reclamait (« l'esprit et l'identite de la marque »). */ .fiche-tete{padding:24px 26px 14px} .fiche-tete .sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--inkSoft); font-weight:600;font-size:14.5px} .fiche-tete .sub svg{vertical-align:-2px} .fiche-tete .eyebrow{font:800 11.5px/1 'PJS',sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--lagoonTxt);margin:0 0 9px} .fiche-tete h2{font-family:'Bricolage','PJS',sans-serif;font-weight:800;font-size:clamp(24px,2.6vw,32px); letter-spacing:-.018em;line-height:1.12;margin:0 0 8px} .note-lien{display:inline-flex;align-items:center;gap:5px;color:var(--ink);text-decoration:underline; text-underline-offset:3px;font-weight:600} .note-lien b{font-family:'Bricolage',sans-serif;font-weight:800} .galwrap{position:relative;padding:0 26px} .galwrap .gal{border-radius:18px;overflow:hidden;padding:0;gap:8px} .lbx-open{position:absolute;right:44px;bottom:16px;background:var(--shell);border:1px solid var(--line); border-radius:10px;padding:8px 14px;font:700 13.5px/1 'PJS',sans-serif;color:var(--ink);cursor:pointer; box-shadow:var(--sh-sm)} .lbx-open:hover{border-color:var(--lagoon)} /* La signature tatau : un FRAGMENT de 86 px sous l'eyebrow — complet en hauteur (le svg fait 18 px), et une seule fois : la marque signe, elle ne tapisse pas (porteur, 20/09 : « réutilisation trop intensive »). */ .tatau-trait{display:block;width:86px;height:18px;line-height:0;color:var(--lagoon);opacity:.5;margin:2px 0 10px;overflow:hidden} /* la visionneuse plein ecran */ .lbx{position:fixed;inset:0;z-index:340;background:rgba(4,20,26,.96);display:grid;place-items:center} .lbx img{max-width:min(92vw,1400px);max-height:86vh;border-radius:10px;object-fit:contain} .lbx-x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:22px;cursor:pointer; width:44px;height:44px;border-radius:50%;display:grid;place-items:center} .lbx-x:hover{background:rgba(255,255,255,.12)} .lbx-p,.lbx-s{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);border:0; width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#0C2430} .lbx-p{left:22px}.lbx-s{right:22px} .lbx-p[disabled],.lbx-s[disabled]{display:none} .lbx-n{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff; font:700 13px/1 'PJS',sans-serif;letter-spacing:.06em} html.lbx-ouverte,html.lbx-ouverte body{overflow:hidden} /* le panneau SUIT le scroll : l'aside doit prendre la hauteur de la rangee, sinon le sticky n'a aucune course (mesure : top 552 → −648 au scroll). */ .det #resvMount{align-self:stretch} .fs{border-top:1px solid var(--line);margin-top:26px;padding-top:22px} .fs[hidden]{display:none} .main h4{margin:26px 0 12px;padding-top:22px;border-top:1px solid var(--line); font-family:'Bricolage','PJS',sans-serif;font-size:19px;letter-spacing:-.01em} .main .sub+h4,.fs h4{border-top:0;padding-top:0;margin-top:0} .fs-aide{margin:2px 0 14px;font-size:13.5px;color:var(--muted)} .hote{display:flex;align-items:center;gap:13px} .hote-av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center; background:var(--lagoonDeep);color:#fff;font:800 19px/1 'PJS',sans-serif} .hote-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hote-t b{font-size:15.5px} .desc.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .lien-plus{background:none;border:0;padding:0;margin:8px 0 0;cursor:pointer;font:700 14px/1.3 'PJS',sans-serif; color:var(--ink);text-decoration:underline;text-underline-offset:3px} .lien-plus:hover{color:var(--lagoonTxt)} .lien-plus[hidden]{display:none} /* le calendrier double mois de la fiche */ .cf-nav{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px} .cf-nav button{background:var(--shell);border:1.5px solid var(--line);border-radius:50%;width:32px;height:32px; display:grid;place-items:center;cursor:pointer;color:var(--ink)} .cf-nav button:hover{border-color:var(--lagoon)} .cf-nav button[disabled]{opacity:.3;pointer-events:none} .cf-nuits{font:700 14px/1 'PJS',sans-serif;color:var(--lagoonTxt)} .cf-d{display:grid;grid-template-columns:1fr 1fr;gap:26px} .cf-m b{display:block;text-align:center;font:700 14.5px/1 'PJS',sans-serif;margin:0 0 10px} .cf-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px} .cf-w{font:700 10.5px/1 'PJS',sans-serif;color:var(--faint);text-align:center;padding:4px 0 6px} .cf-j{height:36px;border:0;background:none;border-radius:50%;cursor:pointer;font:600 13.5px/1 'PJS',sans-serif; color:var(--ink)} .cf-j:hover:not([disabled]){background:var(--tint)} .cf-j.off{visibility:hidden} .cf-j.pris{color:var(--faint);text-decoration:line-through;cursor:default} .cf-j.sel{background:var(--lagoonDeep);color:#fff} .cf-j.in{background:var(--tint);border-radius:0} .cf-x{margin-top:10px} @media(max-width:900px){.cf-d{grid-template-columns:1fr}} /* les points forts */ .pf{display:flex;flex-direction:column;gap:16px} .pf-i{display:flex;gap:14px;align-items:flex-start} .pf-ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--lagoonTxt)} .pf-ic svg{width:17px;height:17px} .pf-i b{display:block;font-size:15px;margin-bottom:2px} .pf-i span:not(.pf-ic){font-size:13.5px;color:var(--muted);line-height:1.5} /* « À savoir » — trois colonnes qui deviennent une pile en etroit */ .as-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .as-g b{display:block;font-size:14.5px;margin-bottom:8px} .as-g ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .as-g li{font-size:13.5px;color:var(--inkSoft);line-height:1.5} @media(max-width:900px){.as-g{grid-template-columns:1fr}} /* la carte de situation */ .cfmap{height:320px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--tint)} .amgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .amgrid .a{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--inkSoft);font-size:14.5px} .amgrid .a[hidden]{display:none} /* la famille payee 4 fois : display ecrase hidden — « Afficher les equipements ne fait rien » (20/09) */ .amgrid .a .ai{width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--lagoonTxt);display:flex;align-items:center;justify-content:center} .airbnb{display:flex;align-items:center;gap:10px;background:var(--goldSoft);border:1px solid #f0dca0;border-radius:var(--r-md);padding:12px 15px;margin-top:20px;font-weight:600;color:var(--goldTxt);font-size:14px} /* Panneau réservation (sticky) */ .resv{position:sticky;top:16px;background:var(--shell);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:20px} .resv .pr{display:flex;align-items:baseline;gap:6px;margin-bottom:14px} .resv .pr b{font-family:'Bricolage';font-size:26px;color:var(--titre)} .resv .pr small{color:var(--muted);font-weight:600} .resv .row{display:flex;gap:10px;margin-bottom:10px} .resv .in{flex:1;border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--cloud)} .resv .in label{display:block;font-weight:800;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .resv .in input{border:0;background:none;font-family:inherit;font-weight:700;font-size:15px;color:var(--ink);width:100%;outline:none} .resv .gstep{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:var(--r-md);padding:9px 14px;margin-bottom:14px;background:var(--cloud)} .resv .gstep .lb{font-weight:700;font-size:14.5px} .resv .brk{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;display:flex;flex-direction:column;gap:8px} .resv .brk .li{display:flex;justify-content:space-between;font-size:14.5px;color:var(--inkSoft)} .resv .brk .li.tot{border-top:1px solid var(--line);padding-top:10px;margin-top:2px;font-weight:800;color:var(--ink);font-size:17px} .resv .brk .li.tot b{font-family:'Bricolage';font-size:20px;color:var(--titre)} .resv .book{width:100%;justify-content:center;margin-top:14px} .resv .note{color:var(--muted);font-size:12.5px;text-align:center;margin-top:10px;line-height:1.4} /* ── Devise secondaire (réservations séjours/activités) ── */ .conv{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:2px;letter-spacing:.01em} .card .foot{align-items:flex-start} .resv .pr{justify-content:space-between;align-items:flex-start;gap:10px} .resv .pr-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px} .resv .pr-main .conv{flex-basis:100%;font-size:13px;margin-top:1px} .resv .brk .li.conv-line,.ho .box .recap .li.conv-line{justify-content:flex-end;color:var(--muted);font-weight:600;border:0;padding-top:2px;margin-top:-4px} .conv-line .conv{display:inline;font-size:12.5px} /* Sélecteur de devise du panneau (menu custom #curSel) : le bouton garde sa largeur naturelle et ne tronque JAMAIS le code devise ('USD' clippé en 'US…'). Le mount ne rétrécit pas ; c'est le prix (.pr-main, déjà en flex-wrap) qui cède si la place manque. Passe à la ligne plutôt que de clipper. */ .resv .pr{flex-wrap:wrap} .resv .pr>.ddmount{flex:0 0 auto} .resv .pr .dd-btn{white-space:nowrap} .resv .pr .dd-val{min-width:0;overflow:visible;text-overflow:clip} /* ── Menu déroulant CUSTOM (destination / tri / devise — jamais de picker OS) ── */ .ddmount{display:inline-flex;min-width:0} .dd{position:relative;display:inline-flex;min-width:0} .dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px; border:1.5px solid var(--lineCool);background:var(--cloud);color:var(--ink); font-family:inherit;font-weight:700;font-size:13px;line-height:1;border-radius:var(--r-pill); padding:8px 13px;min-width:0;max-width:100%;transition:border-color .16s,box-shadow .16s,background .16s} .dd-btn:hover{border-color:var(--gold)} .dd-btn:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--goldSoft)} .dd.open .dd-btn{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldSoft);background:var(--shell)} .dd-val{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dd-val svg{flex:none;width:13px;height:13px;opacity:.8} .dd-val .fl{font-size:15px;line-height:1} .dd-chev{flex:none;opacity:.65;transition:transform .2s} .dd.open .dd-chev{transform:rotate(180deg)} .dd-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:55;min-width:100%;max-width:min(88vw,320px); max-height:min(60vh,340px);overflow-y:auto;background:var(--shell);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:6px;display:none;transform-origin:top; animation:ddIn .16s cubic-bezier(.2,.8,.2,1)} .dd.open .dd-menu{display:block} /* Menu ouvert : monté sur en position:fixed → PREMIER PLAN (au-dessus de la barre de recherche, des stats, du catalogue et de l'overlay). Position calculée en JS depuis le rect du bouton (cf. place()). */ .dd-menu.floating{display:block;position:fixed;z-index:1000;margin:0;max-width:min(94vw,340px)} .dd-menu.r{left:auto;right:0} .dd-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-sm); font-family:inherit;font-weight:600;font-size:14px;color:var(--inkSoft);white-space:nowrap; transition:background .12s,color .12s} .dd-opt svg{flex:none;width:14px;height:14px;opacity:.8} .dd-opt .fl{font-size:16px;line-height:1} .dd-opt:hover,.dd-opt:focus-visible{background:var(--tint);color:var(--lagoonTxt);outline:none} .dd-opt.sel{background:var(--lagoonDeep);color:#fff} .dd-opt.sel svg{opacity:1} .dd-opt.sel:hover,.dd-opt.sel:focus-visible{background:var(--lagoonDeep);color:#fff} /* Menu Destination GROUPÉ (double filtrage archipel → île) : en-tête d'archipel SÉLECTIONNABLE en petites capitales (filtre tout l'archipel), ses îles indentées dessous. N'apparaît qu'à ≥2 archipels au catalogue → tant qu'on tient sur un seul archipel, la liste reste plate et compacte. */ .dd-opt.dd-group{font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:var(--muted);margin-top:4px} .dd-menu .dd-opt.dd-group:first-child{margin-top:0} .dd-opt.dd-group.sel{color:#fff} .dd-opt.dd-child{padding-left:24px} .dd-opt.dd-child svg{opacity:.65} @keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* Variante « champ » : la Destination dans la barre de recherche (sans bordure, gros texte) */ .search .fld .ddmount,.search .fld .dd{width:100%} .search .fld .dd-btn{border:0;background:none;border-radius:0;padding:2px 0;width:100%;font-size:16px;font-weight:600} .search .fld .dd-btn:hover,.search .fld .dd.open .dd-btn{box-shadow:none;background:none;border:0} .search .fld .dd-menu{min-width:220px} /* ── Calendrier CUSTOM (plage dual-mois / date unique — jamais de ) ── Même langage que le menu déroulant : popover monté sur , position:fixed calculée en JS, premier plan, recadré dans le viewport. Le bouton réutilise .dd-btn (styles partagés). */ .cal{position:relative;display:inline-flex;min-width:0} .cal-btn{width:100%} .cal-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-val svg{flex:none;opacity:.7} .dd-btn .ph{color:var(--muted);font-weight:600} .cal.open .cal-btn{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldSoft);background:var(--shell)} .cal-pop{position:absolute;top:calc(100% + 7px);left:0;z-index:55;background:var(--shell); border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:12px;display:none} /* Ouvert = monté sur en position:fixed → PREMIER PLAN (au-dessus barre de recherche + overlay). Position (left/top/maxHeight) posée en JS depuis le rect du bouton — cf. place(). */ .cal-pop.floating{display:block;position:fixed;z-index:1000;margin:0;overflow-y:auto; max-width:min(96vw,520px);animation:ddIn .16s cubic-bezier(.2,.8,.2,1)} .cal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px} .cal-nav{width:32px;height:32px;border-radius:10px;border:1.5px solid var(--line);color:var(--lagoonTxt); display:flex;align-items:center;justify-content:center;transition:.14s} .cal-nav:hover{border-color:var(--lagoon);background:var(--tint)} .cal-nav.off,.cal-nav[disabled]{color:var(--faint);opacity:.42;cursor:default;pointer-events:none;background:none;border-color:var(--line)} .cal-grids{display:flex;gap:20px} .cal-grid{min-width:214px} .cal-mtitle{text-align:center;font-family:'Bricolage';font-weight:800;font-size:14.5px;color:var(--titre); text-transform:capitalize;margin:2px 0 8px} .cal-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px} .cal-wd span{text-align:center;font-size:11px;font-weight:800;color:var(--faint);letter-spacing:.02em} .cal-days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px} .cal-day{height:32px;display:flex;align-items:center;justify-content:center;border:0;background:none; font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);border-radius:9px;transition:background .12s,color .12s} .cal-day.emp{visibility:hidden} .cal-day:not(.off):not(.emp):hover{background:var(--tint);color:var(--lagoonTxt)} .cal-day.off{color:var(--faint);opacity:.4;cursor:default} .cal-day.in{background:var(--tint);color:var(--lagoonTxt);border-radius:0} .cal-day.sel{background:var(--lagoonDeep);color:#fff;font-weight:800} .cal-day.a{border-radius:9px 0 0 9px} .cal-day.b{border-radius:0 9px 9px 0} .cal-day.a.b{border-radius:9px} .cal-day.sel:hover{background:var(--lagoonDeep);color:#fff} .cal-ft{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .cal-hint{font-size:12.5px;color:var(--muted);font-weight:600} .cal-clear{font-size:12.5px;font-weight:700;color:var(--coralTxt);padding:5px 11px;border-radius:var(--r-pill)} .cal-clear:hover{background:var(--coralSoft)} /* Calendrier dans la barre de recherche : champ sans bordure (comme la Destination). */ .search .fld .cal,.search .fld .cal-btn{width:100%} .search .fld .cal-btn{border:0;background:none;border-radius:0;padding:2px 0;font-size:16px;font-weight:600} .search .fld .cal-btn:hover,.search .fld .cal.open .cal-btn{box-shadow:none;background:none;border:0} /* Calendrier dans le panneau réservation : remplit la « case » (pas de double bordure). */ .resv .in-cal .cal,.resv .in-cal .cal-btn{width:100%} .resv .in-cal .cal-btn{border:0;background:none;border-radius:0;padding:0;font-size:15px;font-weight:700;justify-content:space-between} .resv .in-cal .cal-btn:hover,.resv .in-cal .cal.open .cal-btn{box-shadow:none;background:none;border:0} @media(max-width:600px){.cal-grids{flex-direction:column;gap:12px}.cal-grid{min-width:0}.cal-pop.floating{max-width:min(94vw,320px)}} @media(prefers-reduced-motion:reduce){.cal-pop.floating{animation:none}} @media(prefers-reduced-motion:reduce){.dd-menu{animation:none}} /* ── Filtre PRIX façon Airbnb (déclencheur + popover flottant : histogramme + double-curseur + champs) ── Le popover réutilise .cal-pop.floating (position:fixed, z-1000, premier plan). .price-pop = surcouches. */ .price-wrap{display:inline-flex;min-width:0} .price-trigger{cursor:pointer} .price-trigger .pt-val{font-weight:700} .price-pop{padding:14px 14px 12px;min-width:300px;max-width:min(94vw,360px)} .price-hd{margin:0 20px 4px} .price-cap{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} /* Histogramme : barres alignées sur le rail (mêmes retraits 20px). Barres dans la plage = lagon, hors = grises. */ .price-hist{display:flex;align-items:flex-end;gap:2px;height:58px;padding:0 20px} .price-bar{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0} .price-bar>i{display:block;width:100%;background:var(--lineCool);border-radius:3px 3px 0 0;transition:background .12s} .price-bar.on>i{background:var(--lagoon)} /* Rail + double-curseur custom (pointer events — jamais ) */ .price-slider{padding:12px 20px 4px} .price-track{position:relative;height:4px;background:var(--lineCool);border-radius:4px} .price-fill{position:absolute;top:0;height:4px;background:var(--lagoon);border-radius:4px} .price-handle{position:absolute;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);background:none;border:0;padding:0;touch-action:none;cursor:grab;z-index:2} .price-handle::before{content:"";display:block;width:22px;height:22px;margin:9px auto;border-radius:50%;background:#fff;border:1.5px solid var(--lineCool);box-shadow:0 2px 6px rgba(6,37,52,.28);transition:border-color .14s,box-shadow .14s} .price-handle:hover::before{border-color:var(--lagoon)} .price-handle:active{cursor:grabbing} .price-handle:active::before{border-color:var(--lagoon);box-shadow:0 3px 9px rgba(6,37,52,.34)} .price-handle:focus-visible{outline:none} .price-handle:focus-visible::before{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldSoft),0 2px 6px rgba(6,37,52,.28)} .price-handle.h-max{z-index:3} /* Champs Min / Max éditables (digits-only, suffixe XPF) */ .price-fields{display:flex;align-items:flex-end;gap:10px;margin-top:16px} .price-field{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0} .price-field>span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .pf-in{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:9px 12px;background:var(--cloud);transition:border-color .14s,box-shadow .14s,background .14s} .pf-in:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldSoft);background:var(--shell)} .pf-in input{border:0;background:none;font-family:inherit;font-weight:700;font-size:15px;color:var(--ink);width:100%;min-width:0;outline:none} .pf-in em{font-style:normal;font-weight:700;font-size:12px;color:var(--faint);flex:none} .price-sep{width:12px;height:1.5px;background:var(--line);flex:none;margin-bottom:20px} .price-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)} .price-clear{font-size:13px;font-weight:700;color:var(--inkSoft);text-decoration:underline;text-underline-offset:2px;padding:6px 4px} .price-clear:hover{color:var(--ink)} .price-done{font-size:13px;font-weight:800;color:#fff;background:var(--lagoonDeep);border-radius:var(--r-pill);padding:9px 20px;box-shadow:0 5px 14px rgba(7,94,102,.28)} .price-done:hover{background:var(--lagoon)} @media(prefers-reduced-motion:reduce){.price-pop.floating{animation:none}} /* Modale handoff (Réserver → app) */ .ho{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px} .ho.open{display:flex} .ho .scrim{position:absolute;inset:0;background:rgba(6,37,52,.6)} .ho .box{position:relative;background:var(--shell);border-radius:var(--r-xl);max-width:440px;width:100%;padding:32px;text-align:center;box-shadow:var(--sh-xl);animation:rise .24s} .ho .box .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--sandDeep);display:flex;align-items:center;justify-content:center} .ho .box .em{width:64px;height:64px;border-radius:20px;background:var(--tint);color:var(--lagoonTxt);display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .ho .box h3{font-size:23px;margin-bottom:8px} .ho .box p{color:var(--muted);font-size:15px;margin:0 0 18px} .ho .box .recap{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;margin-bottom:18px;text-align:left;font-size:14px} .ho .box .recap .li{display:flex;justify-content:space-between;padding:3px 0;color:var(--inkSoft)} .ho .box .recap .li b{color:var(--ink)} .ho .box img.qr{width:140px;height:140px;margin:6px auto 4px} /* REGLE 30, quatrieme occurrence du meme piege : `.qr` pose `display:flex` plus haut, et une regle d'auteur ecrase TOUJOURS l'attribut `hidden` du navigateur. Sans cette ligne, cacher le QR ne le cache pas. */ .qr[hidden]{display:none} #hoQrL[hidden]{display:none} .ho .box .em[hidden],.ho .box .stores[hidden]{display:none} .ho .box .stores{display:flex;gap:10px;justify-content:center;margin-top:10px} /* ── Bandeau confiance (stats réelles) ── */ .statstrip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;background:var(--shell);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-sm);padding:15px 30px;margin:26px auto 0;max-width:860px;position:relative;z-index:6} .statstrip .st{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--inkSoft)} /* QUATRIEME FOIS LE MEME PIEGE, et celui-ci etait VISIBLE — une etoile toute seule, sans note, dans la bande sous la recherche. `display:inline-flex` ci-dessus ecrase l'attribut `hidden` du navigateur : le bloc se croyait cache et s'affichait vide. Les trois precedentes (`.grid`, `.au-f`, `.fp`) sont dans les regles 30 ; celle-ci prouve que la regle ne suffit pas tant qu'on l'ecrit APRES coup. Toute classe qui pose un `display` porte sa garde dans la foulee. */ .statstrip .st[hidden]{display:none} .statstrip .st svg{color:var(--lagoonTxt);flex:none} .statstrip .st b{font-family:'Bricolage';font-weight:800;color:var(--titre);font-size:16px;letter-spacing:-.01em} /* ── Frises MATA — dividers pleine largeur (sceaux mata en tuiles denses, dérive lente) ── */ .mata-fz{width:100%;overflow:hidden;line-height:0;pointer-events:none;margin:2px 0} .mata-fz svg{display:block} /* Frise séparatrice = frise « service » de l'app (niho / dents de requin, double rangée entrelacée). */ .niho-fz{width:100%;overflow:hidden;line-height:0;pointer-events:none;margin:6px 0} .niho-fz svg{display:block} /* ── Sceau mata (filigrane authentique) ── */ .seal{display:block;width:100%;height:100%} .hdeco{position:absolute;pointer-events:none;z-index:1} .hdeco .seal{width:100%;height:100%} .hdeco-a{top:-96px;right:-72px;width:360px;height:360px;opacity:.13;animation:floatY 15s ease-in-out infinite} .hdeco-b{bottom:-150px;left:-96px;width:300px;height:300px;opacity:.08;animation:spin 120s linear infinite} .hero .wrap{z-index:2} /* ── Scroll-reveal ── */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms);will-change:opacity,transform} .reveal.in{opacity:1;transform:none} .card.reveal{transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*55ms)} .card.reveal.in{transform:none;transition-delay:0s} .card.reveal.in:hover{transform:translateY(-4px);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s} /* ── Depth carte : note + avis ── */ /* CETTE PASTILLE EST BLANCHE DANS LES DEUX THEMES — elle est posee sur une PHOTO, et une photo ne change pas la nuit. Son encre ne doit donc pas suivre le theme : `--muted` s'eclaircit pour rester lisible sur du bleu nuit, et devenait gris pale sur blanc. Mesure sur le domaine apres la bascule : 2,33:1 en sombre contre 5,71:1 en clair, 198 fois — le meme element repete sur chaque vignette de chaque page. Troisieme forme du meme piege aujourd'hui : un jeton ne peut pas faire deux metiers. Ici ce n'est pas fond-contre-encre, c'est encre-sur-surface- de-theme contre encre-sur-surface-FIXE. */ .card .rate .rv{font-weight:600;color:#5A6A75;font-size:11px;margin-left:1px} /* ── Empty-state enrichi ── */ .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:44px 20px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px} .empty-seal{width:118px;height:118px;color:var(--lineCool);opacity:.85;margin-bottom:6px} .empty-seal svg{width:100%;height:100%} .empty p{margin:0} /* ── Animations d'entrée hero ── */ .hero .eyebrow,.hero h1,.hero p.sub,.hero .trust{animation:heroIn .85s cubic-bezier(.2,.8,.2,1) both} .hero h1{animation-delay:.08s} .hero p.sub{animation-delay:.16s} .hero .trust{animation-delay:.24s} .hero:before{animation:auroraPulse 13s ease-in-out infinite} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(22px) rotate(6deg)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes auroraPulse{0%,100%{opacity:.82}50%{opacity:1}} @media(prefers-reduced-motion:reduce){ .reveal,.card.reveal{opacity:1!important;transform:none!important;transition:none!important} .hdeco,.band-seal{animation:none} .hero .eyebrow,.hero h1,.hero p.sub,.hero .trust,.hero:before{animation:none} } /* Responsive */ @media(max-width:960px){ .grid{grid-template-columns:repeat(2,1fr)} .vp{grid-template-columns:repeat(2,1fr)} .search{grid-template-columns:1fr 1fr;gap:4px} .search .fld+.fld{border-left:0} .search .go{grid-column:1/-1;height:52px;margin:6px 4px 4px} .det{grid-template-columns:1fr} .resv{position:static} .band{grid-template-columns:1fr;text-align:center;justify-items:center} .band p{margin-left:auto;margin-right:auto} .band .stores{justify-content:center} .band .qr{justify-self:center} .sec-head{align-items:flex-start} .sec-head .sh-r{width:100%;justify-content:space-between} .foot-b .cols{grid-template-columns:1fr 1fr} /* Les onglets ne se cachent plus sur telephone : ils passaient en `display:none`, et un visiteur mobile n'avait AUCUN moyen de changer de verticale depuis le haut de la page. Ils passent sous l'en-tete, en bande qui defile — le geste d'Airbnb sur mobile (porteur, 08/09). */ /* `minmax(0,1fr)` et non `1fr` : une piste `1fr` vaut `minmax(auto,1fr)` et refuse de descendre sous la largeur de son contenu — mesuré, les colonnes valaient 146 + 307 = 453 px dans un conteneur de 390. C'est la grille qui débordait, pas les boutons. */ .top .wrap{grid-template-columns:auto minmax(0,1fr);gap:12px;height:60px} /* `min-width:0` est ce qui rend l'`overflow-x` effectif : une cellule de grille vaut `min-width:auto`, donc elle REFUSE de descendre sous la largeur de son contenu et c'est la GRILLE qui s'élargit. Mesuré en ligne à 390 px : la page débordait de 119 px et « Se connecter » sortait de l'écran ; à 360 px, 149 px et « Télécharger l'app » sortait aussi. Une barre qui défile ne doit jamais emmener la page avec elle — règle 31, la porte du compte ne se replie pas, et sortir de l'écran est pire que se replier. */ .tnav{grid-column:1/-1;order:3;justify-content:flex-start;gap:2px;padding:0 0 6px; margin:0 -22px;padding-left:22px;padding-right:22px;overflow-x:auto;min-width:0} .top{padding-bottom:0} .top .wrap{height:auto;padding-top:10px;padding-bottom:0;row-gap:2px} } @media(max-width:600px){ .grid{grid-template-columns:1fr} .vp{grid-template-columns:1fr} .search{grid-template-columns:1fr} .statstrip{gap:9px 18px;padding:14px 18px;border-radius:var(--r-xl)} .filters{gap:12px 16px} /* `width:100%` ne borne rien dans un conteneur flex : un groupe de puces plus large que l'écran poussait la PAGE au lieu de défiler dans sa propre boîte (19 px de débordement mesurés en ligne sur iPhone SE, defaut anterieur au 07/09). `min-width:0` + `max-width:100%` le bornent. */ .fgroup{width:100%;min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px} .fgroup::-webkit-scrollbar{display:none} .fgroup .flab{position:sticky;left:0} .gal{grid-template-columns:1fr 1fr} .gal img:first-child{grid-column:1/-1;grid-row:auto;height:220px} /* Le sélecteur de langue RESTE visible sur téléphone. L'ancienne barre de trois boutons y était masquée (`.lang{display:none}`) : un visiteur japonais sur mobile n'avait aucun moyen de changer de langue. Le menu tient, à condition de resserrer l'en-tête. */ .top .wrap{gap:10px} .btn-app{padding:11px 15px;font-size:14.5px} .langsel summary{padding:8px 9px;font-size:13.5px} .foot-b .cols{grid-template-columns:1fr} } /* Sous 430 px (iPhone SE), le globe seul — c'est le pictogramme que tout le monde reconnaît sur Airbnb comme sur Booking, et le libellé reste lu par les lecteurs d'écran (span.sr). */ @media(max-width:430px){ .langsel summary #langCur{display:none} .langsel summary{padding:9px} .btn-app{padding:10px 13px;font-size:14px} /* Le sous-titre « Réservations » passait SOUS le sélecteur de langue : mesuré, le logo recouvrait le premier contrôle de 8 px à 390 et de 38 px à 360. La page ne débordait plus, mais deux éléments se marchaient dessus — un débordement corrigé peut se changer en chevauchement, et seule la mesure du premier CONTRÔLE le montre (la boîte des actions, elle, occupe toute sa colonne, vide comprise, et ne chevauche jamais rien). */ .brand{font-size:18px} .brand small{display:none} } @media(max-width:400px){ /* Il restait 6 px de recouvrement à 360 px — la largeur de beaucoup d'Android et de l'iPhone SE. On réduit la marque plutôt que de la laisser toucher le sélecteur de langue. */ .brand{font-size:16px;gap:8px} .brand svg{width:30px;height:30px} } @media(max-width:340px){ /* Au-delà, seul le va'a reste : le lien garde son nom par `aria-label`, sans quoi replier le texte le rendrait muet pour un lecteur d'écran. */ .brand>span{display:none} } /* Heros : l'URL en ligne du HTML est le repli ; image-set sert la bonne taille et le bon format. !important a dessein — le HTML est regenere par fenuap et ramenerait sinon l'image de 1680 px. */ .hbg{background-image:image-set(url('/hero-1600.avif?v=04a3e30f') type('image/avif') 1x,url('/hero-2400.avif?v=df17aee6') type('image/avif') 1.5x,url('/hero-3200.avif?v=1cb332c9') type('image/avif') 2x,url('/hero-1600.webp?v=c08c423c') type('image/webp') 1x,url('/hero-2400.webp?v=bfcdea6f') type('image/webp') 1.5x,url('/hero-3200.webp?v=603ed26b') type('image/webp') 2x)!important}