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