/* ==========================================================
   Regles propres a chaque page, rassemblees.
   ENGENDRE par 11-wordpress/construire-theme.py.
   Source : les blocs <style> de 04-contenu/*.src.html,
   apres le jeton @CHARTE@.
   ========================================================== */

/* ---------- 404-en ---------- */
/* --- propre à la page d erreur ---
   Elle doit tenir dans un écran sans qu on ait à faire défiler : quelqu un qui
   tombe ici cherche une sortie, pas une lecture. */
.err{padding:var(--s9) 0 var(--s8);min-height:52vh}
.err .wrap{max-width:44rem}
/* Sélecteur descendant, et non « .err__c » seul : « .err p » plus bas est
   plus spécifique et gagnerait, ce qui peindrait le nombre en couleur de
   texte courant — un 404 énorme et noir, là où il ne doit être qu un repère. */
.err .err__c{font-family:var(--f-display);font-size:clamp(3.5rem,12vw,6rem);
  font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ink-3);  /* 21/09 : contraste 1,69 sur le gris de filet, illisible */
  font-variant-numeric:tabular-nums;margin-bottom:var(--s5)}
.err h1{font-size:var(--t-h2,2rem);margin-bottom:var(--s5)}
.err p{color:var(--ink-2);font-size:var(--t-lead);max-width:56ch}
.err__l{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s7);
  padding-top:var(--s6);border-top:1px solid var(--rule)}
.err__l a{font-size:var(--t-second);color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;
  transition:color .2s,border-color .2s}
.err__l a:hover{color:var(--ink);border-color:var(--ink)}
/* Sur telephone, une sortie se vise au pouce : 44 px de haut. */
@media (max-width:560px){
  .err__l{gap:var(--s2) var(--s5)}
  .err__l a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 404 ---------- */
/* --- propre à la page d erreur ---
   Elle doit tenir dans un écran sans qu on ait à faire défiler : quelqu un qui
   tombe ici cherche une sortie, pas une lecture. */
.err{padding:var(--s9) 0 var(--s8);min-height:52vh}
.err .wrap{max-width:44rem}
/* Sélecteur descendant, et non « .err__c » seul : « .err p » plus bas est
   plus spécifique et gagnerait, ce qui peindrait le nombre en couleur de
   texte courant — un 404 énorme et noir, là où il ne doit être qu un repère. */
.err .err__c{font-family:var(--f-display);font-size:clamp(3.5rem,12vw,6rem);
  font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ink-3);  /* 21/09 : contraste 1,69 sur le gris de filet, illisible */
  font-variant-numeric:tabular-nums;margin-bottom:var(--s5)}
.err h1{font-size:var(--t-h2,2rem);margin-bottom:var(--s5)}
.err p{color:var(--ink-2);font-size:var(--t-lead);max-width:56ch}
.err__l{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s7);
  padding-top:var(--s6);border-top:1px solid var(--rule)}
.err__l a{font-size:var(--t-second);color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;
  transition:color .2s,border-color .2s}
.err__l a:hover{color:var(--ink);border-color:var(--ink)}
/* Sur telephone, une sortie se vise au pouce : 44 px de haut. */
@media (max-width:560px){
  .err__l{gap:var(--s2) var(--s5)}
  .err__l a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- accueil-en ---------- */
/* --- propre à l accueil ---
   Version 3 du 16/09/2026, arrêtée avec Alexandre dans l'atelier
   (05-qualite/essais/mosaiques-poles.html) :
     - haut de page A : grande photo, titre posé dessus, voile à gauche ;
     - mosaïque en quinconce : deux grandes cases qui se croisent, deux cases
       de compétences plus hautes, le titre de section et le slogan en bandes ;
     - le slogan mène à la section méthode, écrite sur ses idées du 16/09 ;
     - largeurs, hauteurs de rangs et tailles de texte proportionnelles à
       l'écran, jusqu'à 2100 px ;
     - les photos viennent de sa présélection Pexels, harmonisées sur le lot
       (scratchpad/harmonie.py, force légère) ; crédits à porter aux mentions
       légales avant la mise en ligne. */

.page{--gouttiere:clamp(16px,2.6vw,72px);--respire:clamp(28px,3.4vw,72px);--retrait:26px}
/* au téléphone, tout le texte se rapproche du bord, ensemble */
@media (max-width:560px){.page{--retrait:18px}}
/* le fond : des voiles de nuage très doux, qui glissent au défilement.
   Variation sous une ligne de texte : 0,96 %, au niveau des strates. */
#ciel{display:none}
.nuages{position:fixed;left:0;right:0;top:0;height:135vh;z-index:0;pointer-events:none;will-change:transform}
.nuages__img{position:absolute;inset:0 -4%;background:url(images/fond-nuages.jpg) center top/cover no-repeat;animation:derive 70s ease-in-out infinite alternate}
@keyframes derive{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
@media (prefers-reduced-motion:reduce){.nuages__img{animation:none}}
/* ---------- TEST du 16/09 : effets renforcés (« juste pour voir ») ----------
   À régler ou retirer avant la mise en ligne (attribut data-effets sur .nuages
   et .page). Le fond renforcé a été refusé le jour même (« remets le
   background comme avant, c'est pas possible là ») : .nuages n'a plus
   l'attribut ; seule la photo du haut reste en test. Nuages plus marqués (fond-nuages-fort.jpg : 5 % de variation sous
   une ligne, contre 1 %), dérive plus ample, photo du haut qui glisse près de
   deux fois plus et respire lentement. Ce mode ignore volontairement le
   réglage « réduire les animations » du système, pour que le test se voie. */
.nuages[data-effets="renforces"]{height:180vh}
.nuages[data-effets="renforces"] .nuages__img{background-image:url(images/fond-nuages-fort.jpg);inset:0 -10%;
  animation:derive-forte 38s ease-in-out infinite alternate !important}
@keyframes derive-forte{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.page[data-effets="renforces"] .ouverture__fond{inset:-20% 0;animation:souffle 16s ease-in-out infinite alternate !important}
@keyframes souffle{from{scale:1}to{scale:1.08}}
/* 17/09 : « j'aimais bien les animations d'image » : le souffle revient, mais
   s'arrête dès que la photo quitte l'écran (classe posée par le script) */
.page .ouverture.ouverture--hors .ouverture__fond{animation-play-state:paused !important}


.large{width:100%;max-width:2100px;margin:0 auto;padding-inline:var(--gouttiere)}

/* haut de page */
/* presque tout le premier écran (16/09) : la photo s'arrête à une gouttière du bas */
.ouverture{position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;background:#0B0B12;margin-top:var(--respire);
  min-height:max(420px,calc(100vh - var(--tete-h) - var(--respire) - var(--gouttiere)));
  min-height:max(420px,calc(100svh - var(--tete-h) - var(--respire) - var(--gouttiere)))}
/* marges du glissement : 12 % au-dessus et au-dessous, agrandie de 10 % ;
   la course de ±12 % reste dans ces marges */
.ouverture__fond{position:absolute;inset:-12% 0;background:url(images/photo-haut-h6-plein.webp) center/cover no-repeat;transform:scale(1.1);will-change:transform}
.ouverture::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,11,18,.88) 0%,rgba(11,11,18,.5) 55%,rgba(11,11,18,.15) 100%)}
.ouverture__txt{position:relative;z-index:2;max-width:min(900px,82%);padding:var(--respire) var(--retrait)}
.ouverture h1{color:#fff;font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:0;max-width:18ch;text-wrap:balance}
.ouverture .accroche{font-size:clamp(1rem,1.05vw,1.25rem);color:rgba(255,255,255,.88);margin:18px 0 0;max-width:48ch;text-wrap:balance}
.ouverture .btn{color:#fff;margin-top:26px}
.ouverture .btn::before,.ouverture .btn::after{border-color:rgba(255,255,255,.9)}

/* les ordres de grandeur sous le haut de page (16/09). Classes « grandeur » :
   « chiffre » appartient au composant de la charte, avec ses filets.
   Centrés (« centre-moi les chiffres »), un pictogramme chacun, sans
   astérisque ni « au moins », sans note sous les chiffres (« vire-moi ça »,
   16/09), ni ligne de sources (« vire-moi ça, je veux quelque chose de propre
   et épuré ») : chaque bloc reste un lien vers sa fiche du recueil des sources. Chaque nombre est au registre de veille
   (03-veille/affirmations.json). */
.grandeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,64px);
  padding-inline:var(--retrait);padding-block:clamp(44px,5vw,96px) clamp(28px,3.4vw,64px);margin:0}
.grandeur{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;color:inherit;text-decoration:none}
.grandeur__picto{display:block;width:clamp(46px,3.6vw,62px);height:auto;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:clamp(14px,1.4vw,22px)}
.grandeur__n{display:flex;align-items:baseline;justify-content:center;gap:.14em;margin:0;align-self:stretch;justify-self:stretch;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.4rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
/* le chiffre tombe exactement sous son pictogramme ; « ≈ » et « au moins »
   débordent à sa gauche (relecture du 16/09 : le ÷5 partait de 40 px) */
.grandeur__n > [aria-hidden]{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline}
.grandeur__env{font-size:.5em;font-weight:600;letter-spacing:0;justify-self:end;white-space:nowrap}
.grandeur__l{display:block;margin:clamp(10px,1vw,16px) 0 0;font-size:clamp(.98rem,1.05vw,1.15rem);line-height:1.45;
  max-width:30ch;text-wrap:balance}
.grandeur:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* 17/09 : « tu peux ajouter les mots bâtiment, industrie, chaleur et la phrase
   d'appel » (propositions B et D de l'atelier, sans leurs autres changements) */
.grandeurs__appel{grid-column:1/-1;justify-self:center;text-align:center;margin:0 0 clamp(6px,1vw,20px);font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);max-width:62ch;text-wrap:balance}  /* 18/09 : « pourquoi sur 4 lignes […] 2 serait suffisant, plus beau » */
/* au téléphone, l’accroche dépasse trois lignes : à gauche, comme le texte courant */
@media (max-width:760px){.grandeurs__appel{justify-self:start;text-align:left}}
.grandeur__sujet{display:block;margin:0 0 clamp(12px,1.2vw,20px);font-family:var(--f-display);font-weight:600;font-size:clamp(.8rem,.74rem + .2vw,.95rem);line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.grandeurs{grid-template-columns:1fr;row-gap:36px}}
.phrase{padding-inline:26px;padding-block:clamp(40px,5vw,96px) clamp(12px,1.5vw,24px)}
.phrase p{font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.4vw,2.5rem);line-height:1.18;letter-spacing:-.03em;margin:0;max-width:34ch;text-wrap:balance}
.marques{padding-inline:26px;display:flex;flex-wrap:wrap;gap:var(--s3) clamp(20px,3vw,56px);padding-block:clamp(32px,4vw,72px) clamp(8px,1vw,16px);margin:0;list-style:none}
.marques li{font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.3vw,1.3rem);letter-spacing:-.02em;padding-left:18px;position:relative}
.marques li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--accent)}
@media (max-width:560px){.phrase,.marques{padding-inline:18px}}

