/* -------------------------------------------------------------------------- */ /* 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; } } /* -------------------------------------------------------------------------- */ /* Respiration du site : moins d'air, et plus de barres grises */ /* -------------------------------------------------------------------------- */ /* Demande de Xavier, le 2026-09-04 : « diminue l'espacement entre les * differents paragraphes » et « des fois il peut y avoir des barres grises * qui divisent les paragraphes, il faut corriger cette anomalie ». */ /* 1. LES BARRES GRISES DES QUESTIONS. C'ETAIT MOI. * * Mesure du 2026-09-04, ancien site contre WordPress, meme page, meme * telephone : la FAQ passait de 9 filets a 19, dont 17 poses sur les *
. L'ancien site n'en avait AUCUN sur ses questions. * * Il separait ses questions par le rembourrage et par un chevron bronze qui * pivote a l'ouverture, jamais par un trait. Verifie dans le balisage * archive :
sans bordure, en flex avec * py-6 et un chevron en border-b/border-r rotate-45 qui devient rotate-225 * a l'ouverture. * * On retire donc le trait et on rend le chevron, qui manquait aussi : sans * lui, rien ne disait qu'une question s'ouvrait. */ .xv-prose details { border-top: 0; padding: 0; } .xv-prose summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; } /* Le chevron, dessine en CSS. Deux bordures et une rotation : pas d'image, * pas de police d'icones, pas une requete de plus pour 10 pixels. */ .xv-prose summary::after { content: ""; flex: none; margin-top: 0.45rem; width: 0.6rem; height: 0.6rem; border-right: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); transform: rotate(45deg); transition: transform 0.3s ease; } .xv-prose details[open] summary::after { transform: rotate(225deg); } .xv-prose details > *:not(summary) { padding-bottom: 1.15rem; } /* 2. MOINS D'AIR ENTRE LES BLOCS. * * Les grandes sections respiraient sur 128 px en haut ET en bas : deux * sections voisines mettaient 256 px de vide entre deux paragraphes sur un * telephone, soit un tiers d'ecran pour ne rien dire. * * ON NE TOUCHE QUE LES GRANDES. Un premier essai visait [class*="py-"], ce * qui attrapait aussi les petites : une section en py-10 (40 px) se * retrouvait A 72 px, donc AGRANDIE. Mesure a l'appui sur l'accueil. On cible * donc chaque classe nommement, avec ~= qui exige le mot entier. * * Specificite : section[class~="py-32"] vaut (0,1,1) et bat la classe * Tailwind (0,1,0), y compris ses variantes sm: et lg: qui vivent dans des * media queries. Aucun !important necessaire. * * Reduction d'environ 37 %, proportionnelle : un grand ecran garde plus d'air * qu'un telephone, sinon la page parait tassee au bureau. */ main section[class~="py-32"] { padding-top: 5rem; padding-bottom: 5rem; } /* 128 -> 80 */ main section[class~="py-24"] { padding-top: 4rem; padding-bottom: 4rem; } /* 96 -> 64 */ main section[class~="pt-28"] { padding-top: 5rem; } /* 112 -> 80 */ main section[class~="pb-14"] { padding-bottom: 3rem; } /* 56 -> 48 */ @media (min-width: 640px) { main section[class~="sm:py-44"] { padding-top: 7rem; padding-bottom: 7rem; } /* 176 -> 112 */ main section[class~="sm:py-32"] { padding-top: 5.5rem; padding-bottom: 5.5rem; } /* 128 -> 88 */ main section[class~="sm:pt-44"] { padding-top: 7rem; } main section[class~="sm:pb-24"] { padding-bottom: 4rem; } /* 96 -> 64 */ } @media (min-width: 1024px) { main section[class~="lg:py-56"] { padding-top: 9rem; padding-bottom: 9rem; } /* 224 -> 144 */ main section[class~="lg:py-40"] { padding-top: 7rem; padding-bottom: 7rem; } /* 160 -> 112 */ } /* Les petites sections (py-16, py-12, py-10) ne sont PAS touchees : elles * respiraient deja juste, et les reduire collerait les blocs. */ /* ⚠️ Le calculateur est EXCLU : son premier ecran est un min-h-[100svh] * centre, dont le rembourrage sert a l'ecarter des deux barres fixes. Le * reduire ferait glisser la question sous la barre de navigation. */ main section.min-h-\[100svh\] { padding-top: 6rem; padding-bottom: 7rem; } /* Le texte long : les paragraphes se suivaient de trop loin. */ .xv-prose p + p { margin-top: 1.15rem; } .xv-prose h2 { margin-top: 2.75rem; } .xv-prose h3 { margin-top: 1.9rem; } /* -------------------------------------------------------------------------- */ /* Plus aucune ligne grise qui coupe le texte */ /* -------------------------------------------------------------------------- */ /* Xavier, le 2026-09-04 : « les lignes grises je ne veux plus les voir, comme * la ligne entre le paragraphe "Le courtage hypothecaire, comme il devrait * etre." et "Trois situations, une seule methode." » * * Inventaire mesure sur les 9 pages avant de toucher a quoi que ce soit : * 19x
border-t border-ivoire/10 <- celle qu'il nomme * 5x
border-t border-ivoire/10 * 3x
    border-t border-ivoire/10 * 1x
    border-y border-ivoire/10 * 1x
    border-t border-ivoire/12 * 6x grilles en gap-px sur fond ivoire, qui fabriquent un filet entre * chaque element de liste (« Zero frais pour vous » / « Plus de 20 * institutions », les etapes, les trois chiffres) * * CE QU'ON GARDE, et pourquoi : une bordure qui ENTOURE n'est pas une ligne * qui COUPE. Restent donc les cartes de service, les champs du formulaire, * la pastille Google, les boutons Oui/Non, et le souligne des liens * telephone (border-b border-current, qui est un souligne de texte). * * On neutralise la COULEUR, pas la largeur : le trait disparait sans que rien * ne bouge d'un pixel. Mettre la largeur a zero decalerait 19 sections. */ /* ⚠️ `border-y` N'EST PAS dans cette liste, et c'est voulu. Xavier, le * 2026-09-04 : « les seuls traits qu'il faut garder, c'est les traits de * par-dessus et en dessous des preteurs ». La bande des preteurs (« Magasinage * actif aupres de Banque Nationale... ») est le SEUL element du site en * border-y : ne pas le viser suffit a le garder, sans exception a ecrire. * Si un jour un autre bloc recevait border-y, il garderait ses traits lui * aussi : le verifier avant de le poser. */ main [class~="border-t"][class*="border-ivoire"], main [class~="border-b"][class*="border-ivoire"] { border-top-color: transparent; border-bottom-color: transparent; } /* LES CONTOURS DE BLOCS partent aussi, meme demande du meme jour. On ne vise * QUE les blocs de contenu : article, div, ul, ol. Restent volontairement * intacts, parce qu'ils ne sont pas decoratifs mais fonctionnels : * · ,