/* ENGENDRE par construire-theme.py depuis 04-contenu/_composants.css. */
/* ==========================================================================
   Les briques de l'accueil validé (16/09/2026), pour les pages qui suivent.
   Injectées par l'assembleur au jeton /* @COMPOSANTS@ * /. L'accueil garde
   encore sa propre copie de ces règles : les fusionner quand toutes les pages
   seront construites (et vérifier l'accueil au contrôle, format par format).

   « Garde cette même direction artistique » : mêmes verticales, même
   respiration, même haut de page photo (un peu moins haut), mêmes repères
   chiffrés, même méthode numérotée, même bouton de fin. Noir et blanc, aucun
   aplat gris, aucun cadre.
   ========================================================================== */

.page{--gouttiere:clamp(16px,2.6vw,72px);--respire:clamp(28px,3.4vw,72px);--retrait:26px}
@media (max-width:560px){.page{--retrait:18px}}

/* le fond de nuages de l'accueil ; le ciel en canevas ne sert pas ici */
#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}}
/* 17/09 : « je ne veux pas moins d'animation pour le moment » : la dérive,
   retirée une heure pour la fluidité, est remise ; la fluidité se réglera en
   ligne */

.large{width:100%;max-width:2100px;margin:0 auto;padding-inline:var(--gouttiere)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- haut de page photo ----------
   La photo de la page se déclare dans la page : .ouverture{--photo:url(…)}.
   Sur l'accueil, presque tout l'écran ; ailleurs (.ouverture--page), un peu
   moins, pour que la suite se devine. */
.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)))}
/* .ouverture--page garde la hauteur de l'accueil : la réduire était une
   initiative de Claude, pas un choix d'Alexandre (relecture du 16/09) */
/* le mode d'essai renforcé de l'accueil (data-effets sur .page) */
/* 21/09 : « le mouvement de l'image en haut de page n'est pas fluide ». Le
   souffle animait la propriete « scale », recalculee avec le fond a chaque
   image ; il passe par « transform », que la carte graphique compose seule.
   Au telephone, il est coupe : l'ecran est petit, le gain est nul et le
   telephone rame (« de la latence pour afficher les elements »). */
.page[data-effets="renforces"] .ouverture__fond{inset:-20% 0}
@media (min-width:761px){
  .page[data-effets="renforces"] .ouverture__fond{animation:souffle 22s ease-in-out infinite alternate !important}
}
/* 23/09 : le souffle animait « transform », et sa regle porte !important :
   il ecrasait donc le transform que le script pose au defilement, et le
   glissement de la photo n avait aucun effet au-dessus de 761 px. Il repasse
   sur « scale », propriete independante du transform, comme sur l accueil. */
/* 23/09, accord d Alexandre : la respiration est reduite de quelques pour cent.
   Depuis que le glissement agit vraiment, les deux grossissements se composent
   au lieu de s ecraser, et la photo passait le seuil de nettete du controle. */
@keyframes souffle{from{scale:1.01}to{scale:1.07}}
/* 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}
/* au téléphone, le titre court sur toute la largeur : le voile aussi */
@media (max-width:760px){.ouverture::after{background:linear-gradient(90deg,rgba(11,11,18,.86),rgba(11,11,18,.62))}}
.ouverture__fond{position:absolute;inset:-12% 0;background:var(--photo) var(--photo-pos,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)}

/* ---------- repères chiffrés, centrés, chacun un lien vers sa source ---------- */
.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;margin:0;align-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)}
.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__u{font-size:.42em;font-weight:600;letter-spacing:0;margin-left:.12em}
/* un mot devant le nombre (« PRP ») : plus petit, détaché */
.grandeur__env--mot{font-size:.34em;letter-spacing:.04em;margin-right:.3em}
.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}
@media (max-width:760px){.grandeurs{grid-template-columns:1fr;row-gap:36px}}

/* ---------- une section de texte en colonnes ----------
   Même verticale que tout le texte, même titre que la méthode de l'accueil.
   .grille--2 / --3 / --4 : autant de colonnes, qui se replient. */
.bloc{padding-block:clamp(44px,5vw,96px) 0;
  /* l'ancre vise la section, dont le titre arrive apres sa marge haute : on
     remonte la cible d'autant, pour que le titre se place pres du haut (21/09) */
  scroll-margin-top:calc(12px - clamp(44px,5vw,96px))}