/* la mosaïque des pôles : du téléphone vers le grand écran */
.mosaique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,30px);margin-block:var(--respire)}
.case{position:relative;overflow:hidden;min-width:0;text-decoration:none;color:inherit;container-type:inline-size}
.case img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.case:hover img{transform:scale(1.04)}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,18,0) 12%,rgba(11,11,18,.62) 55%,rgba(11,11,18,.9) 100%)}
/* sous 900 px, la verrière claire de la case Conception brouillait son titre */
@media (max-width:900px){.m-conc::after{background:linear-gradient(180deg,rgba(11,11,18,0) 0%,rgba(11,11,18,.62) 32%,rgba(11,11,18,.9) 100%)}}
.case__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px var(--retrait)}
.case h3{color:#fff;font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.16;letter-spacing:-.015em;margin:0 0 6px;text-wrap:balance;hyphens:none}
.case p{margin:0;font-size:clamp(.8rem,.76rem + .12vw,.88rem);line-height:1.5;letter-spacing:.01em;color:rgba(255,255,255,.8);max-width:46ch;text-wrap:balance}
.case .fleche{display:inline-block;margin-top:8px;color:#fff;font-weight:600}
.case--grande p{max-width:44ch}
/* 16/09 : les titres de cases gardent la même taille ; seule la marge
   du bas suit la taille de la case */
@container (max-width:430px){.case__txt{padding-block:18px}}
@container (min-width:820px){.case__txt{padding-block:30px}}
/* au-delà de 1500 px, seule la case Décarbonation passait à 30 px : titres
   décalés de 8 px avec Conception, à la même hauteur (relecture du 16/09) */
@media (min-width:1500px){.m-deca .case__txt,.m-conc .case__txt{padding-block:30px}}

/* les deux bandes de texte de la mosaïque */
.bande-titre{position:relative;background:transparent;padding:var(--s5) var(--retrait);display:flex;align-items:center}
/* 16/09 : sans cadre, mais deux coins (haut gauche, bas droit) qui
   reprennent les crochets des boutons. Variante : .bande-titre--un-angle */
.bande-titre::before,.bande-titre::after{content:"";position:absolute;width:clamp(18px,1.7vw,30px);
  height:clamp(18px,1.7vw,30px);border:0 solid var(--ink);pointer-events:none}
.bande-titre::before{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.bande-titre::after{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.bande-titre--un-angle::after{content:none}
/* 16/09 : « le trou blanc, c'est vrai qu'il manque un truc, mais en noir sinon
   non ? » : le titre en encre, comme la case du slogan en face */
.bande-titre--noire{background:var(--ink)}
.bande-titre--noire h2{color:var(--ground)}
.bande-titre--noire::before,.bande-titre--noire::after{content:none}
.bande-titre h2{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.bande-slogan{background:var(--ink);padding:var(--s5) var(--retrait);display:flex;align-items:center;text-decoration:none}
.bande-slogan p{font-family:var(--f-display);font-weight:600;font-size:clamp(.95rem,1.15vw,1.45rem);line-height:1.2;letter-spacing:-.02em;color:var(--ground);margin:0;text-wrap:balance}

/* téléphone et tablette : une ou deux colonnes, placement automatique */
@media (max-width:900px){
  .mosaique > *{min-height:240px}
  .mosaique > .case--grande{grid-column:1 / -1;min-height:320px}
  .mosaique > .bande-titre,.mosaique > .bande-slogan{grid-column:1 / -1;min-height:120px}
}
@media (max-width:560px){
  .mosaique{grid-template-columns:1fr}
  .mosaique > *{grid-column:1 / -1}
}

/* le quinconce n'existe qu'à partir de 901 px. 17/09 : « légèrement moins
   haut pour que ça rentre en entier dans un écran normal » : la rangée suit
   aussi la hauteur de l'écran (huit rangées et leurs écarts tiennent dans
   la fenêtre, bandeau compris) ; le plancher de 72 px ne change pas */
@media (min-width:901px){
  .mosaique{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(72px,min(7vw,calc((100vh - 150px) / 9)),132px);
    grid-auto-rows:clamp(72px,min(7vw,calc((100svh - 150px) / 9)),132px);
    grid-template-areas:
    "intro intro intro intro intro deca deca deca deca deca deca deca"
    "conc conc conc conc conc deca deca deca deca deca deca deca"
    "conc conc conc conc conc deca deca deca deca deca deca deca"
    "conc conc conc conc conc deca deca deca deca deca deca deca"
    "audi audi audi audi audi audi audi stra stra stra stra stra"
    "audi audi audi audi audi audi audi stra stra stra stra stra"
    "audi audi audi audi audi audi audi stra stra stra stra stra"
    "audi audi audi audi audi audi audi slog slog slog slog slog"}
  .m-intro{grid-area:intro}
  .m-deca{grid-area:deca}
  .m-conc{grid-area:conc}
  .m-audi{grid-area:audi}
  .m-stra{grid-area:stra}
  .m-slog{grid-area:slog}
}

/* la méthode, où le slogan conduit */
.methode{background:transparent;padding:clamp(48px,5.6vw,104px) 0}
/* le slogan mène ici : le titre doit atterrir à 64 px du haut (le bandeau se cache en descendant),
   que la page défile elle-même ou dans un cadre (« ça descend un peu trop bas
   par rapport au titre », 16/09). Tout le décalage passe par la marge de la
   cible : la marge de défilement de la charte ne vaut pas dans un cadre. */
html:root{scroll-padding-top:0}
#methode{scroll-margin-top:calc(64px - clamp(48px,5.6vw,104px))}
.methode__in{max-width:2100px;margin:0 auto;padding-inline:calc(var(--gouttiere) + var(--retrait))}
.methode h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0}
.methode h2 span{display:block}
.methode h2 span + span{color:var(--ink-2)}
.methode__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);margin-top:clamp(32px,3.6vw,56px)}
.methode__temps{border-top:1px solid var(--ink);padding-top:var(--s4)}
.methode__num{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1;letter-spacing:-.04em;color:var(--ink);margin-bottom:var(--s3)}
.methode h3{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s4);text-wrap:balance}
.methode p{margin:0;max-width:46ch;text-wrap:pretty}
.methode p + p{margin-top:var(--s4)}
.methode__cle{margin-top:clamp(36px,4vw,64px);border-top:1px solid var(--ink);padding-top:var(--s4);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,72px);row-gap:var(--s3);grid-template-areas:"icone ." "affirmation explication"}
.methode__cle .icone{grid-area:icone}
.methode__affirmation{grid-area:affirmation;align-self:baseline;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.7rem);line-height:1.08;letter-spacing:-.035em;color:var(--ink);max-width:none;text-wrap:balance}
.methode__explication{grid-area:explication;align-self:baseline;font-size:clamp(1.1875rem,1.3vw,1.35rem);line-height:1.5;color:var(--ink);max-width:none;text-wrap:pretty}
/* les icônes de la méthode : un trait fin, qui se dessine à l'arrivée */
.methode__tete{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3)}
.methode__tete .methode__num{margin-bottom:0}
.icone{flex:none;width:clamp(38px,3vw,48px);height:auto;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.icone path,.icone circle{stroke-dasharray:1;stroke-dashoffset:0}
.anime .icone path,.anime .icone circle{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.anime .icone.vu path,.anime .icone.vu circle{stroke-dashoffset:0}
.anime .icone.vu path:nth-of-type(2){transition-delay:.12s}
.anime .icone.vu path:nth-of-type(3){transition-delay:.24s}
.anime .icone.vu path:nth-of-type(4){transition-delay:.36s}
.anime .icone.vu circle{transition-delay:.3s}

@media (max-width:760px){
  .methode__duo{grid-template-columns:1fr;gap:var(--s6)}
  .methode__cle{grid-template-columns:1fr;grid-template-areas:"icone" "affirmation" "explication"}
  .methode h2 span + span{color:var(--ink-2)}
}
/* qui sommes-nous : le texte suit l'arrondi du portrait (essai E, retenu le
   16/09, « plus aéré »). Le chapeau passe au-dessus : en grand, il faisait des
   marches le long du cercle. Le corps est justifié ; les navigateurs coupent
   les mots en français, ce qui tient les blancs. */
.qui{--m:clamp(30px,2.6vw,52px);padding-inline:var(--retrait);font-size:clamp(1.0625rem,.55rem + .7vw,1.25rem);line-height:1.72}
.qui h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 clamp(16px,1.8vw,28px)}
.qui__lead{font-family:var(--f-display);font-weight:600;font-size:1.4em;line-height:1.3;letter-spacing:-.02em;
  max-width:none;margin:0 0 1.3em;text-wrap:balance}
/* sous 1000 px, le chapeau pesait autant que le titre (relecture du 16/09) */
@media (max-width:999px){.qui__lead{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem)}}
/* les derniers mots des paragraphes portent des coupures possibles (&shy;) :
   le navigateur ne coupe jamais seul le dernier mot, et la ligne d'avant, ne
   pouvant rien en prendre, s'étirait jusqu'à 1,5 em entre les mots à 820,
   900 ou 1000 px (mesuré le 16/09). Au téléphone, texte aligné à gauche,
   aucune coupure. */
.qui__corps{max-width:64em;-webkit-hyphens:none;hyphens:none}
/* le texte suit le cercle dès 761 px (« c'était mieux avant, remets le truc
   arrondi », 16/09 : le passage au portrait posé au-dessus sous 1280 px est
   annulé). Il est justifié dès qu'il suit le cercle : le justifié changeait à
   1000 px, le détourage à 761 px, et la même mise en page paraissait tantôt
   justifiée, tantôt non (« parfois il est ajusté, parfois il ne l'est pas »,
   16/09). Au téléphone, le portrait passe au-dessus et le texte reste aligné à
   gauche : moins de 45 signes par ligne, le justifié y ferait des trous. */
/* 21/09 : « le pb c'est les trous blancs, garde l'arrondi ». Le texte suit
   toujours le cercle, mais il n'est plus justifié : la césure française ne
   s'applique pas partout (dictionnaire absent selon le navigateur), et le
   navigateur étirait alors les espaces. Aligné à gauche, les mots gardent
   leur espace normal et le bord droit reste franc le long du cercle. */
@media (min-width:761px){.qui__corps{text-align:left;-webkit-hyphens:none;hyphens:none;text-wrap:pretty}}
/* les mots anglais ne se coupent pas avec les règles du français (« Enginee-ring »,
   relecture du 16/09) */
.qui__corps [lang="en"]{-webkit-hyphens:manual;hyphens:manual}
@media (min-width:1000px){.qui{--cale:.9em}}
/* le portrait se place au milieu du texte : une cale invisible le descend.
   Le script de fin de page la calcule à chaque largeur ; sans lui, 0,9 em
   centre le portrait à partir de 1280 px */
.qui__corps::before{content:"";float:left;width:0;height:var(--cale,0)}
.qui__corps p{max-width:none;margin:0}
.qui__corps p + p{margin-top:1em}
.qui__portrait{float:left;clear:left;display:block;width:min(17em,34%);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  margin:var(--haut,.35em) var(--m) var(--bas,var(--m)) 0;
  shape-outside:ellipse(calc(50% + var(--m) / 2) 50% at calc(50% - var(--m) / 2) 50%) margin-box;shape-margin:0}
/* 17/09 : « faut pas que ça dépasse » : la première et la dernière ligne
   passaient au-dessus et au-dessous du portrait et repartaient au bord. Le
   script donne au portrait des marges haute et basse (--haut, --bas) qui
   étirent sa boîte sur toute la hauteur du texte ; l'ovale que suit le texte
   s'étire avec elle, le portrait reste un cercle, centré sur le texte. */
/* ellipse plutôt que cercle agrandi : la marge du cercle, rognée en haut et en
   bas par la boîte du portrait, faisait des marches dans le vide sur tablette
   (relecture du 16/09) */
.qui__corps::after{content:"";display:block;clear:both}
/* moins d'air sous « Qui sommes-nous » : la méthode a déjà sa marge haute,
   les deux s'additionnaient (relecture du 16/09) */
#qui{padding-block:calc(var(--respire) * 1.4) calc(var(--respire) * .6)}
.fin{padding:var(--s6) 0 var(--s8)}
.fin .large{padding-left:calc(var(--gouttiere) + var(--retrait))}


@media (max-width:760px){
  .qui__portrait{float:none;width:min(240px,60vw);margin:0 auto 1.6em;shape-outside:none}
  .qui__corps::before{content:none}
}
@media (prefers-reduced-motion:reduce){
  .case img{transition:none}
  .case:hover img{transform:none}
}

/* ---------- contact-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Version 3 du 16/09/2026, construite sur les choix d'Alexandre dans l'atelier
   des pages : une page sobre, sans photo en haut ; l'adresse électronique et
   un formulaire ; le numéro derrière un bouton « Afficher le numéro » ; pas des
   « trois étapes », mais les réponses possibles selon le degré de certitude du
   besoin (sa note, reformulée) ; une photo abstraite en bas de page (H24).
   Protection : ni l'adresse ni le numéro ne sont écrits dans la page ; le
   script les reconstitue (base64, à l'envers). Le formulaire prépare un
   courriel dans la messagerie du visiteur tant qu'il n'est pas relié au
   serveur : aucune demande ne se perd (11-wordpress/formulaire-contact.md).
   La version 2 est dans _archives/. */

/* le haut de page, en texte seul */
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:14ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:52ch;font-size:clamp(1.1875rem,1.4vw,1.45rem);line-height:1.5;text-wrap:pretty}

/* les coordonnées et le formulaire, côte à côte à partir de 1100 px */
/* deux colonnes égales, avec l'écart des grilles : le formulaire et ses
   propres colonnes tombent sur les colonnes du bloc des réponses */
.joindre{display:grid;gap:clamp(36px,4vw,72px);margin-top:clamp(36px,4vw,72px)}
@media (min-width:1100px){.joindre{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);align-items:start}}
.coord{margin:0;display:grid;row-gap:var(--s5)}
.coord div{border-bottom:1px solid var(--ink);padding:var(--s3) 0}
.coord dt{font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s2)}
.coord dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,1.2rem + .5vw,1.8rem);letter-spacing:-.02em;overflow-wrap:anywhere}
.coord dd a{color:inherit;text-decoration:none}
.coord dd a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.coord .btn{font-family:var(--f-body);letter-spacing:0}
/* les intitulés de gauche et les libellés du formulaire sur les mêmes lignes
   (mesuré de 1152 à 2560 px, relecture du 17/09) ; le périmètre détaché */
.coord__perimetre{margin:var(--s6) 0 0;max-width:44ch;text-wrap:pretty}
/* une même hauteur des deux côtés, assez grande pour les coordonnées écrites
   en grand (à 6 rem, elles débordaient de 3 à 9 px selon l'écran) ; l'intitulé
   en haut, la valeur ou le champ en bas, sur le filet (relecture du 17/09) */
@media (min-width:1100px){
  .champ{padding-top:var(--s3);grid-template-rows:auto 1fr}
  .champ > input,.champ > select{align-self:end}
  .coord div{display:flex;flex-direction:column;justify-content:space-between}
  .coord div,.champ{min-height:7rem}
  .champ:has(textarea){min-height:0}
}
@media (max-width:760px){.coord .btn{min-height:44px}}

/* le formulaire : des champs à filet, sans cadre */
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) clamp(28px,4vw,72px)}
.champ{display:grid;gap:var(--s2);min-width:0}
.champ--large{grid-column:1/-1}
.champ label,.champ legend{font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);letter-spacing:.02em}
.champ input,.champ select,.champ textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:var(--s2) 0;width:100%}
.champ textarea{min-height:9em;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.champ small{font-size:var(--t-mention)}
.accord{grid-column:1/-1;display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-mention);line-height:1.5}
.accord input{width:1.1em;height:1.1em;margin-top:.2em;accent-color:var(--ink);flex:none}
.accord a{color:inherit}
.piege{display:none}
.envoi{grid-column:1/-1;display:grid;justify-items:start;gap:var(--s3)}
.envoi button{cursor:pointer;background:transparent;border:0}
.envoi__note{margin:0;font-size:var(--t-mention);max-width:52ch}
/* La note passe en alerte quand une reponse manque ou que le message est
   trop long. Pas de rouge : la charte n a que du noir et du blanc, et un
   filet a gauche suffit a dire que quelque chose demande attention. */
