/* * EUROCAP — feuille unique. * * Une seule feuille, cinq couches de cascade déclarées d'entrée. CREANOR porte * deux feuilles de ~1690 lignes qui se contredisent par endroits — mêmes * sélecteurs rejoués en §1 puis §20/§21/§26, une couleur déclarée puis écrasée, * une classe modificatrice qui vaut exactement sa classe de base. L'ordre des * couches rend ici la question sans objet : un composant ne peut pas battre une * section, une section ne peut pas battre un utilitaire, quelle que soit la * spécificité des sélecteurs. * * tokens les variables, rien d'autre * base éléments nus, typographie, accessibilité * composants boutons, champs, cartes, logo, icônes * sections ce qui n'existe qu'à un endroit de la page * utilitaires les rares exceptions assumées */ @layer tokens, base, composants, sections, utilitaires; /* ======================================================================== TOKENS ===================================================================== */ @layer tokens { :root { /* * LES QUATRE ROUGES. * * C'est le point le plus important de cette feuille. --red-brand a un * contraste de 4,07:1 sur blanc : il est SOUS le seuil AA. Il ne porte * donc jamais de texte, et ne sert jamais de fond à du texte. Trois * dérivées assurent la lisibilité selon le contexte. * * CREANOR a découvert ces valeurs au fil de trois audits successifs et * les a dispersées en exceptions. Elles sont ici des rôles nommés. * Cette distinction est délibérée : ne pas « harmoniser ». */ --red-brand: #E83A51; /* logo, filets, halos, dégradés — jamais de texte */ --red-on-light: #C21F37; /* texte rouge sur fond clair — 5,92:1 sur blanc */ --red-on-dark: #F4677A; /* texte rouge sur fond nuit — 5,6:1 */ --red-surface: #D42743; /* aplat portant du blanc sous 18,66 px — 5,04:1 */ --ink: #081F2D; --slate: #3F5364; /* * Assombri par rapport au gris de CREANOR (#6B7A85). L'audit de * contraste, mesuré sur la page rendue, le trouvait à 4,42:1 sur blanc * et 3,99:1 sur crème — sous le seuil AA, dans les deux cas, pour tout * texte sous 24 px. Il portait à lui seul 34 des 36 échecs. * Valeur calculée, pas ajustée à l'œil : 5,56 / 5,01 / 4,59. */ --muted: #5D6A74; --mist: #8FA3B0; --pink: #F79AA8; --cream: #F5F3EF; --cream-deep: #EDE9E2; --green-deep: #1E7A4B; --craie: #FFFFFF; /* * Le motif de chevrons de CREANOR, conservé pour mémoire mais NON UTILISÉ : * son thème de production le met en `display: none`. Le fond du hero * n'est porté que par le symbole ci-dessus, immobile. */ /* * LE SYMBOLE DE MARQUE, seul, pour le filigrane de fond. Extrait du logo * plutôt que redessiné : il ne pourra pas en diverger. C'est ce que * creanor.fr pose sur son hero à 62 %% de large et 5,5 %% d'opacité — ici * en plusieurs exemplaires, qui dérivent lentement. */ --symbole: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='629%200%20133%2089'%20fill='%23ffffff'%3E%3Cpolygon%20points='656.06%200.41%20637.02%200.41%20673.63%2037.02%20710.25%200.41%20691.21%200.41%20673.63%2017.98%20656.06%200.41'/%3E%3Cpolygon%20points='691.21%2089.17%20710.25%2089.17%20673.63%2052.56%20637.02%2089.17%20656.06%2089.17%20673.63%2071.6%20691.21%2089.17'/%3E%3Cpolygon%20points='629.17%2062.34%20629.17%2081.38%20665.78%2044.77%20629.17%208.16%20629.17%2027.2%20646.74%2044.77%20629.17%2062.34'/%3E%3Cpolygon%20points='717.85%2070.17%20717.85%2089.21%20762.25%2044.81%20717.81%200.33%20717.81%2019.37%20743.21%2044.81%20717.85%2070.17'/%3E%3C/svg%3E"); --chevrons-soft: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%20viewBox='-13%20-15%20160%20120'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.04'%3E%3Cpolygon%20points='27.3,1.2%208.2,1.2%2044.8,37.8%2081.4,1.2%2062.4,1.2%2044.8,18.7'/%3E%3Cpolygon%20points='62.4,89.9%2081.4,89.9%2044.8,53.3%208.2,89.9%2027.3,89.9%2044.8,72.4'/%3E%3Cpolygon%20points='0.4,63.1%200.4,82.1%2037,45.5%200.4,8.9%200.4,28%2017.9,45.5'/%3E%3Cpolygon%20points='89,70.9%2089,90%20133.4,45.6%2089,1.1%2089,20.1%20114.4,45.6'/%3E%3C/g%3E%3C/svg%3E"); /* Rôles, redéfinis par section. Aucun composant ne nomme une couleur brute : il lit --fg, --bg, --accent, et suit donc son contexte. */ /* * LE FOND CLAIR EST BLANC, pas crème. C'est le § 25 de la surcouche de * production — « LE FOND PART VERS LE BLANC » : les aplats crème * faisaient huit champs colorés successifs et le blanc n'apparaissait * que dans les cartes ; le rapport est inversé. Le crème ne sert plus * que de « touche » (--touche), sur les tout derniers pour-cent d'une * section. Mesuré sur creanor.fr : rgb(255, 255, 255) partout. */ --bg: var(--craie); --fg: var(--ink); --fg-muted: var(--slate); --fg-faint: var(--muted); --accent: var(--red-on-light); --rule: rgba(8, 31, 45, .12); --carte-bg: var(--craie); /* * Piles de repli identiques à celles de creanor.fr, au caractère près. * Nous ajoutions `-apple-system` derrière Jost et `system-ui` derrière * Archivo : la police rendue était la même, mais autant supprimer un * écart qui ne coûte rien à corriger. */ --font-display: 'Jost', system-ui, sans-serif; --font-ui: 'Archivo', sans-serif; --font-body: 'Manrope', system-ui, sans-serif; /* Un seul easing sur tout le site. */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-court: .28s; --dur: .5s; --dur-long: .9s; --shell: 1240px; --gut: 36px; --r-pilule: 999px; --r-carte: 16px; --r-champ: 9px; --r-petit: 4px; --ombre-carte: 0 24px 48px -30px rgba(8, 31, 45, .45); } /* * L'ALTERNANCE CLAIR / NUIT, vérifiée section par section. * * creanor.fr compte dix bandes et quatre sombres : le hero (1), les * services (3), la réhabilitation (7) et le pied de page (10). Son § 25 les * nomme « les quatre respirations sombres de la page ». La règle qui s'en * dégage — et qui tient sur ses dix bandes sans exception — est que DEUX * SECTIONS SOMBRES NE SE TOUCHENT JAMAIS : il y a toujours au moins une * bande claire entre deux. * * EUROCAP compte huit bandes. Les siennes tombent sur 1, 4, 6 et 8 — le * hero, les services, le groupe et le pied de page —, donc quatre sombres * comme lui, et jamais deux qui se touchent. * * Une correspondance littérale, section par section, ne marche pas : son * ordre n'est pas le nôtre. Sa section sombre « Un nouveau visage » a pour * équivalent notre « sur mesure », mais celle-ci suit immédiatement les * services : les passer toutes deux en nuit ferait un bloc sombre de deux * sections, ce que sa page ne fait jamais. C'est « le groupe », une bande * plus loin, qui tient ce rôle sans casser la règle. */ /* Thème nuit : on ne change QUE les rôles. */ .c-section--nuit, .c-hero, .c-footer { --bg: var(--ink); --fg: var(--craie); --fg-muted: rgba(255, 255, 255, .76); --fg-faint: var(--mist); --accent: var(--red-on-dark); --rule: rgba(255, 255, 255, .14); --carte-bg: rgba(255, 255, 255, .04); } @media (max-width: 1100px) { :root { --gut: 28px; } } @media (max-width: 720px) { :root { --gut: 20px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-court: .01ms; --dur: .01ms; --dur-long: .01ms; } } } /* ======================================================================== BASE ===================================================================== */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* La barre est fixe : sans ce décalage, une ancre atteinte au clavier se pose sous elle et le titre visé reste invisible. */ scroll-padding-top: 92px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--fg); font-family: var(--font-body); /* * 16 px plat. creanor.fr n'a pas de clamp ici : `body` y vaut 16 px à * toutes les largeurs. Notre clamp donnait 15 px jusqu'à 1478 px de * fenêtre, soit un corps plus petit d'un pixel sur presque tous les * écrans — et un pixel de corps se propage à tout ce qui hérite. */ font-size: 16px; line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; line-height: 1.06; text-wrap: balance; } p { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; } li { list-style: none; } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; } a:hover { text-decoration-color: currentColor; } button, input, select, textarea { font: inherit; color: inherit; } address { font-style: normal; } [hidden] { display: none !important; } /* -- Accessibilité --------------------------------------------------- */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--red-brand); outline-offset: 2px; border-radius: var(--r-petit); } .c-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .c-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 22px; background: var(--red-surface); color: var(--craie); font-weight: 700; text-decoration: none; border-radius: 0 0 12px 0; } .c-skip:focus { left: 0; } :target { scroll-margin-top: 92px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } } /* ======================================================================== COMPOSANTS ===================================================================== */ @layer composants { .c-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); } /* -- Titres et amorces ----------------------------------------------- */ /* * `clamp(27px, 3vw, 38px)` était déjà la valeur de la production — le § 21 * de sa surcouche fond ses deux tailles de titre en une seule, celle du * plus grand. Ce qui manquait, c'est l'interligne : 1,02 et non le 1,06 * hérité de la règle générale des titres. Sur un titre de 38 px sur deux * lignes, l'écart fait 3 px. */ .c-h1, .c-h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.02; color: var(--fg); } .c-h1 { font-size: clamp(30px, 3.4vw, 44px); } /* * Le sur-titre, relevé sur creanor.fr : Archivo 12 px, graisse 400, * interlettrage 0,2em, 16 px de marge basse. Nous avions 500 et 14 px. * * La couleur n'est PAS le rouge de marque : le § 16 de la production le * corrige lui-même en #C21F37, parce que #E83A51 ne tient que 4,07:1 sur * blanc. C'est exactement notre --red-on-light. Les deux chartes sont * tombées sur la même valeur, séparément. */ .c-kicker { margin-bottom: 16px; font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--red-on-light); } .c-kicker--clair { color: var(--pink); } /* * Le chapô. `.c-sectionhead__aside` de creanor.fr : 15 px sur 1,6, 34 * caractères de large, gris ardoise. Le nôtre montait à 19 px sur 62 * caractères — deux fois plus de matière, et il se lisait comme un second * titre au lieu d'une note en marge. */ .c-lede { margin-top: 18px; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; } /* * LE CHAPÔ EMPILÉ N'EST PAS LE CHAPÔ EN MARGE. * * Les 34 caractères ci-dessus sont relevés sur `.c-sectionhead__aside`, et * cette valeur est juste — à condition de la rendre là où la production la * rend. Mesuré sur creanor.fr : `.c-sectionhead__aside` est TOUJOURS dans la * colonne de droite (x = 912,9 px), jamais sous le titre. Quand la * production empile un chapô sous son titre, c'est `.c-tarifs__lead`, qui * fait 48 caractères, et ses paragraphes de corps remplissent la colonne * (`.c-reno__p`, aucune largeur maximale). * * Nos deux colonnes empilées appliquaient les 34 caractères de la marge : * mesuré, le chapô tenait 311 px au-dessus de paragraphes de 566 px, sous un * titre de 677. Trois bords droits différents dans une même colonne, à la * même origine — c'est ce que le commanditaire voit comme « pas aligné ». * * La mesure passe donc sur le CONTENEUR, une fois, et tout ce qu'il porte * s'y range : titre, chapô, paragraphes. Un seul bord droit, quelle que * soit la taille de corps de chaque bloc. */ .c-surmesure__intro, .c-groupe__intro { max-width: 58ch; } .c-surmesure__intro .c-lede, .c-groupe__intro .c-lede { max-width: none; } /* -- Boutons --------------------------------------------------------- Quatre variantes. Celles qui portent du blanc sous 18,66 px utilisent --red-surface (5,04:1) et non --red-brand (4,07:1). Les boutons du hero sont plus gros : 3:1 leur suffit, ils gardent le rouge de marque. */ .c-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; /* * Ni plancher de hauteur, ni bordure transparente. creanor.fr n'a ni * l'un ni l'autre : ses boutons font 41 px (barre) et 56 px (hero), les * nôtres en faisaient 47 et 60. Le plancher de 44 px visait le confort * tactile, mais l'exigence vérifiée est de 24 px et ces boutons en font * près du double. La bordure transparente ajoutait deux pixels ; elle * ne subsiste que sur la variante fantôme, qui en a une visible — c'est * ce que fait la production, qui accepte l'écart entre ses deux * variantes plutôt que de le compenser. */ border: 0; border-radius: var(--r-pilule); /* Interligne `normal` : le 1,62 hérité du corps ajoutait 9 px de hauteur à chaque bouton. */ line-height: normal; /* * MANROPE 700, pas Archivo 600. Relevé sur creanor.fr : ses boutons * n'ont pas de `font-family`, ils héritent donc du corps de texte. * Nous les avions passés à la police d'interface, ce qui leur donnait * une autre voix que celle de la production. La graisse suit : 700, * et chez nous elle sera réellement dessinée. */ font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; /* `.25s ease` sur la seule transformation et la seule ombre : CREANOR ne fait pas transiter le fond de ses boutons. */ transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .c-btn:hover { transform: translateY(-2px); } .c-btn svg { width: 18px; height: 18px; flex: none; } /* * Le bouton principal porte du blanc à 16 px : il lui faut donc 4,5:1, et * --red-brand n'en offre que 4,07. C'est exactement le cas que --red-surface * existe pour couvrir — la règle du BRIEF §2, que cette feuille enfreignait * jusqu'à ce que l'audit le signale. */ .c-btn--primaire { background: var(--red-surface); color: var(--craie); font-size: 16px; padding: 16px 30px; /* * L'ombre est accordée au rouge du bouton, pas au rouge de marque : * « sans quoi elle rougeoierait plus clair que le bouton qu'elle * porte ». Valeur du § 28 de la production, au chiffre près. */ box-shadow: 0 18px 40px -16px rgba(212, 39, 67, .85); } .c-btn--primaire:hover { background: var(--red-on-light); box-shadow: 0 24px 48px -16px rgba(212, 39, 67, 1); } .c-btn--fantome { background: transparent; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); color: var(--fg); } .c-btn--fantome:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); } .c-btn--encre { background: var(--ink); color: var(--craie); } .c-btn--encre:hover { background: var(--red-surface); } .c-btn--nav { padding: 11px 22px; background: var(--red-surface); color: var(--craie); font-size: 14.5px; box-shadow: 0 8px 20px -10px rgba(232, 58, 81, .9); } .c-btn--nav:hover { box-shadow: 0 16px 32px -12px rgba(232, 58, 81, 1); } /* -- Icônes ----------------------------------------------------------- */ /* -- Logo ------------------------------------------------------------- */ .c-logo { display: block; line-height: 0; } .c-logo__svg { height: 38px; width: auto; } /* Les SVG de marque sont normalisés en classes sémantiques : c'est ce qui permet de les inverser sur fond nuit sans fichier séparé. */ .c-logo .l-encre { fill: var(--fg); } .c-logo .l-ardoise { fill: var(--fg-faint); } .c-logo .l-corail { fill: var(--red-brand); } /* -- Cartes ----------------------------------------------------------- */ /* -- Champs ----------------------------------------------------------- */ /* `.c-label` au § 5 de la production : Manrope 11,5 px, graisse 500, 4 px de marge basse. Nous étions à Archivo 12,5 px en 600. */ .c-label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 500; line-height: normal; letter-spacing: .01em; color: var(--fg-muted); } .c-req { color: var(--red-on-light); } /* * Les champs, § 5 de la production : « les champs de la v1 étaient * dimensionnés pour une page aérée ; resserrés, ils demandent moins de * défilement et se remplissent d'un trait ». 38 px de haut, 13,5 px de * corps, rayon 9. * * Leur dessin est un verre, pas un aplat : fond de craie à 45 %, bordure * de craie à 65 %, et une double ombre — un filet intérieur clair en haut, * une ombre portée courte. Ce dessin ne tient que parce qu'il repose sur la * carte teintée du formulaire ; posé sur du blanc nu, il serait invisible. */ /* * TRENTE-QUATRE, ET C'EST UN ÉCART ASSUMÉ AVEC LA RÉFÉRENCE. * * creanor.fr en production tient ses champs à 38 px, et c'est la valeur que * nous avions. Le commanditaire trouve le formulaire trop grand et demande * de resserrer : il a onze champs plus une zone de texte, et quatre pixels * par champ font quarante-quatre pixels de défilement en moins. * * LE PLANCHER N'EST PAS ESTHÉTIQUE, il est réglementaire : 24 px de cible * tactile (WCAG 2.2), que `tools/contrastes.mjs` mesure sur la page rendue. * On s'arrête donc dix pixels au-dessus, et le corps de 13,5 px ne bouge * pas — c'est lui qui décide de la lisibilité, pas la hauteur de la boîte. * * La règle des 720 px, elle, reste intouchée : sous Safari iOS il faut * 16 px de corps et 46 px de haut, sans quoi le champ zoome à la mise au * point et ne dézoome jamais. */ .c-input, .c-select, .c-textarea { width: 100%; height: 34px; padding: 0 12px; background: rgba(255, 255, 255, .45); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .65); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px -14px rgba(8, 31, 45, .6); font-size: 13.5px; line-height: normal; color: var(--ink); transition: border-color var(--dur-court) var(--ease), box-shadow var(--dur-court) var(--ease); } .c-input:focus, .c-select:focus, .c-textarea:focus { border-color: var(--red-on-light); box-shadow: 0 0 0 3px rgba(232, 58, 81, .14); } /* `.c-textarea { height: 66px; padding: 9px 12px }` en production. Resserrée à 56 avec les champs, soit trois lignes de saisie visibles au lieu de quatre — elle reste redimensionnable à la main pour qui écrit long. */ .c-textarea { resize: vertical; height: 56px; min-height: 56px; padding: 9px 12px; } .c-select { appearance: none; /* Le chevron est un data: URI — img-src autorise data:, pas un fichier externe, et une requête de plus pour 200 octets n'a pas de sens. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5364' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; } .c-hint { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--fg-faint); } @media (max-width: 720px) { /* Sous 16 px, Safari iOS zoome à la mise au point du champ et ne redézoome jamais. Ce n'est pas une préférence esthétique. */ .c-input, .c-select, .c-textarea { font-size: 16px; min-height: 46px; } } } /* ======================================================================== SECTIONS ===================================================================== */ @layer sections { .c-main { display: block; } /* * LE RYTHME VERTICAL EST DE 48 PX, PLAT. * * Mesuré sur les neuf sections de creanor.fr : toutes portent * `padding: 48px var(--gut)` sur leur coquille, sans exception ni clamp. * Seules deux s'en écartent, et dans le même sens — la section de contact * à 40 px, le pied de page à 26/14. EUROCAP montait à 102 px à 1280 : * chaque section était séparée de la suivante par plus du double. */ .c-section { position: relative; padding-block: 36px; background: var(--bg); color: var(--fg); } /* * Un filet remplace la limite de couleur qui n'existe plus depuis que le * fond est blanc : 7 % d'encre, valeur de la production. * * Mesuré : le filet n'est pas réservé aux paires de sections claires. Sur * creanor.fr, `#espaces` le porte alors qu'il suit le hero, qui est sombre. * Il est posé sur TOUTE section claire. */ .c-section:not(.c-section--nuit) { border-top: 1px solid rgba(8, 31, 45, .07); } .c-groupe:not(.c-section--nuit) { border-top-color: rgba(8, 31, 45, .10); } /* La seule section que creanor.fr resserre : sa `.c-reservation__inner` est à 40 px quand toutes les autres sont à 48. */ .c-demande { padding-block: 30px; } /* * L'EN-TÊTE DE SECTION EST UNE LIGNE, PAS UNE PILE. * * `.c-sectionhead` de creanor.fr met le sur-titre et le titre à gauche, et * l'amorce en aparté à droite, alignés par le bas. Nous empilions les trois * sur toute la largeur : mesuré, nos en-têtes faisaient 212 à 236 px quand * les siens en font 106 à 146. C'était, à soi seul, plus de 400 px de page * en trop sur quatre sections — le plus gros poste de l'écart de hauteur. */ .c-section__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 20px; } /* * Le titre est borné à 22 signes de large. Sans cette borne, la ligne de * l'en-tête ne se forme pas : un titre long occupe toute la largeur et * renvoie l'aparté à la ligne suivante — on retrouve la pile qu'on venait * de supprimer. creanor.fr le borne par des classes `.c-h2--22` et * `.c-h2--20` ; ici la borne vaut pour tout titre d'en-tête de section, * ce qui évite d'avoir à la poser gabarit par gabarit. */ .c-section__tete .c-h2 { max-width: 22ch; } /* L'aparté ne prend pas de marge haute : il est aligné sur le titre, pas posé dessous. */ .c-section__apart { margin-top: 0; } /* * LE CHEVRON DE LA MARQUE EN FILIGRANE, § 19 de la surcouche de production. * * « Un aplat uniforme paraît vite vide. Plutôt qu'une trame répétée — c'est * elle, et non le bleu, qui donnait au site sa lecture technique — on pose * UN chevron de la marque, surdimensionné et coupé par le bord, à quelques * pour cent d'opacité. C'est une signature, pas une texture. » * * Le hero le porte déjà. Il manquait aux deux autres sections nuit, qui * étaient donc des aplats nus là où CREANOR a de la matière. Chaque section * a sa propre position, sa propre échelle et sa propre opacité : le motif * sort par la gauche sur le hero, par la droite sur les services — « à * contre-sens du hero » —, et par le bas à gauche sur la dernière. */ .c-section--nuit { overflow: hidden; } .c-services::before, .c-groupe.c-section--nuit::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--symbole); background-repeat: no-repeat; pointer-events: none; } .c-services::before { background-position: 116% 12%; background-size: 46% auto; opacity: .06; } .c-groupe.c-section--nuit::before { background-position: -6% 108%; background-size: 34% auto; opacity: .05; } /* Le contenu repasse devant : ces sections n'avaient pas de contexte d'empilement explicite. */ .c-services .c-shell, .c-groupe .c-shell { position: relative; z-index: 1; } .c-section__note { /* 16 px : l'écart que creanor.fr met entre une grille et la ligne qui la commente (`v-domi__pied`). Nous étions à 28. */ margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--fg-faint); } /* -- En-tête ---------------------------------------------------------- */ .c-header { position: fixed; inset: 0 0 auto; z-index: 80; --nav-fg: var(--craie); --nav-bg: transparent; --nav-line: transparent; --nav-flou: none; } /* * LA BARRE DÉFILÉE PREND UN FOND. Le commanditaire est revenu sur sa * décision précédente — « qu'elle reste transparente » — en demandant le * comportement de creanor.fr, qu'il avait sous les yeux. * * Relevé sur la PRODUCTION, à 1440 × 900, en défilant pour de bon : * * accueil, y ≤ 40 transparent * accueil, y > 40 `is-past` → rgba(245, 243, 239, .45) + blur(14px) * pages intérieures `--solid` → rgba(245, 243, 239, .92) + blur(14px) * * NOUS PRENONS SON .92 PARTOUT, ET CE N'EST PAS UN ÉCART DE CONFORT. * Son .45 lui va parce que son hero est clair : le fond qui transparaît est * de la même famille que la barre. Le nôtre est NUIT. Une barre blanche à * 45 % posée dessus donne un gris moyen — calculé à rgb(126, 133, 138) — sur * lequel l'encre #081F2D tombe à 3,0:1, sous le seuil AA. Copier l'alpha * aurait rendu la barre illisible précisément là où elle apparaît. * * Le blanc, lui, est bien le nôtre : le fond clair du site est la craie et * non le crème (voir § 25 plus haut), et la barre suit le site, pas la * référence. * * Le seuil vit dans eurocap.js : 40 px, celui de creanor, et non la hauteur * du hero — voir la note là-bas. */ .c-header.est-passe, .c-header--solide { --nav-fg: var(--ink); --nav-bg: rgba(255, 255, 255, .92); --nav-line: rgba(8, 31, 45, .1); --nav-flou: blur(14px); } /* * LE FOND DE LA BARRE VIT SUR LA BARRE, plus sur son calque. * * `.c-header__fond` est un enfant en position absolue : peint par lui, le * fond n'est pas un ANCÊTRE du texte de la barre. L'audit de contraste, qui * remonte les ancêtres pour trouver le fond réel, tombait alors sur le * — qui est en bleu nuit — et lisait « encre sur encre, 1:1 » sur * les pages intérieures, où la barre est pleine. Faux positif, mais il * signalait un vrai défaut de structure : rien, dans l'arbre, ne disait de * quelle couleur était le fond de cette barre. * * Le calque garde le filet et le flou, qui doivent rester au-dessus du * contenu de la page ; la couleur remonte d'un cran. Rien ne change à * l'œil : les deux boîtes se superposent exactement. */ .c-header { background: var(--nav-bg); transition: background-color var(--dur) var(--ease); } .c-header__fond { position: absolute; inset: 0; border-bottom: 1px solid var(--nav-line); backdrop-filter: var(--nav-flou); transition: border-color var(--dur) var(--ease); } .c-header__jauge { position: absolute; inset: auto 0 0; height: 2px; background: var(--red-brand); transform: scaleX(var(--progression, 0)); transform-origin: 0 50%; } .c-header__inner { position: relative; display: flex; align-items: center; gap: 36px; max-width: var(--shell); margin-inline: auto; padding: 14px var(--gut); color: var(--nav-fg); } .c-header .c-logo { margin-right: auto; } .c-header .c-logo .l-encre { fill: var(--nav-fg); } .c-header .c-logo .l-ardoise { fill: color-mix(in srgb, var(--nav-fg) 62%, transparent); } .c-nav { display: flex; align-items: center; gap: 26px; } .c-tel { display: inline-flex; align-items: center; gap: 8px; /* * Sans plancher de hauteur : il portait la barre à 72 px quand celle de * creanor.fr en fait 69. Le rembourrage et l'interligne suffisent à * tenir 31 px, largement au-dessus des 24 exigés. */ padding-block: 4px; text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--nav-fg); } .c-tel svg { width: 18px; height: 18px; color: var(--red-brand); } .c-header.est-passe .c-tel svg, .c-header--solide .c-tel svg { color: var(--red-on-light); } .c-tel--compact { display: none; } /* * Le sélecteur de langue : une pilule contenant deux pastilles, la langue * active en rouge plein. Valeurs relevées sur creanor.fr en production — * bordure à 26 % de blanc, fond à 8 %, deux pixels de rembourrage. */ .c-lang { display: flex; gap: 6px; padding: 2px; border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r-pilule); background: rgba(255, 255, 255, .08); } .c-header.est-passe .c-lang, .c-header--solide .c-lang { border-color: rgba(8, 31, 45, .2); background: rgba(8, 31, 45, .06); } .c-lang__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 7px 9px; border-radius: var(--r-pilule); font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; /* * 0,08em et interligne `normal`, comme en production. Le plancher de * 30 px qu'on avait posé portait la pastille à 31 px quand celle de * creanor.fr en fait 25 — et la pilule entière à 37 contre 31. Sans * lui, le rembourrage de 7 px suffit à tenir les 24 px de cible. */ line-height: normal; letter-spacing: .08em; text-decoration: none; color: var(--nav-fg); opacity: .72; } .c-lang__btn.est-actif { background: var(--red-surface); color: var(--craie); opacity: 1; } .c-burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--nav-fg); } .c-burger__barres, .c-burger__barres span, .c-burger__barres::before, .c-burger__barres::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--dur-court) var(--ease), opacity var(--dur-court) var(--ease); } .c-burger__barres { position: relative; margin-inline: auto; background: none; } .c-burger__barres::before, .c-burger__barres::after { content: ""; position: absolute; left: 0; } .c-burger__barres::before { top: -7px; } .c-burger__barres::after { top: 7px; } [aria-expanded="true"] .c-burger__barres span { opacity: 0; } [aria-expanded="true"] .c-burger__barres::before { transform: translateY(7px) rotate(45deg); } [aria-expanded="true"] .c-burger__barres::after { transform: translateY(-7px) rotate(-45deg); } /* -- Hero ------------------------------------------------------------- */ .c-hero { position: relative; display: flex; flex-direction: column; /* * `min-height` et non `height` : le hero remplit l'écran comme * PLANCHER, et s'étend si ce qu'il porte demande davantage. C'est la * correction que creanor.fr a dû faire le jour où il a mis son bandeau * de distances dedans — chez lui le parent imposait * `height: calc(100svh - 34px)` avec `overflow: hidden`, et le bandeau * se retrouvait rogné, voire absent sur un portable 1366×768. */ min-height: 100svh; /* * Indispensable. Redéfinir --fg ne suffit pas : `color` a déjà été * calculé sur avec la valeur claire, et les descendants en * héritent. Sans cette ligne, le titre du hero s'affiche en bleu nuit * sur bleu nuit — invisible. */ color: var(--fg); /* * Le fond du hero, relevé au pixel sur creanor.fr en production. Ce ne * sont pas des `circle at` mais des ellipses dimensionnées en pourcentage * — la nuance compte : l'approximation en cercles laissait le motif de * chevrons ressortir bien plus qu'il ne doit, faute du troisième * dégradé, celui qui assombrit le bas du hero. */ background: radial-gradient(64% 52% at 74% 20%, rgba(232, 58, 81, .2), rgba(0, 0, 0, 0) 62%), radial-gradient(58% 48% at 24% 6%, rgba(126, 96, 150, .16), rgba(0, 0, 0, 0) 66%), radial-gradient(80% 60% at 50% 100%, rgba(4, 14, 22, .75), rgba(0, 0, 0, 0) 70%), linear-gradient(163deg, #16222E 0%, #0C1C28 44%, #071620 100%); overflow: hidden; } /* * LE SYMBOLE DE MARQUE EN FILIGRANE. * * Seul élément de fond du hero, et immobile. Valeurs relevées sur creanor.fr * en production : taille 62 %, position -14 % 62 %, opacité 0,055. * * Cette règle a disparu deux fois de suite : emportée par la suppression des * couches animées qui la voisinaient, puis réinsérée sur deux ancres qui * n'existaient plus. La leçon est simple — on vérifie qu'une ancre existe * AVANT de s'en servir, et on relit le rendu, pas le fichier. */ .c-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--symbole); background-repeat: no-repeat; background-position: -14% 62%; background-size: 62%; opacity: .055; pointer-events: none; } .c-hero__inner { /* * `static` et non `relative` : la carte, qui est son enfant, doit * s'ancrer sur le HERO et non sur cette coquille, pour pouvoir monter * jusque sous la barre et descendre jusqu'au bandeau. Le `z-index` * survit très bien à la perte du positionnement — la coquille est un * élément flexible du hero, et un élément flexible porte un z-index * même statique. */ position: static; z-index: 2; /* * LE REMBOURRAGE VIT ICI, PAS SUR `.c-hero`. * * 104 px en haut, 36 en bas — mesuré sur `.c-hero__inner` de * creanor.fr, et c'est bien sur son `__inner` qu'il le pose. Nous * l'avions relevé au bon endroit et appliqué au mauvais : sur la * section, il tenait le bandeau des chiffres à 36 px du bas au lieu de * le laisser fermer le hero. * * La règle qu'énonce creanor : « le rembourrage haut vaut celui du bas * PLUS la hauteur de la barre, sans quoi le bloc paraît collé sous le * menu, avec tout le vide en dessous ». Sa barre fait 69 px ; la nôtre * aussi. 36 + 69 = 105, il écrit 104. */ padding-block: 104px 36px; display: grid; /* * LA CARTE N'EST PLUS UNE COLONNE, C'EST LE FOND DU HERO. * * Elle a longtemps vécu dans la deuxième cellule de cette grille, et * tout le réglage du hero tournait autour d'un conflit insoluble : sa * hauteur suit sa largeur, donc l'agrandir poussait le bandeau des * chiffres et l'indicateur hors de l'écran. On a réglé cela par des * parts de grille, puis par une largeur déduite de la hauteur * disponible — deux façons d'arbitrer un conflit qu'il valait mieux * supprimer. * * Sortie du flux, la carte ne pousse plus rien. Elle s'étend vers la * gauche et vers le bas autant qu'on veut, l'`overflow: hidden` du hero * la recadre, et la hauteur du hero ne dépend plus que du texte, de * l'indicateur et du bandeau — les trois choses qui doivent tenir dans * la fenêtre. La garantie « le hero fait exactement la fenêtre » cesse * du même coup d'être un équilibre à retrouver à chaque réglage. * * La grille n'a donc plus qu'une colonne, et elle est BORNÉE : sans * borne, le texte s'étalerait sur toute la largeur et viendrait se * poser sur le territoire. */ --largeur-texte: min(50%, 600px); grid-template-columns: minmax(0, var(--largeur-texte)); gap: 48px; align-items: center; /* * `auto 0` et non `auto` : le surplus de hauteur du hero ne doit plus * se partager au-dessus ET au-dessous de la colonne. Sous elle, il * ouvrait un trou entre la fin du contenu et l'indicateur de * défilement ; la seconde moitié est reprise par la marge basse de * l'indicateur, qui est passée à `auto` (voir `.c-scroll`). */ margin-block: auto 0; } .c-hero__titre { /* * Le H1 occupe quatre lignes visuelles pour trois clés : « Entrepôts, * bureaux et locaux » demande 740 px à ce corps et n'en a jamais eu que * 600. Ce n'est pas un débordement à corriger — c'est le rendu depuis * l'origine, et le réduire à 50 px pour forcer trois lignes ne faisait * que rapetisser le titre sans rien résoudre. */ font-size: clamp(32px, 3.9vw, 56px); line-height: 1.02; } .c-hero__ligne { display: block; } .c-hero__ligne--accent { color: var(--red-on-dark); } .c-hero__para { margin-top: 22px; max-width: 52ch; font-size: clamp(15px, 1.15vw, 18px); color: var(--fg-muted); } /* * LE SUR-TITRE DU HERO EST UNE PILULE, comme `.c-badge` sur creanor.fr : * un cadre arrondi bordé de craie à 22 %, une pastille rouge qui bat, et * le lieu en capitales espacées. Nous n'avions qu'un sur-titre à plat. * * C'est aussi ce qui explique les 18 px que la production met au-dessus de * son titre de hero : ils séparent le titre de cette pilule. Sans elle, la * marge n'avait pas de raison d'être — avec elle, si. */ .c-hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-pilule); /* Pas de `font-family` : creanor.fr n'en donne pas à sa pilule, qui hérite donc du corps de texte. En police d'interface, la pilule perdait 3 px de haut sur la sienne. */ font-size: 12.5px; font-weight: 700; line-height: normal; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .c-hero__badge-point { width: 7px; height: 7px; border-radius: 50%; background: var(--red-brand); flex: none; animation: eurocap-clignote 1.6s ease-in-out infinite; } .c-hero__titre { margin-top: 18px; } /* * `.c-hero__social` et sa pastille battante ont disparu avec la ligne * qu'elles portaient : « plus de 200 entreprises et plus de 2 000 salariés * sont déjà installés dans le réseau ». Le bandeau du bas du hero dit la * même chose, chiffre par chiffre. */ .c-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* * LA LÉGENDE DES SIX VILLES QUITTE L'ÉCRAN, sans quitter le document. * * Elle vivait sous la carte, qui n'a plus de « sous » depuis qu'elle est en * fond de hero : posée là, elle se serait retrouvée par-dessus le * territoire. Elle était de toute façon une redite — les six villes sont * écrites SUR la carte, épingle par épingle, et de nouveau en toutes lettres * dans « Les parcs », juste en dessous. * * Elle reste dans le balisage avec son `aria-label` : c'est la liste que lit * un lecteur d'écran, pour qui la carte n'est qu'un dessin. */ .c-hero__legende--hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .c-hero__legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; } .c-hero__pin-libelle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--fg-faint); } .c-hero__pin-libelle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-brand); } /* * OÙ TOMBE LE VIDE DU HERO. * * Le hero est une colonne flexible plus haute que ce qu'elle porte, et * c'est `margin-block: auto` sur `.c-hero__inner` qui répartit ce surplus : * moitié au-dessus du contenu, moitié au-dessous. Au-dessus il ne se voit * pas, il passe sous la barre. Au-dessous il ouvre un trou entre la fin du * contenu et l'indicateur. * * Mesuré en 1440 × 900 avant correction : 91 px entre le bas de la colonne * et l'indicateur — 26 de rembourrage, 45,5 de marge automatique, 20 de * marge propre — contre 30 px seulement entre l'indicateur et le bandeau. * L'indicateur se lisait comme un appendice du bandeau, alors qu'il annonce * la fin de la colonne. * * La correction ne touche pas aux marges, elle change l'ENDROIT où le vide * s'accumule. Les deux marges automatiques ne sont plus « au-dessus et * au-dessous du contenu » mais « au-dessus du contenu et au-DESSOUS de * l'indicateur » : celui-ci suit donc la colonne à distance fixe, et c'est * l'espace qui le sépare du bandeau qui absorbe le surplus. * * Mesuré après, à la même taille : 40 px au-dessus de l'indicateur — le * rembourrage de la colonne plus sa propre marge — et 73 px au-dessous. * Le rapport s'inverse, l'indicateur redevient la fin de la colonne. * * L'écart minimal avec le bandeau reste celui de creanor.fr, porté par * `.c-bandeau` : clamp(16px, 2.2vh, 30px). La marge automatique s'y ajoute * quand il y a de la place, elle ne la remplace pas. */ .c-scroll { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; align-self: center; gap: 10px; margin: 14px 0 auto; text-decoration: none; font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); } .c-scroll__souris { display: block; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: var(--r-pilule); position: relative; } .c-scroll__souris span { position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--red-brand); animation: eurocap-descend 1.9s var(--ease) infinite; } /* -- La carte SVG ------------------------------------------------------ */ .c-carte { width: 100%; height: auto; overflow: visible; } /* Dans le hero, c'est la HAUTEUR qui commande — voir `.c-hero__carte`. */ .c-hero .c-carte { display: block; height: 100%; width: auto; margin-left: auto; } /* * Seules les épingles des sites sont interactives. Tout le reste — trait de * côte, noms de villes, mers, repères de bord — laisse passer le pointeur : * les noms de villes, dessinés par-dessus les sites, interceptaient le * survol de trois épingles sur six. */ .c-carte__terre, .c-carte__tranche, .c-carte__voisin, .c-carte__repere, .c-carte__ville, .c-carte__cle, .c-carte__hors { pointer-events: none; } /* * L'adresse du pied de page n'est plus flanquée d'une carte : elle occupe sa * colonne, comme `.c-footer__addr` sur creanor.fr, qui n'en met pas non plus * dans ce bloc. */ /* * PAS DE VOILE SOUS LE TEXTE. * * Un dégradé assombrissait la gauche du hero pour que le titre se lise * par-dessus la carte étirée. Il se voyait — le commanditaire l'a décrit * comme une ombre portée derrière le texte, et c'en était une. Le titre, * le paragraphe, les boutons et la carte posent maintenant à même le fond * du hero. * * Ce que la lisibilité y perd est repris là où creanor le reprend : sur le * DESSIN qui passe dessous, pas sur un calque par-dessus. Voir * `.c-hero__carte`, dont l'opacité baisse sur la portion qui court sous la * colonne de texte. */ .c-hero__copie { position: relative; z-index: 2; } /* * La carte occupe toute sa colonne ET déborde à gauche, sous le texte. * * `z-index: 0` contre `z-index: 2` sur la colonne de texte : l'ordre du * document ferait passer la carte par-dessus, puisqu'elle vient après. */ /* * LA CARTE, EN FOND DE HERO. * * Ancrée à droite sur la coquille, centrée verticalement, et volontairement * plus grande que la place disponible : elle s'étend vers la gauche derrière * le texte et vers le bas derrière l'indicateur, et c'est l'`overflow: * hidden` du hero qui la recadre. Hors du flux, elle ne pousse rien — le * bandeau et « Découvrir » restent où ils sont, quelle que soit sa taille. * * Le fondu du bas est déjà dans le fichier (`masque-bas`) : le dessin * s'éteint avant d'atteindre le bandeau des chiffres, qui est transparent et * le laisserait sinon apparaître derrière ses quatre nombres. */ .c-hero__carte { position: absolute; z-index: 0; /* * Bornée en HAUTEUR, pas en largeur : le dessin remplit la bande qui va * du bas de la barre au haut du bandeau, et sa largeur suit. C'est * l'inverse du réglage précédent, où la largeur commandait — et c'est ce * renversement qui pousse la carte vers la gauche, puisque son bord * droit est calé sur la coquille et qu'elle grandit donc par la gauche. * * 78 px en haut : la barre en fait 69, plus une marge pour que les * étiquettes du nord ne viennent pas se glisser sous elle. 128 en bas : * la hauteur du bandeau et de sa marge. */ right: 0; top: 78px; bottom: 128px; width: auto; /* * LE DESSIN SE DISSOUT SOUS LE TEXTE, il n'est pas recouvert. * * Le voile qui assombrissait cette zone a été retiré : il se voyait * comme une ombre portée derrière le titre. Ce qu'il protégeait — la * lisibilité du texte par-dessus la carte — est repris sur le DESSIN, * qui s'efface là où le texte commence, au lieu d'être masqué par un * calque posé dessus. * * Un masque, pas une opacité : baisser l'opacité de tout le bloc * atténuerait aussi le territoire, qui est le sujet. Le dégradé ne * mord que sur la partie gauche, celle qui passe derrière la colonne * de texte, et le territoire n'y est pas. */ mask-image: linear-gradient( 90deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .16) 10%, rgba(0, 0, 0, .38) 24%, rgba(0, 0, 0, .86) 38%, #000 46%); } /* * La carte n'est pas un repli : c'est LE visuel du hero. Elle est donc * traitée comme telle — trait franc, masse lisible, points affirmés — et * non comme un schéma technique discret. */ /* * Les pays voisins : présents mais tus. Leur trait donne l'échelle et la * position — la Belgique à l'est, l'Angleterre en face — sans concurrencer * le territoire d'implantation, qui est le seul sujet de la carte. Ils sont * dessinés et non nommés : les étiquettes qui les désignaient, Londres, * Douvres et Anvers, ont été retirées. */ .c-carte__voisin { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .13); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* * La tranche : douze copies du contour, décalées vers le bas et assombries. * `--profondeur` va de 1 (la plus basse, la plus sombre) à ~0,08 (la plus * haute, presque la face). C'est ce dégradé de copies qui donne l'épaisseur. */ .c-carte__tranche { fill: rgb(9 26 38 / calc(.55 + var(--profondeur, 0) * .45)); stroke: none; } /* * AUCUNE OMBRE PORTÉE. Le tracé posait une `drop-shadow` de 22 px de flou à * 55 % de noir : sur un fond nuit elle ne se lit pas comme du relief mais * comme un halo sombre autour du territoire, et c'est la seconde ombre que * le commanditaire a vue. Le relief vient déjà des sept copies décalées de * `.c-carte__tranche`, qui, elles, dessinent une tranche et non un flou. * creanor.fr ne met d'ombre sur aucun de ses tracés. */ .c-carte__terre { fill: url(#face); stroke: rgba(255, 255, 255, .72); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .c-carte__repere circle { fill: var(--mist); opacity: .6; } /* * Attention à l'unité : dans un SVG à viewBox, `font-size` s'exprime en * unités de viewBox, pas en pixels d'écran. La carte fait 1000 unités de * large pour environ 500 px rendus : une valeur de 11 donnait 5,4 px à * l'écran, illisible. Toute retouche ici doit se relire à l'écran, jamais * dans le fichier. */ .c-carte__repere-nom { font-family: var(--font-ui); font-size: 19px; font-weight: 500; letter-spacing: .04em; fill: var(--mist); opacity: .8; } /* * Le nom des sites, porté par la carte elle-même. La légende sous le dessin * reste : elle sert le lecteur d'écran et les petits écrans, où le cadre est * trop étroit pour six étiquettes. */ /* * La bulle du site : masquée, elle n'apparaît qu'au survol, au focus clavier * et au toucher. C'est ce qui permet de garder six épingles serrées sans * aucun chevauchement de texte — le nom ne prend de la place que lorsqu'on * le demande. La légende sous la carte le donne en permanence. */ .c-carte__bulle { opacity: 0; pointer-events: none; transition: opacity var(--dur-court) var(--ease); } .c-carte__bulle rect { fill: rgba(8, 31, 45, .96); stroke: rgba(244, 103, 122, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .c-carte__bec { fill: rgba(8, 31, 45, .96); } .c-carte__bulle text { font-family: var(--font-ui); font-size: 21px; font-weight: 700; letter-spacing: .01em; fill: var(--craie); } .c-carte__lien:hover .c-carte__bulle, .c-carte__lien:focus-visible .c-carte__bulle { opacity: 1; } /* Les villes hors cadre : direction et distance, sur le bord du dessin. */ .c-carte__chevron { fill: none; stroke: var(--red-on-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .c-carte__hors-nom { font-family: var(--font-ui); font-size: 20px; font-weight: 700; fill: var(--craie); paint-order: stroke; stroke: rgba(6, 22, 32, .92); stroke-width: 5px; stroke-linejoin: round; } .c-carte__hors-dist { font-family: var(--font-ui); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; fill: var(--mist); paint-order: stroke; stroke: rgba(6, 22, 32, .92); stroke-width: 4.5px; stroke-linejoin: round; } /* * L'épingle bat, mais lentement et sans disparaître : elle ne descend pas * sous 0,55 d'opacité. Un clignotement franc sur six repères transformerait * le hero en tableau de bord. Le décalage par rang évite qu'elles battent * toutes ensemble, ce qui ferait pulser la carte entière. */ /* * Le rayonnement : un halo dégradé sous la tête, et une onde qui s'ouvre. * Posé sur les SIX épingles, il ne rompt pas leur égalité. Le dégradé plutôt * qu'un disque translucide, faute de quoi son bord se voit et l'effet * ressemble à une tache. */ /* * Le rayonnement ne capte pas le pointeur : d'un rayon de trente unités, il * débordait sur l'épingle voisine et volait son survol. Seule la goutte est * cliquable. */ .c-carte__rayon { pointer-events: none; } .c-carte__halo { fill: url(#rayonnement); animation: eurocap-souffle 2.6s var(--ease) infinite; animation-delay: calc(var(--rang, 0) * 180ms); transform-origin: 0 0; } .c-carte__onde { fill: none; stroke: var(--red-brand); stroke-width: 2; vector-effect: non-scaling-stroke; animation: eurocap-onde 3.2s var(--ease) infinite; animation-delay: calc(var(--rang, 0) * 180ms); transform-origin: 0 0; } /* * `.c-carte__mer` n'existe plus. Les noms d'étendues d'eau étaient posés en * capitales très espacées, selon la convention cartographique — mais * « LA MANCHE » et « MER DU NORD » tombaient l'un sur la moitié gauche du * dessin et l'autre sur son bord haut, c'est-à-dire sous le titre du hero * pour le premier et dans la zone que le dégradé dissout pour les deux. Le * trait de côte dit déjà où est la mer. */ /* * Les villes des parcs : plus claires et plus grasses que les autres. Elles * situent l'offre, elles ne sont pas du décor — et leur place est réservée * avant tout le reste, sans quoi Calais et Dunkerque disparaissaient de la * carte alors que trois parcs s'y trouvent. */ .c-carte__cle circle { fill: var(--craie); opacity: .85; r: 3.8; } .c-carte__cle-nom { font-family: var(--font-ui); /* Plus petit que les repères mais en gras : la graisse suffit à les distinguer, la taille n'a pas à s'en mêler et un nom compact se pose plus près de son point. */ font-size: 16px; font-weight: 700; letter-spacing: .01em; fill: var(--craie); opacity: .95; paint-order: stroke; stroke: rgba(6, 22, 32, .9); stroke-width: 4.5px; stroke-linejoin: round; } /* Les villes secondaires : posées automatiquement là où la place existe. */ .c-carte__ville circle { fill: var(--mist); opacity: .5; } .c-carte__ville-nom { font-family: var(--font-ui); font-size: 17px; font-weight: 500; fill: var(--mist); opacity: .85; paint-order: stroke; stroke: rgba(6, 22, 32, .85); stroke-width: 4px; stroke-linejoin: round; } /* L'ancre porte la position en attribut SVG ; ce groupe-ci porte l'échelle et l'animation en CSS. Les mélanger fait disparaître les épingles. */ .c-carte__ancre { pointer-events: none; } .c-carte__lien .c-carte__ancre { pointer-events: auto; } .c-carte__epingle { /* * L'origine est le point d'ancrage lui-même — soit (0,0) dans le repère * local du groupe, qui est la pointe de l'épingle. `center bottom` se * rapporte au viewBox ENTIER quand `transform-box` n'est pas posé : les * épingles agrandies partaient à l'autre bout du dessin. */ transform-origin: 0 0; animation: eurocap-epingle 2.6s var(--ease) infinite; animation-delay: calc(var(--rang, 0) * 180ms); } .c-carte__oeil { fill: var(--craie); } .c-carte__goutte { fill: var(--red-brand); stroke: rgba(6, 22, 32, .9); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .c-carte__halo { fill: rgba(232, 58, 81, .22); transform-box: fill-box; transform-origin: center; animation: eurocap-onde 3.4s var(--ease) infinite; } /* -- Réseau ------------------------------------------------------------ */ /* * LE BANDEAU DES CHIFFRES — `.v-dist`, le bandeau qui ferme le hero de * creanor.fr en production, aux valeurs près. * * Les quatre chiffres occupaient une SECTION entière, en quatre cartes de * 16/18 à coins arrondis, avec ombre et basculement à sept degrés. Ils * ferment maintenant le hero, et le dessin est celui de la production : * `.v-dist` n'a AUCUNE boîte. Un filet d'un pixel en haut, les colonnes * réparties par `space-between`, un séparateur d'un pixel sur 62 % de * hauteur entre elles. Le dégradé du hero traverse le bandeau, qui n'est * pas une barre posée dessus mais sa dernière ligne. * * Valeurs relevées sur creanor.fr, appliquées telles quelles — le bandeau * étant désormais sur le même fond nuit que le sien, il n'y a plus rien à * transposer : * .v-dist border-top 1px rgba(143,163,176,.20) * .v-dist__in max-width 1240px; padding-inline 36px (nos --shell/--gut) * .v-dist__liste display:flex; flex-wrap:wrap; justify-content:space-between * .v-dist__item flex:1 1 0; colonne; centré; gap 2px; padding clamp(10,1.4vh,15)px 16px * ::after 1px × 62 %, rgba(143,163,176,.22), à droite, centré * .v-dist__val Archivo 800, clamp(1.25rem,1.55vw,1.6rem), 1.05, -.01em, #F4677A * .v-dist__lieu clamp(11.5px,.95vw,13px), #A9BCC7 */ .c-bandeau { position: relative; z-index: 2; width: 100%; flex: none; margin-top: clamp(16px, 2.2vh, 30px); border-top: 1px solid rgba(143, 163, 176, .20); } .c-chiffres { display: flex; flex-wrap: wrap; justify-content: space-between; } .c-chiffre { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: clamp(10px, 1.4vh, 15px) 16px; transition: transform .3s var(--ease); } .c-chiffre:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 62%; background: rgba(143, 163, 176, .22); } .c-chiffre:hover { transform: translateY(-2px); } .c-chiffre__valeur { display: flex; align-items: baseline; justify-content: center; gap: 0; font-family: var(--font-ui); font-size: clamp(1.25rem, 1.55vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; font-variant-numeric: tabular-nums; /* * `--red-on-dark` (#F4677A) : c'est EXACTEMENT la valeur de * `.v-dist__val` en production. Le bandeau avait un temps vécu sur le * fond clair d'une section, où ce corail serait tombé sous le seuil et * où il fallait donc `--red-on-light` ; en revenant sur le nuit du hero, * il retrouve le jeton de la charte prévu pour ce fond, qui y tient * 5,6:1 — et l'écart avec creanor disparaît de lui-même. */ color: var(--red-on-dark); white-space: nowrap; } /* * LE PRÉFIXE EST DEVENU UN SIGNE, PAS UNE LOCUTION. * * Il portait « plus de » (« over » en anglais), et il était donc dessiné plus * petit et en graisse de texte : une qualification du nombre, et non une * partie de celui-ci. Le commanditaire l'a remplacé par « + », qui EST une * partie du nombre — « +200 » se lit d'un seul tenant. * * Il prend donc la taille et la graisse du chiffre, et l'écart de .3em qui * séparait les deux mots tombe à zéro : à .3em, on lisait « + 200 ». */ .c-chiffre__prefixe { font-size: 1em; font-weight: 800; letter-spacing: -.02em; } .c-chiffre__quoi { display: flex; flex-direction: column; gap: 2px; } .c-chiffre__label { display: block; font-family: var(--font-ui); font-size: clamp(11.5px, .95vw, 13px); font-weight: 600; color: var(--fg); } .c-chiffre__detail { display: block; font-size: 12px; line-height: 1.45; color: var(--fg-faint); } /* -- Parcs ------------------------------------------------------------- Le tilt est piloté par --rx / --ry, posés en JavaScript. Sans script, les variables valent 0 et la carte reste simplement plate. */ /* * `.c-parks__grid` en production : 12 px d'écart et une perspective de * 1600 px. Nous avions 24 et 1400 — deux fois l'écart, et une perspective * plus courte, donc une inclinaison plus violente à angle égal. */ .c-parcs__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; perspective: 1600px; } /* * `.c-park` en production. Trois choses qu'on n'avait pas : le rayon est * de 14 px et non 16, la carte porte une ombre AU REPOS * (0 10px 24px -20px), et le survol incline sur l'axe X seulement. * * La courbe est `.45s var(--ease)` sur la transformation mais `.45s ease` * sur l'ombre et la bordure : CREANOR ne met sa courbe que là où quelque * chose se déplace. Repris tel quel. */ .c-parc { display: flex; flex-direction: column; background: var(--carte-bg); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px -20px rgba(8, 31, 45, .6); transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .45s var(--ease), box-shadow .45s ease, border-color .45s ease; will-change: transform; } .c-parc:hover { box-shadow: 0 30px 54px -30px rgba(8, 31, 45, .5); border-color: rgba(232, 58, 81, .35); } .c-parc__media { position: relative; /* * Hauteur FIXE de 132 px, comme `.c-park__media` en production — et non * un rapport 16/10, qui donnait 237 px dans une colonne de 380. La * photo d'un parc y est un repère, pas le sujet : chez lui elle fait * 128 px de haut dans une colonne de 368, soit les mêmes proportions. * 105 px gagnés par carte, sur deux rangées. */ height: 132px; overflow: hidden; background: var(--cream-deep); } .c-parc__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease); } .c-parc:hover .c-parc__img { transform: scale(1.05); } .c-parc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(232, 58, 81, .24), transparent 62%); opacity: 0; transition: opacity var(--dur) var(--ease); } .c-parc:hover .c-parc__media::after { opacity: 1; } .c-parc__corps { display: flex; flex-direction: column; flex: 1; /* `.c-espace { padding: 20px 22px 18px }` en production. */ padding: 20px 22px 18px; } .c-parc__ville { display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red-on-light); } .c-parc__ville svg { width: 15px; height: 15px; } .c-parc__titre { margin-top: 6px; font-size: 20px; letter-spacing: 0; } .c-parc__accroche { margin-top: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--slate); } /* `.c-espace__text` : 13,5 px sur 1,55, et 44 signes de large. */ .c-parc__texte { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* 14 px au-dessus et 6 entre les lignes : l'écart que la production met sous un texte de carte et entre les éléments d'une liste de carte. */ .c-parc__points { margin-top: 14px; display: grid; gap: 6px; } .c-parc__points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--slate); } .c-parc__points svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--red-on-light); } .c-parc__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--red-on-light); } .c-parc__cta svg { width: 17px; height: 17px; transition: transform var(--dur-court) var(--ease); } .c-parc__cta:hover svg { transform: translateX(4px); } /* -- Services ---------------------------------------------------------- */ .c-services__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 12 px, § 20 de la production. */ gap: 12px; } /* * `.c-service` en production, § 18 : « le fond du parent, un voile de craie * à 6 %, est retiré — onze cartes pleines faisaient un mur, et c'est ce * constat-là qui les avait évidées ». Rembourrage 14/16/15, bordure à 16 % * de craie, et surtout un basculement en trois dimensions au survol, que * nous n'avions pas : nous nous contentions d'un translateY de 3 px. */ .c-service { position: relative; overflow: hidden; padding: 14px 16px 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: transparent; transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s ease, border-color .45s ease, background .45s ease; } .c-service::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--red-brand), rgba(232, 58, 81, 0) 78%); transition: background .45s ease; } .c-service:hover { transform: translateY(-6px) rotateX(3deg) rotateY(-3deg); /* « Sur un fond sombre, une ombre bleutée ne se voit pas » : celle-ci est noire à 62 %, et non l'ombre de nuit de la charte. */ box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .62); border-color: rgba(232, 58, 81, .42); /* Un voile de craie, pas un aplat : la carte s'éclaire sans quitter le fond. */ background: rgba(255, 255, 255, .07); } .c-service:hover::before { background: linear-gradient(90deg, var(--red-brand), rgba(232, 58, 81, 0) 92%); } .c-service__icone { display: block; color: var(--red-on-dark); } .c-service__icone svg { width: 24px; height: 24px; } /* * Les cartes de services, § 20 de la surcouche de production : « le texte * suit la réduction — à taille inchangée dans une carte plus petite, il * paraîtrait à l'étroit ». Sur-titre 10 px à 0,16em, titre 14,5 px avec * 7 px au-dessus et 5 en dessous, corps 12,5 px sur 1,5. * * Le sur-titre est rose (`.c-service__kicker` de la production), pas gris : * c'est la même famille que `.c-kicker--clair`, à 8,15:1 sur le nuit. */ .c-service__kicker { margin-top: 16px; font-family: var(--font-ui); font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); } /* * Le second libellé d'une colonne — « Accueil » sous le téléphone — se * détache de ce qui le précède. 12 px, la valeur de creanor.fr, relevée sur * la production : son numéro finit à 68 et son « Accueil » commence à 80. * * CETTE RÈGLE DOIT RESTER APRÈS `.c-footer__label`. Elle était déclarée * avant, à specificité égale : le `margin-top: 0` de la règle de base * gagnait, l'écart valait zéro et le libellé se collait au numéro. Mesuré * ici, ce n'était pas 12 px de moins que la production, c'était 12 px de * moins que rien. */ .c-footer__label--espace { margin-top: 12px; } .c-service__titre { margin: 7px 0 5px; font-size: 14.5px; letter-spacing: 0; } .c-service__texte { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .68); } /* -- Sur mesure -------------------------------------------------------- */ .c-surmesure__haut { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); /* 40 px : `.c-reno__grid` de la production. Nous montions à 64. */ gap: 40px; align-items: start; } .c-surmesure__para { margin-top: 16px; color: var(--muted); max-width: 58ch; } .c-surmesure .c-btn { margin-top: 28px; } .c-etapes { padding: 30px 28px; background: var(--craie); border: 1px solid var(--rule); border-radius: var(--r-carte); box-shadow: var(--ombre-carte); } .c-etapes__titre, .c-preuves__titre, .c-groupe__h3 { font-size: 18px; letter-spacing: 0; } .c-etapes__liste { margin-top: 22px; display: grid; gap: 20px; } .c-etape { display: flex; gap: 16px; } .c-etape__num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--craie); font-family: var(--font-ui); font-size: 13px; font-weight: 800; } .c-etape__titre { font-size: 15px; letter-spacing: 0; } .c-etape__texte { margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* * 18 px, et plus de rembourrage : c'est l'écart que creanor.fr met entre * la grille de sa section « groupe » et le bloc qui la suit (`.c-parks`). * Nous cumulions 77 px de marge ET 64 de rembourrage — 140 px pour séparer * deux blocs d'une même section, contre 18 chez lui. */ .c-preuves { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); } .c-preuves__intro { margin-top: 12px; max-width: 66ch; color: var(--muted); } /* * LES TROIS PREUVES — reprises sur `.c-gcard`, la carte de la section * « groupe » de creanor.fr. * * Ce qu'on lui emprunte n'est pas un habillage mais une DISCIPLINE : sa * tête a une hauteur FIXE (104 px relevés), refermée par un filet. Comme * elle ne bouge pas, le corps de toutes les cartes commence au même pixel, * et l'œil compare trois preuves au lieu d'en lire trois. * * Les nôtres n'avaient aucun point d'accroche commun. Mesuré avant : * le libellé « aujourd'hui » à 35,3 / 32,5 / 56,8 px du haut de sa carte — * 24,3 px d'écart — et le paragraphe de preuve à 123,1 / 141,7 / 166, soit * 42,9 px. Trois cartes de même hauteur dont aucun contenu ne se répondait. * * Le geste : la tête devient une grille à ZONES. Les deux libellés * occupent la première rangée, les deux noms la seconde, la flèche est * centrée sur la rangée des noms. La rangée s'impose à toutes les cartes, * quelle que soit la longueur des noms. * * Le resserrement suit `.c-gcard__body` (20/24/24 contre nos 24/22) et * l'écart de la grille passe de 18 à 16 px, celui de `.c-groupe__grid`. */ .c-preuves__liste { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .c-preuve { display: flex; flex-direction: column; padding: 20px; background: var(--craie); border: 1px solid var(--rule); border-radius: var(--r-carte); } .c-preuve__bascule { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "libAvant . libApres" "nomAvant fleche nomApres"; column-gap: 10px; row-gap: 4px; align-items: start; /* * `align-content: start` va avec la hauteur fixe ci-dessous, et sans lui * elle se retourne contre nous : la valeur par défaut étire les rangées * automatiques pour combler le vide, et chaque carte, ayant un vide * différent, repoussait ses noms d'autant. Mesuré : 58,5 / 50,4 / 41,4. * Le vide doit tomber EN BAS de la tête, pas se partager entre ses * rangées. */ align-content: start; /* * LA HAUTEUR EST FIXE, comme les 104 px de `.c-gcard__head`. * * Les zones alignaient déjà les libellés et les noms, mais le filet du * bas restait mobile : les têtes mesuraient 72,4 / 88,5 / 106,6 px selon * que le nom ou la mention passait à la ligne, et le texte de preuve * démarrait 34,2 px plus bas d'une carte à l'autre. * * 107 px = deux lignes de nom (2 × 18) plus deux lignes de mention, le * pire cas des six libellés, français et anglais confondus. Deux cartes * y gagnent du vide — c'est le prix que creanor.fr paie aussi, et il est * payé volontiers : trois filets au même pixel font trois preuves * comparables, trois filets mobiles font trois paragraphes à lire. */ min-height: 107px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .c-preuve__label--avant { grid-area: libAvant; } .c-preuve__label--apres { grid-area: libApres; } .c-preuve__nom--avant { grid-area: nomAvant; } .c-preuve__nom--apres { grid-area: nomApres; } .c-preuve__label { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .c-preuve__nom { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--ink); /* Deux noms courts sur deux lignes très inégales font une marche d'escalier : équilibrer les lignes coûte zéro pixel et la supprime. */ text-wrap: balance; } .c-preuve__meta { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; font-weight: 400; font-family: var(--font-texte); color: var(--muted); } .c-preuve__nom--apres { color: var(--red-on-light); } /* * La flèche est posée sur la rangée des NOMS, et centrée dessus : c'est * entre les deux noms qu'elle veut dire quelque chose. Centrée sur la tête * entière — ce qu'elle faisait — elle flottait entre le libellé de gauche * et le nom de droite, c'est-à-dire nulle part. */ /* * La flèche se cale sur la PREMIÈRE LIGNE des noms, pas au milieu de leur * rangée : la cellule de gauche porte le nom ET sa mention, la rangée est * donc bien plus haute que la ligne à laquelle la flèche répond. Centrée * dessus, elle descendait de 50,8 à 67,9 px selon la carte. Sa boîte de * 18 px et la ligne de nom de 18,1 px se superposent au dixième près : il * suffit de les faire partir du même haut. */ .c-preuve__fleche { grid-area: fleche; align-self: start; display: flex; } .c-preuve__fleche svg { width: 18px; height: 18px; color: var(--red-brand); } .c-preuve__texte { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* -- Groupe ------------------------------------------------------------ */ /* * Les deux colonnes sont désormais deux colonnes de TEXTE, à parts presque * égales : le titre et le chapô tiennent moins de place que le * développement, d'où le 1fr / 1.05fr. À 1.2 / .8, la seconde étranglait * les paragraphes à quarante caractères. */ .c-groupe__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: start; } /* Le premier paragraphe de la colonne de droite ne prend pas de marge : il doit démarrer au ras du chapô d'en face, pas douze pixels plus bas. */ .c-groupe__para { margin-top: 16px; color: var(--fg-muted); } .c-groupe__suite .c-groupe__para:first-child { margin-top: 0; } /* * Les deux liens sortants de la section, sur une ligne qui se replie. * * Le second n'est pas un bouton : deux boutons côte à côte annonceraient * deux actions de même poids, or l'un mène à l'accueil du groupe et l'autre * à une page qui parle d'EUROCAP. Un lien souligné derrière un bouton * fantôme dit la hiérarchie sans la commenter. */ .c-groupe__liens { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; } .c-groupe .c-btn { margin-top: 28px; } .c-groupe__liens .c-btn { margin-top: 0; } .c-groupe__liens .c-lien-sortant { display: inline-flex; align-items: center; gap: 7px; /* La cible tactile de la WCAG 2.2 se prend sur le rembourrage, et les marges négatives l'empêchent d'écarter la ligne — même mécanique que sur le lien du bloc RGPD. */ padding-block: 8px; margin-block: -8px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); } .c-groupe__liens .c-lien-sortant svg { width: 15px; height: 15px; } .c-groupe__liens .c-lien-sortant:hover { text-decoration-color: currentColor; } .c-filiales { margin-top: 30px; } /* Cinq filiales depuis le relevé de groupebeci.com, donc cinq colonnes : `.c-groupe__grid` en production met toutes ses cartes sur une ligne, avec 16 px d'écart. */ .c-filiales__grille { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* * `.c-gcard` en production a un rayon de 18 px et se soulève de 8 px sans * basculer. Elle y vit sur du blanc ; ici la section est nuit, donc le * fond et la bordure suivent le traitement que la production réserve aux * cartes sur nuit (§ 18) : évidées, filet à 16 % de craie, voile de craie * à 7 % au survol. L'ombre est noire et non bleutée, pour la même raison. */ /* * Les cartes de filiales, sur le modèle de `.c-gcard` en production : un * bandeau blanc qui porte le logo, surmonté d'un filet rouge de 4 px, puis * un corps. Rayon 18 px, soulèvement de 8 px au survol. */ .c-filiale { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: transparent; transition: transform .45s var(--ease), box-shadow .45s ease, border-color .45s ease, background .45s ease; } .c-filiale:hover { transform: translateY(-8px); box-shadow: 0 34px 64px -34px rgba(0, 0, 0, .62); border-color: rgba(232, 58, 81, .4); background: rgba(255, 255, 255, .07); } /* * `.c-gcard__head` : 104 px, logo centré, filet sous le pied. * * LE FOND BLANC A DISPARU. Il rendait aux logos les couleurs de * groupebeci.com, ce qui était honnête, mais le résultat mesuré était * mauvais : cinq aplats de craie de 104 px sur une section nuit ont plus * de poids visuel que tout le reste de la rangée réunie — c'est le bandeau * qu'on lisait, pas les marques. Le commanditaire acceptant le blanc sur * transparent, la carte redevient une seule surface. * * Le filet du bas reste, mais en craie à 12 % : c'est lui qui tient la * grille commune des textes, en marquant où finit la tête. */ .c-filiale__bandeau { position: relative; display: flex; align-items: center; justify-content: center; height: 104px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); overflow: hidden; } /* `.c-gcard__rule` : 4 px de rouge de marque en haut de carte. */ .c-filiale__filet { position: absolute; inset: 0 0 auto; height: 4px; background: var(--red-brand); } .c-filiale__logo { display: flex; align-items: center; justify-content: center; /* * EMPILÉES, pas côte à côte. Une seule carte porte deux marques * (STILNOR et ONE HOME, une entité à deux logos). En rangée, chacune * tombait à 78 et 93 px de large pour des dessins qui en demandent 167 * et 183 : le SVG se contentait alors de rétrécir dans sa boîte, et le * lettrage se retrouvait à 11 px de haut là où les voisines tenaient * 30. Empilées, elles ont chacune toute la largeur de la carte. */ flex-direction: column; width: 100%; /* 12 px entre deux marques d'une même entité, écart mesuré sur l'accueil de groupebeci.com entre STILNOR et ONEHOME. */ gap: 12px; /* `.c-gcard:hover .c-gcard__logo { transform: scale(1.04) }` */ transition: transform .5s var(--ease); } .c-filiale:hover .c-filiale__logo { transform: scale(1.04); } /* * ÉCART ASSUMÉ AVEC groupebeci.com : il affiche ses logos à leur TAILLE * NATURELLE, sans normalisation — de 45,7 à 56,1 px de haut et de 136 à * 246 px de large. Dans une colonne de cinq, le plus large ne tiendrait * pas. * * La hauteur ne vient plus d'ici mais du PHP : chaque marque reçoit * `--h-marque`, calculé depuis son viewBox pour que toutes couvrent la même * aire (voir eurocap_logo_hauteur()). Une hauteur commune de 30 px donnait * des taches de 2 174 à 7 714 px² ; à aire égale elles valent 3 900 px² * chacune, et l'encre réellement peinte, mesurée séparément, resserre son * écart de 5,5 à 1,6 fois. */ .c-filiale__marque { display: block; max-width: 100%; } .c-filiale__svg { display: block; height: var(--h-marque, 30px); width: auto; max-width: 100%; } /* * LES LOGOS EN CRAIE. groupebeci.com les publie en couleurs de marque, et * le bandeau blanc leur rendait ce fond ; il n'est plus là. Le commanditaire * accepte le blanc sur transparent : les cinq classes sémantiques posées * par tools/normaliser-logos.py sont ramenées à la craie, sans exception — * un chevron corail survivant au milieu de cinq lettrages blancs ferait * exactement le déséquilibre qu'on vient de corriger. */ .c-filiale__svg .l-encre, .c-filiale__svg .l-ardoise, .c-filiale__svg .l-corail, .c-filiale__svg .l-brume, .c-filiale__svg .l-craie { fill: var(--craie); } .c-filiale__corps { padding: 20px 22px 22px; } .c-filiale__role { margin-top: 0; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); } /* * Le second libellé d'une colonne — « Accueil » sous le téléphone — se * détache de ce qui le précède. 12 px, la valeur de creanor.fr, relevée sur * la production : son numéro finit à 68 et son « Accueil » commence à 80. * * CETTE RÈGLE DOIT RESTER APRÈS `.c-footer__label`. Elle était déclarée * avant, à specificité égale : le `margin-top: 0` de la règle de base * gagnait, l'écart valait zéro et le libellé se collait au numéro. Mesuré * ici, ce n'était pas 12 px de moins que la production, c'était 12 px de * moins que rien. */ .c-footer__label--espace { margin-top: 12px; } /* * LE NOM RÉSERVE SES DEUX LIGNES. * * « BECI AGENCE IMMOBILIÈRE » et « FONCIÈRE IMMOBILIÈRE » passent à la * ligne dans une colonne de cinq, « BECITY » et « EUROCAP » non. Mesuré : * le descriptif démarrait à 173,1 px dans trois cartes et à 190,1 dans les * deux autres. Les textes se réglaient donc sur la longueur du nom, qui * est une propriété de la marque, au lieu de se régler entre eux. * * Deux lignes réservées d'office, et les cinq descriptifs partent du même * pixel. C'est le même geste que la tête de hauteur fixe des cartes de * preuve, et il vient du même endroit : `.c-gcard` de creanor.fr. */ .c-filiale__nom { margin-top: 6px; font-size: 16px; line-height: 1.25; letter-spacing: 0; min-height: calc(2 * 1.25em); } .c-filiale__texte { margin-top: 9px; font-size: 13px; line-height: 1.55; color: var(--fg-muted); } /* -- Demande ----------------------------------------------------------- */ .c-demande__grille { display: grid; /* * 0,8 / 1,2. La feuille de creanor.fr déclare `1fr 1fr`, mais le RENDU * donne 451 et 677 px — soit 40 % / 60 %. C'est le rendu qui fait foi : * notre .68/1.32 donnait un formulaire de 702 px, et le 1fr/1fr auquel * la déclaration invitait le ramenait à 522, quand le sien en fait 677. */ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; } /* * L'en-tête de section, une fois descendu dans une colonne. * * `.c-section__tete` est une LIGNE — titre à gauche, aparté à droite, alignés * par le bas. Dans une colonne de 450 px il n'y a pas de ligne à former : le * `space-between` n'a plus rien à répartir et l'alignement par le bas n'a * plus de voisin. On le remet en bloc, et le titre perd sa borne de 22 signes, * qui le rendrait deux fois plus étroit que la colonne qui le porte. */ .c-section__tete--colonne { display: block; margin-bottom: 28px; } .c-section__tete--colonne .c-h2 { max-width: none; } .c-demande__aside-titre { font-size: 17px; letter-spacing: 0; } .c-contactliste { margin-top: 18px; display: grid; gap: 14px; } /* * La note qui ferme la colonne, sous la ligne « Agence ». Elle vient de * l'aparté de l'en-tête, où elle était en corps de chapô ; ici elle est un * commentaire de colonne et non un argument, d'où le corps plus petit que * les valeurs de la liste au-dessus. * * La dernière ligne de la liste porte déjà un filet bas : la note s'y * appuie et n'en ajoute pas un second. */ .c-demande__note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--fg-faint); } .c-contactliste__ligne { padding-bottom: 13px; border-bottom: 1px solid var(--rule); } .c-contactliste dt { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .c-contactliste dd { margin-top: 5px; font-size: 14.5px; color: var(--ink); } .c-contactliste a { color: var(--red-on-light); padding-block: 5px; display: inline-block; } /* * `.c-formcard` en production : un verre teinté d'encre, pas un aplat * blanc. C'est lui qui donne aux champs leur fond — sur du blanc nu, un * champ de craie à 45 % avec une bordure de craie à 65 % ne se voit pas. * Rembourrage et rayon viennent du § 5, qui les resserre. */ .c-formcarte { padding: 16px 16px 14px; background: linear-gradient(158deg, rgba(8, 31, 45, .07), rgba(8, 31, 45, .03)); backdrop-filter: blur(10px); border: 1px solid rgba(8, 31, 45, .16); border-radius: 16px; box-shadow: 0 30px 60px -44px rgba(8, 31, 45, .55); } /* Les blocs se resserrent avec les champs : 26 → 20 entre deux groupes, 14 → 10 sous un sur-titre. Le formulaire garde son rythme, à l'échelle. */ .c-fieldset { margin: 0 0 16px; padding: 0; border: 0; } .c-legend { padding: 0; margin-bottom: 8px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red-on-light); } /* `.c-fieldrow` en production : deux colonnes, 12 px d'écart. Ramené à 10 en vertical et gardé à 12 en horizontal : c'est l'empilement des lignes qui allongeait le formulaire, pas l'écart entre deux champs d'une même ligne. */ .c-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .c-champ { margin: 0; } .c-champ--large { grid-column: 1 / -1; } /* * Le leurre. Hors écran plutôt qu'en display:none, que les robots * reconnaissent. Il reste techniquement rendu, donc rempli par un script * qui remplit tout — ce qui est exactement le but. */ .c-leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* * LA RÉVÉLATION DU BLOC « AUTRE SECTEUR », EN CSS PUR. * Pas d'écouteur d'événement : choisir « un autre secteur » ouvre les * champs même sans JavaScript. C'est le cœur de la promesse « on vous * accompagne ailleurs », elle ne pouvait pas dépendre d'un fichier JS. */ .c-autre { display: grid; /* * Une seule rangée, un seul enfant. `0fr` ne comprime que les rangées * déclarées : avec plusieurs enfants directs, les suivantes gardaient * leur hauteur automatique et le bloc « replié » occupait encore * 210 px. D'où le div `.c-autre__pli` unique dans le gabarit. */ grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease); } .c-autre__pli { overflow: hidden; min-height: 0; } .c-form:has(#site option[value="autre"]:checked) .c-autre { grid-template-rows: 1fr; opacity: 1; margin-bottom: 26px; } /* Repli pour les navigateurs sans :has() — le bloc reste simplement toujours visible, ce qui est dégradé mais jamais bloquant. */ @supports not selector(:has(*)) { .c-autre { grid-template-rows: 1fr; opacity: 1; margin-bottom: 26px; } } .c-autre__intro { margin-bottom: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); } /* * LE BLOC DE VÉRIFICATION SE RECOLLE AU CHAMP PRÉCÉDENT. * * Il en était séparé de 40 px, mesurés du bas de la zone « Précisions » au * haut du bandeau d'addition : 8 px de champ, puis un sur-titre * « VÉRIFICATION » de 18 px, puis ses 14 px de marge. L'addition * anti-robot se lisait comme une nouvelle section du formulaire alors * qu'elle en est la dernière ligne. * * Le sur-titre passe hors écran plutôt que d'être supprimé : le
* a besoin de sa pour porter un nom accessible, et un groupe de * champs sans nom est annoncé « groupe » et rien d'autre. Mais il ne dit * rien à qui voit : le bandeau porte déjà « Vérification anti-robot — * combien font 5 + 2 ? ». creanor.fr ne met d'ailleurs aucun titre à son * `.c-captcha`, qui suit ses champs dans la même grille. */ /* * IL LUI FAUT UN ÉCART EN HAUT, et pas seulement pour respirer. * * Le bloc n'avait aucune marge haute : ce qui le séparait de la zone * « Précisions » n'était qu'un reste d'arrondi de ligne, et ce reste change * d'un moteur à l'autre. Mesuré à 1440 px sur la page rendue : * * Chromium 8 px WebKit 7 px Firefox 1 px * * Or la mise au point d'un champ dessine un halo de 3 px HORS de sa boîte * (`box-shadow: 0 0 0 3px`). Sous Firefox, cliquer dans « Précisions » * posait donc le halo par-dessus le bandeau de l'addition — c'est le * chevauchement signalé par le commanditaire, et il ne se voyait pas sous * Chromium, où l'on développe. * * Dix-huit pixels laissent le halo au large dans les trois moteurs et ne * dépendent plus de rien. */ .c-verif { margin-top: 18px; margin-bottom: 14px; } .c-verif .c-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } /* * `.c-captcha` en production : un bandeau de verre, comme les champs — même * fond de craie à 45 %, même bordure à 65 %, même rayon de 9 — mais posé à * plat sur toute la largeur, avec 9/12 de rembourrage et 10 px d'écart * entre le libellé, le champ et l'indication. Nous n'avions rien du tout : * l'opération flottait sur le fond de la carte. */ /* * LE BANDEAU SE RÈGLE SUR SON CONTENU, il ne traverse plus la carte. * * Il tenait toute la largeur parce qu'il portait trois choses : la phrase * « Vérification anti-robot — combien font 3 + 8 ? », le champ, et * l'indication « Une addition, pas une image à déchiffrer. ». Il n'en porte * plus que deux, et courtes : à pleine largeur, les deux tiers du verre * étaient vides, et le vide pesait plus que la question. * * `fit-content` le rend solidaire de ce qu'il contient — la question et son * champ deviennent UN objet — et le rapproche d'autant de la case à cocher. */ .c-captcha { display: flex; width: fit-content; max-width: 100%; align-items: center; flex-wrap: wrap; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, .45); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .65); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } /* Dans ce bandeau, le libellé se lit sur une ligne avec le champ : il perd sa marge basse de bloc. */ .c-captcha .c-label { margin-bottom: 0; } /* * Le bouclier, en rouge de marque et non en rouge de texte. * * `--red-brand` (#E83A51) est la valeur de creanor sur cette icône, et c'est * ici son emploi légitime : la charte lui interdit de porter du TEXTE — il * n'a que 4,07:1 — mais un tracé n'est pas du texte, et la WCAG lui demande * 3:1, qu'il tient. * * Dix-huit pixels : à vingt-quatre, l'icône dépassait la hauteur du libellé * et le bandeau grandissait autour d'elle. */ .c-captcha__icone { flex: none; width: 18px; height: 18px; color: var(--red-brand); } .c-captcha__op { font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); } /* * `.c-captcha__input` en production : 64 × 32, rayon 10, fond BLANC PLEIN * et bordure d'encre à 18 % — c'est le seul champ du formulaire qui ne soit * pas en verre, pour qu'on le distingue du bandeau qui le porte. * * DEUX VALEURS REVIENNENT AU STANDARD DU SITE, à la demande du * commanditaire : le rayon passe de 10 à 9 et le corps de 13 à 13,5, comme * `.c-input`, `.c-select` et `.c-textarea`. C'étaient les deux seuls * chiffres du formulaire à n'appartenir à aucune série. * * La largeur, elle, tombe de 64 à 56 : la réponse attendue fait deux * caractères, et un champ trois fois plus large que ce qu'on y écrit se lit * comme un champ de texte libre. Le fond plein et la bordure d'encre * restent — ils sont ce qui le détache du bandeau. */ .c-captcha__input { width: 56px; max-width: 56px; height: 34px; padding: 0 10px; text-align: center; background: var(--craie); border: 1px solid rgba(8, 31, 45, .18); border-radius: 9px; box-shadow: none; font-size: 13.5px; } /* * 11 px sur 1,35, contre les 11,5 sur 1,45 de creanor.fr. C'est le seul * endroit du site où l'on descend sous ses valeurs, et c'est une demande * du commanditaire : cette ligne est une mention de consentement, pas un * argument, et elle passait avant le bloc RGPD au lieu de l'annoncer. * On ne va pas plus bas — voir le plancher documenté sur `.c-rgpd`. */ /* * DIX PIXELS, PAS SEIZE. Le consentement est la ligne qui SUIT l'addition, * pas un bloc d'à côté : à seize, plus les neuf de rembourrage du bandeau, * vingt-cinq pixels les séparaient et l'addition se lisait seule. * C'est aussi l'écart qu'il y a entre le consentement et le bloc RGPD * en dessous — les trois lignes forment désormais une seule colonne au * même pas. */ .c-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 11px; line-height: 1.35; color: #33485A; } /* * LA CASE : 18 px À L'ŒIL, 24 PX À LA MAIN. * * Le commanditaire la trouve trop grosse, et elle l'est : à 22 px de dessin * pour une mention de 11 px sur 1,35 — soit une ligne de 14,85 px — la case * était une fois et demie plus haute que le texte qu'elle accompagne. Rien * dans ce bloc ne pèse autant, et ce n'est pas la case qu'on doit y lire. * * ON NE TOUCHE PAS À LA BOÎTE POUR AUTANT. Elle reste à 24 px, parce que * c'est la cible tactile exigée par la WCAG 2.2 et que l'audit du site la * mesure. Le mécanisme était déjà en place et il suffisait de l'ouvrir plus * grand : le rembourrage est transparent, `background-clip: content-box` * arrête le remplissage à l'intérieur, et le contour rentre d'autant. Trois * pixels au lieu d'un ramènent le dessin de 22 à 18, sans retirer un seul * pixel cliquable. * * La coche suit — 12 px au lieu de 15 — sinon elle déborderait du carré * qu'elle habite. */ .c-consent input { flex: none; appearance: none; width: 24px; height: 24px; padding: 3px; margin-top: 0; background-clip: content-box; background-color: transparent; border: 0; border-radius: 8px; outline: 1px solid rgba(8, 31, 45, .34); outline-offset: -3px; cursor: pointer; } .c-consent input:checked { background-color: var(--red-surface); outline-color: var(--red-surface); } /* La coche, dessinée dans le remplissage plutôt qu'ajoutée : un pseudo-élément sur un n'est pas garanti hors Chromium. */ .c-consent input:checked { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m5%2012.5%205%205L19%207'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } /* Le contour de mise au point doit rester celui du site, pas celui-ci. */ .c-consent input:focus-visible { outline: 3px solid var(--red-brand); outline-offset: 2px; } /* * LE CORPS NE BOUGE PAS, L'INTERLIGNE OUI. * * 10 px, c'est la valeur de creanor.fr, et c'est un PLANCHER qu'il a payé * pour connaître : sa surcouche raconte qu'à 9,5 px l'encre est « presque * entièrement diluée par l'anticrénelage », mesurée à 3,89:1 alors que sa * couleur en vaut 6,59 — « le seuil n'est pas franchi par la teinte mais * par la taille ». On ne descend donc pas, et un audit de contraste qui lit * les couleurs calculées ne le verrait pas venir. * * L'interligne, lui, passe de 1,5 à 1,4. */ .c-rgpd { margin-top: 10px; font-size: 10px; line-height: 1.4; color: #33485A; } /* * LE VRAI COUPABLE DE « L'ÉCART TROP GRAND » : ce lien. * * Mesuré : le bloc faisait 43,5 px pour deux lignes de 10 px, là où * l'interligne en promettait 30. La ligne qui porte le lien mesurait 28,5 px * à elle seule. Un `inline-block` contribue à la hauteur de sa ligne par sa * boîte de MARGE, et ses 6 px de rembourrage haut et bas — indispensables, * ils portent la cible tactile de 24 px de la WCAG 2.2 — écartaient les deux * lignes de douze pixels de plus que l'interligne du paragraphe. Ce n'était * pas un réglage de texte, c'était une cible tactile qui poussait. * * Des marges négatives de la même valeur annulent la contribution sans rien * retirer à la boîte : la ligne retrouve ses 14 px, le lien garde ses 27. * Retirer le rembourrage aurait réglé l'écart en cassant l'accessibilité, * et le déplacer dans un pseudo-élément l'aurait caché de l'audit, qui * mesure la boîte de l'élément. */ .c-rgpd a { color: var(--red-on-light); font-size: 11px; font-weight: 600; text-decoration: underline; display: inline-block; padding-block: 6px; margin-block: -6px; } /* `.c-submit` : 13 px de rembourrage, 14,5 px de corps, rayon 10, et l'ombre accordée au rouge du bouton (§ 28), pas au rouge de marque. */ .c-submit { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: var(--red-surface); color: var(--craie); font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; line-height: normal; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(212, 39, 67, .85); transition: background-color var(--dur-court) var(--ease), transform var(--dur-court) var(--ease); } .c-submit:hover { background: var(--red-on-light); transform: translateY(-2px); } .c-submit[disabled] { opacity: .6; cursor: progress; transform: none; } .c-formerreur { margin-bottom: 18px; padding: 13px 16px; border-radius: var(--r-champ); background: rgba(232, 58, 81, .09); border: 1px solid rgba(194, 31, 55, .3); font-size: 13.5px; color: var(--red-on-light); } .c-envoye { text-align: center; padding-block: 20px; } .c-envoye__marque { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: rgba(123, 226, 168, .18); color: var(--green-deep); } .c-envoye__marque svg { width: 28px; height: 28px; } .c-envoye__titre { font-size: 24px; letter-spacing: 0; } .c-envoye__texte { margin: 12px auto 24px; max-width: 46ch; color: var(--muted); } /* -- Pied de page ------------------------------------------------------ */ /* * Le pied de page, relevé sur creanor.fr en production. * * Le rythme y est BEAUCOUP plus serré qu'ici : 26 px en haut et 14 en bas, * là où EUROCAP montait à 88. Le pied de page de CREANOR fait 248 px de * haut au total — c'est une signature, pas une section. */ .c-footer { position: relative; background: var(--ink); color: var(--fg); overflow: hidden; } .c-footer__inner { position: relative; padding-block: 26px 14px; } /* * La lueur. Contrairement à celle du hero, que le thème de production met * en `display: none`, CELLE-CI VIT : mesurée à 2,5 s d'intervalle, son * opacité passe de 0,51 à 0,72 et son échelle de 1,002 à 1,050. Elle sort * par le bas À GAUCHE, et non par le haut à droite. */ .c-footer__lueur { position: absolute; bottom: -260px; left: -160px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 58, 81, .28), rgba(232, 58, 81, 0) 68%); animation: eurocap-lueur 11s ease-in-out infinite; pointer-events: none; } .c-footer__grille { position: relative; /* * QUATRE COLONNES, LA PREMIÈRE EN COUVRANT DEUX — trois blocs visibles, * exactement le compte de creanor.fr en production : contact, * téléphone, groupe. * * Ce qui SE VOIT dans son pied de page, c'est le bloc double à gauche * et les colonnes étroites à droite, bien plus que la largeur exacte * d'une colonne. Il y en avait cinq ici, pour une colonne de plus qui * reprenait les six parcs en liste ; elle est partie avec le reste du * remplissage. */ grid-template-columns: repeat(4, minmax(0, 1fr)); display: grid; align-items: start; gap: 24px; } /* `.c-footer__wide { grid-column: span 2 }` en production. */ .c-footer__bloc--large { grid-column: span 2; } /* `.c-footer__brand svg { height: 28px }` en production, dans la barre. */ .c-footer__marque { display: flex; align-items: center; gap: 16px; } .c-footer__logo { height: 28px; width: auto; } .c-footer .l-encre, .c-footer .l-ardoise { fill: var(--craie); } .c-footer .l-corail { fill: var(--red-brand); } /* `.c-footer__addr` de creanor.fr : 13 px, interligne 1,55, craie pleine pour le nom, et 68 % pour les lignes qui suivent. */ /* 11 px sous le titre : creanor.fr finit son « Contact » à 53 et commence son adresse à 64. */ .c-footer__adresse { margin-top: 11px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .68); } .c-footer__nom { display: block; font-weight: 700; color: var(--craie); } /* * Le § 1 de la surcouche de production fait passer ce titre d'Archivo 800 * à Jost 700 avec l'interlettrage remis à zéro, et son § 1 bis lui donne * 19 px — pas les 17 du parent, ni les 15 qu'on avait ici. */ .c-footer__h { font-family: var(--font-display); font-weight: 700; font-size: 19px; /* creanor.fr ne pose pas d'interligne ici : son n'en a pas, ce titre hérite donc de `normal` et fait 27 px. Le nôtre héritait de 1,06 et tombait à 20 — sept pixels de moins par titre. */ line-height: normal; letter-spacing: 0; margin-bottom: 10px; color: var(--craie); } .c-footer__tel { display: block; width: fit-content; /* * LE REMBOURRAGE EST CELUI DE creanor.fr — 3 px — et la cible fait * quand même 24 px. * * Sa cible à lui mesure 23,0 px : Archivo 700 à 16 px donne une ligne * de 17,4 px en interligne `normal`, plus 6 de rembourrage. Il manque * un demi-pixel pour le seuil de WCAG 2.2. J'avais d'abord monté le * rembourrage à 4 px, ce qui déplaçait tout ce qui suit de 2 px ; le * demi-pixel se prend sur l'INTERLIGNE, qui ne déplace rien puisque le * texte reste centré dans sa ligne : 16 × 1,1 = 17,6 px, soit 23,6 au * total. Six dixièmes de pixel d'écart avec la sienne. */ padding-block: 3px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--craie); } .c-footer__tel:hover { color: var(--pink); } .c-footer__label { margin-top: 0; margin-bottom: 8px; font-family: var(--font-ui); font-size: 10px; font-weight: 400; line-height: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); } /* * Le second libellé d'une colonne — « Accueil » sous le téléphone — se * détache de ce qui le précède. 12 px, la valeur de creanor.fr, relevée sur * la production : son numéro finit à 68 et son « Accueil » commence à 80. * * CETTE RÈGLE DOIT RESTER APRÈS `.c-footer__label`. Elle était déclarée * avant, à specificité égale : le `margin-top: 0` de la règle de base * gagnait, l'écart valait zéro et le libellé se collait au numéro. Mesuré * ici, ce n'était pas 12 px de moins que la production, c'était 12 px de * moins que rien. */ .c-footer__label--espace { margin-top: 12px; } .c-footer__horaires { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .68); } .c-footer__liste { margin-top: 0; display: grid; gap: 0; } .c-footer__lien { display: block; width: fit-content; /* 12 px sur 1,55 = 18,6 px de ligne ; 3 px de part et d'autre portent la cible à 24,6 px. Valeur et raisonnement repris du § 16 de la production. */ padding-block: 3px; font-size: 12px; line-height: 1.55; text-decoration: none; color: var(--craie); } .c-footer__lien:hover { color: var(--pink); } .c-footer__barre { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); } .c-footer__legal { font-size: 11.5px; line-height: 2; letter-spacing: .02em; color: rgba(255, 255, 255, .55); } /* * Les deux liens légaux, maintenant dans cette ligne, faisaient 15 px de * haut. Règle du § 16 de la production, reprise telle quelle : rendus en * bloc en ligne, ils prennent 6 px de rembourrage vertical et ne se coupent * pas. L'interligne de 2 fait le reste — 35 px de cible. */ .c-footer__legal a { display: inline-block; padding-block: 6px; white-space: nowrap; color: rgba(255, 255, 255, .65); } .c-footer__legal a:hover { color: var(--craie); } /* -- Pages intérieures -------------------------------------------------- */ /* * LES PAGES INTÉRIEURES, relevées sur creanor.fr/mentions-legales/. * * Leur dessin n'est pas celui de l'accueil : un bandeau nuit qui porte le * titre, puis un corps CRÈME — et non blanc — de 900 px de large, où * chaque bloc est une carte blanche. Nous servions une page blanche à plat, * sans bandeau et sans cartes. * * Le crème est bien la valeur relevée (`.c-legal` = rgb(245,243,239)) : le * § 25 de la production fait passer l'ACCUEIL au blanc, pas les pages * intérieures, qui gardent le crème pour que les cartes s'en détachent. */ .c-page { background: var(--cream); color: var(--ink); min-height: 70vh; } /* Le bandeau du titre. 130 px en haut : la barre est fixe et le couvre. */ .c-page__bandeau { position: relative; overflow: hidden; background: var(--ink); /* * On bascule les RÔLES, pas seulement `color` : `.c-h1` pose * explicitement `color: var(--fg)`, et sans cette redéfinition le titre * s'affichait en bleu nuit sur bleu nuit. Même piège que sur le hero, * et même parade que `.c-section--nuit`. */ --bg: var(--ink); --fg: var(--craie); --fg-muted: rgba(255, 255, 255, .76); --fg-faint: var(--mist); --accent: var(--red-on-dark); color: var(--fg); } /* * LE SEMIS DE CHEVRONS DÉRIVANTS — ici, et ICI SEULEMENT. * * Le thème de production masque ce motif sur l'accueil (`.c-services__ * chevrons { display: none }`), ce qui rend son hero immobile. Sa page de * mentions légales, elle, le garde et l'anime : mesuré, 7,95 % de sa * surface change en 2,5 secondes. Ce n'est donc pas un oubli de sa part, * c'est une différence assumée entre l'accueil et les pages intérieures. * * Le jeton --chevrons-soft était conservé « pour mémoire, non utilisé » * depuis le travail sur le hero. Il a enfin son emploi. */ .c-page__bandeau::before { content: ""; position: absolute; inset: 0 0 0 -320px; background-image: var(--chevrons-soft); background-size: 160px 120px; animation: eurocap-derive 22s linear infinite; will-change: transform; pointer-events: none; } .c-page__bandeau-inner { position: relative; padding-block: 130px 48px; } .c-page__bandeau .c-kicker { color: var(--pink); } .c-page__corps { max-width: 900px; margin-inline: auto; padding-block: 48px 64px; } .c-page__actions { margin-top: 32px; } /* `.c-legal__block` : une carte blanche par section. */ .c-page__bloc { margin: 0 0 14px; padding: 24px 28px; background: var(--craie); border: 1px solid rgba(8, 31, 45, .1); border-radius: 16px; box-shadow: 0 10px 24px -22px rgba(8, 31, 45, .6); } .c-page__bloc h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: 0; } .c-page__bloc p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--slate); } .c-page__bloc p:last-child { margin-bottom: 0; } .c-page__bloc strong { color: var(--ink); } /* * Le rembourrage vertical sur un élément EN LIGNE agrandit sa boîte sans * pousser les lignes voisines : la cible passe de 21 à 25 px et rien ne * bouge à l'œil. Un `display: inline-block` aurait marché aussi, mais il * empêche la coupure en fin de ligne — et ces blocs contiennent de longues * adresses de courriel. */ .c-page__bloc a { color: var(--red-on-light); text-decoration: underline; padding-block: 2px; } .c-page__bloc ul { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.7; color: var(--slate); } .c-page__bloc li { margin-bottom: 4px; list-style: disc; } .c-page__bloc li { position: relative; padding-left: 18px; color: var(--slate); } .c-page__bloc li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--red-brand); } /* -- Le fil ------------------------------------------------------------ * * Repère de position sur le bord droit, relevé sur creanor.fr en * production. Il n'existe QUE dans le thème enfant : `grep v-fil` sur la * feuille du parent ne renvoie rien. Une requête DOM filtrant sur une * hauteur > 40 px ne pouvait pas le trouver — chaque trait fait 2 px de * haut, et le plus grand de ses nœuds est un
  • de 20 px. * * Toutes les valeurs sont transcrites telles quelles : 22 px du bord, * 14 px entre les étapes, 10 px entre le mot et le trait, traits de * 16 → 30 (survol) → 34 px (courant), 2 px d'épaisseur, rayon 2 px. * ------------------------------------------------------------------- */ .c-fil { position: fixed; top: 50%; right: 22px; transform: translateY(-50%); z-index: 40; /* Le fil laisse passer les clics là où il n'a rien à cliquer : sans cela, sa colonne invisible couvrirait le bord droit des sections. */ pointer-events: none; } .c-fil__liste { display: flex; flex-direction: column; align-items: flex-end; /* * creanor.fr écrit 14 px. Ce qui se voit n'est pas l'écart entre les * boîtes mais le PAS d'un trait au suivant : chez lui 20 px de lien * + 14 d'écart = 34 px. Le rembourrage du lien étant porté à 5 px ci * dessous pour la cible tactile, l'écart descend d'autant et le pas * reste 34 px, au pixel. C'est la mesure qui a tranché : comparés * boîte à boîte, 14 px donnaient un fil 24 px plus long. */ gap: 10px; list-style: none; margin: 0; padding: 0; } .c-fil__lien { pointer-events: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; /* * ÉCART ASSUMÉ. creanor.fr met 3 px, ce qui donne une cible de 20 px * — sous les 24 px de WCAG 2.2, et l'audit d'EUROCAP le refuse. Le * mot fait 14 px sur un interligne qui le porte à 20 : 5 px de part * et d'autre donnent 30 px. Rien ne bouge à l'œil, le fil n'ayant * aucun fond ni bordure ; seul l'écart entre étapes se lit, et il * reste réglé par le `gap` de la liste. */ padding: 5px 0; text-decoration: none; color: inherit; } .c-fil__mot { /* * creanor.fr déclare cette pile SANS héberger IBM Plex Mono : le * relevé CDP donne `isCustomFont: false`. Chez lui comme ici, c'est * donc la mono du système qui compose ces mots. Reprendre la pile * telle quelle reproduit exactement son rendu, sans requête externe. */ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; /* * creanor.fr ne déclare rien ici et hérite donc de `normal`, son * n'ayant pas d'interligne. EUROCAP en pose un sur : * hérité, il portait ce mot de 14 à 17 px et allongeait tout le fil. */ line-height: normal; /* * creanor.fr écrit #7C8B99, qui ne tient que 3,4:1 sur le blanc — et * ce mot devient visible au survol du fil. On prend le gris déjà * assombri de la charte, qui est la même intention à 5,56:1. */ color: var(--muted); opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1), color .3s ease; } .c-fil__trait { display: block; width: 16px; height: 2px; border-radius: 2px; background: #9FB0C2; opacity: .5; transition: width .35s cubic-bezier(.16, 1, .3, 1), background .3s ease, opacity .3s ease; } /* Survol du fil entier : tous les libellés paraissent — on cherche une section, autant les montrer. */ .c-fil:hover .c-fil__mot, .c-fil:focus-within .c-fil__mot { opacity: 1; transform: none; } .c-fil__lien:hover .c-fil__trait, .c-fil__lien:focus-visible .c-fil__trait { width: 30px; opacity: 1; background: var(--red-brand); } .c-fil__lien:hover .c-fil__mot, .c-fil__lien:focus-visible .c-fil__mot { color: var(--ink); } /* La section courante : trait long, rouge, et nom affiché en permanence. */ .c-fil__lien.est-courant .c-fil__trait { width: 34px; opacity: 1; background: var(--red-brand); } .c-fil__lien.est-courant .c-fil__mot { opacity: 1; transform: none; color: var(--ink); font-weight: 600; } /* Sur fond sombre le fil s'inverse. La classe est posée par le script, qui lit la couleur du TEXTE de la section — jamais son fond : un fond en dégradé a une `background-color` transparente, qui ne dit rien. */ /* #9FB0C2 et non --mist (#8FA3B0) : la mesure les sépare de 16 points de rouge. Les deux passent largement AA sur le nuit, on prend donc la valeur de creanor.fr. */ .c-fil.est-sombre .c-fil__mot { color: #9FB0C2; } .c-fil.est-sombre .c-fil__lien:hover .c-fil__mot, .c-fil.est-sombre .c-fil__lien:focus-visible .c-fil__mot, .c-fil.est-sombre .c-fil__lien.est-courant .c-fil__mot { color: var(--craie); } .c-fil.est-sombre .c-fil__trait { background: #C7D3DC; } } /* ======================================================================== RESPONSIVE — dans la couche des sections, pour rester au même niveau ===================================================================== */ @layer sections { @media (max-width: 1100px) { /* * Une seule colonne : la carte n'a plus de texte à côté d'elle, donc * plus rien derrière quoi déborder. Le débordement et son voile * s'annulent tous les deux — laissés en place, ils tiraient le dessin * hors de l'écran par la gauche. */ .c-hero__inner { grid-template-columns: 1fr; gap: 40px; } .c-hero__copie::before { display: none; } /* * LA CARTE PERD SON DÉTAIL DE SECOND RANG, parce qu'ici le texte est * PAR-DESSUS elle et non plus à côté. * * En deux colonnes, le dessin s'efface là où le texte commence : le * dégradé de `.c-hero__carte` le dissout sur sa moitié gauche, et la * colonne de texte tombe exactement dans cette moitié. En une colonne, * le texte occupe TOUTE la largeur — le dégradé, qui ne travaille que * sur l'axe horizontal, ne protège plus rien. Mesuré à 1100 px de * large : « Le Touquet », « Berck », « Fruges » et « Hesdin » se * posaient au milieu du paragraphe, en gris sur du gris. * * Baisser l'opacité de l'ensemble ne marche pas : les épingles et les * villes des parcs sont dans la même zone, et ce sont elles le sujet. * On retire donc ce qui n'est que du décor de fond — villes * secondaires, repères anglais, noms de mers — et on garde le trait de * côte, les six épingles et les villes où sont les parcs. C'est ce que * fait toute carte qu'on réduit : elle abandonne son second rang avant * d'abandonner son sujet. */ .c-hero .c-carte__ville, .c-hero .c-carte__repere { display: none; } .c-hero__inner { padding-block: 116px 48px; } .c-surmesure__haut, .c-groupe__haut { grid-template-columns: 1fr; } .c-parcs__grille, .c-services__grille, .c-preuves__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-filiales__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-footer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-demande__grille { grid-template-columns: 1fr; } /* * Sous 1101 px, la place manque et le pouce défile : le fil * disparaît. Le balisage reste dans la page, où il sert de table des * matières aux lecteurs d'écran. Même seuil que creanor.fr. */ .c-fil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* * VARIANTES EN HAUTEUR — le hero doit tenir dans la fenêtre. * * Il porte désormais TROIS choses qui se disputent la place : le bloc de * contenu, l'indicateur « Découvrir » — qui n'a de sens que s'il est vu — * et le bandeau des chiffres, arrivé le dernier. L'échelle avait été réglée * pour deux : mesurée à l'arrivée du bandeau, elle dépassait de 18 px à * 800 de haut, de 24 à 720, de 9 à 640 et de 29 à 620. * * Trois paliers ne suffisaient plus : les creux tombaient au mauvais * endroit, 800 héritant du palier de 880 et 720 de celui de 780. Ils * passent à cinq, calés sur les hauteurs à contrôler. * * Ce qui coûte de la place, dans l'ordre où on le prend : les marges du * hero, celles de l'indicateur, la carte — dont la hauteur suit la largeur * de sa colonne — puis le titre, puis le bandeau lui-même. Le bandeau est * servi en dernier : il est la raison d'être de l'opération. * * Ce qu'on ne coupe JAMAIS, à aucune hauteur : la ligne de précision sous * chaque chiffre (« implantées dans le réseau », « travaillent sur les * sites »). C'est elle qui dit de qui l'on parle — sans elle, 2 000 * salariés deviennent ceux d'EUROCAP. Un chiffre sans sa source ne se * publie pas, fût-ce sur un écran court. * * Contrôlé par tools/hauteur-hero.mjs, qui mesure le BAS du bandeau et le * BAS de l'indicateur contre la ligne de flottaison — et non la hauteur du * hero, qui peut valoir la fenêtre tout en débordant de son contenu. */ @media (min-width: 1101px) and (max-height: 900px) { /* La base étant descendue à 104/36, ce premier palier passe sous elle : sinon il augmentait le bas de 4 px quand l'écran raccourcit. */ .c-hero__inner { padding-block: 96px 26px; } .c-hero__inner { gap: 40px; } .c-hero__titre { font-size: clamp(30px, 3.2vw, 46px); } .c-hero__para { margin-top: 16px; } .c-hero__actions { margin-top: 24px; } .c-hero__legende { margin-top: 12px; } .c-scroll { margin-top: 14px; } } @media (min-width: 1101px) and (max-height: 800px) { .c-hero__inner { padding-block: 88px 18px; } .c-hero__inner { gap: 30px; } .c-hero__titre { font-size: clamp(28px, 2.8vw, 40px); } .c-hero__para { font-size: 15px; } .c-hero__actions { margin-top: 20px; } .c-hero__legende { font-size: 11px; gap: 4px 10px; } .c-scroll { margin-top: 12px; } /* « Écran bas et large : le bandeau se resserre sans perdre son corps — c'est la hauteur qui manque, pas la lisibilité. » (creanor.fr) */ .c-chiffre { padding-block: 8px; } } @media (min-width: 1101px) and (max-height: 740px) { .c-hero__inner { padding-block: 82px 12px; } /* * La légende des six villes sous la carte passe à la trappe ici et non * plus à 680 px. Elle pèse 94 px dans la colonne de la carte, et à * cette hauteur c'est elle qui forçait le plancher de 300 px du clamp : * le budget ne demandait plus que 245 px de colonne, le plancher en * imposait 300, et le hero dépassait de 19 px au-delà de 1 500 px de * large. Les six noms sont de toute façon écrits en clair dans « Les * parcs », juste en dessous. */ .c-hero__legende { display: none; } .c-hero__inner { gap: 26px; } /* Le plafond descend de 36 à 32 px. Au-delà de 1 500 px de large, la borne haute du clamp est atteinte et le titre reprenait 4 px par ligne : mesuré en 1920 × 681, la colonne de texte redevenait la plus haute des deux et le hero dépassait de 19 px. La carte, elle, n'y était pour rien. */ .c-hero__titre { font-size: clamp(26px, 2.4vw, 32px); } .c-scroll { margin-top: 10px; } .c-chiffre__valeur { font-size: 1.2rem; } } @media (min-width: 1101px) and (max-height: 680px) { .c-hero__inner { padding-block: 78px 8px; } .c-hero__inner { gap: 22px; } .c-hero__titre { font-size: clamp(24px, 2.1vw, 32px); } .c-bandeau { margin-top: 10px; } .c-scroll { margin-top: 8px; } } @media (min-width: 1101px) and (max-height: 640px) { .c-hero__inner { padding-block: 74px 6px; } .c-hero__inner { gap: 18px; } .c-hero__para { font-size: 14px; margin-top: 12px; } .c-hero__actions { margin-top: 16px; } .c-chiffre { padding-block: 6px; } } @media (max-width: 900px) { .c-burger { display: block; order: 3; } /* Le lien réduit à son icône ne faisait que 18 px de large : la hauteur suffisait, la largeur non. WCAG 2.2 demande 24 px dans les deux sens. */ .c-tel--compact { display: inline-flex; order: 2; justify-content: center; min-width: 44px; } .c-header__inner { gap: 12px; } /* Le menu déroulant. Fermé, il est retiré du parcours clavier par `hidden` posé en JavaScript ; sans JavaScript il reste ouvert, ce qui est le bon repli — mieux vaut une navigation dépliée qu'une navigation inaccessible. */ .c-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 12px; padding: 16px; background: var(--cream); border: 1px solid rgba(8, 31, 45, .1); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(8, 31, 45, .55); } .c-nav .c-tel { color: var(--ink); min-height: 44px; display: flex; align-items: center; } .c-nav .c-tel svg { color: var(--red-on-light); } .c-nav .c-lang__btn { color: var(--ink); } .c-nav .c-lang__btn.est-actif { color: var(--craie); } .c-nav .c-btn--nav { justify-content: center; margin-top: 8px; } .c-nav .c-lang { margin-top: 8px; justify-content: center; } /* Le bandeau passe à deux colonnes, et le séparateur disparaît : il est dessiné pour une ligne, sur deux rangs il coupe au milieu de rien. C'est le geste de creanor.fr, qui l'éteint dès qu'il replie. */ .c-chiffre { flex: 1 1 44%; } .c-chiffre:not(:last-child)::after { display: none; } } @media (max-width: 720px) { /* * LE MASQUE DE LA CARTE BASCULE À LA VERTICALE, et la carte abandonne ses * dernières étiquettes. * * Le masque de `.c-hero__carte` est HORIZONTAL : il dissout la moitié * gauche du dessin, celle qui passe derrière la colonne de texte. C'est * juste en deux colonnes. En une seule, le texte prend TOUTE la largeur — * un dégradé qui ne travaille que sur l'axe horizontal ne protège plus * rien, et le § du breakpoint 1100 le disait déjà pour les villes * secondaires. * * Signalé par le commanditaire, et mesuré à 375, 390 et 430 px : DOUZE * étiquettes tombaient derrière le bloc de texte — « Dunkerque », « Calais » * et « Saint-Omer » en plein milieu du paragraphe, « Paris · 290 km » * derrière le bouton « Voir les six parcs ». * * Deux gestes, dans le même esprit que le breakpoint précédent : la carte * abandonne son second rang avant son sujet, puis son sujet avant la * lisibilité du texte. * * 1. Le masque devient vertical : le dessin s'éteint là où le texte passe * et ne se lit qu'en dessous de lui. * 2. Les noms restants disparaissent. À 375 px, le territoire dispose de * 355 px pour un dessin qui en demande 500 : six épingles à vingt pixels * l'une de l'autre n'informent plus personne, et leurs noms ne font que * salir le paragraphe. Les six parcs sont de toute façon présentés en * entier dans la section juste dessous — rien n'est perdu. */ .c-hero__carte { mask-image: linear-gradient( 180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .10) 42%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .72) 72%, #000 84%); } .c-hero .c-carte__cle-nom, .c-hero .c-carte__hors { display: none; } .c-parcs__grille, .c-services__grille, .c-preuves__liste, .c-filiales__grille, .c-footer__grille { grid-template-columns: 1fr; } .c-champs { grid-template-columns: 1fr; } .c-hero__actions .c-btn { flex: 1 1 100%; justify-content: center; } .c-preuve__bascule { grid-template-columns: 1fr; text-align: left; } .c-preuve__fleche svg { transform: rotate(90deg); } /* Les cartes sont l'une SOUS l'autre : il n'y a plus de voisin avec qui s'aligner, et les deux lignes réservées au nom ne sont plus qu'un trou. Les noms tiennent d'ailleurs tous sur une ligne à cette largeur. Même raison pour la hauteur fixe de la tête des preuves. */ .c-filiale__nom { min-height: 0; } .c-preuve__bascule { min-height: 0; } html { scroll-padding-top: 80px; } :target { scroll-margin-top: 80px; } /* Sur une colonne étroite, un motif de cette taille devient une tache : creanor.fr le réduit à 4 % et lui fait remplir la largeur. */ .c-services::before, .c-groupe.c-section--nuit::before { opacity: .04; background-size: 90% auto; } } @media (max-width: 520px) { .c-chiffre { flex: 1 1 100%; } } } /* ======================================================================== UTILITAIRES ===================================================================== */ @layer utilitaires { /* * Révélation au défilement. L'état initial est posé en JavaScript * (classe .peut-reveler sur ) et JAMAIS en CSS : sans script, rien * n'est masqué. C'est la règle qui évite la page blanche quand le fichier * JS ne se charge pas. */ .peut-reveler [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-long) var(--ease), transform var(--dur-long) var(--ease); } .peut-reveler [data-reveal].est-vu { opacity: 1; transform: none; } .peut-reveler [data-reveal-suite] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--rang, 0) * 70ms); } .peut-reveler [data-reveal-suite].est-vu > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .peut-reveler [data-reveal], .peut-reveler [data-reveal-suite] > * { opacity: 1 !important; transform: none !important; } /* Le fil porte des durées littérales, reprises telles quelles de creanor.fr : elles ne passent donc pas par --dur-*, et doivent être coupées ici comme il le fait. */ .c-fil__mot, .c-fil__trait { transition: none; } } } /* ======================================================================== LOGOS INLINÉS — hors couche, et c'est le sujet ======================================================================== Chaque SVG de marque embarque son propre bloc