/* un lien vers une section fait atterrir son titre à 64 px du haut, comme
   la méthode de l'accueil (le bandeau se cache en descendant) */
/* 21/09 : « quand on clique sur une source, on doit arriver au bon endroit ».
   Le bandeau est collant : sans ce decalage, la cible d'une ancre se glissait
   dessous (mesure : 6 px du haut sur les fiches, -24 px sur la confidentialite).
   Une seule regle pour toutes les pages et toutes les ancres. */
html:root{scroll-padding-top:calc(var(--tete-h) + 10px)}
.bloc__in{max-width:2100px;margin:0 auto;padding-inline:calc(var(--gouttiere) + var(--retrait))}
/* 22/09/2026 : « un peu serré là ». Quand une section s'ouvre sur une photo
   pleine largeur, le titre qui suit prend une respiration complète, au lieu
   de se coller au bas de l'image. */
.bloc > .large:has(> .bande-photo) + .bloc__in{margin-top:clamp(56px,6vw,104px)}
.bloc h2{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance}
.bloc__chapeau{margin:clamp(14px,1.6vw,24px) 0 0;max-width:60ch;font-size:var(--t-base);text-wrap:pretty}
.grille{display:grid;gap:clamp(28px,3vw,64px) clamp(28px,4vw,72px);margin-top:clamp(28px,3vw,56px)}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1699px){.grille--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grille--3{grid-template-columns:1fr}}
@media (max-width:760px){.grille--2,.grille--4{grid-template-columns:1fr}}
.item{min-width:0}
/* les rangées d'une même ligne de colonnes (tête, titre, texte, note) partent
   ensemble, même quand un titre prend une ligne de plus */
.grille > .item{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-items:start}
/* l'écart entre deux rangées de colonnes est porté par les colonnes elles-mêmes :
   posé sur la grille, il s'ajoutait aussi entre les rangées internes vides
   (pas d'icône, pas de note) et creusait un vide sous chaque rangée (17/09) */
.grille{row-gap:0;margin-bottom:calc(-1 * clamp(28px,3vw,64px))}
.grille > .item{margin-bottom:clamp(28px,3vw,64px)}
.grille--5{margin-bottom:0}
@media (max-width:1899px){.grille--5 > .item{margin-bottom:0}}
.item__tete{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3)}
.item__num{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,2.2vw,2.2rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.item 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}
.item p{margin:0;max-width:none;text-wrap:pretty}
.item p + p{margin-top:var(--s3)}
.item__meta{display:block;margin-top:var(--s3);font-size:var(--t-mention);line-height:1.5;color:var(--ink-2);text-wrap:balance}
.item__meta a{color:inherit;text-decoration:none}
.item__meta a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* un exposant (1er) ne décale pas l'interligne, où qu'il soit (relecture du 17/09) */
sup{line-height:0}

/* une frise de cinq temps (phases d'un projet) : une ligne sur grand écran */
.grille--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1899px){
  .grille--5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(18px,2vw,32px)}
  .grille--5 > .item{grid-column:1/-1;grid-row:auto;grid-template-columns:subgrid;grid-template-rows:auto auto;align-items:baseline}
  .grille--5 > .item .item__tete{grid-column:1;grid-row:1;margin:0}
  .grille--5 > .item h3{grid-column:1;grid-row:2;margin:0}
  .grille--5 > .item p{grid-column:2/-1;grid-row:1/span 2;align-self:center}
}
@media (max-width:760px){.grille--5{grid-template-columns:1fr}.grille--5 > .item{display:block}
  .grille--5 > .item h3{margin:0 0 var(--s3)}.grille--5 > .item .item__tete{margin-bottom:var(--s3)}}

/* des rangées : l'intitulé dans la première colonne, le texte dans les deux
   suivantes, sur la même trame que les grilles à trois colonnes ; séparées
   par l'air seulement (« liste » porte un filet dans la charte) */
.rangees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px) clamp(28px,4vw,72px);
  margin-top:clamp(28px,3vw,56px);align-items:baseline}