/* Le lien qui emporte le message, en fin de note. Dessine comme un lien et
   non comme un bouton : la zone d envoi n en porte qu un. */
.envoi__copie{appearance:none;-webkit-appearance:none;background:none;border:0;
  margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-strong)}
.envoi__copie:hover,.envoi__copie:focus-visible{color:var(--ink);
  text-decoration-color:currentColor}
.envoi__note--alerte{color:var(--ink);border-left:2px solid var(--ink);
  padding-left:var(--s3)}
@media (max-width:620px){.formulaire{grid-template-columns:1fr}}

/* les réponses possibles */

/* la photo abstraite du bas de page */
.photo-fin{margin:clamp(44px,5vw,96px) 0 0;aspect-ratio:21/6;overflow:hidden;background:var(--ink)}
/* la coupe tombe entre deux rangées de fenêtres, pas au milieu (17/09) */
.photo-fin img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 69%}
@media (max-width:760px){.photo-fin{aspect-ratio:16/9}}

/* ---------- etudes-breeam-hqe-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Sous-page de Conception, 17/09/2026 : option C de l'atelier BREEAM (« une
   page dédiée et un résumé sur Conception »), titre de 58 caractères choisi
   par Alexandre. « On va garder une page principale en Conception et on fera
   une genre de page ressource, ou une sous-page vraiment certif. » Conception
   garde le résumé ; ici, le détail enjeu par enjeu. Il réalise lui-même les
   sept études (réponse du 17/09 : la matrice breeam-v7 est corrigée).
   Tout nombre vient du registre : breeam-v7-poids-25-very-good,
   breeam-v7-points-enjeux, breeam-v7-poids-etudes, breeam-v7-credits-etudes,
   breeam-v7-seuils, breeam-inuse-v6-enjeux. Pas de photo pour l'instant
   (atelier photos-pages). Haut de page en texte seul, comme Contact. */
.page{--ecart:clamp(20px,2.4vw,44px)}

/* le haut de page, en texte seul */
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:16ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:clamp(1.1875rem,1.4vw,1.45rem);line-height:1.5;text-wrap:pretty}

/* le chiffre, comme sur Conception */
.certif{display:grid;gap:clamp(20px,2.4vw,40px)}
.certif__chiffre{margin:0}
.certif__n{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(3.4rem,7vw,7.2rem);line-height:.95;letter-spacing:-.05em}
.certif__n small{font-size:.45em;letter-spacing:-.02em;margin-left:.08em}
.certif__l{display:block;margin-top:var(--s4);font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,1.1rem + .45vw,1.6rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.certif__texte{margin:0;max-width:56ch;text-wrap:pretty}
.certif__texte a,.section-note a,.enjeux-note a{color:inherit;text-underline-offset:3px}
@media (min-width:1100px){
  .certif{grid-template-columns:calc((2 * 100% - 3 * var(--ecart)) / 5) minmax(0,1fr);column-gap:var(--ecart);align-items:start}
}

/* les enjeux : le code, la méthode, le poids dans la note */
.enjeux{list-style:none;margin:clamp(28px,3vw,48px) 0 0;padding:0}
.enjeu{display:grid;grid-template-columns:5.2em minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s2);align-items:baseline;padding-block:var(--s5);border-top:1px solid var(--ink)}
.enjeu__code{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.enjeu h3{font-size:clamp(1.05rem,1rem + .25vw,1.25rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s2);text-wrap:balance}
.enjeu p{margin:0;text-wrap:pretty}
.enjeu h3 a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
.enjeu p + p{margin-top:var(--s2)}
.enjeu__credits{font-size:var(--t-mention)}
.enjeu__poids{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) 5.5em;column-gap:var(--s3);align-items:center}
.enjeu__barre{display:block;height:10px;background:var(--ink)}
/* la longueur de chaque barre : les points de l'enjeu, rapportés à Mat 01 (7,75) */
.enjeu__barre--100{width:100%}.enjeu__barre--54{width:53.8%}.enjeu__barre--53{width:53.3%}
.enjeu__barre--40{width:40.4%}.enjeu__barre--32{width:32%}.enjeu__barre--23{width:22.5%}.enjeu__barre--20{width:20.3%}
.enjeu__valeur{justify-self:end;font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){.enjeu{grid-template-columns:1fr}.enjeu__poids{grid-column:1}}
@media (min-width:900px){
  .enjeu{grid-template-columns:5.2em minmax(0,1fr) calc((2 * 100% - 3 * var(--ecart)) / 5);column-gap:var(--ecart)}
  .enjeu__poids{grid-column:3}
}
.enjeux-note{margin:var(--s4) 0 0;font-size:var(--t-mention);max-width:74ch}

/* les seuils de notation, du plus bas au plus haut */
.seuils{list-style:none;margin:clamp(24px,2.6vw,40px) 0 0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink)}
.seuil{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding-block:var(--s3);border-bottom:1px solid var(--ink)}
.seuil__n{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.6rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.seuil__nom{font-family:var(--f-display);font-weight:600}
@media (min-width:761px){
  .seuils{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--ecart);border-top:0}
  .seuil{flex-direction:column-reverse;justify-content:flex-end;gap:var(--s2);border-bottom:0;border-top:1px solid var(--ink);padding-block:var(--s4) 0}
}
.section-note{margin:var(--s5) 0 0;max-width:68ch;text-wrap:pretty}

/* In-Use et HQE : deux colonnes de texte */
.deux{display:grid;gap:clamp(28px,3vw,56px);margin-top:clamp(28px,3vw,48px)}
.deux h2{margin:0 0 var(--s4)}
.deux p{margin:0;max-width:62ch;text-wrap:pretty}
.deux p + p{margin-top:var(--s3)}
@media (min-width:1100px){.deux{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px)}}
.certif__note{margin:clamp(28px,3vw,48px) 0 0;font-size:var(--t-mention);max-width:74ch}

/* ---------- notion-confort-ete ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Fiche confort d'été, version 3 du 17/09/2026 (la version 2 est dans
   _archives/). Même fond, tiré des rapports d'Alexandre : quatre approches,
   le vote moyen et la part d'insatisfaits, le confort adaptatif, les
   degrés-heures et leurs valeurs maximales, cinq leviers. Haut de page en
   texte seul, comme Contact et la page BREEAM ; pas de photo tant que
   l'atelier photos-pages n'a pas tranché. Les trois chiffres de l'ancien haut
   de page sont retirés (recommandation de l'atelier) ; les valeurs de texte
   sans source aussi, en attendant sa réponse (valeurs de pratique ou non).
   Tout nombre renvoie au registre ; les entrées proposées le 17/09 sont dans
   le fichier de propositions de la séance (INRS, Commission européenne,
   AFNOR, guide RE2020 de 2025). Les figures sont produites par un script :
   courbe du PPD calculée, écarts adaptatifs du registre, deux schémas de
   principe sans échelle ; elles sont déclarées dans donnees-figures.json. */
.page{--grille-ecart:clamp(28px,4vw,72px)}

/* le haut de page, en texte seul */
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:16ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:clamp(1.1875rem,1.4vw,1.45rem);line-height:1.5;text-wrap:pretty}

/* les quatre approches : chaque titre mène à sa section */
.item h3 a{color:inherit;text-decoration:none}
.item h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* le texte et sa figure, côte à côte à partir de 1100 px (comme le décret
   tertiaire sur Conformité : cinq douzièmes, sept douzièmes) */
.duo{display:grid;row-gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
.duo__texte p{margin:0;max-width:62ch;text-wrap:pretty}
.duo__texte p + p{margin-top:var(--s4)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grille-ecart);align-items:start}}
/* 21/09 : sur très grand écran, la figure grandissait bien plus que son texte et laissait un vide dessous */
.duo .figure{max-width:720px}
.duo__texte a,.note a,.rangees a,.categories__intro a{color:inherit;text-underline-offset:3px}
.note{margin:clamp(20px,2.2vw,32px) 0 0;max-width:74ch;font-size:var(--t-mention);line-height:1.55;text-wrap:pretty}
.sous-titre{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:clamp(40px,4.4vw,72px) 0 0;text-wrap:balance}
.intro{margin:var(--s4) 0 0;max-width:62ch;text-wrap:pretty}

/* la couleur de la charte, à petite dose : la courbe principale et les
   zones hachurées (réponse du 17/09 : « violet de la charte pour la courbe
   principale ») */
.f-trait--accent{stroke:var(--accent)}
.f-trait--fin{stroke-width:1.5}
.f-zone{fill:var(--accent);fill-opacity:.1;stroke:var(--accent);stroke-width:2}
.f-hachure path{stroke:var(--accent);stroke-width:2;stroke-opacity:.55}
/* 22/09 : trois densites qui se distinguent d un coup d oeil */
.h1 path{stroke-width:1.2;stroke-opacity:.42}
.h2 path{stroke-width:2;stroke-opacity:.62}
.h3 path{stroke-width:3;stroke-opacity:.9}
.f-txt--halo{paint-order:stroke;stroke:var(--ground);stroke-width:5;stroke-linejoin:round}
.f-fleche path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.f-lab tspan,.f-txt .f-lab{font-family:var(--f-display);font-weight:600}
/* au téléphone, les libellés longs passent dans la légende en texte */
.figure figcaption{margin-top:var(--s4)}
/* le diagramme de Givoni : courbes d humidite relative calculees */
.g-hr{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1}
.g-zone{fill:var(--accent);fill-opacity:.07;stroke:var(--accent);stroke-opacity:.5;stroke-width:1.2}
.g-confort{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2}
.f-trait--fin{stroke-width:1.4}
.f-trait--tirets{stroke-dasharray:7 6}
/* 22/09 : le format des graphiques de ses rapports : cadre, grille,
   graduations sur les deux axes, legende sous le dessin */
.f-cadre{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.f-grille line{stroke:var(--ink);stroke-opacity:.12;stroke-width:1}
.g-hr--forte{stroke-opacity:.42}
.f-legende--num{gap:8px 26px}
.f-legende--num b{display:inline-block;min-width:1.1em;color:var(--accent);
  font-family:var(--f-display);
  font-size:13px;font-weight:600;margin-right:8px}
/* 22/09 : le format des graphiques de ses rapports : cadre, grille,
   graduations sur les deux axes, legende sous le dessin */
.f-cadre{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.f-grille line{stroke:var(--ink);stroke-opacity:.12;stroke-width:1}
.texte-seul{max-width:68ch;margin-top:var(--s5)}
.texte-seul p + p{margin-top:var(--s4)}
.bloc__in > .figure{max-width:1000px;margin-top:clamp(24px,2.6vw,40px)}
/* le diagramme de Givoni : courbes d humidite relative calculees */
.g-hr{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1}
.g-zone{fill:var(--accent);fill-opacity:.07;stroke:var(--accent);stroke-opacity:.5;stroke-width:1.2}
.g-confort{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2}
/* le diagramme de Givoni : courbes d humidite relative calculees */
.g-hr{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1}
.g-zone{fill:var(--accent);fill-opacity:.07;stroke:var(--accent);stroke-opacity:.5;stroke-width:1.2}
.g-confort{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2}
/* 22/09 : les seuils suivis en etude, et la sortie d'etude */
.seuil__t{stroke:var(--ink);fill:none;stroke-linecap:butt}
.seuil__t--1{stroke-width:1.5}
.seuil__t--2{stroke-width:3.5}
.seuil__t--3{stroke-width:6}
.seuil__t--4{stroke:var(--accent);stroke-width:6}
.zone__c{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.zone__mur{fill:none;stroke:var(--ink);stroke-width:2.5}
.zone__nord path{fill:none;stroke:var(--ink);stroke-width:1.5}
.mesure{display:grid;gap:var(--s5)}
/* la bande photo, comme sur les pages de pole */
.bande-photo{margin:0;aspect-ratio:21/8;overflow:hidden;background:var(--ink)}
.bande-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.bande-photo{aspect-ratio:3/2}}
.mesure{margin-top:var(--s5)}
.mesure p + p{margin-top:var(--s4)}
@media (min-width:861px){.mesure{grid-template-columns:5fr 7fr;align-items:start}}
.mesure__faits{margin:var(--s6) 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--ink)}
@media (min-width:861px){.mesure__faits{grid-template-columns:repeat(3,1fr);column-gap:var(--s6)}}
.mesure__faits li{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--rule)}
.mesure__faits b{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
/* la courbe principale se trace quand la figure arrive à l'écran (script
   de fin de page) ; sans script, ou si le visiteur limite les animations,
   elle est simplement là */
.f-trace{stroke-dasharray:1;stroke-dashoffset:0}
.trace--attente .f-trace{stroke-dashoffset:1}
.trace--vue .f-trace{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}

/* les catégories du vote moyen, en colonnes, comme les niveaux BREEAM */
.categories__intro{margin:clamp(32px,3.6vw,56px) 0 0;max-width:62ch;text-wrap:pretty}
.categories{list-style:none;margin:clamp(20px,2.2vw,32px) 0 0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink)}
.categorie{display:grid;grid-template-columns:4.2em minmax(0,1fr);column-gap:var(--s4);align-items:baseline;padding-block:var(--s3);border-bottom:1px solid var(--ink)}
.categorie__n{grid-row:span 2;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.6rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.categorie__nom{font-family:var(--f-display);font-weight:600}
.categorie__vote{font-size:var(--t-mention);line-height:1.5}
@media (min-width:761px){
  .categories{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grille-ecart);border-top:0}
  .categorie{grid-template-columns:1fr;row-gap:var(--s2);border-bottom:0;border-top:1px solid var(--ink);padding-block:var(--s4) 0}
  .categorie__n{grid-row:auto}
}

