/* A2T Couvreur — feuille de style partagée Tokens relevés sur a2t-couvreur.fr (voir brand-spec.md). Aucun hex inventé. */ :root{ --bg:#060914; --band:#08101F; --surface:#0D1220; --inset:#0A1525; --fg:#FFFFFF; --muted:#9B9DA1; --fg-3:#82848A; --border:#1A1D27; --border-2:#2E303A; --accent:#F58A1F; --accent-hi:#F79A38; --accent-lo:#DD7A12; --accent-soft:rgba(245,138,31,.10); --accent-line:rgba(245,138,31,.28); /* Aplat d'action et etiquette des boutons : l'etiquette est BLANCHE dans les deux themes (demande 2026). L'aplat n'est donc pas le meme partout : orange vif ici, etiquette noire deplacee en blanc (7,8:1) et aplat descendu d'un cran en theme clair pour que le blanc y tienne aussi. Le signal fin (--accent : mots saillants, filets, puces) garde une valeur d'encre par theme : 8,1:1 sur le fond nuit ici, 4,6:1 sur le fond blanc en clair. */ --accent-fill:#F58A1F; --accent-fill-hi:#F79A38; --accent-fill-lo:#DD7A12; --on-accent:#060914; /* Aplat du bouton « diagnostic », demande 2026 (couleur demandee en dur, puis etendue a tout le site) : #4B3F72, le meme aplat dans les DEUX themes. Ce n'est plus une derivation de la primaire : c'est la couleur propre du diagnostic, ce qui le separe nettement du « devis ». Elle est assez sombre pour tenir 9,3:1 sous une encre blanche et 7,9:1 de rive sur le fond clair le plus pale ; la rive sur les fonds sombres ne tient que 2,0:1, le boitier se lit donc par son aplat et non par son contour (meme contrat que l'ambre, qui ne tient que 2,1:1 de rive en sombre). Survol #5A4C86 et appui #3A3059 : le premier s'eclaire sans descendre sous 6,7:1 sous l'encre blanche, le second s'assombrit sans toucher au contraste de l'encre. --diag-ink : l'encre du dessin ET de l'etiquette, blanche dans LES DEUX themes. Noire, elle ne tiendrait que 2,25:1 sur #4B3F72 (il en faut 4,5) : le blanc est la seule encre qui tienne. Jamais redite par le theme clair. */ --diag-fill:#4B3F72; --diag-fill-hi:#5A4C86; --diag-fill-lo:#3A3059; --diag-ink:#FFFFFF; /* Touche violette du mot du logo (demande 2026) : la couleur du bouton « diagnostic », #403662, entre en couleur complementaire PERMANENTE dans le degrade peint du logo. Elle n'est jamais un aplat : c'est une encre posee sur des glyphes, donc elle doit tenir le contraste du texte. #403662 sur le bandeau nuit ne tient que 1,8:1 : en sombre la touche reprend la MEME couleur montee a L ,64 a teinte et chroma conserves (#8D84B6) — 5,5:1 sur le bandeau, 5,3:1 sur le fond le plus pale des quatre, et le melange le plus defavorable (viole sur ambre) 6,9:1. En theme clair la touche est #403662 tel quel : 10,5:1 sur le fond clair, 10,0:1 sur le bandeau, 9,2:1 sur l'insert, et 6,2:1 melangee a l'ambre clair. Aucun hex invente : c'est #403662, retourne en luminance comme le fait deja l'ambre d'un theme a l'autre. */ --logo-touch:#8D84B6; --fg-soft:rgba(255,255,255,.06); /* Voile du bandeau. L'en-tête collant et la légende posée sur la photo laissent voir la page à travers une voile de la couleur du bandeau. La transparence est une valeur de calque, pas une couleur : elle ne change pas de thème, seule la teinte dessous change. D'où le canal séparé (--band-rgb) plutôt qu'un rgba() écrit en dur, qui resterait bleu nuit sur une page claire. */ --band-rgb:6,9,20; /* Meme canal separe pour le FOND de la page : une photo posée derriere du texte se voile avec le fond de la section, pas avec le bandeau de navigation (les deux teintes different). */ --bg-rgb:6,9,20; /* Le texte presque blanc, et le libellé du bouton fantôme (fond transparent, filet). En clair ils deviennent le noir du thème, au même pourcentage de voile : le sombre et le clair restent le même dessin, retourné. Les aplats ambres n'ont pas besoin de leur propre jeton : leur texte est déjà var(--bg), donc il suit le thème tout seul. */ --fg-hi:rgba(255,255,255,.92); --btn-fg:rgba(255,255,255,.85); --font-display:'Montserrat','Montserrat Fallback','Helvetica Neue',Arial,sans-serif; --font-body:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --font-mono:ui-monospace,'IBM Plex Mono','JetBrains Mono',Menlo,monospace; --pad:clamp(20px,8vw,120px); --radius:10px; --radius-lg:20px; } /* ---------- Thème clair ---------- Le site se lit en sombre (le design capturé sur a2t-couvreur.fr) ou en clair, le clair étant demandé par le bouton de l'en-tête. Un seul mécanisme : html[data-theme="light"] redéfinit les mêmes jetons. Aucune règle de composant ne porte de couleur, tout passe par :root, donc les 19 pages basculent sans qu'aucune d'elles soit retouchée. Le clair n'est pas une palette inventée : c'est le miroir du sombre en OKLch. Même teinte (H 258-277° pour les bleus nuit, 73° pour l'ambre), chroma des neutres conservé, seul le canal L est retourné : les fonds gagnent en L ce que le texte perd, les filets restent à mi-chemin. Deux jetons ne peuvent pas être un simple miroir, et c'est voulu : - l'ambre, orange vif depuis la demande de 2026. En sombre, #F58A1F (L ,74) porte du texte sur fond nuit : 8,1:1. Le L retourné donnerait un orange pâle illisible sur fond blanc. L'ambre du thème clair est descendu à L ,53 (#A8500A) : 4,6:1 au pire des quatre fonds clairs. accent-hi et accent-lo descendent du même cran ; l'aplat des boutons (--accent-fill) est propre au thème clair (voir le bloc ci-dessous) et porte une etiquette blanche. - les fonds. Le sombre est très contrasté (bg L ,14 / inset L ,19) ; le clair ne peut pas descendre aussi bas sans devenir gris, donc l'écart entre les trois niveaux de fond est resserré (L ,985 / ,956 / ,940). Le relief se lit toujours, il est juste plus doux. Contrastes mesurés en clair : texte 17,1:1 · secondaire 6,9:1 · tertiaire 4,7:1 (4,5:1 sur le bandeau) · signal sur fond 4,6:1 au pire des quatre fonds · etiquette noire sur aplat d'action 4,8:1 au pire, et rive de cet aplat 3,4:1 (seuil 3:1 des limites non textuelles). Le seuil AA (4,5:1) est tenu partout. */ html[data-theme="light"]{ --bg:#F8FAFE; --band:#F1F5FB; --surface:#EDF0F7; --inset:#E6ECF4; --fg:#131723; --muted:#55575A; --fg-3:#6E7076; --border:#D3D8E6; --border-2:#B4B7C3; --accent:#A8500A; --accent-hi:#92440A; --accent-lo:#7E3A08; --accent-soft:rgba(168,80,10,.10); --accent-line:rgba(168,80,10,.28); /* L'etiquette des boutons est blanche dans les DEUX themes (demande 2026), donc l'aplat d'action du theme clair ne peut plus rester l'orange vif : blanc sur #C2650E ne tient que 4,07:1, et 3,61:1 au survol. Les aplats clairs sont descendus a L ,55 / ,57 / ,53 du meme orange (sature et teinte conservees) pour que le blanc tienne : #B05400 au repos (etiquette 5,1:1 / rive 4,3:1 sur le fond le plus pale), #B65A00 au survol (4,7 / 4,0), #A94E00 a l'appui (5,9 / 4,8). Les deux seuils sont tenus partout : etiquette >=4,5:1 SUR l'aplat et rive de l'aplat >=3:1 sur les quatre fonds clairs. Le violet du diagnostic, lui, est deja assez sombre dans les deux themes et garde son aplat commun sous la meme encre blanche. */ --accent-fill:#B05400; --accent-fill-hi:#B65A00; --accent-fill-lo:#A94E00; --on-accent:#FFFFFF; /* La touche du logo prend en clair la couleur demandee en dur, #403662 (10,0:1 sur le bandeau clair, 6,2:1 melangee a l'ambre du theme clair). */ --logo-touch:#403662; /* Rien ici : le violet du diagnostic est demande identique dans les deux themes (il est assez sombre pour le fond clair, assez clair pour porter une encre blanche sur les deux). Reduire l'ecart theme/theme sur ce bouton, c'est aussi le rendu a l'impression. */ --fg-soft:rgba(19,23,35,.06); --band-rgb:241,245,251; --bg-rgb:248,250,254; --fg-hi:rgba(19,23,35,.92); --btn-fg:rgba(19,23,35,.85); /* Ascenseurs, cases à cocher et champs du devis prennent le jeu clair. */ color-scheme:light; } /* Thème par défaut : le sombre de la marque. Le clair n'arrive que si le visiteur l'a choisi (le script de chaque page pose data-theme avant la peinture) ou s'il a posé la bascule sur « système » ET que son appareil est en clair. Un visiteur qui n'a rien choisi, une capture, un partage et un devis imprimé restent donc ce qui a été validé. Le thème peint se lit sur data-theme ; la règle choisie (dark / light / system) se lit sur data-theme-rule. Ascenseurs et champs natifs suivent le thème PEINT, jamais la règle : un visiteur en « système » sur un appareil sombre est peint en sombre, ses ascenseurs doivent donc rester sombre. */ html{color-scheme:dark} /* Polices auto-hébergées : plus de requête vers fonts.googleapis.com (ni le délai de la réponse, qui ouvrait la fenêtre d'échange et provoquait le saut de mise en page), et le site ne transmet plus l'IP du visiteur à Google — point soulevé par la CNIL sur les sites français. Fichiers = sous-ensemble latin de Google Fonts (OFL 1.1) : tout le texte du site tient dans ce sous-ensemble, vérifié caractère par caractère. 47 Ko + 35 Ko, en variable : une seule requête par famille couvre les 3 poids utilisés. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800 900;font-display:swap;src:url('fonts/montserrat-latin.woff2') format('woff2')} /* Polices de substitution mesurées : si le fichier local échoue ou pendant son chargement, Inter/Montserrat sont plus larges que le substitut système, ce qui faisait gagner une ligne au paragraphe d'accueil et sauter la page (CLS 0,039). Deux pièges mesurés ici : (1) un seul size-adjust ne suffit pas, il faut le régler AU POIDS (Inter 400 = 1,065 × Arial Regular mais Inter 700 = 1,01 × Arial Bold) ; (2) local('Arial') rend les métriques d'Arial Regular même pour une plage 600-900, donc le gras doit appeler local('Arial Bold'). Les overrides d'ascent/descent ramènent la hauteur de ligne à 115 % de la taille de police, ce que donnent Arial, Inter et Montserrat. Substitut : Arial (macOS/Windows) ; sinon sans-serif. */ @font-face{font-family:'Inter Fallback';font-weight:400 500;src:local('Arial');size-adjust:106.5%;ascent-override:90%;descent-override:25%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-weight:600 900;src:local('Arial Bold');size-adjust:101%;ascent-override:90%;descent-override:25%;line-gap-override:0%} @font-face{font-family:'Montserrat Fallback';font-weight:800;src:local('Arial Bold');size-adjust:112.5%;ascent-override:90%;descent-override:25%;line-gap-override:0%} @font-face{font-family:'Montserrat Fallback';font-weight:900;src:local('Arial Bold');size-adjust:112.5%;ascent-override:90%;descent-override:25%;line-gap-override:0%} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance} h1 *,h2 *,h3 *{font-family:var(--font-display);margin:0;text-wrap:balance} p{margin:0;text-wrap:pretty} a{color:inherit} img,svg{display:block;max-width:100%} code{font-family:var(--font-mono);font-size:13px} section{padding:76px var(--pad);border-top:1px solid var(--border);scroll-margin-top:var(--nav-h,96px)} section:first-of-type{border-top:0} .band{background:var(--band)} .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:10px} .h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:14px} /* La couleur principale vit dans un segment de titre, pas dans le titre entier : h1 et h2 (y compris le h2 du bloc CTA, qui ne porte pas la classe .h2). */ h1 em,h2 em{font-style:normal;color:var(--accent)} .lead{font-size:16px;color:var(--muted);line-height:1.85;max-width:64ch} .meta{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);letter-spacing:.04em} .tag{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:6px 15px;margin-bottom:18px;text-decoration:none} .tag span{font-size:11px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-weight:700} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto} /* ── en-tête ── */ /* --nav-gap est declare ici et non laisse au 22 px litteral du nav : le bouton « diagnostic » est colle au « devis » par une marge negative de cette valeur, et il doit rester colle aux largeurs ou le creux change (16 / 12 / 8 px ailleurs dans la feuille). 22 → 16 px : ce creux est compte trois fois dans la rangee desktop, le retirer rend 18 px aux deux CTA et fait entrer les cinq onglets dans la plus petite largeur (mesure : la rangee tient a 951 px avec 76 px de jeu, elle plie a 950 px). */ .topnav{--nav-gap:16px;position:sticky;top:0;z-index:20;background:rgba(var(--band-rgb),.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:12px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .logo{font-family:var(--font-display);font-size:17px;font-weight:900;letter-spacing:-.02em;text-decoration:none} .logo b{font-weight:900} .logo small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:400} /* Mot du logo en dégradé blanc → ambre → blanc, sur les 19 pages. Le motif est large de 200 % de la boîte et se répète : parcourir 0 → 200 % de position décale exactement d'une période, donc la boucle est sans raccord visible. Deux régimes, un seul rendu : - sans script (crawler, script bloqué) : la boucle CSS seule, 11 s par tour ; - avec assets/a2t.js : la classe .lg-run coupe l'image clé et le script reprend la même vitesse de base, augmentée de l'accent du défilement et des impulsions au clic. Les arrêts du dégradé sont les couleurs de la marque, donc aucun point ne descend sous 9,2:1 sur le fond nuit. background-clip:text est une peinture de glyphe, pas un masque : le mot reste du texte réel, lisible et indexable. Le (communes) reste hors de l'élément peint : -webkit-text-fill-color s'hérite et le rendrait transparent. */ /* ── Le balayage prend deux couleurs de plus PENDANT le geste ──────────────────────────── --lgh (0 % au repos, jusqu'à 100 % pendant un défilement ou un clic) mélange les deux rives de la bande d'ambre : la rive qui ferme le balayage descend vers --accent-lo (ambre profond), celle qui l'ouvre monte vers --accent-hi (ambre clair). Au repos --lgh vaut 0 : les deux rives valent --accent, le dégradé est exactement celui d'avant, une seule bande ambre. Un #F6B13D et un #DC9520 restent dans la palette de la marque (aucun hex inventé) et tiennent 10,7:1 et 7,9:1 sur le fond nuit comme sur le fond clair. La règle du dessous est redite avec les couleurs mélangées : un navigateur sans color-mix() garde la première, celle d'origine. */ /* ── La touche violette : permanente, et legerement mobile en permanence ─────────────────── Le mot porte desormais DEUX couches de degrade, toutes deux coupees aux glyphes : - dessous, la bande ambre de la marque, pilotee par la position de fond (le script au defilement et au clic, l'image cle sans script) — rien y change ; - dessus, la touche violee du bouton « diagnostic » (--logo-touch), toujours peinte. --lgv (0 % a 26 %, un tour de son motif) anime les ARRETS de la couche violette, pas sa position : la position de fond reste libre pour le balayage ambre, et les deux mouvements sont independants. Le motif a une periode de 26 % : parcourir 26 % ramene la touche exactement sur elle-meme, donc la boucle est sans raccord, legere, et ne s'arrete jamais — c'est le mouvement constant demande, il ne remplace pas l'accent du defilement et du clic. La couche violette est pleine (background-size:100 %), donc la position de fond que le script ecrit en inline ne deplace RIEN sur elle : c'est ce qui garde les deux regimes (avec et sans script) identiques sans toucher au script. Les arrets sont melanges avec transparent en oklab (68 % d'encre au repos) : la touche reste un voile sur l'encre du dessous, pas un aplat. Encres mesurees en peinturant le composite (_lgw-scan, voir plus bas) : au pire 6,0:1 en sombre (viole sur ambre) et 7,9:1 en clair. Une regle sans color-mix() la redit en touches pleines, aux MEMES positions. @property rend l'arret interpolable, et la regle declare les deux reglages A LEUR VALEUR DE REPOS (--lgv:0%, --lgw:32 %) : la ou @property n'existe pas (Safari < 16.4, Firefox < 128) l'arret n'est pas interpole mais il reste RESOLU — sans cette declaration, --lgv et --lgw seraient indefinis, le degrade entier deviendrait invalide et le mot ne serait plus peint du tout. La ou @property existe, une custom property non enregistree saute a mi-course : pour --lgv le saut de 0 % a 26 % ne se voit pas, car 26 % est LA PERIODE du motif et ramene la touche exactement ou elle etait ; pour --lgw le saut de 46 % a 22 % se lit comme deux legeres pulsations de la touche — elle reste peinte et le mot garde ses deux couleurs. Sans animation, la touche reste peinte a son --lgw de repos. LE MOUVEMENT CONSTANT, MESURE (outils _lgmoved / _lgidle / _lgw-scan, accueil a 1280 px, sans geste) : le glissement seul ne deplacait que 421 pixels sur 8 771 par seconde, delta moyen 2,5/255 — le mouvement etait la mais ne se voyait pas. Le cycle descend donc a 6,5 s et la TOUCHE elle-meme se met a respirer avec lui (--lgw, le transparent du melange : 46 % pale -> 22 % forte -> 46 %, une montee par cycle, sans raccord). Les deux reglages sont dans la MEME image cle : un seul nom, une seule duree, les deux mouvements restent synchronises et l'un ne peut pas couper l'autre. L'amplitude est bornee par le contraste REEL de l'encre, mesure en peinturant le composite : la touche semi-transparente posee sur l'encre OPAQUE du dessous (blanc de la marque ou ambre), relue en sRGB par le moteur et rapportee au bandeau — jamais la touche seule sur le bandeau, cet etat n'existe pas puisque la couche du dessous est opaque. La borne basse du cycle (22 %) est un reglage de LOOK : a 0 % de transparent la touche devient un aplat qui masque la bande d'ambre — elle passerait encore (5,8:1) mais le mot ne serait plus bicolore ; la borne haute (46 %) est le point ou la touche devient trop discrete. Aux deux bouts et partout entre les deux : 6,0:1 en sombre (viole sur ambre, a la borne la plus forte de l'encre) et 7,9:1 en clair (a la borne la plus pale : l'ambre claire du theme clair monte avec l'encre, le fond sombre du theme nuit descend avec elle) — jamais sous le seuil du texte courant. Le blanc de la marque, lui, va de 8,1:1 a 11,7:1 en sombre et de 11,5:1 a 13,5:1 en clair. Au repos (sans animation, mouvement reduit, navigateur sans @property) --lgw vaut 32 % : la touche est peinte comme avant, seulement immobile. */ @property --lgv{syntax:"";inherits:false;initial-value:0%} @property --lgw{syntax:"";inherits:false;initial-value:32%} @supports (background-clip:text) or (-webkit-background-clip:text){ .logo .lg-wm{--gs:26%;--gw:26%;--lgh:0%;background-image:linear-gradient(105deg,transparent 0,var(--logo-touch) 28%,transparent 38%,transparent 45%,var(--logo-touch) 54%,transparent 64%,transparent 71%,var(--logo-touch) 80%,transparent 90%,transparent 97%,var(--logo-touch) 106%,transparent 116%),linear-gradient(105deg,var(--fg) calc(var(--gs) - var(--gw)),var(--accent) var(--gs),var(--fg) calc(var(--gs) + var(--gw)));background-image:linear-gradient(105deg,transparent calc(var(--lgv) - 26%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) - 17%),transparent calc(var(--lgv) - 7%),transparent calc(var(--lgv) + 19%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) + 28%),transparent calc(var(--lgv) + 38%),transparent calc(var(--lgv) + 45%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) + 54%),transparent calc(var(--lgv) + 64%),transparent calc(var(--lgv) + 71%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) + 80%),transparent calc(var(--lgv) + 90%),transparent calc(var(--lgv) + 97%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) + 106%),transparent calc(var(--lgv) + 116%),transparent calc(var(--lgv) + 123%),color-mix(in oklab,var(--logo-touch),transparent var(--lgw)) calc(var(--lgv) + 132%),transparent calc(var(--lgv) + 142%)),linear-gradient(105deg,var(--fg) calc(var(--gs) - var(--gw)),color-mix(in oklab,var(--accent),var(--accent-lo) var(--lgh)) calc(var(--gs) - .42 * var(--gw)),color-mix(in oklab,var(--accent),var(--accent-hi) var(--lgh)) calc(var(--gs) + .42 * var(--gw)),var(--fg) calc(var(--gs) + var(--gw)));background-size:100% 100%,200% 100%;background-repeat:no-repeat,repeat;background-position:var(--gs) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;--lgv:0%;--lgw:32%;animation:a2t-lg-sweep 11s linear infinite,a2t-lg-touch 6.5s linear infinite} } /* Les deux couches sont posees a la MEME position de fond ; la couche violette etant pleine (background-size:100 %), un deplacement de position ne deplace rien sur elle (0 px de jeu) : le balayage ambre ne l'entraine pas, et le script reste ecrit tel quel. */ /* 50 % = LA MOITIE de la periode (13 % du motif) : le glissement garde la meme vitesse sur les deux segments (linear), seule l'encre respire. La boucle se referme sans raccord. */ @keyframes a2t-lg-touch{0%{--lgv:0%;--lgw:46%}50%{--lgv:13%;--lgw:22%}100%{--lgv:26%;--lgw:46%}} .logo{transition:transform .18s ease} .logo:active{transform:translateY(1px)} @keyframes a2t-lg-sweep{from{background-position:0% 0}to{background-position:200% 0}} /* Le script pilote background-position en style inline ; une image clé est plus prioritaire qu'une déclaration inline, donc elle écraserait sa position : coupée dès qu'il pilote. */ /* Le script ne pilote que la POSITION : il coupe l'image cle du balayage ambre, pas la boucle de la touche violee, qui doit rester mobile au repos. Liste de noms raccourcie a un seul : il faut redire la duree, sinon la premiere (11 s) s'appliquerait a la touche. */ .logo .lg-wm.lg-run{animation-name:a2t-lg-touch;animation-duration:6.5s} /* Mouvement reduit : les deux boucles se coupent, la touche violette reste peinte (posnee a son --lgv de repos), le mot n'est jamais gris ni ampute d'une de ses deux couleurs. */ @media (prefers-reduced-motion:reduce){.logo .lg-wm{animation:none}.logo{transition:none}.logo:active{transform:none}} @media (forced-colors:active){.logo .lg-wm{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}} /* un nav d'onglets plie sur deux rangees coutait 63 px de barre et 121 px de contenu pousse (mesure a 920 px) : sous la largeur ou les cinq onglets tiennent, ce ne sont plus les onglets qui se replient mais les liens qui passent dans le volet deploye — donc wrap reste la valeur de base, elle ne sert plus qu'au repli sans script (voir « en-tete responsive »). */ .topnav nav{display:flex;gap:var(--nav-gap);align-items:center;flex-wrap:wrap} .topnav nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent} .topnav nav a:hover{color:var(--fg);border-bottom-color:var(--fg-3)} .topnav nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)} /* Le CTA de l'en-tête n'hérite pas du padding de .btn (la règle .topnav nav a est plus spécifique) : il est redéclaré ici, en couleur principale. Son creux horizontal ne suit plus la largeur de l'ecran : le clamp 20 → 28 px donnait 139 px de boitie a 1024 px comme a 1440 px, il ne gagnait rien a l'agrandissement de la page et coQtait 33 px a la rangee. Fixe a 18 px, la paire soudee passe de 192 px a 166 px (diagnostic 47 + devis 119) ; les 11 px verticaux et la hauteur rendue de 47 px ne bougent pas, le CTA reste a 44 px tactiles au minimum. */ .topnav nav a.btn{padding:11px 18px;border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--on-accent);border-radius:0 var(--radius) var(--radius) 0;font-weight:700;letter-spacing:.01em} .topnav nav a.btn:hover{background:var(--accent-fill-hi);border-color:var(--accent-fill-hi);color:var(--on-accent)} .topnav nav a.btn:active{background:var(--accent-fill-lo);border-color:var(--accent-fill-lo);color:var(--on-accent)} /* Bouton « Diagnostic de toiture », colle au CTA « devis » dont il reprend la forme, pas la couleur : il prend le violet --diag-fill, en icône seule dans l'en-tête (loupe + signal). La paire se lit comme une seule action, et le plus petit des deux ne vole pas le premier regard. Le mot est dans le HTML, jamais dans une infobulle : il fait le nom accessible du lien (donc un lecteur d'ecran l'entend sans survol) et il se discover au survol, au clavier et au doigt, ou une souris n'existe pas. La zone tactile reste a 44 px (brand-spec.md) : le pseudo-lement deborde le boitier de 4 px sur tout le tour, le visuel de 36 px ne change pas. Le mot n'est masque que par sa propre largeur, jamais par un overflow sur le bouton, sinon le pseudo-lement serait rogne. Demande 2026 : le mot est ecrit en clair PARTOUT, sauf dans l'en-tête. Le corps de page n'a pas de compte a faire, il affiche donc le label comme le bouton « devis » voisin, au meme calibre (14 px / 600) ; seul l'en-tête le replie en icône seule (mesure : un mot de plus y fait passer la barre sur deux lignes a 1024 px). */ .diag-cta{position:relative;display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 15px;border:1px solid var(--diag-fill);border-radius:var(--radius);background:var(--diag-fill);color:var(--diag-ink);text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease} .diag-cta::after{content:"";position:absolute;inset:-4px} /* Loupe + signal (electrocardiogramme dans la lentille) : le diagnostic ne se lit plus comme un battement, il se lit comme une inspection. L'encre est le jeton --diag-ink, pas currentColor herite de l'etiquette : le dessin doit rester blanc sur l'aplat violet dans les deux themes. 22 px (demande 2026, 19 px avant) : le trait suit, 1,9 -> 2,1, sinon la loupe parait maigre a cette taille. Le dessin reste sous la hauteur de texte + marges du boitier : l'icone ne pousse jamais la hauteur du bouton, donc pas le duo ni l'en-tete (verifie : hauteur de barre et alignement du « devis» identiques). */ .diag-cta svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--diag-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} /* En clair, et donc au corps de page : le mot est dans le bouton, comme celui du « devis », meme calibre que lui. */ .diag-txt{display:inline-flex;align-items:center;font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap} /* Dans l'en-tete seul, le mot ne tient pas dans la rangee : un mot de plus y faisait passer la barre sur deux lignes a 1024 px. Il n'est donc pas ecrit dans le boitier, mais il reste dans le HTML et dans le nom accessible du lien (retrait a 1 px + clip-path, jamais display:none, qui le ferait disparaitre de la lecture d'ecran). C'est l'infobulle du dessous qui le montre a l'oeil. */ .topnav nav .diag-txt{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .diag-cta:hover,.diag-cta:focus-visible,.diag-cta:focus-within{background:var(--diag-fill-hi);border-color:var(--diag-fill-hi);color:var(--diag-ink)} .diag-cta:active{background:var(--diag-fill-lo);border-color:var(--diag-fill-lo);color:var(--diag-ink)} .diag-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Infobulle, demande 2026 : le mot est dit HORS du bouton, pose a 10 px au-dessous de lui (le bouton d'en-tete est colle au bord haut de la page, une bulle au-dessus n'aurait aucune place), et jamais colle a lui : le creux de 10 px est celui du volet deploye sous l'en-tete. - le fond est celui du bandeau du theme courant (--band : #08101F en sombre, #F1F5FB en clair), avec le filet --border-2 et l'etiquette --fg du theme courant : 19:1 en sombre, 16,3:1 en clair. La bulle suit donc la bascule sans regle de theme separée. - ancrée par sa droite (right:0) et non par son centre : le bouton d'en-tete touche le bord droit de la page a toutes les largeurs, une bulle centree deborderait du document et ferait apparaitre une ascenseur horizontal (interdit par la demande sur l'entete). - le mot du bouton reste a cote (corps de page) ou replie (en-tete) ; la bulle est aria-hidden, le lien est deja nomme par .diag-txt : la bulle ne fait pas un second nom accessible. - elle ne mange pas le survol : pointer-events:none, sinon la souris en allant vers elle quitterait le bouton et la ferait clignoter. Sans script : la bulle est dans le HTML, elle se discover au survol et au clavier en CSS pur. */ .diag-tip{position:absolute;right:0;top:calc(100% + 10px);z-index:30;padding:7px 11px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--band);color:var(--fg);font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:.01em;white-space:nowrap;text-align:center;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 10px 22px rgba(0,0,0,.35);transition:opacity .18s ease,transform .22s cubic-bezier(.22,.7,.2,1),visibility 0s linear .22s} .diag-cta:hover .diag-tip,.diag-cta:focus-visible .diag-tip,.diag-cta:focus-within .diag-tip{opacity:1;visibility:visible;transition:opacity .18s ease,transform .22s cubic-bezier(.22,.7,.2,1),visibility 0s} /* Le bouton de l'en-tête est littéralement colle au CTA « devis » : le creux du nav est annule par une marge negative de la valeur meme de var(--nav-gap), donc le collant tient aux trois largeurs ou le creux change (22 / 14 / 12 px). Les deux moities ne forment plus qu'un seul aplat : rayon plein a gauche pour le diagnostic, a droite pour le devis. Son creux interne rejoint celui du devis (11 px verticaux, 13 px horizontaux — un peu plus que les 10 px du corps de page) et sa hauteur n'est pas declaree : il s'etire sur la hauteur de la ligne du nav, donc exactement celle du « devis » (mesure : 47 px, pas 44 — le creux vertical du devis + sa ligne de texte les font), a condition de ne jamais descendre sous les 44 px tactiles. */ .topnav nav .diag-cta{height:auto;align-self:stretch;min-height:44px;padding:11px 13px;margin-right:calc(-1 * var(--nav-gap,22px));border-radius:var(--radius) 0 0 var(--radius);color:var(--diag-ink)} /* L'encre est redite ici : le mot masque du bandeau herite de la couleur de la rangee de nav (un gris) et non de l'aplat. Cache, il ne se voit pas ; au 3e palier il reprend sa place dans le boitier (hover:none) et il serait gris sur le violet. */ /* Une fois colle, le boitier tactile de 4 px ne doit plus deborder sur le « devis » voisin : il voleralt les clics a 1 px de la couture. Le debordement se retire sur le seul cote devis. */ .topnav nav .diag-cta::after{inset:-4px -1px -4px -4px} /* Au doigt, le survol n'existe pas : dans l'en-tête le mot reprend sa place dans le bouton, sinon il ne dirait jamais ce qu'il est avant de le quitter des yeux. Le corps de page n'a rien a corriger, son mot y est deja ecrit. Le repli ne vaut qu'au-dessus du point de rupture : dans la rangee du haut d'un en-tete a volet, le mot reduit tiendrait plus (a 390 px, mot + devis depassent de 176 px la rangee), et le volet lui meme affiche deja le diagnostic en clair dans le corps de chaque page. Son seuil n'est pas celui du volet : c'est le point ou la rangee COMPLETE tient avec le mot ecrit. Le mot en clair ajoute 142 px au bouton, et a creux de 16 px la rangee logo + cinq onglets + bascule + paire avec le mot ne tient qu'a partir de 1200 px (mesure au doigt : 74 px a 1200 px, 137 px a 1190 px). La valeur precedente faisait donc plier la barre d'un portable tactile entre 1022 et 1199 px. Sous 1200 px le bouton au doigt reste en icone seule : il est deja nomme par son aria-label, et toute page affiche le diagnostic en clair dans son corps. */ @media (hover:none){ /* Au doigt, le survol n'existe pas : un appui mene a la page du diagnostic, ou le mot est ecrit en clair dans le corps de chaque page. La bulle n'a donc rien a rattraper. */ .diag-tip{display:none} } /* Au doigt ET a l'aise en largeur (mesure : la rangee complete tient avec le mot a partir de 1200 px), le mot du bouton d'en-tete reprend sa place dans le boitier, comme avant : le bouton ne doit pas rester icone seule la ou il y a de la place et ou le survol n'existe pas. */ @media (hover:none) and (min-width:1200px){ .topnav nav .diag-txt{position:static;width:auto;height:auto;padding:0;clip-path:none} } /* Bascule de thème : un bouton, dans l'en-tête des 19 pages, entre le dernier onglet et le CTA. Icône seule (le libellé est porté par aria-label) : le mot « Thème » ajouterait ~70 px a un en-tête déjà plein, et l'icône soleil/lune se lit sans traduction. - 44 × 44 px : la cible tactile minimale, alors que l'onglet voisin n'a que 8 px de creux. Le carré est déclaré ici (et non laisse a la taille de l'icone) pour que le bouton ne change pas de dimension au changement d'icone : aucun décalage des liens voisins. - le bouton n'apparait que si le script du s'est exécuté (classe a2t-js posée avant la peinture, donc pas de bouton qui saute en place) : sans JavaScript, un bouton qui semble éclairer la page et ne fait rien serait un faux lien. Le thème clair reste donc réservé aux navigateurs qui exécutent le script ; le contenu, lui, est identique. - le dessin suit les autres éléments de l'en-tête : fond transparent, filet --border-2, couleur --muted, et le meme trio au survol que les onglets. - les trois icônes sont écrites dans le HTML, une seule est masquée par la feuille : le bouton n'attend pas le script pour être à l'état, et le passage de l'une a l'autre ne coute aucune mesure. - Demande 2026 : troisième règle « système », qui suit l'appareil. La bascule tourne sur trois modes (sombre → clair → système → sombre) et l'icône montrée reste CELE DU MODE OU L'ON VA, comme avant (sombre → soleil, clair → écran de contraste, système → lune). Le dessin qui décide est porté par `data-theme-rule` (la REGLE choisie), pas par `data-theme` (le thème PEINT) : les deux vivent séparément, sinon un visiteur en « système » dont l'appareil passe en clair le soir verrait son icône changer de destination toute seule. - aucune couleur d'état sur le bouton : il garde le dessin des autres éléments de l'en-tête (fond transparent, filet --border-2, --muted), donc aucun second accent n'entre dans la barre. */ .theme-btn{display:none} html.a2t-js .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border-2);border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease} .theme-btn:hover{color:var(--fg);border-color:var(--fg-3);background:var(--surface)} .theme-btn:active{transform:translateY(1px)} .theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round} .theme-btn .tb-core{fill:currentColor;stroke:none} .theme-btn .tb-moon,.theme-btn .tb-auto{display:none} /* Regle « clair » : le bouton mene au mode système, il montre donc l'ecran de contraste. */ html[data-theme-rule="light"] .theme-btn .tb-sun{display:none} html[data-theme-rule="light"] .theme-btn .tb-auto{display:block} /* Regle « système » : le bouton mene au sombre, il montre donc la lune. */ html[data-theme-rule="system"] .theme-btn .tb-sun{display:none} html[data-theme-rule="system"] .theme-btn .tb-moon{display:block} .theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ── en-tete responsive ── Le point de rupture n'est pas choisi, il est mesure : a 951 px de large la barre tient en une rangee (178 px de logo + 605 px de nav : cinq onglets + bascule de theme + les deux CTA soudes, dans un retrait de 8 % de chaque cote, et 76 px de jeu) ; a 950 px elle plie sur deux rangees et passe de 74 px a 137 px. Meme valeur sur les pages a onglets (le mot « Etancheite » est le plus large des cinq, les onglets font 297 px a eux cinq). Le volet entre donc a 950 px : 71 px de plage desktop de plus, gagnee sur la paire de CTA (192 → 166 px) et le creux de rangee (22 → 16 px), sans toucher au calibre des cinq onglets (13 px). Un ecran de 1024 px garde donc ses liens en clair, a souris comme au doigt : les deux CTA de droite ne se contractent qu'a partir de 561 px. En dessous, ce sont les CINQ ONGLETS qui quittent la barre, pas la barre qui grandit. Le bouton « Menu » deploie un volet accroche sous l'en-tete (top:100% du bandeau colle) : - les deux CTA de droite restent dans la rangee du haut a toutes les largeurs, soudes l'un a l'autre, jamais retractes jusqu'a disparaitre : le diagnostic garde son icone (son mot n'est deja pas dans la boitie, il se discover au survol comme au-dessus de 950 px), le devis garde « Devis gratuit » jusqu'a 561 px puis « Devis » ; - l'en-tete ne change jamais de hauteur : 74 px ferme, 74 px ouvert. Le volet est un calque pose SOUS le bandeau, il ne pousse ni la barre ni le contenu, et comme le bandeau est colle il suit l'ecran. Il se referme au premier lien suivi, a Echap, et des qu'on remonte au-dessus de 950 px ; la page ne defile plus tant qu'il est ouvert (un volet ouvert sur une page qui defile n'est plus axe sur son bouton). La bascule de theme n'est pas un CTA : elle descend dans le volet avec les liens, dont elle suit l'ordre du DOM. Sans JavaScript : pas de bouton « Menu » (il ne proposerait rien) et les cinq onglets restent dans la barre, en deux rangees comme avant. C'est le seul cas ou l'en-tete peut depasser 74 px, et il ne concerne que les navigateurs qui n'executent pas le script : le contenu, lui, reste entierement accessible. Le volet ne peut pas cacher la navigation sans script : ses regles portent la classe a2t-js, posee par le script du avant la peinture. */ .nav-burger{display:none} /* Le conteneur des liens est transparent au-dessus de 950 px : display:contents ne genere aucune boite, les regles .topnav nav a et l'ordre du DOM restent exactement ce qu'ils etaient. */ .nav-links{display:contents} @media (max-width:950px){ /* 44 × 44, meme dessin que la bascule de theme. Le bouton n'apparait que si le script du est passe (classe a2t-js) : sans JavaScript le volet ne peut pas se deployer, donc aucun bouton ne le propose et les onglets restent en clair dans la barre, en deux rangees. */ html.a2t-js .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border-2);border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease} .nav-burger:hover{color:var(--fg);border-color:var(--fg-3);background:var(--surface)} .nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .nav-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .26s cubic-bezier(.22,.7,.2,1)} /* Les trois traits se replient, la croix apparait : les deux dessins sont ecrits dans le SVG, l'un est masque par l'etat (comme les deux icones de la bascule de theme) — le bouton n'attend aucune mesure pour etre a l'etat, et aucun trace n'est anime par transform. La rotation de 180° ne se voit que pendant le geste (une croix est symetrique) : elle rend le remplacement lisible au lieu d'un simple clignotement. */ html.nav-open .nav-burger svg{transform:rotate(180deg)} .nav-burger .nb-bars line{transition:opacity .16s ease,transform .2s ease;transform-box:view-box;transform-origin:12px 12px} .nav-burger .nb-x{opacity:0;transition:opacity .2s ease} html.nav-open .nav-burger .nb-bars line{opacity:0;transform:scaleX(.55)} html.nav-open .nav-burger .nb-x{opacity:1} /* Le nav garde la rangee du logo (il n'y a plus que le bouton Menu et les deux CTA) : pas de pleine largeur, pas de repli. Tout ce qui transforme le conteneur en volet porte la classe a2t-js : sans script le volet ne peut pas s'ouvrir, donc les liens restent dans la barre et ne peuvent jamais etre caches. visibility:hidden ferme le volet a la navigation clavier (un lien masque ne doit pas etre atteignable) ; le retard de 0,30 s a la fermeture laisse la sortie se jouer. Le volet part de 10 px au-dessus de sa place, comme une rangee qui se deploie, avec la courbe du site ; il prend le retrait de la barre, donc ses cartes s'alignent sur le logo. */ html.nav-open{overflow:hidden} html.a2t-js .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;flex-wrap:wrap;gap:10px;padding:14px var(--pad) 22px;margin:0;background:rgba(var(--band-rgb),.98);backdrop-filter:blur(14px);border-top:1px solid var(--border);box-shadow:0 14px 26px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-10px);transform-origin:top center;pointer-events:none;transition:opacity .18s ease,transform .3s cubic-bezier(.22,.7,.2,1),visibility 0s linear .3s} html.a2t-js.nav-open .nav-links{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .3s cubic-bezier(.22,.7,.2,1),visibility 0s} /* Les cinq onglets en clair, deux par deux, plus la bascule de theme en sixieme carte. Les regles portent .topnav nav : la feuille de base (.topnav nav a, et son etat actif) est plus specifique qu'un simple .nav-links a et laisserait un filet de fond transparent sous les cartes. */ html.a2t-js .topnav nav .nav-links a{flex:1 1 calc(50% - 5px);min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid var(--border-2);border-bottom:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);font-size:14px} html.a2t-js .topnav nav .nav-links a:hover{border-color:var(--fg-3);background:var(--inset)} html.a2t-js .topnav nav .nav-links a[aria-current="page"]{border-color:var(--accent-line);background:var(--accent-soft)} html.a2t-js .nav-links .theme-btn{flex:1 1 calc(50% - 5px);width:auto;min-height:44px;border-color:var(--border-2)} /* Le bouton « Menu » se place a la gauche du groupe de droite, contre le logo, puisque les deux CTA gardent l'extreme droite a toutes les largeurs. Le creux du nav tombe a 12 px, et --nav-gap avec lui : le collage du diagnostic au devis se calcule sur cette valeur, donc la paire reste soudee a ce palier. Budget mesure, creux de 12 px : a 950 px, 806 px utiles pour 178 de logo + 44 de menu + 45 de diagnostic + 121 de devis + 24 de creux = 412, soit 394 px de jeu : la rangee du haut n'a jamais ete aussi peu chargee. */ .nav-burger{order:-1} .topnav nav{--nav-gap:12px} .topnav{gap:12px} } /* La rangee du haut ne contient plus le logo complet et le mot complet du devis sous 561 px. Budget mesure (largeurs rendues, creux de 12 px, retrait de 8 %) : a 561 px, 471 px utiles pour 178 de logo avec son sous-titre + 44 de menu + 53 de diagnostic + 139 de devis + 24 de creux = 438, soit 33 px de jeu ; a 560 px, 470 utiles pour 462 une fois le sous-titre retire (121) et le devis retracte (62) + 44 + 45 + 24 = 296, 174 px de jeu. Le palier est donc place a 560, 40 px avant la limite reelle (521 px), pour ne pas dependre du rendu exact des glyphes. - le sous-titre du logo tombe : le mot « A2T Couvreur » reste, la zone est deja dite par la page de titre, le fil d'Ariane et la legende du hero ; - le libelle du devis se retracte a « Devis » par la meme mecanique que celui du diagnostic : le mot est rogne par la largeur du boitier, jamais par un retrait de texte, donc le texte reste entier dans le HTML et le nom accessible ne change pas. */ @media (max-width:560px){ .logo small{display:none} .topnav nav a.btn{overflow:hidden;white-space:nowrap;width:62px;padding:11px 12px} .topnav nav .diag-cta{padding:11px 12px} } /* Dernier palier : mesuree a 320 px, la rangee fait 268,8 px utiles et la rangee en reclame 269,2 (107 de mot + 44 de menu + 44 de diagnostic + 58 de devis + 16 de creux) : elle casse sur une DEUXIEME ligne, et l'en-tete collant vole alors 107 px sur 900 a la page. Le mot du logo passe a 14 px (99,8 au lieu de 107, 7,4 px de jeu) : c'est le seul element de la rangee qui puisse perdre des pixels sans rogner un gabarit tactile de 44 px ni couper un CTA en overflow:hidden. Les 44 px de hauteur et le collage des deux CTA ne bougent pas, et le retrait de l'en-tete reste aligne sur celui des sections. */ @media (max-width:360px){ .topnav nav{--nav-gap:8px} .topnav{gap:8px} .logo{font-size:14px} .topnav nav a.btn{width:58px;padding:11px 10px} .topnav nav .diag-cta{padding:11px 10px} } .tag-n{background:transparent;border-color:var(--border-2)} .tag-n span{color:var(--muted);letter-spacing:.14em} .topnav a:focus-visible,.btn:focus-visible,.faq summary:focus-visible,.zones a:focus-visible,.xlink:focus-visible,.foot nav a:focus-visible,.crumbs a:focus-visible,.legal a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ── boutons ── */ .btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:13px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--border-2);background:transparent;color:var(--btn-fg);transition:background .2s ease,border-color .2s ease,color .2s ease} .btn:hover{background:var(--surface);border-color:var(--fg-3);color:var(--fg)} .btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);font-weight:700} .btn-primary:hover{background:var(--accent-fill-hi);border-color:var(--accent-fill-hi);color:var(--on-accent)} .btn-primary:active{background:var(--accent-fill-lo);border-color:var(--accent-fill-lo)} .btn .chip{border:1px solid var(--border-2);background:var(--inset);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--fg);font-weight:600} .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;container-type:inline-size} /* Le bouton « diagnostic » du corps de page colle au « devis » qui le precede (demande 2026) : meme boite que lui — 13 px de creux vertical, pas de hauteur imposee — donc la MEME hauteur rendue (mesure : 53 px contre 36 px avant, le « devis » etant plus haut que le diagnostic). Le mot du diagnostic est plus long que le sien : la paire la plus large du site mesure 524 px (« Devis gratuit a Bretteville-l'Orgueilleuse » + « Diagnostic de toiture »). Le seuil de soudure n'est donc pas une largeur d'ecran mais la largeur REELLE du conteneur, mesuree par une requete de conteneur sur .actions : 540 px, c'est-a-dire la paire la plus large + 16 px. En dessous, le diagnostic passerait sur la ligne du dessous en etant attire vers la gauche : il garde alors ses quatre angles et son jeu de 14 px, et rien ne se chevauche. */ .actions > .diag-cta{height:auto;padding:13px 15px} @container (min-width:540px){ /* Soudure : le jeu de 14 px se retire sur la seule couture devis/diagnostic (marge negative, le `gap` du conteneur ne change pas, le troisieme bouton garde son jeu), et les angles se repartissent comme dans l'en-tete : pleins vers l'exterieur, droits sur la couture. Les DEUX moities de la couture sont declarees DANS la requete : la mesure (tools/_radius3.cjs, les 50 pages, 4 largeurs) montre que la paire la plus large du site fait 524 px mais que les plus etroites font 392 px. Entre la largeur ou la paire tient en une ligne (pair + 14) et le seuil de soudure de 540 px, les boutons sont EN LIGNE SANS ETRE COLLES : un angle droit herite hors soudure y laissait au « devis » un flanc carre flottant a 14 px du diagnostic. Meme chose quand le diagnostic passe a la ligne : le devis gardait ses deux angles droits de couture. */ .actions > .btn-primary:has(+ .diag-cta){border-radius:var(--radius) 0 0 var(--radius)} .actions > .diag-cta{margin-left:-14px;border-radius:0 var(--radius) var(--radius) 0} } /* ── fil d'Ariane ── */ .crumbs{padding:16px var(--pad);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--fg)} .crumbs span{margin:0 8px;color:var(--border-2)} /* ── hero métier ── */ .svc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,60px);align-items:center;padding:72px var(--pad);border-bottom:1px solid var(--border)} .svc h1{font-size:clamp(32px,3.6vw,46px);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:20px} /* 4,7vw et non 5vw : la ligne « Couvreur à Caen, » mesure 8,8 × la taille de police en Montserrat 900. À 5vw elle dépassait la colonne (546 px pour 538 px à 1280) et repartait sur 4 lignes une fois la police chargée : c'était ça, le saut de mise en page. Le plafond 60px garde de la marge. */ .svc.home h1{font-size:clamp(38px,4.7vw,60px);line-height:1.02} .svc .lead{margin-bottom:30px} .facts-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--border)} .facts-row div{font-size:13px;color:var(--muted)} .facts-row b{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:500;margin-bottom:4px} .photo-frame{position:relative;margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden} .photo-frame img{width:100%;height:auto;transition:transform .6s ease} .photo-frame:hover img{transform:scale(1.04)} .photo-frame figcaption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(var(--band-rgb),.84);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.04em} .photo-frame.tall{background:var(--inset)} .photo-frame.tall img{width:auto;max-width:100%;max-height:min(64vh,540px);margin-inline:auto} /* ── blocs texte + visuel ── */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:flex-start} .split + .split{margin-top:64px} .split h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px} .split p{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:14px} .split figure{margin:0;border-radius:var(--radius-lg);overflow:hidden} .split figure.tall{background:var(--inset)} .split figure.tall img{width:auto;max-width:100%;max-height:min(58vh,480px);margin-inline:auto} .split img{width:100%;height:auto} /* ── image collante ── Une photo ne peut suivre le défilement que s'il reste de la place sous elle dans son conteneur : en grille, sa case est aussi haute que la colonne de texte voisine, et l'image reste bloquée en dessous une fois ce texte lu. Le collant n'est donc déclaré qu'à partir de 921 px, là où la grille est sur deux colonnes (en colonne unique il n'y a plus de colonne voisine à accompagner). Le script mesure la place disponible et pose .a2t-still — retour en statique — quand il n'y en a pas : une image plus haute que sa rangée ne bouge pas. Le cadre est déjà en overflow:hidden, la photo ne déborde jamais et ne passe pas sur l'en-tête. Le décalage vient du collant natif : aucun transform, donc aucun décalage de mise en page (CLS = 0) et aucune concurrence avec le survol qui zoome. L'attache est réglée image par image (--pin posé par le script) pour que la photo se cale au milieu de l'écran pendant tout son trajet, et non sous l'en-tête. Le collant natif ne peut que pousser l'image vers le bas, jamais la faire monter : une photo déjà plus basse que le milieu de l'écran y est ramenée, une photo plus haute que l'écran retombe sur la garde basse (juste sous l'en-tête), c'est le mieux possible sans la rogner. Reste donc a la poser assez haut dans son flux : le collant ne fait que la retenir, jamais la remonter. En mode centre, la photo d'un hero (514 px) etait rejetee a 336 px du bord, son bas a 850 px : elle sortait de l'ecran a l'arrivee sur la page. En tete de page, la colonne image s'aligne en haut de sa rangee et l'attache calculee (--pin) la descend seule au milieu de l'ecran des que le defilement commence — centrage et collant intacts. Sa taille est deja bornee a 64vh, elle tient donc entierement a l'ecran des l'arrivee. */ @media (min-width:921px){ header.svc{align-items:start} .photo-frame,.split figure{position:sticky;top:var(--pin,var(--stick-top,112px))} .photo-frame.a2t-still,.split figure.a2t-still{position:static} } ul{list-style:none;margin:0;padding:0} .check li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-size:13.5px;color:var(--muted);line-height:1.7} .check li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(45deg)} .check li strong{color:var(--fg-hi);font-weight:600} /* ── cartes prestations ── */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} .pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:border-color .2s ease} .pcard:hover{border-color:var(--border-2)} .icon-mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-2);border-radius:var(--radius);color:var(--fg);margin-bottom:16px} .pcard h3{font-family:var(--font-body);font-size:15px;font-weight:600;margin-bottom:8px} .pcard p{font-size:13.5px;color:var(--muted);line-height:1.75} /* ── tableau matériaux ── */ .spec{width:100%;border-collapse:collapse;font-size:14px;margin-top:36px} .spec th,.spec td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top} .spec th{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} .spec tbody tr:hover{background:var(--fg-soft)} .spec td:first-child{font-weight:600;color:var(--fg-hi)} .spec td{color:var(--muted)} /* ── encart inset ── */ .inset-card{background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;position: sticky;top:25vh} .inset-card.center{text-align:center} .inset-card .check{text-align:left} .name{font-family:var(--font-display);font-size:17px;font-weight:800} .prose p{font-size:14px;color:var(--muted);margin-bottom:14px} .foot p + p{margin-top:14px} .spec caption{text-align:left;color:var(--fg-3);font-size:13px;padding-bottom:10px} /* Le cartouche artisan est dans .split : la regle .split img{width:100%} etirait le portrait a la largeur de la colonne (326 px mesure). Deux classes suffisent a la battre, la taille dessinee de 96 px reprend sa valeur. */ .split .portrait,.portrait{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin:0 auto 16px} .inset-card h3{font-family:var(--font-body);font-size:14px;font-weight:600;margin-bottom:14px} /* Coche du cartouche artisan : un chevron symetrique de 9 px en gris se lisait comme une fleche. La coche reelle a un bras court et un bras long (7 x 12 px, trait 2 px), en couleur primaire. L'animation a2t-check (rotation de 45 degre) est conservee. */ .inset-card .check li::before{width:7px;height:12px;margin-top:5px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent)} /* ── FAQ ── */ .faq{margin-top:32px;border-top:1px solid var(--border)} .faq details{border-bottom:1px solid var(--border)} .faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-mono);font-size:18px;color:var(--muted);flex:0 0 auto} .faq details[open] summary::after{content:"–"} .faq summary:hover{color:var(--fg)} .faq summary:hover::after{color:var(--fg)} .faq details[open] summary{color:var(--fg)} .faq details[open] summary::after{color:var(--fg)} .faq p{font-size:14px;color:var(--muted);line-height:1.85;padding-bottom:20px;max-width:70ch} /* ── zones ── */ .zones{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px} .zones a,.zones span{display:inline-flex;align-items:center;padding:8px 15px;border:1px solid var(--border-2);border-radius:999px;font-size:13px;color:var(--muted);text-decoration:none;transition:color .16s ease,border-color .16s ease} .zones a:hover{color:var(--fg);border-color:var(--fg)} /* ── étapes ── L'escalier est volontairement ample (96 px par rang) : il donne de l'air vertical et, surtout, il décale les hauts de colonne. Chaque étape étant observée pour elle-même, la suite se déroule à l'écran au rythme du défilement plutôt que d'un bloc. */ .steps{--stn:320px;--dw:calc(var(--stn) + 24px);--nb:4;--f:4;display:grid;grid-template-columns:repeat(4,1fr);margin:2rem 0 1rem;row-gap:80px} .steps.five{--nb:5;grid-template-columns:repeat(5,1fr)} .steps.five .step:nth-child(5){--st:calc(var(--stn) * 4)} /* Le retrait en escalier passe par une variable (--st) plutot que par padding-top : la hauteur de defilement de l'etape se calcule alors dessus (voir .steps.act) sans repeter la valeur, et l'annulation en mobile tient en une ligne. */ /* align-self:start : sans ca, la grille etire chaque colonne a la hauteur de la plus grande (boite = hauteur max du conteneur). Chaque etape reprend sa HAUTEUR NATURELLE, et le rail de chacune mesure exactement cette hauteur. */ .step{--st:0px;position:relative;align-self:start;padding:0 26px;padding-top:var(--st);border-left:1px solid var(--border)} .step:first-child{padding-left:0;border-left:0} .step:nth-child(2){--st:var(--stn)} .step:nth-child(3){--st:calc(var(--stn) * 2)} .step:nth-child(4){--st:calc(var(--stn) * 3)} .step b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;margin-bottom:22px;font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--muted);border:2px solid var(--border-2)} .step:first-child b{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)} .step h3{font-family:var(--font-body);font-size:16px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 12px} .step p{font-size:15px;color:var(--muted);line-height:1.85} /* ── maillage interne ── */ .xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px} .xlink{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-decoration:none;transition:border-color .2s ease,transform .2s ease} .xlink:hover{border-color:var(--border-2);transform:translateY(-2px)} .xlink h3{font-family:var(--font-body);font-size:15px;font-weight:600;margin-bottom:8px} .xlink p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:14px} /* flèche des liens croisés : dessinée en CSS et allongée au survol, plutôt que « Voir → » répété sur chaque carte du site */ .xlink .arr{display:block;width:26px;height:1px;background:var(--fg-3);position:relative;transition:width .2s ease,background-color .2s ease} .xlink .arr::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--fg-3);border-right:1.5px solid var(--fg-3);transform:rotate(45deg);transition:border-color .2s ease} .xlink:hover .arr{width:38px;background:var(--fg)} .xlink:hover .arr::after{border-color:var(--fg)} /* ── CTA ── */ .cta{text-align:center} .cta h2{font-size:clamp(28px,3.4vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px} .cta p{font-size:14px;color:var(--fg-3);margin-bottom:34px} .cta .actions{justify-content:center} /* ── pied de page ── */ .foot{padding:56px var(--pad) 32px;border-top:1px solid var(--border);background:var(--band)} .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:36px} .foot h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;font-weight:500} .foot nav{display:flex;flex-direction:column;gap:9px} .foot nav a{font-size:13px;color:var(--muted);text-decoration:none} .foot nav a:hover{color:var(--fg)} .foot p{font-size:13px;color:var(--muted);line-height:1.8} .legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:12px;color:var(--fg-3);line-height:1.8} .legal a{color:var(--muted)} /* ── sommaire (ancres internes) ── */ .toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin-top:30px;max-width:760px} .toc a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--border);font-size:14px;color:var(--muted);text-decoration:none} .toc a:hover{color:var(--fg)} .toc a i{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);font-style:normal;flex:0 0 auto;letter-spacing:.08em} .toc a[aria-current="section"]{color:var(--fg);border-top-color:var(--fg-3)} .toc a[aria-current="section"] i{color:var(--muted)} /* ── encart note : filet supérieur + libellé mono (pas de barre colorée à gauche) ── */ .note{background:var(--inset);border:1px solid var(--border);border-top:2px solid var(--border-2);border-radius:var(--radius-lg);padding:24px 26px;margin-top:34px} .note h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:500;margin:0 0 10px} .note p{font-size:14px;color:var(--muted);line-height:1.8} .note p strong{color:var(--fg-hi);font-weight:600} /* ── barre de progression de lecture (décorative, posée par le script) ── */ .readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;background:var(--accent)} /* ── section visée par une ancre : rappel bref du point d'entrée ── */ section{transition:background-color .6s ease} section:target{background:var(--fg-soft)} /* ── animations ── Le masque n'est posé que par le script partagé (classe .watch) : sans JavaScript, avec un crawler qui n'exécute pas le script, ou si le script échoue, tout reste affiché et indexable. L'apparition passe par une animation (pas une transition) : les delays ne débordent pas sur les survols et l'état final ne fige pas les micro-interactions. Seuls opacity et transform sont animés : aucun décalage de mise en page (CLS = 0) et le hero, qui porte l'image LCP, n'est jamais masqué. */ /* La cascade est générique : le script marque d'un seul nom (.a2t-item) tout ce qui doit entrer, et pose le décalage dans la variable --d. Un conteneur n'est jamais masqué en même temps que ses enfants : le script ne marque soit l'un, soit les autres. Ainsi la règle ne dépend plus d'une liste de classes et couvre les colonnes du pied de page, les lignes de tableau et les coches sans toucher au HTML des 15 pages. */ .a2t-reveal.watch:not(.in) .a2t-item{opacity:0;transform:translateY(16px)} .a2t-reveal.in .a2t-item{animation:a2t-in .55s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:var(--d,0ms)} @keyframes a2t-in{from{opacity:0;transform:translateY(16px)}} /* une entrée par nature d'élément : même coût, lecture différente selon le rôle */ .a2t-reveal.in .a2t-item.eyebrow{animation-name:a2t-side} @keyframes a2t-side{from{opacity:0;transform:translateX(-12px)}} .a2t-reveal.in .faq > .a2t-item, .a2t-reveal.in .spec .a2t-item{animation-name:a2t-fade} @keyframes a2t-fade{from{opacity:0}} .a2t-reveal.in .zones > .a2t-item{animation-name:a2t-chip} @keyframes a2t-chip{from{opacity:0;transform:translateY(8px) scale(.94)}} /* image de section : le cadre entre en fondu, la photo se pose (recul 7 % → 1). Le cadre est déjà en overflow:hidden, la photo ne déborde jamais. Le hero, qui porte l'image LCP, n'est pas une section révélée : son image n'est jamais masquée. */ .a2t-reveal.in figure.a2t-item, .a2t-reveal.in .photo-frame.a2t-item{animation-name:a2t-fade} .a2t-reveal.in figure.a2t-item img, .a2t-reveal.in .photo-frame.a2t-item img{animation:a2t-settle 1.15s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:calc(var(--d,0ms) + 80ms)} @keyframes a2t-settle{from{transform:scale(1.07)}} /* Pastille d'étape : se pose quand SON étape entre dans le cadre, pas à la révélation de la section. transform uniquement → aucun décalage de mise en page. */ .a2t-step.in:not(.sub) b{animation:a2t-pop .5s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:.2s} @keyframes a2t-pop{from{transform:translateY(calc(var(--pyy,0px) * var(--pk,1))) scale(.72);opacity:0}} /* ── étapes : défilement vertical + parallaxe ── Deux temps, et les deux ne sortent que du script (classe .watch) : sans JavaScript, avec un crawler qui n'exécute pas le script, ou si le script échoue, les quatre colonnes sont affichées et indexables. 1. Révélation : chaque colonne est observée pour elle-même et se redresse au défilement qui l'amène à l'écran. L'escalier (96 px par rang) étale les quatre passages. 2. Parallaxe : une fois en place, chaque colonne descend à sa propre vitesse (--py posé par le script, l'amplitude croît avec le rang : 6 px pour la 1ʳᵉ, 24 px pour la 4ᵉ). Les colonnes de droite traînent derrière celles de gauche : la suite se creuse sous le pouce puis se referme à la sortie de la section. La course est centrée (±amplitude), donc la position finale est exactement celle de la mise en page statique. Le keyframe de révélation démarre à 34 px + le décalage du moment et se termine sur cette position : les deux effets se composent au lieu de se marcher dessus, sans saut à la fin de l'entrée. Seuls opacity et transform sont animés : la hauteur de la grille ne bouge jamais, donc aucun décalage de mise en page, et l'image LCP du hero n'est pas concernée. */ .a2t-step{transform:translateY(var(--py,0px))} .a2t-reveal.watch .a2t-step:not(.in){opacity:0;transform:translateY(calc(34px + var(--py,0px)))} .a2t-step.in{animation:a2t-step .75s cubic-bezier(.22,.7,.2,1) backwards} @keyframes a2t-step{from{opacity:0;transform:translateY(calc(34px + var(--py,0px)))}} /* Dans une etape coupee en couches, la colonne ne fait que glisser : le fondu est porte par chaque couche, sinon la colonne et ses couches fondraient en meme temps et le decalage ne se lirait plus. */ .a2t-step.sub.in{animation-name:a2t-step-move} @keyframes a2t-step-move{from{transform:translateY(calc(34px + var(--py,0px)))}} /* Dans chaque étape, les trois éléments entrent à leur tour : la pastille, puis le titre, puis le texte. Le décalage part de l'entrée de SA colonne, pas de celle de la section. Le masque parent (opacity:0) couvre déjà les enfants : pas besoin de règle :not(.in). */ .a2t-step.in:not(.sub) h3{animation:a2t-in-py .5s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:.3s} .a2t-step.in:not(.sub) p{animation:a2t-in-py .55s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:.42s} @keyframes a2t-in-py{from{opacity:0;transform:translateY(calc(14px + var(--pyy,0px) * var(--pk,1)))}} /* ── sous-couches d'une étape : le parallaxe descend jusqu'au détail ── Chaque étape est coupée en trois couches observées séparément (pastille, titre, texte) et chaque couche a sa PROPRE VITESSE de défilement : le coefficient --pk (1,6 pour la pastille, 1,2 pour le titre, 1 pour le texte) multiplie le décalage --pyy posé par le script. À l'intérieur d'une colonne, l'écart entre la pastille et son paragraphe passe donc de 0 à ~10 px pendant la traversée de l'écran, puis revient à 0 à la sortie. Les deux courses sont centrées : au repos, la position est exactement celle de la mise en page statique → aucune mise en page animée, aucun décalage de défilement. Les couches ne sont jamais masquées si le script ne les observe pas (classe .sub posée par lui) : sans JavaScript, avec un crawler qui n'exécute pas le script, ou en mouvement réduit, le paragraphe reste affiché et indexable dans sa colonne. Le keyframe de chaque couche repart de 26 px + son décalage du moment : révélation et parallaxe se composent au lieu de se marcher dessus. transform et opacity uniquement. */ .a2t-step b{--pk:1.6} .a2t-step h3{--pk:1.2} .a2t-step p{--pk:1} .a2t-step b,.a2t-step h3,.a2t-step p{transform:translateY(calc(var(--pyy,0px) * var(--pk,1)))} .a2t-reveal.watch .a2t-step.sub > .a2t-layer:not(.in){opacity:0;transform:translateY(calc(26px + var(--pyy,0px) * var(--pk,1)))} .a2t-step.sub > .a2t-layer.in{animation:a2t-layer .62s cubic-bezier(.22,.7,.2,1) backwards} .a2t-step.sub > h3.in{animation-delay:.09s} .a2t-step.sub > p.in{animation-delay:.18s} @keyframes a2t-layer{from{opacity:0;transform:translateY(calc(26px + var(--pyy,0px) * var(--pk,1)))}} /* ── section « Signes d'alerte » : pastille en couleur principale + escalier accentue ── La pastille de CHAQUE etape prend la couleur principale, pas seulement celle de la 1re. Elle se pose a l'entree de SON etape (l'observateur dedie pose .in couche par couche) : l'ambre apparait donc progressivement au fil du defilement, etape par etape. L'escalier passe de 96 px a 150 px par rang (marges 112/56 px au lieu de 96/40) : les hauts de colonne sont plus decalés, les quatre passages s'étalent davantage. L'amplitude de parallaxe (--amp, lue par le script) suit le meme rang : 10 px pour la 1re colonne, 22 px pour la 4e, et les sous-couches suivent la meme amplitude (la feuille les multiplie par le coefficient de vitesse --pk propre a la section : 1,8 pastille / 1,35 titre / 1,1 texte). Garde geometrique : l'ecart RELATIF entre deux colonnes voisines vaut (amp2 - amp1) x pk = 4 x 1,8 = 7,2 px, et a l'interieur d'une colonne la fermeture maximale vaut (22 x 1,8 - 22 x 1,1) = 15,4 px, contre 22 px + 12 px de marges reelles entre pastille, titre et texte. Rien ne se recouvre, en desktop comme en mobile (colonnes empilees, ecart porte a 104 px). Le separateur vertical est retire ici : l'escalier de 450 px laisserait un filet de 450 px sans colonne a separer. Perimetre : la section marquee (#symptomes de zinguerie.html) et son seul homologue reel (#symptomes d'etancheite.html, meme section, meme libelle de sommaire). Les 12 autres pages ont un bloc .steps d'une autre nature (#deroule, deroule de chantier) : il garde le regime general, une seule pastille ambre et l'escalier de 96 px. */ #symptomes .steps{--stn:300px;margin:112px 0 56px} /* Les regles de couleur et d'amplitude de cette section ont ete retirees : le regime general .steps.act (ligne par etape, numero ambre pour l'etape en cours, amplitude par rang) les couvre desormais a l'identique. Il ne reste ici que son escalier plus ample et ses coefficients de vitesse propres. */ #symptomes .steps .step b{--pk:1.8} #symptomes .steps .step h3{--pk:1.35} #symptomes .steps .step p{--pk:1.1} #symptomes .steps::before{display:none} /* Parallaxe annule pour TOUS les blocs .steps : le script lit l'amplitude dans --amp. Elle est a zero parce que chaque etape est DESORMAIS EPINGLEE au milieu du cadre pendant sa fenetre (voir le bloc @media (min-width:921px) plus bas) : le script designe l'etape en cours par la geometrie de mise en page (offsetTop / offsetHeight / padding-top) et ne voit pas le transform. Une colonne poussee de 76 px serait donc epinglee 76 px a cote du milieu de l'ecran tout en restant « l'etape en cours ». Le glissement d'entree des colonnes et des sous-couches est conserve (34 px -> 0) : il finit a la position de mise en page, donc le collage tombe juste. */ .steps .step{--amp:0px} /* Centrage vertical du bloc : la rangee de colonnes reste a equidistance du haut et du bas du cadre pendant qu'elle traverse l'ecran. Declare ici et non sous .act : c'est une regle de mise en page, pas un effet de script — la hauteur de page ne change donc pas quand le script se charge (aucun saut de mise en page). min-height ne fait que pousser la rangee : le contenu depasse deja ce minimum sur la plupart des pages. */ .steps{align-content:center;min-height:calc(100vh - var(--nav-h,96px) - 152px);min-height:calc(100svh - var(--nav-h,96px) - 152px)} /* ── toutes les sections .steps : etape « desactivee » puis activee au defilement ── Regime general, applique aux 18 blocs .steps du site. Il ne vit que sous la classe .act, posee par assets/a2t.js : sans le script (crawler, script bloque), sans IntersectionObserver et en mouvement reduit, la classe n'existe pas, les etapes sont a opacite pleine et la 1re pastille reste ambre comme avant. Rien n'est masque. 1. En retrait / en cours : chaque colonne part a --dim (.5) et revient a son opacite initiale quand elle est EN COURS (le script pose .cur sur l'etape dont le centre est le plus proche du milieu de l'ecran). Les autres restent en retrait. Le masque d'entree est abaisse a --dim au lieu de 0 sous ce regime : l'etape reste visible, elle n'est pas effacee. Le passage se fait en transition d'opacite. Le critere etant la POSITION et non l'ordre de passage, l'effet est reversible : en remontant, l'etape du dessus reprend l'ambre et celle du dessous repart en retrait. 2. La pastille du numero prend la couleur principale pour l'etape en cours seulement (fond ambre, chiffre nuit), la meme que porte la 1re etape en statique. Regle plus specifique que .step:first-child b, donc l'ambre n'est plus reserve a la premiere colonne. 3. Rail vertical : un trait ambre PAR etape, de la hauteur naturelle de cette etape, qui se trace vers le bas pendant que l'etape traverse l'ecran (progression ecrite dans --rp, lue en clip-path). Pseudo-element en position absolute hors du flux, pointer-events:none : il ne peut rien deplacer ni rien recouvrir (il tient dans la gouttiere gauche de la colonne, a 18 px du texte, pour un retrait de 20 a 120 px). 4. Les sous-couches (pastille, titre, texte) gardent leur entree decalée mais ne fondent plus : c'est la colonne qui porte l'opacite, sinon le produit des deux rendrait l'etape invisible a l'etat desactive au lieu de la montrer en retrait. Contraste de l'etat desactive : le paragraphe (--muted) descend a 2,8:1 a .5 ; c'est un etat transitoire qui se resout a l'activation, jamais l'etat repose. Le reglage tient dans un seul nombre (--dim). */ .steps.act{--dim:.5} .steps.act .a2t-step{opacity:var(--dim);transition:opacity .55s cubic-bezier(.22,.7,.2,1)} .a2t-reveal.watch .steps.act .a2t-step:not(.in){opacity:var(--dim);transform:translateY(calc(34px + var(--py,0px)))} .steps.act .a2t-step.cur{opacity:1} /* Sous ce regime, l'entree de la colonne ne joue que le glissement : l'opacite est portee par la transition --dim → 1 de la regle .cur. Sans cette regle, l'animation d'entree (plus prioritaire qu'une regle) ferait fondre la colonne de 0 a 1 et l'etat « en retrait » ne se lirait pas. */ .steps.act .a2t-step.in{animation-name:a2t-step-move} /* Idem pour les elements d'une etape non coupee en couches : leur entree garde son decalage (pastille, titre, texte) mais ne fond plus, pour ne pas multiplier l'opacite de la colonne. */ .steps.act .a2t-step.in:not(.sub) b{animation-name:a2t-pop-move} .steps.act .a2t-step.in:not(.sub) h3,.steps.act .a2t-step.in:not(.sub) p{animation-name:a2t-in-move} @keyframes a2t-pop-move{from{transform:translateY(calc(var(--pyy,0px) * var(--pk,1))) scale(.72)}} @keyframes a2t-in-move{from{transform:translateY(calc(14px + var(--pyy,0px) * var(--pk,1)))}} .steps.act .a2t-step b{background:transparent;border-color:var(--border-2);color:var(--muted);transition:background-color .5s cubic-bezier(.22,.7,.2,1),border-color .5s cubic-bezier(.22,.7,.2,1),color .5s cubic-bezier(.22,.7,.2,1)} /* Le numero ne prend la couleur principale que pour L'ETAPE EN COURS (.cur, pose par le script sur l'etape dont le centre est le plus proche du milieu de l'ecran) : les autres restent grises et en retrait. Une seule pastille ambre a la fois dans le bloc, l'oeil sait ou on en est de la suite. Sans le script, la regle de base .step:first-child b garde la 1re pastille ambre. */ .steps.act .a2t-step.cur b{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)} /* Rail vertical : UN trait ambre PAR etape, decale de 26 px a gauche du contenu de SON etape, de la HAUTEUR NATURELLE DU BLOC (la colonne est en align-self:start : sa boite n'est pas etiree a la hauteur du conteneur, donc le rail mesure exactement le bloc, retrait d'escalier exclu). Il se trace vers le bas UNIQUEMENT pendant que le numero de cette etape est allume (.cur) : la fenetre de progression du script est bornee aux points de passage du milieu d'ecran entre etapes voisines, donc le trait part avec l'ambre et finit quand l'ambre passe a l'etape suivante. La feuille ne fait que lire --rp (0 a 100 %) pose par le script, et le deplacage passe par clip-path (aucune mise en page animee, aucune mesure de hauteur, donc rien qui tremble sous le parallaxe). pointer-events:none. Le degagement de 27 px se lit sur les quatre etapes : les colonnes 2 a 4 ont un filet de 1 px + un padding gauche de 26 px, donc le rail pose sur leur filet (-1 px, epaisseur 2 px) tombe a 28 px de leur contenu ; la 1re colonne n'a ni filet ni padding gauche, son rail est pousse de 27 px hors du bloc, dans le retrait de section (>= 73 px a 921 px de large). Vers la gauche du texte precedent, il reste au moins 24 px de gouttiere : rien n'est recouvre. */ .steps.act .step::after{content:"";position:absolute;left:-1px;top:var(--st);height:calc(100% - var(--st));width:2px;border-radius:2px;background:var(--accent);pointer-events:none;clip-path:inset(0 0 calc(100% - var(--rp,0%)) 0)} .steps.act .step:first-child::after{left:-27px} /* ── Etape EN COURS = etape EPINGLEE au milieu du cadre, pour TOUS les blocs .steps ── Meme contrat que le bloc « deroule » de l'accueil : pendant toute sa fenetre d'ambre, le bloc de l'etape en cours (numero + titre + texte) reste FIGE sur la ligne du milieu de l'ecran, et les colonnes voisines restent repliees sur leur numero jusqu'a leur passage. Ce qui bouge, c'est le reste de la page ; ce qui est lu ne defile plus. TROIS NOMBRES LIES, regles une fois ici et partages par les 18 blocs du site : - --stn : retrait d'escalier PAR RANG (le degagement AU-DESSUS du contenu). C'est la course de defilement d'une etape : le script designe l'etape dont le CENTRE de boite de mise en page est le plus proche du milieu d'ecran, donc une etape garde l'ambre pendant l'ecart qui separe deux centres voisins, c'est-a-dire --stn. - --dw : reserve LIBRE EN DESSOUS du contenu (--stn + 24, les 24 px de marge negative du masque). C'est la course du collage : un element collant ne glisse que dans la boite de CONTENU de son parent (mesure : 344 px demands en padding-bottom, 46 px obtenus), donc la reserve est un bloc VIDE EN FLUX sous l'etape, pas une marge interne. - --ch : hauteur du bloc colle, ecrite par le script (colonne par colonne, mesuree au redimensionnement) : le point de collage est 50vh - --ch / 2, c'est ce qui pose le bloc exactement au milieu. 212 px = valeur de repli sans script. Course de l'etape = course de l'epingle : le texte est fige pendant TOUTE sa fenetre. C'est le prix de ce contrat, et c'est la raison pour laquelle la reserve compte dans la hauteur de page (~344 px de vide par etape, aucun paragraphe etire, aucun interligne gagne). Un seul element collant : deux enfants collants ne restent pas solidaires (la course d'un collant vaut hauteur du parent - sa hauteur), donc une pastille de 40 px et un masque de 174 px se libereraient a ~130 px d'ecart et le numero partirait avant son paragraphe. Perimetre : desktop uniquement (>= 921 px) et sous @supports (width:100cqi) — la largeur ouverte est exprimee en unite de conteneur. Sans script (.act absent), sans @supports, en mouvement reduit et sous 921 px : rien n'est replie, rien n'est elargi, tout reste affiche et indexable ; la reserve et le collage sont annules en mobile. */ @media (min-width:921px){ /* Le degagement est partage : moitie AU-DESSUS (--st, designe l'etape), moitie EN DESSOUS (--dw, la maintient epinglee). Uniquement du degagement en haut laisserait le texte defiler pendant sa propre fenetre (mesure avant regle : 343 a 558 px de course pendant la fenetre). Reserve posee HORS de .act : posee sous .act, chaque page se rallongerait de ~344 px a l'apparition de la classe (mesure : pire saut de mise en page 0,0023 -> 0,0087). Le rail de la feuille est repris ici sur le bloc colle (regle .step-body::after) : pose sur la colonne, il suivrait la position de mise en page pendant que le contenu monte et se dessinerait a cote de son etape. Ce pseudo-element est donc recycle en reserve vide. */ /* Les DEUX selecteurs sont necessaires : la reserve doit exister HORS de .act (sinon la page se rallongerait de 4 x --dw a l'apparition de la classe du script) ET battre la regle du rail (.steps.act .step::after, ligne 569, plus specifique) quand .act est pose. Meme selecteur, place APRES la regle du rail : a specificite egale, l'ordre de source tranche. */ .steps .step::after,.steps.act .step::after{content:"";position:static;display:block;width:1px;height:var(--dw);background:none;border-radius:0;clip-path:none} @supports (width:100cqi){ /* LA PART DE LA RANGEEE QUE PREND LA COLONNE EN COURS. Un seul nombre, --f (declare sur .steps) : il sert a la fois a flex-grow et a --slotw, qui doit valoir exactement la part de flex de la colonne (sinon le texte depasse son cadre, ou ne l'remplit pas). Une part vaut (100cqi - 238px) / (--nb - 1 + --f) ; --nb porte le nombre d'etapes du bloc. --f est monte de 2,2 a 3 puis a 4 (demandes 2026) : le titre et le paragraphe ont grandi, il leur fallait plus de place, et elle vient du CONTENEUR (flex) et non des blocs de texte. Mesure a 1280 px, --f = 4 : texte 418 px contre 359 a --f = 3 et 297 a 2,2 ; les colonnes repliees descendent a 158 px (cinq etapes) et 173 px (quatre), elles ne montrent que leur pastille de 40 px, donc rien n'y est ecrase ni coupe. flex-wrap:wrap ne sert qu'a garantir le centrage vertical de la rangeee dans la min-height declaree plus haut : align-content n'agit sur une rangee UNIQUE que si le conteneur est multi-rangees. Avec flex-basis:0 et min-width:0 les colonnes ne debordent jamais, donc elles ne reviennent jamais a la ligne. */ .steps.act{display:flex;flex-wrap:wrap;align-content:center;container-type:inline-size;--slotw:calc((100cqi - 238px) * var(--f) / (var(--nb) - 1 + var(--f)))} /* meme duree et meme courbe que la largeur du masque : colonne et contenu s'ouvrent ensemble */ .steps.act .step{flex:1 1 0;min-width:0;transition:flex-grow .7s cubic-bezier(.22,.7,.2,1)} .steps.act .step.cur{flex-grow:var(--f)} .steps.act .step-frame{width:0;overflow:hidden;padding:24px 0;margin:-24px 0;transition:width .7s cubic-bezier(.22,.7,.2,1)} .steps.act .step-slot{width:var(--slotw)} /* text-wrap:pretty : la mesure etant plus large que la colonne repliee, la derniere ligne ne doit pas se retrouver avec un seul mot. */ .steps.act .step-slot p{text-wrap:pretty} .steps.act .step.cur .step-frame{width:calc(100% + 26px)} /* Garde de lisibilite : le bloc colle n'est jamais pousse sous l'en-tete collant (--nav-h, 96 px declares, 74 px rendus) ; le collage bascule sur la garde la plus proche. --ch est plus petit que l'ecran a tous les points de rupture concernes, le second terme ne gagne que sur les fenetres tres basses. */ .steps.act .step-body{position:sticky;top:max(calc(50vh - var(--ch,212px) / 2), calc(var(--nav-h,96px) + 8px))} /* le rail ambre, repris sur le bloc colle : a sa hauteur, 27 px a gauche du contenu (sur le filet de la colonne, comme la feuille le pose ailleurs). Sans transition : --rp est ecrit a chaque image par le script, le trait se trace donc au rythme du defilement. */ .steps.act .step-body::after{content:"";position:absolute;left:-27px;top:0;width:2px;height:100%;border-radius:2px;background:var(--accent);pointer-events:none;clip-path:inset(0 0 calc(100% - var(--rp,0%)) 0)} /* Le parallaxe est annule (--amp:0px, regle plus haut) : il deplace la COLONNE par transform, une valeur que le critere du script ne mesure pas. Le glissement d'entree de la colonne est conserve (34 px -> 0) : il FINIT a la position de mise en page, donc le collage tombe juste. Le filet du haut (--sy) suit la pente des colonnes : il n'y a plus de pente a suivre. */ .steps.act .step{--amp:0px} .steps.act::before{transform:none} } } @media (prefers-reduced-motion:reduce){ /* rien a retirer ici : le script ne pose pas .act en mouvement reduit, donc ni la reserve (regle desktop .steps .step::after) ni le rail ne sont crees. */ } .a2t-reveal.watch .steps.act .a2t-step.sub > .a2t-layer:not(.in){opacity:1} .steps.act .a2t-step.sub > .a2t-layer.in{animation-name:a2t-layer-move} @keyframes a2t-layer-move{from{transform:translateY(calc(26px + var(--pyy,0px) * var(--pk,1)))}} @media (max-width:920px){ /* en colonne unique le bloc depasse deja l'ecran : le centrage n'aurait rien a centrer. */ .steps{min-height:0} } /* coche de liste : le trait se pose après son texte, même décalage hérité que le
  • . Le keyframe reprend la rotation de 45° du trait : sans elle, la coche se redresserait à la fin de l'animation. */ .a2t-reveal.in .check li::before{animation:a2t-check .4s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:calc(var(--d,0ms) + 150ms)} @keyframes a2t-check{from{transform:rotate(45deg) scale(.55);opacity:0}} /* flèche des liens croisés : se découvre de la gauche vers la droite à l'entrée (clip-path : aucune mise en page animée, le chevron n'est pas déformé), puis reste réglable au survol. */ .a2t-reveal.in .xlink .arr{animation:a2t-arr .5s cubic-bezier(.22,.7,.2,1) backwards;animation-delay:calc(var(--d,0ms) + 160ms)} @keyframes a2t-arr{from{clip-path:inset(0 100% 0 0)}} /* Filet des étapes : se dessine de la gauche vers la droite quand la section entre, et suit la pente de la première colonne (--sy) pour rester solidaire de la suite au lieu de rester figé pendant qu'elle glisse. Le tracé replié passe par clip-path et non par transform : transform est réservé au parallaxe, sinon l'animation (plus prioritaire que la règle) effacerait le décalage. Le tracé replié n'existe que si le script a posé .watch : sans JS, le filet est là. */ .steps{position:relative} .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-2);transform:translateY(var(--sy,0px))} .a2t-reveal.watch:not(.in) .steps::before{clip-path:inset(0 100% 0 0)} .a2t-reveal.in .steps::before{animation:a2t-line .7s .1s cubic-bezier(.22,.7,.2,1) forwards} @keyframes a2t-line{from{clip-path:inset(0 100% 0 0)}} /* en-tête collant : le fond se densifie une fois la page défilée. Seule la couleur change — pas de padding, donc aucun saut de mise en page sous l'en-tête collant. */ .topnav{transition:background-color .25s ease,border-color .25s ease} .topnav.compact{background:rgba(var(--band-rgb),.97);border-bottom-color:var(--border-2)} /* carte prestation : léger décollement, filet et pictogramme réagissent ensemble */ .pcard{transition:border-color .2s ease,transform .2s ease} .pcard:hover{border-color:var(--border-2);transform:translateY(-2px)} .icon-mark{transition:border-color .2s ease} .pcard:hover .icon-mark{border-color:var(--fg-3)} .btn:active{transform:translateY(1px)} /* FAQ : ouverture animée sans JavaScript d'animation. Le texte est déjà dans le HTML (donc indexé). Le duo height:0 / height:auto n'est actif que si interpolate-size est supporté : sinon la règle est ignorée et le contenu reste visible. */ @supports (interpolate-size:allow-keywords){ .faq details{interpolate-size:allow-keywords} .faq details::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete} .faq details[open]::details-content{height:auto} } .faq summary::after{transition:color .2s ease} @media (max-width:920px){ .svc,.split,.foot-grid{grid-template-columns:1fr} .split figure{order:-1} .grid-3,.xlinks{grid-template-columns:1fr} .steps,.steps.five{grid-template-columns:1fr;gap:80px} /* en colonne unique : plus d'epingle ni de reserve — la regle qui recycle le pseudo-element en reserve vide est dans @media (min-width:921px), donc ici le pseudo-element de la colonne reste le RAIL ambre de la feuille (le masquer ici supprimerait les rails en mobile). Le bloc depasse deja l'ecran : il n'y a rien a centrer. */ .step,.step:first-child{padding:0;border-left:0} .step:nth-child(2),.step:nth-child(3),.step:nth-child(4),.steps.five .step:nth-child(5){--st:0px} /* en colonne unique il n'y a plus de filet a recouvrir : le rail se decalle a 16 px a gauche du contenu, dans le retrait de section (>= 25,6 px a 320 px de large). first-child est repris ici : sa regle desktop est plus specifique que celle du media. */ .steps.act .step::after,.steps.act .step:first-child::after{left:-16px} .spec caption{padding-bottom:8px;display:block} .spec thead{display:none} .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%} .spec tr{border-bottom:1px solid var(--border-2);padding:14px 0} .spec td{border:0;padding:4px 0} .spec td:first-child{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:500} /* sommaire sur deux colonnes : en une seule il coûte ~300 px de défilement avant la photo du hero, et le hero mobile est déjà long */ .toc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px} .toc a{padding:8px 0;gap:8px;font-size:13px} .toc a i{font-size:10px} .steps::before{display:none} /* escalier annule en colonne unique (il faut le re-annuler pour cette section : la rege #symptomes est plus specifique que .step:nth-child), mais l'ecart reste plus ample */ #symptomes .steps{gap:104px} #symptomes .steps .step:nth-child(2),#symptomes .steps .step:nth-child(3),#symptomes .steps .step:nth-child(4),#symptomes .steps .step:nth-child(5){--st:0px} } /* Le nav d'onglets ne doit jamais etre collant sur deux lignes : 137 px retenus en haut d'un écran de 844 px, c'est 16 % de la hauteur utile. Remplace (demande 2026) le resserrement 901-1060 px et le retour a « position:static » sous 900 px. Les deux ne servent plus : sous 961 px les cinq onglets ne sont plus dans la barre, donc la barre ne se replie plus et tient 74 px a toutes les largeurs (mesure : 74 px a 320 px comme a 1440 px, barre deployee 156 px). L'en-tete reste donc colle partout, y compris au doigt — il ne depasse plus 74 px que lorsque le volet est ouvert, et le volet est un etat voulu. Le volet ouvert est la seule largeur ou l'en-tete depasse sa hauteur declaree : les regles qui reglent la position des blocs colles sur la hauteur de l'en-tete sont donc reprisent a la valeur reelle. --nav-h est releve par le script sur la hauteur rendue de la barre ; ouvert, le volet ajoute la hauteur du nav. Le rail du bloc colle passe en non-colle, comme sous 921 px : un rail de 502 px dans un ecran de 800 px, avec la barre deployee, ne se lit plus. */ /* Le volet est un calque sous le bandeau : la hauteur rendue de l'en-tete reste 74 px ouvert comme ferme, donc la reserve de 96 px que les ancres et le rail du bloc colle se donnent (--nav-h) reste juste a toutes les largeurs. C'est pour cela que la paire « en-tete statique sous 900 px + --nav-h:24 px » a disparu : elle corrigeait un en-tete de deux rangees, qui n'existe plus. L'en-tete est colle partout, y compris au doigt. */ @media (prefers-reduced-motion:reduce){ .diag-cta,.diag-txt,.diag-tip{transition:none} .a2t-reveal.watch:not(.in) .a2t-item{opacity:1;transform:none} .a2t-reveal.in .a2t-item, .a2t-reveal.in figure.a2t-item img, .a2t-reveal.in .photo-frame.a2t-item img, .a2t-reveal.in .check li::before, .a2t-reveal.in .xlink .arr, .a2t-step.in,.a2t-step.in b,.a2t-step.in h3,.a2t-step.in p,.a2t-reveal.in .steps::before, .a2t-step.sub.in,.a2t-step.sub > .a2t-layer.in{animation:none} .a2t-reveal.watch .a2t-step:not(.in){opacity:1;transform:none} .a2t-reveal.watch .a2t-step.sub > .a2t-layer:not(.in){opacity:1} .a2t-step,.a2t-step b,.a2t-step h3,.a2t-step p,.steps::before{transform:none} #symptomes .steps .step b{transition:none} .readbar{display:none} .topnav{transition:none} .pcard:hover,.xlink:hover,.btn:active{transform:none} .theme-btn:active{transform:none} .xlink .arr,.xlink .arr::after{transition:none} .xlink:hover .arr{width:26px} .photo-frame:hover img{transform:none} /* le volet et le bouton menu se contentent d'apparaitre : plus de glissement, plus de rotation */ .nav-links,.nav-burger svg,.nav-burger .nb-bars line,.nav-burger .nb-x{transition:none} /* le collant est une animation de défilement : retiré, l'image reprend sa place dans sa case */ .photo-frame,.split figure{position:static} .photo-frame img,.split figure img{transform:none} /* les bandes-photo du corps ont leur propre bloc de mouvement reduit, a la fin de leur section : declarees ici, leurs regles seraient battues par les regles `@media (min-width:921px)` plus bas (meme specificite, ecrites apres). Mesure : translate 0px et scale 1.1 survivaient. */ .ncard:hover{transform:none} .ncard .arr,.ncard .arr::after{transition:none} .ncard:hover .arr{width:26px} } /* ── pages commune ── */ .svc h1.long{font-size:clamp(28px,3vw,38px)} .lead.also{margin-top:28px;font-size:14px} .lead.also a{color:var(--muted)} .lead.also a:hover{color:var(--fg)} .meta.tight{margin:5px 0 22px} @media (max-width:920px){ .svc h1.long{font-size:clamp(24px,6.2vw,32px)} } /* ── articles de chantier ── La méta-ligne d'un article (date · commune · durée · surface · matériau) doit se lire comme une fiche, pas comme un paragraphe : monospace, petite, et elle se replie en colonne sans que les « · » restent en fin de ligne. */ /* Le corps d'article n'est plus une colonne centre : chaque temps du chantier est un BLOC, et la photo du temps devient l'arriere-plan du bloc (voir « bandes » plus bas). Le texte n'est plus centre non plus : il est aligne et JUSTIFIE (demande 2026), les deux rives de la colonne tombent au meme endroit d'un paragraphe a l'autre. Les cartes de fin de corps (note, liste) gardent une colonne bridee : elles ne portent pas de photo, un bloc pleine largeur y ferait des lignes de 90 caracteres. */ .art{text-align:left} .art .note,.art-check{max-width:74ch;margin-inline:auto} .svc .ameta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-3);margin:0 0 18px;line-height:1.9} .svc .ameta a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border-2)} .svc .ameta a:hover{color:var(--fg);border-bottom-color:var(--fg-3)} /* Le corps d'article est le seul endroit du site où un titre de paragraphe n'est pas un titre de section : il reste sous le h2 de section en taille, au-dessus en graisse. IL EST A LA COULEUR PRIMAIRE (--accent) : le titre est le seul repere du temps qui ne se lisite pas sur le texte — il doit donc s'extraire de la colonne. Le contraste est porte par le plateau du degrade sous la colonne (opaque a .93, regle du § 2) et par la vitre : mesure en deux themes, au repos comme a l'etat revele, la page garde 4,5:1 et plus sur tout le corps (outils de mesure). */ .art h2{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:0 0 16px;color:var(--accent)} /* 24 px entre deux paragraphes : chaque temps du chantier se relit comme un bloc. Le texte est justifie (les deux rives alignees), avec la césure francaise pour que la justification ne sorte pas des « trous » entre les mots sur une colonne etroite ; la ligne reste bridee a la colonne du bloc (--txtw, regle du § 2) : un paragraphe plus etroit que sa colonne laisserait la photo a nu sous la rive droite du texte. */ .art p{font-size:15px;color:var(--muted);line-height:1.9;max-width:var(--txtw,44ch);margin:0 0 24px;text-align:justify;text-justify:auto;hyphens:auto;-webkit-hyphens:auto} .art .photo-frame{margin:34px 0} /* la bande ne prend PAS cette marge : elle est en absolu, calee sur les deux bords ET sur toute la hauteur du bloc (inset-block:0). Une marge de 34 px sur un absolu ne se replie pas, elle RETRECIT le cadre : mesuree a 1440 px, la bande faisait 461 px dans un bloc de 529 px, soit 34 px de fond nu en haut et en bas — et la course du parallaxe (reserve --zb) devenait plus grande que ce que l'image avait a manger. Meme specificite que la regle du dessus, elle la gagne donc en etant ecrite apres. */ .art .art-band{margin:0} .art-check{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)} /* Le texte du post est dans la page : il se lit, se sélectionne et se copie tel quel. Les sauts de ligne sont ceux du post, pas ceux d'un paragraphe justifié. */ .post{max-width:64ch;margin-top:32px;background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px} .post p{font-size:14px;color:var(--muted);line-height:1.85;margin:0 0 14px;white-space:pre-line} .post p:last-child{margin-bottom:0} .post-hook{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--fg);line-height:1.35} .post-cap{border-top:1px solid var(--border);padding-top:16px} .post-tags{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em} .post-tags a{color:var(--muted);text-decoration:none} .post-tags a:hover{color:var(--accent)} /* Le fil des chantiers : une carte par article, vignette à gauche. La vignette est déjà en 1200×630 (le format de partage) : elle n'est pas recadrée ici. */ .news{display:grid;gap:22px;margin-top:36px} /* Sur l'accueil, la section prix ne garde qu'une carte : la grille trois colonnes laisserait deux vides à droite. */ .xlinks.one{grid-template-columns:minmax(0,1fr)} .ncard{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;text-decoration:none;transition:border-color .2s ease,transform .2s ease} .ncard:hover{border-color:var(--border-2);transform:translateY(-2px)} .ncard img{width:100%;height:auto;border-radius:var(--radius)} .ncard h2{font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:6px 0 10px} .ncard p{font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 14px;max-width:62ch} .ncard .arr{display:block;width:26px;height:1px;background:var(--fg-3);position:relative;transition:width .2s ease,background-color .2s ease} .ncard .arr::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--fg-3);border-right:1.5px solid var(--fg-3);transform:rotate(45deg);transition:border-color .2s ease} .ncard:hover .arr{width:38px;background:var(--fg)} .ncard:hover .arr::after{border-color:var(--fg)} .nmeta{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:0} @media (max-width:920px){ .ncard{grid-template-columns:minmax(0,1fr);gap:18px} .svc .ameta{line-height:2.1} } /* ============================================================================ BLOC DECALE DE LA BALISE