/* ============================================================================ YANDEV — portage du systeme de design ALTOR en theme WordPress classique ---------------------------------------------------------------------------- Direction reprise telle quelle : tableau de bord de cabinet de conseil. Surfaces papier sur une rampe de gris VRAIS (chroma zero), un seul bleu de marque #154CE4 qui porte tous les accents parce qu'il est la seule teinte du systeme, des filets d'un pixel, des micro-labels en mono, une elevation douce teintee au gris de plancher et jamais au noir pur. POURQUOI LES NOMS DE JETONS SONT IDENTIQUES A LA SOURCE. --color-primary-600, --text-base, --radius-lg… sont repris mot pour mot du globals.css de l'app Next.js. Consequence : le document project/design-system/altor-design-system.md documente CE fichier sans traduction mentale, et un ecart se voit d'un diff. Le risque assume est la collision avec un plugin qui declarerait --color-primary chez lui ; le jour ou ca arrive, un prefixe --yd- se pose en un rechercher/remplacer, parce qu'aucun composant ici n'ecrit une valeur en dur. REGLE HERITEE, ET C'EST LA PLUS IMPORTANTE : aucun composant ne code en dur un hexa, une ombre, une duree ou un z-index. Rehabiller le theme = repointer la section 2 (alias semantiques), rien d'autre. Les classes, elles, sont prefixees .yd- et nommees en francais, comme le reste du code de la maison. Sommaire 1 Rampes primitives 2 Alias semantiques 3 Typographie 4 Espacement · rayons · elevation · mouvement · couches 5 Base 6 Mise en page (conteneur, grille 12, grille editoriale) 7 Composants 8 Accessibilite et preferences systeme ========================================================================== */ :root { /* ========================================================================== 1 · RAMPES PRIMITIVES ====================================================================== */ /* -- Primaire : la marque. primary-600 EST #154CE4. Rampe generee en OKLCH a teinte fixe 264°, chroma au sommet sur 600 et retombant aux deux bouts pour que les tons clairs restent dans le gamut et les fonces lisibles. On ne retouche pas une marche a la main, on regenere la rampe. -- */ --color-primary-50: #f3f7ff; --color-primary-100: #e4edff; --color-primary-200: #c9dbff; --color-primary-300: #a4c2ff; --color-primary-400: #6c9aff; --color-primary-500: #3b72f7; --color-primary-600: #154ce4; --color-primary-700: #0a37b7; --color-primary-800: #082a8c; --color-primary-900: #051e63; --color-primary-950: #03113f; /* fond le plus profond — hero, pas une surface UI */ /* -- Neutres : VRAI gris, chroma exactement zero, R = G = B a chaque marche. C'est la seule partie de la palette qui ne derive PAS de la marque, et c'est deliberé : une teinte froide dans les neutres poserait un voile bleu sur chaque surface, chaque filet et chaque ligne de texte, et se battrait avec la moindre photo, le moindre logo client. Zero chroma laisse le bleu seul porteur de teinte — c'est ce qui le fait exister. L'echelonnage est en clarte, pas en arithmetique hexa. La bande des surfaces (0→300) est serree (1,4 a 5,7 L*) parce que ces marches s'empilent comme des plans et doivent se separer d'un cheveu ; a partir de 300 l'echelle s'ouvre sur deux plateaux (~12,0 L* jusqu'a 600, ~10,6 jusqu'au plancher) pour que deux marches de texte soient toujours d'un poids franchement different. 600 est epingle, pas interpole : il porte les legendes en ink-subtle et tombe pile la ou il passe 4,5:1 sur le canevas. -- */ --color-neutral-0: #ffffff; /* L* 100,0 */ --color-neutral-25: #fbfbfb; /* L* 98,6 */ --color-neutral-50: #f6f6f6; /* L* 96,9 */ --color-neutral-100: #eeeeee; /* L* 94,1 */ --color-neutral-200: #e4e4e4; /* L* 90,6 */ --color-neutral-300: #d4d4d4; /* L* 84,9 */ --color-neutral-400: #b3b3b3; /* L* 72,9 */ --color-neutral-500: #939393; /* L* 60,9 */ --color-neutral-600: #747474; /* L* 48,8 — l'epingle AA */ --color-neutral-700: #5a5a5a; /* L* 38,2 */ --color-neutral-800: #414141; /* L* 27,5 */ --color-neutral-900: #2a2a2a; /* L* 17,1 */ --color-neutral-1000: #141414; /* L* 6,3 — plancher, voile et teinte d'ombre */ /* ========================================================================== 2 · ALIAS SEMANTIQUES Les composants ne consomment QUE ce bloc. Rehabiller = repointer ici. ====================================================================== */ /* -- Surfaces, de l'arriere vers l'avant -- */ --color-canvas: var(--color-neutral-25); /* la page elle-meme */ --color-surface-sunken: var(--color-neutral-50); /* puits, en-tetes de tableau, socles */ --color-surface: var(--color-neutral-0); /* cartes, champs, menus — le plan par defaut */ --color-surface-raised: var(--color-neutral-0); /* modales, popovers : c'est l'ombre qui les porte */ --color-surface-inverse: var(--color-primary-900); /* pied de page, bandeau CTA, hero */ --color-surface-brand-subtle: var(--color-primary-50); /* lignes selectionnees, puits teintes */ --color-surface-brand-tint: var(--color-primary-100); /* le survol du precedent */ --color-scrim: var(--color-neutral-1000); /* fond de modale, utilise a 45 % */ /* -- Encre. Le bleu n'est PLUS l'encre : #154CE4 est trop sature pour du texte long, l'encre est neutral-900 et la marque est reservee a l'accent, au remplissage et a l'emphase. -- */ --color-ink: var(--color-neutral-900); /* texte principal — 13,9:1 sur canevas */ --color-ink-muted: var(--color-neutral-700); /* texte secondaire — 6,7:1 */ --color-ink-subtle: var(--color-neutral-600); /* legendes, micro-labels — 4,5:1, passe AA */ --color-ink-disabled: var(--color-neutral-400); --color-ink-inverse: var(--color-neutral-0); --color-ink-inverse-muted: var(--color-primary-200); --color-ink-brand: var(--color-primary-600); /* liens et accents — 6,6:1, AA en corps de texte */ --color-ink-brand-hover: var(--color-primary-700); /* -- Filets -- */ --color-line: var(--color-neutral-200); /* le filet par defaut */ --color-line-strong: var(--color-neutral-300); /* bords de champ, separateurs qui doivent se lire */ --color-line-brand: var(--color-primary-600); --color-line-brand-subtle: var(--color-primary-200); --color-line-inverse: var(--color-primary-800); /* -- Les deux couleurs de reglure de la grille editoriale. Volontairement plus faibles que --color-line : c'est une structure qu'on lit A TRAVERS la page, pas un separateur. -- */ --color-grid-rule: rgb(20 20 20 / 0.07); --color-grid-rule-inverse: rgb(255 255 255 / 0.08); /* -- Interactif : le jeu d'etats complet -- */ --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-active: var(--color-primary-800); /* enfonce */ --color-primary-subtle: var(--color-primary-50); --color-primary-subtle-hover: var(--color-primary-100); --color-primary-selected: var(--color-primary-100); --color-primary-disabled: var(--color-primary-300); --color-on-primary: var(--color-neutral-0); /* 6,6:1 sur le remplissage */ --color-accent: var(--color-primary-600); /* -- Icones -- */ --color-icon: var(--color-ink-muted); --color-icon-subtle: var(--color-ink-subtle); --color-icon-brand: var(--color-primary-600); --color-icon-inverse: var(--color-neutral-0); /* -- Focus : un seul traitement pour tout le site, declare une fois. -- */ --color-focus-ring: var(--color-primary-600); /* -- Etats semantiques. Chroma remonte dans la bande 0,13–0,18 pour tenir a cote d'un bleu a C=0,235 ; sans ca le vert et l'ambre paraissent boueux. Chaque paire a ete mesuree. Regle de fond : aucun etat n'est porte par la couleur seule, il y a toujours une icone ou un libelle. -- */ --color-success-subtle: #e8f9e7; --color-success-border: #bbe7bb; --color-success: #399a43; /* 3,6:1 sur blanc */ --color-success-ink: #1c6d26; /* 5,9:1 sur son propre fond */ --color-warning-subtle: #fff2e2; --color-warning-border: #fed397; --color-warning: #c48400; /* 3,2:1 sur blanc */ --color-warning-ink: #8d5e00; /* 5,1:1 sur son propre fond */ --color-danger-subtle: #ffeeec; --color-danger-border: #ffc7c1; --color-danger: #d14241; /* 4,6:1 sur blanc */ --color-danger-ink: #a51e24; /* 6,7:1 sur son propre fond */ /* L'information EST la marque : il n'y a pas de teinte informative separee. */ --color-info-subtle: var(--color-primary-50); --color-info-border: var(--color-primary-200); --color-info: var(--color-primary-600); --color-info-ink: var(--color-primary-700); /* -- Pastille de section (fond clair). Groupe de jetons a part plutot que le composant qui pioche dans la rampe : le fond, le filet et l'encre doivent bouger ensemble, les epingler ici fait de ca une seule edition. L'ENCRE EST EN 700, PAS EN 600. 600 est l'epingle AA *sur le canevas* (4,52:1) et ne survit pas a une plaque neutral-200 : 3,68:1. Une marche plus bas la retablit a 5,42:1 sans rien changer au caractere. -- */ --color-badge-surface: var(--color-neutral-200); --color-badge-border: var(--color-neutral-300); --color-badge-ink: var(--color-neutral-700); /* -- Pastille de section (fond sombre). Un lavis blanc SUR une base navy, et c'est la base qui fait tout marcher : une plaque blanche a 20 % est quasi transparente, l'illustration passe au travers, et un libelle a 70 % de blanc ne fait que 76 % de blanc sur ce meme fond — plaque et texte montent et descendent ensemble et l'ecart se referme des que le fond s'eclaire. Seul un opaque SOUS le lavis les separe. -- */ --color-badge-dark-base: rgb(3 17 63 / 0.5); --color-badge-dark-wash: rgb(255 255 255 / 0.2); --color-badge-dark-border: rgb(255 255 255 / 0.2); --color-badge-dark-ink: rgb(255 255 255 / 0.9); /* -- Graphiques. L'ORDRE DES EMPLACEMENTS EST LE MECANISME DE SECURITE DALTONISME : on assigne dans l'ordre, on ne cycle jamais. Les paires adjacentes passent a 8 series ; les formes « toutes paires » (nuage, bulles, petits multiples) plafonnent a TROIS. Les emplacements 3, 4 et 5 sont sous 3:1 sur blanc et exigent un etiquetage direct. -- */ --color-chart-1: #154ce4; --color-chart-2: #eb6834; --color-chart-3: #1baf7a; /* etiquetage direct requis */ --color-chart-4: #eda100; /* etiquetage direct requis */ --color-chart-5: #e87ba4; /* etiquetage direct requis */ --color-chart-6: #008300; --color-chart-7: #4a3aa7; --color-chart-8: #e34948; --color-chart-seq-1: #76a2ff; --color-chart-seq-2: #5487fa; --color-chart-seq-3: #346bf1; --color-chart-seq-4: #164de3; --color-chart-seq-5: #0b38b8; --color-chart-seq-6: #072988; --color-chart-pos: var(--color-primary-600); --color-chart-mid: var(--color-neutral-100); --color-chart-neg: #e34948; --color-chart-grid: var(--color-neutral-100); --color-chart-axis: var(--color-neutral-300); --color-chart-label: var(--color-neutral-600); /* ========================================================================== 3 · TYPOGRAPHIE Inter porte tout ce qui se lit. IBM Plex Mono garde UN seul emploi : le micro-label technique — compteurs, codes de reference, en-tetes de tableau, axes de graphique. Jamais de prose. CHAQUE MARCHE EST UN NOMBRE PAIR DE PIXELS, ET 12 EST LE PLANCHER. Les marches 13/15/17 et les labels a 10/11 px ont ete supprimes, pas arrondis : ils passaient sous le plancher. Les interlignes sont alignes sur 4 px dans les tailles de lecture (12/18, 14/20, 16/24, 18/24, 20/28, 24/32, 32/40) pour qu'une colonne melangeant les marches s'empile quand meme sur un seul rythme. TROIS GRAISSES FONT LE TRAVAIL, ET IL N'Y EN A PAS DE QUATRIEME. 400 le corps de texte, et donc l'heritage par defaut 500 labels, libelles de bouton, le mono, les pastilles, h1–h6 nus 600 le rang des titres : hero, titre de section, sous-titre Il n'y a pas de 700. L'emphase vient de la taille, de l'espace et de la couleur — un bloc qui doit peser plus prend de l'air ou une marche de plus, pas une graisse plus lourde. font-synthesis-weight: none interdit au navigateur de fabriquer une graisse qu'on n'a pas livree. ====================================================================== */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Rang des titres. Le chasse se resserre a mesure que la taille monte : c'est ce qui simule une graisse « display » sans embarquer une deuxieme fonte. Les deux bornes de chaque clamp sont des marches de l'echelle, donc un titre n'est jamais entre deux marches, a aucune largeur d'ecran. */ --text-display-xl: clamp(2.5rem, 6.4vw, 4rem); /* 40 → 64, le hero et lui seul */ --text-display-xl-lh: 1.05; --text-display-xl-ls: -0.032em; --text-display-lg: clamp(2.5rem, 5.2vw, 3rem); /* 40 → 48, le titre de section */ --text-display-lg-lh: 1.0833; --text-display-lg-ls: -0.03em; /* Fixe et non fluide : un sous-titre qui grandirait jusqu'a 32 refermerait l'ecart avec le 48 du titre au-dessus. */ --text-display-md: 1.5rem; /* 24 */ --text-display-md-lh: 1.3333; --text-display-md-ls: -0.016em; --text-display-sm: clamp(1.25rem, 2vw, 1.5rem); /* 20 → 24 */ --text-display-sm-lh: 1.3; --text-display-sm-ls: -0.014em; /* Marches de lecture. */ --text-xs: 0.75rem; /* 12 — legendes, aide, metadonnees */ --text-xs-lh: 1.5; --text-sm: 0.875rem; /* 14 — secondaire, labels, navigation */ --text-sm-lh: 1.4286; --text-base: 1rem; /* 16 — le corps, le defaut du site */ --text-base-lh: 1.5; --text-lg: 1.125rem; /* 18 — le plus petit titre */ --text-lg-lh: 1.3333; --text-xl: 1.25rem; /* 20 */ --text-xl-lh: 1.4; --text-2xl: 1.5rem; /* 24 */ --text-2xl-lh: 1.3333; --text-3xl: 2rem; /* 32 */ --text-3xl-lh: 1.25; --text-4xl: 2.5rem; /* 40 */ --text-4xl-lh: 1.1; --text-5xl: 3rem; /* 48 */ --text-5xl-lh: 1.0833; --text-6xl: 4rem; /* 64 — le plafond du rang des titres */ --text-6xl-lh: 1.0625; /* Le chiffre editorial surdimensionne : une seule exception au plafond des titres, et c'est un element graphique dans la hierarchie, pas un titre. Il sert aux positions du bloc de classement. */ --text-anchor: clamp(6.5rem, 15vw, 12rem); /* 104 → 192 */ --text-anchor-lh: 0.9; --text-anchor-ls: -0.045em; /* Libelle de bouton — 16/20 Medium. Volontairement hors du ratio de corps de texte : le libelle du CTA est cale sur la geometrie du bouton (bloc de 56 px, fleche de 20 px), pas sur l'echelle de lecture, et un interligne de 20 donne au libelle et a la fleche la meme hauteur optique. */ --text-button: 1rem; --text-button-lh: 1.25; /* Pastille de section — Inter Medium 14, le seul micro-label qui n'est PAS en mono : il vit dans une plaque bordee qui se lit deja comme un objet, et les chiffres larges de Plex Mono se battent avec les 10 px de padding a cette taille. Interligne exactement 1 : le padding est le seul enonce vertical, il n'y a donc pas un second nombre a garder synchrone. */ --text-badge: 0.875rem; --text-badge-lh: 1; --text-badge-ls: 0.1em; /* Micro-label mono. La seule chose restee en Plex Mono, et la seule marche du systeme qui n'est pas en Inter. A 12 px il est sur le plancher, pas dessous. */ --text-label: 0.75rem; /* 12 */ --text-label-lh: 1; --text-label-ls: 0.12em; /* ========================================================================== 4 · ESPACEMENT · RAYONS · ELEVATION · MOUVEMENT · COUCHES ====================================================================== */ /* Espace : base 4 px, toute l'echelle en derive. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-section: clamp(4rem, 8vw, 6rem); /* respiration verticale d'une section */ /* Rayons : quatre marches, 10 px est LE PLAFOND, rien de plus rond ne part en production. 4 champs, cases, interrupteurs, elements de menu, onglets 6 listes deroulantes, pastilles, puces, infobulles, petites cartes 8 toasts, bandeaux, cartes de flux, tuiles de monogramme 10 conteneurs de premier niveau uniquement — cartes d'information, widgets, modales, tiroirs, grands panneaux Le cercle reste une FORME, pas un rayon : pastilles d'etat, spinners, avatars ronds gardent 50 %. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; /* Elevation teintee au neutral-1000 (#141414), jamais au noir pur : une ombre en vrai gris ne laisse aucun voile colore sur la surface qu'elle traverse. */ --shadow-xs: 0 1px 2px rgb(20 20 20 / 0.04); --shadow-sm: 0 1px 2px rgb(20 20 20 / 0.04), 0 4px 12px -6px rgb(20 20 20 / 0.08); --shadow-md: 0 1px 2px rgb(20 20 20 / 0.04), 0 8px 24px -12px rgb(20 20 20 / 0.1); --shadow-lg: 0 2px 4px rgb(20 20 20 / 0.05), 0 20px 44px -20px rgb(20 20 20 / 0.18); --shadow-xl: 0 4px 8px rgb(20 20 20 / 0.06), 0 32px 64px -24px rgb(20 20 20 / 0.24); --shadow-focus: 0 0 0 3px rgb(21 76 228 / 0.18); /* Mouvement. Les durees plafonnent a 400 ms : au-dela une reponse au clic se lit comme une latence, pas comme du soin. */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* la courbe maison */ --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* depassement — avec parcimonie */ --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); /* trajet, pas changement d'etat */ --duration-instant: 80ms; /* bascules : case, radio, interrupteur */ --duration-fast: 140ms; /* survol, focus, changement de couleur */ --duration-base: 220ms; /* menus, infobulles, onglets, toasts */ --duration-slow: 320ms; /* modales, tiroirs, croissance de barre */ /* La seule exception sanctionnee au plafond de 400 ms : le remplissage du bouton n'est pas une reponse au clic, c'est une revelation au survol qui traverse une distance fixe. Elle doit se lire comme un rendu. */ --duration-fill: 600ms; --duration-fill-exit: 380ms; --duration-reveal: 700ms; /* Couches nommees. Le seul cran negatif du systeme est la grille de page : sous tout element en flux, au-dessus du canevas. */ --z-grid: -1; --z-base: 0; --z-sticky: 20; --z-header: 50; --z-dropdown: 100; --z-tooltip: 200; --z-overlay: 300; --z-modal: 310; --z-toast: 400; /* Gabarit : 12 colonnes strictes. */ --container-max: 87.5rem; /* 1400 */ --container-prose: 50rem; /* 800 — mesure élargie le 21/08 (Lucas : trop de vide latéral, lecture trop étroite) */ --gutter: 1.25rem; /* responsive, voir les media queries plus bas */ --header-height: 72px; /* Une colonne de la grille editoriale : la mesure du conteneur divisee en quatre, exactement la division sur laquelle les reglures sont tracees. Derivee du viewport et non d'un pourcentage : un bouton n'est presque jamais enfant direct du conteneur, et « 100 % » a l'interieur d'une cellule signifie la largeur de CETTE cellule. Une expression en vw resout a la meme longueur partout dans la page. */ --grid-column: calc((min(100vw, var(--container-max)) - 2 * var(--gutter)) / 4); /* Degrades : quatre, tous derives de la rampe primaire. Il n'y a pas de seconde teinte de degrade dans le systeme. */ --gradient-brand: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-500)); --gradient-brand-soft: linear-gradient(180deg, var(--color-primary-50), transparent); --gradient-glow: radial-gradient(closest-side, var(--color-primary-300), transparent); } /* Les gouttieres s'ouvrent avec la largeur. Ce sont les seules valeurs de gabarit qui bougent : la mesure max, elle, ne bouge jamais. */ @media (min-width: 40rem) { :root { --gutter: 2rem; } } @media (min-width: 64rem) { :root { --gutter: 3rem; } } /* La pastille de section bascule sur le CONTEXTE, pas sur une classe de variante : [data-tone="dark"] pose sur une section repointe trois proprietes heritees, et une pastille imbriquee a n'importe quelle profondeur se retourne toute seule. Marquer une section est un travail d'un seul attribut. */ :root { --badge-base: var(--color-badge-surface); --badge-wash: transparent; --badge-border: var(--color-badge-border); --badge-ink: var(--color-badge-ink); } [data-tone="dark"] { --badge-base: var(--color-badge-dark-base); --badge-wash: var(--color-badge-dark-wash); --badge-border: var(--color-badge-dark-border); --badge-ink: var(--color-badge-dark-ink); } /* ============================================================================ 5 · BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; /* Une ancre ne doit pas atterrir sous l'en-tete fixe. */ scroll-padding-top: calc(var(--header-height) + var(--space-4)); } body { margin: 0; background-color: var(--color-canvas); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--text-base-lh); /* 400 est le defaut de la page : les paragraphes heritent de la graisse a laquelle ils doivent se lire et personne n'a de classe a ajouter. */ font-weight: 400; font-synthesis-weight: none; /* La grille de page est a --z-grid (negatif) : il lui faut un fond a elle pour se poser dessus, sinon elle passe DERRIERE le body et disparait. */ isolation: isolate; } /* Les titres portent Medium par defaut : un h1–h6 nu est deja correct. Les classes de rang (.yd-titre-*) montent a 600 quand elles s'appliquent. */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-weight: 500; color: var(--color-ink); text-wrap: balance; } h1 { font-size: var(--text-4xl); line-height: var(--text-4xl-lh); letter-spacing: -0.028em; } h2 { font-size: var(--text-3xl); line-height: var(--text-3xl-lh); letter-spacing: -0.022em; } h3 { font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: -0.016em; } h4 { font-size: var(--text-xl); line-height: var(--text-xl-lh); letter-spacing: -0.011em; } h5 { font-size: var(--text-lg); line-height: var(--text-lg-lh); } h6 { font-size: var(--text-base); line-height: var(--text-base-lh); } p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 var(--space-4); } a { color: var(--color-ink-brand); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--duration-fast) var(--ease-in-out-quad); } a:hover { color: var(--color-ink-brand-hover); } img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; } hr { height: 1px; border: 0; margin: var(--space-10) 0; background-color: var(--color-line); } small { font-size: var(--text-xs); line-height: var(--text-xs-lh); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } /* UN SEUL traitement de focus, declare ici et nulle part ailleurs. Aucun composant n'a le droit de le redefinir : c'est ce qui garantit qu'un utilisateur clavier voit exactement la meme chose partout. */ :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background-color: var(--color-primary-200); color: var(--color-primary-900); } [hidden] { display: none !important; } /* L'en-tete est fixe, il ne prend donc plus de place dans le flux. Une page qui ouvre sur un hero sombre veut commencer a y=0 et passer SOUS la barre ; toutes les autres ont besoin du degagement. :has() garde la decision dans le CSS au lieu de la faire remonter dans le PHP, et la degradation sur un vieux moteur est simplement le degagement — du contenu sous la barre plutot que dessous. */ .yd-principal { padding-top: var(--header-height); } .yd-principal:has([data-hero]) { padding-top: 0; } /* Doublure sans :has() : body.yd-a-hero est semee cote PHP des le rendu serveur (functions.php), elle ne demande aucun support navigateur. Sans elle, Firefox < 121 et Safari < 15.4 gardaient le degagement de 72px sur la front-page — et la barre transparente a encre blanche devenait illisible (blanc sur blanc) au-dessus du canevas. */ body.yd-a-hero .yd-principal { padding-top: 0; } /* ============================================================================ 6 · MISE EN PAGE ========================================================================== */ .yd-conteneur { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* Plafond de mesure pour le texte long. 672 px, soit ~72 signes a 16 px : au-dela l'oeil perd la ligne suivante en revenant a la marge. */ .yd-mesure { max-width: var(--container-prose); } .yd-section { padding-block: var(--space-section); position: relative; } /* Une section qui peint son propre fond opaque : elle couvre la grille de page, d'ou la variante « bande » de la grille editoriale qu'on lui redonne. */ .yd-section--sombre { background-color: var(--color-surface-inverse); color: var(--color-ink-inverse-muted); overflow: hidden; } .yd-section--sombre h1, .yd-section--sombre h2, .yd-section--sombre h3, .yd-section--sombre h4 { color: var(--color-ink-inverse); } .yd-section--creuse { background-color: var(--color-surface-sunken); } /* -- La grille a 12 colonnes. Les enfants s'inscrivent avec .yd-col-*. Elle se replie en 4 colonnes sur mobile et 8 sur tablette : ce sont les memes points d'arret que la grille editoriale trace. -- */ .yd-grille-12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); } @media (min-width: 48rem) { .yd-grille-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 64rem) { .yd-grille-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /* Grilles de cartes : une seule declaration auto-fit plutot que trois paliers a maintenir. La borne basse (280 px) est la largeur en dessous de laquelle une carte agence perd son alignement interne. */ .yd-grille-cartes { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .yd-grille-cartes--large { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); } /* Colonnes explicites, uniquement a partir de lg : en dessous tout est en pile, c'est la regle du gabarit et pas un oubli. */ @media (min-width: 64rem) { .yd-col-3 { grid-column: span 3; } .yd-col-4 { grid-column: span 4; } .yd-col-5 { grid-column: span 5; } .yd-col-6 { grid-column: span 6; } .yd-col-7 { grid-column: span 7; } .yd-col-8 { grid-column: span 8; } .yd-col-12 { grid-column: span 12; } } /* ---------------------------------------------------------------------------- GRILLE EDITORIALE — cinq reglures verticales sur la mesure du conteneur, tracees UNE fois pour tout le document. Ce n'est ni de la decoration ni un ornement de section : c'est le systeme de mise en page rendu visible. Il doit donc se lire comme un jeu de lignes continu du haut de la page jusqu'au pied, aux memes abscisses a toutes les largeurs. GEOMETRIE. Les reglures sont de vraies boites d'un pixel positionnees sur la largeur du conteneur, jamais un fond repete : un background-repeat se carrelerait depuis la boite qui le porte, et deux sections de largeurs differentes ne seraient pas d'accord. Les deux reglures exterieures tombent sur les bords du conteneur (jamais du viewport), les trois interieures divisent la mesure en quatre. EMPILEMENT. Une couche fixe a --z-grid, au-dessus du canevas et sous tout element en flux — d'ou isolation: isolate sur body. Les sections qui peignent leur propre fond opaque la recouvrent : chacune retrace les memes cinq reglures en blanc (variante « bande ») au-dessus de son fond et sous son contenu. Memes maths, memes abscisses : la couture ne se voit pas. -------------------------------------------------------------------------- */ .yd-grille-editoriale { pointer-events: none; overflow: hidden; position: fixed; inset: 0; z-index: var(--z-grid); } .yd-grille-editoriale--bande { position: absolute; z-index: 0; } .yd-grille-editoriale > .yd-conteneur { height: 100%; } /* La boite interieure est la largeur de CONTENU du conteneur : un enfant absolu se resout sur la boite de padding, poser les reglures directement sur .yd-conteneur mettrait les deux exterieures dans les gouttieres. */ .yd-grille-editoriale__mesure { position: relative; height: 100%; } .yd-regle { position: absolute; inset-block: 0; width: 1px; background-color: var(--color-grid-rule); /* « - 1px » garde la cinquieme reglure dans la mesure au lieu de la laisser a moitie dehors. */ left: calc((100% - 1px) * var(--regle) / 4); } .yd-grille-editoriale--bande .yd-regle { background-color: var(--color-grid-rule-inverse); } .yd-regle:nth-child(1) { --regle: 0; } .yd-regle:nth-child(2) { --regle: 1; } .yd-regle:nth-child(3) { --regle: 2; } .yd-regle:nth-child(4) { --regle: 3; } .yd-regle:nth-child(5) { --regle: 4; } /* Cale chaque reglure sur un pixel entier. Sans ca, deux des cinq tombent sur un demi-pixel a la plupart des largeurs et s'antialiasent en un trait doux de 2 px : la grille se lit alors comme cinq reglures de deux graisses. */ @supports (left: round(down, 1px, 1px)) { .yd-regle { left: round(down, calc((100% - 1px) * var(--regle) / 4), 1px); } } /* ============================================================================ 7 · COMPOSANTS ========================================================================== */ /* ---------------------------------------------------------------- typographie Classes de rang. On les pose sur l'element semantique correct : le rang visuel et le niveau de titre sont deux decisions separees, et c'est ce qui permet d'avoir un h1 en display-lg sur une archive et en display-xl sur le hero sans casser le plan du document. */ .yd-titre-xl { font-size: var(--text-display-xl); line-height: var(--text-display-xl-lh); letter-spacing: var(--text-display-xl-ls); font-weight: 600; } .yd-titre-lg { font-size: var(--text-display-lg); line-height: var(--text-display-lg-lh); letter-spacing: var(--text-display-lg-ls); font-weight: 600; } .yd-titre-md { font-size: var(--text-display-md); line-height: var(--text-display-md-lh); letter-spacing: var(--text-display-md-ls); font-weight: 600; } .yd-titre-sm { font-size: var(--text-display-sm); line-height: var(--text-display-sm-lh); letter-spacing: var(--text-display-sm-ls); font-weight: 500; } .yd-texte-lead { font-size: var(--text-xl); line-height: var(--text-xl-lh); color: var(--color-ink-muted); } .yd-texte-secondaire { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-ink-muted); } .yd-texte-legende { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-ink-subtle); } /* Le micro-label mono : compteurs, codes, en-tetes de tableau, axes. Jamais de prose ici — si la phrase a un verbe, ce n'est pas un label. */ .yd-label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label-lh); letter-spacing: var(--text-label-ls); font-weight: 500; text-transform: uppercase; color: var(--color-ink-subtle); } /* Chiffres tabulaires : obligatoire des qu'une colonne de nombres doit s'aligner (tableau comparatif, notes, tarifs, positions du classement). */ .yd-tnum { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- pastille de section Le libelle qui NOMME une section, et la seule chose qui joue ce role. Une geometrie unique partout : 6 px haut/bas, 10 px de chaque cote, coin de 8 px, Inter Medium 14 capitales a 0,1em. LA HAUTEUR EST CONSTRUITE, PAS POSEE : 6 + une boite de ligne de 14 a interligne 1 + 6 + 2 px de bordure = 28 px. Le padding est le seul enonce vertical, il n'y a donc pas un second nombre a tenir a jour. Les couleurs sont lues sur des proprietes heritees, pas sur une classe de variante : voir [data-tone="dark"] plus haut. */ .yd-pastille-section { display: flex; width: fit-content; align-items: center; padding-block: 0.375rem; padding-inline: 0.625rem; border: 1px solid var(--badge-border); border-radius: var(--radius-md); background-color: var(--badge-base); /* Le lavis est peint en background-image PAR-DESSUS la base plutot que fusionne en une couleur opaque : les deux couches du cahier des charges restent deux couches dans le code, et l'une se retouche sans recalculer l'autre. */ background-image: linear-gradient(var(--badge-wash), var(--badge-wash)); color: var(--badge-ink); font-family: var(--font-sans); font-size: var(--text-badge); line-height: var(--text-badge-lh); letter-spacing: var(--text-badge-ls); font-weight: 500; text-transform: uppercase; /* Le libelle est une chaine courte et fixe : un retour a la ligne casserait la plaque, pas la ligne. */ white-space: nowrap; } /* ------------------------------------------------------------------- boutons UN bouton, deux variantes. Carre — jamais arrondi —, 56 px de haut, libelle en 16 Medium, et dans la disposition « large » une fleche de 20 px calee a l'extreme droite, l'ecart faisant tout le travail. LE JONC EST UNE OMBRE INTERNE, PAS UNE BORDURE. Une bordure fait partie de la boite : un bouton cercle et un bouton nu ne peuvent s'accorder en hauteur, en padding et en alignement que si les deux en portent une, et la variante qui la laisse tomber grandit silencieusement de 2 px. Une ombre interne est hors du calcul de mise en page : toutes les variantes sont la meme boite, cerclees ou non, et la geometrie cesse de dependre de la decoration. LE MOUVEMENT : une seule interaction, partagee par les deux variantes. Au survol, la couleur de remplissage se rend depuis la gauche en champ de pixels de 3 px — poussiere clairsemee d'abord, puis front solide — et le libelle bascule de couleur SOUS le front qui avance. Pas d'echelle, pas de rebond, pas de halo, pas d'ondulation. C'est tout le budget d'animation. -------------------------------------------------------------------------- */ :root { /* La tuile de tramage du remplissage : 36x36 de cellules de 3 px, 106 des 144 portant de l'encre a quatre opacites (1 / .75 / .5 / .3), dispersees par un PRNG seede pour que la repartition se lise comme une dissolution numerique et non comme un damier. Blanc sur transparent parce qu'elle est consommee en MASQUE : seule l'alpha compte, la couleur vient de --btn-fill. Reprise telle quelle du systeme source — elle est generee, jamais editee. */ --btn-pixel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%220%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%226%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%229%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2221%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2227%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.5%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.3%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%2233%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3C%2Fsvg%3E"); } .yd-bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 3.5rem; /* 56 */ padding-inline: var(--space-6); border: 0; border-radius: 0; /* le bouton est un bloc pose sur la grille, pas une pilule */ font-family: inherit; font-size: var(--text-button); line-height: var(--text-button-lh); font-weight: 500; text-decoration: none; cursor: pointer; user-select: none; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px var(--btn-ring, transparent); transition: color 240ms var(--ease-out-cubic) 40ms, box-shadow 240ms var(--ease-out-cubic), background-color var(--duration-base) var(--ease-in-out-quad); } /* Le focus clavier declenche le meme remplissage que le survol : un utilisateur au clavier recoit exactement l'accuse de reception que recoit la souris. */ .yd-bouton:focus-visible { border-radius: 0; /* la seule chose surchargee localement sur le focus global */ } .yd-bouton[disabled], .yd-bouton[aria-disabled="true"] { pointer-events: none; opacity: 0.45; } /* Le remplissage : un ::after portant --btn-fill, masque par trois couches composees. 1 · une rampe pleine — le remplissage derriere le front, `add`ee en dernier pour que l'etat final soit etanche 2 · le tramage — statique : les pixels apparaissent SUR PLACE 3 · une bande de trajet — une fenetre douce qui `intersect`e le tramage Les couches 1 et 3 sont des degrades larges de 300 % dont la mask-position passe de 100 % (garee hors du bord droit) a 0 %. Le tramage, lui, ne bouge jamais : c'est la fenetre qui le traverse qui fait apparaitre les pixels la ou ils sont, au lieu de faire glisser une texture. */ .yd-bouton::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--btn-fill); mask-image: linear-gradient(to right, #000 36%, transparent 44%), var(--btn-pixel-mask), linear-gradient(to right, transparent 33%, #000 38% 48%, transparent 56%); mask-size: 300% 100%, 36px 36px, 300% 100%; mask-repeat: no-repeat, repeat, no-repeat; mask-position: 100% 0, 0 0, 100% 0; mask-composite: add, intersect, add; transition: mask-position var(--duration-fill-exit) var(--ease-out-cubic); } /* L'etat rempli n'a pas de jonc a lui : il prend la couleur du remplissage, donc le bouton fini est une plaque plate d'un bord a l'autre. Les deux bascules sont retardees de 150 ms pour tomber sous le front qui avance. */ .yd-bouton:hover, .yd-bouton:focus-visible { color: var(--btn-fill-ink); box-shadow: inset 0 0 0 1px var(--btn-fill); transition-delay: 150ms, 150ms; } .yd-bouton:hover::after, .yd-bouton:focus-visible::after { mask-position: 0% 0, 0 0, 0% 0; transition-duration: var(--duration-fill); } /* Variante primaire, fond clair : la plaque bleue pleine. Elle se dissout vers neutral-900 et non vers un autre bleu — un remplissage bleu sur bleu n'a rien a traverser, et tout l'interet est de VOIR le front avancer. */ .yd-bouton--primaire { background-color: var(--color-primary); color: var(--color-on-primary); --btn-ring: transparent; --btn-fill: var(--color-neutral-900); --btn-fill-ink: var(--color-on-primary); } .yd-bouton--primaire:active { --btn-fill: var(--color-neutral-1000); } /* Variante fantome : l'action qui s'efface a cote de la primaire. Cerclee, transparente, elle se remplit du bleu de marque. */ .yd-bouton--fantome { background-color: transparent; color: var(--color-ink-muted); --btn-ring: var(--color-line-strong); --btn-fill: var(--color-primary); --btn-fill-ink: var(--color-on-primary); } .yd-bouton--fantome:active { --btn-fill: var(--color-primary-active); } /* Sur fond sombre les deux variantes se retournent. La primaire en bleu sur du navy serait du bleu sur du bleu : elle repasse a la plaque blanche sur laquelle le hero est construit et se remplit du bleu de marque. */ [data-tone="dark"] .yd-bouton--primaire { background-color: var(--color-surface); color: var(--color-ink); --btn-ring: transparent; --btn-fill: var(--color-primary); --btn-fill-ink: var(--color-on-primary); } [data-tone="dark"] .yd-bouton--fantome { color: rgb(255 255 255 / 0.7); --btn-ring: rgb(255 255 255 / 0.2); --btn-fill: var(--color-neutral-0); --btn-fill-ink: var(--color-ink); } /* Les bascules de libelle doivent etre reenoncees ici : les valeurs au repos ci-dessus ont une specificite superieure a .yd-bouton:hover et gagneraient sinon pendant le remplissage. */ [data-tone="dark"] .yd-bouton--primaire:hover, [data-tone="dark"] .yd-bouton--primaire:focus-visible, [data-tone="dark"] .yd-bouton--fantome:hover, [data-tone="dark"] .yd-bouton--fantome:focus-visible { color: var(--btn-fill-ink); } /* Le CTA marketing : libelle a gauche, fleche a droite, l'ecart fait le travail. La fleche est un pseudo-element pour qu'aucun gabarit n'ait a embarquer un SVG. */ .yd-bouton--large { justify-content: space-between; gap: var(--space-6); } .yd-bouton--large::before { content: "→"; order: 2; font-size: 1.25rem; line-height: 1; } /* Le palier compact, pour les barres d'outils et les lignes de tableau : un controle de 56 px imposerait sa hauteur a toute une ligne de donnees. */ .yd-bouton--sm { height: 2.5rem; padding-inline: var(--space-4); font-size: var(--text-sm); } .yd-bouton--pleine-largeur { width: 100%; } /* Un CTA se mesure en colonnes ENTIERES de la grille : ses bords tombent sur les reglures au lieu de s'arreter entre deux. En dessous de md il n'y a rien sur quoi se caler — ces gabarits sont sur une colonne — donc le bouton remplit son parent, qui est la mesure du conteneur. */ .yd-bouton--col-1, .yd-bouton--col-2 { width: 100%; flex-shrink: 0; } @media (min-width: 48rem) { .yd-bouton--col-1, .yd-bouton--col-2 { width: calc(var(--grid-column) * 2); } } /* Une seule colonne seulement a partir de xl : a lg elle mesure 232 px, ce qui ne tient pas « Comparer les prestataires » a cote d'une fleche de 20 px. */ @media (min-width: 80rem) { .yd-bouton--col-1 { width: var(--grid-column); } } /* Pas de mask-composite (vieux moteurs) : on laisse tomber le ::after et le survol redevient une simple bascule de fond, pilotee par les memes proprietes. Le bouton repond donc a l'identique en couleur, sans le rendu. */ @supports not (mask-composite: add) { .yd-bouton::after { display: none; } .yd-bouton:hover, .yd-bouton:focus-visible { background-color: var(--btn-fill); } } /* Le lien texte flechÉ : l'action tertiaire, celle qui ne merite pas un bloc. */ .yd-lien-fleche { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; } .yd-lien-fleche::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out-quint); } .yd-lien-fleche:hover::after { transform: translateX(3px); } /* --------------------------------------------------------------------- cartes Conteneur de premier niveau : rayon 10 (le plafond), filet d'un pixel, ombre douce. Les tons sont des variantes de FOND, jamais de rayon ni de padding — ceux-la sont fixes pour que deux cartes de tons differents s'alignent. */ .yd-carte { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-6); } .yd-carte--creuse { background-color: var(--color-surface-sunken); box-shadow: none; } .yd-carte--contour { background-color: transparent; box-shadow: none; } .yd-carte--inverse { background-color: var(--color-surface-inverse); border-color: var(--color-line-inverse); color: var(--color-ink-inverse-muted); } .yd-carte--inverse h2, .yd-carte--inverse h3, .yd-carte--inverse h4 { color: var(--color-ink-inverse); } /* L'emplacement reserve : du contenu que le client doit encore fournir. Il est VISIBLE et pointille — une zone vide qui se lit comme finie est un piege. */ .yd-carte--en-attente { border-style: dashed; border-color: var(--color-line-strong); background-color: transparent; box-shadow: none; } .yd-carte--sm { padding: var(--space-4); } .yd-carte--lg { padding: var(--space-8); } /* Carte cliquable. Elle rend un VRAI lien : toute la surface est un seul arret de tabulation avec un href reel, pas un div avec un onClick. Le decalage au survol est de 2 px — au-dela, la carte saute au lieu de se soulever. */ .yd-carte-lien { display: block; color: inherit; text-decoration: none; transition: border-color var(--duration-base) var(--ease-out-quint), box-shadow var(--duration-base) var(--ease-out-quint), transform var(--duration-base) var(--ease-out-quint); } .yd-carte-lien:hover { transform: translateY(-2px); border-color: var(--color-primary-300); box-shadow: var(--shadow-lg); color: inherit; } .yd-carte__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .yd-carte__pied { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); } /* ------------------------------------------------------------ puces et etats Une puce d'etat embarque TOUJOURS une icone ou un libelle en plus de la couleur : aucun etat du systeme n'est porte par la couleur seule. C'est une regle d'independance a la couleur, pas une preference de style. */ .yd-puce { display: inline-flex; align-items: center; gap: var(--space-1); height: 1.5rem; padding-inline: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background-color: var(--color-neutral-50); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--text-label-ls); text-transform: uppercase; white-space: nowrap; } .yd-puce--marque { border-color: var(--color-primary-200); background-color: var(--color-primary-50); color: var(--color-primary-700); } .yd-puce--succes { border-color: var(--color-success-border); background-color: var(--color-success-subtle); color: var(--color-success-ink); } .yd-puce--alerte { border-color: var(--color-warning-border); background-color: var(--color-warning-subtle); color: var(--color-warning-ink); } .yd-puce--danger { border-color: var(--color-danger-border); background-color: var(--color-danger-subtle); color: var(--color-danger-ink); } /* Etiquette de competence / specialite : Inter et non mono, parce qu'elle porte un mot lisible et pas un code. */ .yd-etiquette { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border: 1px solid var(--color-primary-200); border-radius: var(--radius-sm); background-color: var(--color-primary-100); color: var(--color-ink-brand); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; } .yd-liste-etiquettes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } /* ------------------------------------------------------------- tuile de stat Un chiffre, un libelle, eventuellement une variation. C'est souvent la bonne reponse a la place d'un graphique. La variation porte une fleche ET un signe : la direction n'est jamais portee par la couleur seule. */ .yd-stat { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-xs); padding: var(--space-5); } .yd-stat--marque { border-color: var(--color-primary-200); background-color: var(--color-primary-50); box-shadow: none; } .yd-stat__valeur { display: block; margin-top: var(--space-3); font-size: var(--text-display-md); line-height: 1; /* Medium et non 600 : c'est un CHIFFRE, pas un sous-titre. Le rang 600 est reserve aux titres, et un nombre de 24 px en Medium se lit deja comme l'element le plus fort de la tuile. */ font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); } .yd-stat__legende { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); } /* ------------------------------------------------------------------- notices */ .yd-notice { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-info-border); border-radius: var(--radius-md); background-color: var(--color-info-subtle); color: var(--color-info-ink); font-size: var(--text-sm); } .yd-notice--succes { border-color: var(--color-success-border); background-color: var(--color-success-subtle); color: var(--color-success-ink); } .yd-notice--alerte { border-color: var(--color-warning-border); background-color: var(--color-warning-subtle); color: var(--color-warning-ink); } .yd-notice--danger { border-color: var(--color-danger-border); background-color: var(--color-danger-subtle); color: var(--color-danger-ink); } /* ------------------------------------------------------------- en-tete de site Barre fixe, plein bord : elle sort volontairement du conteneur pour que le logo et le CTA se calent contre les bords du viewport. TROIS ETATS, ET UN SEUL EST FROSTED. · au-dessus d'un hero sombre : transparente, encre inversee · une fois le hero passe : plaque blanche a 90 % + flou de 14 px · retractee : translatee vers le haut quand on descend [data-glass] nomme le seul etat qui floute reellement, pour que les replis « transparence reduite » et « pas de backdrop-filter » puissent le viser sans toucher a l'etat transparent — ou un repli blanc opaque mettrait du texte blanc sur du blanc. backdrop-filter n'est deliberement PAS interpole : c'est la propriete la plus chere a animer (tout l'arriere-plan est refloute a chaque image). On claque le flou pendant que la couleur de fond fond dessous, la continuite est la meme et elle est gratuite. */ .yd-entete { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header); border-bottom: 1px solid transparent; will-change: transform; transition: transform var(--duration-slow) var(--ease-out-quint), background-color var(--duration-slow) var(--ease-out-quint), border-color var(--duration-slow) var(--ease-out-quint), box-shadow var(--duration-slow) var(--ease-out-quint); } .yd-entete[data-glass] { border-bottom-color: var(--color-line); background-color: rgb(255 255 255 / 0.9); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .yd-entete[data-retracte="true"] { transform: translateY(-100%); } /* WCAG 2.4.7 : si le focus clavier entre dans la barre retractee (Tab depuis le lien d'evitement), elle revient — jamais de focus sur un lien translate hors ecran. */ .yd-entete[data-retracte="true"]:focus-within { transform: none; } .yd-entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); height: var(--header-height); padding-inline: var(--gutter); } .yd-entete__marque { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 100%; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; } .yd-entete__marque img { max-height: 32px; width: auto; } .yd-entete__sigle { display: block; flex: 0 0 28px; width: 28px; height: 28px; color: var(--color-ink-brand); } .yd-entete__sigle svg { display: block; width: 100%; height: 100%; } .yd-entete__nom { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; } /* Sous le breakpoint desktop, la nav disparaît : gauche et actions se partageaient encore flex 1, le lockup débordait sur le burger. */ @media (max-width: 63.99rem) { .yd-entete__barre { gap: var(--space-3); } .yd-entete__actions { flex: 0 0 auto; } } /* Sous 380 px le nom ne tient plus : le sigle reste l'ancre. Scopé à la barre — le pied garde le libellé. */ @media (max-width: 23.75rem) { .yd-entete .yd-entete__nom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } .yd-entete__slogan { display: none; color: var(--color-ink-subtle); font-size: var(--text-xs); font-weight: 400; } @media (min-width: 64rem) { .yd-entete__slogan { display: inline; } } /* Au-dessus d'un hero sombre l'en-tete est transparent et l'encre s'inverse. L'etat est seme cote serveur (classe sur ) et confirme par le script : attendre l'hydratation peindrait de l'encre sombre sur le hero sombre — donc illisible, pas seulement un clignotement. */ /* LE PIEGE, ET IL EST DEJA TOMBE UNE FOIS : la condition n'est pas « la barre ne floute pas », c'est « la barre est posee sur un hero sombre ». Les deux se confondent sur l'accueil et divergent partout ailleurs, ou le script retire data-glass tant qu'on est en haut de page alors que le fond, lui, reste blanc (regle ci-dessous). Sans le body.yd-a-hero, toute page interne servait des liens blancs sur une plaque blanche jusqu'au premier defilement. */ body.yd-a-hero .yd-entete:not([data-glass]) .yd-entete__marque, body.yd-a-hero .yd-entete:not([data-glass]) .yd-entete__sigle, body.yd-a-hero .yd-entete:not([data-glass]) .yd-entete__tel, body.yd-a-hero .yd-entete:not([data-glass]) .yd-nav a { color: var(--color-ink-inverse); } body:not(.yd-a-hero) .yd-entete { border-bottom-color: var(--color-line); background-color: rgb(255 255 255 / 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ---------------------------------------------------------------- navigation */ .yd-nav { display: none; } @media (min-width: 64rem) { .yd-nav { display: flex; flex: 1 1 auto; justify-content: center; } } .yd-nav ul { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .yd-nav a { position: relative; display: inline-block; padding-block: var(--space-2); color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; } /* Le soulignement est pleine largeur et mis a l'echelle depuis son bord gauche, jamais anime de w-0 a w-100%. La largeur est une propriete de mise en page : l'animer relance layout ET paint a chaque image, alors que scaleX est le meme balayage, sur le compositeur. */ .yd-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out-quint); } .yd-nav a:hover::after, .yd-nav .current-menu-item > a::after, .yd-nav .current_page_item > a::after, .yd-nav .current-menu-ancestor > a::after { transform: scaleX(1); } /* L'element actif est la seule navigation a passer en 600 : c'est l'un des trois emplois reserves du Semibold. */ .yd-nav .current-menu-item > a, .yd-nav .current_page_item > a, .yd-nav .current-menu-ancestor > a { color: var(--color-ink); font-weight: 600; } .yd-entete__actions { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: var(--space-3); } .yd-entete__actions .yd-bouton { display: none; } @media (min-width: 48rem) { .yd-entete__actions .yd-bouton { display: inline-flex; } } /* Le téléphone dans la barre : lisible d'un coup d'œil, cliquable, masqué quand la place manque — il revit alors dans le menu mobile. La couleur suit currentColor, donc l'inversion au-dessus du hero est gratuite. */ .yd-entete__tel { display: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); text-decoration: none; white-space: nowrap; } .yd-entete__tel:hover { text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 64rem) { .yd-entete__tel { display: inline-flex; align-items: center; } } .yd-menu-mobile__tel { display: block; margin-top: var(--space-3); text-align: center; font-weight: 600; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: inherit; text-decoration: none; } /* Le bouton hamburger. Trois barres dessinees en CSS : pas d'icone a charger, pas de fonte d'icones, et la couleur suit currentColor donc l'inversion au-dessus du hero est gratuite. */ /* Cache par defaut et revele par le script (data-script sur la barre) : sans JS ce bouton ne bascule rien, et un controle qui ne repond pas est pire qu'un controle absent. Le panneau, lui, reste ouvert dans ce cas. */ .yd-burger { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); background: transparent; color: var(--color-ink); cursor: pointer; } body.yd-a-hero .yd-entete:not([data-glass]) .yd-burger { border-color: rgb(255 255 255 / 0.25); color: var(--color-ink-inverse); } .yd-entete[data-script] .yd-burger { display: inline-flex; } @media (min-width: 64rem) { .yd-burger, .yd-entete[data-script] .yd-burger { display: none; } } .yd-burger__trait, .yd-burger__trait::before, .yd-burger__trait::after { display: block; width: 18px; height: 1.5px; background-color: currentColor; transition: transform var(--duration-base) var(--ease-out-quint); } .yd-burger__trait::before, .yd-burger__trait::after { content: ""; position: relative; } .yd-burger__trait::before { top: -5px; } .yd-burger__trait::after { top: 3.5px; } .yd-burger[aria-expanded="true"] .yd-burger__trait { background-color: transparent; } .yd-burger[aria-expanded="true"] .yd-burger__trait::before { transform: translateY(5px) rotate(45deg); } .yd-burger[aria-expanded="true"] .yd-burger__trait::after { transform: translateY(-3.5px) rotate(-45deg); } /* Le panneau mobile est toujours clair, meme au-dessus d'un hero sombre : il a son propre fond opaque, donc c'est lui qui decide, pas la section derriere. */ .yd-menu-mobile { /* FERME par defaut, et c'est un arbitrage, pas un oubli. Ce panneau vit DANS une barre fixe : le laisser ouvert pour les visiteurs sans JS ferait une barre haute qui recouvre en permanence le premier ecran de chaque page, alors que .yd-principal ne degage que --header-height. Le burger etant lui aussi cache tant que le script n'a pas tourne (voir plus haut), un visiteur sans JS ne voit ni bouton mort ni panneau collant : sa navigation, ce sont les menus du pied de page, qui sont rendus sur toutes les pages. */ display: none; border-top: 1px solid var(--color-line); background-color: var(--color-surface); padding: var(--space-4) var(--gutter) var(--space-6); } .yd-menu-mobile[data-ouvert="true"] { display: block; } @media (min-width: 64rem) { .yd-menu-mobile { display: none !important; } } .yd-menu-mobile ul { margin: 0 0 var(--space-4); padding: 0; list-style: none; } .yd-menu-mobile li + li { border-top: 1px solid var(--color-line); } .yd-menu-mobile a { display: block; padding-block: var(--space-3); color: var(--color-ink); font-size: var(--text-base); font-weight: 500; text-decoration: none; } .yd-menu-mobile a.yd-bouton--primaire { color: var(--color-on-primary); } .yd-menu-mobile a.yd-bouton--primaire:hover, .yd-menu-mobile a.yd-bouton--primaire:focus-visible { color: var(--color-on-primary); } /* ------------------------------------------------------------------- le hero Le seul endroit ou display-xl est depense, et la seule section qui commence a y=0 sous l'en-tete fixe. */ .yd-hero { position: relative; overflow: hidden; background-color: var(--color-surface-inverse); color: var(--color-ink-inverse-muted); padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16); } /* La seule lueur du site, ancree sous le titre. Elle ne touche a aucun contraste : elle vit derriere du texte opaque. */ .yd-hero::before { content: ""; position: absolute; top: -30%; left: 25%; width: 620px; height: 420px; transform: translateX(-50%); border-radius: 50%; background-color: var(--color-primary-700); opacity: 0.25; filter: blur(120px); pointer-events: none; } .yd-hero__contenu { position: relative; max-width: 60ch; } .yd-hero h1 { color: var(--color-ink-inverse); margin-block: var(--space-6); } .yd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); } /* ------------------------------------------------------------- en-tete de page Le pendant clair du hero pour les archives, les pages et les articles. */ .yd-entete-page { padding-block: var(--space-12) var(--space-8); border-bottom: 1px solid var(--color-line); } .yd-entete-page h1 { margin-block: var(--space-4) 0; } .yd-entete-page__fraicheur { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-ink-subtle); } /* Revue hebdomadaire des piliers (prix, devis, CDC, méthodologie, outils). Filet de marque à gauche, comme un blockquote, mais en journal daté : la dernière entrée est en tête, les semaines précédentes s'empilent. */ .yd-revue { margin: 0 0 var(--space-8); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-line); border-left: 2px solid var(--color-line-brand); border-radius: 0 var(--radius-md) var(--radius-md) 0; background-color: var(--color-surface-brand-subtle); } .yd-revue__kicker { margin: 0; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label-lh); letter-spacing: var(--text-label-ls); font-weight: 500; text-transform: uppercase; color: var(--color-primary-700); } .yd-prose .yd-revue h2.yd-revue__titre, .yd-revue__titre { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-xl); line-height: var(--text-xl-lh, 1.3); color: var(--color-ink); } .yd-revue__liste { list-style: none; margin: 0; padding: 0; } .yd-prose .yd-revue__liste li + li, .yd-revue__liste li + li { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); } .yd-revue time { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-ink-subtle); } .yd-prose .yd-revue p, .yd-revue p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink); } .yd-entete-page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } /* En bref : réponse directe pour GEO (Agence-Geo / Éco). */ .yd-en-bref { margin: var(--space-6) 0 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-line); border-left: 2px solid var(--color-line-brand); border-radius: 0 var(--radius-md) var(--radius-md) 0; background-color: var(--color-surface-brand-subtle); } .yd-section--en-bref { padding-block: var(--space-8); } .yd-section--en-bref .yd-en-bref { margin-top: 0; } .yd-en-bref__kicker { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label-lh); letter-spacing: var(--text-label-ls); font-weight: 500; text-transform: uppercase; color: var(--color-primary-700); } .yd-en-bref__liste { margin: 0; padding-left: 1.2em; } .yd-en-bref__liste li + li { margin-top: var(--space-2); } .yd-en-bref__liste li { font-size: var(--text-base); line-height: 1.5; color: var(--color-ink); } /* Sommaire d’article (pattern L’Essentiel de l’Éco). */ .yd-sommaire { margin: 0 0 var(--space-8); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-md); background-color: var(--color-surface); } .yd-sommaire__kicker { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--text-label-ls); font-weight: 500; text-transform: uppercase; color: var(--color-ink-subtle); } .yd-sommaire__liste { margin: 0; padding-left: 1.3em; } .yd-sommaire__liste li + li { margin-top: var(--space-2); } .yd-sommaire__liste a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* Sommaire latéral collant (pattern word-html) : il descend avec le lecteur, la section en cours est marquée. En dessous de lg, seule la version en tête d'article existe. */ .yd-sommaire--cote { display: none; } @media (min-width: 64rem) { .yd-sommaire--cote { display: block; margin-bottom: var(--space-6); } .yd-article-grille .yd-prose > .yd-sommaire { display: none; } .yd-article-cote { position: sticky; top: calc(var(--header-height) + var(--space-4)); align-self: start; display: flex; flex-direction: column; gap: var(--space-4); max-height: calc(100vh - var(--header-height) - var(--space-8)); } /* Sommaire, quiz et CTA descendent ENSEMBLE : chacun se borne pour que les trois restent visibles (Lucas 22/08). */ .yd-article-cote .yd-sommaire--cote { flex: 0 1 auto; min-height: 0; margin-bottom: 0; overflow: hidden; display: flex; flex-direction: column; } .yd-article-cote .aam-quiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; } .yd-article-cote .aam-quiz__corps { overflow-y: auto; min-height: 0; } .yd-article-cote .yd-rail-avis { flex: 0 0 auto; } /* Le sommaire seul se borne : le quiz et la newsletter restent visibles sous lui (le rail entier en overflow enfermait le quiz sous le pli — constat Lucas du 22/08). */ .yd-sommaire--cote .yd-sommaire__liste { max-height: 24vh; overflow-y: auto; padding-right: var(--space-2); } .yd-sommaire--cote .yd-sommaire__liste a { display: inline-block; transition: color 0.25s ease, transform 0.25s ease; } .yd-sommaire--cote .yd-sommaire__liste a.est-actif { color: var(--color-primary-700); font-weight: 600; text-decoration-color: currentColor; transform: translateX(4px); } /* Dans le rail, le quiz se fait compact : sommaire ET quiz visibles. */ .yd-article-cote .aam-quiz__reponse { font-size: var(--text-xs); line-height: 1.4; padding: 6px 10px; } .yd-article-cote .aam-quiz__tete { padding-block: var(--space-3); font-size: var(--text-sm); } } .yd-sommaire__liste a:hover { color: var(--color-primary-700); } /* -------------------------------------------------------------- fil d'Ariane Une vraie liste ordonnee dans un