/* les valeurs maximales : des barres en texte, lisibles à toutes les tailles
   (comme les enjeux BREEAM) ; la longueur de chaque barre est la valeur
   rapportée à 2 600, la plus haute ; le trait violet marque le seuil bas */
.dh{margin-top:clamp(24px,2.6vw,40px);display:grid;row-gap:clamp(24px,2.6vw,40px)}
.dh__legende{margin:clamp(24px,2.6vw,40px) 0 0;display:flex;align-items:center;gap:var(--s3);font-size:var(--t-mention)}
.dh__marque{flex:none;width:0;height:22px;border-left:2px dashed var(--accent)}
.dh__groupe h3{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s3)}
.dh__groupe ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.dh__groupe li{display:grid;grid-template-columns:minmax(0,1fr) 6.2em;column-gap:var(--s4);row-gap:var(--s2);align-items:center;padding-block:var(--s3)}
.dh__cat{grid-column:1/-1;line-height:1.35}
.dh__piste{position:relative;display:block;height:10px}
.dh__piste::before{content:"";position:absolute;left:13.46%;top:-6px;bottom:-6px;border-left:2px dashed var(--accent)}
.dh__barre{display:block;height:10px;background:var(--ink);transform-origin:left center}
.dh__val{justify-self:end;font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh__barre--900{width:34.62%}.dh__barre--1150{width:44.23%}.dh__barre--1250{width:48.08%}
.dh__barre--1800{width:69.23%}.dh__barre--1850{width:71.15%}.dh__barre--2200{width:84.62%}
.dh__barre--2400{width:92.31%}.dh__barre--2600{width:100%}
@media (min-width:761px){
  .dh__groupe li{grid-template-columns:minmax(0,2fr) minmax(0,3fr) 6.2em}
  .dh__cat{grid-column:auto}
}
.trace--attente .dh__barre{transform:scaleX(0)}
.trace--vue .dh__barre{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}

/* les leviers : un pictogramme chacun, rangées à filets */
.grille--5 .item p a{color:inherit;text-underline-offset:3px}

/* ---------- notion-geothermie ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Fiche géothermie, version 3 du 18/09/2026 (la version 2 est dans
   _archives/) : « en restant simple, visuel ». Même modèle que la fiche
   confort d'été : haut de page en texte seul, un schéma par idée, le texte
   réduit à ce que l'étude tranche. Les seuils du régime de minime importance
   sont ceux du registre (gmi-seuils, corrigé le 18/09 : 25 °C, 80 m³/h et
   réinjection ne visent que les systèmes sur nappe). Les deux schémas sont
   écrits par 02-design-system/figures-axes.py. */
.page{--grille-ecart:clamp(28px,4vw,72px)}

/* 22/09 : les deux schemas de principe */
.f-hachure path{stroke:var(--accent);stroke-width:2;stroke-opacity:.55}
.h1 path{stroke-width:1.1;stroke-opacity:.3}
.f-txt--halo{paint-order:stroke;stroke:var(--ground);stroke-width:5;stroke-linejoin:round}
.zone__mur{fill:none;stroke:var(--ink);stroke-width:2}
.f-trait--violet{stroke:var(--accent)}
.g-sol{stroke:var(--ink);stroke-width:2}
.g-nappe{fill:var(--accent);fill-opacity:.12}
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:16ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}

.duo{display:grid;row-gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
.duo__texte p{margin:0;max-width:62ch;text-wrap:pretty}
.duo__texte p + p{margin-top:var(--s4)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grille-ecart);align-items:start}}
.duo__texte a,.note a{color:inherit;text-underline-offset:3px}
.note{margin:clamp(20px,2.2vw,32px) 0 0;max-width:74ch;font-size:var(--t-mention);line-height:1.55;text-wrap:pretty}

/* les schémas : sol, nappe, forages, sondes, tache froide */
.g-sol{stroke:var(--ink);stroke-width:1.5}
.g-nappe{fill:var(--accent);fill-opacity:.08;stroke:var(--accent);stroke-width:1.2;stroke-opacity:.6}
.g-forage{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.g-sens{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g-sonde{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.g-tache{fill:var(--accent);fill-opacity:.1;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 5}

/* deux techniques, rangée par rangée */
.compare{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
.compare li{display:grid;grid-template-columns:1fr;row-gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--rule-strong)}
.compare__q{font-family:var(--f-display);font-weight:600}
.compare__r{margin:0}
.compare__r b{display:block;font-weight:inherit;font-size:var(--t-mention);color:var(--ink-3)}
@media (min-width:761px){
  .compare li{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);column-gap:var(--grille-ecart);align-items:baseline}
  .compare__r b{display:none}
  .compare__tete{border-bottom:1px solid var(--ink)!important}
  .compare__tete .compare__r{font-family:var(--f-display);font-weight:600}
}
@media (max-width:760px){.compare__tete{display:none!important}}

/* les seuils : de grands nombres, comme sur l'accueil */
.seuils{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) var(--grille-ecart);margin:clamp(32px,3.6vw,56px) 0 0}
@media (min-width:1100px){.seuils{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seuil{border-top:1px solid var(--ink);padding-top:var(--s4)}
.seuil__n{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.seuil__n small{font-size:.45em;letter-spacing:-.01em;margin-left:.1em}
.seuil__l{display:block;margin-top:var(--s3);line-height:1.4}
.seuil__l b{display:block;font-weight:inherit;font-size:var(--t-mention);color:var(--ink-3);margin-top:var(--s2)}

/* le zonage, sur la même grille que les seuils ; la note en dernière case */
.zones{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0;display:grid;gap:clamp(24px,2.6vw,40px) var(--grille-ecart)}
@media (min-width:561px){.zones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.zones{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zone h3{display:flex;align-items:center;gap:.5em;margin:0;font-size:var(--t-h3);line-height:1.2}
.zone p{margin:var(--s2) 0 0;text-wrap:pretty}
.zones .note{margin:0}
/* le schéma ne grandit plus au-delà de sa taille utile (écran large) */
.duo .figure{max-width:720px}
.texte-seul{max-width:68ch;margin-top:var(--s5)}
.texte-seul p{margin:0;text-wrap:pretty}
.texte-seul p + p{margin-top:var(--s4)}
.bloc__in > .figure{max-width:1000px;margin-top:clamp(24px,2.6vw,40px)}
.f-cadre{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.f-grille line{stroke:var(--ink);stroke-opacity:.12;stroke-width:1}
.f-barre{fill:var(--ink);fill-opacity:.24}
.f-barre--1{fill-opacity:.46}
.f-barre--2{fill-opacity:.7}
.f-barre--accent{fill:var(--accent);fill-opacity:.85}
.f-serie--1{stroke-dasharray:8 6}
.f-serie--2{stroke-dasharray:2 5}
.f-point--violet{stroke:var(--accent)}
.f-fuseau{fill:var(--accent);fill-opacity:.1}
.f-trait--fin{stroke-width:1.4}

/* ---------- notion-lumiere-naturelle ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Fiche lumière naturelle, version 3 du 21/09/2026 (la version 2 est dans
   _archives/) : même gabarit que les fiches géothermie et confort d'été, texte
   réduit, un visuel par idée. Les seuils de l'EN 17037 et les réflectances
   usuelles restent rattachés au registre. La figure est écrite par
   02-design-system/figures-axes.py. */
.page{--grille-ecart:clamp(28px,4vw,72px)}

/* 22/09 : la grille de points du plan de travail */
.pt{fill:var(--ground);stroke:var(--ink);stroke-width:1.2;stroke-opacity:.5}
.pt--ok{fill:var(--accent);stroke:none}
.zone__mur{fill:none;stroke:var(--ink);stroke-width:2}
.f-trait--violet{stroke:var(--accent)}
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:16ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}

.duo{display:grid;row-gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
.duo__texte p{margin:0;max-width:62ch;text-wrap:pretty}
.duo__texte p + p{margin-top:var(--s4)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grille-ecart);align-items:start}}
.duo .figure{max-width:720px}
.duo__texte a,.note a{color:inherit;text-underline-offset:3px}
.note{margin:clamp(20px,2.2vw,32px) 0 0;max-width:74ch;font-size:var(--t-mention);line-height:1.55;text-wrap:pretty}

/* les deux indicateurs, rangée par rangée (même brique que la géothermie) */
.compare{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
.compare li{display:grid;grid-template-columns:1fr;row-gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--rule-strong)}
.compare__q{font-family:var(--f-display);font-weight:600}
.compare__r{margin:0}
.compare__r b{display:block;font-weight:inherit;font-size:var(--t-mention);color:var(--ink-3)}
@media (min-width:761px){
  .compare li{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);column-gap:var(--grille-ecart);align-items:baseline}
  .compare__r b{display:none}
  .compare__tete{border-bottom:1px solid var(--ink)!important}
  .compare__tete .compare__r{font-family:var(--f-display);font-weight:600}
}
@media (max-width:760px){.compare__tete{display:none!important}}
.texte-seul{max-width:68ch;margin-top:var(--s5)}
.texte-seul p{margin:0;text-wrap:pretty}
.texte-seul p + p{margin-top:var(--s4)}
.bloc__in > .figure{max-width:1000px;margin-top:clamp(24px,2.6vw,40px)}
.f-cadre{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.f-grille line{stroke:var(--ink);stroke-opacity:.12;stroke-width:1}
.f-barre{fill:var(--ink);fill-opacity:.24}
.f-barre--accent{fill:var(--accent);fill-opacity:.85}

/* ---------- notion-mesure ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Fiche mesure et vérification, version 3 du 21/09/2026 (la version 2 est dans
   _archives/) : même gabarit que les autres fiches. Le tiret cadratin de la
   version 2 est retiré, et le renvoi à l'IPMVP pointe désormais sur une entrée
   qui existe (registre : ipmvp-quatre-options). La figure est écrite par
   02-design-system/figures-axes.py. */
.page{--grille-ecart:clamp(28px,4vw,72px)}

.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:18ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}

.duo{display:grid;row-gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
.duo__texte p{margin:0;max-width:62ch;text-wrap:pretty}
.duo__texte p + p{margin-top:var(--s4)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grille-ecart);align-items:start}}
.duo .figure{max-width:720px}
.duo__texte a,.note a{color:inherit;text-underline-offset:3px}
.note{margin:clamp(20px,2.2vw,32px) 0 0;max-width:74ch;font-size:var(--t-mention);line-height:1.55;text-wrap:pretty}

/* les variables d'ajustement, rangée par rangée (même brique que les autres fiches) */
.compare{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
.compare li{display:grid;grid-template-columns:1fr;row-gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--rule-strong)}
.compare__q{font-family:var(--f-display);font-weight:600}
.compare__r{margin:0}
.compare__r b{display:block;font-weight:inherit;font-size:var(--t-mention);color:var(--ink-3)}
@media (min-width:761px){
  .compare li{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);column-gap:var(--grille-ecart);align-items:baseline}
  .compare__r b{display:none}
  .compare__tete{border-bottom:1px solid var(--ink)!important}
  .compare__tete .compare__r{font-family:var(--f-display);font-weight:600}
}
@media (max-width:760px){.compare__tete{display:none!important}}

/* ---------- notion-std ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Fiche STD, version 3 du 21/09/2026 (la version 2 est dans _archives/) :
   même gabarit que les fiches géothermie, confort d'été et lumière naturelle.
   Texte réduit, un visuel par idée, les valeurs réglementaires rattachées au
   registre. La figure est écrite par 02-design-system/figures-axes.py. */
.page{--grille-ecart:clamp(28px,4vw,72px)}
/* 22/09 : les deux decoupages, et la coupe de la temperature operative */
.f-hachure path{stroke:var(--accent);stroke-width:2;stroke-opacity:.55}
.h1 path{stroke-width:1.2;stroke-opacity:.42}
.h2 path{stroke-width:2.4;stroke-opacity:.7}
.f-txt--halo{paint-order:stroke;stroke:var(--ground);stroke-width:5;stroke-linejoin:round}
.zone__c{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.zone__mur{fill:none;stroke:var(--ink);stroke-width:2.5}
.zone__nord path,.zone__nord circle{fill:none;stroke:var(--ink);stroke-width:1.5}

.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:18ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:60ch;font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}

.duo{display:grid;row-gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
.duo__texte p{margin:0;max-width:62ch;text-wrap:pretty}
.duo__texte p + p{margin-top:var(--s4)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grille-ecart);align-items:start}}
.duo .figure{max-width:720px}
.duo__texte a,.note a{color:inherit;text-underline-offset:3px}
.note{margin:clamp(20px,2.2vw,32px) 0 0;max-width:74ch;font-size:var(--t-mention);line-height:1.55;text-wrap:pretty}

/* les comparaisons, rangée par rangée (même brique que les autres fiches) */
.compare{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
.compare li{display:grid;grid-template-columns:1fr;row-gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--rule-strong)}
.compare__q{font-family:var(--f-display);font-weight:600}
.compare__r{margin:0}
.compare__r b{display:block;font-weight:inherit;font-size:var(--t-mention);color:var(--ink-3)}
@media (min-width:761px){
  .compare li{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);column-gap:var(--grille-ecart);align-items:baseline}
  .compare__r b{display:none}
  .compare__tete{border-bottom:1px solid var(--ink)!important}
  .compare__tete .compare__r{font-family:var(--f-display);font-weight:600}
}
@media (max-width:760px){.compare__tete{display:none!important}}
.texte-seul{max-width:68ch;margin-top:var(--s5)}
.texte-seul p{margin:0;text-wrap:pretty}
.texte-seul p + p{margin-top:var(--s4)}
.bloc__in > .figure{max-width:1000px;margin-top:clamp(24px,2.6vw,40px)}
.f-cadre{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-opacity:.55}
.f-grille line{stroke:var(--ink);stroke-opacity:.12;stroke-width:1}
.f-barre{fill:var(--ink);fill-opacity:.24}
.f-barre--1{fill-opacity:.46}
.f-barre--2{fill-opacity:.7}
.f-barre--accent{fill:var(--accent);fill-opacity:.85}
.f-serie--1{stroke-dasharray:8 6}
.f-point--violet{stroke:var(--accent)}
.f-fuseau{fill:var(--accent);fill-opacity:.1}

