/* ========================================================================= AVENTECH — SOCLE DE TOKENS Charte extraite de la page Plaquettes, durcie pour un site de 256 pages. Ce fichier ne contient que des fondations : couleurs, typographie, espacements, rayons, ruptures. Les composants viennent par-dessus. ========================================================================= */ :root{ /* ------------------------------------------------------------------------- 2. COULEURS Deux rouges, deux usages. Le rouge de marque ne passe pas le seuil d'accessibilité AA sur le fond papier (4,48 pour un minimum de 4,5). Il sert donc aux aplats et aux gros titres ; le rouge foncé (7,14) sert dès qu'il s'agit de texte à taille courante. ------------------------------------------------------------------------- */ --c-brand:#E30613; /* aplats, fonds de boutons, titres display */ --c-brand-text:#b30410; /* texte rouge à taille courante, survols */ --c-brand-wash:rgba(227,6,19,.08); --c-brand-line:rgba(227,6,19,.25); /* Teinte de survol des boutons blancs poses sur le degrade. Derivee du rouge de marque, elle evite d'introduire du noir. Libelle en rouge fonce dessus : 5,73. Tuile contre le degrade rouge : 3,92, au-dessus du seuil de 3 pour un element d'interface. */ --c-brand-tint:#fbe0e2; /* NUIT ARDOISE — surface sombre de la marque. Remplace le noir pur, jugé trop dur. Valeur relevée sur la section recrutement existante. Seule teinte non rouge de la palette : elle est admise comme surface, jamais comme couleur de texte. */ --c-night:#21293b; --c-night-2:#322637; /* étape chaude du dégradé, pour les aplats */ /* DÉGRADÉ DE MARQUE — rouge vers nuit, horizontal. Usage limité aux grandes surfaces : appel à l'action, bandeau recrutement, pied de page. Jamais sur une carte ou un encart. Le blanc reste lisible sur toute sa longueur (4,88 au départ, 14,53 à l'arrivée). */ --c-brand-grad:linear-gradient(90deg,#E30613 0%,#21293b 100%); --c-brand-grad-soft:linear-gradient(90deg,#b30410 0%,#21293b 100%); --c-ink:#1a1a1a; /* texte principal — 17,4 sur blanc */ --c-ink-soft:#5a5a5a; /* texte secondaire — 6,9 sur blanc */ --c-paper:#f5f5f5; /* fond de page */ --c-paper-2:#ececec; /* fond creux, états inactifs */ --c-card:#ffffff; --c-line:#e0e0e0; /* Voiles neutres. Remplacent les rgba(22,32,28) verdâtres hérités d'un template à charte verte, présents dans le CSS d'origine. */ --c-scrim:rgba(26,26,26,.55); --c-scrim-deep:rgba(26,26,26,.92); /* États. L'erreur reprend le rouge foncé pour ne pas introduire un troisième rouge dans la palette. */ --c-error:#b30410; --c-error-wash:rgba(179,4,16,.08); --c-success:#1d6b3f; --c-success-wash:rgba(29,107,63,.10); /* ------------------------------------------------------------------------- 3. TYPOGRAPHIE Bebas n'a ni bas-de-casse, ni graisse alternative, ni italique. Elle est donc réservée aux titres courts. Montserrat 600 prend le relais à partir du H2 et sur tout titre susceptible de se replier. ------------------------------------------------------------------------- */ --f-display:"Bebas Neue",Impact,"Haettenschweiler",sans-serif; --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; /* Échelle modulaire, rapport 1,25. Remplace les 10,5 / 12,5 / 13,5px dispersés dans le CSS d'origine. */ --fs-2xs:0.6875rem; /* 11px — mentions légales */ --fs-xs:0.75rem; /* 12px — sur-titres, badges */ --fs-sm:0.875rem; /* 14px — libellés, texte de carte */ --fs-base:1rem; /* 16px — texte courant */ --fs-md:1.125rem; /* 18px — chapô */ --fs-lg:1.375rem; /* 22px — H4 */ --fs-xl:1.75rem; /* 28px — H3 */ --fs-2xl:2.25rem; /* 36px — H2 */ --fs-3xl:3rem; /* 48px — H1 de rubrique */ --fs-hero:clamp(2.875rem,6.5vw,4.75rem); /* 46 → 76px — H1 d'accueil */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* 0,95 provoque une collision entre l'accent d'une capitale et la ligne du dessus (Équipements, Éolien, Intégration). 1,05 dès qu'un titre peut occuper deux lignes. */ --lh-display:1.05; --lh-display-tight:0.95; /* réservé aux titres tenant sur une ligne */ --lh-heading:1.2; --lh-body:1.55; --lh-loose:1.7; /* corps d'article long */ --ls-display:0.02em; --ls-eyebrow:0.14em; /* sur-titres en capitales */ --ls-body:0; --measure:68ch; /* largeur de ligne maximale en lecture */ /* ------------------------------------------------------------------------- 4. ESPACEMENTS — base 4px ------------------------------------------------------------------------- */ --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --section-y:clamp(3rem,7vw,6rem); /* rythme vertical entre sections */ /* ------------------------------------------------------------------------- 5. RAYONS L'original mélangeait 7, 8, 9, 12 et 999px sans logique. Trois valeurs suffisent, plus la pilule. ------------------------------------------------------------------------- */ --r-sm:6px; /* champs, petits boutons */ --r-md:10px; /* boutons, encarts */ --r-lg:14px; /* cartes, modales */ --r-pill:999px; /* puces de filtre, badges */ /* ------------------------------------------------------------------------- 6. ÉLÉVATION ------------------------------------------------------------------------- */ --sh-card:0 1px 2px rgba(0,0,0,.05),0 10px 30px -18px rgba(0,0,0,.3); --sh-modal:0 30px 80px -30px rgba(26,26,26,.6); --sh-bar:0 -8px 30px -12px rgba(0,0,0,.5); /* ------------------------------------------------------------------------- 7. GABARIT ------------------------------------------------------------------------- */ --w-max:1120px; /* largeur de contenu standard */ --w-wide:1360px; /* sections pleine largeur, galeries */ --w-text:760px; /* colonne d'article et de page Wikitech */ --gutter:clamp(1rem,4vw,1.5rem); --header-h:72px; /* ------------------------------------------------------------------------- PROPORTIONS D'IMAGE Quatre formats, pas un de plus. Toute image du site entre dans l'un d'eux. C'est ce qui evite qu'une page marketing arrive avec ses propres cadrages et casse l'alignement des grilles. ------------------------------------------------------------------------- */ --ratio-wide:16/9; /* bandeaux, heros, visuels d'ouverture */ --ratio-photo:3/2; /* photo standard, reportage usine */ --ratio-card:1.55/1; /* vignette de carte */ --ratio-portrait:4/5; /* portrait, equipe, format vertical */ /* Voile de lisibilite pose sous un texte en surimpression. Sans lui, du blanc sur une photo d'atelier claire devient illisible. */ --scrim:linear-gradient(to top,rgba(33,41,59,.85) 0%,rgba(33,41,59,.35) 45%,rgba(33,41,59,0) 100%); /* ------------------------------------------------------------------------- 8. MOUVEMENT ------------------------------------------------------------------------- */ --t-fast:.12s; --t-base:.18s; --ease:cubic-bezier(.4,0,.2,1); } /* ------------------------------------------------------------------------- 9. RUPTURES RESPONSIVE L'original n'en avait qu'une, à 560px. Quatre paliers sont nécessaires pour couvrir mobile, tablette portrait, tablette paysage et grand écran. Valeurs de référence, à recopier dans les media queries : --bp-sm : 560px mobile large --bp-md : 768px tablette portrait --bp-lg : 1024px tablette paysage / petit portable --bp-xl : 1280px grand écran (Les media queries n'acceptent pas les variables CSS : ces valeurs sont documentaires, à répliquer en dur.) ------------------------------------------------------------------------- */ /* ========================================================================= 10. BASE ÉLÉMENTAIRE Absente du CSS d'origine, qui ne stylait aucun h2, p, ul ou table puisque la page Plaquettes n'en contenait pas. C'est pourtant ce dont vivent les 256 pages du site. ========================================================================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } body{ margin:0; font-family:var(--f-body); font-size:var(--fs-base); font-weight:var(--fw-regular); line-height:var(--lh-body); color:var(--c-ink); background:var(--c-paper); -webkit-font-smoothing:antialiased; } /* Titres. Seul le H1 porte Bebas ; à partir du H2, Montserrat 600. */ h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-4);color:var(--c-ink)} h1{ font-family:var(--f-display); font-weight:var(--fw-regular); font-size:var(--fs-3xl); line-height:var(--lh-display); letter-spacing:var(--ls-display); } h2{font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:var(--fs-2xl);line-height:var(--lh-heading)} h3{font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:var(--fs-xl);line-height:var(--lh-heading)} h4{font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:var(--fs-lg);line-height:var(--lh-heading)} h5,h6{font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:var(--lh-heading)} /* Bebas à la demande, pour un titre court dont on sait qu'il tient sur une ligne. À réserver aux héros et aux titres de carte. */ .u-display{ font-family:var(--f-display); font-weight:var(--fw-regular); letter-spacing:var(--ls-display); line-height:var(--lh-display); } .u-display--tight{line-height:var(--lh-display-tight)} /* SUR-TITRE — motif signature de la charte. Règle : tout H1 du site est précédé d'un sur-titre rouge nommant la rubrique (Wikitech, Nos solutions, Nos marchés, Actualités, Recrutement...). Sans exception, sur les huit gabarits. Il annonce le contexte avant le titre, renforce le repérage et double le fil d'Ariane pour le lecteur qui arrive depuis Google. */ .u-eyebrow{ display:block; font-family:var(--f-body); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--c-brand-text); margin:0 0 var(--sp-3); /* Le sur-titre est un libelle, pas de la prose : il ne doit pas heriter de la largeur de lecture appliquee aux

. Sans cela, dans un bloc centre, sa boite reste calee a gauche et le texte parait decale. */ max-width:none; } /* Sur fond sombre ou rouge, le rouge texte devient illisible : le sur-titre passe en blanc pur. */ .u-eyebrow--invert{color:#fff;opacity:.85} /* Variante discrète, pour les sur-titres internes à une section (le rouge doit rester rare pour garder sa force). */ .u-eyebrow--muted{color:var(--c-ink-soft)} p{margin:0 0 var(--sp-4);max-width:var(--measure)} .u-lead{font-size:var(--fs-md);color:var(--c-ink-soft)} a{color:var(--c-brand-text);text-underline-offset:3px} a:hover{color:var(--c-brand)} :focus-visible{outline:2px solid var(--c-brand-text);outline-offset:2px} ul,ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5);max-width:var(--measure)} li{margin-bottom:var(--sp-2)} li::marker{color:var(--c-brand)} /* Tableaux de caractéristiques techniques : usage central sur les pages produit, totalement absent du CSS d'origine. */ table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);font-size:var(--fs-sm)} caption{text-align:left;color:var(--c-ink-soft);font-size:var(--fs-sm);padding-bottom:var(--sp-2)} th,td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top} thead th{ background:var(--c-paper-2); font-weight:var(--fw-semibold); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-soft); } tbody tr:hover{background:var(--c-paper)} blockquote{ margin:var(--sp-5) 0; padding-left:var(--sp-4); border-left:3px solid var(--c-brand); border-radius:0; /* jamais d'arrondi sur une bordure unique */ color:var(--c-ink-soft); font-size:var(--fs-md); } img,video{max-width:100%;height:auto;display:block} hr{border:0;border-top:1px solid var(--c-line);margin:var(--sp-6) 0} code,pre{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.9em} /* Conteneurs */ .wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gutter)} .wrap--wide{max-width:var(--w-wide)} .wrap--text{max-width:var(--w-text)} /* Colonne de lecture longue : Wikitech, articles. Interlignage plus généreux, c'est là que se joue le confort sur 1500 mots. */ .prose{line-height:var(--lh-loose)} .prose h2{margin-top:var(--sp-7)} .prose h3{margin-top:var(--sp-6)} /* Lien d'évitement, obligatoire pour l'accessibilité au clavier. */ .skip-link{ position:absolute;left:var(--sp-3);top:-4rem;z-index:100; background:var(--c-ink);color:#fff;padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);text-decoration:none; transition:top var(--t-base) var(--ease); } .skip-link:focus{top:var(--sp-3);color:#fff} @media (min-width:768px){ h1{font-size:var(--fs-hero)} }