/* ========================================================= Simeal — charte du theme WordPress ENGENDRE par 11-wordpress/construire-theme.py. Source : 04-contenu/_charte-page.css et _entete.css. Toute modification faite ici sera perdue. ========================================================= */ /* ========================================================== Simeal — charte commune des pages de porte Injectee par assembler.py a la place du jeton @CHARTE@. Ne pas dupliquer dans les pages : toute retouche se fait ici. ========================================================== */ :root{ --ground:#FFFFFF; --ink:#0B0B12; --ink-2:#4A4A5C; --ink-3:#5E5E72; --rule:#E4E4EE; --rule-strong:#C6C6D6; --accent:#5433A8; --accent-soft:#F1ECFA; --cta:#E4DEF6; --cta-ink:#0B0B12; --vert:#2F7D57; --gris:#8C8C9F; --orange:#AD6220; --f-display:"Syne",system-ui,sans-serif; --f-body:"Manrope",system-ui,sans-serif; --t-mention:.9375rem; --t-second:1.0625rem; --t-base:1.0625rem; /* 18/09 : « le texte des paragraphes est écrit trop gros » (19 -> 17 px) */ --t-lead:1.25rem; --t-h3:1.5rem; --t-h2:2.375rem; --t-h1:clamp(2.5rem,6vw,3.5rem); --t-chiffre:clamp(2.75rem,7vw,4.25rem); --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:5rem; --s9:7rem; --tete-h:56px; --r:2px; --r-btn:5px; --col:1040px; --gouttiere:12rem; /* colonne de gauche commune aux sections a deux colonnes */ } /* MODE SOMBRE SUSPENDU (17/09/2026). Les pages v3 sont dessinees en clair, sur un fond de nuages clair : en mode sombre, leur texte passait en blanc sur ce fond et devenait illisible (constate par Alexandre sous WordPress, ordinateur en mode sombre). Le site reste donc toujours clair. La palette sombre est gardee ci-dessous, hors service, pour le jour ou un fond sombre sera dessine. La page d'attente garde son mode sombre (12-construction/_construction-wp.css). @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#0B0B12; --ink:#F3F3F8; --ink-2:#AFAFC2; --ink-3:#9494AC; --rule:#232336; --rule-strong:#3A3A54; --accent:#A98CFF; --accent-soft:#1B1630; --cta:#CFC3EC; --cta-ink:#0B0B12; --vert:#6FD3A3; --gris:#9494AC; --orange:#E0A45E; } } :root[data-theme="dark"]{ --ground:#0B0B12; --ink:#F3F3F8; --ink-2:#AFAFC2; --ink-3:#9494AC; --rule:#232336; --rule-strong:#3A3A54; --accent:#A98CFF; --accent-soft:#1B1630; --cta:#CFC3EC; --cta-ink:#0B0B12; --vert:#6FD3A3; --gris:#9494AC; --orange:#E0A45E; } */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--tete-h) + 10px)} /* 21/09 : le bandeau est collant ; sans ce decalage la cible d une ancre passe dessous */ body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.12;letter-spacing:-.03em;font-weight:600;text-wrap:balance} h1{font-size:var(--t-h1);line-height:1.05} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)} p{margin:0;max-width:64ch} a{color:var(--accent)} a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* 21/09 : le flou CSS plein ecran etait recompose a chaque image de defilement. La texture du fond fait 150 x 1100 px : son agrandissement suffit a la fondre, le flou ne se voyait pas et coutait cher. */ #ciel{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;transform:scale(1.06)} .page{position:relative;z-index:1} .wrap{max-width:var(--col);margin:0 auto;padding:0 var(--s5)} /* le sur-titre revient : c est lui qui donne du relief à la page */ .sur{font-size:var(--t-mention);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 var(--s4)} /* ---------- sommaire collant ---------- */ .somm{position:sticky;top:var(--tete-h);z-index:50;background:var(--ground);border-bottom:1px solid var(--rule)} .somm__in{max-width:var(--col);margin:0 auto;padding:var(--s3) var(--s5);display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none} .somm__in::-webkit-scrollbar{display:none} .somm a{font-size:var(--t-mention);color:var(--ink-3);text-decoration:none;white-space:nowrap;padding:var(--s2) 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .somm a:hover{color:var(--ink)} .somm a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600} /* ---------- en-tête ---------- */ .hero{padding:var(--s8) 0 var(--s7)} .hero__lead{font-size:var(--t-lead);color:var(--ink-2);margin-top:var(--s5);max-width:56ch} .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s6);padding:var(--s7) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:var(--s7)} /* Un chiffre appartient toujours a un dispositif : il le dit, et il y conduit. Sans cette etiquette, trois chiffres cote a cote se lisent comme s ils parlaient de la meme chose. */ .chiffre{display:block;text-decoration:none;color:inherit} .chiffre:hover .chiffre__q{color:var(--ink)} .chiffre:hover .chiffre__q::after{transform:translateX(5px)} .chiffre__q{ display:inline-flex;align-items:center;gap:var(--s2); font-size:var(--t-mention);letter-spacing:.1em;text-transform:uppercase; font-weight:600;color:var(--accent);margin-bottom:var(--s3); transition:color .2s; } .chiffre__q::after{content:"→";transition:transform .3s cubic-bezier(.2,.7,.2,1)} .chiffre__n{font-family:var(--f-display);font-size:var(--t-chiffre);font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:block} /* L unite ne se compose pas a la taille du chiffre : elle deborderait la colonne des que le libelle depasse cinq ou six glyphes. */ /* Une valeur longue — une date, un mot — ne tient pas a la taille du chiffre. Elle descend d un tiers plutot que de deborder. */ .chiffre__n--long{font-size:calc(var(--t-chiffre) * .58);letter-spacing:-.03em} .chiffre__u{font-size:.4em;letter-spacing:0;margin-left:.18em;vertical-align:.62em;color:var(--ink-2);white-space:nowrap} .chiffre__l{font-size:var(--t-second);color:var(--ink-2);display:block;margin-top:var(--s3);max-width:26ch} /* ---------- sections ---------- */ .sec{padding:var(--s8) 0;border-top:1px solid var(--rule)} .sec h2{margin-bottom:var(--s5)} .sec__intro{color:var(--ink-2);margin-bottom:var(--s6);font-size:var(--t-lead);max-width:58ch} .sec--inverse{ --ground:#0B0B12; --ink:#FFFFFF; --ink-2:#AFAFC2; --ink-3:#9494AC; --rule:#232336; --rule-strong:#3A3A54; --accent:#A98CFF; --accent-soft:#1B1630; --vert:#6FD3A3; --gris:#9494AC; --orange:#E0A45E; background:var(--ground); color:var(--ink); border-top:0; } /* Mode sombre suspendu (voir plus haut) : la section inversee reste sombre. @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sec--inverse{ --ground:#F3F3F8; --ink:#0B0B12; --ink-2:#4A4A5C; --ink-3:#5E5E72; --rule:#E4E4EE; --rule-strong:#C6C6D6; --accent:#5433A8; --accent-soft:#F1ECFA; --vert:#2F7D57; --gris:#5E5E72; --orange:#AD6220; } } :root[data-theme="dark"] .sec--inverse{ --ground:#F3F3F8; --ink:#0B0B12; --ink-2:#4A4A5C; --ink-3:#5E5E72; --rule:#E4E4EE; --rule-strong:#C6C6D6; --accent:#5433A8; --accent-soft:#F1ECFA; --vert:#2F7D57; --gris:#5E5E72; --orange:#AD6220; } */ /* ---------- tableaux ---------- */ .tbl{overflow-x:auto;margin-top:var(--s6)} table{border-collapse:collapse;width:100%;font-size:var(--t-second);min-width:660px} th,td{text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);vertical-align:top} thead th{font-size:var(--t-mention);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--rule-strong)} tbody th{font-family:var(--f-display);font-weight:600;font-size:var(--t-base);letter-spacing:-.02em} td.date{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600} .tbl__note{font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s4);max-width:70ch} .tbl__note a{color:inherit;text-decoration:underline;text-underline-offset:3px} /* ---------- notation à feuilles ---------- */ .notation{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin-top:var(--s6)} .niveau{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:1px solid var(--rule);border-radius:var(--r)} .niveau svg{width:64px;height:32px;display:block} .niveau__t{font-family:var(--f-display);font-size:var(--t-second);font-weight:600} .niveau__d{font-size:var(--t-mention);color:var(--ink-2);line-height:1.5} /* ---------- échéances ---------- */ .frise{border-top:1px solid var(--rule);margin-top:var(--s6)} .ech{display:grid;grid-template-columns:var(--gouttiere) 1fr;gap:var(--s3) var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--rule)} .ech__d{font-family:var(--f-display);font-size:var(--t-h3);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2} .ech__c h3{margin-bottom:var(--s3);font-size:var(--t-base)} .ech__c p{color:var(--ink-2);font-size:var(--t-second)} .ech__s{display:block;font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s3)} .ech__s a{color:inherit;text-decoration:underline;text-underline-offset:3px} /* ---------- prestations ---------- */ .liste{border-top:1px solid var(--rule);margin-top:var(--s6)} .liste__i{position:relative;padding:var(--s6) 0;border-bottom:1px solid var(--rule)} /* Le repere glisse depuis la marge, en position absolue : le texte ne bouge pas d un pixel, mais quelque chose repond au survol. */ .liste__i::before{ content:"";position:absolute;left:calc(var(--s5) * -1);top:var(--s6); width:var(--s4);height:1.5px;background:var(--accent); transform:scaleX(0);transform-origin:right center;opacity:0; transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .24s; } .liste__i:hover::before{transform:scaleX(1);opacity:1} .liste__i h3{margin-bottom:var(--s3)} .liste__i h3 a{color:inherit;text-decoration:none} .liste__i h3 a:hover{color:var(--accent)} .liste__i p{color:var(--ink-2);font-size:var(--t-second)} .liste__m{display:block;font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s3)} /* ---------- méthode ---------- */ .etapes{counter-reset:e;border-top:1px solid var(--rule);margin-top:var(--s6)} .etape{counter-increment:e;display:grid;grid-template-columns:var(--gouttiere) 1fr;gap:var(--s3) var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--rule)} .etape__n{font-family:var(--f-display);font-size:var(--t-h3);font-weight:600;color:var(--accent);letter-spacing:-.03em;line-height:1.2} .etape__n::before{content:"Étape " counter(e)} .etape__c h3{margin-bottom:var(--s3);font-size:var(--t-base)} .etape__c p{color:var(--ink-2);font-size:var(--t-second)} /* ---------- renvois ---------- */ .notions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)} /* Les liens secondaires prennent les crochets : Alexandre les a retenus dans l atelier, et ils trouvent ici leur place sans concurrencer le bouton d appel. Rien ne se pose derriere le texte. */ .notion{position:relative;font-size:var(--t-second);padding:var(--s2) var(--s5);color:var(--ink-2);text-decoration:none;transition:color .2s} .notion::before,.notion::after{content:"";position:absolute;top:0;bottom:0;width:9px;border:1.5px solid var(--rule-strong);transition:border-color .22s,width .26s cubic-bezier(.2,.7,.2,1)} .notion::before{left:0;border-right:0;border-radius:2px 0 0 2px} .notion::after{right:0;border-left:0;border-radius:0 2px 2px 0} .notion:hover{color:var(--ink)} .notion:hover::before,.notion:hover::after{border-color:var(--accent);width:13px} .notion[aria-disabled="true"]{opacity:.6;pointer-events:none} /* Pied de page sans filets ni soulignes (Alexandre, 16/09 : « beaucoup de traits qui servent a rien »). Il prend la largeur du bandeau, et son texte tombe sur la meme verticale que celui de l accueil. */ footer{padding:var(--s8) 0;color:var(--ink-3);font-size:var(--t-second)} footer .wrap{max-width:2100px;padding-inline:calc(clamp(16px,2.6vw,72px) + 26px)} @media (max-width:560px){footer .wrap{padding-inline:calc(16px + 18px)}} footer a{color:inherit;text-decoration:none;transition:color .2s} footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* Barre légale : obligatoire, donc présente partout, mais elle ne doit pas peser plus que la mention propre à la page. D où la taille en dessous ; le filet qui la séparait a été retiré le 16/09. La date de copyright se pousse à droite au large et revient dans le flux sur téléphone. */ .pied-l{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3); margin:var(--s4) 0 0;max-width:none;font-size:var(--t-mention)} .pied-l a{text-decoration:none;transition:color .2s} .pied-l a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .pied-l span[aria-hidden]{color:var(--rule-strong)} /* Le lien LinkedIn : la marque seule, dessinee a la couleur du texte. Le site n est qu en noir et blanc, une pastille bleue y ferait une tache ; et un mot de plus dans une barre qui en porte deja trois se lit mal. Le nom accessible est porte par l aria-label, puisqu il n y a pas de texte. Le soulignement de survol des autres liens est retire ici : un trait sous un pictogramme est du bruit, d ou le selecteur plus specifique que « .pied-l a:hover ». */ .pied-l__reseau{display:inline-flex;align-items:center;padding:2px 0} .pied-l__reseau svg{display:block;width:13px;height:13px;fill:currentColor} .pied-l a.pied-l__reseau:hover,.pied-l a.pied-l__reseau:focus-visible{ color:var(--ink);text-decoration:none} .pied-l__c{margin-left:auto;font-variant-numeric:tabular-nums} @media (max-width:560px){.pied-l{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:var(--s5);row-gap:var(--s2)} .pied-l__c{margin-left:0;width:auto} /* au téléphone, un point restait seul en bout de ligne */ .pied-l span[aria-hidden]{display:none}} /* ---------- schéma des étapes ---------- En CSS et non en SVG : il se replie tout seul en colonne sur téléphone, ce qu un SVG à viewBox fixe ne sait pas faire. */ .flux{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--s7)} .flux__e{background:var(--ground);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)} .flux__n{font-family:var(--f-display);font-size:var(--t-second);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums} .flux__e h3{font-size:var(--t-second);line-height:1.25} .flux__e p{font-size:var(--t-mention);color:var(--ink-2);line-height:1.5} .flux__e--pivot{background:var(--accent-soft)} .flux__e--pivot .flux__n{color:var(--accent)} /* ---------- graphique ---------- */ .graph{margin:var(--s7) 0 0;padding:0} .graph svg{width:100%;height:auto;display:block;overflow:visible} .g-grille line{stroke:var(--rule);stroke-width:1} .g-trace{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round} .g-pt circle{fill:var(--ground);stroke:var(--accent);stroke-width:2.5} .g-axe text,.g-an text{font-family:var(--f-body);font-size:14px;fill:var(--ink-3)} .g-lab text{font-family:var(--f-display);font-size:16px;font-weight:600;fill:var(--ink)} figcaption{font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s4);max-width:62ch;line-height:1.55} /* ---------- figures et sources, pour les fiches thematiques ---------- Une donnee ne se lit jamais sur une trame : .fig__c repose sur un fond uni. Les figures restent hors des sections inversees, qui redefinissent les jetons. */ .fig{margin:var(--s7) 0} /* Le fond reste opaque — une donnee ne se lit jamais sur une trame — mais le rembourrage horizontal disparait : sans quoi le cadre du graphique ne tombe jamais sur la colonne de texte, et tout parait de travers. */ .fig__c{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s6) 0;background:var(--ground)} .fig svg{width:100%;height:auto;display:block;overflow:visible} .fig__l{font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s4);max-width:66ch;line-height:1.6} /* La ligne de sources d une figure : elle dit d ou viennent ses chiffres. Une figure qui en porte des chiffres DOIT la porter — c est ce que controle 04-contenu/verifier-figures.py. */ .fig__src{font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s3);max-width:66ch;line-height:1.55} .gr line{stroke:var(--rule);stroke-width:1} .ax line{stroke:var(--rule-strong);stroke-width:1.5} .tx{font-family:var(--f-body);font-size:13px;fill:var(--ink-3)} .tx--f{font-family:var(--f-display);font-size:14px;font-weight:600;fill:var(--ink)} .tx--a{fill:var(--accent)} .li{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .li--a{stroke:var(--accent)} /* Domaines et nuages, pour les diagrammes de confort. Les aplats se superposent : du plus large au plus etroit, chacun ajoute sa densite. */ /* Jeu de classes des figures en pleine largeur. Les titres d axes ne sont plus dans le SVG : ils vivent dans la legende, ce qui libere la marge. */ .q{stroke:var(--rule);stroke-width:1} .qq{stroke:var(--rule-strong);stroke-width:1.5} .t{font-family:var(--f-body);font-size:13px;fill:var(--ink-3)} .t--g{font-size:12px} .t--p{font-size:12px} .t--f{font-family:var(--f-display);font-size:14px;font-weight:600;fill:var(--ink)} .t--a{fill:var(--accent)} .zn{fill:var(--accent);stroke:none} .zn--0{opacity:.20} .zn--1{opacity:.12} .zn--2{opacity:.075} .zn--3{opacity:.045} .pts circle{fill:var(--ink-3);opacity:.42} /* Courbes d humidite relative du diagramme bioclimatique, et seuils horizontaux des categories de confort : lisibles, jamais dominantes. */ .hr{fill:none;stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:3 3} .tx--hr{font-size:11px;fill:var(--ink-3)} .sat{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 3} .seuil{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 4} .co1{fill:var(--accent);stroke:var(--accent)} .co2{fill:var(--ink-3);stroke:var(--ink-3)} /* La reference : discrete dans le fil du texte, verifiable au clic. */ .ref{font-size:var(--t-mention);color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong);white-space:nowrap} .ref:hover{color:var(--accent);border-bottom-color:var(--accent)} .apart{border-left:2px solid var(--accent);padding:var(--s4) 0 var(--s4) var(--s5);margin:var(--s6) 0;max-width:66ch} .apart p{color:var(--ink-2);font-size:var(--t-second)} .apart p+p{margin-top:var(--s4)} .apart strong{color:var(--ink)} @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}html{scroll-behavior:auto}} /* ---------- tablette ---------- */ @media (max-width:820px){ :root{--t-h1:clamp(2.1rem,7vw,2.75rem);--t-h2:1.875rem;--t-lead:1.1875rem;--t-chiffre:2.5rem;--s8:3.5rem;--s9:4.5rem} .sec{padding:var(--s8) 0} .ech,.etape{grid-template-columns:1fr;gap:var(--s3)} .ech__d,.etape__n{font-size:1.25rem} :root{--gouttiere:1fr} .flux{grid-template-columns:1fr 1fr} } /* ---------- téléphone ---------- Un tableau qui défile latéralement sur 375 px est illisible au pouce : il se replie donc en fiches, chaque cellule reprenant son intitulé de colonne. */ /* Sur telephone, une figure ramenee a la largeur de l ecran affiche ses libelles a six pixels : illisible. On prefere la laisser a une taille ou elle se lit, et faire defiler le cadre. */ @media (max-width:620px){ .fig__c{overflow-x:auto;-webkit-overflow-scrolling:touch} .fig svg{min-width:700px} .fig__l{font-size:var(--t-mention)} } @media (max-width:560px){ :root{--t-base:1rem;--t-second:.9375rem;--t-lead:1.0625rem;--t-h3:1.25rem;--s5:1.125rem;--s6:1.5rem;--s7:2.25rem} body{line-height:1.6} .hero{padding:var(--s7) 0 var(--s6)} .chiffres{gap:var(--s5);padding:var(--s6) 0;margin-top:var(--s6)} .chiffre__n{font-size:2.25rem} .notation{grid-template-columns:1fr 1fr;gap:var(--s3)} .niveau{padding:var(--s4)} .niveau svg{width:52px;height:26px} .graph{margin-top:var(--s6)} .g-axe text,.g-an text{font-size:17px} .g-lab text{font-size:19px} /* Cibles tactiles. Un lien en ligne fait 21 px de haut : on ne le vise pas au pouce. Sur telephone, les renvois de source deviennent des pastilles. */ .ech__s a,.tbl__note a,figcaption a,.fig__src a{ display:inline-flex;align-items:center;min-height:44px; padding:var(--s2) var(--s3);margin-top:var(--s2); border:1px solid var(--rule);border-radius:var(--r); text-decoration:none;line-height:1.4; } .ech__s,.tbl__note{line-height:1.6} footer a{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) 0} .notion{padding:var(--s3) var(--s4)} .somm a{display:inline-flex;align-items:center;min-height:44px;padding:var(--s3) 0} .flux{grid-template-columns:1fr} .liste__i h3 a{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) 0} table{min-width:0} /* Une chronologie a deux colonnes tient telle quelle : la replier en cartes ajoute une colonne d etiquettes vide. */ .tbl--brut tbody tr{display:table-row;border:0;padding:0;margin:0} .tbl--brut tbody td{display:table-cell;border-bottom:1px solid var(--rule);padding:var(--s3) var(--s3) var(--s3) 0;font-size:var(--t-mention)} .tbl--brut tbody td::before{content:none} .tbl--brut td.n{white-space:nowrap;width:1%} thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} tbody tr{display:block;border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s4)} tbody th{display:block;border:0;padding:0 0 var(--s3);font-size:var(--t-base)} tbody td{display:grid;grid-template-columns:9rem 1fr;gap:var(--s3);border:0;padding:var(--s2) 0;font-size:var(--t-second)} tbody td::before{content:attr(data-col);color:var(--ink-3);font-size:var(--t-mention)} } /* ---------- les touches de violet (17/09/2026) ---------- « Le violet à petites doses c'est nickel, tu peux tout mettre sauf la ligne d'horizon, qui casse l'esthétique de l'image pleine page. » Atelier 05-qualite/atelier/violet.html : sept touches sur huit retenues. Le violet clair (#A98CFF) est celui qui tient sur l'encre, dans les sections inversées (.encre). */ /* le cercle de l'esquisse, sur la frise de Conception */ .page .frise__i--pivot::before{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 2.6px,var(--ground) 3.2px)} /* le trait principal et son point, dans les graphiques */ .page .f-trait:not(.f-trait--leger),.page .f-point{stroke:var(--accent)} .page .encre .f-trait:not(.f-trait--leger),.page .encre .f-point{stroke:#A98CFF} /* les numéros de la méthode */ .page .methode__num,.page #methode .item__num{color:var(--accent)} .page .encre .item__num{color:#A98CFF} /* le soulignement au survol : le trait du menu, et les liens du texte */ :root .tete__n a::after{background:var(--accent)} .page a:hover,.page a:focus-visible{text-decoration-color:var(--accent)} .page .encre a:hover,.page .encre a:focus-visible{text-decoration-color:#A98CFF} /* le signe et l'unité des chiffres ; le nombre reste à l'encre */ .page .grandeur__env,.page .grandeur__u,.page .certif__n small{color:var(--accent)} .page .encre .grandeur__env,.page .encre .grandeur__u,.page .encre .certif__n small{color:#A98CFF} /* la barre la plus lourde des enjeux BREEAM */ .page .enjeu__barre--100{background:var(--accent)} /* un carré dans la marge, devant chaque lien de « Pour aller plus loin » ; il est centré sur la hauteur d'x de Syne et ne déplace pas le texte */ .page .liens a{position:relative} .page .liens a::before{content:"";position:absolute;left:calc(-1 * min(var(--retrait,26px),clamp(20px,3vw,48px) / 2 + 3.5px)); top:calc(.69em - 3.5px);width:7px;height:7px;background:var(--accent);pointer-events:none} .page .encre .liens a::before{background:#A98CFF} /* Regles du bandeau de navigation. Elles vivent ici et non dans la charte des pages, parce que deux pages du site ne partagent pas cette charte : le recueil des sources, qui est genere, et le dossier reglementaire, qui precede la charte. Injectees avec le bandeau, elles valent partout. */ :root{--tete-h:84px} .tete{ position:sticky;top:0;z-index:60;height:var(--tete-h); background:var(--ground);border-bottom:1px solid var(--rule); } .tete__in{ max-width:var(--col);margin:0 auto;padding:0 var(--s5);height:100%; /* 22/09 : le bouton de langue a rendu la barre plus longue. Sans nowrap, le bouton de contact passait a la ligne entre 1100 et 1180 px ; le menu sait defiler de lui-meme, c est prevu (.tete__n--deborde). */ display:flex;align-items:center;gap:var(--s5);flex-wrap:nowrap; } .tete__m{ flex:none;display:block;line-height:0;text-decoration:none; } /* Le rembourrage lateral n est pas decoratif : la barre defile, donc elle coupe a son bord. Sans ces huit pixels, la marque du premier lien est rognee a gauche. La marge negative annule le decalage de mise en page. */ .tete__n{position:relative;display:flex;gap:clamp(13px,1.7vw,24px);flex:1;min-width:0; overflow-x:auto;scrollbar-width:none;align-self:stretch;align-items:center; padding:0 8px;margin:0 -8px} .tete__n::-webkit-scrollbar{display:none} /* Si la barre doit defiler malgre tout, le dernier mot s efface au lieu d etre tranche net par le bouton. */ .tete__n--deborde{ -webkit-mask:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask:linear-gradient(to right,#000 calc(100% - 34px),transparent); } .tete__n a{ position:relative;z-index:2; font-size:var(--t-second);color:var(--ink-2);font-weight:500;text-decoration:none; white-space:nowrap;padding:var(--s2) 0;transition:color .2s; } .tete__n a:hover{color:var(--ink)} .tete__n a[aria-current="page"]{color:var(--ink);font-weight:600} .tete__c{flex:none} /* langue et contact forment un seul bloc : la grille du bandeau a trois colonnes, un quatrieme enfant aurait ouvert une deuxieme ligne. */ .tete__d{display:flex;align-items:center;gap:10px} /* le bouton de langue, a gauche du bouton de contact */ .tete__lang{flex:none;font-family:var(--f-display);font-size:15px;font-weight:600; letter-spacing:.1em;color:var(--ink);text-decoration:none;padding:6px 4px; /* la ligne est posee, pas seulement au survol : c est elle qui dit qu on peut cliquer. « currentColor » et non une couleur fixe, parce que le bandeau est blanc sur la photo et noir ailleurs (23/09/2026). */ border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent)} .tete__lang:hover,.tete__lang:focus-visible{border-bottom-color:currentColor} /* ---------- le bouton, un seul pour tout le site ---------- Deux crochets qui encadrent le libelle, comme une citation. L aplat noir etait trop dur ; les crochets disent la meme chose sans peser. Ils sont aussi le motif des liens secondaires, en plus fin et en gris : meme famille, deux poids. Rien ne se pose derriere le texte, donc la lisibilite reste entiere. */ .btn{ position:relative;display:inline-flex;align-items:center; /* 16/09 : « un peu trop gros » : 15 px au lieu de 17, marges resserrees */ font-family:var(--f-body);font-size:var(--t-mention);font-weight:600;letter-spacing:.01em; padding:var(--s3) var(--s5);text-decoration:none;color:var(--ink); transition:color .2s; /* PIEGE PAYE LE 30/08/2026. Cette classe a ete dessinee pour un , qui n a pas de fond. Posee sur un