/* ---------- porte-conception-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Version 3 du 16/09/2026, construite sur les choix d'Alexandre dans l'atelier
   des pages : titre et chapeau de la case de l'accueil, la frise des phases,
   les cinq études, la méthode, les fiches. Sa note : « penser à ajouter les
   études techniques pour les certifications environnementales », un créneau
   sur lequel il veut être identifié (« le BREEAM doit clairement apparaître et
   pouvoir être identifié assez rapidement »).
   17/09 : « conception de base ça doit rester conception thermique et
   environnementale et mettre en avant le bioclimatisme et la RE2020 » ; « on
   mentionne les études BREEAM dedans et on fait une sous-page à la limite ».
   D'où, sous le haut de page, les trois indicateurs de la RE2020 et le
   bioclimatisme ; la certification en section courte, après les études, qui
   renvoie à la sous-page etudes-breeam-hqe (le détail enjeu par enjeu).
   Photos H25 (haut) et A24 (études).
   La version 2 est dans _archives/. */
.ouverture{--photo:url(images/photo-haut-conception-29824300.webp)}

/* le bioclimatisme et la RE2020, sous les trois repères */
#re2020 .bloc__in{padding-top:0}
.re2020__suite{margin:clamp(16px,1.8vw,28px) 0 0;max-width:62ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
.re2020__suite a{color:inherit;text-underline-offset:3px}
/* un sigle à la place du nombre : « construction » en petit après Ic */
.grandeur__u--mot{font-size:.3em;letter-spacing:.02em}

/* la frise des phases : une ligne et cinq temps à partir de 1400 px, une
   frise verticale en dessous (à 1152 px, cinq colonnes faisaient dix lignes) */
.frise{list-style:none;margin:clamp(28px,3vw,56px) 0 0;padding:0;display:grid;grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink)}
.frise__i{position:relative;padding:0 0 clamp(24px,2.6vw,40px) calc(var(--s5) - 1px)}
.frise__i::before{content:"";position:absolute;left:-6px;top:.3em;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.frise__i--pivot::before{background:var(--ground);border:2px solid var(--ink);width:15px;height:15px;left:-8px;top:.15em}
.frise__m{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,1.2rem + .5vw,1.8rem);line-height:1;letter-spacing:-.03em;margin:0 0 var(--s3)}
.frise__i h3{font-size:clamp(1.05rem,1rem + .25vw,1.25rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s2);text-wrap:balance}
.frise__i p{margin:0;max-width:62ch;text-wrap:pretty}
@media (min-width:1400px){
  .frise{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--frise-ecart);border-left:0;border-top:1px solid var(--ink);padding-top:clamp(28px,2.6vw,40px)}
  .frise__i{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start;padding:0}
  .frise__i::before{left:0;top:calc(-1 * clamp(28px,2.6vw,40px) - 6px)}
  .frise__i--pivot::before{left:-2px;top:calc(-1 * clamp(28px,2.6vw,40px) - 8px)}
}

/* 17/09 : « une petite animation qui passe d'une étape à l'autre ». La classe
   n'est posée que si le script tourne : sans lui, la frise est entière. */
.frise--anime .frise__i{opacity:.3;transition:opacity .5s ease}
.frise--anime .frise__i.vu{opacity:1}
.frise--anime .frise__i::before{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.frise--anime .frise__i:not(.vu)::before{transform:scale(.5)}
.frise__note{margin:clamp(20px,2.2vw,32px) 0 0;font-size:var(--t-mention);max-width:70ch}

/* les études : la photo à gauche, sur la gouttière ; la liste à droite */
.etudes{display:grid;gap:clamp(28px,3vw,56px)}
.etudes__photo{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--ink);max-height:78vh}
.etudes__photo img{display:block;width:100%;height:100%;object-fit:cover}
.etudes__liste h2{margin:0 0 var(--s3)}
.etude{padding-block:clamp(14px,1.4vw,22px)}
.etude h3{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s2);text-wrap:balance}
.etude h3 a{color:inherit;text-decoration:none}
.etude h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.etude p{margin:0;max-width:62ch;text-wrap:pretty}
.page{--frise-ecart:clamp(20px,2.4vw,44px)}

/* 17/09 : « la liste d'études avec la photo collante ne rend pas » : la photo
   part, chaque étude porte une icône dessinée au trait, et les études se
   rangent en colonnes comme les autres pages. */
.etudes__liste h2{margin-bottom:clamp(24px,2.6vw,44px)}
.etude__tete{margin-bottom:var(--s4)}
.etudes .etude{display:grid;align-content:start;gap:0}
.etudes__grille{display:grid;gap:clamp(28px,3vw,52px)}
@media (min-width:760px){.etudes__grille{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px)}}
@media (min-width:1280px){.etudes__grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* le tracé des icônes se dessine quand l'étude arrive à l'écran
   (observateur de _composants.js) */
.anime .icone path,.anime .icone circle,.anime .icone rect{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)}
.anime .icone.vu path,.anime .icone.vu circle,.anime .icone.vu rect{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .anime .icone path,.anime .icone circle,.anime .icone rect{stroke-dashoffset:0;transition:none}
}

/* l'héliodon, en regard du texte de la RE2020 (17/09 : « le texte est seul à
   gauche ») : les trois courses du soleil, le soleil en violet */
.re2020{display:grid;gap:clamp(28px,3vw,56px)}
@media (min-width:1100px){
  .re2020{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:start}
}
.heliodon{margin:0;max-width:600px}
.heliodon svg{display:block;width:100%;height:auto;overflow:visible}
.helio__voute path{fill:none;stroke:var(--rule-strong);stroke-width:.7;opacity:.8}
.helio__couronne path{fill:none;stroke:var(--ink-3);stroke-width:.9}
.helio__bat path{fill:var(--ground);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.helio__bat .helio__vitre{fill:none;stroke:var(--ink-3);stroke-width:.9}
.helio__courses path,.helio__legende path{fill:none;stroke-width:1.5px;stroke-linecap:round}
.helio__ete{stroke:var(--ink);stroke-dasharray:7 4;stroke-width:1.7px}
.helio__equinoxe{stroke:var(--ink-2);stroke-dasharray:3 3}
.helio__hiver{stroke:var(--ink-2);stroke-dasharray:.5 4;stroke-width:2px}
.helio__soleil{fill:var(--accent)}
.helio__lab text{font-size:14px;fill:var(--ink-3);paint-order:stroke;stroke:var(--ground);stroke-width:6px;stroke-linejoin:round}
@media (max-width:760px){.helio__lab text{font-size:18px}}
.helio__legende{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;padding:0;list-style:none;font-size:var(--t-mention,14px);color:var(--ink-3)}
.helio__legende li{display:flex;align-items:center;gap:8px}
.helio__legende svg{width:30px;height:6px;overflow:visible}

/* les étiquettes de la certification, au style du site (17/09 : « des
   étiquettes en texte, pas les logos ») */
.etiquettes{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 0}
.etiquette{display:inline-block;padding:5px 11px;background:var(--ink);color:var(--ground);
  font-size:var(--t-mention);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* le petit graphique des enjeux : sept barres, dans l'ordre de leur poids */
.poids{display:grid;gap:8px;margin:clamp(20px,2.2vw,32px) 0 0}
.poids__l{display:grid;grid-template-columns:5.2em minmax(0,1fr);align-items:center;gap:var(--s3);
  font-size:var(--t-mention);font-variant-numeric:tabular-nums}
.poids__b{height:9px;background:var(--ink)}
/* 21/09 : le violet ne marque plus la premiere barre (Mat 01) mais Ene 02 */

/* 17/09 : 25 points en tête (« un truc qui dit 25 points accessibles par des
   études techniques sur du BREEAM NC V7, mais 25 points c'est parfois près
   de 50 % de la note finale ») ; il réalise lui-même les sept études. */
/* la certification : le chiffre et ce qu'il veut dire, puis une ligne par
   enjeu avec son poids dans la note (des barres en texte, lisibles à toutes
   les tailles ; la figure en crédits bruts comparait des choses qui ne se
   comparent pas, relecture du 17/09) */
.certif{display:grid;gap:clamp(28px,3vw,48px);margin-top:clamp(28px,3vw,56px)}
/* 18/09 : « on comprend pas la structure » : le chiffre et son explication à
   gauche, le poids des enjeux en regard, les deux calés en haut */
.certif__g,.certif__d{display:grid;gap:clamp(18px,2vw,28px);align-content:start}
.certif__d .poids,.certif__d .certif__note,.certif__d .certif__suite,.certif__chapeau{margin:0}
.certif__chapeau{max-width:60ch;text-wrap:pretty}
@media (min-width:1100px){.certif{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:start}}
.certif__chiffre{margin:0}
.certif__n{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(3.4rem,7vw,7.2rem);line-height:.95;letter-spacing:-.05em}
.certif__n small{font-size:.45em;letter-spacing:-.02em;margin-left:.08em}
.certif__l{display:block;margin-top:var(--s4);font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,1.1rem + .45vw,1.6rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.certif__texte{margin:0;max-width:52ch;text-wrap:pretty}
.certif__texte a{color:inherit;text-underline-offset:3px}
@media (min-width:1100px){

}
.enjeux{list-style:none;margin:clamp(32px,3.6vw,56px) 0 0;padding:0}
.enjeu{display:grid;grid-template-columns:5.2em minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s2);align-items:baseline;padding-block:var(--s4);border-top:1px solid var(--ink)}
.enjeu__code{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.enjeu h3{font-size:clamp(1.05rem,1rem + .25vw,1.25rem);line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s1);text-wrap:balance}
.enjeu p{margin:0;text-wrap:pretty}
.enjeu__poids{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) 5.5em;column-gap:var(--s3);align-items:center}
.enjeu__barre{display:block;height:10px;background:var(--ink)}
/* la longueur de chaque barre : les points de l'enjeu, rapportés à Mat 01 (7,75) */
.enjeu__barre--100{width:100%}.enjeu__barre--54{width:53.8%}.enjeu__barre--53{width:53.3%}
.enjeu__barre--40{width:40.4%}.enjeu__barre--32{width:32%}.enjeu__barre--23{width:22.5%}.enjeu__barre--20{width:20.3%}
.enjeu__valeur{justify-self:end;font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){.enjeu{grid-template-columns:1fr}.enjeu__poids{grid-column:1}}
@media (min-width:900px){
  .enjeu{grid-template-columns:5.2em minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(20px,2.4vw,40px)}
  .enjeu__poids{grid-column:3}
}
@media (min-width:1400px){
  .enjeu{grid-template-columns:5.2em minmax(0,1fr) calc((2 * 100% - 3 * var(--frise-ecart)) / 5);column-gap:var(--frise-ecart)}
}
.certif__inuse{margin:clamp(24px,2.6vw,40px) 0 0;max-width:74ch;text-wrap:pretty}
/* 17/09 : la sous-page de la certification (option C de l'atelier BREEAM) */
.certif__suite{margin:clamp(20px,2.2vw,32px) 0 0}
.certif__inuse strong{font-family:var(--f-display);font-weight:600}
.certif__note{margin:clamp(20px,2.2vw,32px) 0 0;font-size:var(--t-mention);max-width:74ch}
/* 21/09 : la phrase sur l'évaluateur agréé se coupait au milieu ; elle se
   déroule maintenant sur la largeur du bloc */
.certif > .certif__note:last-child,.bloc__in > .certif__note:last-child{max-width:none}
/* le violet marque l'enjeu où l'étude pèse le plus : Ene 02, la prédiction
   des consommations (choix d'Alexandre, 21/09) */
.poids__b--fort{background:var(--accent)}
/* le lien du détail n'est plus dessiné comme le bouton de contact : un seul
   bouton par page, « Nous contacter » */
.certif__suite a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- porte-conformite-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Version 3 du 16/09/2026, construite sur les choix d'Alexandre dans l'atelier
   des pages (clé simeal-pages, statut « prêt »), reprise le 17/09 sur ses
   remarques de l'après-midi :
   - l'enjeu OPERAT reçoit son cycle annuel en regard, sur l'encre, puis les
     feuilles de la notation (celles de la version 2, sans seuils chiffrés) ;
   - « tout part de l'année de référence » était faux : le décret tertiaire se
     tient en valeur relative OU en valeur absolue (L. 174-1 et R. 174-23 du
     code de la construction), d'où le schéma des deux voies ;
   - les quatre sujets suivent la même trame : tête, champ et échéances, texte
     à gauche, schéma à droite ; le F-Gas reste un point secondaire ;
   - la courbe −40/−50/−60 passe au violet de la charte.
   Les schémas s'animent une fois, à l'arrivée, grâce à l'observateur des
   pictogrammes de _composants.js : un témoin .icone de 1 px, posé au milieu
   de chaque figure, y reçoit la classe .vu. Sans script, ou si le visiteur
   limite les animations, tout est dessiné d'emblée ; aucun texte n'est caché
   ni déplacé.
   À garder pour plus tard (sa note) : « renforcer cette page avec l'audit
   réglementaire pour les entreprises ». La version 2 est dans _archives/. */
.ouverture{--photo:url(images/photo-haut-conformite-a11.jpg)}

/* le violet des schémas : celui de la charte, plus clair sur l'encre
   (mêmes valeurs que l'atelier violet) */
.page{--trait:var(--accent)}
.encre{--trait:#A98CFF}

/* ---------- l'enjeu, sur l'encre : la phrase, le cycle annuel, les feuilles ---------- */
#enjeu{margin-top:clamp(8px,1.4vw,28px)}
.enjeu{display:grid;gap:clamp(28px,3vw,56px)}
.encre .bloc__phrase{max-width:30ch}
.encre .enjeu__suite{margin:clamp(16px,1.8vw,28px) 0 0;max-width:46ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
@media (min-width:1100px){.enjeu{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:start}}

/* la notation : cinq niveaux, du plus faible au meilleur (.notation est pris
   par la charte : c'est le composant de la version 2) */
.notation-eet{margin-top:clamp(40px,4.4vw,80px)}
.notation-eet__titre{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em}
.feuilles{list-style:none;margin:clamp(20px,2.2vw,32px) 0 0;padding:0;display:grid;row-gap:var(--s5);
  --f-grise:#9494AC;--f-orange:#E0A45E;--f-verte:#6FD3A3}
.feuille{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s4);align-items:start}
.feuilles .feuille__picto{grid-row:1/span 2;width:80px;height:40px;margin-top:0}
.encre .feuille__nom{margin:0;font-family:var(--f-display);font-weight:600;font-size:var(--t-base);line-height:1.3}
.encre .feuille__def{margin:var(--s1) 0 0;font-size:var(--t-mention);line-height:1.5;color:rgba(255,255,255,.84);text-wrap:pretty}
@media (min-width:1000px){
  .feuilles{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(20px,2.4vw,48px);row-gap:0}
  .feuille{grid-template-columns:none;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  .feuilles .feuille__picto{grid-row:auto;margin:0 0 var(--s3);width:clamp(80px,5vw,112px);height:auto}
}
.notation-eet .item__meta{margin-top:clamp(18px,2vw,32px);color:rgba(255,255,255,.8)}
/* les teintes de la plateforme, en clair sur l'encre (palette sombre de la charte) */
.feuille--grise{--f-teinte:var(--f-grise)}
.feuille--orange{--f-teinte:var(--f-orange)}
.feuille--verte{--f-teinte:var(--f-verte)}
.feuilles .feuille__picto path{fill:var(--f-teinte);stroke:var(--f-teinte);stroke-width:1}
/* la feuille se dessine, puis se remplit, l'une après l'autre */
.anime .feuilles .feuille__picto path{fill-opacity:0;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1),fill-opacity .6s ease .6s}
.anime .feuilles .feuille__picto.vu path{fill-opacity:1}
.anime .feuille:nth-child(2) .feuille__picto path{transition-delay:.15s,.75s}
.anime .feuille:nth-child(3) .feuille__picto path{transition-delay:.3s,.9s}
.anime .feuille:nth-child(4) .feuille__picto path{transition-delay:.45s,1.05s}
.anime .feuille:nth-child(5) .feuille__picto path{transition-delay:.6s,1.2s}

/* ---------- les quatre textes, sur la même trame ----------
   Un filet noir au-dessus de chaque sujet (comme la méthode de l'accueil), le
   pictogramme et le titre, puis le texte à gauche et le schéma à droite ; le
   champ et les échéances en tête du texte, toujours dans le même ordre. */
.sujet{margin-top:clamp(28px,3vw,56px);border-top:1px solid var(--ink);padding-top:var(--s5)}
.sujet + .sujet{margin-top:clamp(56px,6vw,112px)}
.sujet__tete{display:flex;align-items:center;gap:14px}
.sujet h3{font-size:clamp(1.6rem,2.2vw,2.2rem);line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance}
/* sur les plus petits téléphones, « Trajectoires CRREM » et « frigorigènes (F-Gas) »
   tiennent chacun sur leur ligne (mesuré à 360 px) */
@media (max-width:380px){.sujet h3{font-size:1.5rem}}
.sujet__duo{display:grid;row-gap:clamp(24px,2.6vw,40px);margin-top:clamp(20px,2.2vw,36px)}
.sujet__duo + .sujet__duo{margin-top:clamp(44px,4.8vw,88px)}
@media (min-width:1100px){.sujet__duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:start}}
.sujet__texte > p{margin:var(--s4) 0 0;max-width:62ch;text-wrap:pretty}
.sujet__texte h4{margin:var(--s6) 0 0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.05rem,1rem + .25vw,1.25rem);line-height:1.2;letter-spacing:-.015em}
.sujet__texte h4:first-child{margin-top:0}
.sujet__texte h4 + p{margin-top:var(--s2)}
.sujet__texte .item__meta{margin-top:var(--s4)}
/* champ et échéances : une petite fiche, intitulés sur une même colonne */
.fiche{margin:0;padding:0;display:grid;row-gap:var(--s2)}
.fiche > div{display:grid;grid-template-columns:6.25rem minmax(0,1fr);column-gap:var(--s4);align-items:baseline}
.fiche dt{font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);line-height:1.5}
.fiche dd{margin:0;font-size:var(--t-mention);line-height:1.5;text-wrap:pretty}

