/* Theme Name: Arlette Debo Theme URI: https://arlettedebo.com Author: Levell Description: Le thème d'Arlette Debo. Écrit à la main, sans constructeur de page pour le cadre du site — l'en-tête, la navigation, le pied et la typographie sont du code, pas des widgets. Elementor reste chargé et continue de rendre le CORPS des pages existantes : la reprise se fait page par page, sans jamais casser les 24 documents déjà construits. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: arlette Tags: e-commerce, custom-menu, translation-ready */ /* ═══════════════════════════════════════════════════════════════════════════ 1 — LES JETONS Une seule source pour les couleurs et les mesures. Tout le reste s'y réfère. Les valeurs viennent du kit Elementra du site (option `_elementor_page_settings` du kit 6) : elles ne sont pas inventées, c'est l'identité déjà en place. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* La prune est LA couleur de la maison. Elle passe ici du rôle de PEINTURE (une barre saturée en haut de page) à celui d'ENCRE : elle écrit, elle ne recouvre plus. C'est le seul changement de fond de la refonte, et c'est lui qui fait la différence entre « coloré » et « soigné ». */ --ad-prune: #681A53; --ad-prune-nuit: #4A1039; --ad-prune-voile: rgba(104, 26, 83, .08); --ad-rose: #FF4299; /* la primaire du kit — réservée aux signaux */ --ad-or: #B98E3C; /* l'or lisible SUR fond clair */ --ad-or-clair: #FFD37B; /* l'or du kit — sur fond sombre uniquement */ --ad-ivoire: #FCFAF9; --ad-blanc: #FFFFFF; --ad-encre: #2E1F2A; --ad-encre-douce: #6E5E68; --ad-filet: rgba(46, 31, 42, .12); --ad-filet-clair: rgba(255, 255, 255, .16); --ad-lu-sombre: rgba(255, 255, 255, .72); /* texte secondaire sur prune */ /* L'accent CHANGE selon l'univers (voir `body.ad-u-*`). Un seul jeton à surcharger : toutes les règles qui l'emploient suivent d'elles-mêmes. */ --ad-accent: var(--ad-prune); --ad-large: 1240px; --ad-marge: clamp(20px, 4vw, 48px); /* La gouttière : la distance exacte entre le bord de l'écran et la première lettre d'une page. C'est `.ad-largeur` qui la produit — colonne centrée à 1240 px, plus sa réserve interne — mais tout ce qui SORT de la colonne (une bande pleine largeur, un rail de produits) doit s'y raccrocher, sans quoi il commence 48 px trop à gauche. ⚠️ Constaté à la sonde : le rail démarrait à 100 px, le titre à 148 px. L'écart ne saute pas aux yeux sur une capture — il se voit quand on superpose deux rubriques, et il se mesure. */ --ad-gouttiere: calc(max(0px, (100vw - var(--ad-large)) / 2) + var(--ad-marge)); --ad-entete-h: 74px; --ad-entete-h-min: 62px; --ad-annonce-h: 34px; --ad-police: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --ad-police-titre: "Comfortaa", "Montserrat", system-ui, sans-serif; /* ⚠️ LA TROISIÈME POLICE DE LA MAISON, ET ELLE N'ÉTAIT NULLE PART. « Hello August » est la manuscrite du site : elle écrit le PRÉNOM de chaque soin sur les pages de gamme (« Sadiya », « Malick », « Iman »), les grands titres des deux clubs et le mot d'accent des ouvertures. Elle est en médiathèque depuis juillet 2024 et le thème repris ne la chargeait pas : les six pages qui l'employaient sont celles qu'Elementor rendait encore. En reprenant ces pages sans elle, on aurait remplacé un duo typographique par une seule voix — c'est-à-dire perdu l'identité en croyant simplifier. Elle ne remplace jamais Comfortaa : elle se pose À CÔTÉ, sur un mot. Voir `.ad-manuscrit`. */ --ad-police-manuscrite: "Hello August", "Comfortaa", cursive; /* Une seule courbe pour tout le site : c'est ce qui fait que les mouvements se ressemblent au lieu de se remarquer un par un. */ --ad-courbe: cubic-bezier(.4, 0, .2, 1); --ad-duree: .34s; } /* Les univers. Les trois en-têtes Elementor distincts (Général, Sky, Kids) disparaissent au profit d'UN en-tête dont l'accent suit la page. Le visiteur sait où il est sans que la structure change sous ses pieds. */ body.ad-u-sky { --ad-accent: #2F7FA6; } body.ad-u-kids { --ad-accent: #7A54A0; } /* ═══════════════════════════════════════════════════════════════════════════ 1 bis — LA MANUSCRITE, SERVIE PAR LE THÈME ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ ELLE VIT DANS LE THÈME, PAS DANS LA MÉDIATHÈQUE — même raison que `assets/img/volute.png` : c'est un actif de DESIGN, versionné avec le code qui s'en sert, et que personne ne peut supprimer depuis l'administration. La médiathèque en garde sept variantes (`.eot`, `.otf`, `.ttf`, `.woff`, et trois `.woff2` de noms différents) déposées par Elementor ; le thème n'en sert qu'une. ⚠️ LE SOUS-ENSEMBLE A ÉTÉ ESSAYÉ, ET IL NE SERT À RIEN ICI. `pyftsubset` sur le latin français complet, ligatures et swashes conservés, rend 72,6 Ko contre 75,5 : 4 %. Les 276 glyphes de cette police sont tous du latin — son poids est dans le TRACÉ, pas dans des alphabets inutiles. Un sous-ensemble réduit aux seuls mots employés tomberait à ~20 Ko, et casserait au premier mot nouveau. On garde donc le fichier d'origine, non transformé. ⚠️ `swap` ET NON `block` : la manuscrite écrit des mots de décor. Retarder l'affichage d'un titre pour l'attendre coûterait plus que le saut de police. ⚠️ Œ ET œ MANQUENT à cette police. Ne jamais lui donner « Sacré Cœur » — l'adresse des deux instituts. Vérifié : les douze prénoms de soins, les titres des clubs et les mots d'accent sont tous couverts. */ @font-face { font-family: "Hello August"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/hello-august.woff2") format("woff2"); } /* ═══════════════════════════════════════════════════════════════════════════ 2 — LA BASE Hello Elementor apportait un reset minimal. En reprenant le thème, il faut le réécrire — c'est court, et c'est la contrepartie honnête de l'autonomie. ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* La cible d'une ancre ne doit pas se glisser SOUS l'en-tête fixe. */ scroll-padding-top: calc(var(--ad-entete-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ⚠️ LE RESET GLOBAL EST NEUTRE, ET DOIT LE RESTER. Il est hérité par les 24 pages construites avec Elementor, que nous ne possédons pas encore. Première version : `line-height: 1.65`, paragraphes à `1.1em`, titres en Comfortaa — nos valeurs éditoriales, appliquées partout. Résultat MESURÉ contre la production : les écarts ont cessé d'être uniformes (+132, +196, +157 px selon la page) parce que le texte de chacune avait reflué, chacune selon la quantité qu'elle en porte. C'est la leçon du contrôle : un écart UNIFORME dit « un élément partagé a changé de hauteur » — c'est ce qu'on veut, c'est le pied. Un écart qui VARIE d'une page à l'autre dit « j'ai touché au contenu » — et il faut revenir. Les valeurs ci-dessous sont donc celles de Hello Elementor, à l'identique. Notre voix typographique s'exerce dans `.ad-article` et dans les composants du cadre, où le contenu est le nôtre. */ body { margin: 0; background: var(--ad-blanc); color: var(--ad-encre); font-family: var(--ad-police); font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip` et non `hidden` : `hidden` ferait de un conteneur de défilement et casserait `position: sticky` sur tous les descendants. */ overflow-x: clip; } /* ⚠️ `html` AUSSI (~/regles/04). `clip` sur le seul `body` ne retient pas un élément en `position: absolute` dont le bloc conteneur est le bloc initial : c'est ainsi qu'un texte caché du rail élargissait l'accueil à 1 560 px (ERR-20261001-01). Ce n'est qu'un garde-fou : la cause est corrigée dans `cadre.css` (`.ad-fiche { position: relative }`). */ html { overflow-x: clip; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; } /* Un champ de formulaire tiers est BORNÉ : le `cols="45"` des commentaires faisait 460 px et élargissait les articles à 481 px sur téléphone (ERR-20261001-03). */ input, select, textarea { max-width: 100%; } /* Un prix ne se coupe jamais : « 5 000 F CFA » sur une seule ligne. */ .woocommerce-Price-amount, .ad-des { white-space: nowrap; } img { border-style: none; } a { color: inherit; text-decoration: none; } /* `font-family: inherit` — surtout PAS notre police de titre ici : les widgets de titre d'Elementor héritent de cette règle quand le kit ne leur impose rien, et Comfortaa n'a ni la même chasse ni la même hauteur d'œil que la police qu'ils utilisaient. */ h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; font-weight: 500; line-height: 1.2; margin-block: .5rem 1rem; } p { margin-block: 0 .9rem; } dd, dl, dt, li, ol, ul { margin-block: 0; } figure, blockquote { margin-block: 0 1rem; } table { border-collapse: collapse; font-size: .9em; margin-block-end: 15px; width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } /* Le focus clavier doit être VISIBLE partout. Sans cette règle, retirer les contours par défaut des boutons rend le site inutilisable au clavier. */ :focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ⚠️ Les cibles de focus PROGRAMMATIQUE ne reçoivent pas l'anneau. WooCommerce pose `tabindex="-1"` sur ses messages et y déplace le focus après un ajout au panier, pour que le lecteur d'écran l'annonce. L'anneau de 2 px se lisait alors comme un encadré de couleur autour du message « … a été ajouté à votre panier » — un ornement que personne n'a dessiné. L'annonce reste, l'anneau part : il n'a de sens que là où le clavier peut se poser. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } /* Le lien d'évitement : premier élément tabulable de la page. */ .ad-evitement { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ad-prune); color: #fff; padding: 12px 20px; font-size: 13px; } .ad-evitement:focus { left: 8px; top: 8px; } .ad-lu-seulement { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .ad-largeur { width: 100%; max-width: var(--ad-large); margin-inline: auto; padding-inline: var(--ad-marge); } /* ═══════════════════════════════════════════════════════════════════════════ 3 — LES PAGES SANS ELEMENTOR Mentions légales, résultats de recherche, 404, articles : elles n'ont pas de bandeau en pleine largeur à offrir à l'en-tête fixe. Il leur faut donc une réserve en haut, et une mise en page lisible que personne d'autre ne fournit. ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ AUCUNE réserve en haut par défaut, et c'est délibéré. L'en-tête est en `position: fixed` : il ne prend pas de place dans le flux, et les 24 pages d'Elementor sont dessinées POUR CELA — leur bandeau d'ouverture est conçu pour passer dessous. Donner une réserve à toutes les pages les décalerait toutes de 108 px et détruirait ce recouvrement. ⚠️ ET LA RÉSERVE EST POSÉE PAR LE GABARIT, jamais déduite d'une classe du ``. Première tentative : une classe `ad-page-nue` calculée dans `body_class`. Elle se trompait, et pour une raison de fond — `body_class` s'exécute DANS l'en-tête, avant que le gabarit n'ait décidé qui rend la page. La Boutique, qu'Elementor construit par un gabarit d'archive, était classée « nue » (elle n'est pas `is_singular()`) et recevait 168 px de réserve : une bande blanche entre l'en-tête et son bandeau prune. Chaque gabarit ajoute donc `ad-reserve` lui-même, au moment où il sait. */ .ad-reserve { padding-top: calc(var(--ad-entete-h) + var(--ad-annonce-h) + clamp(36px, 6vh, 64px)); padding-bottom: clamp(56px, 8vh, 96px); } .ad-article { max-width: 760px; margin-inline: auto; line-height: 1.7; } .ad-article p { margin-block-end: 1.15em; } .ad-article ul, .ad-article ol { margin-block-end: 1.15em; padding-left: 1.25em; } .ad-article li { margin-block-end: .35em; } .ad-article h1, .ad-article h2, .ad-article h3, .ad-entrant h1, .ad-entrant h2 { font-family: var(--ad-police-titre); font-weight: 600; color: var(--ad-encre); } .ad-article h1 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.01em; margin-bottom: .6em; } .ad-article h2 { font-size: clamp(21px, 2.6vw, 27px); margin-top: 1.9em; } .ad-article h3 { font-size: 18px; margin-top: 1.6em; } .ad-article p, .ad-article li { color: var(--ad-encre-douce); } .ad-article a:not(.ad-bouton) { color: var(--ad-accent); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; } .ad-article table { width: 100%; border-collapse: collapse; font-size: 14px; } .ad-article th, .ad-article td { border: 1px solid var(--ad-filet); padding: 10px 12px; text-align: left; } /* ═══════════════════════════════════════════════════════════════════════════ L'INTERTITRE — venu de `pages.css` le 2026-08-31. Il y vivait quand seules les neuf pages s'en servaient. La fiche produit l'emploie désormais (« Histoire produit »), et elle ne charge pas `pages.css` : le titre à calque y rendait ses deux mots côte à côte au lieu de superposés. Une règle employée par deux familles de pages appartient à la feuille que les deux chargent — ici `style.css`, qui va partout. ═══════════════════════════════════════════════════════════════════════════ */ /* ── L'intertitre ────────────────────────────────────────────────────────── */ .ad-tete { max-width: 62ch; margin-bottom: clamp(28px, 4vh, 48px); } .ad-tete--large { max-width: 74ch; } .ad-tete--centre { margin-inline: auto; text-align: center; } /* L'intertitre à calque — voir `arlette_titre_calque()`. Le mot du fond est rogné par son conteneur : à 2,6em et sans césure, il sortirait de la colonne, et `body` porte `overflow-x: clip` — la page ne défilerait pas, mais l'ornement irait toucher le bord de l'écran. */ .ad-tete--calque { /* Le calque déborde du titre en haut et en bas : le header lui fait de la place, et rogne ce qui sort sur les côtés — à 2,4em et sans césure, un mot sortirait de la colonne, et `body` porte `overflow-x: clip` (la page ne défilerait pas, mais l'ornement irait toucher le bord de l'écran). */ overflow: hidden; padding-block: .3em .1em; } .ad-tete__porte { position: relative; margin: 0; } .ad-tete__mot { position: relative; z-index: 1; } .ad-tete__calque { position: absolute; left: -.03em; top: 50%; z-index: 0; transform: translateY(-46%); font-size: 2.4em; line-height: .8; white-space: nowrap; /* ⚠️ L'ACCENT DE LA CHARTE, PAS `currentColor`. Sur le Sky Club, le titre est ivoire : un calque ivoire à 12 % sur un fond noir donne un gris presque invisible — l'ornement se croyait plus qu'il ne se voyait. En or, à 18 %, il se sent. Sur une page sans charte, `currentColor` reste le repli. */ color: var(--ad-u-accent, currentColor); /* ⚠️ UNE OPACITÉ POUR DEUX FONDS NE MARCHE PAS. Un accent à 18 % se voit sur du noir — c'est l'or du Sky Club — et disparaît sur de l'ivoire : le violet du Kids Club y devenait un blanc cassé. Le jeton laisse chaque charte poser la sienne ; 26 % est la valeur des fonds clairs, et les deux chartes sombres la ramènent à 18. */ opacity: var(--ad-u-calque, .26); pointer-events: none; } .ad-tete h1, .ad-tete h2 { font-family: var(--ad-police-titre); font-weight: 600; color: var(--ad-encre); letter-spacing: -.015em; line-height: 1.12; margin: 0; } .ad-tete h1 { font-size: clamp(32px, 5vw, 54px); } .ad-tete h2 { font-size: clamp(25px, 3.4vw, 38px); } /* Le contexte va SOUS le titre — jamais au-dessus, et jamais en capitales. */ .ad-tete__chapeau { margin: .8em 0 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--ad-encre-douce); } /* ═══════════════════════════════════════════════════════════════════════════ LA MANUSCRITE, EN USAGE Deux classes, et pas une de plus. Une manuscrite tire toute sa force d'être RARE : posée sur trois mots d'une page elle signe, posée sur dix elle décore, posée sur un paragraphe elle devient illisible. Ces deux classes sont donc les SEULS endroits du thème où `--ad-police-manuscrite` apparaît. ═══════════════════════════════════════════════════════════════════════════ */ /* Un mot manuscrit, au fil d'un titre. */ .ad-manuscrit { font-family: var(--ad-police-manuscrite); font-weight: 400; /* ⚠️ LE FACTEUR EST LE DÉFAUT, ET NON UNE OPTION. À taille égale, un mot en Hello August paraît deux fois plus petit qu'un mot en Comfortaa — sa hauteur d'œil vaut à peine la moitié. Sans facteur, « Beauté et élégance » rendait « élégance » plus PETIT que « Beauté », c'est-à-dire l'inverse de ce qu'on demande à un mot d'accent. Le mettre par défaut fait que l'oubli n'est plus le défaut : les trois endroits qui fixent leur propre taille (le sommaire des relais, le calque d'intertitre, le mot animé d'un titre) la déclarent explicitement et gagnent par l'ordre des feuilles. */ font-size: 1.5em; /* ⚠️ AUCUN RESSERREMENT. Comfortaa en grand demande -.035em ; une manuscrite, jamais : ses lettres sont dessinées pour se toucher déjà, et les rapprocher les fait se chevaucher. Le jeton est donc remis à zéro ici, sinon il est hérité du titre qui l'englobe. */ letter-spacing: 0; /* Sa hauteur d'œil est petite et ses jambages descendent bas : à `line-height: 1` un mot manuscrit paraît deux fois plus petit qu'un mot en Comfortaa de la même taille, et son bas est rogné par la ligne suivante. */ line-height: .9; font-feature-settings: "liga" 1, "calt" 1, "kern" 1; /* Le tracé est fin : sans lissage il grésille sur les grandes tailles. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* LE TITRE D'UN SOIN — le duo typographique de la maison. « Shampoing » en Comfortaa, « Sadiya » en manuscrite, deux fois plus grand. C'est le dispositif des trois pages de gamme, et le plus reconnaissable du site : le soin porte un PRÉNOM, et c'est le prénom qu'on lit d'abord. ⚠️ CE N'EST PAS UN SURTITRE (CLAUDE.md § 9). La règle bannit le petit libellé en capitales dilatées posé au-dessus d'un titre pour l'annoncer. Ici les deux lignes forment UN SEUL titre — « Shampoing Sadiya » — écrit sur deux registres : la première ligne n'annonce pas la seconde, elle en fait partie. Le balisage le dit : un seul ``, deux `` à l'intérieur. Elle n'est ni en capitales, ni petite, ni dilatée. */ .ad-soin-titre { margin: 0; } .ad-soin-titre__type { display: block; font-family: var(--ad-police-titre); font-weight: 300; font-size: clamp(28px, 4.6vw, 62px); line-height: 1; letter-spacing: -.03em; } .ad-soin-titre__nom { display: block; font-family: var(--ad-police-manuscrite); font-weight: 400; font-size: clamp(60px, 11vw, 150px); /* ⚠️ NI CHEVAUCHEMENT NÉGATIF, NI LIGNE SERRÉE. Première version : un `margin-top: -.08em` pour que le prénom « morde » sur le type, comme une signature posée sur une ligne. Mesuré à la capture : la hampe du « S » de Sadiya traversait le mot « Shampoing » — on lisait deux mots superposés, pas un duo. Les majuscules de cette manuscrite montent bien au-dessus de leur boîte de ligne ; c'est à elles de décider de l'écart, pas à nous. */ line-height: .92; letter-spacing: 0; font-feature-settings: "liga" 1, "calt" 1, "kern" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Les mentions qu'aucune analyse du site ne peut fournir. Volontairement criardes : un texte juridique se relit mal parce qu'il a l'air fini. */ .ad-completer { background: #FFF3C4; color: #7A5B00; font-size: .88em; font-style: italic; padding: 2px 8px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ═══════════════════════════════════════════════════════════════════════════ 4 — LE VOCABULAIRE PARTAGÉ Trois formes, employées partout : un bouton, un titre de section, un filet. ═══════════════════════════════════════════════════════════════════════════ */ .ad-bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; isolation: isolate; /* UNE hauteur pour tout le site (audit 2026-10-01 : il y en avait dix, de 37 à 52 px) et un libellé de 13 px — 12 px en capitales espacées se lisait mal sur téléphone. */ min-height: 48px; padding: 12px 28px; background: var(--ad-accent); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; text-transform: uppercase; letter-spacing: .12em; /* Une SEULE déclaration `transition` par nœud : une seconde écraserait la première au lieu de s'y ajouter. */ transition: color .3s var(--ad-courbe), border-color .3s var(--ad-courbe); } /* Le survol passe par un VOILE qui balaie depuis la gauche : le mouvement se sent, la teinte ne saute pas. Le voile est en z-index négatif, d'où `isolation: isolate` sur le bouton — sans quoi il passerait derrière le fond. */ .ad-bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ad-encre); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65, 0, .35, 1); } .ad-bouton:hover::before { transform: scaleX(1); } .ad-bouton--ligne { background: transparent; color: var(--ad-encre); /* Le contour était à 12 % (contraste 1,2 : 1) : le bouton ne se voyait pas. L'encre douce donne plus de 3 : 1, le minimum d'un contour d'action. */ border: 1px solid var(--ad-encre-douce); } /* Sur téléphone, l'action principale prend la largeur : elle se touche au pouce, et deux boutons côte à côte s'empilent au lieu de se couper. */ @media (max-width: 560px) { .ad-bouton { width: 100%; } .ad-bouton--compact { width: auto; } } .ad-bouton--ligne:hover { color: #fff; border-color: var(--ad-encre); } /* Les deux boutons des fonds prune — déplacés d'`accueil.css` le 2026-10-02 : La Marque les emploie aussi, et `accueil.css` n'est chargée que par l'accueil. */ /* Un bouton clair sur fond prune : l'accent y serait illisible. */ .ad-bouton--clair { background: #fff; color: var(--ad-prune); } .ad-bouton--clair::before { background: var(--ad-or-clair); } .ad-bouton--clair:hover { color: var(--ad-prune-nuit); } /* Le bouton fin, sur fond sombre. `--ligne` emprunte sa bordure à `--ad-filet`, qui est une encre à 12 % : sur la prune nuit il devient invisible. */ .ad-bouton--ligne-clair { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); } .ad-bouton--ligne-clair::before { background: #fff; } .ad-bouton--ligne-clair:hover, .ad-bouton--ligne-clair:focus-visible { color: var(--ad-prune-nuit); border-color: #fff; } /* Le soulignement qui se trace depuis la gauche. C'est l'unique geste de survol des liens du site — en-tête, pied, corps de texte. */ .ad-trace { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s cubic-bezier(.65, 0, .35, 1), color .3s var(--ad-courbe); } .ad-trace:hover, .ad-trace:focus-visible { background-size: 100% 1px; } .ad-icone { width: 20px; height: 20px; flex: none; }