/* ENGENDRE par construire-theme.py depuis 04-contenu/accueil.src.html. */
/* --- 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(../img/site/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(../img/site/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(../img/site/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 (­) :
   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}
}