/* ---------- les schémas ----------
   Deux dessins par schéma quand le texte ne tiendrait pas : le large dès
   761 px, l'étroit en dessous (texte du dessin agrandi par _composants.css,
   lisible à 12 px et plus). */
.schema{position:relative}
.figure .schema__etroit{display:none}
@media (max-width:760px){.figure .schema__large{display:none}.figure .schema__etroit{display:block}}
.schema .schema__signal{display:block;position:absolute;left:0;top:50%;width:1px;height:1px;margin:0;pointer-events:none}
.schema figcaption{margin-top:var(--s3)}
.figure .f-violet{stroke:var(--trait)}
.figure .f-point--plein.f-violet{fill:var(--trait)}
.f-fleche{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.encre .f-fleche{stroke:var(--ground)}
.encre .f-fleche.f-violet{stroke:var(--trait)}
.f-seuil{fill:none;stroke:var(--ink);stroke-width:1.5}
.f-cadre{stroke:var(--ink);stroke-width:1.2}
.f-plein{fill:var(--ink)}
.f-plein--violet{fill:var(--trait)}
.h-encre{stroke:var(--ink);stroke-width:1.3}
.h-violet{stroke:var(--trait);stroke-width:2.2}
.f-exp{font-size:68%}
/* sur grand écran, le dessin grandit avec sa colonne : ses étiquettes
   restent un peu sous le corps du texte (18 px à 2560 px, 15 px à 1700 px) */
@media (min-width:1700px){.schema .f-txt{font-size:13px}.schema .f-lab{font-size:15px}}

/* les animations, une seule fois, à l'arrivée du schéma */
.anime .schema .a-trait{stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.3,.6,.2,1)}
.anime .schema .a-point{transform:scale(0);transform-box:fill-box;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.anime .schema .a-barre{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.anime .schema .a-barre--v{transform:scaleY(0);transform-origin:50% 100%}
.anime .schema .a-marque{opacity:0;transition:opacity .6s ease}
.anime .schema__signal.vu ~ svg .a-trait{stroke-dashoffset:0}
.anime .schema__signal.vu ~ svg .a-point,
.anime .schema__signal.vu ~ svg .a-barre{transform:none}
.anime .schema__signal.vu ~ svg .a-marque{opacity:1}
.anime .schema .a-t1{transition-delay:.2s}
.anime .schema .a-t2{transition-delay:.4s}
.anime .schema .a-t3{transition-delay:.6s}
.anime .schema .a-t4{transition-delay:.8s}
.anime .schema .a-t5{transition-delay:1s}
.anime .schema .a-t6{transition-delay:1.2s}
.anime .schema .a-t7{transition-delay:1.4s}

/* la trajectoire de la voie relative (« nickel », 17/09 : au violet de la charte).
   Un halo du fond sous les pourcentages : la ligne de grille et la courbe
   passent derrière le chiffre au lieu de le traverser ; au téléphone et à la
   tablette, les pourcentages montent au-dessus de la courbe. */
.trajectoire .f-lab text{paint-order:stroke;stroke:var(--ground);stroke-width:6px;stroke-linejoin:round}
@media (max-width:760px){.trajectoire .f-lab text{transform:translateY(-22px)}}
@media (max-width:560px){.trajectoire .f-lab text:last-child{text-anchor:end}}

/* ---------- nos études ---------- */
/* la photo des études, sur la gouttière comme les photos de l'accueil */
.bande-photo{margin:0;aspect-ratio:21/8;overflow:hidden;background:var(--ink)}
/* les cuves entières, vannes comprises (17/09) */
.bande-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:760px){.bande-photo{aspect-ratio:3/2}}
.etudes p a{color:inherit;text-underline-offset:2px}

/* ---------- porte-decarbonation-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Version 4 du 17/09/2026, sur les remarques d'Alexandre de l'après-midi :
   le processus en trois temps en tête (opportunité, faisabilité, puis la
   conception, avec des partenaires maîtres d'œuvre), puis les préalables,
   dont la frise s'anime au défilement ; « Nos études » équilibré par une
   coupe des ressources d'un site ; un survol animé sur les cartes ; le temps
   de retour en violet dans le coût global ; les aides mises en avant
   (certificats d'économies d'énergie et Coup de pouce Chauffage, Fonds
   Chaleur, démarche EnR'Choix de l'ADEME, relue sur ses pages le 17/09).
   Photos D17 (haut) et D27 (géothermie) ; d'autres photos pour quatre
   cartes sont à choisir dans atelier/photos-solutions-2.html.
   La version 3 est dans l'historique (commit 84deb7e).
   Les animations se font sans script de page : trait et points liés au
   défilement en CSS (navigateurs qui le permettent, sinon la frise reste
   telle quelle), dessins au trait par l'observateur de _composants.js. */
.ouverture{--photo:url(images/photo-haut-decarbonation-d17.jpg)}

/* deux colonnes au-dessus de 1100 px, sur la même trame partout (cinq et
   sept douzièmes) : la seconde colonne tombe sur la même verticale d'une
   section à l'autre */
.duo{display:grid;gap:clamp(24px,3vw,48px)}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px)}}
/* les grilles à trois colonnes de la page (démarche, aides) sur les
   verticales du texte des cartes : même écart que les cartes, plus les deux
   retraits de leur texte (à 1152 px, 8 px les séparaient) */
@media (min-width:901px){.grille.trame-cartes{column-gap:calc(clamp(14px,1.5vw,30px) + 2 * var(--retrait))}}

/* ---------- de l'opportunité à la conception ----------
   Un filet continu sur les trois temps ; sous chaque numéro, les solutions
   encore en lice (six, deux, une), dessinées à l'arrivée. */
.demarche{position:relative;list-style:none;padding:clamp(20px,2.2vw,32px) 0 0;border-top:1px solid var(--ink)}
.demarche .item__tete{gap:clamp(16px,1.6vw,24px)}
.entonnoir{width:clamp(112px,8vw,136px)}
.entonnoir .eteint{stroke-opacity:.26}
.entonnoir .plein{fill:var(--ink)}
.entonnoir .violet{stroke:var(--accent);fill:var(--accent)}
.entonnoir .halo{stroke:var(--accent);stroke-opacity:.45;stroke-width:1}
.anime .entonnoir .plein,.anime .entonnoir .violet{fill-opacity:0;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1),fill-opacity .6s ease 1.1s}
.anime .entonnoir.vu .plein,.anime .entonnoir.vu .violet{fill-opacity:1}

/* ---------- ce qui précède le choix de la machine ----------
   la question à gauche, les trois temps à droite, reliés par un filet */
.prealables{align-items:start}
/* la liste d'Alexandre (ce que nous relevons), au corps du texte */
.temps__i .temps__releve{margin:var(--s3) 0 0;max-width:62ch;text-wrap:pretty}
.temps__releve strong{font-family:var(--f-display);font-weight:600}
.temps__releve a{color:inherit;text-underline-offset:2px}
.temps{position:relative;list-style:none;margin:0;padding:0;border-left:1px solid var(--ink)}
.temps__i{position:relative;padding:0 0 clamp(24px,2.6vw,40px) calc(var(--s5) - 1px)}
/* le texte des temps sur la même verticale que le texte des boutons (leur
   marge intérieure, depuis le filet) : il en tombait à 2 ou 5 px */
.temps__i:last-child{padding-bottom:0}
.temps__i::before{content:"";position:absolute;left:-6px;top:.35em;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.temps__m{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s2)}
.temps__i h3{font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s3);text-wrap:balance}
.temps__i p{margin:0;max-width:62ch;text-wrap:pretty}
/* sous le titre, la température de départ selon la saison : la colonne de
   gauche ne reste plus vide. Texte réglé pour un dessin de 420 unités (le
   texte des figures de la maison l'est pour 760) : 12 px au moins partout */
