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