/* ========================================================================== Café Nomad — feuille de style du site Direction artistique : proposition B « Mer », retenue au kickoff du 21 sept. 2026 Une seule feuille pour les sept pages et les cinq langues. ========================================================================== */ :root{ --shell:#FEFCF8; --shell-2:#F5F1E9; --clay:#EDE5D6; --mist:#E6F3F4; --sea-pale:#BFE4E7; --sea-mid:#6FC3CC; --sea:#17808F; --sea-deep:#0F6572; --sea-foot:#055A65; /* bloc final + pied : une seule zone en bas de page */ --sand:#EFE4D2; /* Juste assez clair pour se detacher du sable sans devenir blanc : les ronds des pictogrammes du panneau de reservation. */ --sand-clair:#F5EDE2; --amber:#8B5C24; /* assombri : #A9702C ne passait pas AA sur mist et sur le badge sans gluten */ --sun:#E3A75F; --sun-soft:#F3CE9D; --ink:#26221D; --ink-soft:#6E6559; --hair:rgba(38,34,29,.13); --display:"Gloock","Playfair Display",Georgia,serif; --body:"Karla","Helvetica Neue",Arial,sans-serif; --maxw:1240px; --gutter:clamp(18px,5vw,52px); --r:16px; /* Valeurs de repli, remplacees des le chargement par les hauteurs reelles mesurees dans socle.js. Volontairement genereuses : sans JavaScript, mieux vaut un peu d'air de trop qu'un titre d'ancre passe sous l'en-tete. L'ancienne valeur en dur — 59 px — etait celle de l'anglais sur ecran large ; en allemand sous 520 px l'en-tete depasse 80 px. */ --nav-h:88px; --tools-h:0px; --bar-h:0px; } *,*::before,*::after{box-sizing:border-box;} /* Une ancre doit arriver sous les barres collantes, pas dessous elles. Les deux additionnees : l'en-tete, et sur la page carte la barre de categories qui se colle juste dessous. */ html{scroll-padding-top:calc(var(--nav-h) + var(--tools-h) + 14px); scroll-padding-bottom:calc(var(--bar-h) + 14px);} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} } [id]{scroll-margin-top:calc(var(--nav-h) + var(--tools-h) + 14px);} body{ margin:0;background:var(--shell);color:var(--ink); font-family:var(--body);font-weight:400;font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);} .skip{position:absolute;left:-9999px;} .skip:focus{left:var(--gutter);top:8px;z-index:100;background:var(--sea-deep);color:#fff;padding:10px 18px;border-radius:999px;} h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.02;} h1{font-size:clamp(42px,7.4vw,92px);} h2{font-size:clamp(30px,4.6vw,56px);} h3{font-size:clamp(19px,2.1vw,24px);line-height:1.15;} p{margin:0;} .kicker{ display:inline-flex;align-items:center;gap:9px; font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber); } .kicker::before{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px;} .lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--ink-soft);max-width:58ch;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase; text-decoration:none;padding:16px 30px;border-radius:999px; background:var(--sea-deep);color:#FFFFFF;border:2px solid var(--sea-deep); transition:background .2s ease,color .2s ease,transform .2s ease; } .btn:hover{background:var(--sea);transform:translateY(-2px);} .btn--ghost{background:transparent;color:var(--sea-deep);} .btn--ghost:hover{background:var(--sea-deep);color:#FFFFFF;} .btn--sun{background:var(--sun);border-color:var(--sun);color:#33260F;} .btn--sun:hover{background:#D5943F;border-color:#D5943F;} a:focus-visible,button:focus-visible{outline:2px solid var(--sea);outline-offset:3px;} /* ---------- nav ---------- */ /* Presque opaque : a 94 % le texte de la carte passait a travers la barre et se melangeait aux liens de navigation, surtout sur telephone ou les deux se touchent. Le flou reste, pour les navigateurs qui le rendent. */ .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(254,252,248,.985);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);} /* Chaque bloc garde sa largeur naturelle : rien ne peut se retrecir au point de passer sous le voisin. Sous 1180px les liens laissent la place au menu. */ .nav .wrap{display:flex;align-items:center;justify-content:space-between; gap:clamp(20px,3vw,44px);padding-block:17px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;} .brand img{height:25px;width:auto;display:block;} .brand i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);white-space:nowrap;} .navlinks{display:flex;gap:clamp(26px,3.6vw,52px);font-size:15.5px;font-weight:500; white-space:nowrap;flex:0 1 auto;} .navlinks a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;} .navlinks a:hover,.navlinks a[aria-current="page"]{border-bottom-color:var(--sea);} .nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;} .nav .btn{padding:12px 22px;font-size:12.5px;white-space:nowrap;} /* ---------- selecteur de langue ---------- */ /* Drapeau + code, la liste s'ouvre au clic.
natif : pas de JavaScript, et la fleche du clavier parcourt la liste normalement. */ .flag{width:21px;height:14px;border-radius:2px;flex:0 0 auto; box-shadow:0 0 0 1px rgba(38,34,29,.13);} .langpick{position:relative;flex:0 0 auto;} .langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; padding:7px 10px;border:1px solid var(--hair);border-radius:999px;background:var(--shell);} .langpick summary::-webkit-details-marker{display:none;} .langpick summary b{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);} .langpick summary:hover{border-color:var(--sea-mid);} .langpick summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px;} .langpick .chev{width:10px;height:6px;color:var(--ink-soft);transition:transform .18s ease;} .langpick[open] .chev{transform:rotate(180deg);} .langpanel{position:absolute;right:0;top:calc(100% + 10px);width:186px; background:var(--shell);border:1px solid var(--hair);border-radius:14px; box-shadow:0 18px 44px rgba(9,42,47,.16);padding:6px;z-index:60; display:flex;flex-direction:column;} .langpanel a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px; text-decoration:none;font-size:14.5px;font-weight:500;} .langpanel a:hover{background:var(--mist);} .langpanel a.on{color:var(--amber);font-weight:700;} /* ---------- menu mobile ---------- */ /* Le
est cache au-dessus de 1180px : au-dessous il remplace .navlinks, qui disparait. Pas de JavaScript, pas de dependance. */ .burger{display:none;position:relative;flex:0 0 auto;} .burger summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; height:42px;padding:0 11px; border:1px solid var(--hair);border-radius:11px;background:var(--shell);} .burger summary::-webkit-details-marker{display:none;} /* Le code de la langue courante, pose sur le bouton du menu : sous 960 px le selecteur de langue passe dans le panneau, et barre fermee plus rien ne disait dans quelle langue on lisait ni ou en changer. */ .burger-lang{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);} .burger-traits{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px;} .burger-traits span{display:block;height:2px;border-radius:2px;background:var(--ink); transition:transform .18s ease,opacity .18s ease;} .burger[open] .burger-traits span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger[open] .burger-traits span:nth-child(2){opacity:0;} .burger[open] .burger-traits span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .burger summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px;} /* La hauteur est bornee : 8 pages + 5 langues depassaient l'ecran d'un telephone, barre de reservation comprise. Au-dela, le panneau defile. */ .burger-panel{position:absolute;right:0;top:calc(100% + 13px);width:min(82vw,286px); background:var(--shell);border:1px solid var(--hair);border-radius:16px; box-shadow:0 20px 50px rgba(9,42,47,.16);padding:8px 8px 8px;z-index:60; max-height:calc(100dvh - var(--nav-h) - 96px);overflow-y:auto;overscroll-behavior:contain;} .burger-links{display:flex;flex-direction:column;} .burger-links a{text-decoration:none;padding:10px 14px;border-radius:10px;font-size:15.5px;font-weight:500;} .burger-links a:hover{background:var(--mist);} .burger-links a[aria-current="page"]{color:var(--amber);font-weight:700;} .burger-langs{display:flex;flex-direction:column;gap:2px; margin-top:8px;padding-top:9px;border-top:1px solid var(--hair);} .burger-langs b{color:var(--ink-soft);font-size:10px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:4px 14px 6px;} .burger-langs a{display:flex;align-items:center;gap:11px;padding:8px 14px;border-radius:10px; text-decoration:none;font-size:14.5px;font-weight:500;} .burger-langs a:hover{background:var(--mist);} .burger-langs a.on{color:var(--amber);font-weight:700;} /* Un seul libelle visible a la fois sur le bouton de reservation. */ .nav-book .v-court{display:none;} @media (max-width:960px){ .navlinks{display:none;} .burger{display:block;} } @media (max-width:960px){ .langpick{display:none;} } /* la liste passe dans le menu */ @media (max-width:520px){ .brand img{height:22px;} .nav .btn{padding:11px 16px;font-size:11px;letter-spacing:.06em;} .nav .wrap{gap:12px;} .nav-book .v-long{display:none;} .nav-book .v-court{display:inline;} } @media (max-width:380px){ .brand img{height:20px;} .nav .btn{padding:10px 13px;font-size:10.5px;letter-spacing:.04em;} .nav .wrap{gap:9px;} .burger summary{padding:0 9px;gap:6px;} } /* ---------- bandeaux de page ---------- */ /* Un seul composant pour les neuf pages : photo plein cadre, voile sombre monte du bas, texte pose dessus. .hero est la variante haute de l'accueil. Auparavant l'accueil avait une photo et un voile en biais tandis que les pages interieures ouvraient sur un aplat vert clair : deux langages pour la meme fonction. */ .pagehero,.hero{position:relative;isolation:isolate;overflow:hidden; display:flex;align-items:flex-end;} /* Le generateur enveloppe chaque photo dans un : le selecteur doit viser l'enveloppe ET l'image, sinon la photo retombe dans le flux. */ .pagehero>picture,.hero>picture,.pagehero>img,.hero>img{ position:absolute;inset:0;width:100%;height:100%;z-index:-2;} .pagehero>picture img,.hero>picture img,.pagehero>img,.hero>img{ width:100%;height:100%;object-fit:cover;} /* Deux couches : un voile uniforme qui garantit le contraste partout, et un degrade qui rend sa lisibilite au haut de l'image. */ .pagehero::after,.hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(8,14,20,0.22) 0%,rgba(8,14,20,0.08) 58%, rgba(8,14,20,0.03) 100%);} /* Le voile qui garantit la lisibilite est cale sur le bloc de texte, pas sur toute l'image : un degrade uniforme assez fort pour le petit texte du haut aurait noirci la photo entiere. Ici la photo reste claire au-dessus du titre et le texte repose sur une bande sombre mesuree. */ .pagehero .wrap::before{content:"";position:absolute; left:-50vw;right:-50vw;bottom:-200px;top:-54px;z-index:-1; background:linear-gradient(to top,rgba(8,14,20,0.84) 0%,rgba(8,14,20,0.79) 62%, rgba(8,14,20,0.62) 84%,rgba(8,14,20,0.24) 95%, rgba(8,14,20,0) 100%);} .pagehero .wrap,.hero .wrap{color:var(--shell);position:relative; text-shadow:0 1px 2px rgba(8,14,20,.55),0 2px 20px rgba(8,14,20,.45);} .pagehero .btn,.hero .btn{text-shadow:none;} .pagehero h1,.hero h1{color:var(--shell);} .pagehero h1 em,.hero h1 em{font-style:italic;color:var(--sun-soft);} .pagehero .lead,.hero .lead{color:rgba(255,255,255,.92);} .pagehero .kicker,.hero .kicker{color:#FFFFFF;} .pagehero .kicker::before,.hero .kicker::before{background:var(--sun-soft);} /* pages interieures — UNE seule taille pour les huit. Il y en avait deux : 600 px pour brunch, vegan, traiteur, a propos et galerie, 400 px pour la carte, nous trouver et reserver. D'une page a l'autre le bandeau changeait de hauteur, et a 400 px de haut une photo en 5:3 perdait 54 % de sa hauteur — c'est ce qui donnait des sujets coupes. A 540 px il en reste 65 %, et le cadrage de chaque photo est ajuste par son point focal (FOCALES dans build.py). L'accueil garde son bandeau plus haut : c'est la maquette validee au kickoff, et l'ouverture d'un site n'a pas le meme role qu'une page interieure. */ .pagehero{min-height:clamp(420px,40vw,540px);} .pagehero .wrap{padding-block:clamp(30px,4vw,50px);} .pagehero h1{font-size:clamp(34px,5.4vw,62px);margin-block:14px 12px;} .pagehero .lead{max-width:54ch;font-size:clamp(16px,1.5vw,18px);} /* ---------- accueil : le bandeau de la proposition « Mer » ---------- */ /* Le biais en vert profond de la maquette validee au kickoff : il assombrit le cote du texte et laisse la mer intacte a droite. Il y avait TROIS declarations de ce voile dans le fichier. La derniere — la plus legere — gagnait partout, y compris sur telephone, ou elle annulait la variante prevue pour les petits ecrans. Sur une photo claire, du blanc posait alors 2,6:1. Une seule declaration ici, sa variante telephone juste dessous, et plus rien qui les contredise ailleurs. */ .hero{min-height:0;align-items:stretch;} .hero::after{background:linear-gradient(103deg, rgba(9,42,47,.93) 0%, rgba(9,42,47,.90) 26%, rgba(9,42,47,.78) 44%, rgba(9,42,47,.46) 60%, rgba(9,42,47,.14) 76%, rgba(9,42,47,0) 88%);} .hero .wrap::before{display:none;} .hero .wrap{text-shadow:none;width:100%; padding-block:clamp(70px,13vw,150px);min-height:clamp(430px,62vw,660px); display:flex;flex-direction:column;justify-content:center;} .hero-inner{max-width:660px;color:var(--shell);} .hero h1{margin-block:22px 20px;} .hero .lead{color:rgba(255,255,255,.9);} /* Or eclairci de deux crans pour le seul sur-titre du bandeau d'accueil : #F3CE9D donnait 4,14:1 sur la photo mesuree, sous le seuil AA du petit texte. #F8E1C1 passe a 4,84:1 et reste le meme or a l'oeil. Le reste du site garde --sun-soft. */ .hero .kicker{color:#F8E1C1;} .hero .kicker::before{background:#F8E1C1;} .etapes-note{margin-top:18px;font-size:15.5px;color:var(--ink-soft);max-width:52ch;} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;} /* Dans un bandeau de page interieure, cette rangee de boutons est ce qui faisait depasser le traiteur de la hauteur commune. */ .pagehero .hero-actions{margin-top:22px;} .hero-actions .btn--ghost{color:#FFFFFF;border-color:rgba(255,255,255,.65);} .hero-actions .btn--ghost:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF;} .hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:13.5px;color:rgba(255,255,255,.88);} .hero-badges b{color:#FFFFFF;font-weight:700;} /* Sur telephone ces trois lignes poussaient le titre vers le haut de la photo, la ou le voile s'efface : le sur-titre y tombait a 2,2:1. Elles sortent du bandeau — le bandeau de faits juste en dessous dit la meme chose, les chiens sont deja dans le chapeau, et la barre du bas annonce l'etat d'ouverture en permanence. */ @media (max-width:620px){ .hero-badges{display:none;} } /* Sous 900 px le texte prend toute la largeur : le biais ne protege plus rien, le voile monte du bas. La photo garde sa lumiere en haut. Ces deux regles doivent passer APRES « .hero .wrap{text-shadow:none} » — meme specificite, donc c'est l'ordre du fichier qui tranche. */ @media (max-width:900px){ /* Le bloc de texte descend en bas du cadre au lieu d'etre centre : il se pose ainsi la ou le voile est le plus dense, et le haut de la photo — le ciel, la mer — garde toute sa lumiere. Assombrir uniformement aurait coute la photo pour le seul sur-titre. */ .hero::after{background:linear-gradient(to top, rgba(9,42,47,.93) 0%, rgba(9,42,47,.91) 52%, rgba(9,42,47,.84) 76%, rgba(9,42,47,.64) 92%, rgba(9,42,47,.34) 100%);} .hero .wrap{text-shadow:0 1px 3px rgba(8,14,20,.5); justify-content:flex-end;padding-block:clamp(48px,9vw,96px);} } /* ---------- bandeau ---------- */ .strip{background:var(--sand);border-bottom:1px solid var(--hair);} .strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 34px;padding-block:24px;} @media (max-width:760px){ .strip .wrap{grid-template-columns:1fr;} } /* Le libelle ne se coupe pas (white-space:nowrap plus bas) : quand la colonne est trop etroite pour lui ET pour sa valeur, c'est la valeur qui passe a la ligne, sinon la cellule debordait de la page. */ .strip div{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:15px;} .strip div>*{min-width:0;} .strip b{font-family:var(--display);font-size:19px;font-weight:400;color:var(--sea-deep);white-space:nowrap;flex:0 0 auto;} /* ---------- sections ---------- */ /* Deux sections qui se suivent additionnent leurs marges internes : a 100px cela faisait 200px de blanc entre deux blocs. Rythme resserre. */ section{padding-block:clamp(44px,5.4vw,72px);} .sec-head{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(30px,4vw,48px);} .sec-head h2{margin-top:16px;} .sec-head .lead{margin-top:16px;} .on-clay{background:var(--shell-2);} .on-mist{background:var(--mist);} /* ---------- grille de plats ---------- */ .dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);} .dishes--4{grid-template-columns:repeat(4,1fr);} @media (max-width:1000px){ .dishes--4{grid-template-columns:repeat(2,1fr);} } @media (max-width:900px){ .dishes{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .dishes{grid-template-columns:1fr;} } /* La vignette se soulevait au survol sans etre cliquable, et rien n'y menait au clavier. C'est un : le geste tient sa promesse, et la tabulation l'atteint sans code. */ .dish{background:var(--shell);border-radius:var(--r);overflow:hidden;border:1px solid var(--hair); display:flex;flex-direction:column;text-decoration:none;color:inherit; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;} /* Le soulevement est reserve aux vignettes qui sont vraiment des liens. Sur la page traiteur, les six formats n'en sont pas : ils se soulevaient quand meme, et le clic ne faisait rien. */ a.dish:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(42,33,26,.55); border-color:var(--sea-pale);} .dish:focus-visible{outline:2px solid var(--sea);outline-offset:3px;} .dish .shot{position:relative;aspect-ratio:4/3;} .dish .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .dish .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1;} .dish .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;} .dish h3{font-size:21px;min-width:0;} .dish .price{font-size:18px;} .dish p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;} /* La rubrique d'ou vient le plat, en pied de vignette : elle dit ou le lien mene avant qu'on clique. */ .dish-vers{margin-top:auto;padding-top:10px;font-size:11.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--sea);} .dish-vers::after{content:" →";} .dishes-foot{margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;} /* ---------- toute la journée ---------- */ .allday{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:center;} @media (max-width:860px){ .allday{grid-template-columns:1fr;} } .allday-card{background:var(--shell);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(26px,3vw,36px);} .allday-card .hrs{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:#FFFFFF;background:var(--sea);border-radius:999px;padding:5px 13px;} .allday-card h3{margin:16px 0 12px;} .allday-card p{color:var(--ink-soft);font-size:16px;} .allday-list{list-style:none;margin:0;padding:0;display:grid;gap:0;} .allday-list li{padding-block:13px;border-top:1px solid var(--hair);font-size:16.5px;} .allday-list li:last-child{border-bottom:1px solid var(--hair);} /* ---------- vignettes de catégories ---------- */ .cats{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,16px);margin-top:clamp(28px,4vw,42px);} @media (max-width:900px){ .cats{grid-template-columns:repeat(3,1fr);} } @media (max-width:520px){ .cats{grid-template-columns:repeat(2,1fr);} } .cat{position:relative;display:block;text-decoration:none;border-radius:var(--r);overflow:hidden; aspect-ratio:3/4;transition:transform .2s ease;} .cat:hover{transform:translateY(-3px);} .cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,42,47,.66) 0%,rgba(9,42,47,.03) 58%);} .cat span{position:absolute;left:0;right:0;bottom:12px;z-index:2;text-align:center; font-family:var(--display);font-size:clamp(15px,1.5vw,19px);color:#FFFFFF;} /* ---------- galerie ---------- */ .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0;width:100%;} @media (max-width:860px){ .gallery{grid-template-columns:1fr 1fr;} } .gallery figure{margin:0;overflow:hidden;position:relative;} .gallery .tile{aspect-ratio:1/1;height:100%;} .gallery figure img{width:100%;height:100%;object-fit:cover;} .gallery .tall{grid-row:span 2;aspect-ratio:auto;height:100%;min-height:260px;} /* ---------- traiteur ---------- */ .catering{background:var(--sea-deep);color:#FFFFFF;} .catering h2,.catering h3{color:#FFFFFF;} .catering .lead{color:rgba(255,255,255,.84);} .catering .kicker{color:var(--sun-soft);} .catering .kicker::before{background:var(--sun-soft);} .cat-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center;} @media (max-width:880px){ .cat-split{grid-template-columns:1fr;} } .cat-points{display:grid;gap:0;margin:30px 0 0;padding:0;list-style:none;} .cat-points li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-block:17px;border-top:1px solid rgba(255,255,255,.22);} .cat-points li:last-child{border-bottom:1px solid rgba(255,255,255,.22);} .cat-points b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--sun-soft);} .cat-points span{color:rgba(255,255,255,.86);font-size:15.5px;} .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .cat-grid .tile{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;} .cat-grid .tile img{width:100%;height:100%;object-fit:cover;} /* Les quatre photos carrees font a peine la moitie de la hauteur de la colonne de texte, a toutes les largeurs : centrees, elles flottaient au milieu d'un aplat vide. Les etirer a la hauteur de la colonne les aurait reduites a des bandeaux de ratio 0,4 — mesure. Elles accompagnent donc la lecture, comme les reperes des pages de texte, et gardent leur carre. */ @media (min-width:881px){ .cat-split{align-items:start;} .cat-grid{position:sticky;top:96px;} } /* ---------- avis, version haute de page ---------- */ /* Sobre a dessein : la note, le nombre d'avis, la source cliquable et la date du releve. Pas de citation — le champ « quote » de site.json est vide tant qu'un vrai avis n'a pas ete choisi, et pas d'aggregateRating dans le balisage : une note qu'un site s'attribue lui-meme n'a aucune valeur. */ .avis{background:var(--mist);border-bottom:1px solid var(--hair);} .avis .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-block:16px;} .avis-note{display:inline-flex;align-items:baseline;gap:9px;flex:0 0 auto;color:var(--sea-deep);} .avis-note b{font-family:var(--display);font-size:27px;font-weight:400;line-height:1;} .avis-note span{letter-spacing:.16em;font-size:13px;} .avis p{font-size:15px;color:var(--ink);min-width:0;} .avis a{color:var(--sea-deep);text-underline-offset:3px;} .avis-date{color:var(--ink-soft);font-size:13.5px;white-space:nowrap;} /* ---------- avis, version longue (page « le café ») ---------- */ .rev{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,56px);align-items:center;} @media (max-width:760px){ .rev{grid-template-columns:1fr;} } .scorebox{background:var(--mist);border:1px solid var(--sea-pale);border-radius:var(--r);padding:26px 34px;text-align:center;color:var(--sea-deep);} .scorebox .n{font-family:var(--display);font-size:60px;line-height:1;} .scorebox .s{letter-spacing:.24em;margin-top:6px;} .scorebox .c{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;} .rev blockquote{margin:0;font-family:var(--display);font-size:clamp(24px,3.4vw,40px);line-height:1.16;} .rev cite{display:block;font-family:var(--body);font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft);margin-top:20px;} /* ---------- visite / contact ---------- */ .visit-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);} @media (max-width:880px){ .visit-split{grid-template-columns:1fr;} } .hours{width:100%;border-collapse:collapse;} .hours td{padding-block:14px;border-bottom:1px solid var(--hair);font-size:16px;} .hours td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;} .contact{margin-top:28px;display:grid;gap:16px;} .contact span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:4px;} .contact a{text-decoration:none;border-bottom:1px solid var(--hair);} .contact a:hover{border-color:var(--sea);} .visit-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;} .visit-media{border-radius:var(--r);overflow:hidden;} .visit-media img{width:100%;height:100%;object-fit:cover;min-height:280px;} /* ---------- prose (pages de texte) ---------- */ .prose{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;} @media (max-width:880px){ .prose{grid-template-columns:1fr;} } /* La colonne de gauche fait souvent le double de la droite : le texte continue quand les reperes pratiques sont finis, et la moitie droite de l'ecran reste vide sur toute la fin du bloc. Elle accompagne donc la lecture au lieu de rester en haut — rien ne bouge tant qu'elle tient dans l'ecran, et elle reprend sa place a l'empilement en une colonne. */ @media (min-width:881px){ .prose > :last-child{position:sticky;top:96px;} } .prose p + p{margin-top:18px;} .prose h3{margin-top:30px;margin-bottom:10px;} /* ---------- coupe du front de mer (page Find us) ---------- */ /* Une carte embarquee demanderait un bandeau de consentement pour trois cookies tiers, et montrerait moins que ceci : ici tout est parallele a la cote, donc des bandes empilees de la terre vers l'eau disent la position mieux qu'une vue aerienne. Dessine en CSS : rien a telecharger, et les legendes restent du texte, traduit et lisible a n'importe quelle largeur. */ /* Les deux colonnes se terminaient a des hauteurs differentes — jusqu'a 136 px d'ecart selon la langue — et le creux se voyait sous la liste. Elles s'etirent donc a la meme hauteur, et les quatre reperes se repartissent sur toute la colonne : les filets du haut et du bas tombent en face du schema. */ .plan-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:stretch;margin-top:30px;} @media (max-width:880px){ .plan-split{grid-template-columns:1fr;align-items:start;} } @media (min-width:881px){ .plan-split .facts{display:flex;flex-direction:column;justify-content:space-between;height:100%;} } .plan{margin:0;} .plan-bandes{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;} .pb{position:relative;display:flex;align-items:center;gap:13px; padding:0 clamp(14px,2vw,20px);min-height:62px;font-size:14.5px;line-height:1.4;} .pb--gare{background:var(--shell);color:var(--ink-soft);} .pb-fleche{flex:none;width:17px;height:17px;color:var(--sea);transform:rotate(-90deg);} .pb--rue{background:#EFEAE0;color:var(--ink-soft);} .pb-p{flex:none;width:23px;height:23px;border-radius:6px;background:var(--sea-deep); color:#FFFFFF;font-size:12px;font-weight:700;display:grid;place-items:center;} /* Le Paseo : le marquage au sol part du nom et file vers la droite, plutot que de passer sous le texte ou il se lisait comme un soulignement. */ .pb--paseo{background:var(--shell);color:var(--ink); font-family:var(--display);font-size:17px;} .pb-trait{flex:1 1 40px;min-width:40px;height:2px; background:repeating-linear-gradient(90deg,var(--hair) 0 13px,transparent 13px 29px);} .pb--ici{background:#F7E3C6;color:var(--ink);min-height:82px;box-shadow:inset 3px 0 0 var(--sun);} .pb--ici b{display:block;font-family:var(--display);font-weight:400;font-size:19px;} .pb--ici i{display:block;font-style:normal;font-size:13.5px;color:#5E5449;margin-top:2px;} .pb-pin{flex:none;width:21px;height:26px;color:var(--amber);} /* Sable : un mouchete tres leger plutot qu'un aplat. */ .pb--plage{background:#F2E6CF;color:var(--ink-soft); background-image:radial-gradient(rgba(139,92,36,.15) 1px,transparent 1.3px); background-size:9px 9px;} .pb--mer{background:linear-gradient(180deg,var(--sea) 0%,var(--sea-deep) 100%); color:#FFFFFF;min-height:76px;align-items:flex-start;padding-top:16px;} .pb--mer span{position:relative;} .pb-vagues{position:absolute;inset:0;width:100%;height:100%; fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.6;} .plan figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-soft);} .plan-split .facts{margin-top:0;} .facts{list-style:none;margin:26px 0 0;padding:0;} .facts li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-block:15px;border-top:1px solid var(--hair);} .facts li:last-child{border-bottom:1px solid var(--hair);} .facts b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--sea-deep);} .facts span{color:var(--ink-soft);font-size:15.5px;} /* ---------- carte (page menu) ---------- */ /* La barre se colle sous l'en-tete dont la hauteur est mesuree, pas devinee : avec les 59 px chiffres en dur, elle passait dessous en allemand et sur les petits ecrans, ou l'en-tete depasse 80 px. */ .tools{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h));z-index:40; background:rgba(254,252,248,.985);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);} .tools .wrap{padding-block:10px;display:flex;flex-direction:column;gap:8px;} /* Rangee des categories : elle disparaissait sous 700 px, donc sur telephone la carte se parcourait a l'aveugle sur dix-sept mille pixels. Elle reste maintenant a toutes les largeurs, et se fait defiler au doigt. */ .rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none; scroll-snap-type:x proximity;overscroll-behavior-x:contain; padding-block:1px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);} .rail::-webkit-scrollbar{display:none;} .rail a{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;white-space:nowrap; font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--sea-deep); padding:8px 14px;border-radius:999px;border:1px solid var(--sea-pale);background:var(--mist);} .rail a:hover{background:var(--sea-deep);border-color:var(--sea-deep);color:#FFFFFF;} .rail a[hidden]{display:none;} /* Les huit onglets portent les intitules du client — « Sandwiches, burgers & pizza », « Petits-dejeuners & smoothie bowls » —, bien plus longs que les mots courts d'avant : a 1440 px ils debordaient de 200 px, et « Boissons », le dernier, se cachait derriere un defilement sans barre visible. Sur grand ecran ils passent donc a la ligne, et le masque de degrade — qui n'a de sens que pour un rail qui defile — est retire. Sur telephone, huit intitules longs sur plusieurs lignes mangeraient l'ecran : le defilement lateral y reste le bon geste. */ @media (min-width:1000px){ .rail{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding-inline:0;gap:8px; -webkit-mask-image:none;mask-image:none;} } .menu{padding-block:clamp(40px,6vw,72px);} /* .sec est un
: la regle generale lui donnait 100px de marge interne en haut ET en bas, qui s'ajoutaient aux 80px de marge entre sections — pres de 280px de blanc entre deux rubriques de la carte. Ici l'espacement se regle uniquement par la marge basse. */ .sec{padding-block:0;margin-bottom:clamp(38px,4.4vw,62px);} .sec:last-of-type{margin-bottom:0;} .sec-top{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between; padding-bottom:16px;border-bottom:2px solid var(--sea-deep);margin-bottom:8px;} .sec-top h2{color:var(--sea-deep);font-size:clamp(28px,4vw,44px);} .sec-note{font-size:14.5px;color:var(--ink-soft);max-width:70ch;margin-block:14px 22px;font-style:italic;} /* Deux colonnes typographiques, pas une grille : avec une grille, une ligne qui porte une photo impose sa hauteur a la ligne d'en face et creuse un trou sous le plat sans image. En colonnes, chaque plat prend la hauteur qu'il lui faut, comme sur une carte imprimee. */ .items{columns:2;column-gap:clamp(24px,4vw,56px);} .items>.item{break-inside:avoid;-webkit-column-break-inside:avoid;} @media (max-width:760px){ .items{columns:1;} } /* Un plat de la carte. Avec photo, il passe en deux colonnes : la vignette a gauche, le texte a droite. Sans photo, rien ne change — la grille n'existe que sur .item--shot, donc les lignes sans image gardent toute la largeur. */ .item{padding-block:17px;border-bottom:1px solid var(--hair);} .item--shot{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:start;} .item-shot{border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:var(--shell-2);} .item-shot img,.item-shot picture{width:100%;height:100%;display:block;} .item-shot img{object-fit:cover;transition:transform .45s ease;} .item--shot:hover .item-shot img{transform:scale(1.06);} /* La vignette ne devient un bouton que si plat.js tourne : c'est lui qui pose cette classe. Sans script, pas de curseur « main » ni de loupe — on ne montre pas une commande qui ne repond pas. */ .item-shot--zoom{position:relative;} .shot-btn{display:block;width:100%;height:100%;padding:0;border:0;margin:0; background:none;cursor:zoom-in;border-radius:inherit;} .shot-btn:focus-visible{outline:3px solid var(--sea-mid);outline-offset:2px;} .item-shot--zoom::after{content:"";position:absolute;inset:auto 6px 6px auto; width:22px;height:22px;border-radius:50%;pointer-events:none; background:rgba(8,14,20,.55) no-repeat center/13px 13px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E"); opacity:0;transition:opacity .2s ease;} .item--shot:hover .item-shot--zoom::after, .shot-btn:focus-visible + .item-shot--zoom::after, .item-shot--zoom:focus-within::after{opacity:1;} @media (hover:none){ .item-shot--zoom::after{opacity:1;} } /* ---------- la photo d'un plat en grand ---------- */ /* natif : le piege a focus, la touche Echap et le voile sont donnes par le navigateur. Le contenu est recopie depuis l'article, rien n'est duplique dans le HTML. */ .loupe{border:0;padding:0;max-width:min(680px,92vw);width:100%; border-radius:16px;overflow:hidden;background:var(--shell);color:var(--ink); box-shadow:0 24px 70px rgba(8,14,20,.4);} .loupe::backdrop{background:rgba(8,14,20,.7);} .loupe-img{background:var(--shell-2);line-height:0;} .loupe-img img,.loupe-img picture{display:block;width:100%;} .loupe-img img{height:auto;max-height:58vh;object-fit:cover;} .loupe-txt{padding:clamp(18px,3.4vw,28px);} .loupe-txt .item-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;} .loupe-txt h3{font-size:clamp(21px,2.6vw,27px);color:var(--sea-deep);} /* Le pointille qui relie le nom au prix n'a de sens qu'en liste. */ .loupe-txt .dots{display:none;} .loupe-txt .price{font-size:18px;} .loupe-txt p{margin:12px 0 0;color:var(--ink-soft);max-width:54ch;} .loupe-x{position:absolute;top:10px;right:10px;z-index:2; width:38px;height:38px;display:grid;place-items:center; border:0;border-radius:50%;cursor:pointer;color:#FFFFFF; background:rgba(8,14,20,.55);} .loupe-x:hover{background:rgba(8,14,20,.8);} .loupe-x:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;} .loupe-x svg{width:19px;height:19px;} @media (max-width:560px){ .loupe{max-width:100%;width:100%;margin:auto 0 0;border-radius:16px 16px 0 0;} .loupe-img img{max-height:46vh;} } .item-body{min-width:0;} @media (max-width:560px){ .item--shot{grid-template-columns:88px 1fr;gap:13px;} } @media (max-width:400px){ .item--shot{grid-template-columns:76px 1fr;gap:11px;} } .item.is-hidden{display:none;} /* Le nom et les pointilles se partageaient la place a parts egales — les deux en flex:1 — si bien qu'un nom de plat disposait de la moitie d'une colonne deja divisee par la vignette, et se cassait en trois lignes. Le nom prend maintenant ce qu'il lui faut, les pointilles absorbent le reste, et s'il ne reste rien le prix passe a la ligne, toujours cale a droite : le lien entre le plat et son prix ne se perd jamais. */ .item-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;} .item-head h3{flex:1 1 auto;min-width:0;font-size:clamp(18px,2vw,21px);} .dots{flex:1 1 16px;min-width:16px;border-bottom:1px dotted var(--hair);transform:translateY(-4px);} .price{flex:0 0 auto;margin-left:auto; font-family:var(--display);font-size:19px;color:var(--sea-deep);font-variant-numeric:tabular-nums;white-space:nowrap;} .price small{font-family:var(--body);font-size:12px;color:var(--ink-soft);font-weight:500;margin-left:6px;} /* Sous 560 px la colonne est trop etroite pour que les pointilles aident : ils ne font plus que grignoter la place du nom. */ @media (max-width:560px){ .dots{display:none;} } .item p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin-top:6px;max-width:52ch;} .addons{display:none;} /* Le libelle occupait une ligne a lui seul au-dessus de la liste, pour trois mots. Il passe sur la meme ligne de base que les supplements : le bloc perd une ligne de texte et une partie de sa marge interieure, sans rien retirer. */ .addons{margin-top:18px;padding:12px 18px;background:var(--shell-2);border-radius:var(--r);border:1px solid var(--hair); display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;} .addons b{flex:none;margin:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);} /* base etroite : sur telephone la liste tient a cote du libelle au lieu de passer dessous. */ .addons ul{flex:1 1 200px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 22px;} .addons li{font-size:14.5px;line-height:1.5;} .addons li span{color:var(--sea-deep);font-weight:700;font-variant-numeric:tabular-nums;} .addons li em{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);max-width:46ch;} /* ---------- appel à l'action ---------- */ /* ---------- bloc « venez manger » ---------- */ /* Deux colonnes : l'invitation a gauche, les informations pratiques a droite. Le pave de droite est genere par build.py, donc l'adresse et les horaires n'existent qu'a un seul endroit dans tout le site. */ .cta{background:var(--sea-foot);color:#FFFFFF;padding-block:clamp(52px,6.5vw,84px);} /* Quand le pied suit immediatement, les deux marges interieures s'additionnaient : meme fond, donc un vide de 130 px. */ main > .cta:last-child{padding-bottom:clamp(30px,3.4vw,44px);} /* Le pave pratique a disparu : il redisait les horaires que le titre annonce a cote, et l'adresse, le telephone et le lien Maps que le pied de page porte juste en dessous. Reste le titre et les deux boutons. */ /* La mesure se pose sur l'enfant, pas sur .wrap : .wrap porte les marges automatiques, et lui donner une largeur maximale recentrait tout le bloc. */ .cta-seul > div{max-width:62ch;} .cta-seul .lead{max-width:56ch;} .cta h2{color:#FFFFFF;} .cta .lead{color:rgba(255,255,255,.86);margin-top:16px;} .cta .kicker{color:var(--sun-soft);} .cta .kicker::before{background:var(--sun-soft);} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;} /* Ligne pratique sous les boutons (page catering : ce qu'il est utile de preciser dans la demande). Blanc a 72 % sur ce teal : 4,94:1, au-dessus du seuil AA pour du petit texte. */ .cta-note{margin-top:22px;font-size:14px;color:rgba(255,255,255,.72);max-width:56ch;} /* Bandeau de bas de page, version maquette du 4 octobre. L'ancien faisait 440 a 480 px pour redire les horaires et l'adresse que le pied de page affiche trente pixels plus bas. Celui-ci ne redit rien : une invitation, une action principale, une action secondaire. La palme est dessinee en CSS/SVG, aucune requete, et reste sous le texte en opacite. */ .cta--carte{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,66px);} main > .cta--carte:last-child{padding-bottom:clamp(40px,5vw,66px);} .cta--carte .wrap{position:relative;z-index:1;display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(26px,4vw,56px);align-items:center;} @media (max-width:860px){ .cta--carte .wrap{grid-template-columns:1fr;} } /* Le sur-titre perd son filet : la maquette le veut seul, en ambre plein. */ .cta--carte .kicker{color:var(--sun);} .cta--carte .kicker::before{display:none;} .cta--carte h2{margin-top:16px;font-size:clamp(29px,3.8vw,50px);line-height:1.1;} /* La deuxieme ligne du titre, en italique ambre clair : 5,32:1 sur ce teal, au-dessus du seuil AA. */ .cta--carte h2 em{display:block;font-style:italic;color:var(--sun-soft);} .cta--carte .cta-dit{margin:18px 0 0;font-size:clamp(16px,1.5vw,18.5px); line-height:1.5;color:rgba(255,255,255,.88);max-width:44ch;} /* Les deux actions, l'une sous l'autre et centrees entre elles : le bouton porte l'action, le lien souligne porte la seconde sans lui faire concurrence. */ .cta-actes{display:flex;flex-direction:column;align-items:center;gap:12px;} @media (max-width:860px){ .cta-actes{align-items:flex-start;} } .cta-invite{margin:10px 0 0;font-size:15px;color:rgba(255,255,255,.80);} .lien-fleche{display:inline-flex;align-items:center;gap:9px;color:#FFFFFF; font-size:15.5px;text-decoration:underline;text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.55);} .lien-fleche:hover{color:var(--sun-soft);text-decoration-color:var(--sun-soft);} .fl{width:17px;height:17px;flex:0 0 auto;} .cta .btn .fl{margin-left:9px;} .cta--carte .btn{display:inline-flex;align-items:center;} /* Palme : elle deborde volontairement par le coin, comme une plante hors champ. Masquee au telephone, ou la largeur manque et ou elle passerait sous le texte. */ .cta-palme{position:absolute;right:-56px;bottom:-72px;z-index:0; width:clamp(200px,20vw,300px);aspect-ratio:1/1; color:rgba(255,255,255,.085);pointer-events:none;} @media (max-width:860px){ .cta-palme{display:none;} } /* Bloc de reservation : plus d'encadre. Le fond de la section le portait deja, le cadre ne faisait qu'ajouter une boite dans une page qui en a assez. */ .reserver-note{margin-top:20px;font-size:14px;color:var(--ink-soft);max-width:60ch;} .reserver-note b{color:var(--ink);font-weight:700;} .reserver-coord{margin-top:12px;font-size:14px;color:var(--ink-soft);} .reserver-coord a{text-decoration:none;border-bottom:1px solid var(--hair);} .reserver-coord a:hover{border-color:var(--sea);} /* ---------- traiteur : comment ca se passe ---------- */ .etapes-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,60px);align-items:center;} @media (max-width:880px){ .etapes-split{grid-template-columns:1fr;} } .etapes{counter-reset:e;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;} .etapes li{counter-increment:e;display:grid;grid-template-columns:auto 1fr;gap:16px; padding-block:16px;border-top:1px solid var(--hair);font-size:16px;align-items:baseline;} .etapes li:last-child{border-bottom:1px solid var(--hair);} .etapes li::before{content:counter(e);font-family:var(--display);font-size:20px; color:var(--amber);line-height:1;} .etapes-media{border-radius:var(--r);overflow:hidden;} .etapes-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;} /* Le bouton secondaire heritait du vert profond : invisible sur ce fond. */ .cta .btn:not(.btn--sun){background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.62);} .cta .btn:not(.btn--sun):hover{background:#FFFFFF;color:var(--sea-deep);border-color:#FFFFFF;} /* ---------- pied ---------- */ /* Teal plus profond que le reste du site, et l'or eclairci de 8 % : la maquette donnait #E8B878, soit 4,35:1 sur ce fond — juste sous le seuil AA pour du petit texte. #EABE83 passe a 4,59:1 sans difference visible. */ footer{position:relative;overflow:hidden;background:var(--sea-foot);color:#FFFFFF; border-top:1px solid rgba(255,255,255,.16); padding-block:clamp(36px,4.2vw,54px) 20px;font-size:15px;} footer a{text-decoration:none;color:inherit;} .foot-palme{position:absolute;color:rgba(255,255,255,.075);pointer-events:none; width:clamp(300px,31vw,480px);height:auto;} /* La base de l'eventail est placee hors cadre : le rognage tombe sur elle, jamais en travers des lames. C'est ce qui donnait des feuilles coupees net. */ .foot-palme--g{left:-7%;bottom:-14%;} .foot-palme--d{right:-7%;top:-6%;transform:scaleX(-1) rotate(12deg);} @media (max-width:760px){ .foot-palme--d{display:none;} .foot-palme--g{opacity:.75;} } .foot-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr 1.5fr; gap:clamp(30px,4vw,64px);} /* Filets de separation : en bordure des colonnes 2 et 3, donc ils s'effacent d'eux-memes quand la grille se replie. */ @media (min-width:900px){ .foot-grid > * + *{border-left:1px solid rgba(255,255,255,.17); padding-left:clamp(30px,4vw,64px);} } @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;row-gap:44px;} } @media (max-width:620px){ .foot-grid{grid-template-columns:1fr;row-gap:36px;} } /* --- colonne de marque --- */ .brand--foot img{height:clamp(38px,3.9vw,54px);} .foot-tag{display:flex;align-items:center;gap:12px;margin:14px 0 0; font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:#EABE83;} .foot-tag::before,.foot-tag::after{content:"";height:1px;flex:0 0 26px; background:rgba(234,190,131,.55);} .foot-mot{margin:clamp(15px,1.8vw,20px) 0 0;max-width:32ch;line-height:1.65; color:rgba(255,255,255,.88);} .foot-reseaux{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(17px,2vw,22px);} /* Les emblemes de marque sont en blanc — c'est leur version monochrome — donc les deux pictogrammes dessines le sont aussi : un rang moitie dore, moitie blanc se lit comme une erreur. L'anneau reste dore. */ .foot-reseaux a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%; border:1px solid rgba(234,190,131,.6);color:#FFFFFF; transition:border-color .2s ease;} .foot-reseaux svg{width:21px;height:21px;} /* Au survol, seul l'anneau s'eclaire : on ne pose pas un embleme de marque sur un aplat dore et on ne le teinte pas. */ .foot-reseaux a:hover,.foot-reseaux a:focus-visible{border-color:#FFFFFF;} /* Un emblème de marque garde ses couleurs : on ne le pose pas sur un aplat dore et on ne le teinte pas. Le survol n'agit que sur la bordure. */ /* Pas de taille imposee : les attributs width et height du sont calcules aux proportions du fichier par build.py. Les forcer a 22x22 ecrasait le hibou de TripAdvisor, qui fait 132 sur 86. */ .foot-reseaux img{display:block;max-width:23px;max-height:22px;} /* --- intitules de colonne --- */ .foot-h{display:flex;align-items:center;gap:13px;margin:0 0 clamp(14px,1.7vw,18px); font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:#EABE83;} .foot-h::before{content:"";height:1px;flex:0 0 30px;background:rgba(234,190,131,.55);} /* --- liste des pages --- */ .foot-liens{display:grid;} .foot-liens a{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-block:8px;color:rgba(255,255,255,.9); transition:color .18s ease,padding-left .18s ease;} .foot-liens a::after{content:"";width:16px;height:16px;flex:0 0 auto;opacity:.55; background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;} .foot-liens a:hover,.foot-liens a:focus-visible{color:#FFFFFF;padding-left:5px;} .foot-liens a:hover::after{opacity:1;} .foot-liens a[aria-current="page"]{color:#EABE83;} /* --- coordonnees --- */ .foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:clamp(13px,1.4vw,16px);} .foot-contact li{display:grid;grid-template-columns:40px 1fr;align-items:start;gap:14px;} .foot-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%; border:1px solid rgba(234,190,131,.6);color:#EABE83;} .foot-ico svg{width:19px;height:19px;} .foot-contact b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#EABE83;margin-bottom:4px;} .foot-contact a,.foot-contact span{line-height:1.5;color:#FFFFFF;} .foot-contact a{border-bottom:1px solid transparent;} .foot-contact a:hover{border-bottom-color:rgba(255,255,255,.6);} .foot-maps{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,2.1vw,22px); padding:13px 24px;border-radius:999px;background:#E9B979;color:#04343A; font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; transition:background .2s ease,transform .2s ease;} .foot-maps svg{width:18px;height:18px;flex:0 0 auto;} .fm-fleche{transition:transform .2s ease;} .foot-maps:hover{background:#F2C88C;} .foot-maps:hover .fm-fleche{transform:translateX(4px);} /* --- barre du bas --- */ .foot-bottom{position:relative;margin-top:clamp(24px,2.8vw,32px);padding-top:16px; border-top:1px solid rgba(255,255,255,.17); display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(20px,3vw,40px); justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.78);} .foot-legal{display:flex;flex-wrap:wrap;gap:8px 0;} .foot-legal a:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px; border-radius:50%;background:#EABE83;margin:0 13px;vertical-align:middle;} .foot-legal a:hover{color:#FFFFFF;} .foot-sign{padding-left:clamp(20px,3vw,40px);border-left:1px solid rgba(255,255,255,.17);} @media (max-width:900px){ .foot-sign{padding-left:0;border-left:0;} } /* Sur telephone, le telephone et le courriel etaient des cibles de 18 px : sous le minimum de 24 px, et ce sont justement les liens qu'on tape. */ @media (max-width:640px){ .foot-contact a,.foot-legal a{display:inline-block;padding-block:4px;} } @media (max-width:620px){ .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;} /* Les mentions se replient : un point reste alors en bout de ligne. */ .foot-legal{gap:8px 18px;} .foot-legal a:not(:last-child)::after{display:none;} } /* ---------- état d'ouverture ---------- */ /* Ajouté par statut.js, jamais présent au chargement : sans JavaScript les horaires fixes suffisent et rien ne manque. */ .statut{display:inline-flex;align-items:center;gap:8px;margin-top:6px; font-size:13.5px;color:#FFFFFF;} .statut--page{margin-top:20px;font-size:16px;color:var(--ink-soft);} .statut::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto; background:currentColor;} .statut.est-ouvert::before{background:#5FD68A;box-shadow:0 0 0 4px rgba(95,214,138,.18);} .statut.est-ferme::before{background:#F0A4A4;box-shadow:0 0 0 4px rgba(240,164,164,.16);} /* Sur fond clair : le vert tendre et le rose du pied de page s'y effacent. Ces deux-la doivent passer apres les regles ci-dessus, a specificite egale. */ .statut--page.est-ouvert::before{background:#1F8A4C;box-shadow:0 0 0 5px rgba(31,138,76,.13);} .statut--page.est-ferme::before{background:#B4463F;box-shadow:0 0 0 5px rgba(180,70,63,.11);} .bookbar .statut{margin-top:0;font-size:12.5px;} .a-statut .bb-fixe{display:none;} .bookbar b{display:block;font-family:var(--display);font-size:17px;font-weight:400;} /* ---------- barre d'action (mobile) ---------- */ /* Une action par page, choisie dans le bloc meta du gabarit, plus un raccourci en pictogramme. La marge basse du corps suit la hauteur reelle de la barre : avec une valeur en dur, un etat sur deux lignes recouvrait la fin de la page et le dernier element pouvant recevoir le focus. */ .bookbar{display:none;} @media (max-width:980px){ .bookbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; align-items:center;justify-content:space-between;gap:12px; background:var(--sea-deep);color:#FFFFFF;padding:10px var(--gutter); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 26px -18px rgba(42,33,26,.8);} .bb-etat{min-width:0;flex:1 1 auto;font-size:13px;line-height:1.3;} .bb-etat b{display:block;font-family:var(--display);font-size:16px;font-weight:400;} .bb-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;} .bb-ico{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto; border:1px solid rgba(255,255,255,.4);border-radius:12px;color:#FFFFFF;} .bb-ico svg{width:21px;height:21px;} .bb-ico:hover{background:rgba(255,255,255,.12);} .bookbar .btn{padding:12px 18px;font-size:12px;white-space:nowrap;} body{padding-bottom:calc(var(--bar-h) + 8px);} } @media (max-width:360px){ .bookbar{gap:8px;} .bookbar .btn{padding:11px 14px;font-size:11px;letter-spacing:.05em;} .bb-ico{width:40px;height:40px;} } @media print{ .nav,.tools,.cta,.bookbar,footer{display:none;} body{font-size:12px;padding-bottom:0;} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;} } /* ---------- depliant « voir plus de photos » ---------- */ /* La rubrique nourriture alignait vingt-quatre photos d'affilee. Douze restent visibles, les autres attendent derriere ce depliant : aucun fichier n'est retire, et la page ne s'allonge que pour qui le demande.
natif : clavier et lecteurs d'ecran compris, sans JavaScript. */ .plus{margin-top:clamp(18px,2.4vw,26px);} .plus summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px; font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--sea-deep);border:2px solid var(--sea-deep);border-radius:999px; padding:13px 26px;} .plus summary::-webkit-details-marker{display:none;} .plus summary::after{content:"";width:11px;height:7px;background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s ease;} .plus[open] summary::after{transform:rotate(180deg);} .plus summary:hover{background:var(--sea-deep);color:#FFFFFF;} .plus summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px;} .plus .phgrid{margin-top:clamp(14px,2vw,22px);} /* ---------- grilles photo (équipe, galerie) ---------- */ .phgrid{display:grid;gap:clamp(8px,1.2vw,14px);grid-template-columns:repeat(4,1fr);} @media (max-width:900px){ .phgrid{grid-template-columns:repeat(3,1fr);} } @media (max-width:560px){ .phgrid{grid-template-columns:repeat(2,1fr);} } .phgrid figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--shell-2);} .phgrid figure img{width:100%;height:100%;object-fit:cover;display:block;} .phgrid .p-sq{aspect-ratio:1/1;} .phgrid .p-tall{aspect-ratio:3/4;} .phgrid .p-wide{aspect-ratio:4/3;grid-column:span 2;} @media (max-width:560px){ .phgrid .p-wide{grid-column:span 2;} } /* bande pleine largeur */ .band{display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:100%;} /* Sous 900px la grille de 5 laisserait un trou en 2e rangee : on passe a une bande que l'on fait defiler au doigt, les 5 photos restent visibles. */ @media (max-width:900px){ .band{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;} .band::-webkit-scrollbar{display:none;} .band figure{flex:0 0 44%;scroll-snap-align:start;} } @media (max-width:560px){ .band figure{flex:0 0 62%;} } .band figure{margin:0;overflow:hidden;aspect-ratio:1/1;} .band img{width:100%;height:100%;object-fit:cover;} /* bandeau photo d'une page intérieure */ /* trio équipe : texte + deux photos */ .crew{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(26px,4vw,56px);align-items:center;} @media (max-width:880px){ .crew{grid-template-columns:1fr;} } .crew .phgrid{grid-template-columns:repeat(2,1fr);} /* ---------------------------------------------------------------- Réservation (module R0) Formulaire sur fond coquille, champs hauts et lisibles au pouce ; les messages d'erreur remplacent l'aide sous le champ, sans décaler la grille. */ .reserver{display:grid;gap:28px;max-width:760px;margin-top:30px;} /* Page dediee : le formulaire est le contenu de la page, pas un bloc dans une colonne de texte. Cale a gauche, il laissait un vide de 400 px a sa droite sur un grand ecran. */ .reserver--centre{margin-inline:auto;justify-items:stretch;text-align:center;} .reserver--centre .rv{text-align:start;} .reserver--centre .cta-row{justify-content:center;} .reserver--centre .reserver-note,.reserver--centre .reserver-coord{margin-inline:auto;} .rv{display:grid;gap:16px;padding:clamp(20px,3vw,32px);background:var(--shell-2); border:1px solid var(--hair);border-radius:var(--r);} .rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} .rv-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));} .rv-field{display:grid;gap:6px;min-width:0;} .rv-field>span,.rv-consent>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);} .rv input:not([type=checkbox]),.rv select,.rv textarea{ width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink); background:var(--shell);border:1.5px solid var(--hair);border-radius:12px;appearance:none;-webkit-appearance:none;} .rv select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6559' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;} .rv textarea{min-height:88px;resize:vertical;line-height:1.5;} .rv input:focus-visible,.rv select:focus-visible,.rv textarea:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-color:var(--sea);} .rv-msg{display:block;min-height:1.2em;font-size:13px;color:var(--ink-soft);line-height:1.35;} .is-bad input,.is-bad select{border-color:#B3261E;} .is-bad .rv-msg{color:#B3261E;} /* Indicatif et numéro : la liste garde une largeur fixe et ne se laisse pas écraser par un nom de pays long, le numéro prend le reste. Sous 420 px les deux se superposent plutôt que de se réduire à rien. */ .rv-tel{display:flex;gap:8px;min-width:0;} .rv-tel select{flex:0 0 clamp(150px,42%,190px);min-width:0;padding-inline:10px 28px; background-position:right 10px center;font-size:15px; text-overflow:ellipsis;} .rv-tel input{flex:1 1 auto;min-width:0;} @media (max-width:420px){ .rv-tel{flex-wrap:wrap;} .rv-tel select,.rv-tel input{flex:1 1 100%;} } /* Avec JavaScript, le champ ferme n'affiche que le drapeau (voir reserver.js) : il n'a plus besoin de place pour « +33 France », et le numero recupere toute la ligne, a toutes les largeurs. Sans JavaScript la classe n'est pas posee et le champ garde sa largeur confortable, sinon le texte complet serait coupe. */ .rv-tel--compact select{flex:0 0 74px;padding-inline:12px 24px;background-position:right 8px center;} @media (max-width:420px){ .rv-tel--compact{flex-wrap:nowrap;} .rv-tel--compact select{flex:0 0 74px;} .rv-tel--compact input{flex:1 1 auto;} } .rv-hint{font-size:14px;color:var(--ink-soft);margin:-4px 0 0;} .rv-hint--more{padding:12px 14px;background:var(--sun-soft);color:#33260F;border-radius:12px;margin:0;} .rv-hint--more a{color:inherit;font-weight:700;} /* Toute la ligne est cliquable — c'est un