.loi{margin:clamp(24px,2.6vw,40px) 0 0}
.loi .loi__appoint-l{fill:none;stroke:var(--accent);stroke-opacity:.25;stroke-width:8}
.loi .l-txt{font-family:var(--f-body);font-size:14.5px;fill:var(--ink)}
.loi .l-violet{fill:var(--accent);font-family:var(--f-display);font-weight:600}
.loi .loi__besoin{stroke:var(--accent)}
.loi .loi__appoint{fill:var(--accent);fill-opacity:.14;stroke:none}
.loi .loi__pac{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:6 5}
.loi .loi__retour{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.loi .loi__besoin{fill:none;stroke:var(--ink);stroke-width:2}
.loi .l-gris{fill:var(--ink-3)}
.loi--cop{margin-top:clamp(48px,5vw,80px)}
/* le dessin est plus large (étiquettes au bout des courbes) : il est donc
   réduit davantage, et ses textes sont écrits plus grand pour rester lisibles */
.loi.loi--cop .l-txt{font-size:16.5px}
@media (max-width:560px){.loi.loi--cop .l-txt{font-size:22.5px}}
.cop__c{fill:none;stroke:var(--ink);stroke-width:1.8}
.cop__c--fort{stroke:var(--accent);stroke-width:2.2}
.cop__c--leger{stroke:var(--ink-3)}
/* la rentabilité, sur l'encre de la section : les traits prennent la couleur
   du texte, la solution mise en avant garde le violet clair */
.rent .rent__c{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.7}
.rent .rent__c--fort{stroke:#A98CFF;stroke-width:2.4;opacity:1}
.rent .rent__zero{stroke:currentColor;stroke-width:1;stroke-dasharray:4 5;opacity:.5}
.rent .rent__repere{stroke:#A98CFF;stroke-width:1;stroke-dasharray:2 4}
.rent .rent__point{fill:#A98CFF}
.rent .rent__violet{fill:#A98CFF}
@media (max-width:1099px){.loi .l-txt{font-size:17.5px}}
@media (max-width:560px){.loi .l-txt{font-size:18px}.loi .l-long{display:none}}
@media (max-width:379px){.loi .l-txt{font-size:20px}}
/* la question reste à l'écran pendant qu'on lit les trois temps */
@media (min-width:1100px){.prealables > div:first-child{position:sticky;top:24px}}
/* grand écran : ce que nous relevons passe à droite de chaque temps, le
   texte ne reste plus calé sur la moitié gauche de sa colonne */
@media (min-width:1800px){
  .temps__i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);align-items:start}
  .temps__i > *{grid-column:1}
  .temps__i > .temps__releve{grid-column:2;grid-row:2 / span 2;margin:0}
}

/* Le mouvement le long des deux filets, lié au défilement : un trait violet
   descend la frise avec un point à sa pointe, et allume chaque jalon qu'il
   atteint ; le filet de la démarche se remplit de gauche à droite. Rien ne
   bouge si le visiteur limite les animations ; sans prise en charge du
   navigateur, les filets restent noirs, le texte n'est jamais masqué. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .demarche{view-timeline-name:--demarche}
    .demarche::before{content:"";position:absolute;left:0;right:0;top:-1.5px;height:2px;background:var(--accent);
      transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
      animation:demarche-fil linear both;animation-timeline:--demarche;animation-range:cover 12% cover 42%}
    .temps{view-timeline-name:--frise}
    .temps::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:2px;background:var(--accent);
      transform-origin:50% 0;transform:scaleY(0);pointer-events:none;
      animation:frise-fil linear both;animation-timeline:--frise;animation-range:cover 50vh cover calc(100% - 50vh)}
    .temps::after{content:"";position:absolute;left:-5px;top:0;bottom:0;width:9px;pointer-events:none;
      background:radial-gradient(circle,var(--accent) 0 3.6px,transparent 4.4px) 50% 100%/9px 9px no-repeat;
      transform:translateY(-100%);
      animation:frise-point linear both;animation-timeline:--frise;animation-range:cover 50vh cover calc(100% - 50vh)}
    /* le jalon s'allume quand la pointe passe sur lui (son centre est à
       12 px sous le haut de son temps) */
    .temps__i{view-timeline-name:--jalon}
    .temps__i::before{animation:frise-jalon linear both;animation-timeline:--jalon;animation-range:cover calc(50vh + 2px) cover calc(50vh + 22px)}
  }
}
@keyframes demarche-fil{to{transform:scaleX(1)}}
@keyframes frise-fil{to{transform:scaleY(1)}}
@keyframes frise-point{to{transform:translateY(0)}}
@keyframes frise-jalon{to{background:var(--accent);box-shadow:0 0 0 5px rgba(84,51,168,.16)}}

/* ---------- nos études : le texte et sa légende à gauche, la coupe à droite ---------- */
.etudes__tete{row-gap:0;align-items:start;grid-template-areas:"titre" "texte" "dessin" "legende"}
.etudes__tete h2{grid-area:titre}
.opportunite{grid-area:texte;margin:clamp(14px,1.6vw,24px) 0 0;max-width:62ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
.opportunite strong{font-family:var(--f-display);font-weight:600}
.opportunite a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
.coupe{grid-area:dessin;position:relative;width:100%;max-width:720px;margin:clamp(28px,3vw,40px) auto 0}
.coupe .icone{display:block;width:100%;height:auto;stroke-width:1.75}
.coupe .leger{stroke-opacity:.34}
.coupe .violet{stroke:var(--accent)}
/* les repères numérotés : des pastilles posées sur le dessin, toujours
   lisibles quelle que soit sa taille (le filet est une ombre, pas un cadre) */
.coupe__n,.coupe__num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ground);
  box-shadow:inset 0 0 0 1.5px var(--ink);font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1;color:var(--ink)}
.coupe__n{position:absolute;margin:-12px 0 0 -12px}
/* les pastilles arrivent avec le dessin qui se trace (sans script, elles sont là) */
.anime .coupe__n{opacity:0;transition:opacity .5s ease 1.1s}
.anime .coupe .icone.vu ~ .coupe__n{opacity:1}
.coupe__n--1{left:51%;top:15.4%}
.coupe__n--2{left:27.5%;top:48.6%}
.coupe__n--3{left:50.3%;top:81.1%}
.coupe__n--4{left:93.3%;top:78.4%}
.coupe__n--5{left:78.7%;top:40.5%}
.coupe__legende{grid-area:legende;list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0;display:grid;row-gap:10px;max-width:62ch}
.coupe__legende li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;font-size:var(--t-second);line-height:1.45}
.coupe__num{margin-top:.02em}
@media (min-width:561px) and (max-width:1099px){
  /* même écart que les grilles de la page : la seconde colonne tombe sur la leur */
  .coupe__legende{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);max-width:none}
}
@media (min-width:1100px){
  .etudes__tete{grid-template-areas:"titre dessin" "texte dessin" "legende dessin";grid-template-rows:auto auto 1fr}
  .coupe{margin:0;align-self:start}
}

/* ---------- les cartes : au survol, la photo s'approche et la ligne
   d'horizon de la charte se tire sous elle ; le texte ne bouge pas ---------- */
.cartes .carte__photo{position:relative}
.cartes .carte__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#080D2B,#17235C 22%,#2C3AA6 48%,#6B3FB5 74%,#B79BE2);
  transform:scaleX(0);transform-origin:0 50%}
.carte:focus-within .carte__photo::after{transform:scaleX(1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cartes .carte__photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .cartes .carte__photo::after{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .carte:hover .carte__photo::after{transform:scaleX(1)}
}

/* ---------- le coût global : la bande d'encre porte la lecture et la figure ---------- */
#cout{margin-top:clamp(44px,5vw,96px)}
.cout{align-items:start}
.cout h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0}
.cout__lecture{margin:clamp(18px,2vw,28px) 0 0;display:grid;row-gap:clamp(14px,1.5vw,22px);max-width:46ch}
.cout__lecture dt{font-family:var(--f-display);font-weight:600;font-size:var(--t-second);line-height:1.3;letter-spacing:-.01em}
.cout__lecture dd{margin:4px 0 0;font-size:var(--t-base);line-height:1.55;text-wrap:pretty}
/* le temps de retour, en violet clair sur l'encre (7,3 de contraste),
   comme son accolade dans la figure */
.cout__lecture .retour dt{color:#A98CFF}
.cout__lecture .retour dt::after{content:"";display:inline-block;width:30px;height:7px;margin-left:10px;
  border:solid #A98CFF;border-width:0 2px 2px;vertical-align:.12em}
.encre .figure .f-retour{fill:none;stroke:#A98CFF;stroke-width:2}
.encre .figure .f-retour-t{fill:#A98CFF;font-weight:600}
.encre .figure .f-point--retour{stroke:#A98CFF}

/* ce que le coût global intègre */
#postes{padding-top:clamp(28px,3vw,56px)}
.postes__tete{align-items:end}
.postes__tete .bloc__phrase{max-width:24ch}
.cout__lead{margin:0;max-width:60ch;text-wrap:pretty}
.cout__postes{margin-top:clamp(24px,2.6vw,44px)}

/* ---------- les aides ---------- */
.aides__tete{align-items:baseline}
.aides__phrase{margin:0;max-width:48ch;font-size:var(--t-base);line-height:1.45;text-wrap:pretty}
.aides .item__tete{display:block;margin-bottom:clamp(18px,2vw,28px)}
/* le Fonds Chaleur : le plafond, qui mène à sa source */
.aide__n{display:inline-flex;align-items:baseline;gap:.22em;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.6rem,4vw,4.2rem);line-height:1;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.aide__n .aide__env{font-size:.3em;font-weight:600;letter-spacing:0}
.aide__n .aide__u{font-size:.5em;font-weight:600;letter-spacing:0}
.aide__n:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.aide__n:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.aide__l{display:block;margin-top:12px;font-size:var(--t-mention);line-height:1.45;max-width:30ch;text-wrap:balance}
@media (min-width:1100px){
  .aides__tete{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(clamp(14px,1.5vw,30px) + 2 * var(--retrait))}
  .aides__phrase{grid-column:2 / -1}
  .postes__tete{grid-template-columns:repeat(2,minmax(0,1fr));align-items:baseline}
}
@media (min-width:1700px){
  .postes__tete{grid-template-columns:repeat(4,minmax(0,1fr))}
  .postes__tete .bloc__phrase{grid-column:1 / 3}
  .postes__tete .cout__lead{grid-column:3 / -1}
}
/* les coefficients du Coup de pouce : trois barres qui se tirent à l'arrivée */
.coefs{margin:0;max-width:340px}
.coefs .icone{display:block;width:100%;height:auto;stroke:none;overflow:visible}
.coefs .c-barre{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:butt}
.coefs text{stroke:none}
.c-txt{font-family:var(--f-body);font-size:15px;fill:var(--ink)}
.c-val{font-family:var(--f-display);font-size:18px;font-weight:700;fill:var(--ink)}
/* de 901 à 1099 px, trois colonnes étroites : le dessin descend aux sept dixièmes */
@media (min-width:901px) and (max-width:1099px){.coefs .c-txt{font-size:18px}.coefs .c-val{font-size:20px}}
.anime .coefs .c-val{opacity:0;transition:opacity .5s ease 1.2s}
.anime .coefs .vu .c-val{opacity:1}
/* la démarche EnR'Choix en trois pas, reliés par un filet violet */
.enrchoix{list-style:none;margin:0;padding:0;display:grid;row-gap:14px}
.enrchoix li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;align-items:start;
  font-size:var(--t-mention);line-height:1.4}
.enrchoix li > span{padding-top:7px}
.enrchoix .icone{width:34px}
.enrchoix .violet{stroke:var(--accent)}
.enrchoix li:not(:last-child)::after{content:"";position:absolute;left:16.25px;top:39px;bottom:-11px;width:1.5px;background:var(--accent)}
.enrchoix strong{font-family:var(--f-display);font-weight:600}

/* ---------- porte-strategie-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Version 3 du 16/09/2026, construite sur les choix d'Alexandre dans l'atelier
   des pages : page courte, titre et chapeau de la case de l'accueil, l'enjeu,
   les cinq études, pas de méthode, pas de partie « carbone de la rénovation ».
   Sa note : dire qu'on répond à des besoins qui ne figurent pas sur les autres
   pages (outils, méthodes, recherche, projection des prix de l'énergie,
   carbone des scénarios de rénovation, partenaires pour l'IA).
   Photos E11 (haut) et S4 (études). La version 2 est dans _archives/. */
.ouverture{--photo:url(images/photo-haut-strategie-e11.webp)}
/* au téléphone, la tour de béton plutôt que le mur végétal (17/09) */
@media (max-width:560px){.ouverture{--photo-pos:15% 50%}}

/* l'enjeu : la phrase et sa suite à gauche, le décrochage à droite */
.enjeu{display:grid;gap:clamp(28px,3vw,56px)}
.enjeu__suite{margin:clamp(16px,1.8vw,28px) 0 0;max-width:48ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
/* au téléphone, « l'actif » passe sous son trait : les pointillés le
   touchaient (relecture du 17/09) */
@media (max-width:560px){.enjeu .f-lab--actif{transform:translateY(58px)}}
/* trois actifs : seul celui du milieu porte le violet, les deux autres
   restent à l'encre (la touche de violet ne prend que le trait principal) */
.enjeu .f-trait--ink,.enjeu .f-point--ink{stroke:var(--ink)}

/* la partie AMO : le texte et, en regard, le nuage des bâtiments d'un parc
   (17/09 : « inspire-toi de ce genre de graphique, stylisé et simplifié »,
   d'après ses propres synthèses de parc) */
.mesure__tete{display:grid;gap:clamp(24px,2.6vw,44px);margin-bottom:clamp(28px,3vw,52px)}
@media (min-width:1100px){
  .mesure__tete{grid-template-columns:minmax(0,1fr)}
}
/* 18/09 : « le graphique en plus grand, les axes titrés, un numéro sur les
   ronds, pas de paragraphe en dessous » */
.nuage{margin:0;max-width:1100px}
.nuage svg{display:block;width:100%;height:auto;overflow:visible}
/* dans la section inversée, les jetons d'encre restent sombres : le dessin
   prend la couleur du texte de la section */
.nuage .f-axe line,.nuage .f-axe path{stroke:currentColor;stroke-width:1.2;fill:none;opacity:.6}
.nuage__zero{stroke:currentColor;stroke-width:1;stroke-dasharray:4 5;opacity:.45}
.nuage__ronds circle{fill:none;stroke:currentColor;stroke-width:1.6}
.nuage__ronds .nuage__r--fort{stroke:var(--accent);stroke-width:2.2}
/* la figure est réduite dans sa colonne : le texte est écrit grand dans le
   dessin pour rester au-dessus de 12 px à l'écran */
.nuage__t text{font-size:15px;fill:currentColor;opacity:.85}
/* au téléphone, le dessin est réduit de moitié : les titres grossissent, les
   numéros s'effacent (ils ne tiendraient pas entre les ronds) */
@media (max-width:760px){.nuage__t text{font-size:29px}.nuage__t text:last-child{display:none}}
@media (min-width:1100px){.enjeu{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:start}}

/* la photo des études, sur la gouttière */
.bande-photo{margin:0;aspect-ratio:21/7;overflow:hidden;background:var(--ink)}
.bande-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.bande-photo{aspect-ratio:3/2}}

/* le sur-mesure, sur l'encre */
#sur-mesure{margin-top:clamp(44px,5vw,96px)}
.mesure h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0;max-width:22ch;text-wrap:balance}
.mesure__intro{margin:clamp(14px,1.6vw,24px) 0 0;max-width:60ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
.mesure .grille > .item{border-top:1px solid var(--ground);padding-top:var(--s4)}
.mesure .item h3{color:var(--ground)}

/* ---------- ressources-en ---------- */
/* @COMPOSANTS@ */

/* --- propre à la page ---
   Jumelle anglaise de ressources.src.html. La feuille de style est celle de
   la page française, à l'identique : toute retouche se fait sur les deux
   fichiers à la fois, sinon les deux versions divergent. L'historique des
   choix (haut de page en texte seul, bande d'encre pour le BREEAM, recueil
   des sources en quelques lignes) est dans le fichier français. */
.page{--ecart:clamp(28px,4vw,72px)}

/* le haut de page, en texte seul */
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:16ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:54ch;font-size:clamp(1.1875rem,1.4vw,1.45rem);line-height:1.5;text-wrap:pretty}

/* les fiches : le titre est le lien */
.fiches h3 a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}

/* la sous-page BREEAM et HQE, sur l'encre : le titre à gauche, le texte et
   le bouton sur la deuxième colonne des fiches à partir de 1100 px */
#certification{margin-top:clamp(44px,5vw,96px)}
.detail{display:grid;row-gap:clamp(16px,1.8vw,28px)}
.detail h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0;max-width:16ch;text-wrap:balance}
.detail p{margin:0;max-width:56ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
.detail .detail__suite{margin-top:var(--s5)}
/* 21/09 : un seul bouton par page, « Nous contacter » ; tout autre renvoi
   est un lien souligné (même règle que .certif__suite sur Conception). */
.detail .detail__suite a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* les crochets du bouton, à la couleur du texte de la bande */
.encre .btn::before,.encre .btn::after{border-color:var(--ground)}
@media (min-width:1100px){
  .detail{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ecart);align-items:start}
}

/* le recueil : le rang à gauche, son rôle sur la deuxième colonne */
@media (min-width:761px){
  .recueil .rangees{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ecart)}
  .recueil .rangees p{grid-column:2}
}
.recueil__note{margin:clamp(24px,2.6vw,40px) 0 0;max-width:62ch;text-wrap:pretty}

/* ---------- pages légales (feuille partagée) ---------- */
/* ==========================================================
   Simeal — feuille commune aux pages légales
   Mentions légales et données personnelles partagent exactement la même
   mise en page. Elle vivait en double dans les deux fichiers ; deux copies
   divergent toujours, et la divergence ne se voit que le jour où l'on
   modifie l'une des deux.

   Injectée par assembler.py à la place du jeton @LEGAL@.
   ========================================================== */

/* Une page qu'on lit en diagonale pour y trouver une ligne : la colonne est
   plus étroite que sur les pages de fond, et chaque information porte son
   étiquette. */
.legal{padding:var(--s7) 0}
/* l'ancre vise la section, dont le titre arrive 3 rem plus bas : on remonte la
   cible d'autant, pour que le titre se place juste sous le bandeau (21/09) */
.legal{scroll-margin-top:calc(8px - var(--s7))}   /* le titre arrive alors a une centaine de pixels du haut */
/* un lien du sommaire pose le titre à 64 px du haut, comme sur les autres
   pages : l'étiquette à 24 px, le titre 40 px plus bas (17/09) */
/* 21/09 : le decalage d'ancre est fixe une fois pour toutes dans
   _composants.css (hauteur du bandeau collant) ; la section legale n'ajoute
   plus le sien, qui glissait la cible sous le bandeau (mesure : -24 px) */
.legal .wrap{max-width:52rem}
.legal h2{font-size:var(--t-h3);margin-bottom:var(--s5)}
.legal h3{font-size:var(--t-second);margin:var(--s6) 0 var(--s3)}
.legal p{max-width:70ch}
.legal p + p{margin-top:var(--s4)}

/* Registre : une étiquette, une valeur. En grille au large, empilé sur
   téléphone — un <dl> nu se lit mal dans les deux cas. */
.reg{display:grid;grid-template-columns:14rem 1fr;gap:0;margin:var(--s6) 0 0;
  border-top:1px solid var(--rule)}
.reg dt{padding:var(--s4) var(--s5) var(--s4) 0;font-size:var(--t-mention);
  letter-spacing:.04em;color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--rule)}
