/* ========================================================================== Yacht In — Design system (§8 du PRD) Registre : luxe balnéaire, Côte d'Azur. Mobile-first strict. ========================================================================== */ /* --- Polices auto-hébergées (woff2 prioritaire, repli TTF) ----------------- */ @font-face { font-family: 'Domine'; src: url('../fonts/domine-700.woff2') format('woff2'), url('../fonts/domine-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-400.woff2') format('woff2'), url('../fonts/worksans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-600.woff2') format('woff2'), url('../fonts/worksans-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Great Vibes'; src: url('../fonts/greatvibes-400.woff2') format('woff2'), url('../fonts/greatvibes-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* --- Tokens ---------------------------------------------------------------- */ :root { --marine: #132638; --marine-70: rgba(19, 38, 56, .70); --marine-90: rgba(19, 38, 56, .92); --camel: #BB9671; --camel-fonce: #a67e58; --camel-action: #946B46; --camel-action-hover: #875D3B; --camel-pale: #F3ECE3; /* DESIGN.md « Camel pâle » : sélection légère, survol */ /* Camel lisible en petit corps sur fond clair : le camel signature plafonne à 2,72:1 sur blanc et 2,42:1 sur sable, très en deçà des 4,5:1 exigés par WCAG AA. Réservé au TEXTE camel de petite taille (.eyebrow) ; les surfaces et les accents décoratifs gardent --camel. */ --camel-texte: #8C6542; /* 5,18:1 sur blanc · 4,61:1 sur sable */ --whatsapp: #25D366; --whatsapp-hover: #1FBA59; --sable: #F6F1EA; --blanc: #FFFFFF; /* Assombri de #6A7285 le 16/08/2026 : l'ancien ton tombait à 4,29:1 sur sable, sous le seuil AA de 4,5:1 — or c'est la paire de texte courant la plus fréquente du site (toutes les sections --sable). */ --ardoise: #656D7F; /* 5,17:1 sur blanc · 4,60:1 sur sable */ --ardoise-30: rgba(101, 109, 127, .30); /* Contour des composants interactifs (champs, puces) : WCAG 1.4.11 impose 3:1, que --ardoise-30 n'atteint pas (1,50:1). Les filets purement décoratifs peuvent rester en --ardoise-30. */ --bordure-champ: rgba(101, 109, 127, .85); /* 3,81:1 sur blanc · 3,48:1 sur sable */ --serif: 'Domine', 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --script: 'Great Vibes', 'Brush Script MT', cursive; --rayon: 12px; --rayon-lg: 20px; --ombre: 0 1px 3px rgba(19,38,56,.06), 0 8px 24px rgba(19,38,56,.06); --ombre-fort: 0 12px 40px rgba(19,38,56,.16); --transition: 220ms cubic-bezier(.4,0,.2,1); --largeur-max: 1240px; --mesure: 62ch; /* mesure de lecture — cf. `.mesure` */ --gouttiere: clamp(1rem, 4vw, 2.5rem); --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-6: 24px; --espace-10: 40px; --z-barre-actions: 90; --z-cookies: 95; --z-menu: 99; --z-entete: 100; --z-tooltip: 110; /* Verre marine : fond translucide partagé par l'en-tête et le menu mobile. Défini une seule fois pour que les deux surfaces restent identiques — elles se touchent quand le menu est ouvert. */ --verre: linear-gradient(160deg, rgba(19,38,56,.94) 0%, rgba(11,25,38,.97) 100%); --verre-flou: blur(20px) saturate(1.2); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Césure des mots insécables (adresses e-mail, références) : à fort grossissement du texte, `contact@yachtin.fr` poussait /contact et /maintenance en débordement horizontal. Portée volontairement limitée au **texte** : posée sur `body`, la règle cassait aussi les libellés d'interface — « Invités » se retrouvait avec son « s » sur une deuxième ligne dans la barre de recherche. */ p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, td, th { overflow-wrap: break-word; } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--marine); background: var(--blanc); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--camel); outline-offset: 3px; border-radius: 4px; } /* --- Typographie ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; color: var(--marine); } h1 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: -.01em; } h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); } p { color: var(--ardoise); } .surtitre { font-family: var(--script); font-size: clamp(1.6rem, 4vw, 2.4rem); /* Sur fond clair, le camel signature n'atteint que 2,72:1 (blanc) et 2,42:1 (sable) là où un grand texte demande 3:1. Le camel profond garde l'or de la signature en passant le seuil ; sur fond marine on revient au camel clair, qui y est déjà largement contrasté et plus lumineux. */ color: var(--camel-fonce); font-weight: 400; line-height: 1; display: block; } .section--marine .surtitre, .hero .surtitre { color: var(--camel); } .eyebrow { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--camel-texte); } /* --- Layout utilitaires --------------------------------------------------- */ .conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); } .section { padding-block: clamp(3.5rem, 9vw, 7rem); } .section--sable { background: var(--sable); } .section--marine { background: var(--marine); color: var(--sable); } .section--marine h2, .section--marine h3 { color: var(--blanc); } .section--marine p { color: rgba(246,241,234,.75); } .centre { text-align: center; } /* Mesure de lecture, en une seule valeur : 62 signes par ligne, dans la bande confortable des 45–75. Quatre largeurs différentes coexistaient (56ch, 58ch, 62ch et la largeur libre d'une colonne de grille) sans qu'aucune raison ne les distingue — ce qui se voit, page ouverte, comme un défaut d'alignement. */ .mesure { max-width: var(--mesure); } .mesure.centre { margin-inline: auto; } .entete-section { margin-bottom: clamp(2rem, 5vw, 3.5rem); } /* --- Boutons (pilule) ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .75rem 1.75rem; border-radius: 999px; font-weight: 600; font-size: 1rem; transition: var(--transition); text-align: center; /* Pas de `white-space: nowrap` : a fort grossissement du texte, un libelle insecable poussait la page en debordement horizontal (WCAG 1.4.4). */ max-width: 100%; text-wrap: balance; } .btn--primaire { background: var(--camel-action); color: var(--blanc); } .btn--primaire:hover { background: var(--camel-action-hover); color: var(--blanc); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(148,107,70,.35); } .btn--secondaire { background: transparent; color: var(--marine); border: 1.5px solid var(--marine); } .btn--secondaire:hover { background: var(--marine); color: var(--blanc); } .btn--clair { background: var(--blanc); color: var(--marine); } .btn--clair:hover { background: var(--sable); transform: translateY(-2px); } .btn--fantome { color: var(--marine); padding-inline: .5rem; } .btn--fantome:hover { color: var(--camel); } .btn--bloc { width: 100%; } .btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .9rem; } /* --- Header --------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: var(--z-entete); background: var(--verre); backdrop-filter: var(--verre-flou); color: var(--sable); transition: var(--transition); } .entete__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; } .logo { display: inline-flex; align-items: center; } /* Le logo est posé sur un fond marine sombre : deux ombres portées le décollent sans l'encadrer — `drop-shadow` épouse l'alpha du fichier, donc suit le lettrage et jamais un rectangle. Ombre courte pour la profondeur, halo doré serré pour la chaleur. Hauteur et intensité pilotées depuis le back-office (Réglages → Site & design), d'où les variables. */ .logo img { height: var(--logo-h, 40px); width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(187,150,113,var(--logo-halo, .12))); } .nav-principale { display: none; } .nav-principale ul { display: flex; gap: 1.6rem; align-items: center; } .nav-principale a { font-size: .95rem; color: rgba(246,241,234,.85); position: relative; padding-block: .25rem; } .nav-principale a:hover, .nav-principale a[aria-current="page"] { color: var(--blanc); } .nav-principale a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--camel); transition: width var(--transition); } .nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after { width: 100%; } .entete__actions { display: flex; align-items: center; gap: .75rem; } .selecteur-langue { display: flex; gap: .15rem; align-items: center; font-size: .82rem; } .selecteur-langue a { color: rgba(246,241,234,.55); border-radius: 4px; text-transform: uppercase; /* WCAG 2.5.8 : 24x24 minimum. Les trois codes de langue mesuraient 17 a 22 px de large. */ display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: .2rem .35rem; } .selecteur-langue a[aria-current="true"] { color: var(--blanc); font-weight: 600; } .selecteur-langue a:hover { color: var(--camel); } .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; color: var(--blanc); } .burger span { display: block; height: 2px; width: 24px; background: currentColor; transition: var(--transition); margin-inline: auto; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Menu mobile ---------------------------------------------------------- Panneau plein écran qui glisse de la droite sur un voile qui se fond, lignes révélées en cascade (30 ms). Pas de séparateurs : la hiérarchie vient de la taille, de la police et de l'espace. */ .menu-mobile { position: fixed; inset: 0; z-index: var(--z-menu); visibility: hidden; } .menu-mobile.ouvert { visibility: visible; } .menu-mobile__voile { position: absolute; inset: 0; background: rgba(8, 18, 28, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 320ms ease; } .menu-mobile.ouvert .menu-mobile__voile { opacity: 1; } .menu-mobile__panneau { position: absolute; inset: 0 0 0 auto; width: 100%; max-width: 30rem; /* Le filet de séparation se pose au milieu de cet écart : même respiration au-dessus et en dessous de chaque trait. */ display: flex; flex-direction: column; gap: 1.4rem; padding: 5.5rem var(--gouttiere) 2rem; overflow-y: auto; overscroll-behavior: contain; color: var(--sable); /* Fond translucide : la page reste devinée derrière, plus premium qu'un aplat. Même verre que l'en-tête, avec lequel le panneau est jointif. */ background: var(--verre); backdrop-filter: var(--verre-flou); box-shadow: -24px 0 60px rgba(0,0,0,.45); transform: translateX(100%); transition: transform 380ms cubic-bezier(.22,.68,.28,1); } .menu-mobile.ouvert .menu-mobile__panneau { transform: none; } /* Chaque ligne entre avec son propre décalage (--i posé par le gabarit) */ .menu-mobile li, .menu-mobile__pied { opacity: 0; transform: translateX(18px); transition: opacity 300ms ease, transform 300ms cubic-bezier(.22,.68,.28,1); } .menu-mobile.ouvert li, .menu-mobile.ouvert .menu-mobile__pied { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 30ms); } /* Entrées : même corps partout. Le regroupement (blocs séparés d'un filet) et la graisse portent la hiérarchie — un écart de taille cassait la cohérence. */ .menu-mobile__bloc { display: flex; flex-direction: column; gap: .15rem; } .menu-mobile__bloc + .menu-mobile__bloc { padding-top: 1.4rem; border-top: 1px solid rgba(246,241,234,.12); } .menu-mobile__bloc a { display: flex; align-items: center; gap: .95rem; font-size: 1.05rem; line-height: 1.3; letter-spacing: .01em; color: rgba(246,241,234,.74); padding: .5rem 0; min-height: 48px; transition: var(--transition); } .menu-mobile__bloc--principal a { color: var(--blanc); font-weight: 600; } .menu-mobile__bloc a:hover, .menu-mobile__bloc a[aria-current="page"] { color: var(--camel); } .menu-mobile__ico { flex: 0 0 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(187,150,113,.12); color: var(--camel); box-shadow: inset 0 0 0 1px rgba(187,150,113,.22); transition: var(--transition); } .menu-mobile__bloc a:hover .menu-mobile__ico { background: var(--camel); color: var(--marine); } .menu-mobile__bloc a[aria-current="page"] .menu-mobile__ico { background: rgba(187,150,113,.3); } /* Pied : CTA pleine largeur puis les langues, chacun sur son filet */ .menu-mobile__pied { margin-top: auto; padding-top: 1.4rem; display: grid; gap: 1.1rem; border-top: 1px solid rgba(246,241,234,.12); } @media (prefers-reduced-motion: reduce) { .menu-mobile__panneau, .menu-mobile li, .menu-mobile__pied { transition: none; } } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; min-height: min(88vh, 720px); display: flex; align-items: flex-end; color: var(--blanc); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Voile très léger : on laisse voir la vidéo. Le dégradé bas est conservé mais resserré sur le dernier tiers — sans lui, le texte blanc et la barre de recherche deviennent illisibles sur les plans clairs (mer, sillage). */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(19,38,56,.62) 0%, rgba(19,38,56,.34) 22%, rgba(19,38,56,.10) 45%, rgba(19,38,56,.10) 100%); } /* Signature dorée : un reflet traverse le surtitre toutes les 13 s, comme la lumière sur un cadran. Le balayage n'occupe que les 18 derniers pour-cent du cycle (~2,3 s de mouvement, puis ~10,7 s de repos) — sinon l'effet devient une animation permanente, tout l'inverse de l'intention. Sous `@supports` : sans `background-clip: text`, le texte serait transparent donc invisible ; il reste alors simplement camel. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero .surtitre { /* Le fond ne peint QUE la boîte de l'élément : avec `line-height: 1`, les hampes et jambages de Great Vibes en sortaient et disparaissaient. Cette interligne généreuse englobe tout le glyphe. */ line-height: 1.55; /* Éclaircissement mesuré : un blanc franc claquait, on reste dans les ors. */ background-image: linear-gradient(115deg, var(--camel) 0%, var(--camel) 40%, #dcc4a4 46%, #ecdcc2 50%, #dcc4a4 54%, var(--camel) 60%, var(--camel) 100%); background-size: 300% 100%; background-position: 200% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* Deux pistes synchronisées : le reflet qui traverse, et un halo qui s'allume pendant son passage — un éclat sans lueur reste plat. Course en `linear` : un `ease-in-out` accélère au milieu du trajet, ce qui donne exactement l'impression de précipitation qu'on veut éviter. */ animation: reflet-dore 15s linear infinite, halo-dore 15s ease-in-out infinite; } } /* ~4,2 s de traversée pour ~10,8 s de repos. */ @keyframes reflet-dore { 0%, 72% { background-position: 200% 0; } 100% { background-position: -100% 0; } } @keyframes halo-dore { 0%, 72%, 100% { filter: drop-shadow(0 0 0 rgba(236,220,194,0)); } 86% { filter: drop-shadow(0 0 10px rgba(236,220,194,.3)); } } .hero__contenu { padding-block: clamp(1.75rem, 5vw, 4rem); max-width: 40rem; } .hero h1 { color: var(--blanc); margin-block: .35rem .7rem; } .hero__tagline { color: rgba(255,255,255,.9); font-size: 1.08rem; margin-bottom: 1.25rem; max-width: 34ch; } @media (min-width: 960px) { /* La tagline tenait sur trois lignes courtes à côté d'un titre large */ .hero__contenu { max-width: 46rem; } .hero__tagline { max-width: 52ch; font-size: 1.15rem; } } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; } /* Variante « page interne » (maintenance…) : héro plus compact, image statique. Le surtitre doré animé reste la signature de l'accueil — ici, .eyebrow. */ .hero--page { min-height: min(52vh, 460px); } .hero--page .hero__media .placeholder-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .hero--page .eyebrow { color: var(--camel); } @media (min-width: 960px) { .hero--page { min-height: min(60vh, 540px); } } /* Barre de recherche (desktop en ligne, mobile bouton) */ .recherche-hero { margin-top: 1.75rem; } .recherche-barre { display: none; } .recherche-barre { background: #fff; border-radius: 14px; overflow: hidden; /* coins arrondis appliqués au bouton */ box-shadow: var(--ombre-fort); gap: 0; align-items: stretch; max-width: 620px; } .recherche-barre .champ-inline { display: flex; flex-direction: column; justify-content: center; padding: .7rem 1rem; flex: 1 1 0; min-width: 0; gap: .15rem; } /* Les champs date ont une largeur intrinsèque (jj/mm/aaaa + icône) : sans cette base, le format était rogné. Les invités n'ont pas besoin d'autant de place. */ .recherche-barre .champ-inline--date { flex: 1 1 11.5ch; min-width: 11.5ch; } .recherche-barre .champ-inline--nombre { flex: 0 1 8ch; min-width: 6ch; } .recherche-barre label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); font-weight: 600; } /* Les champs natifs n'héritent ni de la police ni de la taille : on les aligne explicitement sur le reste du site (sinon date et nombre s'affichent dans deux polices différentes de celle du site). */ .recherche-barre input, .recherche-barre select { border: none; background: none; width: 100%; padding: .1rem 0; font-family: var(--sans); font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--marine); color-scheme: light; } .recherche-barre input[type="date"] { min-width: 0; } .recherche-barre input::-webkit-datetime-edit { padding: 0; font-family: var(--sans); } .recherche-barre input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; padding-left: .2rem; } .recherche-barre input::placeholder { color: var(--ardoise); opacity: 1; } .recherche-barre .sep { width: 1px; background: var(--ardoise-30); margin-block: .7rem; } /* Bouton pleine hauteur, à ras du bord droit (les coins sont arrondis par le conteneur) */ .recherche-barre .btn { flex: 0 0 auto; align-self: stretch; min-height: 0; border-radius: 0; padding: 0 1.6rem; font-size: .95rem; } .recherche-barre .btn:hover { transform: none; box-shadow: none; } /* --- Grilles & cartes ----------------------------------------------------- */ .grille { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } .grille--3 { grid-template-columns: minmax(0, 1fr); } .grille--4 { grid-template-columns: repeat(2, 1fr); } .grille--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .carte { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: var(--transition); display: flex; flex-direction: column; border: 1px solid rgba(19,38,56,.05); } .carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-fort); } .carte__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sable); } .carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .carte:hover .carte__media img { transform: scale(1.05); } /* Badge discret : une pastille en verre dépoli plutôt qu'un gros bloc camel qui écrasait la photo et empiétait sur le sujet. */ .carte__badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; background: rgba(19,38,56,.78); color: var(--blanc); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } .carte__corps { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; gap: .45rem; } /* Deux lignes réservées au titre : les cartes d'une même rangée gardent leurs specs, prix et bouton alignés même quand un nom déborde. */ .carte__titre { font-size: 1.05rem; line-height: 1.25; min-height: calc(2 * 1.25em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Toujours lisible, même dans une section marine (la carte reste blanche). */ .carte__titre a { color: var(--marine); text-decoration: none; } .carte__titre a:hover { color: var(--camel-fonce); } .carte__specs { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .76rem; color: var(--ardoise); } .carte__specs span { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; } .carte__specs svg { opacity: .7; } .carte__pied { margin-top: auto; padding-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid rgba(19,38,56,.06); } /* Prix sur une seule ligne (« À partir de 18 000 € / jour » tenait sur trois) */ .carte__prix { line-height: 1.15; min-width: 0; } .carte__prix small { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); } .carte__prix b { font-family: var(--serif); font-size: 1.12rem; color: var(--marine); } .carte__prix .carte__unite { display: inline; font-size: .7rem; text-transform: none; letter-spacing: 0; } .carte__actions { display: flex; gap: .4rem; } .placeholder-img { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, var(--sable), #e8ddd0); /* Le repli porte le nom de la fiche : c'est du contenu, pas un ornement. Le camel signature n'y tenait que 2,42:1 pour un seuil de 3:1. */ color: var(--camel-texte); font-family: var(--script); font-size: 2rem; } /* --- Rail : rangée de cartes défilante (accueil) -------------------------- Défilement natif à toutes les tailles (doigt, trackpad, flèches) plutôt qu'une grille figée qui tronquait la flotte à ce qui tenait dans la ligne. Les cartes gardent une largeur fixe : la dernière dépasse légèrement du cadre, ce qui signale qu'il y a une suite. */ .rail { position: relative; } .rail__piste { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* déborde des gouttières pour que le défilement parte du bord de l'écran */ margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); /* `overflow-x: auto` force le rognage vertical : cette marge intérieure laisse passer le soulèvement et l'ombre des cartes au survol. */ padding-block: 1rem 1.4rem; } .rail__piste::-webkit-scrollbar { display: none; } .rail__piste:focus-visible { outline: 2px solid var(--camel); outline-offset: 4px; border-radius: 4px; } .rail__item { scroll-snap-align: start; flex: 0 0 78%; max-width: 300px; display: flex; } .rail__item > .carte { width: 100%; } .rail__fleche { display: none; position: absolute; top: calc(50% - .9rem); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; z-index: 3; background: var(--blanc); color: var(--marine); box-shadow: var(--ombre-fort); border: 1px solid rgba(19,38,56,.06); align-items: center; justify-content: center; transition: var(--transition); } .rail--defilable .rail__fleche { display: flex; } .rail__fleche:hover { background: var(--camel); color: var(--blanc); } .rail__fleche[disabled] { opacity: 0; pointer-events: none; } .rail__fleche--prec { left: calc(-1 * var(--gouttiere) / 2); } .rail__fleche--suiv { right: calc(-1 * var(--gouttiere) / 2); } /* --- Catégories (accueil) ------------------------------------------------- */ .cat-carte { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: flex-end; color: var(--blanc); } .cat-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .cat-carte::after { content:''; position: absolute; inset: 0; background: linear-gradient(to top, var(--marine-90), transparent 70%); z-index: -1; } .cat-carte__corps { padding: 1.4rem; } .cat-carte h3 { color: var(--blanc); margin-bottom: .2rem; } .cat-carte p { color: rgba(255,255,255,.8); font-size: .85rem; } /* --- Bandeau confiance ---------------------------------------------------- */ .confiance { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } .confiance__item { display: flex; gap: 1rem; align-items: flex-start; } /* La typographie du bandeau appartient au composant. Elle vivait en style inline sur l'accueil et Maintenance, et manquait sur Location : le titre y prenait la taille par défaut d'un

et écrasait la rangée. Un seul endroit désormais, les trois pages sont identiques par construction. */ .confiance__item h2, .confiance__item h3 { font-size: 1.05rem; margin-bottom: .2rem; } .confiance__item p { font-size: .88rem; } .confiance__ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--sable); display: flex; align-items: center; justify-content: center; color: var(--camel); } .confiance__ico svg { width: 24px; height: 24px; } /* --- Filtres catalogue ---------------------------------------------------- */ .catalogue-tete { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .filtres { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .filtres select, .filtres input { min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--bordure-champ); border-radius: 999px; font-size: .9rem; background: var(--blanc); color: var(--marine); } .filtres select:focus, .filtres input:focus { border-color: var(--camel); outline: none; box-shadow: 0 0 0 3px rgba(187,150,113,.18); } .filtres-compte { font-size: .88rem; color: var(--ardoise); margin-left: auto; } .puce-filtre { display:inline-flex; align-items:center; gap:.4rem; background: var(--sable); border-radius:999px; padding:.35rem .8rem; font-size:.82rem; } .puce-filtre button { color: var(--ardoise); font-size: 1rem; line-height: 1; } /* --- Fiche bateau --------------------------------------------------------- */ .fiche-hero { display: grid; gap: 0; } /* `--miniatures-h` = hauteur exacte du rail de vignettes (vignette + bordures + padding). Elle sert à caler le filtre de catégories juste au-dessus du rail, c'est-à-dire au bas de la PHOTO : le filtre est en surimpression dans `.galerie`, dont le bas est celui des miniatures, pas celui de l'image. Les trois valeurs ci-dessous sont reprises telles quelles par `.galerie__miniatures` — les modifier ensemble. */ .galerie { position: relative; background: var(--marine); --miniatures-h: calc(54px + 4px + 1.2rem); } /* Piste défilante : le swipe mobile est le défilement natif (scroll-snap), donc fluide, avec inertie, et fonctionnel même sans JavaScript. */ .galerie__piste { position: relative; /* offsetParent des vues : offsetLeft = position dans la piste (JS) */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .galerie__piste::-webkit-scrollbar { display: none; } .galerie__vue { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16/10; overflow: hidden; } .galerie__vue img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Flèches : inutiles sans JS (le doigt et le trackpad suffisent) → révélées par `galerie--interactive`, posée par app.js. Masquées au survol tactile. */ /* Le disque visible descend à 36 px, mais le bouton en garde 44 : le padding reste dans la cible tactile et `background-clip: content-box` empêche le fond de s'y étendre. Réduire `width` aurait rogné la zone de tap sous le plancher que DESIGN.md impose. */ .galerie__fleche { display: none; position: absolute; top: calc(50% - 2.2rem); transform: translateY(-50%); width: 44px; height: 44px; padding: 4px; border-radius: 999px; background: rgba(19, 38, 56, .55); background-clip: content-box; color: #fff; align-items: center; justify-content: center; backdrop-filter: blur(3px); transition: var(--transition); } .galerie--interactive .galerie__fleche { display: flex; } .galerie__fleche:hover { background: var(--camel); } .galerie__fleche[disabled] { opacity: .3; pointer-events: none; } .galerie__fleche--prec { left: .6rem; } .galerie__fleche--suiv { right: .6rem; } .galerie__compteur { position: absolute; top: .8rem; right: .8rem; background: rgba(19, 38, 56, .6); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; padding: .2rem .6rem; border-radius: 999px; } /* `safe center` : les miniatures sont centrées tant qu'elles tiennent, et repassent à gauche dès qu'elles débordent — un `center` seul rendrait le début de la piste inatteignable au défilement. */ .galerie__miniatures { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem; background: var(--marine); justify-content: safe center; } .galerie__miniatures button { flex: 0 0 72px; height: 54px; border-radius: 6px; overflow: hidden; opacity: .55; transition: var(--transition); border: 2px solid transparent; } .galerie__miniatures button.actif, .galerie__miniatures button:hover { opacity: 1; border-color: var(--camel); } .galerie__miniatures img { width: 100%; height: 100%; object-fit: cover; } .galerie__miniatures button[hidden] { display: none; } /* Filtre par catégorie : en surimpression au BAS DE LA PHOTO, centré. Dans le flux, il épaississait le bandeau marine ; en haut, il masquait le sujet. `bottom` part de la hauteur des miniatures (cf. `--miniatures-h`) parce que le bas de `.galerie` est celui du rail, pas celui de l'image. Puces claires, la sélection prend le camel signature comme partout ailleurs. */ .galerie__filtres { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(var(--miniatures-h) + .7rem); display: flex; flex-wrap: nowrap; gap: .35rem; max-width: calc(100% - 1.4rem); /* Une seule ligne, quitte à défiler : sur un téléphone, quatre catégories passaient à la ligne et empilaient deux rangées de puces sur la photo. `safe center` centre tant que ça tient et bascule à gauche au débordement, sinon le début du rail serait inatteignable. */ justify-content: safe center; overflow-x: auto; scrollbar-width: none; } .galerie__filtres::-webkit-scrollbar { display: none; } .galerie__filtre { flex: 0 0 auto; min-height: 32px; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(246,241,234,.22); background: var(--marine-90); color: var(--sable); font-size: .72rem; font-weight: 600; white-space: nowrap; transition: color var(--transition), background var(--transition), border-color var(--transition); } @media (min-width: 760px) { .galerie__filtre { font-size: .78rem; padding: .3rem .85rem; } } .galerie__filtre:hover { border-color: var(--camel); } .galerie__filtre.est-actif { background: var(--camel); border-color: var(--camel); color: var(--marine); } /* Agrandissement : la photo entière est le bouton. La pastille posée en bas à droite mangeait un coin de l'image pour redire ce que le curseur `zoom-in` dit déjà. Elle disparaît, mais **pas le bouton** : c'est lui qui porte le nom accessible et l'accès clavier. Une `` seule, même cliquable, ne se tabule pas. Il devient donc un calque transparent posé sur toute la photo — invisible, mais focusable et annoncé. Il n'existe que si le script a pu l'activer (rendu `hidden` côté serveur). */ .galerie__vue { position: relative; } .galerie__vue[hidden] { display: none; } .galerie__zoom { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: none; border: 0; cursor: zoom-in; } /* Visionneuse plein écran ( natif : Échap, voile et piège de focus sont gérés par le navigateur). */ .zoom { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: rgba(9,18,28,.94); color: var(--sable); } .zoom[open] { display: flex; flex-direction: column; } .zoom::backdrop { background: rgba(9,18,28,.94); } .zoom__figure { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .9rem; margin: 0; padding: clamp(1rem, 4vw, 2.5rem); /* Le balayage horizontal est à nous, le zoom à deux doigts reste au navigateur. */ touch-action: pan-y pinch-zoom; } .zoom__figure img { width: 100%; height: 100%; object-fit: contain; transition: transform 180ms ease-out, opacity 180ms ease-out; } /* Pendant le geste, l'image colle au doigt : aucune transition ne doit traîner. */ .zoom__figure img.glisse { transition: none; } .zoom__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; font-size: .85rem; color: rgba(246,241,234,.75); text-align: center; } .zoom__fermer, .zoom__fleche { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(246,241,234,.12); color: var(--sable); border: 1px solid rgba(246,241,234,.2); transition: background var(--transition), color var(--transition); } .zoom__fermer:hover, .zoom__fleche:hover { background: var(--camel); color: var(--marine); } .zoom__fleche[disabled] { opacity: .25; pointer-events: none; } .zoom__fermer { top: 1rem; right: 1rem; } .zoom__fleche--prec { left: 1rem; top: 50%; transform: translateY(-50%); } .zoom__fleche--suiv { right: 1rem; top: 50%; transform: translateY(-50%); } /* Bande de miniatures du plein écran : elle évite d'avoir à fermer la visionneuse pour changer de photo. Construite par le script, jamais rendue côté serveur. */ .zoom__miniatures { position: relative; display: flex; flex: 0 0 auto; gap: .4rem; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(.75rem, 3vw, 1.5rem); scrollbar-width: none; } .zoom__miniatures::-webkit-scrollbar { display: none; } .zoom__vignette { flex: 0 0 72px; height: 54px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: rgba(246,241,234,.08); opacity: .55; transition: opacity var(--transition), border-color var(--transition); } .zoom__vignette img { width: 100%; height: 100%; display: block; object-fit: cover; } .zoom__vignette:hover, .zoom__vignette.actif { opacity: 1; border-color: var(--camel); } .zoom__vignette[hidden] { display: none; } /* Les planches ne sont pas des photos : ratios de 482×191 à 1097×1950, souvent détourées. Un recadrage en `cover` n'en montrerait qu'un fragment illisible. */ .zoom__miniatures--planches .zoom__vignette img { object-fit: contain; } .zoom__miniatures--planches .zoom__vignette { background: rgba(246,241,234,.92); } @media (prefers-reduced-motion: reduce) { /* Le geste continue de fonctionner : seul le retour animé de l'image disparaît. */ .zoom__figure img { transition: none; } } /* --- Plans d'amenagement (fiches de vente) --------------------------------- Fond blanc et cadre blanc : la moitie des plans sont des PNG detoures, l'autre des JPEG a fond blanc. Poses sur blanc, les deux origines rendent pareil ; la bordure fine, et non un contraste de fond, delimite la planche. Les sources sont petites (de 482x191 a 1000 px de large apres conversion) : `max-width` est borne en ligne a la largeur reelle du fichier, jamais etire. */ .plans { margin-top: 2.5rem; } .plans__intro { max-width: 60ch; margin: 0 0 1.2rem; color: var(--ardoise); font-size: .9rem; } .plans-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; } .plan { margin: 0; } .plan__cadre { position: relative; margin-inline: auto; padding: 1rem; background: #fff; border: 1px solid rgba(19,38,56,.12); border-radius: var(--rayon, 6px); width: fit-content; max-width: 100%; } /* La HAUTEUR est le vrai garde-fou : une vue de dessus fait 563x1000 px et, bornée en largeur seulement, occupait un écran entier. Plafonnée, l'image garde son ratio (`width:auto`) et le bloc reste une annexe, pas un poster. Le plein écran est là pour qui veut lire le détail. */ .plan__cadre img { display: block; width: auto; max-width: 100%; max-height: clamp(180px, 26vh, 260px); height: auto; margin-inline: auto; } .plan__legende { margin-top: .6rem; text-align: center; font-size: .85rem; color: var(--ardoise); } .plan__zoom { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--marine-90); color: var(--sable); border: 1px solid rgba(246,241,234,.22); transition: background var(--transition), color var(--transition); } .plan__zoom:hover { background: var(--camel); color: var(--marine); } .plan__cadre:has(.plan__zoom:not([hidden])) img { cursor: zoom-in; } /* Le plan agrandi garde son fond blanc : sur le voile marine, un PNG detoure en trait sombre serait illisible. */ [data-plans-dialogue] .zoom__figure img { background: #fff; padding: 1rem; } .fiche-corps { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); } /* Elements de grille : `min-width: auto` les empeche de descendre sous leur largeur min-content, ce qui pousse la page au grossissement du texte. */ .fiche-corps *, .fiche-vente__corps * { min-width: 0; } .fiche-entete .fil-ariane { font-size: .8rem; color: var(--ardoise); margin-bottom: .75rem; } .fiche-entete .fil-ariane a:hover { color: var(--camel); } .fiche-titre-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; } .fiche-meta-rapide { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; color: var(--ardoise); font-size: .95rem; } /* Caractéristiques — colonnes aérées, partagées par la fiche yacht et la fiche de vente (variante « C » de `test-grille-caracteristiques.html`, retenue le 17/08/2026). Le quadrillage précédent — cellules blanches cloisonnées de filets sur les quatre côtés — faisait tableur, et surtout il laissait une **case vide** en fin de grille dès que le nombre de caractéristiques n'était pas un multiple du nombre de colonnes : le cas de presque toutes les fiches, puisque ce nombre dépend de ce qui est renseigné. `auto-fit` remplit la dernière rangée au lieu de la creuser. L'espace et un filet camel organisent, la valeur passe devant son libellé. */ .specs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem 2rem; } .specs-grille > div { padding-top: .85rem; border-top: 2px solid var(--camel); } .specs-grille dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--camel-texte); margin-bottom: .25rem; } /* La valeur doit dominer son libellé : 1 rem ne suffirait pas, 1,5 rem — la marche suivante du système — en ferait un titre. Marche intermédiaire assumée. */ .specs-grille dd { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--marine); } /* Une valeur à rallonge (motorisation, lieu de visite) tient sur trois lignes dans une colonne et creuse toute sa rangée. Sur deux colonnes, elle en occupe une seule et la rangée reste basse. */ .specs-grille > div.est-longue { grid-column: span 2; } /* Équipements : grille régulière (les pilules en flex-wrap donnaient des lignes de longueurs inégales, d'où une impression de désordre). Une icône Lucide par équipement, choisie dans le back-office. */ .equipements-grille { display: grid; gap: .45rem; /* Deux par ligne, mais la grille retombe seule a une colonne quand le texte grossit : le libelle est un element flex ANONYME, que `min-width: 0` ne peut pas atteindre. Le minimum en rem suit donc la taille de police. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } .equipements-grille li { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; background: var(--sable); border-radius: 10px; padding: .5rem .6rem; font-size: .8rem; line-height: 1.25; } .equipement-ico { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--blanc, #fff); color: var(--camel); border-radius: 8px; } .equipement-ico svg { width: 15px; height: 15px; } @media (min-width: 760px) { .equipements-grille { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; } .equipements-grille li { font-size: .84rem; padding: .55rem .7rem; } .equipement-ico { flex-basis: 28px; height: 28px; } .equipement-ico svg { width: 16px; height: 16px; } } .tarifs-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .tarifs-table th, .tarifs-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--ardoise-30); } .tarifs-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ardoise); font-weight: 600; } .tarifs-table td:not(:first-child) { font-family: var(--serif); color: var(--marine); } .inclus-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .inclus-col h4 { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; } .inclus-col.oui h4 { color: #2e7d5b; } .inclus-col.non h4 { color: var(--ardoise); } .inclus-col li { padding-left: 1.4rem; position: relative; color: var(--ardoise); font-size: .9rem; margin-bottom: .3rem; } .inclus-col.oui li::before { content: '✓'; position: absolute; left: 0; color: #2e7d5b; font-weight: 700; } .inclus-col.non li::before { content: '·'; position: absolute; left: .4rem; color: var(--ardoise); } /* Encadré demande (sticky desktop) */ .encart-demande { background: var(--blanc); border: 1px solid var(--ardoise-30); border-radius: var(--rayon-lg); padding: 1.5rem; box-shadow: var(--ombre); } /* Un prix est un bloc insecable (espace fine avant le symbole) : il ne peut pas se casser, sa taille doit donc etre bornee par la fenetre. En anglais « 1,450,000 € » debordait de l encart au grossissement du texte. */ .encart-demande .prix-grand { font-family: var(--serif); font-size: clamp(1.5rem, 8vw, 2rem); color: var(--marine); } .encart-demande .prix-grand small { font-family: var(--sans); font-size: .85rem; color: var(--ardoise); font-weight: 400; } /* --- Tunnel de demande ---------------------------------------------------- */ .tunnel { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } /* Les éléments de grille et de flex ont `min-width: auto` : ils refusent de descendre sous la largeur min-content de leur contenu. Un champ natif porte une largeur intrinsèque (≈ 20 caractères) qui, à fort grossissement du texte, poussait tout le formulaire hors de l'écran. Sur un élément de bloc ordinaire la déclaration ne change rien — elle ne vise donc que les cas concernés. */ .tunnel * { min-width: 0; } .etapes { display: flex; gap: .5rem; margin-bottom: 2rem; } .etape-jauge { flex: 1; height: 4px; background: var(--ardoise-30); border-radius: 999px; overflow: hidden; } .etape-jauge span { display: block; height: 100%; background: var(--camel); width: 0; transition: width var(--transition); } .etape-num { font-size: .8rem; color: var(--ardoise); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; } .etape-panneau { display: none; } .etape-panneau.actif { display: block; animation: fondu .3s ease; } @keyframes fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .recap-devis { position: sticky; top: 90px; background: var(--sable); border-radius: var(--rayon-lg); padding: 1.5rem; } .recap-devis h3 { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ardoise); margin-bottom: 1rem; } .recap-ligne { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .92rem; border-bottom: 1px solid var(--ardoise-30); } .recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--marine); } .recap-total b { font-family: var(--serif); font-size: 1.6rem; color: var(--marine); } .recap-note { font-size: .78rem; color: var(--ardoise); margin-top: .75rem; font-style: italic; } /* --- Formulaires ---------------------------------------------------------- */ .champ { margin-bottom: 1.1rem; } .champ label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--marine); } .champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--bordure-champ); border-radius: var(--rayon); min-width: 0; font-size: 16px; /* ≥16px : évite le zoom iOS */ font-family: inherit; color: var(--marine); background: var(--blanc); transition: var(--transition); } .champ textarea { min-height: 120px; resize: vertical; } .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--camel); outline: none; box-shadow: 0 0 0 3px rgba(187,150,113,.18); } .champ input[aria-invalid="true"] { border-color: #c0392b; } .champ .erreur { color: #c0392b; font-size: .8rem; margin-top: .3rem; display: none; } .champ input[aria-invalid="true"] ~ .erreur { display: block; } .grille-champs { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); } .honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .case-rgpd { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ardoise); } /* WCAG 2.5.8 : les cases natives font 13x13 par defaut. */ .champ input[type="checkbox"], .champ input[type="radio"], .case-rgpd input { width: 24px; height: 24px; min-height: 0; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--camel); } /* Extras du tunnel : cartes compactes (nom + prix sur une ligne, description en dessous). La pastille de sélection ne prend plus de colonne : elle se pose en coin et n'apparaît qu'une fois cochée. */ .chips-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .chip-extra { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--bordure-champ); border-radius: 10px; cursor: pointer; transition: var(--transition); } .chip-extra:hover { border-color: var(--camel); } .chip-extra.coche { border-color: var(--camel); background: rgba(187,150,113,.07); } .chip-extra:has(input:checked) { border-color: var(--camel); background: rgba(187,150,113,.07); } .chip-extra input { position: absolute; opacity: 0; } .chip-extra:has(input:focus-visible) { outline: 2px solid var(--camel); outline-offset: 3px; } .chip-extra__tete { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .chip-extra__tete strong { color: var(--marine); font-size: .82rem; line-height: 1.25; } .chip-extra__prix { font-family: var(--serif); color: var(--marine); font-size: .8rem; white-space: nowrap; } .chip-extra__desc { color: var(--ardoise); font-size: .7rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chip-extra__check { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--camel); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: var(--transition); } .chip-extra.coche .chip-extra__check { opacity: 1; transform: none; } .chip-extra:has(input:checked) .chip-extra__check { opacity: 1; transform: none; } /* --- Bandeau cookies ------------------------------------------------------ */ .cookies { position: fixed; inset-inline: 1rem auto; bottom: 1rem; z-index: var(--z-cookies); background: var(--marine); color: var(--sable); border-radius: var(--rayon); padding: 1rem 1.1rem; box-shadow: var(--ombre-fort); max-width: min(340px, calc(100vw - 2rem)); display: none; } .cookies.visible { display: block; } .cookies p { color: rgba(246,241,234,.85); font-size: .84rem; line-height: 1.45; margin-bottom: .8rem; } .cookies__actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* --- Footer --------------------------------------------------------------- */ .pied { background: var(--marine); color: rgba(246,241,234,.72); padding-block: 3rem 1.5rem; } /* Deux règles écrites pour les fonds clairs fuitaient dans le pied marine et y imposaient l'ardoise, soit 3,20:1 — sous le seuil AA. La couleur voulue est celle de `.pied` ci-dessus (7,76:1) : on la laisse redescendre. */ .pied p, .pied .accordeon__corps > div { color: inherit; } .pied a:hover { color: var(--camel); } .pied__grille { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } /* Le titre de colonne enveloppe désormais le bouton d'accordéon (motif WAI-ARIA) : un

à l'intérieur d'un