.rangees h3{grid-column:1;font-size:clamp(1.2rem,1.1rem + .35vw,1.5rem);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.rangees p{grid-column:2/-1;margin:0;max-width:62ch;text-wrap:pretty}
@media (max-width:760px){.rangees{grid-template-columns:1fr;row-gap:6px}.rangees h3,.rangees p{grid-column:1}.rangees p{margin-bottom:var(--s5)}}

/* une phrase d'enjeu, en grand, sur la verticale du texte */
.bloc__phrase{margin:0;max-width:30ch;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}

/* pour aller plus loin : des liens simples vers les fiches */
.liens{display:flex;flex-wrap:wrap;gap:var(--s3) clamp(20px,3vw,48px);margin:clamp(20px,2.4vw,36px) 0 0;padding:0;list-style:none}
.liens a{font-family:var(--f-display);font-weight:600;font-size:clamp(1.05rem,1.2vw,1.25rem);color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* un mot qui ne se coupe pas du suivant, sur grand écran seulement */
@media (min-width:761px){.insecable{white-space:nowrap}}
/* un groupe qui ne se coupe jamais (« vingt-cinq ans ») */
.sans-coupure{white-space:nowrap}

/* les pictogrammes au trait, qui se dessinent à l'arrivée ([data-icones]) */
.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,.icone rect{stroke-dasharray:1;stroke-dashoffset:0}
.anime .icone path,.anime .icone circle,.anime .icone rect{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.anime .icone.vu path,.anime .icone.vu circle,.anime .icone.vu rect{stroke-dashoffset:0}

/* ---------- les figures : des graphiques au trait, à l'encre ----------
   (« j'aime bien les graphiques », 16/09 ; sans violet ni aplat : le trait
   de l'accueil). Le texte du graphique grossit au téléphone, où le dessin
   rétrécit. */
.figure{margin:0}
.figure svg{display:block;width:100%;height:auto;overflow:visible}
.f-grille line{stroke:var(--ink);stroke-opacity:.16;stroke-width:1}
.f-axe line,.f-axe path{stroke:var(--ink);stroke-width:1.5;fill:none}
.f-trait{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.f-trait--leger{stroke-width:1.5;stroke-dasharray:6 7}
.f-repere{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 5;fill:none}
.f-point{fill:var(--ground);stroke:var(--ink);stroke-width:2.5}
.f-point--plein{fill:var(--ink)}
.f-barres rect{fill:var(--ink)}
.f-txt{font-family:var(--f-body);font-size:15px;fill:var(--ink)}
.f-lab{font-family:var(--f-display);font-size:17px;font-weight:600;fill:var(--ink);letter-spacing:-.01em}
.figure figcaption{margin-top:var(--s4);font-size:var(--t-mention);line-height:1.55;max-width:62ch;text-wrap:pretty}
.figure figcaption{color:inherit}
.figure figcaption a{color:inherit;text-underline-offset:2px}
/* au téléphone, la charte fait des liens de légende des pastilles encadrées :
   ici, aucun cadre (« pas de traits inutiles ») ; la cible tactile reste */
@media (max-width:760px){.figure figcaption a{display:inline;min-height:0;margin:0;border:0;border-radius:0;padding:0;text-decoration:underline}}
@media (max-width:760px){.f-txt{font-size:22px}.f-lab{font-size:25px}}
/* de 1100 à 1279 px, la figure tient dans une colonne de sept douzièmes :
   réduite aux trois quarts, son texte tombait à 11 px (relecture du 17/09) */
@media (min-width:1100px) and (max-width:1279px){.f-txt{font-size:17px}.f-lab{font-size:19px}}
/* la note part de l'axe vertical, posé à x = 60 sur les 760 unités du
   dessin (figures à axe de la maison) ; au téléphone, l'écart ne ferait que
   5 px : la note reste sur la colonne du texte */
/* 18/09 : l axe vertical est désormais au bord gauche du dessin (figures-axes.py) : la note part du même bord */
/* au téléphone, le dessin se lit à 30 px et plus ; les libellés longs
   passent dans une légende en texte sous la figure (relecture du 17/09) */
@media (max-width:560px){.f-txt{font-size:30px}.f-lab{font-size:34px}.f-long{display:none}}
/* sur les plus petits téléphones (360 px), le texte tombait à 11,5 px */
@media (max-width:379px){.f-txt{font-size:32px}.f-lab{font-size:36px}}
/* la même figure sur fond d'encre */
.encre .f-grille line{stroke:var(--ground)}
.encre .f-axe line,.encre .f-axe path,.encre .f-trait,.encre .f-repere{stroke:var(--ground)}
.encre .f-point{fill:var(--ink);stroke:var(--ground)}
.encre .f-point--plein{fill:var(--ground)}
.encre .f-barres rect{fill:var(--ground)}
.encre .f-txt,.encre .f-lab{fill:var(--ground)}

/* ---------- une section sur fond d'encre, sur la gouttière comme une case ---------- */
.encre{background:var(--ink);color:var(--ground);padding:clamp(40px,4.6vw,88px) var(--retrait)}
.encre h2,.encre h3{color:var(--ground)}
.encre a{color:var(--ground)}
/* 18/09 : plus de lignes sans fin sur fond d’encre (règle ligne-longue) ; une classe de la page l’emporte */
:where(.encre) p{max-width:68ch}

/* ---------- des cartes photo : la photo sur la gouttière, le texte en retrait ---------- */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3.6vw,64px) clamp(14px,1.5vw,30px);margin-top:clamp(28px,3vw,56px)}
.carte{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-items:start;min-width:0}
.carte > :not(.carte__photo){padding-inline:var(--retrait)}
.carte__photo{margin:0 0 var(--s4);aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.carte__photo img{display:block;width:100%;height:100%;object-fit:cover}
/* le sujet en haut de la photo (air/eau : ventilateurs entiers, 17/09) */
.carte__photo--haut img{object-position:50% 4%}
.carte 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}
.carte p{margin:0;max-width:none;text-wrap:pretty}
@media (max-width:1099px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cartes{grid-template-columns:1fr}.carte{grid-row:auto;grid-template-rows:none}}

/* une grille dont chaque colonne porte un filet noir, comme la méthode de l'accueil */
.grille--filets > .item{border-top:1px solid var(--ink);padding-top:var(--s4)}

/* ---------- le bouton de fin ---------- */
.fin{padding:var(--s7) 0 var(--s8)}
.fin .large{padding-left:calc(var(--gouttiere) + var(--retrait))}

/* ---------- le gabarit des graphiques à axes (18/09/2026) ----------
   « Fais des graphiques de la même largeur, aligne les axes des ordonnées
   avec le bord du texte à gauche. » Les figures écrites par
   02-design-system/figures-axes.py portent --vb (largeur du dessin, en
   unités) : le texte y garde la même taille à l'écran, quelle que soit la
   largeur de la colonne — 14 px, libellés 15 px ; 12,5 et 13,5 px au téléphone.
   tan(atan2(largeur, 1px)) donne la largeur du dessin en px, sans unité. */
.figure:has(> svg[style*="--vb"]){container-type:inline-size}
@supports (width:calc(1px * tan(atan2(1px, 1px)))){
  .figure > svg[style*="--vb"]{--e:calc(var(--vb) / tan(atan2(100cqw, 1px)))}
  .figure > svg[style*="--vb"] .f-txt{font-size:calc(14px * var(--e))}
  .figure > svg[style*="--vb"] .f-lab{font-size:calc(15px * var(--e))}
  @media (max-width:560px){
    .figure > svg[style*="--vb"] .f-txt{font-size:calc(12.5px * var(--e))}
    .figure > svg[style*="--vb"] .f-lab{font-size:calc(13.5px * var(--e))}
  }
}
.f-violet-txt{fill:var(--accent)}
.f-gris{fill:var(--ink-3)}
/* la légende des courbes, sous le dessin, calée sur le bord du texte */
.f-legende{display:flex;flex-wrap:wrap;gap:6px 22px;margin:var(--s3) 0 0;padding:0;list-style:none;
  font-size:var(--t-mention);line-height:1.5}
.f-legende li{display:flex;align-items:center;gap:8px}
.f-legende svg{width:30px;height:8px;overflow:visible;flex:none}

/* ---------- aperçu dans un cadre à pleine hauteur (21/09/2026) ----------
   La classe est posée par _composants.js quand la page ne défile pas
   elle-même : plus rien de fixe, donc plus rien à redessiner au défilement. */
.cadre-plein #ciel,.cadre-plein .nuages{position:absolute}
.cadre-plein .tete{position:static}
.cadre-plein .somm{position:static}