.reg dd{margin:0;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
@media (max-width:640px){
  .reg{grid-template-columns:1fr}
  .reg dt{padding-bottom:0;border-bottom:0}
  .reg dd{padding-top:var(--s2)}
}

/* Ce qui attend le Kbis. Rouge, souligné, impossible à publier par
   distraction : la chaîne de publication refuse de construire tant qu'il en
   reste un. */
.attente{color:var(--alerte,#B4471F);background:var(--alerte-soft,#FBF0EC);
  padding:.1em .4em;border-radius:2px;font-weight:600;
  font-size:.9375em;white-space:nowrap}

/* 22/09/2026, version anglaise des pages legales. L avertissement de
   traduction, qui dit laquelle des deux versions engage, et les notes qui
   expliquent a un lecteur etranger un sigle francais (SIREN, RCS). */
.legal__traduction{margin-top:var(--s4);max-width:56ch;font-size:var(--t-mention);color:var(--ink-3)}
.legal__note{margin-top:var(--s6)}

/* ---------- sources, confinee sous .recueil ----------
   Sa charte est complete et porte les memes noms de jetons que
   celle du site : la laisser globale ecraserait le site entier. */
.recueil{--ground:#FFFFFF; --ink:#0B0B12; --ink-2:#4E4E60; --ink-3:#68687C;
  --rule:#E4E4EE; --rule-strong:#C6C6D6;
  --n1:#080D2B; --n2:#17235C; --n3:#2C3AA6; --n4:#6B3FB5; --n5:#B79BE2;
  --accent:#5433A8; --lilas:#B79BE2; --accent-soft:#F1ECFA;
  --cta:#E4DEF6; --cta-ink:#0B0B12;
  --ok:#1F6B4A; --attente:#7A5A16; --alerte:#9B2226;
  --f-display:"Syne",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.375rem; --t-xl:1.875rem; --t-2xl:2.5rem; --t-3xl:3.25rem;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:5rem; --s9:7rem;
  --r:2px; --col:1060px;
   
  --t-mention:.9375rem; --t-second:1.0625rem; --gouttiere:12rem;--wp--preset--color--ground:var(--ground);--wp--preset--color--ink:var(--ink);--wp--preset--color--ink-2:var(--ink-2);--wp--preset--color--ink-3:var(--ink-3);--wp--preset--color--rule:var(--rule);--wp--preset--color--rule-strong:var(--rule-strong);--wp--preset--color--accent:var(--accent);--wp--preset--color--accent-soft:var(--accent-soft);--wp--preset--color--cta:var(--cta)}
.recueil{scroll-behavior:smooth;scroll-padding-top:calc(var(--tete-h,84px) + 12px)}
@media (prefers-reduced-motion: reduce){
.recueil{scroll-behavior:auto}
}
.recueil *{box-sizing:border-box}
.recueil{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);line-height:1.62;-webkit-font-smoothing:antialiased}
.recueil h1, .recueil h2, .recueil h3{font-family:var(--f-display);margin:0;line-height:1.08;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.recueil p{margin:0;max-width:66ch}
.recueil a{color:var(--accent)}
.recueil a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.recueil .wrap{max-width:var(--col);margin:0 auto;padding:0 var(--s5)}
.recueil .eyebrow{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s4);font-weight:600}
.recueil .chapo{color:var(--ink-2);font-size:var(--t-md);margin-top:var(--s4)}
.recueil .apres{color:var(--ink-2);font-size:var(--t-sm);margin-top:var(--s5)}
.recueil .hero{padding:var(--s9) 0 var(--s8)}
.recueil .hero h1{font-size:clamp(2rem,3.6vw,3.6rem);letter-spacing:-.045em;line-height:1}
.recueil .etat{margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.recueil .etat strong{color:var(--ink)}
.recueil .sec{padding:var(--s8) 0;border-top:1px solid var(--rule)}
.recueil .sec h2{font-size:var(--t-2xl);text-transform:lowercase;margin-bottom:var(--s4)}
.recueil .sec--inverse + .sec{border-top:0}
.recueil .sec--inverse{--ground:#0B0B12; --ink:#FFFFFF; --ink-2:#A6A6BA; --ink-3:#7C7C96;
  --rule:#232336; --rule-strong:#3A3A54;
  --accent:#A98CFF; --lilas:#D9C6F5; --accent-soft:#1B1630;
  background:var(--ground); color:var(--ink); border-top:0;--wp--preset--color--ground:var(--ground);--wp--preset--color--ink:var(--ink);--wp--preset--color--ink-2:var(--ink-2);--wp--preset--color--ink-3:var(--ink-3);--wp--preset--color--rule:var(--rule);--wp--preset--color--rule-strong:var(--rule-strong);--wp--preset--color--accent:var(--accent);--wp--preset--color--accent-soft:var(--accent-soft)}
.recueil .rangs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6) var(--s6);margin-top:var(--s6)}
.recueil .rang{border-top:1px solid var(--rule-strong);padding:var(--s4) 0 0;display:flex;flex-direction:column;gap:var(--s3)}
.recueil .rang__n{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.recueil .rang h3{font-size:var(--t-lg)}
.recueil .rang p{font-size:var(--t-sm);color:var(--ink-2)}
.recueil .rang__c{margin-top:auto;font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.recueil .theme{font-size:var(--t-lg);margin:var(--s7) 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.recueil .fiches{display:flex;flex-direction:column}
.recueil .fiche{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.recueil .fiche, .recueil tr[id], .recueil .liste__i{scroll-margin-top:var(--s6)}
.recueil .fiche:target{box-shadow:-var(--s3) 0 0 0 var(--accent)}
.recueil .fiche:target{box-shadow:inset 3px 0 0 0 var(--accent);padding-left:var(--s4)}
.recueil .fiche__dit{font-size:var(--t-md);margin-bottom:var(--s4)}
.recueil .fiche__meta{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);font-size:var(--t-sm);align-items:baseline;margin:0}
.recueil .fiche__meta dt{color:var(--ink-3);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.recueil .fiche__meta dd{margin:0}
.recueil .fiche__note{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s3);line-height:1.55}
.recueil .badge{display:inline-block;margin-left:var(--s3);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.recueil .badge--r1{color:var(--accent)}
.recueil .badge--r2{color:var(--ink-2)}
.recueil .badge--r3{color:var(--ink-3)}
.recueil .badge--metier{color:var(--ink-2)}
.recueil .etat--ok{color:var(--ok);font-weight:600}
.recueil .etat--attente{color:var(--attente);font-weight:600}
.recueil .etat--alerte{color:var(--alerte);font-weight:600}
.recueil .etat--metier{color:var(--ink-2);font-weight:600}
.recueil .liste{border-top:1px solid var(--rule);margin-top:var(--s6)}
.recueil .liste__i{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.recueil .liste__i::before{content:"";position:absolute;left:calc(var(--s5) * -1);top:var(--s5);
  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;}
.recueil .liste__i:hover::before{transform:scaleX(1);opacity:1}
.recueil .liste__t{font-family:var(--f-display);font-size:var(--t-md);font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.recueil .liste__m{font-size:var(--t-xs);white-space:nowrap}
.recueil .liste__m .badge{margin-left:0}
.recueil .liste__d{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-2)}
.recueil .tbl{overflow-x:auto;margin-top:var(--s6)}
.recueil table{border-collapse:collapse;width:100%;font-size:var(--t-sm);min-width:640px}
.recueil th, .recueil td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);vertical-align:top}
.recueil th{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.recueil tr:target td{box-shadow:inset 0 -2px 0 0 var(--accent)}
.recueil td .badge{margin-left:0}
@media (prefers-reduced-motion:reduce){
.recueil *{transition-duration:.01ms !important}
}
@media (max-width:640px){
.recueil .fiche__meta{grid-template-columns:1fr;gap:0}
.recueil .fiche__meta dt{margin-top:var(--s3)}
.recueil .sec{padding:var(--s7) 0}
.recueil .fiche__meta dd a, .recueil td a{display:inline-flex;align-items:center;min-height:44px}
}