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