/* Theme Name: Exoskeleton Tech Theme URI: https://exoskeleton-tech.com Description: Theme enfant GeneratePress du site Exoskeleton Tech (famille exo). Code commun tenu dans le starter (themes/exotech, outils/theme-exo.sh). Author: Aixandre Author URI: https://exoskeleton-tech.com Template: generatepress Version: 0.1.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: recup */ /* ============================================================ ORGANISATION DE LA FEUILLE (réorganisation du 31/07/2026) Un chapitre = un composant. Chaque chapitre contient TOUTES les règles de son composant, desktop d'abord, media queries en fin de chapitre. Pour intégrer une maquette : on remplace le chapitre concerné, on ne touche pas aux autres. Fondations : 1 polices · 2 tokens · 3 base · 4 boutons & CTA · 5 en-tête/pied de page · 6 contenu éditorial Transversaux : 7 fil d'Ariane · 8 badges & étiquettes · 9 pavé de note · 10 pastilles de tri · 11 infobulle · 12 loupe & visionneuse · 13 aide éditeur Fiche produit : 14 structure, hero & galerie · 15 barre d'ancres · 16 barre d'achat fixe · 17 table des offres · 18 encadré de méthode · 19 carte analyse · 20 fiche technique · 21 alternatives · 22 vidéo · 23 FAQ · 24 signature auteur · 25 avis des lecteurs · 26 formulaire d'avis Pages money/hub : 28 gabarit EXOSQUELETTE TECH · 29 TL;DR · 30 produit du classement · 31 tableau comparatif · 32 CTA prix (transversal) · 33 listing de catégorie · 35 top table · 36 palette des notes (classes d'état : aucun chapitre suivant ne doit les redéfinir) · 37 guide d'achat · 38 comparateur · 39 article · 40 hub de silo · 41 page d'accueil · 42 quiz configurateur · 43 calculateur de consommation · 44 outils (hub, vitrine, encarts) · 45 recherche et 404 · 46 page auteur · 47 blocs éditoriaux · 48 plan du site · 49 formulaire de contact · 50 page texte · 51 catalogue toutes nos analyses · 52 lisibilité des notes Règle de cascade : à spécificité égale, la dernière règle du fichier gagne. L'ordre des chapitres et l'ordre interne des règles d'un chapitre sont donc significatifs — en cas de doute, ajouter la nouvelle règle en fin de chapitre. ============================================================ */ /* ============================================================ 1. POLICES AUTO-HÉBERGÉES Les déclarations des polices (@font-face) ne vivent plus ici depuis l'étape 6 du système multi-marchés (29/09/2026) : elles sont dans un fichier du dossier fonts/ que désigne la fiche du marché (marche.php, rubrique « polices » : le fichier, la famille des titres, celle du texte, les fichiers à précharger). Sur le .fr : fonts/polices-archivo-inter.css. Changer de police se fait dans la fiche, jamais ici. Les deux variables --police-titres et --police-texte (chapitre 2) gardent les valeurs du .fr en secours. ============================================================ */ /* ============================================================ 2. DESIGN TOKENS — direction « acier & électrique » Source : _projet/04-charte-design.md (choix d'Aixandre du 28/08/2026, maquette B). Toute couleur, police ou arrondi utilisé dans le site DOIT passer par ces variables — jamais de valeur en dur ailleurs. NOTE : les noms de variables (--cream, --olive, --sable...) viennent du socle et sont conservés tels quels pour ne pas toucher au reste de la feuille : d'un site à l'autre, seules les VALEURS changent. COULEURS DU MARCHÉ (étape 5 du système multi-marchés, 29/09/2026) : les couleurs de la charte se règlent dans la fiche du marché (marche.php, rubrique « couleurs », table des rôles dans inc/couleurs.php), posée dans la page juste après cette feuille. Les valeurs écrites ici sont celles du .fr, en secours : les garder identiques à la fiche du .fr. Changer une couleur du site se fait dans la fiche ; ici, la retouche n'aurait aucun effet. CONTRÔLE : après toute retouche, « node _automation/couleurs-css.mjs controle » doit répondre qu'aucune couleur n'est hors des variables. Seules exceptions tolérées : le blanc translucide (rgba(255, 255, 255, …), voiles sur fond sombre) et le noir des masques. Jamais de variable avec couleur de secours (var(--x, #…)) : c'est une couleur en dur déguisée. ============================================================ */ :root { /* Couleurs de base (rôles fixés par la charte) */ --cream: #F6F7F8; /* fond principal des sections (gris acier très clair) */ --white: #FFFFFF; /* blanc pur, fixe : texte sur fond sombre (bandeaux, boutons, photos), poignées des curseurs */ --ink: #101828; /* texte et titres (encre nuit) */ --carte: #FFFFFF; /* fond des cartes, panneaux et champs (sombre en mode sombre) */ --cadre-photo: #FFFFFF; /* fond clair derrière les photos produits et les logos, dans les deux modes */ --bandeau: #101828; /* fond des bandeaux sombres : en-tête, pied, en-têtes de tableau, étiquettes, chiffres de l'accueil */ --texte-bandeau: #F6F7F8; /* texte clair des bandeaux */ --olive: #2653CE; /* accent unique bleu électrique : CTA, notes, filets */ /* Déclinaisons */ --olive-fonce: #1E42B8; /* liens dans le texte, survols (contraste renforcé) */ --olive-clair: #A9BCEB; /* barres de note intermédiaires */ --texte-doux: #47505F; /* texte secondaire sur fond clair */ --texte-meta: #6A7282; /* métadonnées, légendes, fils d'Ariane (#6E7686 jusqu'au 29/09/2026 : 4,3:1 sur --cream, sous le seuil AA de 4,5:1) */ --texte-sur-sombre: #B9C2D4; /* liens et texte sur fond encre */ --sable: #DFE3E8; /* neutre clair : étoiles vides, fonds discrets */ --vert-pale: #E8EEFC; /* chips, surlignage « meilleure valeur », fonds d'encart (teinte bleue claire) */ --gris-doux: #F3F4F6; /* encart de transparence, fonds neutres */ --fond-zebre: #F8F9FB; /* zébrure des tableaux */ --fond-zebre-chaud: #F5F7FA; /* zébrure des specs et de la bande de points vérifiés du bloc produit */ --fond-offre: #F2F6FE; /* surlignage de la meilleure offre (table des offres) */ --fond-ambre: #F7FAFF; /* survol de la carte « Avis utilisateurs » du hero produit */ --astuce-fond: #EAEFFB; /* encadré astuce des guides (chapitre 70) */ --astuce-texte: #33406B; /* texte de l'encadré astuce */ --filet-fort: #C3CAD3; /* filets de la grille des faits de la carte marque (le sable un cran plus foncé) */ --bordure: rgba(var(--ink-rvb), 0.13); --filet-sur-sombre: rgba(var(--texte-bandeau-rvb), 0.2); /* filets clairs translucides sur les bandeaux (stats du hub) */ /* Composantes rouge, vert, bleu des couleurs posées en transparence (filets, ombres, voiles) : rgba(var(--ink-rvb), 0.13). */ --ink-rvb: 16, 24, 40; /* = --ink */ --cream-rvb: 246, 247, 248; /* = --cream */ --trait-rvb: 17, 17, 17; /* filets et voiles neutres : le gris du socle, gardé tel quel sur le .fr (clair en mode sombre) */ --ombre-rvb: 17, 17, 17; /* ombres portées et voiles sombres : toujours sombres, dans les deux modes */ --bandeau-rvb: 16, 24, 40; /* = --bandeau : voiles sur les photos du haut de l'accueil, ombre des images */ --texte-bandeau-rvb: 246, 247, 248; /* = --texte-bandeau */ --ombre-sombre-rvb: 8, 12, 24; /* ombres portées du méga-menu et du texte du hero de l'accueil */ /* Bandeaux sombres : le méga-menu (chapitre 81) */ --sombre: #131E37; /* fond du panneau : l'encre à peine éclaircie */ --sombre-lien: #8FB0F5; /* titres, liens et focus sur fond sombre (l'accent y tomberait à 2,5:1) */ --sombre-texte: #E4E9F3; /* liens des listes */ --sombre-inerte: #7C879C; /* marque sans page d'avis */ --sombre-compteur: #8B95A8; /* compteurs */ /* Contrepoint et étiquettes (seule entorse à l'accent unique, à dose homéopathique). Les noms « chaud » et « froid » viennent du socle ; aucun silo ne s'y rattache dans le code. */ --tag-chaud: #A16A0F; /* ambre, le contrepoint : points faibles, « non », disponibilité en attente, carte partenariats ; étiquette « chaud » du bloc duo (4,6:1 sur blanc, usage texte uniquement) */ --tag-froid: #0E7C86; /* cyan : étiquette « froid » du bloc duo, absent du .fr (4,9:1 sur blanc) */ /* Avertissement santé (encart « recup-avertissement ») : jamais de la famille de teinte de l'accent, sinon la mise en garde se confond avec un encadré ordinaire. */ --avertissement: #9D5933; /* filet, pictogramme et titre (#B5673B jusqu'au 29/09/2026 : titre à 3,6:1 sur son fond, sous le seuil AA de 4,5:1) */ --avertissement-fond: #F7EAE3; --avertissement-texte: #5C4A3F; /* Sémantique positif/négatif (avantages, inconvénients, badges) */ --vert: #2F7D3F; --vert-fond: rgba(47, 125, 63, 0.08); --vert-filet: rgba(47, 125, 63, 0.35); --rouge: #B03A2E; --rouge-fond: rgba(176, 58, 46, 0.07); --rouge-filet: rgba(176, 58, 46, 0.3); /* Palette des notes sur 10 — 6 paliers en teintes désaturées, alignée sur les maquettes 2026 et la page méthodologie (arbitrage du 01/08/2026) : p1 (< 5, rouge) → p6 (>= 9, vert franc). Deux tons par palier : « fond » (pastilles pleines, barres, jauges — valeurs exactes des maquettes) et « texte » (déclinaisons assombries par nos soins : posées en texte sur fond blanc, les teintes de fond manqueraient de contraste). SOURCE UNIQUE de ces couleurs : le PHP et le JS ne posent que des classes de palier (chapitre en fin de feuille), jamais des hex. */ /* Palette avivée le 17/08/2026 : les teintes d'origine, trop terreuses, se lisaient mal en petite pastille. Les fonds sont saturés (barres et pastilles), les déclinaisons « texte » restent assombries pour tenir le contraste AA sur fond clair. */ /* Échelle relevée sur Kimovil le 17/08/2026 (leurs paliers ki-1 à ki-10, échantillonnés dans le navigateur). Leur particularité : des teintes désaturées à luminosité constante, ce qui laisse le texte en blanc sur toute l'échelle, du rouge au vert. Nos six paliers sont répartis sur la leur. */ --note-p1-fond: #B9646E; --note-p1-texte: #8E3F49; --note-p1-sur: #FFFFFF; --note-p2-fond: #B78F46; --note-p2-texte: #8A6A2C; --note-p2-sur: #FFFFFF; --note-p3-fond: #AFAD36; --note-p3-texte: #827F22; --note-p3-sur: #FFFFFF; --note-p4-fond: #84B149; --note-p4-texte: #5F8531; --note-p4-sur: #FFFFFF; --note-p5-fond: #66AF54; --note-p5-texte: #47823A; --note-p5-sur: #FFFFFF; --note-p6-fond: #47AC60; --note-p6-texte: #2F8043; --note-p6-sur: #FFFFFF; /* Mode sombre (rubrique « mode » de la fiche du marché) : le vert, le rouge et les « texte » des notes, assombris pour un fond clair, sont remplacés par des versions éclaircies de même teinte, fixes elles aussi (RECUP_CHILD_COULEURS_SOMBRE, inc/couleurs.php). */ /* Note des avis lecteurs : ambre, réservé à cet usage (chiffre + étoile) */ --etoile: #E3922E; /* Couleur d'action des boutons — charte B du 28/08/2026 : le CTA est unifié sur l'accent bleu électrique (un seul bleu sur tout le site). Le texte reste blanc dans tous les états, survol compris. */ --cta-fond: #2653CE; --cta-fond-survol: #1E42B8; --cta-texte: #FFFFFF; /* Dégradés du marché (rubrique « degrades » de la fiche, inc/couleurs.php) : aucun sur le .fr. Les boutons et aplats d'accent portent background-image: var(--degrade-boutons) (leurs survols reviennent à l'aplat) ; l'en-tête et le pied var(--degrade-bandeaux) ; les grands titres, une règle réservée à la classe « a-degrade-titres » de . */ --degrade-boutons: none; --degrade-bandeaux: none; --degrade-titres: none; --rayon-cta: 999px; /* pastille pleine, façon Polar Plunge */ /* Typographie */ --police-titres: 'Archivo', sans-serif; --police-texte: 'Inter', system-ui, sans-serif; /* Réglages typographiques du marché (étape 6 du système multi-marchés, 29/09/2026) : valeurs du .fr, en secours ; la fiche du marché (marche.php, rubrique « typographie », inc/typographie.php) les remplace. Toute largeur de lettres (font-stretch), tout interlettrage et toute mise en capitales de la feuille passent par eux ; seuls le logo et le « 404 » restent fixes (déclarations marquées « fixe »). Césure : fixe aussi sur les libellés chiffrés des hubs (toujours coupés) et les noms de produits (jamais coupés). Les deux interlettrages multiplient l'espacement dessiné pour le .fr : 1 = tel quel, 0 = aucun. CONTRÔLE : après toute retouche de la feuille, « node _automation/typo-css.mjs controle ». */ --titres-chasse: 106%; /* titres, noms de produits */ --titres-chasse-h1: 108%; /* H1, titre du comparateur */ --titres-interlettrage: 1; /* resserrement des grands titres */ --capitales-casse: uppercase; /* étiquettes, boutons, fil d'Ariane, en-têtes de tableau */ --capitales-chasse: 110%; --capitales-chasse-forte: 112%; --capitales-interlettrage: 1; --cesure: manual; /* auto : mots coupés en fin de ligne (allemand) */ --coupure-noms: normal; /* anywhere : un nom de produit trop long passe à la ligne */ --coupure-mots: break-word; /* anywhere : un mot trop long passe à la ligne partout (allemand) */ --boutons-italique: italic; /* normal : texte des boutons, puces de tri et rubans en romain */ /* Arrondis. --rayon-carte (3 px, quasi carré) = l'existant, migré vers --rayon-carte-large (12 px, maquettes 2026) composant par composant, au fil des intégrations — jamais en bloc. Cartes, petits boutons et gros boutons (prix, appels) se règlent dans la fiche du marché (rubrique « typographie » : rayon_cartes, rayon_boutons, rayon_boutons_larges ; 999px = pilule). */ --rayon-carte: 3px; --rayon-carte-large: 12px; --rayon-bouton: 10px; --rayon-bouton-large: 12px; /* Largeur canonique du conteneur (maquettes 2026, arbitrage du 01/08/2026) */ --largeur-conteneur: 1240px; } /* ============================================================ 3. BASE — couleurs et typographie globales ============================================================ */ /* Filet de sécurité : jamais de défilement horizontal de page. Posé aussi sur la racine — Chrome ne propage pas le clip du body au viewport, et la page pouvait défiler vers du vide (constaté sur le comparateur mobile). */ html { overflow-x: clip; } body { background-color: var(--cream); color: var(--ink); font-family: var(--police-texte); overflow-x: clip; /* Césure (mot coupé en fin de ligne, avec un tiret) : réglage « cesure » de la fiche du marché, hérité partout. Désactivée sur le .fr (manual : seulement aux traits d'union écrits). Safari exige la propriété préfixée, toujours écrite en doublet. */ -webkit-hyphens: var(--cesure); hyphens: var(--cesure); } /* Mot trop long pour sa case : réglage « coupure_mots » de la fiche du marché. Le .fr garde break-word, ce que le thème parent posait déjà sur le contenu (.site-content, .entry-header), étendu à l'en-tête et au pied : le mot ne passe à la ligne que s'il sortirait de sa case. Les langues aux mots longs prennent anywhere, qui laisse aussi rétrécir les titres, cellules et colonnes posés côte à côte (banc d'essai allemand, 01/10/2026, _projet/09 section 19). */ body, .site-content, .entry-header { overflow-wrap: var(--coupure-mots); } /* Densité typographique globale (recalibrage du 30/07/2026, relevée à 16 px le 21/09/2026 : à 15 px, tout ce qui hérite — listes, cellules, libellés — tombait entre 12,5 et 13,5 px, et plus rien ne hiérarchisait la page. Piste A de lisibilité, validée par Aixandre). */ body { font-size: 16px; } /* Titres : romains, casse normale (piste B, décidée le 21/09/2026). Archivo et la graisse 800 restent, la chasse reste un peu élargie : la personnalité tenait à la police, pas au fait de la coucher. L'italique capitale supprimait la silhouette des mots, penchait tout et bouchait les contreformes — la combinaison la moins lisible qui existe, mesurée sur la page randonnée (H1 à 46 px italique capitale chasse 120 %). Frandroid et Finance Héros, pris pour repères, ont des titres romains en casse normale. Les cinq valeurs ci-dessous sont ÉCRITES, pas omises : c'est ce qui immunise tout titre du site contre un ancêtre en italique ou en capitales, et ce qui autorise les blocs enfants à ne plus rien redéclarer. Un composant qui veut un titre n'a plus rien à défaire. Les capitales restent sur les textes courts (rubans de classement, badges, étiquettes, fil d'Ariane, en-têtes de tableau) : c'est là qu'elles fonctionnent. */ h1, h2, h3, h4, h5, h6 { font-family: var(--police-titres); font-style: normal; font-weight: 800; font-stretch: var(--titres-chasse); text-transform: none; letter-spacing: normal; line-height: 1.15; text-wrap: pretty; } /* letter-spacing négatif et interligne serrée étaient des réglages de capitales : les caps ont besoin d'être resserrées, et n'ayant pas de jambages elles tolèrent une interligne courte. En bas de casse, les p, g, j descendent sous la ligne : 1.15 leur laisse la place, et l'interlettrage repasse à normal partout sauf sur le H1, où une correction optique légère reste justifiée à 46 px. */ h1 { font-stretch: var(--titres-chasse-h1); letter-spacing: calc(-0.01em * var(--titres-interlettrage)); line-height: 1.08; } /* Grands titres en dégradé (rubrique « degrades » de la fiche du marché, clé « titres ») : la classe « a-degrade-titres » n'est posée sur que si la fiche donne ce dégradé (inc/couleurs.php), jamais sur le .fr. Le titre de l'accueil, posé sur la photo, reste blanc. */ .a-degrade-titres h1:not(.recup-accueil-hero__titre) { background-image: var(--degrade-titres); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Liens dans le contenu : olive foncé (lisible sur crème) + soulignement, pour rester identifiables sans dépendre de la seule couleur. */ .entry-content a, .comment-content a { color: var(--olive-fonce); text-decoration: underline; text-underline-offset: 2px; } .entry-content a:hover, .comment-content a:hover { color: var(--ink); } /* Sélection de texte aux couleurs de la marque */ ::selection { background-color: var(--cta-fond); color: var(--white); } /* Défilement doux vers les ancres (désactivé si l'utilisateur préfère réduire les animations) + marge pour ne pas coller au bord haut */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .recup-avis [id] { scroll-margin-top: 24px; } /* Accessibilité clavier : focus visible net sur tout élément interactif */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--olive-fonce); outline-offset: 2px; } /* ============================================================ 4. BOUTONS & CTA Boutons natifs/Gutenberg + la famille .recup-cta (réutilisée partout : hero, top table, classement, offres, formulaires). ============================================================ */ /* Le bouton natif ne porte plus le costume CTA (21/09/2026). Cette règle l'imposait à TOUS les