/* -------------------------------------------------------------------------- */ /* Les polices */ /* -------------------------------------------------------------------------- */ /* site.css declare bien les @font-face (Inter et Playfair Display, servies * depuis assets/fonts/), mais les VARIABLES qui les nomment etaient posees * par Next.js sur une classe generee (`.__variable_xxxx`) appliquee au * . Cette classe n'existe pas ici, donc les variables etaient vides et * tout le site tombait sur la police systeme. * * Mesure du symptome : `font-family` calculee = `-webkit-standard` au lieu de * Playfair sur les titres. On les redeclare donc a la racine. * * Les noms doivent correspondre EXACTEMENT aux @font-face de site.css : * « Inter » / « Inter Fallback » et « Playfair Display » / * « Playfair Display Fallback ». Les variantes « Fallback » sont des polices * systeme ajustees par Next pour que le texte ne saute pas quand la vraie * police arrive. */ :root { --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif; --font-serif: "Playfair Display", "Playfair Display Fallback", Georgia, serif; --font-heading: var(--font-serif); } /* * COMPLEMENTS AU STYLE COMPILE. * * assets/site.css est la feuille du site Next.js, reprise telle quelle. Elle * ne contient QUE les classes utilitaires que l'ancien site utilisait. Ce * fichier-ci ajoute le peu qui manque, et rien d'autre. * * Regle : avant d'ajouter ici, verifier que la classe n'existe pas deja dans * site.css. Deux definitions de la meme chose finissent toujours par diverger. */ /* -------------------------------------------------------------------------- */ /* Le menu telephone, en
natif */ /* -------------------------------------------------------------------------- */ /* L'ancien site ouvrait son tiroir en React. Ici c'est l'element
* du navigateur : il s'ouvre sans une ligne de JavaScript, donc il ne peut * pas rester ferme si un script echoue. C'est la meme regle qui a resolu * l'ecran noir sur iPhone en aout : rien d'essentiel ne depend du script. */ .xv-menu > summary::-webkit-details-marker { display: none; } .xv-menu > summary::marker { content: ""; } /* Le trait du bouton burger, dessine en CSS plutot qu'importe : une police * d'icones ou une image pour un detail de 16 px coute une requete reseau. */ .xv-burger, .xv-burger::before, .xv-burger::after { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } .xv-burger::before, .xv-burger::after { content: ""; position: relative; } .xv-burger::before { top: -5px; } .xv-burger::after { top: 3.5px; } /* Ouvert, les trois traits deviennent une croix. */ .xv-menu[open] > summary .xv-burger { background: transparent; } .xv-menu[open] > summary .xv-burger::before { transform: translateY(5px) rotate(45deg); } .xv-menu[open] > summary .xv-burger::after { transform: translateY(-3.5px) rotate(-45deg); } /* Le bouton du menu doit passer AU-DESSUS du panneau qu'il ouvre, sinon on * ne peut plus le refermer. */ .xv-menu[open] > summary { position: relative; z-index: 50; } /* UNE SEULE offre de reservation a la fois. Menu ouvert, la barre d'action * fixe disparait : sans cette regle le visiteur voit DEUX boutons * « Reserver » en meme temps, celui du menu et celui de la barre. Defaut * signale par Xavier sur l'ancien site, corrige de la meme facon. */ body:has(.xv-menu[open]) .xv-barre-action { display: none; } /* Le defilement de la page dessous est bloque quand le menu est ouvert. */ body:has(.xv-menu[open]) { overflow: hidden; } /* Les liens du menu telephone : grands, espaces, 44 px de zone tactile. */ .xv-menu-mobile li { border-bottom: 1px solid color-mix(in oklab, var(--ivoire) 10%, transparent); } .xv-menu-mobile a { display: block; padding: 1.25rem 0; font-family: var(--font-serif); font-size: 1.875rem; letter-spacing: -0.02em; line-height: 1.1; } /* -------------------------------------------------------------------------- */ /* La navigation sur ecran */ /* -------------------------------------------------------------------------- */ .menu-item > a { position: relative; display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; color: color-mix(in oklab, var(--ivoire) 80%, transparent); transition: color 0.2s ease; } .menu-item > a:hover { color: var(--ivoire); } /* Le filet qui se deploie sous le lien au survol. */ .menu-item > a > span::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; height: 1px; width: 0; background: currentColor; transition: width 0.5s ease; } .menu-item > a:hover > span::after { width: 100%; } /* La page courante se distingue, sinon on ne sait pas ou on est. */ .menu-item.current-menu-item > a { color: var(--bronze); } .xv-menu-pied a { display: inline-flex; min-height: 44px; align-items: center; padding: 0.5rem 0; color: color-mix(in oklab, var(--ivoire) 75%, transparent); transition: color 0.2s ease; } .xv-menu-pied a:hover { color: var(--bronze); } /* -------------------------------------------------------------------------- */ /* Le contenu ecrit par Xavier dans l'editeur WordPress */ /* -------------------------------------------------------------------------- */ /* L'ancien site avait un composant par type de bloc. Ici Xavier ecrit dans * l'editeur natif, et le HTML qui en sort (h2, p, ul, blockquote) doit * ressembler au reste du site sans qu'il ait a penser aux classes. */ .xv-prose > * + * { margin-top: 1.5rem; } .xv-prose h2 { margin-top: 3.5rem; font-family: var(--font-serif); font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--ivoire); } .xv-prose h3 { margin-top: 2.5rem; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.2; color: var(--ivoire); } .xv-prose ul, .xv-prose ol { padding-left: 0; list-style: none; } .xv-prose li { position: relative; padding-left: 1.75rem; margin-top: 0.75rem; } /* Le tiret bronze des listes, la signature visuelle du site. */ .xv-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.75rem; height: 1px; background: var(--bronze); } .xv-prose ol { counter-reset: xv; } .xv-prose ol > li::before { counter-increment: xv; content: counter(xv, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--bronze); } .xv-prose a { color: var(--ivoire); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--bronze) 50%, transparent); transition: color 0.2s ease; } .xv-prose a:hover { color: var(--bronze); } .xv-prose strong { color: var(--ivoire); font-weight: 500; } .xv-prose blockquote { border-left: 2px solid color-mix(in oklab, var(--bronze) 60%, transparent); padding-left: 1.5rem; color: color-mix(in oklab, var(--ivoire) 80%, transparent); } /* Les tableaux debordent sur telephone si on ne les fait pas defiler * eux-memes. Regle du site : le corps de la page ne defile JAMAIS * horizontalement. */ .xv-prose figure.wp-block-table { overflow-x: auto; } .xv-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .xv-prose th, .xv-prose td { border-bottom: 1px solid color-mix(in oklab, var(--ivoire) 10%, transparent); padding: 0.75rem 1rem 0.75rem 0; text-align: left; } .xv-prose th { color: var(--bronze); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; } /* Les questions frequentes, en
natif comme sur l'ancien site : le * texte des reponses vit dans le HTML meme replie, donc Google l'indexe et * les moteurs de reponse peuvent le citer. Un accordeon en JavaScript * cacherait ce contenu aux robots. */ .xv-prose details { border-top: 1px solid color-mix(in oklab, var(--ivoire) 10%, transparent); padding: 1.25rem 0; } .xv-prose summary { cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.35; color: var(--ivoire); } .xv-prose summary::-webkit-details-marker { display: none; } /* -------------------------------------------------------------------------- */ /* Le curseur */ /* -------------------------------------------------------------------------- */ /* Tailwind v4 a retire cette regle de son preflight. Sur l'ancien site, * AUCUN des 43 liens de l'accueil n'affichait le curseur « main » : ils * fonctionnaient, mais rien ne disait au visiteur qu'ils etaient cliquables. * Un element qui marche mais ne se signale pas est casse de son point de vue. */ a[href], button:not(:disabled), summary, label[for], [role="button"] { cursor: pointer; } button:disabled { cursor: not-allowed; } /* -------------------------------------------------------------------------- */ /* Le pied de page sur telephone */ /* -------------------------------------------------------------------------- */ /* Demande de Xavier le 2026-09-04 : « en version mobile, les menus NAVIGATION * et SERVICES doivent etre l'un a cote de l'autre, a la meme hauteur ». * * ⚠️ Pourquoi en CSS et pas avec une classe Tailwind : la feuille compilee * ne contient QUE les classes que l'ancien site utilisait. `col-span-2` * n'y est pas, donc l'ajouter au balisage ne produit rien. C'est le piege * numero un de ce theme, et il ne previent jamais : la classe est bien dans * le HTML, elle ne fait simplement rien. * * La grille du pied de page a trois enfants, dans cet ordre : * 1. l'identite (nom, bio, coordonnees, badge Google) * 2. Navigation * 3. Services */ @media (max-width: 767px) { .xv-pied-grille { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: 2.5rem; } /* L'identite prend toute la largeur : la bio et l'adresse deviennent illisibles sur une demi-colonne de 170 px. */ .xv-pied-grille > *:nth-child(1) { grid-column: 1 / -1; } .xv-pied-grille > *:nth-child(2) { grid-column: 1; } .xv-pied-grille > *:nth-child(3) { grid-column: 2; } /* Les deux menus commencent a la meme hauteur, meme si l'un a plus d'entrees que l'autre. */ .xv-pied-grille > *:nth-child(2), .xv-pied-grille > *:nth-child(3) { align-self: start; } /* Une entree sur deux lignes ne doit pas coller a la suivante. */ .xv-pied-grille ul a { line-height: 1.35; } }