/* ============================================================================ site-refonte.css — v3 Exécution SITE de la Spécification design (AD, V2 — 5 septembre 2026). Couche de surcharge, chargée en DERNIER dans . Aucun texte modifié, aucun fichier supprimé. NON CONTRÔLÉ par un tiers. Contrôle : chaque bloc vérifié EN DIRECT dans un vrai navigateur à 1440 px ET à 390 px (règle AD §09), sur emb-lab.com. Mesures rendues (px de large) : conditions 144 -> 364 (AD §00 : 144 px sur Mac) situations 245 -> 359 (bug .stik imbriqué : piste 632 px vide) couches 585 -> 380 système 4 -> 3 colonnes (358 px) financement statuts : paragraphe 67 -> 300 (2e colonne à 67 px supprimée) cover 900 (100vh) -> 433 (bande 128/88) frise « 2021 — aujourd'hui » : chevauchement 88 px -> 0 (année en étiquette) Cause racine corrigée : la règle .in:has(>.axc){3 colonnes} de la v1 écrasait les 3 conditions dans 560 px ; le moteur d'impression du contrôle précédent ne gère pas :has(), d'où « vu sur écran ordi, jamais rattrapé ». ============================================================================ */ :root{ --rc:6px; --bloc-min:320px; --gap:20px; --lecture:660px; --figw:720px; --conteneur:1180px; } body{ font-size:19px; line-height:1.62; } h1{ font-family:var(--display); font-weight:300; font-size:clamp(40px,5.4vw,64px); line-height:1.02; letter-spacing:-.02em; } h2:not([class]){ font-family:var(--display); font-weight:300; font-size:clamp(28px,3.2vw,38px); line-height:1.16; color:var(--encre); } .lede{ font-size:clamp(19px,2vw,24px) !important; line-height:1.5; color:var(--gris-t); font-weight:300; } section > .w > h2:not([class]), section > .w > .lede{ text-align:center; } section > .w > .lede{ max-width:820px; margin-inline:auto; } @media(min-width:761px){ header.hero{ display:block !important; min-height:0 !important; max-width:var(--conteneur) !important; margin-inline:auto !important; background:var(--blanc) !important; padding:56px 24px 72px !important; } header.hero .hl, header.hero .hr{ display:block !important; background:transparent !important; padding:0 !important; width:auto !important; align-items:initial !important; } header.hero .hl .in, header.hero .hr .in{ max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; } header.hero .hl{ margin-bottom:44px !important; } .stik{ display:block !important; } .stik-l{ position:static !important; width:auto !important; max-width:none !important; margin:0 0 36px !important; } .stik-r{ width:auto !important; max-width:none !important; } } header.hero .hl h1{ color:var(--encre) !important; } header.hero .hl p{ color:var(--gris-t) !important; max-width:var(--lecture) !important; } .hr .in:has(> .axc), .sits, .figp, .dcards, .scards, .sysg, .steps{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(var(--bloc-min), 1fr)) !important; gap:var(--gap) !important; align-items:stretch !important; margin-top:24px !important; } .hr .in:has(> .axc) > .k{ grid-column:1/-1 !important; margin-bottom:4px !important; } .axc,.sit,.fp,.dc,.sc2,.scards>*{ background:var(--blanc2) !important; border:1px solid var(--ligne) !important; border-left:2px solid transparent !important; border-radius:var(--r) !important; padding:32px 28px !important; min-height:268px; margin:0 !important; transition:border-left-color 120ms ease-out, background 120ms ease-out; } .axc h3,.sit h3,.fp h3,.dc h3,.sc2 h3{ font-family:'DM Sans',system-ui,sans-serif !important; font-size:22px !important; font-weight:500 !important; line-height:1.34 !important; color:var(--encre) !important; margin-bottom:8px !important; } .axc p,.sit p,.fp p,.dc p,.sc2 p{ font-size:17px !important; line-height:1.6 !important; color:var(--gris-t) !important; } .axc .num,.sit .sk2,.fp .num,.dc .num{ font-family:var(--mono) !important; font-size:12px !important; letter-spacing:.16em; text-transform:uppercase; color:var(--gris) !important; } a.axc:hover,a.sit:hover,a.fp:hover,a.dc:hover,.scards>a:hover{ border-left-color:var(--encre) !important; background:var(--blanc) !important; cursor:pointer; } .figblock{ max-width:var(--figw) !important; margin:40px auto !important; background:var(--blanc2); border-radius:var(--r); display:flex; justify-content:center; align-items:center; } .figblock svg{ width:100% !important; height:auto !important; max-width:var(--figw) !important; } .sc2{ display:block !important; } .sc2 > h3{ margin-bottom:6px !important; } .ti .yr{ position:static !important; display:block !important; left:auto !important; right:auto !important; text-align:left !important; white-space:nowrap; font-family:var(--mono) !important; font-size:12px !important; letter-spacing:.12em; color:var(--gris) !important; margin-bottom:8px !important; } /* Bloc figure+texte : .stik grille OU figure/cartes en frères flex dans une section sans .w */ @media(min-width:761px){ .stik:has(.stik-r), section:has(> .stik-r), section:has(> .stik-l), .w:has(> .stik-r){ display:block !important; } .stik-l{ position:static !important; float:none !important; width:100% !important; max-width:none !important; margin:0 0 36px !important; } .stik-r{ width:100% !important; max-width:none !important; display:block !important; float:none !important; } } @media(min-width:761px){ .stik-r{ max-width:var(--conteneur) !important; margin-inline:auto !important; } } section:has(> .stik-r){ padding-inline:24px !important; } .figblock{ padding:16px !important; } .figblock > svg, .figblock.rv2 > svg, .figblock.on > svg{ width:100% !important; max-width:100% !important; height:auto !important; flex:1 1 100% !important; } /* §3 Turquoise (sous-ensemble sûr du verdict AD) : « pilotable » (les trois mots ou aucun) -> encre ; numéros turquoise -> gris */ header.hero h1 em{ color:var(--encre) !important; } .n2{ color:var(--gris) !important; } /* ===== SEO §02 : aucun bloc invisible par défaut (révélation garantie) — anime depuis l'état visible ===== */ .rv2, .lk3{ opacity:1 !important; transform:none !important; } /* ===== Photo fondateur : 4:5 même sur l'accueil (celle de /fondateur a déjà son style inline) ===== */ main img[src*="jeffrey-clause"]:not([style]){ aspect-ratio:4/5 !important; object-fit:cover !important; border-radius:3px !important; max-width:360px; } /* Frise fondateur : intertitres de regroupement (recherche / commerce / enseignement) */ .tl .fint{ font-family:var(--display); font-weight:300; font-size:clamp(20px,2.4vw,26px); line-height:1.2; color:var(--encre); margin:48px 0 20px; padding-top:22px; border-top:1px solid var(--ligne); } .tl .fint:first-of-type{ margin-top:0; } /* Hero : CTA diagnostic primaire + lien secondaire texte (SEO §04 : diagnostic d'abord) */ .hero .acts{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .hero .acts .lnk{ color:var(--encre); text-decoration:none; font-weight:500; border-bottom:1px solid var(--gris2); padding-bottom:2px; } .hero .acts .lnk:hover{ border-bottom-color:var(--encre); } /* Hero : « Faire le diagnostic » = le bouton turquoise (l'action unique de l'écran, corrections §3) */ .hero .acts .bs{ background:var(--go) !important; color:var(--encre) !important; border:0 !important; padding:13px 26px !important; border-radius:var(--r) !important; font-weight:500 !important; text-decoration:none !important; } .hero .acts .bs .ar{ color:var(--encre) !important; } .hero .acts .bs:hover{ filter:brightness(.96); } /* Splash pleine page noir rétabli (préférence porteur — prime sur AD §06) */ main > section:first-child{ min-height:100vh !important; height:auto !important; padding:0 !important; }