/* Victory salon de coiffure — 150 rue Richelieu, Saint-Jean-sur-Richelieu IDENTITÉ : or sur noir — et ce n'est pas une direction inventée. Leur propre publication de marque (celle du « VICTORY / SALON DE COIFFURE » en lettres dorées) donne un fond mesuré à #0b0c0b et un lettrage dont l'or moyen est #a58f67, le point haut #decba1. Le salon porte d'ailleurs un tablier noir à logo doré sur les photos de leur équipe. On suit leur marque, on ne l'habille pas. Palette mesurée, chaque paire de texte vérifiée sur le fond où elle sert : --noir #0B0C0B fond principal (leur noir, mesuré) --panneau#1C1A13 surface élevée --or #DBB643 ACCENT unique 10,06:1 sur le noir --champ #DECBA1 or clair 12,28:1 --ivoire #F4F0E6 texte courant 17,22:1 --gris #A69A8A texte secondaire 7,10:1 (6,31:1 sur panneau) encre sur or : 9,76:1 — le bouton doré porte du texte encre, jamais du blanc. L'ACCENT A ÉTÉ ÉCLAIRCI le 2026-11-13, à la demande. L'or mesuré sur leur marque (#a58f67 moyen) est un or de LETTRAGE : il vit en aplats épais sur leurs visuels. Transposé en texte de 13 px et en filets de 1 px sur le noir, il lisait sourd. L'accent passe donc de #C9A227 à #DBB643 — même teinte (45,6°), même saturation, seule la CLARTÉ monte (46 % -> 56 %). Le contraste monte des deux côtés à la fois, accent sur noir ET encre sur l'or, donc aucun arbitrage n'a été nécessaire. #C9A227 reste dans la palette comme --or-f, l'état survolé : un bouton qui s'assombrit au survol est le sens attendu, et la valeur était déjà mesurée. AFFICHE : Prata. Leur logo a un contraste de trait mesuré de 6,00:1 (gras 42 px / fin 7 px). Prata rend « VICTORY » à 6,25:1, le plus proche des neuf didones testées — Bodoni Moda 400 donnait 8,00:1, cheveux plus fins que la marque. Prata n'a qu'un poids : la hiérarchie passe par la TAILLE. PHOTOS : les six images sont les leurs, détourées de leurs propres publications publiques (voir RAPPORT ci-dessous et img/photos/). Plus aucun aplat de couleur ne tient lieu de photo. */ :root { --noir: #0B0C0B; --noir-2: #15140F; --panneau: #1C1A13; --or: #DBB643; --or-f: #C9A227; /* or actif, plus foncé au survol */ --champ: #DECBA1; --or-pale: #EBDCB6; --ivoire: #F4F0E6; --gris: #A69A8A; --encre: #12100B; /* texte posé sur l'or */ --trait: color-mix(in srgb, var(--ivoire) 14%, transparent); --trait-or:color-mix(in srgb, var(--or) 46%, transparent); --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --affiche: 'Prata', 'Times New Roman', serif; --marge: clamp(1.25rem, 5vw, 5rem); --bloc: clamp(4rem, 9vw, 8rem); /* Gouttière INTÉRIEURE de la bande de chiffres : l'air entre un filet vertical et le texte qui le suit. Distincte de --marge, qui est la marge de page : la même valeur des deux côtés aurait fait déborder la troisième colonne hors de l'écran à 1440 px (mesuré). */ --gouttiere: clamp(1.1rem, 3vw, 2.5rem); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--noir); color: var(--ivoire); font-family: var(--sans); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.6; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-family: var(--affiche); font-weight: 400; line-height: 1.06; letter-spacing: -0.004em; } /* « balance » empêche un titre de finir sur un mot seul : mesuré au navigateur, sans ça deux titres de la page finissaient orphelins. */ h1, h2 { text-wrap: balance; } p, li { text-wrap: pretty; } a { color: inherit; } /* Anneau de focus à l'or : c'est « outline-offset: 3px » qui le pose 3 px À L'EXTÉRIEUR du bouton, donc sur le fond de page, où il mesure 10,06:1 — visible même quand l'élément visé est doré lui-même. Collé au doré il serait à 1,00:1 : c'est l'offset qui le sauve, pas sa couleur. */ :focus-visible { outline: 3px solid var(--or); outline-offset: 3px; } .saut { position: absolute; left: -9999px; background: var(--or); color: var(--encre); padding: 0.75rem 1rem; z-index: 60; } .saut:focus { left: 1rem; top: 1rem; } /* ------------------------------------------------------------------ en-tête */ .tete { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: 1rem var(--marge); } /* Leur VRAIE marque : le V formé par une paire de ciseaux ouvertes, « VICTORY » puis « SALON DE COIFFURE ». Détourée de leur propre image de profil, en blanc + alpha — posée telle quelle sur le noir, où elle tient son contraste sans qu'on touche à sa couleur, qui est strictement monochrome (0 pixel saturé sur 656 910 dans l'original). Le fichier est un recadrage serré (724x240 réels) : le carré 751x751 du favicon laisserait la marque à 10 px dans un en-tête de 40 px. Mesuré, pas supposé. */ .sigle { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .sigle img { display: block; height: 40px; width: auto; } @media (max-width: 520px) { .sigle img { height: 32px; } } .tete nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.4rem, 2vw, 1.5rem); } .tete nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 0.92rem; color: var(--ivoire); } /* Le bouton doré garde son texte encre (8,10:1). La règle de navigation ci-dessus l'écrasait en clair : c'est exactement le défaut qui, sur la version précédente, avait fait tomber le bouton à 1,09:1. Mesuré. */ .tete nav a.bouton { color: var(--encre); } .tete nav a:hover { color: var(--champ); } .tete nav a.tel { display: none; } .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7rem 1.35rem; border-radius: 2px; background: var(--or); color: var(--encre); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 0; letter-spacing: 0.01em; transition: background 150ms ease, transform 150ms ease; } .bouton:hover { background: var(--or-f); } .bouton:active { transform: translateY(1px); } .bouton.creux { background: transparent; color: var(--ivoire); box-shadow: inset 0 0 0 1.5px var(--trait-or); } .bouton.creux:hover { background: var(--or); color: var(--encre); box-shadow: none; } /* ------------------------------------------------------------- ouverture Deux colonnes : le titre à gauche, LEUR VITRINE à droite. La photo de façade est un portrait 675x843 — la poser en fond pleine largeur l'aurait coupée au milieu du mot « VICTORY ». Dans un cadre 4/5 elle reste entière. Sous 62 rem, elle passe sous le titre. */ .vitrine { position: relative; overflow: hidden; padding: clamp(7rem, 14vw, 11rem) var(--marge) clamp(3.5rem, 8vw, 6rem); background: radial-gradient(75% 60% at 88% 4%, rgba(219,182,67,0.16) 0%, rgba(11,12,11,0) 62%), radial-gradient(55% 45% at 4% 100%, rgba(219,182,67,0.07) 0%, rgba(11,12,11,0) 70%), var(--noir); } /* Filet doré vertical — la règle qui sépare le titre de la photo. Structure, pas décoration : elle marque les deux colonnes. */ .ouv { position: relative; max-width: 70rem; display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 62rem) { .ouv { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; } } /* Le chapô de l'ouverture est visé par SA classe, pas par « .ouv > div > p ». Ce sélecteur-là (0,1,2) battait « .anneau » (0,1,0) et écrasait donc le badge de note : il perdait sa taille (0,85rem -> 1,15rem), sa couleur (ivoire -> gris) ET sa marge basse (2,1rem -> 0). Constaté à la mesure, pas déduit : le CSS demandait 2,1rem, le navigateur rendait 0px. */ .anneau { /* display:flex et non inline-flex : une boîte de niveau INLINE ignore ses marges verticales, donc la marge basse ne créait aucun espace même une fois la collision de sélecteurs corrigée. En bloc avec width:fit-content, le badge garde la largeur de son texte ET repousse le titre de 2,1rem. */ display: flex; width: fit-content; align-items: center; gap: 0.5rem; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ivoire); border: 1px solid var(--trait-or); border-radius: 2px; padding: 0.4rem 0.9rem; margin-bottom: 2.1rem; flex-wrap: wrap; row-gap: 0.15rem; } /* La note ne doit JAMAIS se couper au milieu de « 4,8 sur 5 » : sur un téléphone elle se repliait en « 4,8 sur » / « 5 », constaté sur la capture à 390 px. On garde donc le groupe soudé, et les séparateurs avec lui. */ .anneau b { color: var(--or); font-weight: 600; white-space: nowrap; } /* L'étoile de la note (2026-11-13, à la demande : « add a star next to the 4,8 sur 5 »). Quelques décisions, plutôt que les défauts : 1. UNE étoile, pas cinq. Cinq est la convention des widgets d'avis, mais cinq étoiles à 13,6 px de corps font une bande de 68 px qui dédouble la largeur du badge et le fait passer à deux lignes au téléphone — or le badge tient sur une ligne depuis qu'on l'a raccourci. Une seule dit « noté » et laisse le chiffre faire le travail. 2. Elle prend --or (celle du chiffre), PAS le jaune étoile de Google (#FBBC04) : ce jaune n'existe nulle part dans la palette et ferait une tache tiède sur un noir à 10:1 de contraste. Elle hérite donc de currentColor, ce qui la garde synchronisée si l'accent change encore. 3. Dimensionnée sur la TAILLE DU TEXTE (0,92em, calée en bas), pas sur une grille d'icônes : c'est un caractère typographique dans une phrase, pas une icône d'interface posée dans une boîte. 4. aria-hidden : le texte « 4,8 sur 5 » porte déjà tout le sens. Sans ça, un lecteur d'écran annonce une image décorative devant chaque note. Le viewBox est ajusté (étoile à 5 branches, pointe en haut) : le tracé approche les bords, donc 0,92em rend la même masse optique qu'un « 4 ». */ .etoile { width: 0.92em; height: 0.92em; flex: none; fill: currentColor; margin-right: 0.34em; vertical-align: -0.08em; } /* Le séparateur est INSIDE le groupe, pas entre les groupes : quand le badge se repliait, un « · » restait orphelin en fin de ligne 1 (« … 143 avis Google · ») avant que le groupe suivant n'ouvre la ligne 2 — constaté au rendu à 390 px. Soudé à ce qu'il introduit, il descend avec son texte ou ne se coupe pas du tout. LE 2026-11-13, le troisième groupe du badge (l'ancienneté rue Richelieu) a été RETIRÉ à la demande du Commander : le badge ne porte plus que la note et le nombre d'avis, ce qui le fait tenir sur UNE ligne au téléphone. Le mécanisme ci-dessus est conservé tel quel — il protège le groupe qui reste. */ .anneau .grp { white-space: nowrap; } .anneau .sep { color: var(--gris); margin-right: 0.35rem; } /* Taille MESURÉE, pas choisie à l'œil — et surtout liée à la COLONNE, jamais au viewport. Le titre est fait de trois lignes voulues. À 5,6 rem, la troisième se repliait en « vous sortez » / « coiffé. » : le titre passait à quatre lignes dont une seule portait « coiffé. », constaté sur la capture à 1440 px. Mesuré ligne par ligne (Range, qui seul voit les lignes) : la plus longue demande 7,94 px de large par pixel de corps. D'où le plafond à 12 cqw. Une première correction en `vw` ne suffisait pas : à 1024 px le titre prenait 73 px dans une colonne de 501 px et se repliait encore. LE 2026-11-13, le titre a changé de TEXTE : il dit maintenant le métier et la ville (« Salon de coiffure / et barbier / Saint-Jean-sur-Richelieu ») au lieu d'une seule ligne d'accroche, qui passe désormais en .accroche sous le titre. La ligne la plus longue est maintenant « Saint-Jean-sur-Richelieu », et c'est ELLE qui commande : le nom de ville se replie en deux lignes (« Saint-Jean-sur- » / « Richelieu ») dès qu'il n'a plus la place, donc le titre passait de trois lignes à quatre — constaté, pas supposé, à 390, 1100, 1440 et 1920 px. Mesuré en Range, span par span : il faut 10,6 px de large par pixel de corps pour ce mot à lui seul (655 px à 57,6 px de corps). D'où le plafond à 8,4 cqw / 6,5 vw / 3,25 rem, qui laisse 4 % de marge au pire cas (à 1440 px : 584 px de mot dans 612 px de colonne). */ .ouv h1 { font-size: clamp(1.6rem, 6.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.018em; } .ouv > div { container-type: inline-size; } @supports (font-size: 1cqw) { .ouv h1 { font-size: clamp(1.6rem, 8.4cqw, 3.25rem); } } .ouv h1 span { display: block; } /* Les lignes du titre montent l'une après l'autre : une seule fois, au chargement. Le padding + marge négative rendent au masque la place des jambages (le « y », le « ç ») sans changer l'interligne : sans ça, overflow:hidden les coupe. */ .leve { overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } .leve > span { display: block; transform: translateY(104%); animation: lever 900ms cubic-bezier(.16,.86,.24,1) forwards; } .leve:nth-child(2) > span { animation-delay: 110ms; } .leve:nth-child(3) > span { animation-delay: 220ms; } @keyframes lever { to { transform: none; } } .ouv .chapo { max-width: 46ch; color: var(--gris); margin: 1.6rem 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem); } /* Les noms des propriétaires restent soudés : « Vicky et » finissait une ligne et « Gabriel » ouvrait la suivante — vu au rendu à 1440 px. Ce sont les deux personnes qui répondent au téléphone ; leur nom coupé en deux se lit mal. */ .ouv .soude { white-space: nowrap; } /* Même défaut, trouvé au RENDU le 2026-11-13 (2e passe de textes) et pas au calcul : « coupe-chou » se coupait après le trait d'union (« coupe- » / « chou ») dans la carte Barbier, et « Dites-le » dans la légende d'équipe. Un mot composé coupé à son trait d'union est un défaut typographique, pas un détail : on lit « coupe » puis « chou » comme deux mots. Classe générale, puisqu'elle sert dans deux bandes différentes. */ .soude { white-space: nowrap; } /* L'accroche du salon (« Vous entrez avec une idée, vous sortez coiffé. ») occupait le

; elle passe sous lui, en .accroche, parce que le

doit maintenant dire le métier et la ville. Elle garde la même famille d'affiche que le titre — c'est la voix du salon, pas du corps de texte — et descend d'un cran en taille pour que la hiérarchie reste lisible. */ .ouv .accroche { font-family: var(--affiche); color: var(--champ); font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.3; /* Marge MESURÉE, pas choisie : à 1,1rem l'accroche collait au titre (11,4 px d'écart réel) alors que les trois autres respirations du hero font 25,6, 32 et 33,6 px. À 1,5rem elle tombe à 18 px, ce qui la garde soudée au titre — c'est la même voix — sans l'y écraser. */ margin: 1.5rem 0 0; /* PAS de max-width serré ici. « Vous entrez avec une idée, vous sortez coiffé. » a besoin de 546 px à 25,6 px de corps ; un plafond à 30ch la cassait à 534 px, donc la ligne se brisait après « vous » et laissait « sortez coiffé. » orphelin tout seul. Mesuré : la phrase tient sur une ligne dès qu'on ne l'étrangle pas. La colonne du hero la borne déjà. */ max-width: 100%; } .ouv .actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } /* Le cadre de la vitrine : filet doré + la photo, sans arrondi générique. */ .cadre { position: relative; } /* LE FILET PASSE DERRIÈRE LA PHOTO (2026-11-13, à la demande). Avant : le ::after était peint APRÈS l'image dans l'ordre du document, donc ses deux filets du haut et de la gauche tombaient SUR la photo — on les voyait traverser les cheveux et le mur au-dessus de l'épaule. Le cadre n'était pas un cadre, c'était une rayure sur l'image. Maintenant l'image est empilée au-dessus (z-index:1) et le filet en dessous (z-index:0). La géométrie n'a pas bougé d'un pixel : le filet reste décalé de 10 px vers le bas-droite, sauf que ses deux filets intérieurs sont désormais CACHÉS par la photo et que seuls les deux qui dépassent — bas et droite — restent visibles. C'est ce qui fait lire « cadre derrière » au lieu de « trait devant ». On n'utilise PAS z-index négatif : il sortirait du contexte d'empilement du cadre et passerait sous le fond de la section. Deux valeurs positives relatives au même parent suffisent, et c'est stable quel que soit le fond. */ .cadre img { display: block; width: 100%; height: auto; position: relative; z-index: 1; } .cadre::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--trait-or); pointer-events: none; z-index: 0; } @media (max-width: 61.99rem) { .cadre::after { inset: 8px -8px -8px 8px; } } /* bandeau de chiffres, posé sur le bord de la section. La règle d'origine posait « padding: 1.4rem var(--marge) 1.4rem 0 » : aucune marge à GAUCHE, donc le texte des colonnes 2 et 3 commençait collé au filet vertical — mesuré à 0,0 px d'écart, et la 3e cellule passait à x = 0 sur téléphone. La bande est maintenant rentrée dans la marge de page et chaque cellule reçoit la même gouttière des deux côtés : le filet a de l'air à sa gauche comme à sa droite. Les filets sont dessinés par un box-shadow INTÉRIEUR à gauche de chaque cellule, et non plus par « gap: 1px » sur un fond --trait : avec une marge de page en padding, le fond du conteneur se serait peint aussi sous ce padding et aurait affiché deux bandes claires au bord de l'écran. La cellule qui ouvre une rangée n'a ni filet ni gouttière à gauche : elle s'aligne sur la marge de page, comme le titre au-dessus. */ .chiffres { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); background: var(--noir); border-top: 1px solid var(--trait); padding-left: var(--marge); padding-right: var(--marge); } .chiffres div { background: var(--noir); padding: 1.4rem var(--gouttiere); box-shadow: inset 1px 0 0 var(--trait); } .chiffres div:first-child { padding-left: 0; box-shadow: none; } /* La grille passe à DEUX colonnes sous 31rem (mesuré : 3 colonnes de 9rem + gouttières ne tiennent plus). La 3e cellule ouvre alors la 2e rangée : elle doit s'aligner elle aussi sur la marge, sinon elle repart à x = 0. */ @media (max-width: 31rem) { .chiffres div:nth-child(odd) { padding-left: 0; box-shadow: none; } } .chiffres b { font-family: var(--affiche); font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 400; display: block; line-height: 1.05; color: var(--champ); } .chiffres span { display: block; margin-top: 0.5rem; color: var(--gris); font-size: 0.88rem; } /* --------------------------------------------------------------- services */ .bande { padding: var(--bloc) var(--marge); } .bande.sombre { background: var(--noir-2); } .entete-bande { margin-bottom: clamp(1.8rem, 4vw, 3rem); } .entete-bande h2 { font-size: clamp(1.75rem, 4.2vw, 3.1rem); color: var(--or-pale); } .entete-bande p { color: var(--gris); max-width: 50ch; margin: 0.9rem 0 0; } /* Six volets, un par métier : c'est la structure, pas une grille de cartes. Le filet doré en tête de chacun est une règle de service — il dit « ceci est une entrée de la liste », il n'illustre rien. LE NOMBRE DE COLONNES EST FIXÉ, PAS LAISSÉ À auto-fit. Avec SIX volets, « auto-fit minmax(14rem, 1fr) » donnait 5 colonnes à 1440 px (donc 5 + 1 orpheline) et 7 colonnes à 1920 px (donc 6 + une colonne vide) — mesuré à huit largeurs. Une grille qui doit rester lisible sur un nombre pair de volets ne peut pas laisser le navigateur choisir : on impose 1, 2 ou 3 colonnes, qui divisent 6 exactement (2 rangées de 3 au maximum). Pas de plafond de largeur : la grille suit la marge de la page, comme le reste de la section. Un plafond la laissait s'arrêter à 1118 px dans un écran de 1440, donc 277 px de vide à droite — la page se lisait « calée à gauche » au lieu d'alignée comme les autres blocs. */ .volets { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); } @media (min-width: 40rem) { .volets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56rem) { .volets { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .volet { position: relative; padding: 1.6rem 1.4rem 1.7rem; background: linear-gradient(180deg, rgba(244,240,230,0.05), rgba(244,240,230,0.015)); border: 1px solid var(--trait); border-radius: 2px; transition: border-color 200ms ease, transform 200ms ease, background 200ms ease; } .volet:hover { border-color: var(--trait-or); transform: translateY(-3px); } .volet h3 { font-size: 1.32rem; margin-bottom: 0.55rem; color: var(--ivoire); } .volet p { margin: 0; color: var(--gris); font-size: 0.97rem; } .volet .marque { display: block; margin-bottom: 0.9rem; height: 2px; width: 34px; background: var(--or); } /* ------------------------------------------------ galerie de leurs travaux */ .galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1rem, 3vw, 2rem); } .tuile { position: relative; border-radius: 2px; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; background: var(--panneau); } .tuile img { display: block; width: 100%; height: 100%; object-fit: cover; } .tuile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem; background: linear-gradient(180deg, rgba(11,12,11,0), rgba(11,12,11,0.92)); font-size: 0.92rem; color: var(--ivoire); } .tuile figcaption b { display: block; font-family: var(--affiche); font-size: 1.2rem; font-weight: 400; color: var(--champ); margin-bottom: 0.2rem; } /* ------------------------------------------------------------- l'équipe LA BANDE ÉTAIT LA SEULE SANS EN-TÊTE, et elle se lisait donc comme une photo posée là par accident. Elle suit maintenant le rythme des autres bandes : var(--bloc) d'air en haut et en bas, la marge de page sur les côtés, un .entete-bande au-dessus. L'écart avec la galerie au-dessus passe de 128 px à 256 px, comme partout ailleurs entre deux sections. LE DÉFAUT D'ALIGNEMENT, MESURÉ : la légende commençait à x = 360 dans une photo qui commence à x = 288, soit 72 px DANS l'image, et finissait 236 px avant son bord droit. Elle n'était alignée ni sur la photo, ni sur la marge de page, ni sur le centre : sur rien. Elle démarre maintenant exactement au bord gauche de la photo (padding horizontal 0), donc sur la même verticale que le titre au-dessus d'elle et que le texte de la légende. */ .equipe { padding: var(--bloc) var(--marge); background: var(--noir-2); } /* La photo EST calée sur la marge de page, pas centrée. C'est la seule façon que le titre, la photo et la légende partagent une seule verticale : centrée, la photo laissait le titre tout seul à la marge (288 px d'écart à 1440 px, mesuré), c'est-à-dire exactement le défaut qu'on vient de corriger dans la légende. Tout le bloc s'aligne donc à gauche, comme les autres bandes. LE max-width RESTE : en retirant le centrage j'avais aussi retiré le plafond, et la photo s'est mise à s'AGRANDIR entre 900 et 1343 px de large (mesuré : 1080 px rendus pour 864 px de source, +25 %). C'est précisément le défaut que le commentaire d'origine interdisait. Le plafond est donc remis ici, où il vaut pour toutes les largeurs. */ .equipe figure { margin: 0; position: relative; max-width: 54rem; } /* La photo d'équipe ne fait que 864 px de large à la source. Étirée sur toute la largeur d'un écran 1440 px elle était agrandie de 67 % et devenait molle ; plafonnée à 62 rem (992 px) elle l'était encore de 15 % — vu à la mesure, pas à l'œil. Plafond à 54 rem = 864 px : elle s'affiche désormais à sa résolution native, jamais agrandie. Sous 62 rem la photo rétrécit pour rentrer dans la marge de page, elle n'est donc jamais agrandie non plus. */ .equipe img { display: block; width: 100%; height: auto; } /* Deux niveaux, pas un paragraphe uniforme : ce qui AFFIRME reste en ivoire, ce qui INVITE passe en gris. C'est la paire primaire/secondaire que la page utilise déjà partout ; le texte n'a pas besoin d'un troisième registre. */ .equipe figcaption { padding: 1.6rem 0 0; max-width: 58ch; font-size: 0.95rem; line-height: 1.65; } .equipe figcaption .dit { display: block; color: var(--ivoire); } .equipe figcaption .invite { display: block; margin-top: 0.35rem; color: var(--gris); } /* AU-DESSUS DE 84 rem, LA LÉGENDE PASSE À CÔTÉ DE LA PHOTO. La photo est plafonnée à 864 px (sa résolution native) : sur un écran 1440 px elle laisse 500 px de vide à droite, et la légende empilée sous elle allonge la bande sans rien apporter. Elle occupe donc cette place, et l'affirmation monte en Prata : c'est elle qui porte le propos, l'invitation reste en dessous en gris. POURQUOI 84 rem ET PAS MOINS : à 1216 px la colonne de texte tombe à 194 px et la légende se replie sur 7 lignes — mesuré, ça se lit mal. À 1344 px (84 rem) elle dispose de 306 px, soit 30 à 38 caractères par ligne : la fourchette de confort d'un texte de 15 px. En dessous, elle revient SOUS la photo, pleine largeur, ce qui est le bon geste sur tablette et téléphone. */ @media (min-width: 84rem) { .equipe figure { /* max-width:none ICI SEULEMENT : au-dessus de 84 rem la figure doit occuper la largeur de la bande pour que la légende ait une colonne à droite. La PHOTO, elle, garde son plafond de 54 rem par la première colonne de la grille — c'est elle qui est bornée, pas le bloc. */ display: grid; max-width: none; gap: 0 clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 54rem) minmax(0, 1fr); align-items: start; } .equipe figcaption { padding: 0; max-width: 34ch; } .equipe figcaption .dit { font-family: var(--affiche); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.35; } } /* ------------------------------------------------------------------ appel */ .appel { position: relative; overflow: hidden; padding: var(--bloc) var(--marge); background: linear-gradient(135deg, #191510 0%, var(--noir) 62%); border-top: 1px solid var(--trait); } .appel .interne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; } .appel h2 { font-size: clamp(1.85rem, 4.6vw, 3.3rem); color: var(--or-pale); } .appel p { color: var(--gris); max-width: 46ch; } .tel { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; text-decoration: none; min-height: 44px; } .tel b { font-family: var(--affiche); font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 400; border-bottom: 2px solid var(--or); padding-bottom: 0.15rem; } .tel:hover b { color: var(--champ); } .heures { background: rgba(244,240,230,0.04); border: 1px solid var(--trait); border-radius: 2px; padding: clamp(1.2rem, 3vw, 1.9rem); } .heures h3 { font-size: 1.15rem; margin-bottom: 0.9rem; color: var(--ivoire); } .heures dl { margin: 0; display: grid; gap: 0.7rem; } .heures .r { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--trait); padding-bottom: 0.55rem; } .heures dt { color: var(--ivoire); flex: 0 0 auto; } .heures dd { margin: 0; color: var(--gris); min-width: 0; } /* Le code postal ne doit PAS se couper en deux. « Saint-Jean-sur-Richelieu J3B 6X4 » se repliait en « …J3B » / « 6X4 » tout seul sur la ligne suivante — constaté au rendu. On garde donc le couple ville + code soudé, et on n'autorise la coupure qu'AVANT le code postal. */ .heures dd .cp { white-space: nowrap; } /* Les libellés sont alignés en colonne d'une rangée à l'autre : sans largeur minimale, « Adresse » et « Pour qui » décalaient les valeurs à chaque ligne. */ .heures dt { min-width: 8.5rem; } /* Mais sur un téléphone cette largeur minimale MANGE la valeur : à 390 px le libellé prend 136 px et il ne reste que ~160 px pour l'adresse, qui se repliait encore. Sous 40 rem, la rangée s'empile — libellé au-dessus, valeur en dessous, pleine largeur — comme la rangée d'horaire le fait déjà. */ @media (max-width: 40rem) { .heures .r { display: block; } .heures dt { min-width: 0; } .heures dd { margin-top: 0.35rem; } } .heures .r:last-child { border-bottom: 0; padding-bottom: 0; } /* La rangée d'horaire porte SIX lignes : elle ne peut pas rester sur une seule ligne comme les autres rangées du tableau. On empile donc le libellé et la valeur, sinon le « Mardi 10 h – 18 h » se retrouvait comprimé contre « Adresse » sur une même ligne. */ .heures .r.large { display: block; } .heures .r.large dd { margin-top: 0.35rem; line-height: 1.75; } .heures .note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--gris); } /* --------------------------------------------------------------- pied */ .pied { background: #070806; padding: clamp(2.5rem, 5vw, 3.5rem) var(--marge); color: var(--gris); font-size: 0.95rem; } .pied .interne { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; justify-content: space-between; } .pied a { color: var(--ivoire); } /* Les liens du pied de page sont des cibles au doigt : le numero de telephone seul mesurait 91 x 16 px. min-height 44px ne change rien a l'oeil (le texte reste sur sa ligne) mais rend la zone touchable. */ .pied a { display: inline-flex; align-items: center; min-height: 44px; } .pied strong { color: var(--ivoire); } /* --------------------------------------------------------- réduit le mouvement */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; } .leve > span { transform: none; } html { scroll-behavior: auto; } } @media (max-width: 62rem) { .appel .interne { grid-template-columns: 1fr; } } /* Sur un téléphone, la rangée en-tête n'a la place que pour TROIS choses : le logo, le numéro et un bouton. « Prendre rendez-vous » + le numéro en clair sur deux lignes écrasaient le logo, et le numéro se coupait au milieu du format (« (450) 895- » / « 2366 ») — constaté sur la capture à 390 px. Le bouton bascule donc sur un libellé court. Le numéro reste entier. */ .bouton .court { display: none; } @media (max-width: 42rem) { .tete nav { gap: 0.5rem; } .tete nav a:not(.bouton) { display: none; } .tete nav a.tel { display: inline-flex; font-weight: 600; white-space: nowrap; } .tete nav a.tel b { display: none; } .bouton .long { display: none; } .bouton .court { display: inline; } .bouton { padding: 0.6rem 1rem; } }